BeFor Web
为网而生 - 关注互联网及移动端产品的用户体验设计 - Since 2011

学习

提升Sketch使用效率的6个实用技巧 »

春节假期什么也没怎么发生便这么过掉了,新的春天倒是冷了起来,冰渣子和雨一类的随便什么也都下了一些的样子。

开工了,城市当中的人和车也忽然多了起来,一如既往的吵闹,于是我又开始期待下一个春节。小时候期待春节是指它本身,而如今所向往的,则是春节前后那几天里上下班路上不那么拥堵的生存状态。上海本身似乎并没那么多人,也许北京也是这样,也许任何一个所谓“机遇与挑战并存”的大城市都是如此 - 平日是生存与奋斗的竞赛,争先恐后不亦乐乎,春节了却又抛个“回家”的话题出来 - 蛮无聊的。whatever了。

一篇关于Sketch的文章,实用技巧一类,我先学习了。下面进入译文。

Sketch 3 - Bohemian Coding带给我们的这款优秀的设计工具,在速度及灵活性等方面的表现都是其竞争对手难以匹敌的。

我(英文原文作者)自己是一名自由交互设计师,很早就开始使用Sketch了,它已然成为我设计工作流程当中不可或缺的组成部分。我很愿意与各位分享自己的一些经验,例如本文当中介绍的6个技巧,就可以帮你有效提升Sketch的使用效率。

临摹,理解,启发,提升 »

很快要过年了倒是真的。却也完全感受不到。大约明天上班看到回家的同学留下的空座位时才会有那样的感觉吧;突然想起去年春节之前坐2号线下班时一车的人都安然出站而只有我被警察叔叔拦下搜包的段子,那所谓的警犬白白的真的很萌,搞不好是兼职小狗。

楼外突然开始放炮;厌恶至极。

这周末虽然只有一天休息,不过更新要做掉两篇。都很短,一篇关于日常积累,一篇关于对设计潮流的反思。其实说起来两篇当中的某些点看上去甚至互有矛盾;抓住核心就好,例如本篇作者平时是怎样关注产品并取其精华为我所用的。之前在一篇关于草图的文章当中我也提到自己喜欢对着随便什么应用用纸币临摹界面,差不多的样子 - 实际动手临摹,会比“看”更加投入。下面进入译文。

我(英文原文作者)每年都会设计不少应用,方法和技巧还是有一些的;其中之一,就是每天花很多时间去寻找和汲取灵感。

我会去看那些设计模式收集站点还有设计师的个人作品集,会去读UI设计相关的新闻,会去下载排名靠前的应用并仔细把玩。

Sketch 3视频教程专辑 »

本周末微忙,暂不做译文更新了。电视里小白龙正在砍九头虫。

之前从Youtube上扒下来一套Sketch 3视频教程,放在了Youku作为一套专辑。教程由LevelUpTuts出品,共19集,蛮全面的,也不是很长,适合准备接触或刚刚上手Sketch 3的同学用来入门。

话说Sketch本就没什么学习曲线倒是真的,界面风格、使用模式一类与Xcode、Keynote等等典型Mac应用工具如出一辙。

此外LevelUpTuts家还有不少其他方面的免费视频教程,只是都在Youtube,有兴趣的朋友请自便了。

让用户在输入密码时看到明文吧 »

漂亮的眼球图标。今天回金山海边爸妈家了。好静。不赶上节假日回去的话,便不会有那么多从城里过去的除了制造喧嚣和垃圾以外不会做任何事的人。2003年爸妈把家搬到那里,当时沿着海滩或海堤走着并不会有特别的感觉;十多年之后才知道那种宁静的珍贵。

