[国外设计第106期]想要更多人注册吗？在他们刚打开网站时，艳俗的弹出广告可是不管用的。仔细想想：如果有个路人径直走向你，询问你的电子邮箱，并不作任何解释，你可能只会摇摇头继续前进。在那个场合中，他们甚至都没有说你好或是尝试建立信任。若想让人首次使用你的产品，信任是必须的。最佳方式之一，是使你的用户流程能首先建立起信任，更有策略地放置你的行动召唤模块。本文中，我们且以收集邮箱地址作为业务目标。我们假定，用户的目标是对产品稍作了解，然后注册订购。那么首先，我们来看一些使行动号召更加有效的摆放位置，然后我们再了解有助于增长注册量的设计策略。设计一套吸引顾客的流程用户流程是访客在你网站上的旅程。理想情况下，旅程尽头最终完成某个特定任务，例如购买商品、注册或填写邮箱。“想让行动号召开门见山？那就要设计一个优美的行动号召页面。”要设计最佳的用户流程，牢记这两点：确定你的业务目标，或者说你希望用户在网站上的行为分辨出用户的目标、需求和渴望在设计用户流程之前，要先确定这两件事。这样才能预见和防止任何阻碍流程的事情。想要让人遵循这样的流程：直接来到你的网站，或者通社交媒体等其他来源。在这里，他们看到了迷人的、有意义的内容，使他们感到愉悦，或是激发了兴趣。在此基础上，他们留下了邮箱地址。我们设计的用户流程可以类似这样：你网站的访问链接 -> 着陆页或博客页面 -> 留下邮箱一旦你确立了用 ...继续阅读 (224)

[国外设计第105期]我之前撰文讲过多余的动画，引发了一些共鸣。得到了非常积极的反馈，我很高兴了解到，动画过多的界面也会令其他人手足无措。老实说，我并不反对为界面进行动效设计。我主要是在质疑那些妨碍用户的动画。克制，是一名优秀UI设计师的特质。它要求你了解所选平台的能力，然后避免使用它（除非时机成熟）。与其为多余的动画惋惜，我宁可学习深思熟虑的动画，尽量提出一些方案。我期望得到你对本文的评价与建议。做作的动画案例下面是一则快速且做作的动画案例，我以此来演示UI动画中的卡通化现象。尽管这是个略微夸张的例子，但事实上，确有许多界面呈现出了这种花哨的动画。点此查看案例原文。似乎我们刚抛弃了拟物化的视觉设计，又陷入了行为上的拟物化。我们把虚拟物表现得像是果冻，或像是挂在隐形的橡皮绳上。拒绝肆无忌惮的动画动画就像某种咒法。如果过度使用，就会效力尽失。动画原则我听闻一些UI设计师推崇卡通化的动画设计，将它作为UI设计师的必读准则。不幸的是，这增强了UI的娱乐功效，总会使得界面变成用户的阻碍。许多UI动效设计师似乎把界面设计当成了他们的动画作品集。除非你想被收录进Pixar，否则请避免使用“弹跳”、“加速后减速”这样的缓动效果。界面是什么？在计算机科学中，界面是指计算机系统中，两个独立组成部分相互交换信息的衔接处。界面（计算机）——维基百科，自由的百科全书https://en.wikipedia ...继续阅读 (22)

[国外设计第104期]iOS 9如今已公开发布。带来了一些细微的变化，但iOS 9的系统字体变成了苹果新推出的旧金山字体，代替了之前用的Helvetica Neue。Helvetica（左），旧金山字体（右）旧金山字体之前已经用于Apple Watch中，如今则成为苹果全平台的统一字体：Apple Watch、iPhone、iPad和Mac。Apple Watch从第一台iPhone起，苹果就将Helvetica当作系统字体。而且从10.10 Yosemite开始，Mac OS X系统的字体也从Lucida Grande改为了Helvetica。苹果为何抛弃Helvetica？它是全世界最著名最受欢迎的字体。小字号Helvetica太纤弱据说Helvetica不适合小字号使用。当Mac OS X Yosemite系统字体改为Helvetica，许多设计师声称Helvetica并不合适。“Helvetica糟糕透了”，Erik Spiekermann说如果你输入小字号的Helvetica文字，你会发现易读性很低，显得模糊。有些文字交叠在一起，难以辨识。据说苹果设计出旧金山字体正是为了让小号文字在Apple Watch上更易读。小号字母交叠在一起但如今，小屏幕设备分辨率比印刷品还高，iPhone中的文字并不像Apple Watch那么小。为什么苹果把iOS、Mac OS X的系统字体都 ...继续阅读 (16)

[国外设计第103期]了解这3条经典原则，能帮助你创造更好、更易懂的网页设计。许多经典原则，例如那些字体设计原则，在线上仍然有效。图片由Peter Van Lancker提供，www.flickr.com/photos/petervanlancker设计就是特定功能的构成——无论构成物是字节还是原子。这就意味着网页设计从它的祖先——纸墨中受益良多。本文中，我们重点介绍几则印刷设计原则，它们在线上仍然适用。熟练掌握后，你就能提升UI与UX设计水平，创造出更好、更易懂的设计。01. 让读者保持专注印刷设计专注于易读性，网页上也是如此：只是把“读者”换成“用户”而已。目标应当是清晰的表达，并且让人能够轻松纵览整个设计。我们来看几个从印刷设计沿用过来的概念。排版就像报纸，用户不会阅读网站上的每个字——至少一开始不会。正如免费电子书《为人眼进行网页UI设计》里面描述的，扫视页面是用户的标准行为。为扫视而设计时，有两种模式需要考虑。首先是F模式。F模式排版：Creative Bloq的主页F模式反映了用户最通常的扫视页面的方式。他们的视线从上面开始横向移动，然后沿着左边垂直移动，寻找突出的文字。一旦找到激起他们兴趣的内容，他们又会开始横向浏览页面。还有Z模式：Z模式布局：MailChimp的主页Z模式也是一种自然的浏览模式，通常用于报纸，网页上也是如此。用户在页面顶部水平浏览，然后向左下移动， ...继续阅读 (35)

