BeFor Web

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

眼看过年了，大家陆陆续续的放假回家了，我这首先给各位朋友们问个新年好了呗。

都说新年要有新气象，虽然眼下还没到日子，不过多少也开始憧憬接下来的日子了。其实按我的个性来说怎样也都该首先怀了个旧的，但是回头看看2012年，值得怀念的事情不是很多；虽然对自己来说整个一年几乎都在打基础做准备，但总体来讲还是遗憾与无奈占了大部头；还好，经过这一年的波折，无论如何我接下来还是可以看到不少希望的。这就不坏，不是吗。

假要好好放，年要好好过，Beforweb也不会耽误，今天不是周末发布的正日子，先上一期导读。之前也有提到过，2013年伊始建了个新的小博客，Beforapps.com，相比与Beforweb这里来讲没这么“正式”，内容篇幅都很短，主要用来从设计的角度记录自己平时试用试玩各种应用过程中的体验感受，而且偶尔也会有朋友以投稿或合作等方式参与进来发表些内容。

今天就选出前面的5篇，在这里做下索引，有兴趣的朋友就围观交流呗；如果哪位有兴趣也想念叨点什么的话，欢迎投个稿。目前没上正经的投稿功能，可以直接通过邮箱(coda7210的gmail)或微博与我联系。

几分钟前，还在睡梦里眼巴巴看着一种类似奶黄包的食物在微波炉里转悠，接下来便是刺耳的门禁电话声；瞬间从梦中惊醒，花了不到半秒思考并叨咕出“猫沙”二字，然后下床猛穿衣服，同时听到扛着20公斤猫沙的送货师傅那沉重的脚步愈来愈近...他来了！

然后我就坐在这整理了一下昨天做的差不多的译文准备发到博客上了，脑子里依然想着梦中那好像奶黄包一样的食物。前面几天，发布了一期导读，在里面搜罗了些设计作品集的参考资源，当时也提到要做相关文章来着，今天这篇便是了。说到这我又想起来，那篇导读的受欢迎程度真的有些超乎我想象，微博上转发的也比其他都多些...看来到了这时节，大家都有心更上一层楼了叭。闲话聊到这，进入正文呗。

如今，创意行业掀起的风浪比以往任何时期都更加猛烈，其中的竞争也越发残酷，作为设计师，想要脱颖而出已经是很困难的事情了。如果你还没有自己的设计作品集，那么情况对你来说也许会更加严峻。

从最基础的层面上讲，设计作品集就是你自己的广告，它可以告诉世界：“嘿，我在这！看看我能做的东西叭！” 除此之外，作品集也是你的名片和画廊，是你展示能力、技巧、项目经验的地方；同时，你还可以通过它来表达接下来打算做什么事情。对我(英文原文作者)个人来说，作品集还决定着人们是否会给我一份工作offer，或是找我合作项目。

作品集有着不同的展现形式，包括在线和印刷册等等，它们所具有的一些精髓是共通的；本文中，我们将把注意力集中在在线作品集这个方面。

Beforweb这个博客刚刚开始做的时候，搞过两期“导读文摘”的样子，推荐了一些自己最近看到的文章；后来掂量了一下，觉得意义不是很大，还不如把时间精力用在正经产出的内容方面；今次算是个例外了。

因为个人需求，最近搜罗了一些portfolio(设计作品集)方面的资源及方法文章，放着也是放着，不如汇总索引一下，有兴趣有需求的朋友可以前去围观。至于需求是什么，大家也心知肚明呗；对于设计师来说，干巴巴的文字简历显然是不够的，看看国外同行们是怎样打造自己的作品集还有个人案例展示站点的，兴许可以找到一些思路和启发。

另外，最近也向一些前辈们请教了这方面的实践经验，得到了不少金石良言；接下来花一两期的篇幅专门做做这方面的文章也是有可能的叭。不多说了，把目前看到的优秀资源陈列在下面：

阳光明媚的周六午后，窝在沙发里做做博客，微困。下载了一包“我爱我家”，搁电视里在旁边放着；多少有点不和谐的赶脚。这半年，编辑部的故事、过把瘾、封神榜、西游记、我爱我家轮着来，还真有点欲罢不能了，就差看渴望了。年龄暴露的一览无余。

悄悄打个小广告，最近上了个新博客，Be For Apps，平时有的没的随便写几个字，主要用来从设计的角度记录自己平时试用试玩各种应用过程中的体验感受；一直在其微博上做应用设计点评的Chibi猫同学也会在这里一起念叨，比如这篇“美丽说你这是要干嘛”，欢迎有兴趣的朋友们围观呗。

接下来进入本周译文。所谓“渐进式吸引”，也不是什么前无古人后无来者的新鲜东西，作者将这个概念从一些实践案例中提取出来，归纳为一种产品设计和推广思路，蛮值得参考借鉴的。走起叭。