这又是要怀旧的节奏吗,是又怎样?从来都觉得2003年是最完美的一年,朋友、家、乐队、感情、校园生活,都有新的发展和变化;暑假闷在寝室玩GTA,一首接一首的录demo,寒假便窝在海边的新家用当时难得的光纤宽带连线对战Aliens Versus Predator,晚上玩饿了就跑去逛逛卖场买点咖啡和泡面回来,爸妈也接受了我在家抽烟喝二锅头的事实,只是冬天夜里开窗通风的寒冷须由自己承担;呵,搞不好那时去海边溜一圈还会看见在月光下刺猹的少年闰土呢,如果猹没有冬眠一类的习性。

我知道这一切虽已成往事但都和冬夜里海浪拍打在堤石上发出的声音一样真实,这使我开心。生活早已变得不那么可爱,不过,无论白天还是夜晚总还是有很多事让自己觉得幸运,也是福气。

那么,有的没的扯完了,就放本周的更新吧;此外也开始在Beforweb的公众号上有的没的放一些所谓Inspirational Quotes了,都是版式还不错、对设计相关工作有所启发的英文引言,我自己很喜欢。下面进入译文。

在2012年时,我(英文原文作者)曾解释过为什么应该让人们在输入密码时看到明文,尤其是在移动设备上。两年过去了,相关的实践模式越来越多的进入我们的视野。

Sketch的一些常用技巧 »

吃好晚饭洗好了热热的一个澡。果然开始听相声了。嗓子痒又不高兴去抽烟的时候例如现在这样便很想吃润喉糖,最近一天能吃掉一条荷氏,也是够凉的说真的。

好了,继续更新前面提到的关于Sketch的话题。谈不上译文,汇总了一些文章当中介绍的tips,包括常用快捷键和一些小技巧。最后一条还蛮亮的,很实用,我怎么没想到这样做。

怎样从Sketch向Xcode自动导出图形资源 »

不太明白为什么元旦假期这么快就到最后一天了;不太明白为什么下周一的气温有21度,周二又降到8度;不太明白为什么到现在我还是一遍一遍的看着《编辑部的故事》。

不太明白为什么在本该安心的守着家人开心祥和的夜晚在外面看到那么多人拥挤在一处却仍要一门心思的扎进去只为什么跨年狂欢。还有多少人长着正常的人脑子?

我不觉得是我太宅了或是心态太老了。我觉得很多人错了。有些人还有知错的机会,有些人已经没了。

我也不觉得这些絮叨是负面的。话说今天这篇只是讲了一个实验性的小方法,不使用Sketch和Xcode的同学其实无需浪费时间了。下面进入正文。哦btw,新年快乐。

Bohemian Coding(Sketch的制作团队)发布过一款名为SketchTool的命令行工具,用来自动导出.sketch文件当中的界面和切片。

越来越多的设计师和开发者开始在iOS开发流程当中使用起Sketch。通常,整个流程中会包含很多重复性的工作,例如在Sketch当中修改设计方案,重新导出,然后将更新后的图形资源移入Xcode的Asset Catalogs当中,并再次运行Xcode项目以查看实际效果。

而通过SketchTool配合Xcode,这些都可以自动化完成。

怎样在Xcode 6中使用矢量图形 »

周末又要过掉了,沮丧。眼看进入深冬了,天气却越发春意盎然。话说2014年就要过去了么。这一两年下来,已经不太敢期待新的一年了;谁知还会有什么样的事情发生。

我发现自己在周末两天里会花费越来越多的时间玩游戏了。常年GTA,像是逃进另一个世界。IV,V,或是iOS上的SA,沉浸在里面,一点都不想出来。玩来玩去还是SA的感觉最暖最安心;游戏当中本就是初夏时节的LA情景,加上自己在2008年从5月到10月宅着的日子里时常在玩(当时还是PC,怎样也不会想到若干年后可以在手机或平板上玩;那年我在用诺基亚的歪脖子音乐机),所以现在一旦进入SA就会立刻感受到那种夏天的味道。