最近工作比较闲散，又有些私事要忙，有一阵子没有理会科技与设计了。持续几天后感觉不太对，与世隔绝的状态下，创造力与洞察力正在一点点流失。以往这种情况，我会立刻回归工作状态，或者开始探索一些新的设计领域。然而这回，我打算玩大一点。因为我猜测，两耳不闻窗外事的心态，其中必定藏着非常重要的事实。近2个月时间，不看设计资讯，不在意科技新闻，不关心行业动态。将自己与设计、与互联网尽量隔绝起来。做最基本的工作内容，维持每周的翻译，除此之外什么也不做。业余时间一心一意处理私事，与朋友聊天胡扯，出门吃吃喝喝，在家睡懒觉、打游戏、看小说、看电影。不得不说，这样的日子过得实在逍遥，但心里并不好受。刚开始，会感到紧张，发现自己正在变迟钝。关于设计的想法越来越少，感觉它在离我远去。之后逐渐习惯，甚至觉得舒适，当然啦，不动用脑子肯定舒服。最后终于进入状态，无论如何，这也是另一种生活，另一种心态。有它自己的处事方法与思维模式，有其独特的看问题角度。而且，因此开始产生一些新的想法，这些想法，正是其中最宝贵的东西——我成功地让自己退化为一名小白用户，用小白的眼睛观察世界。看到他们在乎什么，不在乎什么。小白用户不是傻，只是不在乎长期接触设计与科技的我们，看小白用户多少有点不屑。点头像就可以修改不知道么？自己把通知关了还怪收不到消息？总说文件忘在家里，不晓得用个云么？现在，我也是一名小白了，越来越对这种“科技无知”感到 ...继续阅读 (29)

[国外设计第102期]几周前，我在纽约参加一个会议。这是我第二天使用Apple Watch，于是我想应该用它来查找从会场回程的路线。在以前，我会想掏出手机，输入地址，设置成步行导航，并且在步行途中视线来回游移于手机与街道之间，避开时代广场的出租车、自行车和穿着各异的人物。现在，我只需要说“带我去时代广场的W Hotel”，按下开始然后步行——从来不用操心手表，除非我感受到振动，告诉我该拐弯了。它从根本上改变了我与城市的互动方式。不再拘泥于屏幕，我可以眼观六路耳听八方，给予手表充分信任，让它告诉我接下来怎么走。除非在我确实需要的时间或地点，我都没有看过我的移动设备，它被解放出来了。我意识到我从没有真的想要操作我的手机——只是觉得我需要这么做。如果移动技术能足够融入环境，我就会忘了它，那些充实我生活的时刻除外。举个例子有个盛行的食谱应用，我觉得它就是个反面教材。在iPhone上，它非常有用：少量点击就能查找、收集和分享食谱，还能看到查看营养成分、创建购物清单等等。那相应的Apple Watch应用可以用来做什么呢？几乎一样。这就是问题所在。他们实际上什么也没改变，除了使你在iPhone上的常用操作变得单调乏味。“想清楚一点，你的智能手表应用为何存在，既然有iPhone应用。”应该想象成一个手腕上的更加智能的应用——它不该被视作相应工具的复制品，而是烹饪助手。或许它应该追踪你的购物清单， ...继续阅读 (44)

[国外设计第101期]设计并不总是耀眼夺目的艺术。它讲究微妙、实用，而且常常是不确定的。很简单，好的设计往往是隐形的。明确一点——隐形的设计并非在项目中增加图层、透明度或是隐藏含义。它是为了打造用户为中心的项目，使之功能齐备，视觉愉悦。当我还是个年轻的设计师时，就一遍遍听到这句话。如果你不得不“装饰”画布，那就是在过度设计。最好的设计——真正使项目有效运转的设计——是隐形的。但是如何做到隐形？尤其网页设计是一种相当视觉化的手段。（额外补充，本文会重点列举几个网站，来印证隐形设计的观念。）思考设计中的隐形咱们别离题万里，设计当然是可见的。关于这点毫无疑问。但是你所用的工具与技巧，不应该在普通用户面前耀武扬威。多数设计只追求“感觉对了”。用户想要沉浸其中，操作某样东西。他们不必理解其中缘由。这就是隐形的设计。Oliver Reichenstein，Information Architects的创始人和总监，以强调隐形设计观念而闻名。虽然在听到他的观点之前，它已经深深烙印在我的脑海中。在The Verge的访谈中有一些只言片语。“优秀的设计是隐形的。优秀的界面设计会细到亚原子级的微观字体（文字的精确定义）、看不见的宏观文字布局（文字的运用方式）、还有由交互设计和信息架构组成的隐形世界。最少的输入，最丰富的输出，界面设计师都致力于使用户花费最少的注意力。就像字体设计师与工程师那样，我们并不 ...继续阅读 (41)

今年杭州夏天很短，一会儿就凉快下来了，进入阴雨绵绵的季节。走在路灯下，城市夜景在涟漪中闪烁。我忽然注意到手中的伞，一把米色的格子折叠伞，本身平淡无奇。雨伞这件创造物，春秋时期就已经诞生，为鲁班的妻子云氏所创。最早的伞目的很明确，就是遮阳避雨，形态类似于油纸伞。雨伞到今天有3000多年的历史，形态并没有发生太大的变化，怎么回事？看看伞字的演变，非常有说服力，从古至今就是这副模样。结合字形，对比一下从前与今天的雨伞，伞骨发生了多少变化呢？今天我们有直伞、折叠伞。折叠伞还分三折伞、四折伞。还有这种非常规造型的Senz伞。把它们撑开，扯掉布料摆在一起，明明就是同一类东西。现在大家应该明白我在文章开头的问题，并不是雨伞还能怎么改进，而是雨伞这种东西为什么没有被代替掉？替代品其实不少，雨衣是很典型的一种，但由于使用不如雨伞方便，所以只在需要腾出双手的情况下用。再比如这款Air Umbrella，硬是用气流喷出了一个伞形，将雨滴推离伞下人。我没实际用过，不知道它的能耗、噪音情况如何。但有一点可以肯定，有能源消耗的伞，一定比纯机械的伞昂贵。无论科技如何发展，直到雨伞彻底消失的一天，这点都不会改变。还有一些替代品，你天天都会见到，只是不曾注意：汽车、建筑、地下通道……如果真有什么能让机械雨伞完全退出历史舞台，我相信那不会是某种新型雨伞，而是很多种东西的共同作用。或许多数建筑都会有车库，或许城市覆盖四 ...继续阅读 (23)