用户访问你的产品推广页面时可以看到些什么内容？通常也就是功能特色啊截屏啊口碑评价啊这些，外加一个或多个行为召唤(call to action)操作。这类传统的产品介绍页面一般都会面临两个挑战：首先，它必须让潜在用户对你的产品产生足够的兴趣，并进行注册或下载；第二，它需要在一定程度上让这些潜在用户对产品的运作方式及使用方法有一个大致的了解，使他们在正式使用产品的时候更容易上手。

不妨试着将这两方面结合起来，引导潜在用户直接在产品介绍页面中通过某种方式试用产品，让他们逐渐对产品的功能特色及使用方法产生认知，从而激发他们自主的执行下一步动作，例如注册或下载——我(英文原文作者)将这个过程称为“渐进式吸引”。

2013年的第一篇，也不知道是不是有什么可以庆贺和纪念的。这个假期没少下雪，印象里在1号之后就没见过太阳的样子了；倒是这样夜晚的时候灯光昏黄的吹吹空调听听B.B.King，还真有那么点迷离。

假期中间回去金山海边爸妈家，温度更低，风雪更大，这种季节没什么人还会到海边溜达了，沙滩上原本那些摩天轮和海盗船一类的娱乐设施也都拆除掉了，彻头彻尾的肃杀荒凉。有意思的是在家里翻箱倒柜找到几本1997至2000年间买的杂志，比如Music Heaven啊通俗歌曲啊这些；拍了照片放到微博上，立刻有朋友评论说我完全暴露了年龄，哈。

这次选取了Computer Arts官网当中的一篇小文章。CA，国内叫做“数码艺术”，记得没错的话我是从2006年3月开始购买的，那阵子算是刚刚进入Web这个行当叭，看什么都新鲜，发现这本杂志之后简直就忘乎所以了，无论是内容还是杂志本身的排版设计都让我无法自拔...不过到了09年之后就不怎么买了，感觉它变了...怎么变的我也说不上，总之不再那么爱了。倒是偶尔会在RSS订阅里发现一点可以读读的小文章，所以这次也算是纪念自己曾经对CA的爱叭。十条设计贴士，帮你塑造更好的iOS应用整体体验。

btw，其实这次的图标我不是很喜欢，冷冰冰的赶脚，不过其他几个备选的还没这个顺眼呢。

今天下了好大的雪。上海这地方要积雪不是很容易，印象里只有2008年初的那次；更多时候即使漫天飞扬着雪花，最终还是好像下了场雨一样的到处是水。

所以每到冬天的这种时日，就会想到小时候在北方的样子。高三那年入冬之后，喜欢在每个周六的晚上花一个小时左右的时间在外面骑车或是溜达，而且每逢这种时候只听枪花的Use Your Illustion 1，最后在听到Dead Horse或是Coma的时候回到家；若是遇到雪天，则必定是Metallica的黑专辑。走在积雪上面，路上没什么人和车，夜晚很黑，但雪被路灯映照的很白很亮，那样的情景在当时觉得好像做梦一样，如今回想起来却好像可以伸手抓住一样，有种温暖的感觉。

说着说着还有点入神了；此时此刻是现实当中上海的晚间，外面依旧飘着雪，落在地上蛮尴尬的化去了。打住叭，来看这周的译文。原文作者总结了过去一年当中在一些项目的可用性测试里得到的经验收获，虽然有些东西看上去像是老生常谈，但经过实践检验之后所提炼出的要点也许正是我们平时自认为精通但很容易忽略掉的；至少我自己是这样的赶脚。走着叭。

2012年里，我(英文原文作者)在TH_NK里大约花费了50个小时用于可用性测试，其余的时间则主要用来进行实际的设计工作，或是与客户、开发者、分析人员等进行沟通。在这些可用性测试当中，经过对被测者行为的观察以及与他们面对面的交流，我对一些一直以来虽有所了解、但在实际工作中却时常会忽视掉的设计原则有了更加贴近实践的认知，另外也发现了一些从前没有想到过的问题。时值岁末，我将这些经过实践验证的设计要点作以小结并分享给各位，希望能够为大伙来年的工作带来一定参考和借鉴的价值。

话说这一周好像就没几天的好天气，目前正在下雨，大冬天也没个暖气什么的...16号了诶，还有一周，希望下周这个时候我们依然可以在博客当中见面。快要到总结过去展望未来的时候了，最近在工作中频繁而剧烈的刷三观，整个人一坐那儿就感觉懵懵懂懂的，一会笑一会愁；我赶脚这日子是到了不变不行的地步了。