说正事儿吧。今次略技术向;其实已经见过汉化,我只是想自己做一遍。之前捣鼓了点东西,要适配6和Plus,自己做做切图才发现确实有够烦。基于矢量图生成PNG图形的方法也是事后才知道,学习下,希望接下来可以实践。下面进入译文。

iOS应用的视觉形式通常是以图形元素驱动的。在设计开发一款应用时,你需要不同规格的应用图标,例如不同尺寸的Default.png图片,同时还需要为UI的实现准备@1x和@2x图形资源。所有这些图形元素都会让你的产品看上去更吸引人,但弊端也是很明显的 - 你需要为每种规格的图形元素单独切图。而随着iPhone 6及Plus的发布,我们又多了一套@3x需要处理,事情变得越来越复杂。

幸运的是,苹果在Xcode 6当中给我们带来了一些很棒的工具用以管理图形资源。更棒的是,新的工具和实现方式可以帮我们从容的应对未来的iOS设备,例如基于Storyboard为iOS 8设备生成启动图片,这样你就无需再为不同的设备类型单独制作。此外还有一个非常重要的新功能,就是在应用构建阶段基于PDF图片文件自动生成各种规格的图形资源。本文中,我们就来一起探索一下这种能帮你节省大量时间成本的方法。

设计师+Xcode:突破产品开发的流程界线 »

入冬之后,喵的状况又有些让人牵挂;换季时节似乎特别容易不稳定;只是记得从前6年多没有这样的情况,而从去年开始喵的事就成了我心里最大的事。

和上周差不多,仍是看着小握的游戏解说,空调暖暖的;不同的是现在手边放着40度苏格兰保健饮品,还有一些麻辣零食;当然译文不是边喝边做,目下只是在把引言补完。我去了,这也能叫引言。

话说其实是强迫自己本周不做Apple Watch主题。一篇小文,好像随口讲了些故事而已,关于视觉设计师直接使用Xcode打造界面以提升产品开发效率的话题。必须说,要达到“iOS前端”的程度,很难不依靠一定程度的代码工作,但值得一学,值得一试。另外,读过这样的文章后,也会从另外一些角度来看待苹果从iOS 7开始推行新设计语言的一些初衷 - 让设计师和开发者都可以相对轻松一些的在开发环境中创建界面,实现设计方案。下面进入译文吧。

今年年初,我们团队与瑞典的一家叫做Billogram的创业公司进行了交流。他们希望通过更流水化的发票处理程序帮助中小型公司改善现金流状况。在初期的探讨当中,我们看到了将他们的服务移动化的巨大机遇,那将能够使客户随时随地把控他们的财务状况。

为Apple Watch进行设计的五点原则 »

风吹的蛮冷的。明天要降温将近10度吗。终于像冬天了。

之前在朋友圈念叨来着,最近对Apple Watch各种YY,幻想每天生活里哪些小任务可以经由这款设备而提升效率质量。越想越离不开,我想我应该买一块Sport深空灰配黑色表带那款吧。好想放到嘴里吃掉。

上周把Apple Watch界面设计规范全部放出,也是蛮多的。今天这篇类似于对其中一些设计要点的归纳提炼。进入译文。

在为Apple Watch进行设计时,以下五点是设计师们需要注意的:

Apple Watch界面设计规范(21) - 菜单图标 »

原文来自苹果官方于2014年11月发布的预备版本Apple Watch界面设计规范。相关信息及目录详见Apple Watch界面设计规范(预发布版本) - 目录。本文由C7210自发翻译,并首发于Beforweb.com。如需转载,请注明译者及出处信息。

情境菜单中的图标都是基于模板创建的,其中的图形样式是由alpha通道的形状决定的。图片文件中的颜色信息会被忽略。

图标的背景画布比图标当中的实际内容要大。图形四周的多余空间可以确保图标边缘与形状内容之间的框架足够清晰。

对于不同规格的Apple Watch,菜单图标的画布尺寸及图标内容尺寸见下表:

Pages