[国外设计第100期]交互设计从来都不容易。它包括了用户行为的深度分析，和一丝不苟的规划。随着新技术和交互设计模式的出现，事情并不会变容易。艳丽的图片、顺畅的鼠标悬停效果和意外的动画，不再那么容易引起用户注意了。但难题却没有解决——如何创造令人愉快的用户体验，让用户面带笑容完成转化？如果你对常见的设计陷阱有所警觉，就能更少犯错。为了方便——可能也为了让你知道你不是独自一人——以下总结了最常见的交互设计误区。1. 铺天盖地的创新网页设计师都非常有创造力。我们希望通过作品来表达自我。我们总是在寻求创新的设计方法来脱颖而出。但是，当涉及到交互设计时，创新并不总是好事。甚至会给你的网站带来坏的影响。用户渴望熟悉的事物，他们总是会遵循一些特定的操作方式。Randy J. Hunt，Etsy的创意总监和Product Design for the Web作者，清晰地陈述过：“嘿，设计师：别再TM自作聪明了。”在文章中，他详细解释了为什么别在网页设计上过分热衷创新。以Iotorama网站为例。它挺漂亮，音乐深情，但是看着满屏幕移动的球，用户不知所措。不要误解我的意思，这个项目非常出色，超级有创造力！我喜欢这个大胆的创意，但它一点也不直观。还有一个例子。Safety on the Slopes项目背后的创作者想到一个巧妙的交互式图形，用来警告用户冬季运动的危险。非常创新，同时也很直观、有趣、令人印 ...继续阅读 (25)

[国外设计第99期]创建自己的网站对于资金拮据的企业主似乎是个好主意。可以以后再找设计师，等你的创业项目取得了一定的地位，那时你才会开始考虑这些无意义的事情。是这样吗？事实证明，对于初具雏形的业务，设计远比你想象得重要。当你运营线上业务时，访客的判断往往取决于设计中的小细节。顾客都是三心二意的。他们对一些主流品牌已经产生了信任。为什么忽然要开始信任你？除非你在头几秒就吸引住他们，否则他们就走了。最终，最微小的细节产生了最大的差异。如果你要树立一个值得信任的品牌，创造收入，这些细节必须仔细查验、精心准备。本文中，我就来谈谈网页设计中常见的业余错误。即使设计能力有限，你也能辨认出一些常见的错误，它们或许也渗入了你的网页设计中。注：本文中使用的案例，都来自于创业项目，它们都特别重视各自网站的反馈。1. 模版的不恰当使用我不赞成在大型业务中使用网站模版，不过小型的、基于bootstrap的创业公司确实有此需求。无论如何，如果你最终用了一套模版，最好还是找个设计师为你的品牌适当定制化。最终甚至可能得到非常棒的产出。预先设计好的模版网站存在一个普遍问题，logo和网站其余部分的视觉关联很弱。logo色彩并没有重复出现在网站的其他地方，或者与网站使用的字体并不搭配。如果你要节省品牌包装开支，至少这模版不能太明显。2. 使用默认的Bootstrap外观另一个同样骇人的错误，是在公司网站上使用Boo ...继续阅读 (25)

[国外设计第98期]为什么有些产品深入人心？他们的设计中，是什么使我们感觉亲近、愉悦和高兴？iOS和Google Play应用商店包含了超过200万应用。如果这还不至于让你头晕，那我们来聊聊8.76亿个网站和212个主流社交网络，它们都在竞相争夺用户的注意力。对于我们这些创造者来说，这个市场挑战巨大。我们这一代接触的科技产品更加有趣好玩，难以自拔，我们会问：我们的项目如何杀出重围？用户已经厌倦了毫无生气的语言，然而绝大多数科技产品仍在将之强加于用户。他们也受够了平淡乏味的界面，已经操作了几十年了。相反，用户想要真实的体验，能让他们舒适、轻松，感到亲切。用户想要真实的体验，能让他们舒适、轻松，感到亲切。精明的用户需要轻松的体验。轻松是对他们而言。对于我们？我们有责任付出一切代价提供这样的体验，并且以一种有意义的方式区分我们的品牌。这意味着需要花费额外的时间，来保证我们的产品说的是人话——而不是机器语言。当然，这些听起来都很复杂。不过我将它精炼为3个简单的步骤：找到品牌个性定义品牌音色将它转换融入用户体验我们一步步来：1. 个性：什么使你的品牌具有人格，为何如此重要？美国心理协会(APA)将个性定义为“在各种场合、随时间变化，能够影响多种特征行为模式的个体的独特心理特质。”我们的个性会影响我们思考、表现和感受周遭环境的方式。类似的，用户操作你的产品时，他们希望友善的言语引导他们经历特定 ...继续阅读 (43)