说到这到突然想起来，之前在微博上也有求助过，今天再来一发叭：我和一名优秀的UI设计同学做了个小App，东西不大，有点儿意思...卡在开发阶段，希望寻找一名上海本地的iOS开发者共同推进项目；东西不复杂，有项目经验的开发者应该可以搞定；目前确实难以提供实质性的回报，只求彼此有缘对路，一步一个坑的迈向未来。有兴趣的同学可以到我的微博私信一下，或是通过coda7210这个gmail邮箱联系；成不成的大家聊聊交个朋友也好=)  那么开始今天的译文叭，关于表单设计与转化率的提升。

无论是用于注册、支付还是联络，我们总是需要通过表单来获取用户的信息。不幸的是，在现实当中，总会有很多访问者一见到表单就会立刻点击浏览器上的后退按钮。这里面原因有很多，例如表单篇幅太长、不大友好、不那么值得信任，或是用户还没真正准备好进行交易等等。

这种情况每发生一次，我们就失掉了一个潜在用户。怎样将表单设计的让尽量多的访问者更愿意完成填写，这是设计师们必须面对的挑战。站在用户的角度，我们可以将问题分为四个方面。

首先给大伙儿道个歉，上周这边发生了些问题，网站挂了一阵子。一顿折腾，目前算是初步恢复了，不过评论方面的模块还没有打开，需要再捣鼓捣鼓，希望谅解。再次感谢在微博上给我加油和鼓励的朋友们，还有默默关注和支持Beforweb的各位。

另外，上周网站挂掉之前，有位朋友留下一条评论，内容大致是同样喜欢SmashingMagazine的东西，喜欢做做译文一类；由于恢复数据的时候使用了前面几天的备份，所以这条评论蒸发了。希望这位朋友可以看到这些，特别向您道歉了。

那么开始本周译文叭。又是一篇移动应用设计方面的实战案例，我个人很喜欢，真人真项目真事儿，更具实践价值。走着。

今年，我们(英文原文作者及团队)发布了FreshBooks的第一款iPhone应用。从前我们的产品一直是通过Web端应用的方式提供服务的。这次，我们把iPhone应用的设计开发过程看作一张空白的画布，尽力在其中实现一些新的功能概念和设计想法。在这个过程中，我们着实学到不少东西。

大家周四下午好。打破每周日上一篇译文的规矩，临时来一发。今天刚刚看到的东西，很简短的图文，介绍了一个蛮赞的交互模式，于是把拿来把译文做掉，特别推荐给交互设计师们。走你！

移动应用的设计师们一直在努力降低用户的输入量。屏幕太小了，手指无法精准触摸，输入过程中产生错误简直是家常便饭。输入量是无法被无限制的降低的，很多时候我们更需要考虑的是怎样使输入变得更加容易。

输入蒙板是一种限制内容格式、避免输入错误的方式。举个例子，我们可以使电话号码输入框只接受数字内容，而不对其它任何类型的字符做出响应。所接纳的数字也可以被限定在某个范围或模式当中。不过，输入蒙板的功能不仅限于防错，它同样可以被用在更加“积极”的地方，例如将多项输入内容合并为一个逻辑序列，使用户不必在多个输入框中来回切换。

最近我(英文原文作者)在Square的iPhone应用(Square Wallet)当中见到的输入方式就蛮有意思的，用户在一个输入框当中就可以完成信用卡类型、卡号、有效期、CVV号(卡片背后的3位数字)和邮政编码的填写。

有好天气和好梦的周末，简直就是对自己能活下来一周的奖励和鼓舞。我看猫，猫看鸟，鸟在晒太阳，简直像画中的情境，美好总是这么不真实。

本周小译文，偏向于设计意识形态的培养。在我个人看来，阅读资料分为两类，一是具体操作指导性质的，另外就是这种建立思维框架、培养思维模式性质的。这两类文章，我基本上是交替看，交替做译文到这边的样子叭。不多说了，进入正文；今次的图标调皮了。

移动设备与传统桌面设备虽然都被成为“计算设备”，但它们之间的差异是显而易见的：移动设备的屏幕要小很多，无线网络链接方面会有不稳定，电池续航能力较弱，等等。这份“弱点”清单可以列的很长，但如果你因此认为移动设备就是降级版的计算机，那同样是错误的看法。

实际上，从其他一些角度来观察，移动设备又是比桌面设备更加强大的。智能手机和平板电脑都是更加个人化的设备，它们会一直陪伴在你身边，让你随时随地都可以接入互联网获取所需的信息；它们身上还有传统设备所不具备的很酷的功能，包括GPS、数位罗盘、加速计等等。

所有这些差异都使得移动设备当中的应用程序在界面设计方面存在很多独到之处。我(英文原文作者)基于在自己的workshop中的工作经验，总结出了移动应用界面设计的十条原则及小提示，在这里与大家分享，希望能够帮助那些还不是非常熟悉这个领域的设计师们建立起一套有实践价值的设计思维框架。