压抑茫然、落魄挣扎、纸醉金迷、淡泊处世，各式各样的生活。即便是楚门的世界，虚假也未尝不是一种生活。人人都活在其中，绝无例外。让自己过上怎样的生活，需要多大的决心？这个问题很抽象，无法衡量。不过我想到了一种相对形象的表现形式。大家是否还记得中学物理的液体密度实验？大致就是这样一个U形管。橙色液体是你对生活的期望，蓝色液体是你对生活的决心。橙色液体的密度，是你对理想生活的认知程度。蓝色液体的密度，是你的行动力。底部有一个活动的浮标，将左右液体相互隔绝。平衡状态下，浮标处于U形管底端。浮标左移，负能量占主导；浮标右移，正能量占主导。什么意思？简单举几个例：对生活期望不高，也下不了多大的决心，浮标会停留在平衡位置。你会过上平静的生活。对生活的期望很高，同时意志坚定，努力经营，也能达到平衡点。那是你应得的。好高骛远，却明日复明日，浮标左移。你会长期处于压抑消沉的状态，埋怨社会，负能量满满。好高骛远，眼高手低，过于理想主义，只看见别人生活光鲜的一面，橙色液体密度太大，浮标也会左移。你会发现生活不易，随之泄气、挫败、迷失方向。追求简单朴实的生活，同时对美好生活抱有坚定信念，浮标右移。你会发现生活处处是惊喜。没什么追求，也下不了决心，但想到什么就去做，一点一滴改善生活。蓝色液体密度高，浮标也会右移。你会发现收获远超想象。其中一个极端，像《猜火车》那样：I choose not to choose， ...继续阅读 (19)

[国外设计第97期]Material Design发布之时，Google在设计领域做出的努力令我印象深刻。在这方面Apple一度遥遥领先。这种局面结束了。记得我以前总抱怨Android设计的那套不统一、缺乏文档、缺乏吸引力的暗色主题，还有模棱两可的汉堡菜单的滥用。Material Design解决了其中很多问题。如今它提供了一套统一的设计语言，更明亮、色彩丰富，并且背后有深思熟虑的设计指南作为坚实支撑。但是尽管它色彩漂亮，卡片的使用提供了强烈的纵深感与操纵感。我时常扪心自问，这真的像许多设计师说的那样，比Apple的iOS设计优秀吗？我要发表一下我的看法，我觉得它只是独辟蹊径，并未全面胜出。与iOS的相似点我们从iOS的3项核心原则说起：清晰、遵从和深度。清晰是指文字易读、图标明显、对比强烈。清晰的定义,对于不同平台是特定的。对于iOS和Android用户而言，什么是清晰的取决于他们熟悉什么。iOS用户可以立刻辨认的图标，Android用户或许不行，反之亦然。深度是两大平台共有的另一项原则。但它们用不同的方式表达这一概念。iOS提倡模糊和渐变，Android却强调投影和纸张的概念。拟物2.0虽然都这么说，两大平台都用了重要的方式重现了现实世界。它们通过模糊、投影，还有符合物理规律与空间关系的动画呈现一种拟物化。拟物设计使用熟悉的隐喻，有助于引入新概念，但是过度细致的纹理和立体效果绝 ...继续阅读 (28)

终于搬家了，之前的出租屋环境实在恶劣，想到我居然住满了一年，真是有点不可思议。随着年龄和经历的增长，在不知不觉中，人也会变得更容易妥协。找房子从来不是什么愉快的事情。网上并非真实价格，中介总会把价钱挂低将近一半。网上2000每月，打电话过去对方说现在要4000了，不过这里有些其他的房子你要不要来看看？这种招揽生意的方式由来已久，不知是杭州独家还是行业惯例。找房的区域发展相对成熟，个人房东几乎绝迹了，任何渠道无一例外都是中介。老小区的条件不敢恭维，余下那些高档单身公寓华而不实，那不是用来过日子的。我要找的，就处在中间这个巨大断档中。最终改变了策略，租了一套老小区的2室1厅，再招个室友合租。签约后暴露出许多问题，有房子的，也有我自己的。此前看过几套奇差无比的房子，大铁盘子钨丝灯、遍布铁锈的推拉窗，恍如穿越回了文革时期。对比之下，感觉这里重回了现实，印象分大增。一高兴，走马观花看了一圈，当场就要了。后来发现这整个就是一片雷区。家电迟迟不到位，入住一个星期后才陆续进场。窗帘居然用的是夹子，一拉整块布就掉下来了。在这里还有幸一睹古老的半自动洗衣机，加水按一下，漂洗按一下，脱水再按一下。卧室墙上本来有个孔走空调管线，却非得从窗户进来，这扇永远关不上的窗户就成了蚊虫的传送门。卫生间的格局尤其诡异，唯一的地漏在淋浴房里，唯一的洗衣机进水口也在淋浴房里。淋浴房偏偏又往外漏水，每天都要上演精卫填海。为 ...继续阅读 (18)

[国外设计第96期]扁平化设计的时代正在终结，或许不会一蹴而就，却的确在逐渐衰亡。最有力的证明就是这种崭新的渐变潮流正在兴起。相比在web 2.0时代见到的那种渐变，它们更加细致微妙。坦白说吧，渐变再度盛行了！我列出了20个主打渐变形式的崭新网页设计。其中有些非常微妙，另一些则极度鲜艳；不论哪种，渐变都是一种为你设计添彩的有趣手法。VO2 GroupVO2新网站的欢迎页面采用了非常规的设计，大量不同元素层层叠加。树洞般的设计造就了这个网站！很有意思，与众不同。背景元素之一——三角形——呈现了轻微的渐变。就此而言，它为三角形元素增添了视觉吸引力。Melanie F – Look BookMelanie的look book采用的布局方式，在时尚类网站中愈发流行，其中文字置于图片之上，两者却不粘连。在本例中，介绍文字呈现在网站页头的矩形上方。矩形中填充了绿色与紫色的渐变，很显然，它有助于吸引视线。Adoratorio这家设计机构以特别的方式运用渐变，将它用在了文字区域上。独具一格，相当酷炫。这种方法确实能巧妙地将文字风格化，非常管用。Qards甚至我们Designmodo Qard的着陆页也展现了多种渐变。大多页面都被分割成小块，背景填充了不同的渐变色。截图中的页面用的是橙色，其他页面则用了由浅到深的蓝色或绿色渐变。渐变的背景为网站设计增添一种独特的格调。SymoddSymodd的首屏， ...继续阅读 (65)

[国外设计第95期]众所周知，我们总是依据封面来判断书的好坏，聪明的设计师会创造实用有吸引力的界面。潜在用户可能会被吸引，但如何一直黏住他们呢？要试着回答这个问题，所有一切都指向人本设计，其中用户是最主要的考量。以人为本：你的应用应该使用日常用语，包括情绪、口语，外观还要有一丝“诱惑力”。界面应当成为你的好朋友，时刻准备给出建议提升你的体验，让你会心一笑。现在揭幕：是微交互在起作用。精确的说，这主要是界面附带的交互动画，使它更具表现力。优秀的动画能够：表达状态并提供反馈提升直接的操纵感将操作结果可视化在用户体验中，关键是你如何对待用户，还有他们使用产品时的感受。极小的细节都值得加倍留心。微交互提供了用户所需的反馈，表达了当前运行状况。无论背后逻辑有多么复杂，都能使界面更亲切。1. 显示系统状态Jakob Nielsen在可用性原则启示第一条中描述：让用户始终知晓当前在发生什么。用户希望立马得到回应，但总有些情况下，网站需要一点时间等待操作完成。那么，界面就应当在背景处显示图形，反映完成百分比。或是播放声音，让用户了解当前发生的事情。这个原则也关系到文件传输：不要让用户觉得无聊，给他们看进度条。即使是不太令人愉快的通知，比如传输失败，也应该以令人喜爱的方式展现。让你的用户微笑！2. 突出显示变化通常为了节省空间，应用会在需要时把某个按钮替换掉。有时我们需要展现通知，确保用户注意到了。 ...继续阅读 (48)

[国外设计第94期]深入了解时下最热门应用的设计模式本文中，UXPin – 用户体验设计应用的Chris Bank会讨论用户输入设计模式的重要性，还有来自时下最热门移动应用的具体案例——更多案例和超过45种移动端设计模式，都在UXPin的免费电子书《2014移动UI设计模式》中有提到。任何移动应用，若没有用户起初和持续不断的输入，就什么也不会发生。因此，移动产品设计师、开发者和产品经理要了解最佳的输入方式，这点至关重要。尽管移动应用——还有使用它们的用户——通常都很独特，但仍有很多通用模式（新旧都有）用来解决这一特殊问题。用户输入设计的6项目标深入探讨这些模式之前，理解用户输入设计的6项主要目标非常重要——我把它们列在下面：选择一种适合的输入和数据录入方式减少输入的工作量设计有吸引力的数据录入界面通过验证检查来减少输入错误设计必填项说明开发有效的输入控件模式总览记住上面几项目标，以下设计模式，在本文中都有详细讨论，在我们的电子书《2014移动UI设计模式》中还有更深入的探讨：智能键盘默认值和自动补全直接进入（或者说“快速登录”）操作栏社交账号登录大按钮滑动操作通知隐藏式控件扩展式输入框撤销1. 智能键盘Facebook Paper, Android通讯录问题用户想要快速键入信息。解决方案用户点按进入应用某个输入区块，在他们键入时要提供与数据相关的键盘。这样免去他们在字母与数字键盘间 ...继续阅读 (19)

幽默栏目大半年没有更新了，上一篇还是2014年11月份。工作与设计之外的事情，也很少再出现。由于忙，变得不再热爱生活，失去好奇心，懒于思考。再也没有比这个更危险的了。那么，就从这篇开始，找回从前的可乐橙吧。一帮损友615大学寝室群已经沉寂很久了，又到一年一度房租到期的时候，大家嚷嚷着再一块儿合租，重现光辉岁月。我第一个举双手赞成：“好哇！我也受够这个破拆迁房了，简直TM卧槽啊！！每天大清早工程车在这里热车，空踩油门引擎响10几分钟才走啊。要么就是老大妈出来溜熊孩子，熊孩子脑子哪根筋不对，忽然就嗷一嗓子嚎起来了啊。还有那几辆破电瓶车，老子怀疑一片树叶掉它身上它也能响啊！一响就5分钟啊，各种音效啊！星球大战啊！！”吐槽完毕，群里忽然寂静了片刻……“看来他受尽委屈，爆发了。”“既然这样，那么……”“杭州的朋友们，大家早上好！”“后面的朋友！”“都给我high起来！”新资料片人杰和狗去深圳找工作和考试，前去投奔KT。问他从火车站怎么去他住处，他说莲花一村二村都可以，好多公交到的。地铁也有莲花北，莲花村这两站。听到这两个站名，我似乎明白了什么，开始恶意歪楼：“新手村——莲花南——莲花村——莲花北——白莲峰——白莲圣坛——白莲教密室”人杰补充：“如果过了hard模式，后面还有个隐藏地点——白莲教水牢。全新的水下战斗方式喔！”“白莲机场，空战模式开启。”“新资料片，全面进入蒸汽时代！”重大利好某 ...继续阅读 (38)

[国外设计第93期]“仪表板”、“大数据”、“数据可视化”、“数据分析”——越来越多人和企业，开始运用他们的数据来做一些有趣的事情。在我的职业生涯中，有幸参与一大批数据为重的界面设计，我要在此分享一些观点，讲讲如何造就这种特殊且有意义的产品。很多人已经讨论过这个议题，我会围绕创作过程中最具影响力的部分。1. 用户不同，数据不同任何时候设计一套复杂的系统，都不可避免要为很多用户和角色进行设计。总裁、经理和分析师是几个常见角色，每个都有自己的工作流程和对数据的需求。定义好角色，产生不同视角，这本身就是一种艺术。我就不在此详细解释了。如果你对此有兴趣，请看Cooper的这篇有用的文章。关于角色，重要的一点是预先确定好，围绕它们来组织信息结构与线框图。下面是我们去年做的一款健康报告应用的最终成品。这套系统有着不同的用户群，他们各自都需要不同的数据管理。创建了关键角色后，我们每次评审会将它们放在旁边。注意画板上的那些角色。我们的客户都接受这种方式。在满屋子客户面前展示作品是件难事。无论是在解释线框图、流程图，还是就视觉设计进行讨论，都很难让每个人跟上你的观点。通过角色来组织作品，会防止你（和客户）在这些讨论中跑题。2. 制作页面模型我多年所用的一个技巧，是制作页面模型。核心点很简单：首先为用户呈现他们需要的，再将页面余下的信息根据用户故事或信息层级，进行结构化处理。制作页面模型的概念，正是写 ...继续阅读 (30)

[国外设计第92期]与其他用户界面细节一样，菜单的设计也在随着当今的潮流改变。一些变化能带来积极的效果，改善用户体验，还有一些却会破坏有利的形象。追随潮流是件棘手的事，尤其是在菜单上。比如，隐藏式菜单和极简式导航栏最近正处于风口浪尖。但是，它们并不适用于所有网站。相比之下，全屏菜单多数时候几乎都适用于所有项目。后者正在汇聚人气，因为它灵活易变，能够提升而非破坏用户体验。它在不经意间呈现了很多数据，整洁地排布文字与多媒体内容。当然，这使得主页又多了一层点击，但有时为了更好的用户体验，应该做这样的牺牲。今天我们进行一场头脑风暴，来看20个新颖绝妙的全屏导航网页设计案例。全屏菜单案例MaeciaMaecia采用了讨人喜爱的蒸汽朋克外观，增添了一分独特的精细和机械感。基于图片的导航占据整个屏幕，与动态主页和主题高度吻合。OlceseOlcese有好几个菜单，便于用户更彻底地探索这个网站，同时也强化了品牌识别。基于图片的网格式全屏导航中，充满了有趣的照片、漂亮的图表和令人愉快的效果。这些元素的结合扮演着至关重要的角色。Moeko ABE摄影师的在线作品集还能是什么样？以照片为核心的主页明亮耀眼，导航运用了多媒体，为这位艺术家高调代言。菜单在整个页面投下柔和的阴影，呈现出美丽的照片链接。Conference Awwwards颇具开创性的主页，一流的HTML/CSS/JS动画立刻引人注目，让人印 ...继续阅读 (32)

[国外设计第91期]Shopify Plus是我们创立的电商平台的企业版。2014年2月发布，如今仍然是第一版。我想是时候改版了。经历了一年多，我们对客户与自身都有更深入的了解。陈旧的品牌已经不合时宜了。我们并没有什么特别的流程，就是将以下7件事情串联起来，便达成了目的。1. 面谈我对执行团队的成员进行了一对一面谈，明确了Shopify Plus是什么。为了真实还原，我录下了每段面谈，供以后回放。面谈之后便有灵感涌现——我觉得自己对于这个产品已经了如指掌。撰写愿景、任务描述、品牌指南、项目概述和网站文案都变得容易了。我们的网站需要更好传达信息，让人顿悟其中含义。2. 项目概述深入项目之前，我们写了一份项目概述，使大家达成共识。我们会适时更新，让它反映出项目的当前状态。项目概述中可能会提出一些问题：我们试图完成什么目标？如何知道项目成功与否？需要做什么？为什么需要这么做？有什么必要条件？做这件事情是为了谁？如何让他们知道？项目团队有哪些人？截止日期是什么时候？3. 竞聘分析我们研究了还有哪些同类产品。我先从一系列竞品开始，然后转向电商领域之外那些与我们目标客户相同的公司。我们对比了竞品的长处、弱点和机会，还有我们想要涉足的重点领域——和我们想要避开的领域。我们的竞品分析文档4. 信息结构信息结构是内容组织的表现，使内容易于理解。在网页设计中，结构图表反映了网站里各页面间的关系，让你从 ...继续阅读 (44)

[国外设计第90期]动画是人类毕生的理想之一（如果像某些历史学家相信的那样）。这个理论源起于洞穴壁画：在某些洞穴壁画中，经常见到一些生物被画上远多于正常数量的肢体。这背后有很多套理论。有些指出这很简单，因为艺术家们并没有方法可以擦除这些肢体，于是将他们的错误留在壁画上，传给了子孙。还有理论相信，这些是最早的试图在静止图像中捕捉动态的方法。我选择相信后者。还有比捕捉动态更加自然的愿望了吗？自然界的一切都在运动。人在行走，水在流动，植物开枝散叶，自然界唯一不变的就是变化，以一种运动的形式。有些在模糊中一闪而过，有些则慢到难以察觉，但这些都在发生。动画对于网页设计师已经不再新奇……它正在成为最基础的交互设计效果。动画就是变化，是一种运动。它是我们艺术创作中最接近真实反映生活的东西。这就是为什么人们总是说“动画使我们的网站（或是演讲，诸如此类）鲜活起来。”这可能是陈词滥调了，但这个词很优美地呈现了动画在网页设计中的目的。正确使用运动感，可以告诉用户他们完成了某些操作。他们成功地与界面进行了交互，引发了某些变化。人们与真实物体互动时，也会触发并体验到相同的感觉（至少是类似的感觉）。就某种程度而言，动画是拟物的。没错，我说的就是拟物。使用得当时，动画可以被设计成模仿真实世界的交互。我们似乎在原地打转。可能我们不会再过多使用复杂的皮革纹理，但我们仍然在尝试效仿现实世界。网页动画简史在进入实用部分 ...继续阅读 (103)

[国外设计第89期]从醒来的那一刻，我们就被广告包围了：它出现在我们的咖啡杯上、电视上，回家路上也充斥我们眼前。但我们总能关掉它，将它逐出视线。增强现实（AR）是一种新方式，将数字化的体验呈现在我们的虚拟世界。如今的生活与增强现实下的生活，区别就在于你可以避开广告。有了增强现实，就再也没有阻隔与界限——除非我们人为设定。向过去学习让我们回到21世纪初：网站都是800x600尺寸，用table构建。一种新的广告形式正在酝酿，它将成为自Ally McBeal的跳舞婴儿以来，互联网上最招人烦的东西。弹窗广告。弹窗采用了最直截了当的方式，通过占据人的视野来夺取注意力。提到自动播放音频的弹窗时，一位Nielsen研究的测试用户写道：“如果有什么比弹窗还糟糕的，那就是这个了。我讨厌这种广告。极度讨厌。”随着我们掌握如何在增强现实的维度中传递信息，事情就开始变得棘手。但是这次，让我们为了用户体验，抛弃弹窗和笨重的广告吧。如何触达增强现实的使用者，而不使他厌恶：学习用户的社交节奏，作出响应有选择加入，而非全部加入收集行为线索，解读兴趣采用影响程度低的方式，比如消息推送基于真实世界，构建实体的广告模型，例如户外广告大胆探索新的沟通模式用户设定社交活动的度量我的社交节奏类似这样：早晨：独自工作下午：探索、与人交谈晚上：与家人共度增强现实应当补充与改善社交节奏，不必时常调整参数就更好了。在我想象中，增强 ...继续阅读 (56)

开门见山，这是一篇广告文，分享一款设计师灵感库管理工具。诶，先别急着开骂，我可没有商业化的打算。可乐橙打广告一定要严格满足三个条件：【朋友】推出的【好产品】，【无偿】广告。不过，在做广告之前，我有故事要讲。设计师的职业生涯就像一棵树，素材库与灵感库交织出了年轮，从某方面反映着你的成长经历。不知道大家的灵感库经历了怎样的演变与迁徙，至少我的是几经辗转。起先根本没有收集意识，需要什么临时找，几个网页书签就是全世界。从实习公司的老师那里拷来一套商业图库，10几个G。看得心花怒放，每件素材看着都精美无比。很长一段时间，那个文件夹就是我全部的上升空间，探索没有尽头。然而这个世界再精彩，也难以为我所用。文件多如牛毛，分类方式不合我的逻辑，找素材还不如百度来得快。我这才第一次意识到个人积累的意义。于是开辟了一个硬盘分区来存放素材——必须按我的习惯整理。网络上的素材涌入素材库，商业图库里的一部分也逐渐被吸收进来，其余的则索性删掉了，因为很多大半辈子也不可能用上一次。隔壁目录下，灵感库文件夹也慢慢成长起来。鼎盛时期，两者加起来超过了30G。然后大迁徙开始了，起因是应聘时被要求当场做设计。空着手去的，以我那时的水平，结果可想而知。解决方法不止一种，我选了最辛苦却一劳永逸的——统统搬到云端。灵感库采集到花瓣，人工上传，搬家持续了整整一个下午。而素材库要随时取用，电脑上也得有一份，同步盘比较合适，上传了两 ...继续阅读 (31)

[国外设计第88期]在交互设计中如何加以利用时间？它是可控的吗？元素的时间控制难以描述，但我们都能感觉得到，从令人厌烦的等待加载，到令人愉快的轻松穿梭于页面间。时间控制的范围很广，大到可感受到的时间增量，小到区区毫秒。单独看似乎没有意义，但无论如何，它积累起来就能影响用户的看法。本文中我们讨论的内容涵盖一切随时间变化的元素：视频、音频、动画等等。我们会从时间为何重要讲起，然后讨论时间控制的要素，还有如何改善它们，之后我们会探索快速和简洁如何发挥作用。时间为何重要时间是个难以掌控的概念，因为它的范围如此广阔。就像一个电子的大小，相对于我们银河系几乎无法察觉。一毫秒的跨度也一样，相比一个千年，根本感受不到。但是数字世界的时间与人类的时间不同。几秒的差距，就决定了体验是令人沮丧还是令人愉悦。我们可以把它归为基本的人类心理学：记忆与注意力是有限的——正如我们在交互设计最佳实践中描述的，设计师应当评估界面的认知负荷。否则，用户会苦于短暂记忆导致的信息丢失，使他们沮丧。人们必须感到一切尽在掌控——没有人愿意受科技的支配。正如我们最新的博文中陈述的，有些人仍然把计算机作为黑盒子对待。让人等待的电子产品，会给人一种不够格的傲慢印象。用户的操作是有节奏的。在用户体验领域，时间的度是以10的量级来丈量的。用户判断是否值得在一个网站花费时间，只需要0.05秒。如果它们决定留下，通常会在2-4分之内离开。 ...继续阅读 (74)

[国外设计第87期]科幻作家艾萨克·阿西莫夫在他的机器人系列故事中创造了“机器人学三大法则”。这些法则被永久性地植入每个机器人，作为防止灾难、保护人类的最后一道保险。我很好奇，我们最后一道保险是什么？对于交互设计师而言，三大法则又是什么？用户对于界面的感知，离不开它的形式、内容和行为。就像工业与平面设计师专注于形式那样，交互设计师将行为作为最重要的元素来考虑。要通过设计来左右用户的体验，首先要考虑我们的三大法则，界面的行为如何表现，它对用户的行为产生什么影响。它们必须得作为稳固的基础，在它之上构建其他交互设计原则。幸运的是，我将要运用的三大法则早已有人提出——三大法则的主人，Mac电脑项目背后的大脑，Jef Raskin。他在他的著作The Humane Interface的某一页中写下了这三条铁律，本书在交互设计中的地位接近圣经。细细品读，你会发现现代最流行的用户界面，都采用了这本里程碑式的著作中的概念与技巧，其中也包括微软和苹果的设备。第一法则善加利用阿西莫夫的三大法则本身，Raskin写道“交互设计第一法则应该是：电脑不应该妨碍你的工作，或由于不作为而使你的工作受到损害”[1]。我们都应该牢记，电脑是一件用来完成任务的工具；最终目标不可能或极少情况下是使用软件本身。因此，我们可以一致同意，在电脑上最恶劣的体验就是让工作蒙受损失。唯一一件比丢失已完成的工作更糟的，是丢失无法精确 ...继续阅读 (35)

[国外设计第86期]西方建筑史对于网页设计的进化有重大参考意义。作为一种艺术形式，两者都遵循以下事实：它们是人们前往的地方。它们都承担着这件务实的工作。科技的演进在限制着工程技术。还有，它们至今绝对仍属于艺术范畴。在这些限制条件下，两者的演化路径惊人相似，都建立在过去的基础上，以近似的方式产生影响。如果想知道网页设计将去向何方，可以看看建筑领域发展到了什么地步。1. 新石器时代简单、有限的结构巨石阵，公元前3000-2000年；W3.org，1992年除了稍微调整了尺寸和位置，它只是把东西摆在相应的地方。2. 古典建筑秩序与均衡，略带修饰巴特农神庙，公元前437年；Yahoo.com，1996年古典建筑时代精炼了对称与层级，采用了泾渭分明的区域划分，承担不同的用途。所用媒介（石头、像素）的外观也效仿先前的材质：石质的三竖线装饰象征着木质横梁，就像用3D按钮表现物理按键。3. 罗马式建筑更厚重的形式与更圆润的边缘玛丽亚拉赫修道院，公元1093年；Apple.com，2000年柔化边缘的同时，罗马式建筑时期也加厚了隔墙——菜单和按钮也一样——创造更庞大、厚重、易点击的形式。4. 哥特式建筑华丽、令人着迷兰斯大教堂，公元1211年；Maroon5.com，2005年CSS和FLash就是网页设计中的彩色玻璃。基本元素到位，我们就开始选用看似不可能的材料。哥特式建筑将石头变为反重力的壮举， ...继续阅读 (30)

[国外设计第85期]初创公司是非常有意思的业务模式，员工都雄心勃勃、奋力工作、思维卓越。就我自己而已，我与很多初创公司协作过，我喜爱这种快节奏的环境。不过我最喜欢初创公司的一点，是它们极为重视产品与网站形象的设计。这些公司为了积累指数级的增长押下重注，所以设计被摆在基础的地位。我收集了17个初创公司，它们成功打造了惊艳的网站。初创公司网站案例Exposure如果你喜欢摄影和讲述故事，你就会喜欢Exposure。他们是一个照片平台，充斥着全世界人们不可思议的照片故事。页面很简单，但焦点很清晰地落在了照片上，这点很有利。搭配上干净鲜明的非衬线字体，页面效果就会非常好。NoblyNobly是个社交app，试图连接想要做好事的人们。首页焦点区域非常抢眼。在鲜明的紫色背景上，是他们巨大的白色logo。这是最重要的入口，或者说欢迎页面——它很有效。The FernmwayFernway是个旅行资源网站，专为想探索新目的地和新体验的人而生。如果你即将踏上旅途，一定会有兴趣的。即使你只对好的设计感兴趣，它也很不错。Fernway的布局似乎受杂志排版设计的影响，而且行之有效。深色的网站非常简洁，但展示效果相当好。FlowmailFlowmail为电子邮件简报而生，他们有着最干净的着陆页。除了3项重要议题和注册表单，屏幕上鲜有其他信息。恰如其分地传递了一个信息：他们能以优雅、简洁且有效的方式做事情。X ...继续阅读 (106)

[国外设计第84期]最近，我们决定替换一下我们常备的邮件app原型，换成更迷人、跟上时代的东西——其中考虑采用了Google的material design原则。但我们注意到很多设计师遵循Google的规范，最后……结果做成了Google。聪明的品牌会沿袭Google的风格，但对于想要跟上设计趋势同时保持自身品牌力量的公司而言，这就不太好了。设计新的邮件app原型时，我们深入考虑了这个问题。我们要确坚持material design基于触摸、用动效表达意义、大胆地表达意图的核心原则，但不能完全复制Google Now或是Inbox。我们想在此从两给方面分享构建这套界面的收获：其一，分享我们关于material风格的思考和设计。其二，分享界面本身——你可以从文末获取到。颜色Google一直以它大胆的主色运用著名，从他们无处不在的logo，到山景城园区的户外陈设皆是如此。Material通过辅助色、基于饱和度的色谱扩展了它的配色，但仍然专注于运用大片的扁平色彩，并没有使用长年主宰网页设计的渐变色。尽管关于设计趋势的讨论，都倾向于将渐变、投影和拟物化融为一体，material design鼓励使用引人注目的阴影，回归现实中的触觉反馈。于是，我们向用户展现了引人注目的渐变色，以示区分——包括app主图标中的条纹。构成这种渐变的色彩来源于material的配色，但我们以一种Google没有的 ...继续阅读 (34)

[国外设计第83期]响应式设计方法对开发者非常有用，因为它使我们的内容在各种设备上广为传播。不用保留几个独立版本的网站，也可以摒除诸如缩放和流式布局这些方法的弊端。本文重点讨论设计师遇到最多的3个响应式设计问题，也会提供一些规避错误的策略。缩放、流式布局与响应式这些术语容易造成混淆，设计师常常错误地交替互用。实际上，每个都是布局技巧的显著进化过程，像技术演进那样逐一显现。缩放布局，旨在相对缩放每一个元素。它们会随着窗口大小变化动态缩放内容，就这方面而言，它们是响应式的。布局本身保持静止，通过改变每一个元素来保持一致的表现。上图：不同分辨率下缩放布局的例子，这种设计为了统一牺牲了易读性。流式布局就不一样，因为它们随着窗口尺寸缩放容器元素。通过em这类相对单位可以做到这点，克服了缩小文字的问题。用户主动缩放时，设计就被破坏了。上图：不同分辨率下流式布局的例子，这种设计为了易读性牺牲了统一。响应式设计不会缩放任何东西。相反，它会根据窗口尺寸决定显示哪些内容。上图：不同分辨率下响应式布局的例子。灾祸1：菜单折行如果在页面顶部使用了导航栏，当页面展现在小屏幕上时，响应式设计通常会把它“掰”成更紧凑的格式，但这并非总是有效，如果显示区域比断点更宽，又不足以在一行显示所有菜单项的话。结果会导致菜单的折行。有些方法可以解决这个问题。其一，减少导航栏中横排菜单项的数量，将它们分门别类。然后选中某类时 ...继续阅读 (31)