设计师 on Victor42

AI落地趣事一则

hi@victor42.work (Victor42) — Fri, 03 Apr 2026 09:42:00 +0000

公司每天要产大量固定模板的图，课程封面、推广位、喷绘横幅、桌签、臂贴等。基本都是改改文字，并根据类型从一批固定的背景图中选一张用。

设计师手动改不现实，运营不会PS也不想学，外包出去要20块一张。

我主业是UI设计，但这活儿一直都是我在干。我有个个人项目，把Excel和Photoshop的能力结合起来。运营填表，设计师维护PSD模板，我程序一跑，就能把表里的数据填到模板里，一次出一大批图。过去两年已经产了价值近15万的图，足够雇几个设计实习生来手工干这事了。

https://github.com/greenzorro/excel-ps-batch-export

就这个Python项目，这不是专门为公司定制的，它通用性很强。你做什么样的PSD模板，我程序就可以给你产生对应的Excel表格，运营拿去填表，收回来就可以咔咔出图了。

最近公司老板大旗一挥，高歌猛进推AI落地，降本增效。看上了我这个批量出图的能力，想要作为AI示范项目，给大家打个样。

要说降本增效，我这项目已经做到了，不用再推进什么。但问题是，它并不是AI，只是一套死板的程序。

这不行，没有AI，老板那关过不去。程序是传统的，是落后的生产力。要有AI感，扑面而来的AI感，一眼看出用了AI。

另一方面，这程序在我电脑上跑，大家就得依赖我。试问哪个老板不想把员工“蒸馏”成Skills呢？

没问题，让你蒸，部署到云端就好。其实这相当于无偿拿走了我的个人资产，但只要我不计较就没问题，反正也是开源项目。

部署到公司服务器上运行，如果给它配套做个操作界面，这产品就完整了。再给运营培训下，确实比我电脑本地跑更先进。

但这还是没有AI啊，太落后，被中层否了，不是AI我们也得包成AI。所以最终方案是在服务器上养只虾，给这虾配个钉钉账号，拉到运营的群里。运营每天@这个虾让它出图，就像以前在群里@我一样。

完美！这样一来，我的一部分就被数字化了，永远留在了公司里。如果把这虾的名字和头像换成我，在老板那应该更有震慑力。

唯一的问题是，本来可以0成本，但通过虾来运行，每天这token消耗蹭蹭往上窜。

转念一想，这搁老板那，哪是问题呀，高兴还来不及呢。第一次公司里有人把token花掉还能有巨大产出，他的AI大计有了曙光，该吹响冲锋号了。什么成不成本的，若为AI故，一切皆可抛。

我从中得到了什么信息？AI真不是泡沫，唱衰的可以洗洗睡了。解决多少问题先不说，它的存在本身就是一种精神慰藉，有极大的情绪价值。这是一种新的爱马仕。经济价值和情绪价值，它总能至少提供一个，这是什么神仙行业！

所以说，上班也是挺好玩的。有人疯就要一起疯，你我沉浸喜悦中。做人呐最重要就是嗨森啦~

UI画布尺寸计算器

hi@victor42.work (Victor42) — Tue, 10 Jun 2025 17:27:00 +0000

“给这个屏幕设计UI，我画布要建多大啊？”

背景

老婆从UI转工业设计后，经常遇到奇奇怪怪的屏幕尺寸。由于有UI背景，各种工控机的UI界面也归她设计。这些屏幕尺寸经常让她无从下手，不知道画布该设置多大。

这是个普遍问题，许多UI设计师不理解屏幕的工作原理。尤其是从Retina高清屏出现后，屏幕引入了倍数的概念，让大量UI设计师不知道设计稿画布应该设成多大。

常见的设备还好，Figma、Sketch等设计工具往往自带了尺寸。但工业设计、智能家居、物联网领域，有大量不常见的屏幕尺寸。互联网UI设计师接触到这类任务，往往就懵逼了。

其实，这有规律可循。核心就是PPI，每英寸对应的像素值，这是物理世界和像素世界的桥梁，是换算的中介。有人管这个叫像素密度，这个名字起得很形象，像素点越密集，颗粒感越少，显像越细腻。

有许多设计科普文章都详细阐释了这背后的原理。但对UI设计师来说，懂一点屏幕原理虽好，但不懂也不应成为从业的障碍。在讲究精细分工的现代社会，画画的人也不必知道画纸是怎么造出来的。

所以，UI设计师需要的并不是科普文，而是一个计算器。输入屏幕参数，计算器直接告诉他们画布应该设成多大。

计算

为了实现这个简单产品，背后的计算过程梳理如下。

输入方面，设计师要输入如下信息：

屏幕像素宽度
屏幕像素高度
屏幕尺寸（也就是对角线长多少英寸）
屏幕使用距离（近/触屏、中/键鼠、远/遥控）
习惯的App设计稿宽度（1125、750、375，没有就选最接近的）

知道屏幕像素宽高，根据毕达哥拉斯定理（勾股定理）可以算出屏幕对角线的像素数量。再除以屏幕尺寸，就得到每英寸像素数，即PPI。

PPI = 对角线像素数 / 屏幕尺寸 = √(像素宽度^2 + 像素高度^2) / 屏幕尺寸

根据屏幕使用距离不同，用PPI除以不同的常量除数，再取整，就能直接得到屏幕倍数。真实的屏幕倍数五花八门，但设计惯例是当作整数处理，这是屏幕碎片化问题的公认解法。

屏幕倍数 = PPI / 除数

具体为：近距离除数为150，中距离除数为110，远距离除数为40。

至于这除数怎么来的，是我收集了一些屏幕的参数，通过数据分析反推出来的近似值。我发现，多数触屏设备的PPI除以它的实际倍数，结果都在150附近。同理，中距离和远距离的屏幕，除以各自的实际倍数，结果都在110和40附近。

这种图表不常见，我介绍一下：这叫箱线图，boxplot，用来表达数据在单个维度上的分布范围与集中程度。这图一般的表格软件画不出来，我用Python画的。

炒股的朋友有吗？是不是很像K线图？没错，道理差不多，这个图关键信息也是看4个位置：

细线顶端：最大值（最高价）
细线底端：最小值（最低价）
粗柱子顶端：第三四分位数（开/收盘价）
粗柱子底端：第一四分位数（收/开盘价）

粗柱子内部还多一条横线，这是K线图没有的，代表中位数，我PPI除数就是按中位数取了个整。

多解释一下中位数和四分位数的概念：如果把所有统计过的设备按PPI除数从低到高排列，然后切一刀下去，让左右两边设备数量相同，这切的位置就是中位数。左右两边再用同样的方法对半切，切的位置就分别是第一四分位数和第三四分位数。

为什么不简单点取平均数呢？可以看到细线比柱子高很多，说明越往高低去，分布越稀疏，越容易出现个别数据偏离很远。但我们要的是能代表多数设备的除数，所以要排除这些极端值的影响，因而选择中位数。

接下来，回到我们上一个公式：

屏幕倍数 = PPI / 除数

PPI已经算出来了，除数也通过统计得到了。既然得到了屏幕倍数，核心问题已经解决。接下来还要考虑设计师自身的习惯，有的人爱用1倍大小画布设计（Figma和Sketch用户居多），有的人爱用2倍或3倍（PS主力的设计师居多）。

用屏幕的像素宽高，分别除以屏幕倍数，得到屏幕逻辑像素宽高。再各自乘以习惯的App设计稿宽度对应的倍数（1125、750、375分别对应3倍、2倍、1倍），就得到最终结果，画布该设置多大。

画布宽 = 屏幕像素宽 / 屏幕倍数 × 设计稿倍数
画布高 = 屏幕像素高 / 屏幕倍数 × 设计稿倍数

随之而来还有2个问题：切图切多大？字号设多大？

切图倍数 = 屏幕倍数 / 设计稿倍数

比如屏幕倍数2倍，你习惯按1倍设计，切图就切2倍。你习惯按2倍设计，切图就切1倍。

但如果你习惯按3倍设计呢？所以还要加个限制，设计稿倍数不能大于屏幕倍数，那没有意义，出现这种情况就把按屏幕倍数当做设计稿倍数。

字号和设计稿倍数直接相关。比如常见的提示文案小字字号，设计稿1倍，一般就是12px，2倍就是24px，以此类推。字号也受设计稿倍数不能大于屏幕倍数的规则制约。

这一章看下来是不是快缺氧了？这就是为什么我要把它做成产品，设计师的时间不应该用来算这种东西。一个产品可以帮大家节省数不清的时间。

当然，如果对屏幕的原理感兴趣，想要更深入阅读，还可以看这篇老文：https://victor42.eth.limo/post/3435/，虽然其中的屏幕分辨率数值早已过时，但原理没变。

最初是做了一个 Excel版计算器，为了验证我的计算方法是否正确。但使用不够直观友好，不适合作为正式产品。索性做成一个公开可访问的网页小工具吧！需求反正已经写这么详细了，用AI编程，不一次搞定都说不过去了。

接下来，轮到AI干活了。我把上面内容和下面的任务都给AI看，让它把我要的产品实现出来。

任务

理解以上背景和计算原理，帮我生成一个HTML小工具。要求如下：

产品名就叫“UI画布尺寸计算器”。
响应式开发，支持桌面与移动端使用。
由于项目简单，且无后端交互，使用原生HTML/CSS/Javascript即可，减少依赖。
CSS和JS要放在独立的文件里，不要混在HTML页面中，便于维护。
JS代码逻辑尽量解耦和模块化，常量放在开头便于配置。
用户输入项较多，设计完善的表单验证和信息提示。输入项最好带有示例，以placeholder或其它形式皆可。
输出结果包含以下信息：
- 画布宽度
- 画布高度
- 切图输出的倍数
- 小字建议字号，比如：12px（1倍）/24px（2倍）/36px（3倍）
输出结果的排版设计要直观，不要仅是数字的罗列。要根据结果的实际值画出一个屏幕的示意图，结果各项数值标注在示意图适当的位置。
整个产品提供深色模式和浅色模式切换，默认浅色模式。
使用#2A9D8F作为品牌色。

结果

果然，一步到位！

只是它没按我的要求使用原生HTML/CSS/Javascript，而是用了Typescript/TailwindCSS/Next.js。这套技术栈对于我这种IE6时代的上古前端有点要命，一开始我甚至都不知道在本地如何预览。不过这都不是难事，问问AI就学会了，顺便了解了现代前端技术的思想和基石，部署其实非常简单。

这不，产品就上线了嘛：https://ui-size.victor42.work/

看来对于简单的小工具，以后就是得先写文章，文章写完，工具也就写完了。

最后，拿着我收集来的屏幕参数数据给AI，让它调用MCP操作浏览器一个个输入验算，算出的屏幕倍数与真实情况高度吻合，尤其近距离和中距离设备都非常准确。唯一不准的是远距离大屏幕，屏幕倍数相比实际值有一定偏离，因为很多大尺寸显示器和电视的实际倍数是1.5，不是整数。

总体来说，应该可以很好地解决工业设计领域各类小众屏幕的计算问题。

我用Excel把PS变成了一挺重机枪

hi@victor42.work (Victor42) — Thu, 13 Jun 2024 14:05:00 +0000

听说隔壁市场部正在头疼，新版课程封面图设计被老板认可了，接下来要把平台上现有封面图全部更新掉。总共800多张图，不是那种简单替换文字就可以的，有很多细微的变化。市场部就一个设计师，忙着呢，自己做不现实。外包出去一张20就是16000，预算不够。

诶！一听到这值16000，我就来劲了。我最擅长自动化，数据狂魔加上PS技巧，这事儿整个部门也就只有我能干了。你们不是喜欢说设计价值吗？你的价值是什么？怎么量化你的设计产出？花半天时间，给公司省下一个设计师一整个月工资，够不够价值？就冲这绝佳的年底汇报材料，果断把活抢下来。

需求

市场部设计师做出来的模板长这样。就别对设计指点江山了，反正这效果是老板点名要的，简单直接没毛病。具体需求说起来也简单，把图上三处文字替换成真实内容，输出800多张图。

看到模板，很多设计师会觉得这很简单啊，PS变量定义，建个Excel批量输出就完事儿了。

还不会Excel+PS批量输出的设计师，有兴趣请看这篇：https://zhuanlan.zhihu.com/p/33725280

嗯……思路是这样没错，如果真这么简单，照着教程做就可以了，全文完。

但是，所有模板拿到手后，发现事情远没那么简单，各种变数超乎想象：

课程分了十几类，有些分类有独特的背景图，有些分类共用一张背景图。
顶部的课程分类不全是文字，有两个特殊分类（淘宝和天猫）用的是两者的Logo字形，这只能用图片来实现。
课程名称有的一行、有的两行，一行的时候要垂直居中。
图里文字颜色随背景图变化，并不是纯黑，而是略微偏向于背景色。
最下面的描述小字不一定都有，有的空缺，连带着小字底下的装饰框也得拿掉。
装饰框的线条颜色也随背景色变，和文字同色系，但鲜艳很多。

现在先停下来想想，用PS变量定义还能应付吗？十几个分类出十几个PSD，当然也能实现。但是我不想导出十几次，只用一个PSD，这事儿能搞吗？

能。

这就需要设计师同时也是Excel高手了。

Excel数据模型设计

既然这事这么复杂，先思考一下数据模型吧。

程序员看到这怕是要笑出声来，你一个小破图这么点信息，还数据模型？

轻喷啊大侠，我这不是借用一下思路嘛。但是话说回来，如果只想把事干成，条条大路通罗马；如果想达到最高的效率，那真的要用数据模型的思路来规划。怎样算最高的效率？运营填最少的信息，我每次导出做最少的操作。这个出图流程会长期运转，要保持边际成本最低。至于第一次的配置操作，复杂点问题不大，初始成本不那么重要。

那么我们的表里有哪些列呢？

课程分类
课程名称
描述
背景图

这几个是最显而易见的。加上需求里那一堆变数，实际需要的列有这么多：

文件名：用来控制最终输出的文件名，按照合理、便于查找的顺序排列
分类：那十几个分类，既以文字形式显示在顶部，也决定着模板的整体外观
标题第1行：标题有的一行有的两行，拆开处理，满足了运营手动控制断行位置的需求
标题第2行：第2行是可选的，不填就当作单行标题
描述：时有时无的关键词，既以文字形式出现，也决定了它底下的装饰框是否显示
淘宝：是或否的布尔值，作为”淘宝“分类的Logo图显示开关，由分类列决定
天猫：是或否的布尔值，作为”天猫“分类的Logo图显示开关，由分类列决定
单行：是或否的布尔值，控制单行标题图层是否显示，由标题第2行是否为空决定
两行：是或否的布尔值，控制第1行和第2行标题图层是否显示，由标题第2行是否为空决定
有描述：是或否的布尔值，控制描述装饰框是否显示，由描述是否为空决定
背景图：模板背景图对应的文件路径
前景色：前景色图片对应的文件路径，这是一张纯色图，用来给标题文字上不同的色

这里要解释一下，我标题实际上有3个图层，单行标题是一个图层，第1行标题和第2行标题是另外2个图层，用于两行标题的情况。

这样一堆信息丢给运营填的话，估计会挨打。其中大多数都可以计算得出，真正需要运营填写的只有分类、标题第1行、标题第2行、描述。把仅有这4列的表做成在线表格，散出去给运营填。没错，我们有5、6个运营在做这事，每人领了几个分类，这样吭哧吭哧填起来也快得很。

现在复杂的部分留给我自己了，怎样把其余的列算出来，这些都是要给PS用的，一列也不能少。略微一想就会发现，分类是关键。分类决定了淘宝、天猫Logo是否展示，决定了背景图用哪张，决定了文字是什么颜色，还决定了输出文件名的排序。所以应该为分类单独开一个表，作为维度表，一个分类就好比一种商品。记录图片内容的表，就是事实表，这就像商品的一条订单记录。分类名是分类表的主键，作为外键在事实表里出现，把分类的各种信息带过去。一张事实表（导出csv）、一张维度表，这应该是最简陋的星形结构了，或许可以叫”地月结构“？

上面这段许多概念属于数据模型与数据库领域。简单说就是把许多属性定义在分类上。只要属于某个分类，就自动根据分类名读出对应的背景图、前景色等属性。实际需求也正是如此。

现在，运营填好的全部数据（4列）已经在我的Excel文件里了，把它引用到隔壁的事实表里，根据PS的需要加上各个运算列，构成完整的数据表。每次使用时更新数据，保存成csv格式，交给PS处理。

这些运算列就考验Excel公式的运用了：

由于要去分类表里查它的各种属性，用好vlookup是关键。
文件名则需要文本拼接，想拼成什么样都可以，随心所欲决定输出图片文件的排序。
我在两个标题列里贴心地用字符串替换公式做了去空格功能，即使运营不小心多敲了个空格，也不会导致标题位置跑偏，精准居中。
到处都用了IF来判断空值，防止在空行上产生0。

这些对熟悉Excel的人并不难，就不展开了。

Power Query合并表格

但是，上面似乎遗漏了2个问题：

运营填好的数据是如何进到我Excel里来的？
运营再给一批新数据，怎么更新进来？

先来解决第1个。之前散出去给运营填的是在线表格，每人领其中几页，互不影响，且能实时更新。而我的数据表是一个本地Excel文件，因为要用到Excel强大的Power Query功能来合并表格，大多数在线表格产品没有这种能力。

每当要输出一批图，首先要把在线表格以Excel文件的形式下载下来（封面图内容收集.xlsx），放到和我数据表（封面图内容.xlsx）同一个目录下。只要文件位置不动，这层数据读取的关联关系就能一直保持下去。

在数据表中使用“数据”菜单里的Power Query。这个功能可以理解为一种图形化界面的SQL，它可以从本地表格、网页、本地数据库、Azure云上读取数据，并进一步清洗、转换、聚合。我这里用到的是它从本地表格读取数据的能力。

Power Query的界面对于只用Excel基础功能的人应该既熟悉又陌生。熟悉的是，“哇这里也有表格耶”；陌生的是，“其他这些都是什么玩意”。

怎么理解Power Query呢？它做了3件事：

先指定了数据源，外部数据从哪来
然后让我设定查询的规则和条件
最后执行这些查询请求，把我要的数据加载到当前Excel文件中，一个请求加载一页

其中最核心是第2步。界面左侧列表就是一个个的查询请求，它会按顺序执行下来。

每个请求里要“将第一行用作标题”，并且在筛选条件里去掉空值。

查询操作不止是基本的筛选排序，我这里用到了它的合并表格的能力。从运营那收过来的数据分散在很多页表里，总不能一个个手动复制黏贴吧？我把运营的每页表都查询出来，最后再建一个追加查询请求，它可以把格式完全相同的表合成一张，相当于SQL的CROSS JOIN。

顺道提一下，它的合并查询也非常有用，能实现SQL里JOIN和LEFT JOIN的效果。

点了关闭（其实作用是保存）按钮后，我的Excel文件里就刷刷刷多出许多页，不需要的可以删掉，留下有用的。我再合并好的表左侧加了一列序号，用来给文件名排序。

这样，运营填的数据就全部进到我的Excel文件里来了。

现在来解决第2个问题，怎么更新数据？

如果运营提交了一批新的封面图内容过来，我只要下载下来放到老地方覆盖一下。再打开数据表，进入“数据”菜单，点刷新。就这么简单，数据就更新了。

为什么把Power Query比作SQL呢，因为它记录和复用的是我的查询条件，而不是查出来的结果。查询结果虽然也显示出来了，但那只是预览，让我方便修改查询条件。实际上它是把我的查询请求记录在Excel文件中，每次点刷新，就重新查询一遍。

现在，经过了一系列看似复杂的首次配置，数据处理的管道已经建立起来了。后续使用变得异常简单：下载、覆盖、刷新、保存为csv，就变成PS需要的数据文件了。

PS批量出图

到了PS这一步，要做5件事：

整理和重命名图层
为图层定义变量
导入数据组
批量导出psd
批量psd转jpg

1. 整理和重命名图层

第1步没什么技术含量，图层该合并的合并，顺序该调整的调整。为了后面定义变量方便，建议把图层按照数据表表头来命名。

文件名这个图层很特殊，它不体现在图上。拿到的psd模板里没有，需要手动新建，样式随意，反正不显示。把它藏在背景图图层的底下，或者移到画布外面。

前景色这个图层也需要特殊处理。变量定义无法直接改变文字颜色，怎么实现随背景变化？把需要上色的文字编组，新建一个纯色图层，使用剪贴蒙板作用在这个组上，这就实现了统一控制文本颜色。

装饰框的线条颜色也会变，还记得吗？此处的颜色和文字颜色有关联，但又不一样。它们之间的关联是什么？在前景色的基础上，为这两根线条专门加一个色相/饱和度调整图层，把它的饱和度和明度调高就行。比如棕色加浓提亮就变橙色，墨绿加浓提亮就变草绿……这个技巧需要对色彩原理和PS调色有比较深刻的理解。

2. 为图层定义变量

第2步变量定义的基础技巧，这里就不手把手教学了，开篇引用的教程里都有讲。这里主要讲几个难点的处理。

变量定义功能最常用的是替换文字，用到的是其中的文本替换这个选项。当变量图层不是文本时，它就会变为像素替换，也就是换图。背景图通过这种方式替换。

前景色也一样，为每种文字颜色准备相应的纯色图片，把上一步创建的剪贴模板图层定义为变量，根据课程分类选用相应颜色。

可见性变量常被忽视，但非常有用。表格里这些TRUE和FALSE的列，就是通过可见性来控制图层的显示隐藏。可见性变量还可以和文本替换或像素替换同时使用。比如底部描述小字，文本替换改变它的内容，可见性则控制它显示隐藏。

前两步的工作虽然繁琐，但都是一次性的，在后续的使用中不必重复。

3. 导入数据组

切换到导入面板，把准备好的csv文件导进来就是了。

导入常见的错误有两种，一种是有多余的列或名称对不上的列，需要检查。

另一种是有的行里有空单元格。是的，PS导入数据组不支持空单元格，所以我在制作数据表的时候把空单元格内容都改成了NULL。这些NULL显示出来会破坏图片效果，所以可能为空的列都要做可见性判断，适时隐藏。

4. 批量导出psd

导出没什么技巧，这么操作就是了。

在这一步你可以自己定义导出的文件名格式。这么多可选的项里，真正有用的只有数据组名称，只有这一项能在文件名上留下对运营有帮助的信息。数据组名称读取的是csv文件第一列的内容，这就是我为什么把文件名这一列放在最前面，以实现对输出图片文件名的自由定制。

5. 批量psd转jpg

PS数据组导出的都是psd文件，交付出去的得是jpg文件，还要再转换一道。

录一个简单的PS动作，打开psd，存储为jpg，关闭。就这么3步，把整个psd文件夹用批处理跑一遍就行了。

我自制的动作集里有现成的存为jpg动作，可在文末提供的链接里下载。

还差一张表

好了，活干完了吗？只能说任务完成了，事情还没完，还差一张最重要的表。

这价值16000的800多张封面图，只是第1批。公司还会不停出新课程的，还会有第2批、第3批……我难道不该了解一下，自己的举手之劳一年下来给公司省了多少钱吗？即使我不想知道，也非常有必要让老板知道。

所以还要有这样一张数据统计表，邀功表。当然，不要起这么露骨的名字，取个谐音，叫摇滚表好了。

我要是再卷一点的话，还可以基于这张表生成个柱状图，每月、每个Q、每季度的输出价值。用我的月工资减去这些产值，直观展现出每个月我的实际用人成本，雇了就是赚到。要不要这么卷到时候再看吧，反正数据是沉淀了。

后记

这个活抢过来性价比极高。总共就费我半天时间，做了点工作流的初次配置，后续花费的时间可以忽略不计，午餐时间挂机跑一跑就好了。

这就是我的本事，我不爱造轮子，但我极其擅长组装轮子。

流程跑通后，和运营开了个会。市场部向他们讲解了提供内容的规范要求，也就那4列在线表格，没谁觉得难。运营们都以为我这是AI输出的。对于非技术人员，好像不可思议的事情都是AI干的，AI是silver bullet。有意思，这种偏见我已经习以为常了。

最后放上相关的文件和资源，有兴趣可以自己下载动手试试：

重要更新

这一套工作流程，我后来又开发了自动化程度更高的程序方案，只需要有一套Python运行环境。

详见：https://github.com/greenzorro/excel-ps-batch-export

量化设计价值构成

hi@victor42.work (Victor42) — Wed, 25 Oct 2023 10:51:00 +0000

事由

前阵子和几个同事在群里大干了一架，剑拔弩张。

虽然你几乎看不到我发设计相关的东西，但必须承认，我的本职工作还是一名设计师。主要做UI与交互设计，也接数据报告与PPT美化的活，有时还写写代码、搭建网站。我所在的设计部门是个中台性质的部门，承接其他部门的需求。我一人扛4个项目，其中2个UI类项目只能我接，团队里没有其他UI。4个项目会相互打架抢人，需求密集时我的排期是非常紧张的。

为什么跟同事干架呢？简单说，就是我UI工作都排满的情况下，另一个部门硬要占我时间帮他们优化数据报告（一份饰品行业的消费报告）。不并是什么高级的数据可视化，而是给PPT找商品图、换图，换完给客户看，不满意再换。

我拒绝了。这种实习生都能做的事，有空我可以帮帮忙，没空可不允许插队。我咬死排期不松口，对方认为这报告之前是我出的就应该由我继续，客户又在催，我俩就这么干起来了。

最终他们还是找其他设计师去了。事后我主管来找我谈，要我把排期管理方法在设计团队内推广。看来对方已经投诉过来了，但没空就是没空，就走排期，没得商量。公司还是有限责任公司呢，员工总不能是无限责任个人吧。

目前看来，对方是拿我没辙了。但为了防止事态升级，万一对方把战火烧到老板那儿去，我提前留了后手。我根据自己的工作排期数据，算出了手上各项工作花费的时间占比，对每项工作的价值做了评估，出了几张数据图表。其中的金额表示，相应的工作，只有月薪达到这个范围的设计师才做得了。

一目了然，他们这个部门（棕色）低价值工作的比例相当大，大量找图换图对齐调字号的工作，占我时间还非常多。老板看这事的角度，显然是招一个人来划不划算，有没有用出工资应有的价值。让我一个20K以上的人来干实习生的活，这事到了老板那，谁挨骂还不一定呢。

干架的事情到此为止，不深究。倒是这个处理和分析数据的过程挺有意思，在此记录分享一下。

数据来源

能做这样的分析，前提是我平时有积累数据的习惯。任何在我看来可以算作数据的东西，我都会设计某种方式把它组织起来，利于将来使用。

我给自己做了一张设计排期表，用的是多维表之类的工具。把默认视图调成了日历，挂在自己的钉钉签名上，让想提需求的人先看我排期。

虽然添加工作项是在日历视图完成的，但它本质是一张数据表。为了方便记录，我没有设置太多字段。项目名称、设计师（这是整个设计团队的排期）、开始和结束日期、需求对接人，还有一个历时（天）是直接算出来的，不用填。

有新项目过来时，我会第一时间更新到排期表上。为避免需求打架和扯皮，我有充足的动机维护这张数据表。

原始数据准备好了，里面有我40个工作日（近2个月的数据）。导到Excel里，需要做一项处理，把历时从文本格式改为数字，否则无法求和。接下来要开始做一系列的分析（从右往左），最终生成图表。

时间分析

先做时间分析，这个Tab里有两张表：

左表是对原始数据做了数据透视，得到每个需求对接人所占时长。
右表是把各个需求对接人手动对应到几大业务，汇总出各业务占用我的时长。

左表的数据透视是这么来的，翻译成人话：筛选特定的设计师（就是我了），以每一个对接人为一行，汇总历时之和。

右表里手动列出几大业务，从左表里选相应业务的人，用最简单的加法公式求和。

从数据透视表里选数据，比从普通表格里选数据方便。Excel会自动帮你写好这个getpivotdata函数，你只要点选就可以了，免去了使用sumifs的麻烦。

价值分析

接下来分析我这些时间花出去值不值。

价值分析Tab里有5张表：

表1其实就是时间分析里的右表，数据形式做了个变形。
表2是我手动创建的表，标明了各业务工作内容在不同价值区间的占比。
表3是对表2的数据透视，只是整理了一下格式而已，为了方便做表4。
表4是把表1和表3相乘，算出每种工作不同价值的部分的实际占比。
表5是对表4的数据透视，汇总出不同价值区间的工作总量占比。

表1是这么来的，仍然是一个业务一行，汇总历时。

但关键是格式的变化。在“求和项:历时”旁边的三角箭头里，有个设置。把它的值显示方式改成列汇总的百分比，再把数字格式也改成百分数，得出每个业务所占时间比例。

表2其实是整个分析的关键，但又是由我主观决定的。所以这不是一个多严谨的数据分析，但用来干架和自己看看，应该是够了。我根据实际经历和感受，尽可能公正地为每个业务划定不同的价值比例。我保证，我没有恶意贬低之前干架部门的设计价值，他们的乙方属性决定了低价值工作的比例真就这么高。至于价值区间分界线对应的设计师月薪，也是基于我10多年的工作经验而来，我对自己的判断有信心。

表3是表2的数据透视表。先按价值划分，每个价值区间里再按业务分。因为表4是这样的结构，一方面为了看起来方便，另一方面还是因为从数据透视表里取数比从普通表里取数方便。

表4很简单，从表1和表3里手动选择数据相乘。

表5再简单对表4做个数据透视，按价值汇总一下就好了。

图表

分析完了，开始考虑数据怎么视觉呈现。

第1层，分别展示各业务、各价值区间的占比，数据来源是表1和表5。直接对它们生成饼图，加上数据标签。再调一调颜色，避免重复。

第2层，展示各价值区间里不同业务的细分占比。表达这种2层树状结构的比例数据，最适合用Treemap，因为人眼对面积非常敏感，能够快速从中感知占比信息。从表4生成Treemap即可，再调下背景与标签的颜色，与右边两图对应。

开启Treemap的标签，让名字和值都显示出来，图上就有每个业务的细分占比了。

后记

有了这一套价值分析系统，我以后只要继续维护排期表就好。随时把排期数据往这里面一导，更新几张数据透视表，最终的图表直接就出来了。

其实别看原始数据就那么点信息，还能继续分析出很多东西。比如分析每月工作的饱和度、各业务的平均项目周期，如果继续深挖设计价值，还可以观察一年当中价值构成比例的波动变化，等等。

虽然干架的事情过去了，我也不会主动拿出这个东西去老板面前挑事，但意识到设计师这么抽象的工作也能以某种数据化的方式做分析，还是很有意思的。

厚此薄彼

hi@victor42.work (Victor42) — Sun, 06 Sep 2020 10:02:19 +0000

借你一用

“师父，这点穴的功夫只可维持一个时辰，是真的吗？”

“那自然是真的，为师岂会骗你。如此看来……”

“徒儿可是说错了什么？”

“没有，你提醒我了，我徒儿不愧是聪慧过人啊！”

“师父，我不明白。”

“没什么，去，把你大师兄叫来。”

“是。”

……

“师父，有何吩咐？”

“来，上前来。我们剑庐的水钟被你师娘拿去腌泡菜了，借你一用。”

“师父你——”

两小时后……

“有没有——”

两小时后……

“搞错！”

……

“师父，为何一年多来都不见大师兄，可是下山历练去了？”

“哦！你说你大师兄啊！”

“是啊，大师兄的剑出神入化，弟子也想有如此修为！”

“他退隐江湖了。”

“啊？大师兄正是而立之年，怎么会……”

“他腰间盘突出，可惜了……来，尝尝你师娘做的泡菜。”

一项新运动

和同事聊滑雪，杜老师说有人专门去滑粉雪，那个感觉非常好。

“粉色的雪？”实习小伙子问。

“不是……”

“坟头的雪？”小伙子追问。

听者3人先各自沉默了几秒……

“坟头雪你告诉我怎么滑！！”

“坟头雪，三尺厚。”

“所到之处地上都是人形吗？”

“一个个坟包滑过去。诶，努尔哈赤！诶，皇太极！”

“千里滑行，东北一路滑到中山陵。”

“小伙子，你应该是开创了一项前所未有的运动。”

老板无理需求，设计师轻松应对

听说有老板要求设计师一天出100张海报，舆论哗然。我怎么觉得这很容易呢？

厚此薄彼

厚此薄彼：人过30就容易犯的致命错误，当你想遮一边额角的时候，就会露出另一边。

干贝烧冬瓜

什么！今天食堂的冬瓜居然是用干贝烧的！？真是刮目相看啊！

我来尝一颗这饱含爱与诚意的干……萝卜干？？？

正阳门晚节不保

汪老师与饼的精彩对话：

“我说前门楼子，你说糟老头子”

“前门楼子是什么？”

“就是北京的正阳门，后来改名成了……”

“糟老头子？”

即兴翻译

我说你们这些Rapper，别整天 Yo yo check it out。别懒，好歹给翻译一下吧！

我打个样：来来来，瞧一瞧看一看（买不了吃亏买不了上当

现实版盗梦空间

各行有各行的摸鱼招式。KT作为建筑设计师，独门绝技令人叹为观止，不知道他造的这是第几重梦境：

西巴，暴露了！？溜了溜了。

围观

三狗子清明聚会，结束后在路边等滴滴。马路中央有个巨大的机械在地面挖洞，这是地铁施工，在为新的地铁隧道清理障碍。

这大机器由两部分组成：挖掘部分通过钢缆挂在滑轮组上，上上下下往返移动，每下去一次就挖一大团泥上来。固定部分非常巨大，承受机器所有重量，侧面伸出4只脚稳稳地支撑在地面。

机器刚挖了一堆泥上来，这又下去了。挖掘部分已经消失在洞里，钢缆还一直不停在往下放。我们都很好奇它能走多深。三个人看得出了神，滴滴来了都没人愿走。

叔叔来了个神总结：“这就是男人的乐趣。”

我的血统

黄鱼说有个荷兰人长得像我，怎么……我的血统这么快就暴露了么！？

电饭煲预约到底怎么用的？

hi@victor42.work (Victor42) — Tue, 12 Mar 2019 10:44:39 +0000

偶然发现电自己对饭煲的预约功能理解是错的，难怪我每次预约煮好的东西，都至少保温了一个半小时。

想了解一下其他人的情况，做了个小调查。结果分享给大家：

统计结果：

参与者不够多，数据不足以精确定量。
存在不少干扰信息，比如前2题选了不同结果，第3题却选了“当然，不就是这样么”。
即使排除干扰信息，也无法保证每个参与者都去做实验验证第2题。可能存在有人想当然，直接把第1题答案照搬一遍。
以上两条会导致第2题的统计结果不可信，两种结果的实际情况比例不明。也导致第3题结果失真，真实情况下“理解错了”的人还要更多。
第3题选“原来一直都理解错了！”的人里，有人认为“8小时后开始煮”结果发现是“8小时后能吃上饭；也有反过来的。可以认为这部分参与者是真的动手验证过，数据可信度很高。
选择“没有电饭煲”的人，未必真的没有电饭煲。也可能是答题时不在家，无法验证。

几点确凿的结论：

预约的作用，消费者理解很不一样。两种理解人数相对平均，没有一方明显占上风。
至少有30%的人没想过这个问题（“理解错了”+“不知道”）。
电饭煲生产厂商在这个问题上也不一致，两种处理方式都存在（统计结果第5条）。

推论：

既然消费者理解不一致，电饭煲生产商在这个问题上一定会遇到困难。
部分生产商纯粹按自己的理解来设计，这批生产商两者比例应该比较平均。
会在这个问题上替消费者考虑的生产商，更倾向于选择“8小时后能吃上饭”的策略。逻辑非常简单，因为多保温一会儿没事，但是到点了吃不上饭就要骂街了。
所以市面上的电饭煲，“8小时后能吃上饭”的应该至少超过一半。
但是从消费者的理解来看，“8小时后开始煮”的理解相对较多。可见这个概念并没有很好地教育消费者。

搬砖与拓荒

hi@victor42.work (Victor42) — Sun, 28 Jan 2018 21:17:08 +0000

开发人员们经常自嘲是IT民工、“搬砖”的。在我们外行听来只是自嘲，笑一笑就过去了。不懂他们每天在工作中面对的是什么，我们其实并不理解他们为什么这样自嘲。

最近和同学合作了一个小项目，是个微信H5，其中有数据提交的部分。我负责设计与前端开发，他搞定后端与服务器、域名。在这个项目里略微接触到了一点点后端的东西，对“搬砖”这个话题忽然有种顿悟的感觉，也更进一步理解了开发的难处，这真是一种非常不同于其他工种的工作。考虑到正在阅读这篇文章的你很可能不了解开发，我尽量用大家都能理解的方式来讲这个故事。

这个H5项目的分工方式，是标准的前后端分离。所谓前端与后端，可以理解为事情发生在什么地方，靠近用户就是前，远离用户就是后，中间连接两者的是错综复杂的光纤、Wifi。我负责的前端部分，主要是把页面的外观做出来，展现到用户的手机上，并且处理一些发生在用户手机上的逻辑，例如输入框里填写邮箱要遵循一定格式，没有@符号当然不是邮箱，不能提交。我同学负责的后端部分，就是在网络的另一头接收用户发过去的信息，存到服务器上的数据库里，并做好统计工作。

这里面有一部分工作需要我们共同完成，我们得约定好，我在前端把用户填写的内容以什么样的形式、通过什么方式传输给后端，他在后端接收到这些内容之后要给我怎样的反馈，如果中间出了什么差错，他又会给我什么样的反馈。这就属于开发们天天挂在嘴边的“接口”。

既然合作方式是这样的，双方就有一定程度的相互依赖。我先把前端部分的代码写好了，但是和接口相关的代码要怎么测试？没有后端的配合，我不知道我这些代码写得对不对。这时候同学的后端代码还没写好，我就得等着他。当然，实际工作中，开发人员并不会真的这么傻傻等着，有许多种方式来让其中一方模拟另一方的工作，我们也是这么做的。

他写了一小段代码给我，用的语言是Python，让我在本地模拟这个接口。我一点也不懂Python语言，打开他的代码直接懵B。来来回回仔细看了好几遍，终于理出一点头绪。结合我们之前约定好的接口，大概明白这些代码做了哪几件事情。然后我要做的，就是把我自己的电脑当做一个小型的服务器，把同学的这段代码在我电脑上运行起来，用我的前端代码向这个小服务器提交内容。他的代码自然会给我反馈，让我得以测试自己的代码有没有起作用。

不过事情进展并不顺利，实际上最终是失败了。问题出在运行我同学这段Python代码上。要把这段代码运行起来，有一些前提条件。首先，我的电脑上得有Python这种语言，这个没问题，mac系统自带Python 2.7。然后要安装一些业内广泛使用的代码模块，这些也是用Python写的，同学的代码里用到了这些代码模块。安装其中几个模块时就遇到了问题，电脑报了错误，没有安装成功。

刚开始以为是mac系统的文件夹权限问题，用了许多种方式获得了超级用户权限，没什么作用。各种开发者社区里提供了一些解决方法，升级或重装某些模块，但也没解决我的问题。然后我想会不会是Python版本问题，装了Python 3.6，把mac自带的python2.7换掉了，又重装各种代码模块，电脑给我报了一个语法错误。查资料发现从Python 3开始，有些语法和Python 2不一样，把同学的代码语法稍作修改，语法错误解决了。但最早报的那个错误又来了，继续查资料了解到，我同学用的某个代码模块在Python 3中已经不支持了，需要用另一个模块来代替，这就要对我同学的代码本身进行改造了，彻底超出我能力范围。我也不愿再折腾换回Python 2.7去尝试其他方法了。这条路没走通，最终放弃。

换了一条路，用同学推荐给我的一个现成的工具，也可以模拟后端接收信息和反馈。只是这工具能做的事情有限，不像直接上代码那样神通广大，如果以后有更复杂的需求，也许就不够用了。算了，至少在这个项目中管用，起码问题解决了。

经过这么一番折腾，顿时觉得开发们太不容易了，这种工作和我们做设计的有根本区别。我们用的设计工具、设计方法是不是还算稳定可靠？即使出了问题也基本上能很快解决，重启治百病，再不行重装，我们可以专注于自己的设计工作。对开发人员来说，他们使用的编程语言、代码模块、开发环境就是他们的工具，这些东西出问题的概率比我们的设计工具高多了。有时候是不兼容，有时候是设置不对，有时候是些莫名其妙的问题。这有点像装修工人，一会儿锯条断了，一会儿电钻坏了。狭义地来看，解决这些问题并不属于正常开发工作的一部分，但他们不得不花许多时间来解决。

仔细想一想我熟悉的前端开发，也是这样啊。举个例子，移动端页面里，手指按下按钮时可以加上一个反馈效果，和电脑上鼠标悬停的效果差不多。但是这背后也有一个不明不白的坑，你可以在代码里定义，某个按钮按下时颜色变深，然后你会发现这个代码没起作用，颜色没变。怎么办呢？查一下资料，才知道要加一句代码才能生效，但是这句代码本质上什么也没做。就像下象棋时你抓起马，在棋盘上空挥舞一圈再默默放回原处，你一步也没走。就这样一个神操作却能让手指按下效果生效，这合逻辑吗？不需要合逻辑，你记住这么写就行了。解决这种问题，并不创造任何东西，但这就是开发人员工作中经常要面对的事情。我也相信，多数开发应该不喜欢去解决这种问题，这些事情是苦活累活，真正的创造工作会让他们更有成就感。

深想一层，开发真是一个了不起的职业，不得不为无米之炊。有时候会看到一些技术大V在吐槽，某个最新版开发包又bug百出啦，某个接口挂了又导致产品功能受影响啦。实际工作中，也会听到开发同事被一些与项目无关的技术问题绊住。但是反过来，他们的工作性质很像美国淘金热时期拓荒者，茫茫荒原什么也没有，一批又一批人自己制作工具、盖房子、修铁路。有他们解决种种鸡毛蒜皮与疑难杂症，创造了这些基础设施，后来者才能在前人的基础上建设出城市，创造出繁荣。我们日常工作和生活中，能用上各种稳定可靠的产品，都离不开他们的摸索与折腾。

当然啦，我并不喜欢做这种性质的工作，前端技术也是点到为止，学到能用的程度就行了。对另一个行业胡乱评价了一番，也不知到不到位。不管怎样，心怀敬畏，还是好好做我的设计吧~

最后的尊严

hi@victor42.work (Victor42) — Sun, 12 Nov 2017 23:15:42 +0000

加拿大生物图鉴

KT告诉我一个消息，pizza要移民加拿大了。我想了一下，这厮竟然出去祸害外国友人了，瓶子里的恶魔终究是被放出来了。

以后加拿大的生物图鉴可能会新增一个条目：Pizza，外来入侵物种，习性不明，变化无常……

最远的顺风车

某天晚上下着小雨，一只甲虫落在引擎盖上，一路跟着我跋涉35公里回家，这也许是它这辈子搭过的最夸张的顺风车。

到站之后，它首先应该思考几个宇宙终极问题：我是谁，我从哪来，我要到哪去……哎呀妈妈~~

桃园三结义

哎我说，这是我们公司的哪三位烟民啊，抽着抽着顺便拜了把子么？

最后的尊严

和KT在讨论，如果有一天我已经秃到只能剃光头了，我到底是应该用洗发水呢还是沐浴露呢还是洗面奶呢？KT说有专门洗光头的，广告词我们都想好了：呵护你的头皮和最后的尊严。

对面的傻X

当了驾驶员之后，能够真切体会到那种路上开车的除了老纸都是傻X的感觉。

有一次在十字路口等红灯，对面的远光狗让人猛然升起一股无名火，我开始和这个家伙花式对闪，常亮、快闪、SOS、莫尔斯码通通闪了一遍，心里骂了一万遍傻X，对方我自巍然不动，车灯仍然那么刺眼。

闪了半天，忽然对方真的把远光灯打开了。我擦嘞那刚才是什么！！

然后脑补了一下对方司机的视角，发现好像有什么不对……秒怂。

Why don’t you get a job

竹子失业在家，找工作找了快2个月了。
我最近迷上了一首歌：Offspring - Why don’t you get a job。
有一天竹子发现我在听一首奇怪的歌。
她凑过来，认真地从头到尾看完了全部歌词。
以下省略十万字……

一稿通过

想象一下，如果设计师团队的氛围像销售那样，画面应该会十分感人。

“XXX同学的设计一稿过了，大家鼓励一下。”

全体设计师站起来鼓掌，铿锵有力整齐划一：“一稿通过！一稿通过！一稿通过！”

完了再迅速坐回原位，该干嘛干嘛，好像刚才什么也没发生过。

直播婚礼

群里在讨论小帅的婚礼：“小帅你的婚礼什么时候发请帖啊？”

小帅是个前端开发，问她的时候，她说很快就好啦，她正在亲手制作这个H5请帖。

小棣说你自己是做前端的，H5一定要做得好玩一点啊，什么弹幕、直播都搞起来。然后大家纷纷开始给她出主意……

“直播好啊，刷个火箭。”

“新娘，你是否愿意嫁给面前这位男士，白头偕老，不离不弃？”

“我愿……诶！谢谢昵称为东北大肘子的朋友刷的大火箭，兄弟姐妹们666走一波啊！我愿意。”

320

国庆去云南，提前预约了自驾租车。车型、公司什么的转眼就忘了。

某天接到一个座机号码的电话，对方问我是不是预定了320。我心想，什么320，莫非是航班号来的？于是没怎么过脑子，立马反问他：“是飞机吗？”

我能听见电话那头的哥们忽然绷不住了。

如果真的一定要有接亲这个环节的话……

邀请KT来参加婚礼，我跟他说，我的婚礼就是完成任务，不然我俩谁也不想办婚礼。不要接亲，不要伴郎伴娘，不要蛋糕。婚庆公司包办，就要标准化，就要不走心，就要没创意。

KT说接亲都不接啊？

我说接什么亲啊，结婚的前一天晚上，我们两家人全都住在一起，要是搞接亲的话，很可能就是这样：

一大早，我带着伴郎团开车出去，沿着红谷滩兜一圈。

然后竹子化妆化好了，我回家抢亲，伴娘各种刁难，伴郎往闺房里塞红包（马丹这就是我自己房间好嘛！）。终于，竹子出来了，我带上她和伴郎伴娘团开车出去，沿着红谷滩兜一圈。

接下来该拜访女方家庭了，我们又开车回家，和竹子的爸爸寒暄几句，他脸上洋溢着幸福的喜悦，说我女儿交给你了。我带上竹子和伴郎伴娘团开车出去，沿着红谷滩兜一圈。

再去拜访男方家庭，又一次开车回家，和我爸寒暄几句，我爸说竹子你就把这当成你家，这小子要是对你不好你告诉我，我去揍他。之后我带上竹子、伴郎团伴娘团、双方家长，一起开车出去，再沿着红谷滩兜一圈，最终抵达酒店。

……

我们最后一次开车出小区，等道闸升起的时候，保安敲了敲我的玻璃，我摇下车窗，他说：“你们进进出出一上午了，这婚到底还结不结了啊！”

可乐橙译文精选

hi@victor42.work (Victor42) — Sun, 20 Aug 2017 16:34:28 +0000

翻译项目停得突然，还是应该要有个像样的收场。也有读者朋友反映，希望我能选择一些质量高的译文，制作成精选集，这是个很好的建议。我挑选了一些自己喜欢的译文，简单分了一下类：

设计模式

人与行为

理论与指南

动画

前沿探索

案例研究

其他

还有一篇幕后故事《我译文背后的故事》，详细介绍了我翻译一篇文章的全过程。

最后，奉上许多朋友想要的译文来源网站清单：

翻译项目停刊公告

hi@victor42.work (Victor42) — Tue, 08 Aug 2017 00:37:45 +0000

翻译项目到目前为止已经180期了，在这个时候宣布停刊，应该会让大家深感意外，但于我自己却是一件好事。

大概翻了翻之前的译文，第一篇是2013年7月14日，不知不觉4年过去了。从最早翻译设计风格动向，之后出现了一些无病呻吟的假大空内容，再关注了一阵子各种交互设计模式，直到最近一年，更多是在研究人与行为。整个过程，是我个人成长的一种见证。

翻译项目的初衷是为了让自己坚持学习，这段时间来，目的确实达到了。坚持阅读国外设计文章，让我从多角度了解平时未必能遇到、想到的方方面面，也因此认识了不少才华横溢的同行。这是很有价值的一件事情，如果你新入行，可以尝试做一做。

但是，没有任何事情能让人永远从中受益。一件事情坚持做下去，边际收益总会在某个时刻开始递减。现在，我感觉这份坚持带来的收益已经降低到了临界值。从这些零散的知识片段中，我已经很难再得到重大收获了。我需要学习更系统的知识，也需要拓宽视野，从设计和科技领域之外获得新的启发，开拓新的思想疆界。

因此，我思考了很久，最终决定停掉翻译项目。腾出更多时间来观察生活，探索经济、商业、心理、自然科学、历史人文，或者仅仅是给女朋友做一顿海鲜大餐。与这些事情相比，继续翻译带来的回报已经不值一提了。既然如此，我需要勇敢地向习惯发起挑战，做出改变。

必须要感谢支持了4年的读者朋友们，许多ID我都记得，从第一年一路跟到了今天。这是个纯粹的个人项目，如果有设计师朋友从中得到收获，那都是在成指数级地肯定这些译文的价值，证明付出确实值得。

最后，这并不是告别，停掉的仅仅是翻译。我仍然出没于设计行业，仍然会偶尔发布一些原创的设计思考，当然，产量可能会低得令人发指。欢迎大家继续关注，更欢迎大家果断取关。停刊的改变不仅仅之于我，也之于每一个人。借此机会思考一下，自己目前的学习方式、获取信息的渠道，还可以变得更好、更有效吗？

移动应用弹窗设计指南

hi@victor42.work (Victor42) — Sun, 06 Aug 2017 00:04:33 +0000

[国外设计第180期]

弹窗、对话框，随你怎么称呼，这些小窗口出现在屏幕上从来都不是理所当然。虽然它们是你应用中一些相对较“小”的元素，却扮演着影响用户体验的重要角色。

一方面，它们可以帮助用户度过应用内的旅程。另一方面，处理不当时，它们也会使用户感到挫败。

有幸的是，弹窗比较成熟，容易实现。用适当的手段和规范可以轻易改善它们。我们这篇文章要讨论的就是这个。

由于并非所有弹窗形式都相同，我们把它分解为5种常见类型，并且总结了每一种的优化“准则”。遵循这些指南，你一定可以使你的弹窗更好地达成目标。

“推荐给朋友”和“为应用打分”弹窗

你当然希望用户量增长、提升好评率、增加病毒式传播的可能。谁不想呢？但是你要了解，多数用户不会向朋友推荐你的应用，或者给它打分，除非他们觉得这么做会得到有价值的回报。

Uber的奖励弹窗

“但是，推荐给朋友是如此简单轻松的任务啊！为什么用户不会大发慈悲，帮助一款小软件成长呢？”很不幸，现实没有这么简单。

注意我们刚才用的词是“任务”。这就是多数用户看待“推荐给朋友”和“为应用打分”的方式——看成任务。互换原则就在此时发挥作用。大概来说，就是你得给予用户某些东西，然后才能向他们索取。可以是通勤应用中的免费出行，或者是某种总体价值和乐趣。最好对这些弹窗使用A/B测试，让它们以不同时机出现在用户旅程的不同位置。这能让你更好地获得重要的统计数据，了解最终应该在何时何地放置弹窗。

同时也一定要确保，从你的应用中转到App store、社交媒体频道、或消息平台的过程尽可能流畅。获得一个推荐链接对于用户真的是“简单”的事情吗？在Wi-Fi和移动网络环境下，整个流程的运转有何差别？有许多重要因素需要考虑。花时间分析和优化这两种弹窗，你肯定能收获更高满意度、活跃度和更多新用户。

记住，“[聪明地]索取，你才会有回报。”

“推送通知”弹窗

推送通知是一个超有价值的手段，能使用户保持投入、反复使用。对许多用户来说，推送通知已经成为了他操作一款应用的主要媒介。不必再打开应用，用户通过推送通知满足他们大部分需求。于是，获取和保持向用户发送通知的权利，应该是用户粘性与留存策略中的一个重要方面。

在Android系统中，方式很直接：推送权限请求会作为AndroidManifest.xml的一部分，用户在安装前会看到所有需要获取的权限。

在iOS上就是另一回事了。iOS的权限弹窗必须由应用内的代码触发，会向你的用户展示一个这样的弹窗：

图片来源：Xtremepush.com

如果用户点按了“不允许”选项，对你来说就相当于玩完儿了。除非用户手动进入权限设置，否则拒绝权限是不可逆转的。所以让你的用户按下“允许”权限至关重要。

我们推荐两种方式，来尽可能保有最多的通知推送许可：

尝试创造一个你自己的、应用自带的权限弹窗，让你评估用户接受推送通通知的意愿。这会让你更加理解用户的行为和偏好，把权限获取留到某个用户真的愿意点“允许”的时机。
仅仅在在你认为最相关和最有说服力的时候请求权限。在此时此地，真的有需要获取通知权限吗？在权限请求提示中，借助当前环境清晰地向用户作出解释。

数据权限弹窗

推送通知权限和数据获取对话框一脉相承。同样，对于这些特殊弹窗的用户体验，我们都是在讨论iOS应用。数据权限弹窗包含对位置、日历、联系人信息、提醒事项和相册的请求。移动开发者必须小心翼翼，因为请求数据权限不是一系列勾选框那么简单。

来源：Developer.apple.com

苹果在他们的权限请求指南中提到：“虽然人们赞赏移动应用获取个人信息所带来的便捷，但他们也希望能掌控自己的私密数据。例如，人们喜欢自动给照片标记上地理位置，或者找到附近的朋友，但他们也想要一个能关闭此功能的选项。”

要使这类弹窗保持相关、显而易见。别设计一个请求用户地理位置的计算器——别这么做。

使用苹果在弹窗中提供的文字位置，描述你的应用为何需要这些信息，即使你自己认为原因显而易见。在某些特定的、相关的用户操作之后，再请求适合的权限，也是一个好方法。比如说，用户使用你的应用创建了一段视频，并且想要分享给朋友。只要用户点了“在Facebook上分享视频”按钮，这就是弹窗请求用户社交媒体账号权限的绝佳时机。用户更容易接受权限，因为它提供了清楚的解释，“要想达成A，必须先完成B”。

想要深入研究，请看我们的一篇文章，讨论如何使数据权限不那么令用户望而生畏。

“错误”弹窗

除了向用户索取权限，弹窗也是开发者向用户表达信息的一种重要手段。尤其是关系到应用内的错误。

世事无常，总有错误出现。错误中的错误是最不该发生的。这么说是什么意思？就是说你的弹窗不能让用户感到迷惑，使得已经发生错误雪上加霜。

我们来举个例子，比如用户的收货地址写得不合逻辑，所以当他们在支付时就会发生“错误”。如果你的弹窗里写着：“发生了错误：支付无法完成”，用户就不得不试图猜测错误的原因。相反，你应当利用这个时刻告诉用户为什么错误会发生，收货地址中具体哪一项需要更正。必须要了解，用户任何的猜测和挫败，可能被一个弹窗放大，最终影响潜在的转化。

而且，对于那些需要用户操作的错误，我们不仅仅告诉用户错误发生、该做什么，还需要引导他们前往相关的操作界面。坚持使用清晰的措辞来准确表明操作（抹掉、撤销、前往的我个人信息界面），而不是使用模糊的文案，例如“是”或“否”。

如果应用中发生了技术性错误，你可以利用弹窗来触达用户，告诉他们你正在努力解决问题。这给你的应用增加了一丝人性，同时向用户表明你在乎他们的个人体验。

想了解“反馈”类弹窗的更多秘诀，我们建议你读Nick Babich的这篇文章，讨论对话框设计的5条重要原则。

挥洒你的才华

我们不是要粉饰任何事情。最终有些用户仍然会看到这样的弹窗：

图片来源：OSXdaily.com

**但也并非人人如此。**你有能力轻松改善弹窗，让使用与转化增长。首先，要确保你拥有一个移动应用数据分析平台，例如这个，Appsee，能使你监控它们的表现和用户体验效果。这些洞见可以让你自信满满地迭代、测试和验证。弹窗可能名声不怎么样，但利用深思熟虑的策略，它们会给你的移动应用带来重大转机。

作者信息：Hannah Levenson

原文链接：http://usabilitygeek.com/mobile-app-pop-up-guidelines/

短期记忆与用户体验

hi@victor42.work (Victor42) — Sun, 23 Jul 2017 00:01:35 +0000

[国外设计第179期]

**摘要：**人类大脑不适于抽象思考和记忆数据，但网站常常要求我们这么做。许多可用性指南都取决于认知局限。

人的短期记忆无法保留许多信息，尤其当人们不断被大量抽象或不寻常的数据轰炸时。设计师不能忘记用户是多么的健忘，为此我们来回顾一下大脑如此无力的原因。

人类极度善于猎杀长毛象。我们的祖先仅凭燧石这种水准的武器，轻松灭绝了从澳洲到北美的许多大型动物。（从今天的环保角度来说，我们可能会哀叹这些物种灭绝的方式，但史前人类对抓住晚餐更感兴趣。）

使用计算机时需要的许多技能，对于猎杀长毛象并没什么用。这些技能包括记住一个接一个界面中的晦涩代码，并且要理解极其简略的表单标签。人们不擅长这些技能一点也不意外，因为在史前环境下，这些对生存并不重要。

今天的人类大脑，和一万年前的大脑没有区别。的确，我曾经想过使用这个名称**“为穴居人而设计”**，作为我们的新课程，《用心理学解释可用性规范》的标题，以此指导有效的网页设计。但是，这么做又违反了文案规范，故意制造花哨的标题，却无法真正解释网页（或者像本例中，一场研讨会）内容。

取而代之的标题是，“可用性和人类大脑：顾客的思考方式”。

如果我使用了第一个标题，它就会勾起你的长期记忆，来激活与“穴居人”相关的术语——可能包含了诸如食人恐龙盘踞地这样的概念，如果你B级片看多了的话。它绝对无法激活与提升网站业务表现相关的概念。相比之下，我们最终选择的标题包含了“顾客”一词，以一种更恰当的方式唤醒记忆，它是关于吸引更多点击、以业务导向引导用户的心态。

为脑力的局限而设计

当涉及到抽象思维时，人的脑力极其有限。比如说很著名的，长期记忆可以保留7块信息，而且这些大概在20秒后就会被大脑忘记。

有一种常见的误解是，短期记忆意味着菜单应该限定在7项之内。其实菜单更长也没有问题（如果需要的话），因为用户不必记住所有的菜单项。整个菜单的概念依靠的是认知，而不是回忆（UI设计的10条基本启发之一）。还有许多其他关于菜单可用性设计的研究表明，短菜单当然更易于浏览。但是菜单太短，选择就变得很抽象和模糊。

短期记忆的局限决定了一系列其他的网页设计准则：

响应时间必须足够快，用户才不会在等待下一页加载时忘记自己在做什么。
改变已访问链接的颜色，用户就不必记住他们点过哪里。
简化产品对比，在最初的分类页面以及特殊的对比界面中，高亮显示产品的主要区别。如果需要用户在不同的产品页面之间来回切换，推测区别，他们就容易迷惑——尤其是不同页面的信息以不同方式呈现时。
不要使用优惠码，而是在你的邮件中放入特殊链接，自动把优惠加入到用户的购物车中。这有两点好处：
1. 让计算机来承担记住这些晦涩代码的责任，并寻找合适的时机使用。
2. 去除了“输入优惠码”输入框，这会吓跑那些并没有优惠码的用户（这些人会拒绝在付款流程中支付，如果你公然表示其他用户能享受优惠的话）。
在用户需要的地方，依据环境提供帮助，他们就不必前往一个独立的帮助页面，记住步骤再回来处理。（请看我们的App可用性课程，了解更多关于用户帮助的内容。）

个体区别

虽然人类大脑的平均水平更适于猎杀长毛象，而不是使用网站，但我们不是完全平均的。实际上，存在巨大的个体用户表现差异：前25%的用户比末尾的25%用户快2.4倍。

更极端一点，只有4%的人有足够的脑力处理复杂的认知任务，例如运用专业背景知识产生高级联想。很可能你就在这个精英群体中。而且糟糕的是，你所处的互联网团队中许多成员也是。（剩下的人也绝对是前25%，仍然远远优于其他用户。）

这就代表，你的短期记忆可以比许多用户多保留2项信息。这看起来不算多，但如果你的网站阻挡了这些短期记忆较差的群体，需要用户记住不相关的信息，哪怕就差这么一点点额外的短期记忆能力，可用性就会翻天覆地。你甚至还有富余的脑力来思考产品线，但如果你的用户已经耗尽了脑力，你的网站会让他们产生挫败感。

尽管为穴居人而设计是个很糟糕的标题，却很有助于记忆，很到位地形容了有限的脑力。毕竟，向你付钱的顾客其实才走出洞穴没有多久。

作者信息：Jakob Nielsen

原文链接：https://www.nngroup.com/articles/short-term-memory-and-web-usability/

记忆的工作原理与设计诀窍

hi@victor42.work (Victor42) — Sun, 16 Jul 2017 22:42:54 +0000

[国外设计第178期]

我们日常生活中最重要的信息处理器，是看不见摸不着的。它无法买卖或从别人那里索取，但是它可以通过许多方式来提升和加强。这种东西难以描述，却是人类最宝贵的特征之一，它可能决定了我们的每一步行动和每一次决策。它是一种奇迹，我们很少深入思考它。这就是人类的记忆。

记忆体现了数据存储与处理天然且惊人的复杂性。它在人的一生中能保存海量的信息，并且可以用对它主人有利的方式组织信息。它甚至负责设定信息的轻重缓急，让我们时刻记得一些重要细节，同时抹掉其他似乎不必要和很久没用的信息。人类记忆是一种机制，决定了人与外部世界的互动方式。

显然，在用户体验设计领域，所有的界面设计都需要对这方面加以研究和考虑。了解记忆的工作原理，设计师可以创造出以人为本的界面，迎合用户这种与生俱来的能力，节约他们的精力，提升可用性。

健康饮食类应用

记忆的基本要点

总的来说，人类的记忆是大脑中天生的数据存储能力。它会响应外界的刺激，收集数据，加以处理，并以不同方式组织。而且，它还让人根据需要调取它收集的数据。但是，它并非一种完美的机制，因为它会受大量物理和情绪因素的影响。

基本上，心理学家谈论的是3种类型的记忆：

感官记忆。当我们接收到听觉、视觉或触觉这些物理感官信息时，它能短时间存储数据。
短期记忆（工作记忆）。它可以让人在不重复某个行为的情况下，短时间记住一些数据。
长期记忆。它能长时间存储大量多种多样的数据，可能一生都会保持记忆。

重复和建立关联，是获取长期记忆的有效方法。请看下图，它来自Learning Solutions Magazine的这篇文章，我们可以看到这个基本流程，数据如何从外部刺激转化为长期记忆。

用户体验设计师在创建网站或移动应用的交互流程时，应该考虑这个因素。当然，他们的目标是让用户形成应用的长期记忆，使得用户能够轻松地反复使用应用界面。了解数据的存储过程，设计师可以制定出有效的策略，改善用户认知，进行必要的重复。而且，它有助于合理组织屏幕上的信息，优化产品的信息结构。

记忆的基本定律

心理学专家提出的记忆的3个核心方面，其实非常简单：

**1. 专注。**人需要保持专注，才能记住某件事情或者大量信息。否则，很有可能信息会被忽略，仅仅停留在短期记忆层面。

**2. 关联。**记忆是一种庞大的数据网络连接。如果一个人把新信息与广为人知的信息或自己的长期记忆关联起来，就更容易把它记住。

**3. 重复。**在数据处于工作记忆阶段时，反复多次激活它，是一种能够将它转移到长期记忆的有效方法。

依据这3点来组织界面上的内容，表现出视觉层次和认知，可以突出需要记忆的重要元素，使界面更易懂。

电影院应用

深入探索记忆

还有其他的研究、实验和实用测试总结了一些定律和准则。我们从中选择米勒定律和席克定律来介绍一下。

米勒定律

人在工作记忆中平均最多能记住的事物数量是7个。

这项探索是基于乔治米勒在1956年的心理学报告《神奇数字7±2：我们处理信息能力的极限》。一般概括就是，它说明了人类的短期记忆平均能保持和处理最多7个事物或信息，这个数字会上下浮动2。显然，这条准则是一般化的规律，真实情况取决于许多因素，包括信息本身。

后来的研究，比如Richard Shiffrin和Robert Nosofsky的报告《7±2：关于能力上限的论述》，关于工作记忆的原理提供了更深刻的洞见。作者特别提出，人一次可以记住的事物数量，取决于事物本身。人平均可以记住7个数字、6个字母、5个词。它赋予了大脑快速处理信息、识别字符、与长期记忆形成关联、以及最终形成记忆的能力。

在设计方面，信息在构造清晰可用的界面时扮演了重要角色。需要用户一次记住太多内容的界面，会制造不安，让用户恼怒，甚至他们自己都不知道这些负面情绪从哪来。

Magic.co的欢迎页面

席克定律

选择越多，越难做出选择。

乍一看，这条定律似乎和记忆没有关系，但其实仍然存在一定联系。记忆是一种保护人类免受糟糕体验的机制。选项越多，他们就会想起越多相关连的事物，越容易分心——在这样的情景下不可能预知结果好坏。而且，一次给出太多选项，其数量超出了工作记忆能处理的范畴，超出了用户承受范围。在电商平台中，这个因素尤其需要慎重考虑，应该找到一种平衡，给予用户所有必要信息，同时避免给Ta过多选择。找到这种协调是体验设计师的主要挑战。

咖啡团购应用

创造利于记忆的用户体验的诀窍

基于上面提到的因素和探索研究，我们来讨论一些运用以上知识提升用户体验的诀窍。

1. 不要让用户一次记忆太多事情

这当然不是说所有的界面都只能保留5-9个元素。不过代表核心操作的元素数量，应该要符合这条规律。设计师把界面中少数元素设计得突出且吸引人，就能遵循专注原则，让人注意到关键区域，例如菜单、行动指令、产品图片等。视觉层次是最关键的策略之一，界面设计可以包含许多划分成组的元素，易于人类记忆消化。

这对于界面中的文案内容同样有效。在这篇谈论此问题的文章中，我们提到了一些调研：根据最受欢迎的社交媒体分享平台Buffer的研究，标题的理想长度是6个词。Jacob Nielsen提供了一项研究显示，5-6个词的标题最有效，不亚于一个能表述所有信息的长句。其原因之一，显然和工作记忆的能力极限有关，它能更快更有效地处理这个数量的信息。

摄影工作室

2. 不要一次提供太多选择

一定要留意专注度。如果你一次提供许多选择、按钮和项目，你就得有心理准备，它会耗费更多时间精力，用户的短期记忆需要更努力来克服困难，这会使得他们从最终决策和操作中分心。这就是为何有些欢迎页和销售漏斗效果很差，即使它们有美艳的设计，过度分心的用户还是会在转化发生前离开。慎重地依据优先级来应用滚动和过渡效果，把屏幕或页面上的元素分组，首要、次要、再次——这对用户有帮助，能使界面的导航更自然。

书籍交换应用

3. 使用易辨识的模式和图形来减轻记忆负荷

毫无疑问，人类是视觉动物，所以设计师通常掌握着运用图片的艺术，不仅仅是吸引注意力，也能传递信息、组织内容。我们有一篇文章详细介绍过用户如何辨识图标与文案。它表明，图标和插画之类的图形元素的感知速度更快，但文字信息量更大。这在界面设计中很有用，各种图形和标记的使用不止要在这个特定界面里被辨识出来，而且要在各种各样的界面里都能被辨识。放大镜代表搜索，购物车代表收集商品订单的页面，加号代表创建新项目，旗帜代表切换语言——所有这些，都代表长久存在人类记忆中的事物，不需要存储和处理新信息，就能引发正确的联想。

而且从更宽泛的角度来看，多数用户希望在页头看到品牌标志和前往网站主要区块的链接，在页尾看到联系方式、隐私政策、使用条款和信用声明。了解这类模式，设计师可以把基本操作设计得简单直观，节省用户的精力。这样用户就能将注意力集中在新数据上，快速感知信息。

天气应用

4. 在导航中运用统一的标记

导航是用户体验的重要方面。让人在各界面中穿梭，它也传递了应当进入用户记忆中的信息。因此，设计师运用各种技巧，让过渡和交互保持清晰一致。比如，颜色和形状标记划分了特定区块，图标定义了特定的项目编组，特定名称或同类文案会使用统一的字体，插画和吉祥物使不同界面联系起来——这些和其他类似技巧能大幅增加对界面的记忆力，帮助用户处理新的信息。

智能家居应用

5. 不要隐藏导航的关键信息

关于各种导航形式，显示或隐藏内容区块，依然争论不休。千万要记住，界面的关键任务是让用户清晰了解发生了什么。所以，关于使用汉堡菜单、滑动菜单、隐藏导航或内容层级的决定，应当建立在对目标用户的细致分析上。多数情况下，尤其是对于多种不同用户使用的复杂界面，隐藏核心导航内容，表现会很糟糕：用户必须找到并记住它们的模式。有些人会赞赏这种节省空间的技巧，其他人则会烦恼于必须记住所需功能的位置。优先级排序再一次扮演了重要的角色：隐藏次要元素，保持主要元素永远可见，用户就能集中注意力关注核心内容。用户测试有助于评估导航流程的有效性，以及它对转化率的影响。

书店网站

6. 刺激各种不同的记忆

记得之前讲的组合吗？可以发现首先并且最迅速的信息接收方式是感官记忆。基本上，它可以分为几种不同传感器产生的记忆：它可以是视觉、声音、运动、语言、力学等等。通过激活它们，设计师不仅能创造令人印象深刻的交互流程，也能帮助更广泛的用户群体。研究和实验显示，不同人最有效的记忆方式是不同的。这就是为什么菜单里的主要类别要同时有图标和文案，可以大幅提升用户体验，同时满足视觉记忆和语言记忆的用户。声音作为交互的补充，也可以创造出令人难忘的流程和操作。

食谱应用

7. 情绪的记忆

毫无疑问，给交互赋予情绪反馈，是导致用户停留或离开的重要因素。糟糕的体验会促使人们更快忘记细节，但是会留下负面的总体感受，因为大脑在试图通过这种方式来保护我们。相反，正面的情绪，欢乐、美感享受、对问题快速解决或有效沟通的满足，会让人再回来反复感受。

柏林之夜App

所以，基本原则很简单：设计师为人们创造界面，就要知道人们如何与世界互动，什么在影响他们的行为。人类记忆是一种关键特征，在意识和潜意识层面决定了成功且正面的用户体验，所以为了以人为本的用户体验设计，需要研究、思考和检验它。

老年用户的体验思考

hi@victor42.work (Victor42) — Sun, 09 Jul 2017 01:08:45 +0000

[国外设计第177期]

吸引老年人作为用户群体的一部分，这曾经被认为是互联网世界中最后需要考虑的事情。但是，这种罕见的情况正在成为现实，我们见证了老年用户群体持续不断的增长，他们经常登录、注册和订阅。Statista的记录显示，光是在美国境内，2016年就有64%的老年人在线，这个数字在2013年的时候只有4%。

尽管数量在增长，老年用户群体在人口统计学中，仍然属于用户体验的不毛之地。如果用户体验从业者不将老年用户纳入考虑，就会疏远这个整个群体，把他们从在线体验中排除出去：这情况可不乐观。

通过加大UI元素、使用颜色强调重要内容、进行适当的用户测试，遵循这些最佳实践，可以做到为老年用户定制网页设计。

保证界面适合阅读

文字：越大越好

首先要考虑文字和屏幕本身的尺寸，确保用户界面清晰可辨。不像我们UX设计师，并非每个用户都有高分辨率的显示器，未必对眼睛友好。对于60岁以上的用户，小号文字真的会让人抓狂。如果你想要定位老年用户群体，界面正文字号不要小于12磅。

有时候用户会选择调节浏览器本身的字号。但是多数时候，这样只是放大了整个页面，这就会产生功能和显示问题。要避免让用户去手动设置字号。

而且，要把信息分解为更小的部分，通过留白分隔，就不会在局促的空间里塞进大量文字，使用户感到眼花缭乱。

调节颜色和对比度达到最佳可见性

当设计师忽略颜色规范时，用户体验就会崩塌。界面中的颜色和对比度帮助用户确定哪些元素对应哪些任务，掌握自己当前处在网站的什么位置，并且知道哪个词语可以通向特定的页面。比如说，不带链接的文字就要避免使用蓝色——深蓝色是网页链接约定俗成的标准用色。

而且，如果未访问和已访问的链接在颜色上没有区别，他们可能很难回到之前去过的地方。这对所有用户都有影响。不过，老年用户更难记住自己访问过网站的哪些部分，可能会浪费时间反复操作，然后又回到原点。

使用用户熟悉的语言

Nielsen Norman Group的Jakob Nielsen指出，不是所有设计师都会阅读自己设计出来的网页，因此就不会去思考人们阅读它所需的努力。

为老年用户设计网页时，要考虑展现信息的方式，他们听力不佳或者视觉损伤。WCAG提醒我们，内容必须可被感知，具有特殊障碍的用户仍然要能获取到这些信息。如果视频或音频的内容对于试听障碍者的体验至关重要，就要额外提供副标题或字幕。提供朗读功能，对于需要别人把文字读出来的用户至关重要。你可以尝试使用一个文字转语音（TTS）程序软件，比如说Ivona（它很快会成为Amazon Polly）。

还有，要知道语音学、俚语和双关语对于特定年龄的群体是一项挑战。俚语会破坏用户体验，所以得确保文案迎合受众。避免使用那些会让用户迷惑的行话，坚持使用能够准确表达含义的语言。同理心地图可以帮助你写出对特定目标群体有效的内容。

易于点击

55-65岁的年龄段，手眼协调和运动机能开始衰退，这就使得操作用户界面变得更加困难。对于运动机能逐渐衰退的用户，鼠标是一个特别的问题，因为点击界面目标、在界面元素间移动、响应屏幕上的某个目标，都十分困难。

按Smashing Magazine的Ollie Campbell所说的，要应对这种障碍，就要确保可点击的UI元素足够大（对角线长度至少11mm），并且与其他元素之间距离要足够大（至少2mm）。你也可以尽量减少鼠标点击，如有必要，可以只留一个可点击的元素。

对于运动机能损伤的用户，滚动条同样会导致可用性问题。按住细长的滚动条并执行滚动操作非常困难。而且，对于有阅读障碍的用户，滚动会影响他们的体验，因为在界面移动之后，他们要持续不断地重新找回之前阅读文字的位置。

简化滚动条——无论是外观还是感受。给用户多一些选择（点击滚动条箭头、点击页面自身的可拖动区域、拖动滑块、使用鼠标滚轮、或者使用键盘的上下键）。不过总而言之，还是尽可能避免产生滚动吧。

所幸的是，电脑键盘和移动触摸屏能帮助老年用户跟上时代。因为手指点按的机能退化得比其他机能要晚，许多老年用户更擅长使用电脑键盘和触摸屏。

使UI模式易于记忆，帮助认知

对于任何想要通过UI来完成任务的用户，他们都需要尽可能快和简单地从A点（入口）到达B点（任务完成）。所以清晰的UI导航如此重要。

但对于老年人，UI导航系统还需要更直接地为用户流程提供方便。为什么？虽然我们的长期程序性记忆（记住如何做某件事）能力不容易随年龄增长改变，但我们的注意力在衰退，短期的情景记忆会受损。这就意味着，我们学习新概念的能力会有极限，比方说学习操作一套为年轻人设计的新界面。

应该尝试使用标准的图标和导航模式，例如顶部通栏，能够一眼看到所有选项，或者面包屑导航来引导用户通过几次点击前往特定的位置。这有助于用户习惯各功能所在位置，还有如何在网站上找到它们。

不要隐藏重要信息。保留面包屑导航来引导用户前往网站的相关区域。

还有，要避免出现非必要的链接。这么做可以增加用户的信任，鼓励他们点击链接，前往网站或应用中的重要位置。

了解你的用户基础

要使用户体验更愉快，应该要有一套捕捉目标用户需求的框架。但是，不同的用户成长在不同的科技年代，设计师们永远无法取悦所有年龄层的用户。

怎么解决？做用户测试。

即使设计师们遵循这些为老年用户设计的准则，但真正了解某人如何操作网站的唯一方法，就是做测试。对于老年用户，考虑使用边想边说的方法做定性分析，通过测试，你能看到受试者屏幕上发生的一切。这有助于增进你对于用户认知过程和物理限制的理解，并且确定UI系统的哪些部分需要再调整。

老年用户最大的一个痛点是难以看清和阅读屏幕内容。视觉或听觉障碍，意味着某些老年人要非常费劲地解读网站和移动设备上的内容。通过对你的界面设计进行真人测试，发现真实问题，你就会更准确的知道解决方案效果如何。

考虑使用原型工具来进行用户测试，例如Justinmind，可以实时演示你的设计。这能让你获得即时反馈，知道为何和如何解决设计上的问题——这是定性用户测试背后的原则。

而且，为什不再更进一步呢：把老年人受试者加入到设计过程中，让老年用户掌控自己的在线体验。

总结

老年用户群仍然有巨大的增长潜力。但就像其他任何用户群体一样，老年用户需要我们设计出符合他们需求的体验。随年龄而产生的局限意味着，数字科技中一些常规的吸引用户手段对老年用户不管用。

识别出老年用户的这些糟糕体验，可以避免设计师在设计中犯这些错误。用户测试是很安全的方式，确保你的用户得到他们所需的东西。把老年用户纳入到界面设计过程中，用户体验绝不会差。

作者信息：Emily Grace Adiseshiah

原文链接：http://usabilitygeek.com/ux-design-thinking-senior-citizen-user/

VR中的协作游戏

hi@victor42.work (Victor42) — Sun, 02 Jul 2017 00:36:15 +0000

[国外设计第176期]

我们在ustwo工作室第一次尝试HTC Vive VR头戴设备时，我们体验了Eleven Table Tennis，一款乒乓球游戏，极具探索乐趣。最吸引我们的，是可以在联机模式中与其他人对战。你的对手来自全世界，随机选择，Ta只有一个面具、一副球拍和控制器。

在对战中我们发现，仅仅通过这3个视觉线索，双方的配合竟然惊人地好。我们可以辨认出对手摇头，或者打了一击臭球之后的耸肩，还有比赛结束后的握手动作。带着头戴设备玩这款游戏，对手的声音听起来非常有沉浸感。我们开始思考VR中的非语言沟通的概念。两个玩家在VR中，有没有可能不借助声音，并通过最少的视觉线索来交流？手和头是不是足够表达信息，并且在VR中与其他玩家进行互动？

为了验证这个假设，我们决定自己创造。我们计划要打造一种好玩的体验，玩家需要仅仅通过肢体语言来交流，解答某些谜题，或者联手挑战。我们决定以看手势猜谜为出发点，这是很自然的选择，因为人们对此非常熟悉，玩家容易理解。

测试猜谜游戏

利用我们先前在VR项目中积累的知识，用Unity和VRTK这类工具，我们可以迅速开展项目。几天后，我们就制作了一个粗略的原型，在一个开放空间中，两名玩家相对站立，代表玩家的只有一个脑袋和两只手。这个测试在工作室内小范围进行，其中一名玩家得到文字指示，另一名玩家需要大声说出Ta的猜测。

我们让同事来做这个测试，然后我们很快意识到，我们创造出的东西很好玩，很受欢迎。我们又花了几天时间打磨体验，把文字指示换成了一套由各种emoji表情构成的系统，玩家可以将它展示给对方。我们还创造了另一种手的造型，让玩家可以做出握拳的动作。这就使出色的体验成为可能，玩家现在可以表达出挥手或抓取物体的动作。这时，我们对于只用手和脑袋进行沟通很有信心，然后我们开始稍稍改变我们的关注点。

创造Deus Voxel

在原型阶段，关于VR中的“协作创造”，我们冒出了许多想法。我们想看看，猜谜游戏中的非语言沟通，在这样的设定中是否也有效。于是我们开始创造一套新的原型，它的概念是一套好玩的、有创造力的工具，依然只用肢体语言沟通，让两位陌生人连接起来，共同进行艺术创作。

灵感来源是Qubicle和MagicaVoxel这样的3D像素编辑器，让用户使用三维像素——voxel来画线。我们用了几周的时间，专注于设计和制作原型，并不断地找朋友和工作室的同事来进行用户测试。最终我们创造出了Deus Voxel，两名玩家在外太空的场景中合作绘制荧光造型，进行艺术创作。

在开发过程中，我们做了几个实验，来测试如何能够影响玩家之间的协作。其中重要的一项，是邀请了我们在纽约的公司同事参与游戏。与大西洋彼岸的人一起玩游戏，感觉更接近线上的随机玩家。

给每位玩家设定一种独特的绘画颜色，会增进玩家之间的互动，因为玩家会擦掉其他玩家的线，并且画上自己的颜色。或者他们会示意对方来自己的颜色里绘画，创造出某种奇妙的图案。

第一版原型只允许玩家紧挨着已有的线条绘画，每次绘画都必须从两位玩家中间的某个位置开始。这可以迫使玩家专注于合作绘画，创造一件共同的艺术品。随着我们改变策略，换成一种更自由的形式，玩家可以在宇宙中任何位置绘画，他们刚开始就会各画各的，但最终还是会共同创作。

我们最初设定的绘画交互方式，产生了意外的效果，使得玩家画线时必须格外小心。我们很喜欢这种效果，能让玩家更专注，更小心地绘画。在之后的交互方式迭代中，我们一直试图在易用和繁琐之间寻找一种平衡。

在VR中分享经验、与他人协作，这是绝无仅有的一个新维度。玩家们甚至语言都不通，这个事实如此奇妙，证明了我们仅凭极少的手段就能沟通和协作。

我们相信，VR中的协作会越来越重要。通过这个实验我们知道，玩家在强烈沉浸感的体验中协作创造事物是可行的。我们期待继续探索更多机会，让我们的知识在这个领域有更多实际应用。

作者信息：MIKAEL JOHANSSON AND LINUS NORDGREN

原文链接：https://ustwo.com/blog/collaborative-play-in-vr

玩乐与学习：打造虚拟玩具店

hi@victor42.work (Victor42) — Sun, 25 Jun 2017 01:09:27 +0000

[国外设计第175期]

在我们首创的新产品PlayLab的一次头脑风暴中，我们开始讨论虚拟和真实世界体验的关系。过去几年内，我们见证了许多结合虚拟与真实交互体验的产品的诞生，我们想要更深入了解儿童娱乐领域。于是我们决定开始设计现代版的“玩具店”，希望在其中实验和应用扫码技术。

我们如今用钱的方式其实很抽象，账单和硬币越来越不重要了，钱被“隐藏”进了信用卡和数字支付手段中。选择玩具店切入相对容易，因为我们的童年都对它喜爱有加，而如今作为父母，我们的孩子也同样喜爱。在这次实验中，我们出于教育的目的，决定使用硬币代替数字，将钱的概念形象化，使我们的玩具店更加具象，视觉化地表现出购物的过程中需要用到真实货币。

虚拟玩具店

现有玩具店的状况，多数还是依靠现金支付，我们觉得这已经有点过时了。如今，我们在杂货店购物，要么通过自助扫码支付，要么通过手机App。这个被我们称为BlipShop的实验项目，意在将自助扫码支付引入儿童娱乐领域，让玩具店变得更有趣、更让人投入。我们希望儿童通过使用购物车、杂货店等真实事物，配合数字工具，自己动手感受这种现代的购物体验。

设计BlipShop时，我们遵循以下标准：

有趣

依据经验我们可以知道，用自助支付方式帮助儿童在杂货店内购物，能使他们更加投入，这种方式确定无疑。这一条在设计扫码流程时非常有用。当你成功地扫描一件商品后，雷达音立刻给你反馈，然后奇迹发生了，你扫描的商品忽然出现在手机里。我们尽可能多地使用声音和动画来强调用户行为导致的结果，比如将硬币投入到购物车的商品中，或者扫描一件物品。滴滴滴！

易于理解

由于我们的目标群体是儿童，要尽可能减少认知负荷。我们把事物都视觉化为日程生活中的样子——硬币、信用卡、购物篮、扫描识别出的商品。建立这层关联非常重要，能把虚拟世界和真实的玩具店融合起来，易于理解。

BlipShop不需要任何的文字说明或数字就能使用。使用数字来替代硬币会将许多儿童用户排除在外。我们把钱放在屏幕的底部，最接近玩具区，让他们自己拖拽硬币，我们希望让他们感觉到硬币正在花出去。限制每次只能拖动一枚硬币，是对这个操作的一种强调，迫使他们考虑自己的选择。

开放的体验

从其他儿童产品的设计经验中，我们了解到，应该让他们根据自己的意愿，自由地玩乐和探索。BlipShop没有限定任何的规则或边界，它是玩具店体验的一种有趣补充。我们很重视不去打扰娱乐过程，绝对不会意外弹出菜单，使用次数也没有限制。这是一套比游戏更专注于娱乐和探索的体验。儿童们可以随心所欲扫描新商品，从购物篮里移除商品，或者支付。只有一个界面，没有隐藏的信息，没有弹出对话框或复杂的交互流程，所有重要的功能都永远可见。

实际使用效果

我们很早就注意到，3岁左右、最年幼的那批用户，并没有太急迫地想要在店里使用BlipShop。他们太容易被新的环境分散精力，而且认为扫码的技巧很难掌握。但是我们相信，只要再接触一段时间，他们就能产生兴趣。

另一方面，4-6周岁的儿童使用BlipShop则用得不亦乐乎。他们开始在极少甚至没有说明的情况下，能够扫描并支付购买商品。他们很快就记住了店内不同商品的价格，有些甚至扫遍了店里所有商品来查看价格，确保自己了解了所有信息。最终，花光所有硬币，选择添加商品，这成了4-6周岁儿童的一种娱乐方式。这是非常好的数学练习，但并不是良好的购物习惯。

随着实验的继续，我们很快意识到，BlipShop会是一个很好的机会，能在娱乐中教育孩子金钱的概念。比如，当我们给受试者分配一些任务，我们可以观察他们如何运用我们的产品来解决实际问题：“3个冰淇淋值多少钱？”、“你能买得起多少个橡皮鸭？”。当与老师或家长一起的时候，这也很利于激发孩子大声数出这些问题的答案。

如果你花光了所有的硬币怎么办？

我还可以向银行借更多！

——Edit，5周岁

支付

对于玩具店里的孩子，BlipShop能够成为他们喜爱的附加物，我们对此非常高兴。一次典型的场景大概能持续20分钟，孩子们会用商品塞满购物篮，然后扫码并支付。购物完成后，他们会把篮子交给父母，寻求反馈。然后他们再清空购物篮，无论是真实的还是虚拟的，开始下一轮，循环往复。刚开始，我们还担心这个App可能会令人分心，不过答案很快揭晓，我们确实创造真实有效的产品。

我们在两周内创造出了这个产品，并且很兴奋地准备继续打造类似的融合虚拟与真实的产品。往后，BlipShop会成为一套现代的支付系统。我们在幼儿园和学前班做了测试，得到一些反馈，确定了一些重要的功能。我们同时也在对BlipShop进行长期的实验，观察它在学前班环境中的长期使用情况。

最后顺便提一下：不要用真实的商品对儿童进行测试，那绝对会使他们分心！

我希望[BlipShop]能扫描所有的东西……而且钱永远花不完。

——Selma，6周岁

作者信息：VIKTOR HOLTENÄS & BJÖRN PERSSON

原文链接：https://ustwo.com/blog/play-and-learn

设计原则中的信息组织

hi@victor42.work (Victor42) — Sun, 18 Jun 2017 16:17:33 +0000

[国外设计第174期]

通过五帽架原则来简化数据，帮助用户理解

设计师把信息有条不紊组织起来非常重要，如此用户才能轻松理解其中内容。这是优秀用户体验的关键。

在各种展现数据的方式中，有一种经受了时间的考验，直至今天都非常有效。它叫做“五帽架”。

五帽架的概念最初由Richard Saul Wurman在他的著作《信息焦虑》中提出。不久后他又写了《信息结构》，在其中重新定义了“五帽架”概念，构成LATCH原则。

“信息或许是无限的，但是……组织信息的方式是有限的，因为它们只能通过LATCH原则来组织：位置（Location）、字母表（Alphabet）、时间（Time）、分类（Category）、层次（Hierarchy）。”——Wurman, 1996

这套观念，主张信息的组织方式有5种。最终，其实只是要选择一种清晰的方式来回答用户的问题。务必避免纯粹为了漂亮的图表来组织信息，那样给不了用户任何答案！

“我做了太多次尝试，试图用某种其他方式来组织信息，但最终都会回归这5种之一。”——Wurman, 1996

我们下面来看看这5种信息组织方式。

位置

根据位置来组织信息。它可以是物理位置，或者是概念上（空间上）的位置。我们人类在进化中形成了这样的能力，在日常生活中就是这样组织位置的。从地图导航和战争策略，到厨房调料的摆放，都是如此。

当信息有多个不同来源和场所时，位置的组织就非常重要。

比如说，设计一套特别的服务时，我们应该考虑不同物品的位置关系，它们如何分布。超市货架的设计就是很好的例子，在物理空间中组织信息。

Pokemon go是个依据位置组织信息的好案例。

在虚拟世界中，依据位置组织信息，同样扮演者重要的角色。比如说，基于位置触发特定的UI交互和通知。想想GPS和所有帮你指引方向的应用。还有基于物理位置展示的通知，和其他操作功能。

而且，随着VR/AR技术的崛起，依据位置来组织信息，正在成为信息架构中非常重要的方面。

使用场景

当信息的位置关系很重要时使用这种组织方式，比如指引方向，或者把最相关的事物放在触手可及的位置。

与“时间”因素结合来组织信息，我们就能以最便捷的方式为用户提供他们所需的答案。

字母表

根据字母表顺序组织信息，是一种处理随机数据的好方法，比如说姓名。当信息量特别大时，这是最佳的组织方式之一。

比如字典和通讯录，无论是虚拟的还是物理的。

作品来源：Yao Liu

我们都用过这种方式，而且知道，只要用户熟悉字母表，这种数据组织方式就非常有效。

使用场景

当信息直接展现其本质时（字典、百科、书籍索引等）。当需要高效地通过非线性方式获取特定信息时。还有当信息无法以其他方式组织时，这是一种很好的折中方案。

时间

这可能是人类最广泛使用的信息组织方式。我们喜欢以线性的方式思考和归类事物。对于一定时间段以前发生的事件，这是绝佳的归类方式。

举例：日历和会议日程、邮箱收件箱、项目计划、有趣的Facebook时间线、电商平台的订单列表、消息应用，还有许多。

Javi Pérez设计的天气应用

依据时间来组织，可以轻易观察到变化，并且做出对比。由于我们人类通过线性的方式来感知时间，这就是最佳的记录历史的方式。

使用场景

要展现和对比一定时间跨度的事件时。想要表达基于时间的顺序时（分步步骤）。还有当你需要提供指南或者将事件以时间顺序排列时，你应该按时间来组织信息。

层次或连续性

当信息可以通过同一种丈量方式来组织时，就可以以量级来排列。

例如：从小到大，从低到高，从开心到不开心等等。给服务和产品标星打分、计分表、能效等级、尺寸等等。

Dann Petty的衣服尺寸选择页面

使用场景

如果可以用一种通用的丈量方式来比较事物时，可以运用层次（连续性）的方式组织信息。你可以在视觉上通过尺寸和颜色来展现信息，以此强调。

运用五帽架原则

要回答用户的问题，最好的方式往往是使用一顶以上的帽子。在分类中混入字母表顺序，时间和地点结合使用来记录重大事件。如果需要的话，甚至可以5种方式都用上，为信息的展现提供灵活性。

在如今的虚拟世界中，许多用户都希望能够从多维度查看数据。因此，我们需要5种方式搭配使用，找到最适合的组合。

结语

记住，最重要的一点在于，要以用户能够轻松使用和理解的方式组织信息。用数据来回答用户的疑问。

以更贴合用户目标的方式来呈现信息，就能创造出更好用的产品。

本文的灵感来自William Lidwell的著作《通用设计原则》。

感谢阅读！

作者信息：Anton Nikolov

原文链接：https://uxplanet.org/design-principle-organizing-information-343a7ef936a8

餐馆与UX中的用户引导

hi@victor42.work (Victor42) — Sun, 11 Jun 2017 00:03:50 +0000

[国外设计第173期]

Gordon Ramsey因为烧焦的食物冲别人咆哮，这和用户引导之间有什么关系？这个问题和事情本身一样有趣，优秀的用餐体验非常玄妙，远不止是食物那么简单：这就是用户引导的体验。

本文中，我们来一窥餐馆顾客引导的魔力，思考如何将它们运用到体验设计中。

1. 门后有什么？

我和妻子上一次去巴黎时，我们频繁外出就餐，游客们在巴黎这样城市都会这么做。华丽丽的备餐过程和美味的餐点令人难以抗拒。

不过，关于就餐体验，我最欣赏的是观察餐馆如何引导人们踏进他们的店门。毕竟餐馆都知道，只有顾客踏进店门，他们坐下并最终留下的可能性会大幅提升。

最优秀的餐馆似乎都使用了相同的模式。像这样：当我们在人行道上漫无目的游荡、观摩巴黎的建筑时，我们不得不故意避开人行道中央的菜单牌。

实际效果就如他们所说：“这就是我们能提供的。你不必进门了解里面有什么，看一眼便知。如果有什么勾起你的兴趣，你就会自信满满地走进来。”

许多产品设计师都希望建立有效沟通，尽管做到的人不多。一个常见的体验设计错误就是假定人们知道的和你自己一样多，或者假定他们会充分信任并一探究竟。但多数人其实不会。

菜单能帮助我们更轻松决定去哪里吃，即使我们对那种菜系不太感冒。因为我们能看到店里提供的菜品，知道那些菜大概会是什么样，决策就变得简单：“没错，可以，我们就尝尝这个吧，应该很不错。”就这样做了决定。

这能让人克服惯性思维，开始思考餐馆里会服务周到？还是会宰客？它使我们带着自信踏进店门，知道我们会喜欢这里。

这个原则在体验设计中也有效。TeuxDeux的首页是个很好的例子。

我一打开他们首页，就可以直接开始使用产品。我不必通过一堆屏幕截图来想象。如果我要继续，可以稍后再注册。

启示：顾客越清楚门后有什么，他们越有可能进来看看。

2. 注意衔接

那么，我们尝了两家不同的餐馆之后呢？两家感受完全不同。

第一家的反应非常棒。我们受到了欢迎，服务员带我们去我们喜欢的座位。他们能回答一些常见问题：“洗手间在那边。这是我们的特色菜。这个是无麸质食物，这个适合素食主义者。我们的牛排会偏嫩一点，可以选偏熟的。”我们可以放轻松，对周围环境和体验会很有信心。我们感觉受到了精心对待。

第二家餐馆的体验就不太愉快，但也同样令我印象深刻。我们被招呼到一张桌边坐下，并没有人来领着我们过去。他们的英语比我们的法语还糟糕，在餐桌上完全无法用手势比划来描述“乳糖不耐症”这个概念。

你觉得哪一家最终让我们留下了？

在体验设计中，数字产品里已经几乎没有服务水准低下的领域了，不会像第二家餐馆那样需要投入如此多的注意力。

当你走进数字产品的“店门”之后会怎么样？很可能是个感谢页面，或者是个网页应用的后台界面，或者是个验证页面。类似这些。

设计师们常常忽略这些页面。当你在自己创作的网站或产品界面上任意来回点击的时候，你并不会去评判这些页面。相反，它们经常被卷入应用的逻辑中，在未登录状态下，没有足够深入产品使用的情况下，很难触达这些页面。

但是，所有两个状态间的衔接处，前台和后台、市场推广和产品，通常都是用户体验的薄弱环节。你得在这里做到最好。

RedPen.io在这方面做得非常好，我的一位设计同事上周给了我这个链接。（感谢Alex！）

打开页面时，我马上就可以拖拽图片上传，写上备注。没有“注册”页面。

我在图片上写了好几条备注之后，才弹出一个模态窗口，写着：“说得好！我确信你想要知道有没有人回复，留下你的电子邮箱，我们会及时联系你的。”

它居然称赞了我的备注，并且把获取电子邮箱解释成对我有益的事情，而不是注册的一项负担。

启示：注意衔接。很少人这么做，但这确实整个用户体验中最重要的环节之一。

3. 让他们立刻取得成功

在餐馆的体验方面，美国比巴黎强。

每个人都喜欢第一次做成某件事时的感觉，尤其是某些没怎么尝试过的事情（“他就是个天才”）。

我们在巴黎去过的最好的餐馆，充其量只是在我们进门时在桌上准备好水。更好的餐馆会呈上一些面包和小吃供你选择（这就是“前菜”了，我希望美国的餐馆也能想到）。但是，一坐下就有水和面包递上来的服务，我只在美国体验过。

餐馆应该在顾客仔细看菜单点餐的时候，让他们尽快先吃到点什么。

我来到这家餐馆用餐，享受一小时的娱乐时光。我越早吃上东西，就越早达成目的。

数字产品的UX设计师有一个常见的错误，推迟“享受的时刻”。有可能我当天晚上就是去吃面包喝水的，但它让我切实感觉到了具体的产品：食物。

就像那些一上来就提供面包的餐馆，HelloFax很巧妙地让人们决定采用他们家的服务。他们在用户完成注册之后，还提供了一系列任务，每完成一个奖励5个传真额度。虽然注册只需要一个邮箱地址，但设置密码甚至都可以赚取任务奖励额度。在这个赚取额度的过程中，你和这个工具就有了共同经历。

启示：尽快让用户感受到好处。这能让他们感觉到成功（“亲，你真会挑餐馆”），并且愿意逗留。

4. 隐藏尽头

“隐藏尽头”让我想起了6年前移居美国的一次东海岸之行。

我们小心翼翼停在了一家前不着村后不着店的麦当劳，打算买点鸡块。当我想付钱续杯饮料的时候，他们真是颠覆了我的世界观。

“免费的？全国都免费？”你能想象那时服务员的表情。

我仔细思考了一下，如果所有饮料都是“不见底”的，为什么还有人要买“大杯”，我觉得这是一种隐藏尽头的绝妙方式。

全世界范围内，餐馆都会在你喝完之前努力续上饮料。在美国，其目的是为了避免成年人用吸管时发出响声。确保人们永远不会感受到体验的尽头，或者说你的热情好客的尽头。

这方面的体验设计错误，都和使用障碍有关。你总会尝试上传过多的文件，创建过多项目，听过多的歌曲。然后弹出一个提示：“你不能这么做，除非付点钱。”

这个数字保镖，婉拒你进入店门，理由是你衣冠不整，这当然会赶跑顾客。

如果我们换种说法：“实际上这是我们为最专业用户准备的高级功能，比如说你！来吧，试试看，感受一下。如果你喜欢，我们可以把你升级为高级账号，给你毫无保留的所有权限。”

两条信息说的是同一件事。但其中一种说法对用户而言如同放屁。

Basecamp是个很好的隐藏尽头的案例。在Basecamp里，没有“哎呀，你不能这么做”这样的消息。不像多数SaaS产品，并不会因为你用得太多，才要求你升级然后才能继续使用。相反，升级可以解锁你之前没有权限使用的新功能。

启示：不要一直不停对用户说“不”。不要让他们一头撞在服务的天花板上，因为这会让他们很猥琐地使用产品。相反，应该奖励他们的使用，并且祝贺他们的升级行为，这样升级就会让人感觉良好。

尽管本文讲了优秀的餐馆体验，我们一直在回避完整的用餐体验，不讲食物本身。这是故意的。

食物的品质不是我们印象最深的部分，而是顾客引导的体验。

设计师们：你们正在创办的是一家什么样的餐馆？

作者信息：Adam Fairhead

原文链接：https://www.uxpin.com/studio/blog/restaurants-can-teach-onboarding/

一个代表运营的小图标

hi@victor42.work (Victor42) — Sun, 04 Jun 2017 13:42:12 +0000

起因是要画一个能代表“运营”岗位的小图标，我们在做招聘相关的业务，想用图形来辅助理解。不过总有这样的时候，用具象图形来表达某个抽象概念，选择很多，但又觉得没一个靠谱。

回归本质，首先要了解我到底要表达的是什么。运营……和运营人员共事这么久，我真正理解他们是做什么的吗？

作为产品设计师，和运营打交道不算特别频繁。总之很杂就对了，这是一直以来的模糊印象。而在一些视觉设计师看来，运营=不靠谱，天马行空不着边际、想一出是一出、观点前后矛盾、从不重视品牌和统一、只会简单粗暴强X用户……和我共事过的设计师，我大致能记得他们每一次发飙，其中运营稳居发飙对象榜首。

当然，这样随随便便给人打标签是很幼稚的行为。我女朋友前阵子应聘，去面了一家小创业公司，最后一轮CEO亲自面她。其间谈到她的爱好是中国古代史，生活中是个极其理性的实用主义者。CEO表示非常诧异，他说设计师怎么会是你这样？设计师的业余生活难道不应该是很小资很文艺的哪种吗？听听音乐会、逛逛美术馆之类的。我听完也觉得很诧异，一个看问题如此片面的CEO，能带领团队走多远？

千万不能把任何人、任何职业符号化，否则就再也没有机会看到那些值得学习的闪光点了。要相信，真正专业的运营人员绝对不会是那样。查了一些资料、和运营同事也简单聊了聊，第一次系统地了解他们的工作内容到底是什么——没错，真的很杂。

运营工作分为内容、用户、活动3大方向，三者没有高下之分，都不可或缺，我用自己的话大致描述一下：

内容运营：负责生产和维护具体的内容。
用户运营：关注用户行为，引导和改变用户行为来实现商业目标。
活动运营：通过密集的策划、资源整合，创造让业务跨越式发展的机会。

至于渠道运营、社区运营、新媒体运营这些，则是另一个分类维度，主要以面向的媒介来划分，具体的工作内容自然就和具体媒介有关。

运营一词在英文中是Operate，首席运营官不是叫COO么，Chief Operating Officer。Operate一词最常用的意思是操作、经营。在网上看来一个说法，还挺形象的：如果说产品和设计是造船的人，运营就是开船的人。开船和造船在思维上有本质区别。造船者可以只用静态思维来解决问题，船的结构如何，理想状态是什么样，能承受多大风浪。而开船者必须用动态思维来应对困难，洋流和风导致偏离航线怎么办，走苏伊士运河还是绕好望角？虽然造船者也可以运用动态思维来改善船的设计，增强船的适应性，但没有这一点至少也能完成工作。而开船者则是无时不刻不在面对着变化，除了目的地之外，对他们而言没有一点是确定的。

我是第一次在运营分工很细的团队工作，尝试站在他们的角度看待整盘业务，真的很有启发。这得从一次设计评审会上的争执讲起：

我们平台的移动端网页正在进行改版，改版的目标比较表面，就是视觉换皮，功能与交互不是重点。不过，首页的产品需求里有这样一条：强调搜索，弱化banner。我起初非常认同这一点，毕竟求职者很少带着逛的心态来，往往更追求效率，搜索是整个首页的主角。所以我提出了一个这样的方案：

首先，搜索框加大了，阴影使它浮起在页面之上，视觉层次显然盖过banner，目的达到。还有更重要的一点，就是下方2行3列的职位推荐，实际上就是搜索相应的关键词而已。所以，搜索框紧邻这块区域，可以考虑把推荐职位的概念转变为热门搜索，也扩大了搜索这个概念的作用范围。

这个方案产品经理很认可，却在评审会上遭到运营的强烈抵制。我也努力阐述这个设计方案的优点，不过运营始终无法接受banner被挡住。意外的是，产品经理却跳起来了，和运营激烈争执了将近半个小时。双方各自的立场很明确，产品希望高效率少干扰，运营希望气氛热闹内容丰富。作为设计师，我们怎么想？

我们是怎么看待banner这个东西的？挺讨厌的一个东西对不对？往往和产品功能没什么直接关系，却要占那么大空间，还总是花花绿绿干扰用户完成任务，恨不得直接去掉。我敢说，不仅是设计师，许多产品经理也是这么看待banner的。内心深处觉得这块地方是运营的地盘，大脑自动略过。反正运营如果想在产品里发声，扔一个banner位给他们自己折腾就行，其他部分运营不必插手。我得承认，这种想法我是有过的。

产品经理和产品设计师多多少少都比较偏向理性思维，逻辑严密、重视效率，这是工作需要。像我这样一个工科人、实用主义者，总是愿意相信好产品自己会说话。把产品打造得尽善尽美，不需要多少人为介入，自然增长就足以让它进入良性循环。虽然这也没错，但如果因此觉得运营为主导的项目不够聪明，只是苦活累活，那真的是自己认知太肤浅。

关于这个搜索框的争论，直到最后，产品和运营也没有说服对方，只是以服从多数原则把这个方案毙了。不过，在争论临近结尾时，运营有一句话彻底打动了我：

“你想一想。我们拿着这个banner位出去谈合作，资源互换。人家会说，你们这位置不明显啊，还首页呢，都被挡住了。这样的资源位，我们实在拿不出手。”

要解决挡住的问题，办法总是能找到的。关键是，我们这些设计师和产品经理，真的在乎过运营想要什么吗？真正思考过他们的工作对于整个项目的作用吗？

精细打磨产品，影响力水到渠成，这样的商业案例比比皆是。我们用的Sketch就是这样的产品。但也不是所有行业都有那么高的技术含量，都能做出巨大的差异化，越接地气的行业，这条路越难走。野蛮扩张，无所不用其极迅速占领市场，这是另一种成王败寇的竞争规则。

不巧，我们团队就处在这样的行业，而且团队人员的能力正是以运营见长。既然如此，为什么不按大家最擅长的方式来做事情呢？老实说，会经常遇到违背自己设计理念的情况，不得不顺着运营的思路走，尝试用设计的手段来达成他们的目标，但最终一定能找到平衡点。确保大家发力方向相同，比坚持每个人各自的原则更重要。

产品设计到底是在做什么？真没有那么高尚。我们设计师心里都有一杆神奇的秤，虽然秤上没有精确的刻度，却也能衡量用户体验的好与坏。可能秤的一端只要再加一点点砝码，善意的引导就会变成操控人心、透支品牌的黑魔法。对这种状况提出预警是我们的职责，但事情很少会发展到这个程度。虽然我们要为用户说话，捍卫他们的利益。不过前提是要帮公司赚钱，在这一点上，我们的目标和运营是高度一致的。

所以这些小伙伴也应该是设计的服务对象。主动创造一些特殊的设计元素，满足他们对多样化和定制化展现的需求。主动追踪和设法提升业务指标，满足他们对商业变现的需求。主动制定梳理对外规范，满足他们通过外部合作扩大影响力的需求。转换心态，会发现自己做的事情仍然很有价值。

回到本文最开始的问题，什么图标适合表示“运营”岗位？我最终画了个小柱状图：横纵坐标轴+两根左右排列的立柱，右柱高于左柱。虽然还是很抽象，各种运营的工作千差万别，但业务增长永远是共同目标。

不理解开船的人，我们怎么能造出好船呢？

你滴什么滴干活？

hi@victor42.work (Victor42) — Sun, 28 May 2017 17:49:56 +0000

幽默栏目上次更新距今已经很久了，真的是因为年纪越大乐趣越少么？不过无论如何，总还不至于停播。

谓语后置

和人解释日语和韩语的谓语后置现象，举了几个例子，“我/图书馆/去”、“今天/雪/下下来”，对方还是表示难以理解。

然后忽然想到一个经典名句，抗战片必备台词：“你滴什么滴干活？”

于是对方秒懂。

古墓派装修

CC家在装修，由于厕所小，非常纠结做移门还是平开门，在群里发问求助。

BB说做个机关门，开关是个碗，旋转即可，门会往上升起。

BB的创意让我深受启发，我说开关用个钵比较好，语音控制。只要拿起那个钵，对着厕所喊：“我叫你一声你敢应么！”然后厕所门应声开启。当然，上升开门是关键，这点绝对不能变。

至于门的材质，一定要是石门，咯噔咯噔升上去，扬起一缕灰。

别人家什么田园风格、北欧风格都太稀松平常，CC家绝对是一股清流——古墓派风格。

定个小目标

这是我们公司产品经理画的原型图，一看这名字我就乐了。有志气、励志，简单粗暴接地气，看到这公司招人，我肯定就去了。

目标多明确啊。一点不玩那些虚的，目标就体现在名字上。哪天目标实现，直接宣告破产，散伙分赃，各自回家混吃等死。

神奇的是，他起这个名的时候，王健林还没有定他的“小目标”呢。

黑科技重力感应开关

公司年会去了良渚，散会时大家在酒店大堂集合等车，和几个设计同事一起摆弄起了酒店里的一盏灯。

这灯非常奇妙，拿起来就熄灭，放回去就点亮。我们各种猜测，用了什么黑科技。莫非这灯里还有重力感应？不过为什么要这么做呢？

拿起来的时候自动断电，或许是出于安全考虑？或者正因为这是专门用在公共场所的灯，才有这样的设计。让人产生一种容易把它弄坏的错觉，阻止人们进一步把玩。

就这样，我们研究了10分钟……

直到一个设计同事幡然醒悟，走过去指了指插座，插头一半露在外面，分明就是接触不良！！

如果真要找个什么理由安慰你的话……

有一天，KT跟我说：“宝宝不开心”。

作为好基友，肯定不能回复“怎么啦？”这种俗套台词。

我说：“没关系，托着ta屁股，然后有节奏的上下晃动，一边说‘wow wow wow’。”

他没理我，继续说：“感觉受到了歧视。”

“受到了什么歧视？”

“分位置分到了最差的，宝宝想坐窗边。”

“那你现在坐在哪？”

于是他直接发了个图给我，果然是建筑设计师才可以有的沟通方式……（其中那个姓姜的就是他了）

“哪里有窗？”

“右边全是，这平面设计好傻逼，室内设计也是屎，射灯射的眼睛痛，还超多，厨房筒灯直接射人头上！”

“可能厨房原本是装浴霸的……诶等等，我有一个惊天大发现！你注意到没有，两个姓李的构成一条延长线，与窗户形成夹角约10度。”

“所以呢？”

“嗯……看来这个结论并没有什么卵用。”

“渣渣……我要坐窗边！要不怎么独依小窗听风雨？”（独依小窗听风雨是这个中二少年的QQ名）

“那左边缺口是入户门？”

“是的。”

“诶我发现诶！！你知道不，你的位置很重要！”

“诶？”

“你看这格局，你那里是不是差不多就是暴风城旅店的位置？”

年度最佳微软黑

KT在这个暴风城旅店的位置没坐多久，然后就被公司开除了。

所以……升级到win10是会被公司开除的，各位朋友，别怪我没有提醒你们。

决战到天明

KT到了一家新公司，很快就开始吐槽同事了。当然，不是说他这个人消极，只是习惯性吐槽而已，not serious。

不过吐槽从来都不是重点，话题最后一定都会变成一些奇怪的东西：

阿里集体婚礼的YY

终于亲眼见识了阿里集体婚礼……的施工现场。

即使只是施工现场也好，叫上几个设计同事一起去凑热闹。走在路上，我们开始YY婚礼现场当天会是什么样子。

里约说，想想好像有什么不对，万一凑过去直接被一堆二维码淹没了怎么办：“请扫码发祝福红包。”

细思恐极。

还有这样一种可能，我们一靠近现场，就有一波人过来把我们冲散。第二波人紧随其后列队前进，每人手拿一块一人高的巨大KT板，就像古代的重型盾牌，上面都是二维码。每4个人围住一个路人，盾牌无缝拼接，直接围死在里面，各个击破。整套战术动作一气呵成……

但愿是我们想太多了，哈哈。 ¯\( ツ )/¯

Expert

工作中需要画一个小图标，表达“专家”的含义，一时没什么好想法，上图标网站找了一圈。

然后发现了这货：

“什么鬼啊！神经病-Humor啊！寄生兽啊！你家的专家长这样啊！！”

及时的公交播报

公司设计团队去厦门旅行，下午在环岛路浪完，坐公交去中山路找美食。

公交路线拐来拐去，在某一站的时候，里约问我：“这里是哪里啊？”

嗯……这个问题我怎么回答得出来呢，好在这时候公交车及时播报，给了我答案。

“叮咚！前方斑马线，请注意礼让行人。”

于是我回复他：“这里是斑马线。”

表单设计：一页只做一件事

hi@victor42.work (Victor42) — Sun, 28 May 2017 15:57:02 +0000

[国外设计第172期]

2008年的时候，我在Boots.com工作。他们想做一个单页的结账页面，运用那个年代最新潮的技术，包括手风琴组件、AJAX和客户端验证。

每个步骤（寄送地址、寄送选项、信用卡详细信息）都收在一个手风琴面板中。而每个面板都通过AJAX提交。提交成功后，这个面板就会收起，并且通过滑动动画展开下一个面板。

看起来就像这样：

Boots的单页结账页面，使用了手风琴面板展现每一个步骤。

用户千辛万苦才完成了下单过程。错误难以更正，因为上下滚动并不方便。手风琴面板让人非常痛苦和分心。不可避免地，客户要求我们作出改变。

我们进行了改版，让每个面板单独成为一个页面，也就不需要手风琴和AJAX了。不过，我们还是保留了客户端验证，防止不必要的服务器请求。

看起来就像这样：

Boots的结账页面：每一步都是单独的一个页面。

这个版本的转化率好多了。虽然我不记得具体数字了，我知道客户比较满意。

6年后（2014年），我在Just Eat工作，发生了同样的事情。我们设计了一个单页结账流程，其中每个部分都有独立页面。这一次，我记下了相关数据。

结果是每年能增加2百万订单。要清楚，这是订单量，不是利润。这个数据是基于新版本至少一周后，结账转化率提升的比例得出的。这部分转化成了订单，数量激增52倍。

这是我们的移动端优先的设计：

Just Eat的结账分为多个页面。我们还在设计中进一步简化了支付页面：用户先选择“现金支付”或“银行卡支付”，然后才会转到相关的页面。可惜我们并没有对这项优化进行测试。

两年后（2016年），GDS的Robin Whittleton告诉我，把每一步分为单独页面，是一种独立的设计模式，叫做“一页只做一件事”。除了它产生的数据效果，这种模式的背后还有充分的合理性，这部分我们很快就会讲到。

不过在这之前，我们来仔细看看这种模式到底是什么。

“一页只做一件事”到底是什么意思？

一页只做一件事，并不是一定要在一个页面上只展示单一的元素或组件（虽然也可以这么做）。比如说，很可能仍然会保留页头和页尾。

类似的，也不是说每个页面上只能有一个输入框（当然，这么做也是可以的）。

这种模式是指把复杂的流程分解成多个小碎片，把每个小碎片独立一页展示。

比如说，与其把地址输入表单放在寄送选项和支付表单页面，倒不如把地址输入放在一个专用页面。

地址输入表单有许多输入框，但它对于用户来说，实际上是个单一的、独立的问题。在专用页面里回答这个问题是有道理的。

我们看看这种模式到底好在哪里。

好在哪里？

虽然这种模式常常能结出硕果（其实就是指订单和转化率了），我们最好还是要了解它背后的原理。

1. 减少认知负荷

正如Ryan Holiday在《The Obstacle Is The Way》中所说：

回想一下你第一次看到复杂代数式时的情景。这整个就是一团混乱的未知符号。但是当你将它分解，独立成各个部分，答案便水落石出。

一步步分解等式，就能轻松解决问题。

用户在填写表单时也是一样的道理，或者其他任何重要的事情都一样。如果屏幕上元素减少，只有唯一的选择，阻碍就降到最低。因此，用户会专注于完成任务。

2. 处理错误更容易

当用户填写小型表单时，错误可以很容易被发觉，并尽早呈现出来。如果只有一个错误要修正，那就很容易，能降低用户放弃的可能性。

即使有多个错误，Kidly的地址填写表单也很容易更正。

3. 页面加载更快

如果页面的设计很简单，加载就会更快。更快的加载速度能降低用户离开的风险，为我们的服务建立起信任。

4. 易于追踪行为

一页上内容越多，就越难以了解用户因为什么离开。不要误会我的意思：页面数据分析不能左右设计，但这是个很不错的副产品。

5. 易于追踪过程和返回上一步

如果用户需要频繁提交信息，我们可以把它们以更细的颗粒来保存。举个例子，如果用户中途退出，我们还可以发送邮件，鼓励他们完成订单。

6. 滚动操作减少，甚至被消灭

不要误会我的意思：滚动不是什么大问题——用户的期望中，网页就是这么用的。但如果页面短小，用户就没必要滚动了。主操作项就更容易出现在屏幕视野内，能强调它的重要性，易于任务完成。

7. 容易产生分支

有时候，我们需要根据之前的答案，给用户提供一条不同的路径。举个简单的例子，两个联动的下拉菜单，用户在第一个菜单里的选择，会影响第二个菜单中的内容。

一页只做一件事可以轻松处理这种情况：用户作出选择并提交，服务器来决定用户接下来看到什么——天然具有简单和包容的特点。

我们也可以用JavaScript。不过无论是构建还是确保界面的可用性，都需要更高的成本。如果JavaScript出错，用户的体验也就被破坏了。而且，根据所有这些排列组合选项来加载页面，会显著加重页面负担。

或者，我们可以使用AJAX，但这并没有避免渲染新页面（或者部分）。更关键的是，它并没有减轻服务端的数据往返压力。

还不止这些。我们需要发送更多代码量，并且发起AJAX请求，还要处理错误、显示加载指示器。这又让页面加载变慢了。

自定义加载指示器是有问题的，因为它们并不准确，不像浏览器的原生加载进度。用户也不熟悉它们——相对于整个网站来说，它们是特殊的存在。无论如何，相似性是用户体验的惯例，除非真有必要，否则不要打破它。

而且，页面上有两个动态更新的联动输入项，这会需要用户按照一定顺序来操作。我们也可以通过可用/禁用和显示/隐藏来控制这些输入项，但这样也更加复杂。

最后，用户的某些更改，可能会导致随后的元素消失或者变化，这也让人迷惑。

8. 对使用屏幕阅读器的用户更友好

如果页面上内容减少，屏幕阅读器就不必长途跋涉穿过许多多余的次要信息。用户可以直接前往第一个标题，然后迅速开始操作表单。

9. 易于更改细节

想象一下某人正要确认订单。关键时刻，他发现支付信息里有一处错误。此时回到专用页面比找到页面当中的某个部分更容易。

用户点击“编辑”，会前往支付信息页面，里面有专用的标题和相关的表单项目。

深陷一个长页面中是会令人迷失方向。记住，用户点击链接代表他们要执行特定的操作——页面上的其他东西都是干扰信息。

长页面还可能会加重工作量。比如说，如果想要在一个页面中展开和收起面板，你就需要更多额外的逻辑思考。

一页只做一件事，这些问题都得到了解决。

10. 用户对数据更有掌控力

用户不会只加载一半的页面。要么全部，要么没有。如果他们需要更多信息，就会点击链接，他们有选择能力。只要每一步都更接近目标，用户并不介意点击。

11. 解决了性能问题

如果每件事都复杂无比——单页应用就是一个极端例子——性能问题就很难解决。是因为执行时间问题？内存泄漏？还是AJAX请求导致的？

人们很容易认为AJAX能提升用户体验，但增加代码量很少情况能创造更快的体验。

复杂性转移到客户端，会掩盖服务端的根本问题。但如果页面只做一件事情，性能问题就不容易产生。如果真发生了问题，排查原因也很容易。

12. 它有一种在前进的感觉

因为用户在不停地前往下一步，会产生一种正在前进的感觉，在用户填写表单时给他们一种积极的感受。

13. 降低丢失信息的风险

长表单需要更长时间来完成。如果所花时间太长，页面超时可能导致信息丢失，产生严重的挫败感。

又或者，电脑可能卡死，*《我是布莱克》*里的主角Daniel就是这样的例子。他的健康每况愈下，而且第一次用电脑就遇到了死机，然后数据丢失。最终他放弃了。

14. 第二次使用的体验更顺畅

比如，假设我们储存了用户的支付信息，我们可以直接跳过那一页，直接带他们去“结账确认”页面。这会减少阻碍，提升转化率。

15. 这是移动优先设计的一种补充

移动优先的设计，提倡在小屏幕上只呈现最重要的信息。一页只做一件事，也遵循着相同的方式。

16. 设计过程很简单

当我们设计一套复杂流程时，分解成细小页面和组件，可以让人更容易理解这些问题。

还可以方便地调换页面来改变顺序。我们一次只研究一件事，这点和用户一样，能让我们更轻松地分析问题。

这可以减轻设计负担——这种模式让用户受益的同时，还能有这样的附加福利。

这种模式适合所有情况吗？

也不完全是。Caroline Jarrett在2015年写过一篇文章《一页只做一件事》，里面讲得很清楚。她解释道，用户调研“会告诉你某些问题组合起来放在长页面里更合适”。

但是反过来，她也提到了“对于设计师来说‘属于一组’的问题……对于用户而言，并不一定要放在一个页面上”。

她提出了一个颇具启发性的例子，GOV.UK的验证页面中，他们尝试把“创建用户名”和“创建密码”先后放在两个页面上。

就像许多设计师所认为的，Caroline觉得把这两者放在不同页面有点太过了。实际上，用户对此一点也不介意。

关键在于，以一页只做一件事为出发点，然后通过用户研究，验证把其中一些项目编组合并，是否能进一步改善用户体验。

这并不代表最终结果一定是把页面合并——在我经验中，最好的结果往往是把事情拆分开来，仅此而已。当然，我也希望听听你的经验。

总结

这种低调不起眼的用户体验设计模式很灵活、高性能、有包容性。这是真正拥抱互联网的方式，对于自信满满和小心翼翼的用户而言都很简单。

一个页面上展现很多（或者全部）内容可能会营造一种简单的幻象，但就像代数式问题一样，除非把它们分解，否则很难处理。

如果把任务看作是用户想要完成的一笔交易，把它分解为多个小步骤很有必要。这就像我们在用网页的一砖一瓦来搭建渐进式表单。每一页背后的隐喻，都给潜意识营造一种正在前进的感觉。

我还没有遇到过哪种其他的设计模式，能具备这么多的优点。这就是那种真理时刻——答案总是最简单的。

作者信息：Adam Silver

原文链接：https://www.smashingmagazine.com/2017/05/better-form-design-one-thing-per-page/

东京的导视设计

hi@victor42.work (Victor42) — Sun, 14 May 2017 12:52:48 +0000

[国外设计第171期]

用户体验原则在步行导视上的应用，能改善高峰时期的通勤。

我从涩谷站下车的时候，人流从我身边涌过，我开始寻找忠犬八公的雕像。朋友约我晚饭前在那里碰面，但我找了10分钟仍旧迷路。幸好我放慢了脚步，观察四周，我看到了导视牌。有了精心设计的辅助引导，你很快就能找回方向。

渐进式显现的地铁站导视系统

当你正在前往某站的地铁上，车门上方的屏幕会告诉你这几个信息。首先，它会告诉你哪边的车门即将开启。这能帮助满满一车人找到自己的方向。人们会缓缓移动，示意周围不下车的乘客为其让道。

老实说，我看不懂所有文字，不过我还是明白它表达的意思。

标识也能让你确认站点，让你知道自己没有下错站。在站点名下方，会显示一张图，告诉你处在车厢的哪部分，并且表示出你所处车厢的位置对应车站的什么设施。

楼梯、自动扶梯、电梯，还有列车的移动方向！太实用了。

我在旧金山生活时常遇到一个问题，就是想了解到站时车门外有什么设施。我总是从楼梯旁经过，然后要回头去找。

这些标识会告诉你当下正需要的重要信息，可以避免此类困扰。

下车后，你会看到指向四面八方的标识。

上方：电梯和求助；中间：主要的站点设施和出入口；下方：出口与方向。

这个标识表达了：

去哪里求助和寻找电梯
你的站点里的位置，以及如何转其他线路
主要的几个方向，以及从哪个口出去

当用户学习新产品时，渐进式显现的概念不需要立刻解释或显现全部信息。你只需要解释当下相关的内容，逐渐展现出整个产品。这些标识加在一起，延伸了通勤者对世界的理解：从你所在的车厢，到车厢在车站中的位置，然后到车站在外边世界中所处的位置。以适当的范围级别向用户呈现车站，使得了解车站的过程更加可控。

但是，车站仍然非常复杂

以上标识的缺点在于，车站真的非常复杂。当你处在一个多线路换乘站，每条线路以不同的角度交叉，这时截面图都不足以表达了。为了更进一步帮助人们了解车站，还提供印有车站的轴侧图的小册子。

做到这个程度简直逆天了。

这个小册子似乎是不错的主意，但是它看起来令人头晕目眩。展示了如此多的信息，难以确定自己当前的位置和该走的方向。其实，他们应该直接把导视设计在车站里。我在雅虎日本的办公室里看到了一个非常棒的例子。

雅虎日本，导视系统和真实世界的配合

雅虎日本的办公室非常大，就像地铁站一样。我在里面迷路了好多次，直到我理解了地面上标记的含义。当你走出电梯，就会看到地面上的这些东西。

这让我想起了地铁线路。

这里有个圆圈，它的内侧有一些字母，各种路径从字母开始延伸出去。每个字母代表一系列房间，每条路径都有独特的颜色和纹理。跟随路径就能到达相应的房间。比如说，你想要找到F7房间，如果沿着黑色尖括号线走，就会找到F7。

我认为，这种方式表现优异的原因在于，这种辅助指引不需要你在脑海中为周围的空间建立模型。相反，它直接提供了具体的方向。

唯一的问题在于，当出现了分岔路时，应该走哪边？

所以，可以想象类似的路线系统用在地铁站里，指引人从一个站前往另一个站。但是，车站里人来人往，可能得把路线放在天花板上。这样他们就一直可见，并且不会被每天的踩踏磨损掉。

如果结合了这些辅助指引，就可以从车厢内将你一路引向出口。那就太棒了！你可以尽情与朋友共进晚餐，大吃生鱼片，大喝Kirin Ichiban——完全不会在车站迷路！精心设计的导视能使得这样的未来成为可能。

你印象中有没有见过其他精心设计的步行导视？

喜欢本文？点个赞或者留下评论，我们继续讨论！

作者信息：Colby Sato

原文链接：https://uxdesign.cc/walking-through-design-in-tokyo-d6f00a4639b7

Dropbox宣传视频设计

hi@victor42.work (Victor42) — Sun, 07 May 2017 00:01:45 +0000

[国外设计第170期]

一窥Dropbox品牌设计

一分钟。这点时间连泡一壶茶、甚至等个红灯都不够。但要用来讲述一大堆关于Dropbox的产品更新，我们只有一分钟的时间。

如你所见，今年早些时候，我们准备好了要发布一系列关于协作与生产力的新功能。伴随本次发布，我们的品牌设计团队想要创作一段短视频，展示这些功能的相互配合。

一分钟。这能有多难，对吧？本文中，我们会讲述这段视频的制作过程。

早期头脑风暴环节

创造奇迹

我们从创意简报入手。叫上产品、市场、设计和决策者一起，我们需要确保每个人都参与我们的工作。

创意简报要确定以下问题：

我们为什么要做这个项目？
目标受众是谁？
如何定义项目成功？
排除哪些目标？
我们想要解决什么问题？
主要表达什么信息？
辅助信息是什么？
这件创作要用哪3个形容词来描述？
交付物及规格是什么？
时间安排是怎样的？
要追踪哪些指标？

简报成了我们的北极星，是我们创作的共同基础。当创意方向或策略偏离正轨时，我们会回溯到简报上，让一切归位。

创造我们的北极星

启动

这个项目由Instrument与我们协作完成，这是波特兰的一家才华横溢的创意机构。

我们当面启动合作项目，定下了时间规划、里程碑、责任分配和目标。如果用邮件或在线沟通，这些细节往往得不到落实。通过提前当面沟通，我们迅速在两个团队间达成了共识。

启动会持续了2天。这是一个每人都需要参与的工作环节。我们进行头脑风暴、在白板上涂涂画画，记录下了上百个点子，当然我们知道，最终只有少数能脱颖而出。

持续协作

本着合作的精神，我们与Instrument团队频繁碰面——准确的说，一天碰两次。晨会确立当天的目标和预期。晚会回顾进程、交换实时反馈。由于时间紧凑，保持迅速反馈至关重要。

列举一些我们在会上回顾的内容：

脚本
故事板
产品细节（设备和头像）
视觉方向（色彩、光线、布景）
音乐选用
旁边音选用
粗剪片段

回顾其中一个故事板

确定视觉方向

我们的目标，是用一种耳目一新的方式，为Dropbox讲述一个合作与生产力的故事。于是我们决定做一件很少做的事情——用真人来代替插画。使用真人有助于将新功能人格化，但我们也需要以符合Dropbox视觉美学的方式来呈现。

从一项简单的任务着手：谨慎选用颜色，贯穿始终，专注于我们想要表现的操作，在剪辑中保持适当的留白。

我们选了少量色彩，确保视频中的每个画面只出现这些颜色。从头到尾，你会在头像、界面和物体上见到这些颜色。

视觉方向探索

寻找合适的音乐

在所有视频中，音乐都扮演着定义氛围、活力和情绪的重要任务。显然，选择适合的音乐极其重要。这个项目需要传递出正能量和积极向上的感觉，于是我们确定了音乐应该要积极、乐观、活力充沛。我们也希望这段音乐有节奏感，有助于强调生产力和效率的概念。

音乐使用的乐器要少而简洁，为旁白留出充足的空间。我们也希望避免使用科技行业惯用的陈词滥调，不想使用太过可爱或幼稚的乐器。

下面是从录音棚送来的几段音乐。

https://soundcloud.com/jasonmar/14-dropbox-search

第1段音乐

一开始，我们很喜欢这段音乐带来的惊喜。调子和音色给人感觉像是在用一种有趣的方式强调生产力和轻松办公的概念。但是最终，它还是感觉有点傻——尤其是急促的木器声和劈开的声音。显得不够现代和积极。

https://soundcloud.com/jasonmar/15-dropbox-search

第2段音乐

这个版本，我们很喜欢鼓点节奏的创意，但它需要有更统一和简单的节奏贯穿始终。我们觉得这有助于表达持续不断的生产力。爵士鼓手即兴创作的方式，感觉有点出乎意料，与旁边音配合时，切分音的部分太让人分心了。

https://soundcloud.com/jasonmar/71-stems-session-7

最终的版本

第3个版本正是我们要的。它感觉很现代，有一种贯穿始终的低调节奏，与我们的脚本也高度吻合。开头的古灵精怪和简略风格会慢慢积攒能量，最终达到一种最佳状态。结尾的吉他旋律确实强调得恰到好处。这就是我们想要的。

寻找适合的旁白音

和描述音乐类似，我们也需要考虑视频的解说者。

大量争论之后，我们确定要找这样的声音：

年龄：25-35
性别：女
种族：不限
声音/音色：聪明、自信、温暖、直接、有力（想想Rashida Jones）、娓娓道来。不要太活泼，也不要太圆润。她要听起来像是一个聪明的朋友，试图分享一些改善生活的方法。

这是两个最被我们看好的旁白：

https://soundcloud.com/jasonmar/option-1-vo-talent

旁白版本1

https://soundcloud.com/jasonmar/option-2-vo-talent

旁白版本2

两个版本都很棒，最终选了第2个。它最符合我们想要的语调。

拍摄视频

选定了导演、剧本、故事板、位置、人员和道具之后，我们进行了一天的封闭拍摄。录制这样的视频是个艰巨任务，一整天顺利拍摄让我们倍感压力。

有许多人参与进来了——大概总共50个——日程非常紧凑。幸运的是，我们可以提前准备、装配、预演，在一天内使用15个不同的镜头。

和我们的导演、人员与创意机构搭建场景。有件趣事：导演是Aaron Platt，执导过Lonely Island的MV《On A Boat》

拍摄后

拍摄当天过后，还有后期处理工作，然后这个项目才算真正完成。其中包括编辑、旁白录制、色彩校正、动画效果，还有最后的旁白/音乐混合。

拍摄完后，花了一天时间来编码，并把素材传给编辑人员。编辑人员开始编辑和组织素材。素材库被随意插入到旁白和音乐中，产生了第一段粗剪样片。

第一版粗剪样片：

https://www.youtube.com/watch?v=UBSZaXUzT1s

粗剪片段

我们还尝试了另一个版本，表现我们想要突出的每一个功能。我们在展示每个功能之前，写出“文档扫描”、“标注”和“历史版本”等字样。但是，看了这个版本的粗剪片段后，我们感觉这样有点傻，于是决定抛弃这个方向。

https://www.youtube.com/watch?v=Q3u1RMRhank

有标题的粗剪片段

最终发布的成片

以粗剪片段为基础，我们反复进行后期处理，辛苦打磨细节直至尽善尽美。下面是我们最终发布的版本。

https://www.youtube.com/watch?v=-_xXSQuBh14

最终的成片

整个项目真正完成

这段视频成了一块基石，支撑着一个更大的项目——它是所有后续工作（邮件、社交媒体、宣传材料、着陆页）的指明灯。最后，万物归一，讲述了同一个故事。

作者信息：Jason Mar

原文链接：https://medium.com/dropbox-design/the-making-of-a-1-minute-dropbox-video-c0e909d98fc3

默认项的力量

hi@victor42.work (Victor42) — Sun, 23 Apr 2017 11:28:41 +0000

[国外设计第169期]

首先出现的数值和设置内容就是默认项。它们的作用似乎微乎其微，但默认项（和它们的设计者）掌握着强大的力量——替用户做决策。

本文中，我们会讨论如何运用预置的内容和默认设置，创造更好的用户体验。

表单输入框中的默认内容

即使过程很简单，长表单往往还是会让用户敬而远之。通过提供适合的默认值，可以从海量相关选择中拯救我们的用户。

默认项应当符合多数用户所需

如果可以预先确定内容，就把它预置到输入框中，要确保它是多数用户的选择（比如95%）。人们会很快速浏览在线表单，所以不能假设他们愿意花时间来理解所有的选项。他们很可能会欢快地略过那些已经有内容的项目。

旅行网站的默认项是非常好的例子。Skyscanner的预置了二等舱选项和游客类型，这是多数用户的典型选择。

使用智能默认值

输入文字的交互成本极高，它很容易输错，而且相当耗时，即使有完整的键盘也一样（更不用说在触摸屏上输入了）。要尽可能把输入操作减到最少，防止用户犯错——使用智能默认值。下面这些例子，可以反映智能默认值如何帮助用户减少犯错，并提高生产力。

基于用户的地理位置，预设国家选项。 如果能够了解到用户当前位置在墨尔本，那么国家一栏就可以默认设置成“澳大利亚”。
尽可能让界面做更多的运算。下面的截图中，界面正在以美元计算总花费，并且为顾客换算成欧元。 尽可能让信息输入减到最少。

在需要用户注意的地方，不要使用默认输入项

在任何需要用户思考的地方，都不要使用默认项（例如订阅新闻或接受使用条款）。

让用户可以轻松修改默认项

即使经过周密的调研，得出了默认选项，总可能会有用户需要其他选择。因此，要能够轻松修改默认项。

就像我刚提到的，自动检测位置能帮用户节省时间。但是，总有的用户需要选择其他的位置（例如查找一个远处的店铺）。图片来源：Google

应用中的默认设置项

你的产品一定要非常适合新用户上手。尽可能运用默认设置，让应用根据用户可能的选择作出合理猜测。

有益的的默认项

从统计学角度来说，用户极少会更改应用中的默认设置，即使是那些个性化设置。Jared Spool在他的文章《用户会修改默认设置吗？》中提到，根据他的观察：

只有不到5%的用户会修改默认设置

另一项研究——《Facebook的隐私设置分析：用户的期望和现实》发现，Facebook的用户对隐私设置感到困惑，常常高估了默认项给他们的隐私保护。这就意味着：

用户会假设你已经掌握了他们所有的偏好

鉴于这两个因素，你的应用的默认设置应该最友好和实用：

发起研究来了解用户如何使用你的产品。不要直接询问用户要什么，发掘最能达成目标的方式，围绕它来设定默认项。
把所有有风险的设置项默认设为安全（且实用）的选择。例如文字编辑软件的自动保存功能，就应该默认开启。

设置项能定义应用的行为偏好

你可以运用默认设置项来诱导用户执行你希望的操作。Slack是个很好的例子，让用户充分了解默认设置项，并且掌握修改的方法。

Slack建议用户开启桌面通知

结论

人们总是倾向于保留默认选项。默认项是一种威力无穷的手段，能够引导用户、提升使用率，并且通过建议影响用户的反应。

感谢阅读！

原文链接：https://uxplanet.org/the-power-of-defaults-992d50b73968

作者信息：Nick Babich I’m a software developer, tech enthusiast and UI/UX lover. http://babich.biz

使用无序列表的7项注意

hi@victor42.work (Victor42) — Sun, 16 Apr 2017 00:18:42 +0000

[国外设计第168期]

摘要：小圆点有助于分割大段文字，使得复杂的文章和博客更容易消化，突出关键信息。

有时候，最好的信息展现方式就是无序列表。无序列表能吸引注意、便于浏览、简化文本，并且表达出项目之间的关系。

网站不是一个适合长篇大论的地方。相比之下，网站的读者更喜欢文案以某种易于浏览的形式组织起来，能让他们轻松跳过大段文字，直达自己感兴趣的部分。

有许多种网页文本格式的技巧，能够分割大段内容。无序列表和加粗、缩进、行间距、彩色文字，都是辅助网页内容高效阅读的重要手段。

区区几个小圆点能够吸引视线，并且让复杂的概念易于理解。小圆点能让读者感知到内容的简明和重要。这并不奇怪，在可用性研究中，我们观察到读者对无序列表满怀热情。网页的读者希望快速消化内容。

我们可以对比下面这两个版本。你会发现第2个版本中的内容更易阅读。这是因为它以纵向列表的形式展现。相比之下，在第1个版本中，读者只能在结构不太清晰的段落中寻找。

版本1

我们的Spa度假套餐包含了2晚住宿，2次50分钟的任选spa项目，1顿两人份的上门早餐，到达时还有礼品篮相赠。

版本2

我们的Spa度假套餐包含:

2晚住宿
2次50分钟的任选spa项目
1顿两人份的上门早餐
到达时赠送礼品篮

不必担心版本2占了更大的纵向版面。如果（或者说除非）用户对内容感兴趣，随着视线的下移，他们完全不介意往下滚动。事实上，相比那些用长篇大论吓退用户的网站，恰当地使用了无序列表的网站，会更加亲切易懂，用户也会更有动力向下滚动。

使用无序列表的7条建议

1. 每一项的长度要比较接近

无序列表在展示相关内容时会达到最佳效果。其中的每一项都应该有同等的重要性。可能的话，让每一项的长度保持接近，就不会有明显的主次之分。保持统一的外观能让眼睛更舒适，使列表显得不那么杂乱。

错误用法

请带上以下物品参加露营：

睡袋
去瀑布徒步旅行时要用到的洗浴套件
防晒霜
防水夹克应对可能的雨天。我们可能会遇到强烈的暴风雨

长度上的差异，使得列表项显得杂乱、不统一。

建议用法

请带上以下物品参加露营：

睡袋
洗浴套件
防晒霜
防水夹克

2. 除非顺序很重要，否则不要使用有序列表

有序列表的使用场合，通常是列表项必须按照某个特定顺序排列，例如程序步骤。或者数量很重要时才能使用，比如前十名的榜单。

如果列表项的顺序和数量不重要，那就不需要数字序号。这么做会使人困惑：我们在用户研究中发现，人们会错误地认为他们必须完成有序列表中的每一项，但其实他们只需要选择其中一项即可。

错误用法

请通过下列任何一种方式联系我们：

在线联系登记表
在线聊天
致电
亲自上门

这些数字序号，让列表项显得好像是要按照顺序步骤来执行，而不是几个独立选项。

建议用法

请通过下列任何一种方式联系我们：

在线联系登记表
在线聊天
致电
亲自上门

3. 在列表项中使用相似的句子结构

每一项都要有统一的措辞风格。多变的措辞影响句子通顺，会阻碍读者阅读（甚至导致困惑）。

用相同的方式组织每一项。确保无序列表的每一项以相同的语法元素开头（例如名词、动词），要么都是词组，要么都是完整的句子。

错误用法

在公园中请遵守以下规则：

将垃圾投入指定的垃圾桶。
巨大噪音会吓坏动物。
应该站在黄色的标记线区域。
保持公园干净，人人有责。

在这个例子中，4条语句都以不同的词语开头。

建议用法

在公园中请遵守以下规则：

将垃圾投入指定的垃圾桶。
不要发出巨大噪音。
站在黄线区域内。
尽量保持公园清洁。

第二个列表的阅读更顺畅，因为每个短语的开头都用了同一类词语——本例中是动词。

4. 避免在每一项开头重复相同的词语

如果可以的话，请省略“一个”、“是”、“这个”这样的词语，去掉每一项开头的重复词语。每个列表项开头的词语有所区分，能让列表更加容易分辨。

错误用法

如何挑选菠萝：

用闻的。它闻起来要甜。
用按的。它应该按下去结实但柔软。
用看的。它最好是金黄色。

建议用法

如何挑选菠萝：

闻。它闻起来要甜。
按。按下去应该结实但柔软。
看。最好是金黄色。

5. 使用清晰的、描述性的句子和词语来说明列表

引语（或者说说无序列表之前的那句话）很重要，因为它让读者知道列表的内容大概是什么，为什么重要。引语不必是完整的句子，也可以和列表的每一项组合成完整有意义的句子。

错误用法

不列颠哥伦比亚省的假期：

徒步旅行
艺术博物馆
在湖上划独木舟

引语（不列颠哥伦比亚的假期）没有充分描述列表。而且，列表中包含了假期要完成的事项，但艺术博物馆并不是一个动作。

建议用法

我们在不列颠哥伦比亚省的假期行程包括：

上山徒步旅行
参观艺术博物馆
在湖上划独木舟

6. 保持格式一致

关于大小写和标点有一些基本准则：

如果列表项是句子，那么每一项的首字母就要大写，并且以句号结尾。
如果列表项是词组，不需要任何标点结尾，也不是一定要首字母大写。但是我们还是建议首字母大写，这样更易于浏览。

错误用法

如果发现霸凌行为：

支持受害者
将事情告知成年人
鼓励受害者向成年人反映
通过表示关心来提供帮助

这些句子没有首字母大写【译者注：当然中文没这个问题】，而且结尾没有标点。

建议用法

如果发现霸凌行为：

支持受害者。
将事情告知成年人。
鼓励受害者向成年人反映。
通过表示关心来提供帮助。

错误用法

你可以通过____来保护环境：

回收纸张和塑料产品。
少用一次性物品。
捐赠旧衣服和闲置物品。
骑车与步行替代开车。

列表项是词组，因此不需要标点符号结尾。

建议用法

你可以通过____来保护环境：

可回收纸张和塑料产品
少用一次性物品
捐赠旧衣服和闲置物品
骑车与步行替代开车

7. 不要滥用无序列表，会导致它们丧失效果

就像所有的视觉设计技巧一样，过度使用都是有害的。如果看到满是小圆点和缩进的页面，你会吓傻的。明智地选择需要强调的内容。（如果你没发现本文中的无序列表是前后对比的案例，你就会觉得有点使用过头了。）

在有3项或更多重要信息时，纵向列表是最好的展示方式。如果项目更少，那就杀鸡用牛刀了，直接放在句子中通常效果更好。

避免嵌套使用列表，这样就很难理解了。如果一定要表现多层级的列表，每一级都要用不同样式的小圆点。

注意

这些只是一般规范。但是每个公司或组织可能会采用不同的格式。如果你的公司在遵循某套风格指南，你应该先了解指南，然后才决定是否遵循以上规范。文案撰写有一个重要的方面，就是在整个文档和网页中保持内容统一格式。

结论

纵向列表吸引视线，能使列表每一项各自独立。因此，它比行内的列表更有效，能让人更有效地浏览、参考和理解关键要点。

原文链接：https://www.nngroup.com/articles/presenting-bulleted-lists/

作者信息：HOA LORANGER Hoa Loranger is VP at Nielsen Norman Group and has worked in user experience for over 15 years. She conducts research worldwide, and presents keynotes and training on best practices for interface design. Hoa has consulted for companies such as Microsoft, HP, Allstate, Samsung, Verizon, and Disney. She authors publications, including a book, Prioritizing Web Usability.

用户研究：人们如何搜索图标

hi@victor42.work (Victor42) — Sun, 09 Apr 2017 11:56:08 +0000

[国外设计第167期]

假设你是一名兽医。因为你非常善于利用人们对弱小可爱动物的爱心，所以Instagram账号经营得风生水起。但这对你来说还不够，你决定开发一个移动应用来拓展你的宠物帝国。这款应用能把人脸模拟成猫猫狗狗的脸。（承认吧，你14岁的时候肯定构想过类似的模拟马脸和猪脸的应用。毫无疑问。）

那么你的这款改变世界的应用，肯定也需要一个图标，猫咪图标。这时候Icons8就派上了用场。

在搜索框里输入“猫”，下载你喜欢的“iOS”风格图标，因为你觉得Appstore还不够拥挤，差不多就是这样。

然后，你发布了应用。你的秘书向你祝贺，从那一刻起，你的名字被载入兽医的史册。

我想表达什么？兽医真是个好职业。好吧我只是在搞笑。

人们往往有各种奇怪的兴趣。他们会搜索一些含糊不清的图标，例如“新闻”、“工作”等。用在他们的应用、网站、T恤上。

试着搜索一下工作图标，你就能了解我们的搜索算法的厉害之处，它能囊括所有几乎能与“工作”沾上边的图标。

问题是，每个人对于相关与不相关都有自己的理解。更要命的是，即使同一个人，在某些因素影响下也会对一个图标的相关与不相关做出不同的判断，比如说文字标签。给图标加上文字标签，或许就能改变人们的认知。

我们不知道怎么应对这种情况，因为我们有两种显示模式：

我下文中会把这两种模式成为 纯图标 模式和 图标+文字 模式。

哪种更好，图标还是图标+文字？哪种更适合作为默认模式？人们看到太多不相关结果时，会感到挫败吗？

我做可用性测试的主要动机，就是为了解答这几个问题。

我邀请了5位参与者（实际上是7位，不过前两位是我测试剧本的同事）。我只是让他们来搜索图标。

搜索盒子图标……

搜索狗狗图标……

……然后指出他们觉得离谱的结果：

我邀请部分人用纯图标模式搜索，另一些用图标+文字模式。我绘制了一张表格记录所有数据——对于不同模式下的每个图标，参与者指出了多少个离谱的搜索结果。

很快事情就超出掌控了。数据对我没有任何帮助。参与者之间的区别和他们的感知实在过于戏剧性，我觉得需要上百名参与者才足够让我相信数据，并从中总结出某种模式。

于是，我开始关注细微的见解。虽然有些规律会在不同模式和不同图标中显现出来，但它们背后仍有一个简单规律。下面是我的观察结果。

文字标签有影响吗？

假如你搜索盒子图标，在搜索结果中出现了这样的图形：

此时，相关与否其实是受文字标签影响的。

【译者注：在英文中，Box是盒子，而Boxing是拳击】

如果加上文字标签，人们就会觉得命令行也算相关的结果。

所以“图标+文字”模式更合适，因为人们能从中感知到更多相关的结果，于是搜索行为有更好的体验，对吗？其实不对。

视觉感知与语言感知

我们再搜索一次盒子。在各种搜索结果中发现了这个图标：

许多参与者认为它是相关的，因为它有一个盒子的外形。但这是纯图标的情况：

如果人们看到图标下方写着“显示器”，他们果断会认为这是不相关的。

这就意味着文字标签能使部分图标相关，也能使另一部分变得不相关。这是一场灾难，因为你永远不知道你得到的是哪部分。但是……

每种模式各自好在哪里？

当然，我们可以只关注事物的负面作用，但这样完全没有建设性。

下面是每种模式一些积极的方面：

纯图标模式

屏幕上可以展示更多图标，我们能更快速浏览。
我们会根据视觉感知来选择图标，甚至因为喜爱它的设计胜过含义。设计师寻找灵感时，更多以这种模式来搜索。而且，这种模式对logo创意和非UI相关的物品很有帮助（杯子、T恤等等）。

图标+文字模式

文字标签可以延伸搜索行为。比如说，如果你正在搜索“手机”图标，然后看到“消息”图标出现在其中。然后你就知道搜索“消息”或其他相关词语，持续不断扩展你的搜索词。
有时候文字标签并不明显，要求很明确的图标都有非常具体的名称。比如符号链接文件或带锁孔的盾牌。有文字的话，就很容易记住这些图标，以后要找还能找得到。对于长期持续使用我们产品的用户很有帮助。

那人们到底更偏向哪种模式？

老实说，两种几乎打了个平手。3名参与者喜欢前一种模式，剩下的则喜欢带有文字的模式。无论如何，每种模式都使相应的参与者受益了。

最后的思考

发起用户体验研究来判断哪种模式胜出，这非常有意思，但最终的结论是没有确定的胜者。

好在我们现在知道了，每种模式都有它自己的优势。把它们都展示出来是正确的选择，这样人们就可以选择符合自己习惯的模式。

希望你喜欢本文。如果对此研究有任何问题，或者想发表自己的见解，随时欢迎留言，或者通过Twitter联系我。

原文链接：https://icons8.com/articles/how-to-search-icons-like-sherlock/

作者信息：Andrew Andrew started at Icons8 as a usability specialist, conducting interviews and usability surveys. He desperately wanted to share his findings with our professional community and started writing insightful and funny (sometimes both) stories for our blog.

我花了20个小时研究3个按钮

hi@victor42.work (Victor42) — Sun, 02 Apr 2017 15:02:12 +0000

[国外设计第166期]

真的……我没疯

首先讲一讲背景。这是在我们周会上发生的事情：

“Andrew，我们做了几个很厉害的新功能，测试一下吧。”

“好的，当然。”

“嘿，你甚至会忍不住写篇文章来介绍的！”

“呃……”

只有一个问题……

当我被要求测试一项功能，通常意思是让我发起一场可用性测试，这就包括寻找参与者、准备一系列任务和问题，并且通过Skype访谈来执行（执行问题，不是处决参与者）。【译者注：这是作者的一个玩笑，“执行”与“处决”在英文中是同一个词】

于是我去看了我们的网站，自己先研究了这个新功能，基于它想象各种相关联的任务。我花了11秒尝试了所有可能性。我甚至尝试反复来回点选，就好像我在一边和我妈通电话一样，这样花了30秒。然后我妈真的打电话来了，我又试了一次，花了20秒。

我所讲的功能，是图中右上角的3个按钮。3种视图模式的切换。

3个按钮可以让视图在3种模式中切换：纯图标、带标签的图标、表格视图

通常我的Skype访谈会持续30分钟：其中80%是任务，20%是简短的谈话和我的蹩脚笑话。如果任务只有30秒，我就得讲29分钟的笑话。我才不会那么做，有2个原因：

没人愿听
如果我能做到，我就是个喜剧大咖了

于是，我现在有的只是3个按钮，只能通过一个问题来检验。

此时我的剧本大概是这样：

设定一些任务来检验人们是否注意到这3个按钮。
“这3种模式中，你最爱用哪种？”

通俗而言，UI与UX的区别

我还需要更多信息。于是我继续深入。在某种模式下我发现了第4个按钮。

设定一项任务来检验人们是否注意到这3个按钮。
“你知道这个‘加号’按钮是做什么的吗？”
“这3种模式中，你最爱用哪种？”

到目前为止，这个访谈仍然非常简短，然而按钮就只有这些。我就只是这么坐着，在3种模式间来回乱点，思考人生、存在、还有精神崩溃。然后我忽然间深受触动。

在此之前我只是在思考UI，那只是界面。确切的说，是思考这些按钮和它们的功能——在3种视图中切换。

现在我开始考虑UX了，或者说体验。脑海中涌现出大量的问题。文字标签会以某种方式影响人们吗？它对人们查找图标的方式有影响吗？它会影响整体体验吗？我很想知道！

这些抽象的问题非常棒，但我不能直接这么问参与者：“嘿，你觉得文字标签有用吗？”因为人们的答案和实际行为之间有巨大差距。我不得不找到具体的任务来检验人们的实际行为。

怎么办？我就设身处地，开始搜索不同的图标。我搜索了汽车图标、猫、狗、常用的图标、不常用的图标。我切换不同的视图，一遍又一遍搜索。

当然，搜索不同内容，得到结果也不同。但关键在于，我的关注点不一样。如果我寻找猫，我有明确的预期。但是如果我搜索“新闻”或“音乐”，我的预期就模糊得多。

虽然不同的搜索预期有影响，那不同的视图模式呢？

这个简单的问题充满了我的30分钟调研。

真理：深入挖掘总是对的

最终的剧本草稿

设定一些任务来检验人们是否注意到这3个按钮。
用[纯图标]模式来搜索：猫、手机、箭头、新闻、开始、音乐。用[带标签的图标]模式搜索：狗、线条、盒子、创意、停止、工作。并且指出认为离谱的搜索结果。
“你知道这个‘加号’按钮是做什么的吗？”
“这3种模式中，你最爱用哪种？”

我让参与者在纯图标模式下搜索“猫”，然后指出任何离谱的搜索结果。

然后我让另一位参与者搜索同样的“猫”图标，但是用图标+文字标签模式，并指出离谱的搜索结果。

看见没，那是Gabriel Aul。一切都说得通了！或许也没有……【译者注，Gabriel Aul是windows 10忍者猫形象的创造者】有时候，搜索甚至会给我们自己带来惊喜。

好吧，我们换个更好的例子。假设你搜索线条图标：

有了文字标签，参与者就不会再觉得“命令行”是不相干的图标。但这只是诸多影响之一。

我想证明的是，不同人对搜索结果的关联性有不同的感受，于是我明白了他们的预期有什么差别。我也会尽可能求证标签是否会影响预期。

真理：努力寻找方法衡量用户的体验

检验我的测试

到此为止，我的调研剧本已经比较完善了。但我仍然感觉不确定，邀请我同事来作为参与者，就像真实访谈一样。

结果证明这根本没那么完善。我不得不做出一些调整。

“你能改变一下搜索结果的展现方式吗？”
用[纯图标]模式搜索：手机、新闻、开始。用[带标签的图标]模式搜索：盒子、创意、工作。指出离谱的搜索结果。
“你能否告诉我，在不点击‘加号’按钮的情况下，你觉得它是做什么的？”
“以上3种模式，你最喜欢哪种？”

为什么要改成上面这样：

第一题模棱两可。
10个不同的搜索任务让访谈持续了60分钟。我计划只需要15-30分钟，于是我不得不把参与者减少到6人。
第三题中，我得明白地告诉参与者，不要点击按钮——否则诱惑太多了。

真理：在展开真实的访谈之前，非常有必要做一下实验

结论

成功只给有准备的人。现在我有了最终的调研剧本，可以对真实用户展开测试了，我照此执行。7名参与者、超过15页笔记、3小时的视频素材，我得把这些资料组织起来。我现在正在撰写相关文档。下一篇文章就是关于这些调研结果、领悟和尴尬的沉默【译者注，我也正有此意 LOL】。如果你正在阅读本文，却没找到下一篇的链接，有两种可能：

本文刚发布不久。
我抓狂了，正在窗台上奋笔疾书。

感谢阅读！

原文链接：https://hackernoon.com/design-thinking-lessons-from-our-cats-9a43fd71457a

一个设计师的装修笔记

hi@victor42.work (Victor42) — Sun, 26 Mar 2017 01:03:58 +0000

【提醒：本文图片极多，如果心疼流量，请立刻关闭网页，以后在WIFI下浏览。】

这是一篇前前后后写了一年多的笔记。梳理逻辑，收集资料，写写停停。现在，是时候整理一下，公开亮相了。

2013年6月，我买了一套90方的小户型住宅。期房，等了2年半，2015年11月底才拿到手。我只是个UI设计师，和室内设计八竿子打不到一块。但面对新房装修这样的浩大工程，我决定亲自操刀，毕竟这是个难得的学习机会。虽然请的装修队里也有设计师，但他只做了两件事：量房、画水电和木工图，然后就再也没出现过。可以说家里从格局到细节装饰，95%是我亲自设计的。

事后证明这其中的收获远超我想象，虽然折腾，但确实乐趣十足。头一回装修，我立下目标，要把完整的经过记录下来，让所有的收获有一个地方沉淀。

一定要亲自操刀吗？

这个问题需要花些时间才能回答。要有个心理准备，搞清楚这到底是个多庞大多繁杂的项目。有个感性的认识，才能判断有没有足够的精力，是否真的适合自己。自己主导装修，就意味着要事无巨细一一把控。虽然不一定要亲自去铺电线、刷墙漆，清包、半包、全包都可以，但关键在于大部分的细节自己要清楚了解。

装修不是单个的大难题，而是一大堆鸡毛蒜皮的小问题。光是思考从何入手就花了我不少时间。因为有很多角度，时间角度、空间角度、经济角度，而且也不像电脑上的设计那样无拘无束，在具体工艺与材质的限制面前，往往不得不向预算低头。总之，一步到位的想法不可取，一切都在变化，包括自己的想法。摸石头过河，享受探索的乐趣。

首先，零零散散看一些装修文章，不成体系没关系。我起初随意翻到一篇讲如何挑选橱柜的文章，那时候离真正开工还很遥远，我就当消遣来读。越读越倒吸一口凉气，光是厨房台面就有许多不曾注意的小细节：比如台板底面会有沥水槽，防止水流进柜体破坏木板；有的台板外沿还翘起一点，也是另一种防水的处理方式；台板靠墙那一端的直角缝隙不易清洁，有些会做成弧面，也有的会在事后打上陶瓷胶……

多看这些小细节。如果你的内心没有打退堂鼓，反而感觉像是发现了新大陆，那我相信你必定是爱折腾的人，向你致敬！希望接下来的所有内容对你有帮助。

准备前的准备

最高目标

装修要有明确目标，不只是好看这么简单。我能想到的侧重点有这几项：耐用、美观、收纳、易清洁、易改造。为什么省钱不算其中之一？因为预算和这些不是一个维度的东西，在起冲突时难以保证作出理智的决策。所以要在逻辑上把省钱从最高目标中去掉，放到细节里再考虑。

你可以假设这5个指标各自满分是10分，现在给你10分的总分，你任意分配到其中去。我自己的目标大致是这样：

[3/10] 耐用
[1/10] 美观
[4/10] 收纳
[2/10] 易清洁
[0/10] 易改造

看样子暴露了我是个收纳狂人。其实我家多处设计女朋友都不满意，说太丑了，亏你还是做设计的。嗯……只能认了，我自己也不觉得很好看，在这方面确实没有足够重视。

最高目标如果举棋不定，宁可多参观参观朋友家再定。万万不可敷衍了事，什么都要，每项随手给个2分。10分里的2分能好到哪里去呢？目标很重要，贯穿始终，确定下来不可轻易更改，一定要坚持。

逻辑条理

开展任何实质的工作之前，要先思考整理出一套梳理信息的方法。装修的内容这么杂，应该如何给这些信息分类、整理、归总，还要易于随身携带和分享沟通。工具、层级结构、记录方法与格式，都需要反复斟酌。而最重要的，就是从始至终坚持维护更新这些资料。当然，随着装修进行下去，你一定会发现这些框架最初设定得并不完美，导致后续工作的开展和跟进不太顺手。要及时作出调整，该合并的合并，该补充的补充。

最初我尝试用脑图来梳理装修这件事情，在比较宏观的层面上还是可行的。比如可以用脑图来梳理所有房间和其中器物，还可以按时间顺序梳理出几个施工阶段。然而随着信息的细化，每一个维度都能衍生出一个庞大的知识体系，维度之间还有密切的关联，这已经不是树状结构能够搞定的了。于是到后来，各个维度都会诞生自己的资料形式：

空间方面有平面图、立体图、水电位置图。
时间方面有施工和采购顺序表、装修进展相册。
设计方面有风格参考图集、配色表。
经济方面有预算表。
还需要经常穿插一些TodoList，用来跟进一些琐碎的阶段性工作。

脑图的作用逐渐弱化，直到我某天意识到一个多月没再看过脑图了，它已经完成了自己的使命，解开了思想的线团。遗憾的是我没有保留下来，就没法在这里展示给大家看了。

装修过程中最重要的几项资料：平面图、立体图、尺寸清单、配色表、预算表、施工采购顺序表。

平面图

装修公司会给你的，上面标有精确的距离尺寸。手机上要存一份，前期采购建材时估算价格用。

立体图

主要作用是设计格局，并方便与家人和装修公司沟通你的想法。立体图的制作要花些功夫，但也不至于太难。是准确表达你想法的绝佳手段，值得投入。

尺寸清单

平面图无法体现的一些尺寸，就需要记在这。比如垂直方向的尺寸，还有窗帘宽度、飘窗垫尺寸、晾衣架最大长度等细节数据。每一次去新家，都留意以后可能需要用到的尺寸，想到一个就记一个，防止为了量尺寸专门跑一趟。

配色表

有些设计风格用不上配色表，但如果有意控制色彩数量，让色系保持统一，它就有意义了。做一份存在手机上，按照配色规范来采购物品。严格执行，小到毛巾垃圾桶都要尽量符合标准。当然，这是指新购买的物品，也不能为了配色把旧东西都扔了，毕竟过日子不是拍电影。

配色表用Illustrator打开可以编辑。

预算表

装修的中后期重度依赖的资料，需要时刻更新，并且也要能存在手机上随时查看。（可以看到厨房龙头真是奢侈了一把啊……）

施工采购顺序表

我特地设计了这份资料，能够把整个事情在时间上串起来。什么时候需要做哪些事，方便提早做准备，从容安排时间。打印出来，里面的项目完成了就打钩，未完成就空着，不需要就打叉。

上面展示的这些只是节选和样品，我家所有资料的完整文件，在文末都提供下载。

验房

装修开始的第一件事是验房，排除房子的质量问题是一切装修细节的前提。其中多数项目装修公司都会检查，但自己要确保检查到位了。

测试水管。用桶接水，往每个下水管各倒半桶下去。观察有无阻塞，会不会漏到楼下。测试漏水非常关键，只有在装修前发现漏水，才能明确界定责任，让建筑施工方维修。一旦开始装修之后发现漏水，责任就难以界定了，即使明知是开发商的问题，也基本都以扯皮收场。你也不可能就此停工，和开发商无休止扯下去，漏水牵连到两家，停工吃亏的还是自己。
标记空鼓。用坚硬的物体轻轻敲击墙面地面，把听起来有空洞的地方用笔圈出来，上报给施工方修补。有些恶劣的房子，轻轻一敲，地面墙面甚至能敲出碎块。
检查平整度。找一些笔直的东西，木条、金属管之类的，摆在墙根处，可以看出墙面是否平整。这对于之后铺地砖、地板、地脚线有较大影响。如果发现不平整，可以记录下来，让开发商或装修公司解决。
寻找裂缝。新房交付就有裂缝的话，那质量肯定是有问题的。要看裂缝出现在什么地方，如果出现在梁和承重墙上，就要特别当心。去楼上楼下看看，裂缝是否延伸到别人家了，如果那样，这房子是不能住的，果断要维权。出现在非承重墙上还有办法修补，不容易进一步扩大。
检查门窗。新房自带的一些玻璃移门、窗户、入户门，多推拉开合几次，看看是否顺畅，会不会卡住，会不会发出噪音，关上是否严实。还要看玻璃有没有碎裂和明显划痕，入户门有没有破损。

设计格局

怎样的格局决定了怎样的住宅功能和生活方式。喜欢在阳台晒太阳休闲，才会在阳台摆桌椅；有换不完的漂亮衣服，才需要带有巨大衣柜的衣帽间；爱好瑜伽，才需要在客厅留出足够大的空地。格局都是屈从于生活方式的，不是说看见什么设计觉得巧妙，自己家就一定要来一套，未必符合你的习惯。

所以格局一定要先行，之后再考虑美观上的设计。

六面记录法量房

自己量房，误差控制在5cm内即可。虽然装修公司也会量，但他们量得的尺寸只够画出平面图。我们需要更丰富的数据，包括窗户的大小、离地高度等，后面制作立体图时这些都必不可少。

第一张图是平面图。根据开发商提供的户型图，画出大致形状。记录墙的宽度与厚度、门洞宽度与位置、飘窗尺寸、柱子尺寸。并且把开发商户型图里的承重墙位置在图中标出。

我测量的平面图，涂黑的部分就是承重墙，不可拆改。（字丑轻喷）

第二张图是标号图。为每个区域标上字母序号，比如左上角的a房间，其实是我家厨房。厨房的4面墙，就标上a1-a4。每个区域的四面墙按照相同顺序来标，方向感差的人不容易出错。还有一些杂七杂八的标注也可以记录在这张图上，因为这张图相对比较空。

h区域是个小阳台，特地记录一下此处有水源与排水口。

之后就是每个房间的四面墙了，一个房间一页。要记录墙高、窗户尺寸与位置、门洞高度、梁的位置、特殊设施（例如厨房排烟口、空调孔）的位置。其中梁的位置不容易直接测量，精度要求可以适当降低。

我家厨房的4个墙面，a2和a4顶部窄窄的一横条就是梁，250mm高，一道L型的梁。请注意，我当时由于没经验，把开关插座的位置都记下来了，其实这没必要记，电路走线全部都会重新改造。

我家主卧，注意到g4有一个横着的框吧？那是窗户，离地400mm，窗户高2100mm，再往上又是墙体。结合g3看就会发现，这是L型的窗户。

说好了六面记录法，还差一个顶面。但是顶面实在是无法准确测量，可以仅靠目测记录，需要留意的也只有梁的位置，梁少就不必画了。

记录尺寸之余，也多拍拍照片。以后一旦对于毛坯的细节有什么疑惑，照片能解答大部分问题。

画立体图

趁热打铁，在还能看懂手稿时，尽快把测量的数据转化为立体图。当然，首先要学会画立体图，这得用到建筑设计软件SketchUp。

不要慌，这软件本身的功能很简单，只要能画出立方体、圆柱体就够了，不是要你学会建筑设计。在此分享一套教程，我就是通过它学会的，一天时间足够了：

http://study.163.com/course/courseMain.htm?courseId=381005

甚至都不用学整个教程，我学完第6章就直接开干了。因为我根本没有想过要贴上材质纹理，我只需要考虑尺寸和陈设。这感觉就像在画交互原型图。 →_→

为什么不必体现材质和纹理？这个图主要是用来交流沟通、思考格局。画图过程有助于想明白各个房间、各个区域以后会怎么用，具体要买哪些设施。

画出来的立体图就是这个样子，各种方块，但足以描述室内陈设（你看下图左上，冰箱的右边，连微波炉都画出来了）：

难点不是画图本身，而是不知道日常物品的尺寸。比如我们通常不会留意橱柜的高度、过道的最小宽度。为此要去查大量资料，亲自尝试体验。随身带卷尺，想到什么量什么，多数精力都会花在这上面。

拿立体图与家人、懂行的朋友讨论。有想不通的地方多查资料，发现问题及时调整布局方案。直到软装阶段之前，这套立体图都是装修方案的核心。买建材时展示格局、与装修师傅远程截图沟通，都要靠它，有任何变化务必及时更新。

其实，我之前还产生过好几个版本。在早期方案中，厨房两侧是对调的，沙发区的陈设完全不一样，次卧的门则开在另一堵墙上。在实际开工和买材料之前，这就是你家的原型图，在原型图上修改，总好过今后破费返工。

需要先考虑的特殊项目

有些特殊项目对格局影响很大，这些设施通常和水电有关。水电施工开始前，必须决定要不要买，以后再变卦会造成巨大的返工。

中央空调、新风系统装在吊顶里面，水管电线要提早埋好，而且还要打好空调孔。

地暖需要通电，而且对地面找平高度有影响，应该提早说明。

集成灶自带油烟机，油烟是往下走的，所以电源插座和排烟口的位置都和传统油烟机不同，需要改造。而且灶台下方空间有许多种可能，除了普通碗篮，还有的装了消毒碗柜、烤箱或蒸锅。尤其是烤箱功率大，对电线的粗细是有要求的，需要和水电工特别说明。

热水器打算买哪种类型的，也要提早想好。燃气热水器通常装在厨房，电热水器通常装在卫生间。如果是空气能热水器，那家伙太大，通常是放阳台或卫生间。还有少数房子具备条件装太阳能热水器。不同类型的热水器，水电铺设都不一样，要提早确定。

这点可以展开讲讲。家里要用到热水的地方有3处：厨房、卫生间、阳台。三者距离近还好，一台热水器全搞定。如果距离远，就要优先照顾卫生间，因为卫生间的用水量最大。在远处的厨房或阳台需要热水，未必要接一根长长的热水管过去，那样热水来得慢，也浪费资源，可以考虑用小厨宝解决。那么，当然就要给小厨宝留出相应的插座口了。我家厨房和卫生间近，阳台远，所以厨房和卫生间共用一台燃气热水器，阳台则装了个电热水龙头。

壁灯和局部功能照明需要考虑清楚，这些需要在墙上预留电源线路。

还有一些只和水有关的设施，例如浴室柜和马桶，打算买落地式呢，还是壁挂式？这就决定了排水口在地面还是墙上。

确定装修风格

接下来进入最吸引人的部分，思考整体家装风格。我得承认，这部分我做得挺失败。

探索方向

开始大量收集装修图片。要分区域整理，厨房就只看厨房，卧室就只看卧室。把喜欢的图片都分区域收集起来，拿给伴侣看。两人各自把不喜欢的图删了。剩下的图里，基本能锁定一种或几种设计风格。

再专门找这几种风格的图，把上面的方法重复一遍，删剩下的照片就可以确定一些重要细节。比如地中海风格厨房，橱柜做成白色还是蓝色；卧室刷白墙漆还是贴墙纸；客厅铺地砖还是地板。这些是大方向，找到两个人都能接受的方案。

除非真的情有独钟，不然没必要拘泥于某一种风格，风格之间是有交集的，比如地中海和美式就有重叠的部分。何况，我们所说的某一种风格，都带有中国本土色彩，不必较真，看着顺眼就好。我家就是个混合风格，同时能见到现代、地中海、北欧风格元素，而大多数物品的风格趋于中性。选择大件的建材家具时，只要避开风格过于鲜明的东西，总有办法搭配起来。而且偶尔一件物品打破既有风格，反而会很有戏剧性。

理解风格

自己规划风格时，需要把参考图里的风格特征逐一分解，观察共性，提取通用元素。以地中海风格为例：圆拱、圆角、白墙、马赛克、石材、铁艺、百叶……适当加入这些元素，地中海的感觉自然就出来了。

对于风格的理解，就是要多看图片。如果看过大量的美式风格装修图片，基本就能做到一看见这样的沙发扶手，就知道是美式风格的元素。

确定配色

经过这样两轮风格筛选，如果有意控制颜色数量的话，色调也基本可以确定下来了。做一份配色表，存到手机上随身携带，采购时可以准确对比颜色。实际上我是到买瓷砖时才开始考虑装修风格的，有点晚了，但配色表还是发挥了很大作用。我家是用亮色做主色的，比较正的蓝，有些蓝色的物品偏青或偏紫，虽然也很漂亮，但还是忍住了没有大面积使用，防止色系泛滥。

配色要把原木色也考虑进来，除了墙漆墙纸、沙发、窗帘，原木色也占了非常大的比例。木纹漆色跨度大，胡桃木和水曲柳木家具通常漆成深棕色出售。即使同为深棕色，也是一个偏红一个偏绿。稍微偏差一点，看着就很不协调，乱糟糟的。

这是我家的一大败笔，原木色泛滥失控了。所以……对我家的视觉效果不要期望太高。我建议，所有的大件物品原木色不要超过2种。在不违背最高目标的前提下，选择木纹家具要非常挑剔。

谨慎对待灵感

参考别处的设计风格时，不要觉得好看就照搬。餐厅、咖啡馆这些场所很有氛围，但往往有误导性，因为功能不一样。

举个例子，越来越多的现代餐厅会把天花板漆成深色。而在家庭装修里，深色天花板很罕见，严格说是比墙面深的天花板很罕见，用在家里会感觉压抑。同理，无论是色彩还是尺寸，在视觉上最好是上轻下重。比如组合电视柜，一部分摆在地面，一部分固定在墙面。假如吊柜比地柜还大，看着就有压迫感。

说回餐馆的黑色天花板，它可以掩盖裸露的梁和管道，同时不显脏。实际上，如果有明亮的灯光向下照射（餐馆）或者层高比较高（办公室），天花板几乎就是不可见的。家里却不能可能24小时灯火通明，天花板也近在咫尺。所以，公共空间的装修基本没有参考价值。

还有另一个例子就是各种开放式设计。开放式衣柜、开放式书柜、百叶门鞋柜、开放式橱柜……要时刻牢记我们生活在一个什么空气质量水平的国家，增加表面积真的就是自找麻烦，欧美日本的设计学不来。

做预算

预算充足，东西当然要买好些，严格对待品质。如果预算少，就不能太任性，控制预算免不了。如何控制？多数人认为硬装一定要好，软装可以随时换，要砍就砍软装。基本正确，但我觉得判断标准不是容不容易换，而是要把建材家具分成4个梯次，不重视的话会造成4种不同程度的损失：

危害人身安全（燃气热水器、燃气灶、开关插座等）
造成经济损失（防水层、水管电线、角阀等）
增添麻烦（油烟机、瓷砖、地漏等）
影响美观（灯、电视柜、窗帘等）

只要你不是给美观打了5分以上，基本可以按照这个梯次来砍。先按最高标准考虑建材家具，了解这些高端品好在那里，然后进入痛苦的减法环节。有取舍的情况下，才能了解哪些功能或特性是自己真正需要的。

砍预算同样不能忽视质量，因为廉价商品更容易出质量问题，省下来不一定就是赚到了。我买瓷砖时松懈了一下，没怎么挑。厨房的墙砖那叫什么玩意儿，质地粗糙，每片厚度不一样，铺完墙面都不平整。同样的价格，换一家完全可以买到更好的瓷砖。

YY出来的总预算

首先，初步确定总预算，不一定要有什么依据，根据经济实力，再结合别人家的实际花费YY一个也好。同学比我先装，家里面积90方，小两口自住。施工与选材都属于中等水平，总共花了18W。我家情况差不多，那就先定得紧一点吧。所以我家最初的装修总预算是16W，就这么来的，没有任何具体依据。

预算表

接下来就要开始列预算表了，这是自始至终要持续更新维护的重要文档。由于我家是半包，所以我把预算分成了四大部分：半包、硬装、软装、小玩意。我们自己能全盘掌控的，只有硬装和软装两部分。

半包的内容专业性太强，像我这样的装修新手往往是hold不住的。新手也不建议直接清包，必定考虑不周全，风险太大。从头到尾装完一遍，才能真正理解半包中的各个项目是具体做些什么。

而小玩意则是装饰画、调料罐、餐垫这类东西，需要就临时买，这已经属于生活的一部分了，仅做记录，不必做预算。

预算表做好之后，以我自己的实际情况为例，半包、硬装、软装三部分的比例大约为6:8:4。这个因人而异，比如对厨房有高要求，硬装的比例必然上升；如果痴迷于原木家具，软装的比例自然就高。具体某一项的预算价格怎么得出？只能花大量时间精力做功课，逛装修市场、刷淘宝。需要什么档次的东西，大概什么价位，不同品牌之间差价有多大。了解越细，实际开销的偏差就会越少。而且别漏了各种杂项：开荒保洁、物业收费项、软硬装辅料、还有大件物品运费和搬楼费。

可以把我的预算表作为一个起点，在此基础上增减项目。或许你会有一个疑问，为什么我的硬装是按材料分组，而软装是按空间分组？嗯……因为硬装的材料通常会集中买，瓷砖基本都在一两家店买齐，几个卧室的地板也往往是同一款，门和门把手也会配套买，所以按材料分组比较符合实际情况。相反，软装的自由度高很多，甚至同一张餐桌都可以配好几种不同的餐椅，按空间分组就可以做到非常细致。

修改预算

不过预算就是预算，做不到100%准确。要给自己一次修改总预算的机会，只有一次。使用这次机会的前提是，之前没有了解清楚，错估了许多东西的档次和价格，但这些确实是自己需要的，无法舍弃。也就是说，有充分的依据，才能使用这次机会，不是让你一时兴起提高或降低采购标准用的。

我就不得已把这次机会用掉了。到软装阶段才发现，之前功课没做到位，遗漏了大量辅料的预算。墙纸少算了粘合剂，窗帘少算了白纱和滑轨，还漏了纱窗、部分电器和安装费用。重新计算之后，总预算上升到了18.5W（果然，事实摆在眼前，同学家的18W不是白花的）。半包、硬装、软装三者的比例也最终锁定为6:8:5。

找装修公司/装修队

实际上，这个环节在确定格局的阶段就可以开始了，而且我也相信多数人都是这么做的。不过……这部分我没多少发言权。我并没有跑过几家装修公司，没有对比过各家的方案与报价。

我的情况比较特殊。有另一个同学和也买了这个楼盘，他自家亲戚是装修项目经理，于是我就搭了个便车，我们两家同时开工。项目经理以私单的形式接下来，和装修公司毫无瓜葛。

装修队用的半包材料大致了解了一下，材料比较靠谱，价格也是市场价，不省也不坑，图个安心。然而实在归实在，装修队有个共性，拖！他们手上从来都不止一两家在施工，谁催得紧就先做谁的。我们两家硬装装了大半年，这算是熟人的一个坏处吧，你实在不能拿他怎么样。

而且事后证明，这种野路子装修队确实还是不够专业。地面找平、水电安装这些见细节的地方都比较粗糙。即使是熟人，他只能做到在能力范围内尽量负责。但三分材料七分施工，师傅手艺摆在那里，所以结果并不理想。

施工

正式开工，施工采购顺序表就开始发挥作用了。每一步做哪些事情，该准备下个阶段的哪些材料，都有个清晰的参照。下面会按照时间顺序依次讨论，但在这之前，有一些总体的经验值得分享：

装修每进入一个新的阶段，都要拍一套照片，记录装修过程以备不时之需。比如你在思考衣柜布局，忽然记不起那个位置的天花板有没有横梁；或者你正在选购书桌，忽然想知道桌边墙上的插座大概有多高，会不会被桌子挡住。尤其重要的是在水电结束后，泥工开始前，拍照记下所有水电管线位置，防止以后钻孔误伤。我的照片就是按照这个顺序整理的，多拍照总有意义，会在一些意想不到的情况下给你提供重要信息。而且，需要看这些照片的时候你往往不在电脑边，所以放在云盘里才能起到作用。
许多隐藏式家具设计巧妙，非常节省空间。但要知道节省空间的代价，就是平时使用多费力气。而且这类家具对木工水平的要求很高。频繁使用的家具还是要选传统式，除非你家真的很小。不要觉得多开一次门没什么，等新鲜劲过去后，每天多做一个小动作都会觉得碍事。
记住一条，越复杂的东西，寿命越短。这是自然规律，无关商品质量。对于不爱折腾的人，许多先进玩意要慎重考虑，真的无可替代才买。
平板拖车建议买一台，解决大件物品最后100米的搬运问题。一个家的构成，远不止最终那些元素，还有些物品只在中间过渡阶段发挥作用。只要对整个工程有益，就不是白花钱。类似物品还有不少，例如梯子、工具箱、胶枪、电动螺丝刀。

接下来，正式进入施工的各个环节，了解各个阶段做什么，需要注意哪些问题：

拆改

拆改阶段会拆除旧装修、敲墙砌墙、敲飘窗、改门洞。即使是新交付的房子，墙面也需要铲掉，以后重新粉刷。格局改造完毕后仍然是毛坯的样子，看不出什么成果。空间格局的变化要及时更新到立体图上。

开始之前需要找些东西把下水管盖上或者套上，防止施工产生的碎石掉进排水管道导致堵塞，甚至划破管道，漏水到楼下。

这个阶段还可以把要打的孔都打好，考虑一下所有空调孔的位置，一次解决。

还有很重要的一点，现在虽然不着急买油烟机燃气灶、厨房水槽、还有嵌入式厨房电器，但是必须确定要买的品牌型号，主要是为确定尺寸。因为橱柜在这个阶段要买了，油烟机会影响吊柜布局，燃气灶和水槽会影响台面的开孔尺寸。而且正好，选定之后还有一段时间可以观察比价，等待促销降价再下单。

水电

水电阶段之前，需要和水电工碰一次面，确认所有的出水口、开关插座位置。大功率电器要特别说明，比如哪里准备摆烤箱，那么这个插座就需要用更粗的电线。壁灯、夜灯、壁挂音响位置也要特别说明，水电工会给你留好电源线。装修完成之后，我自己动手对调了两个插座的位置，才发现6分管里的铜线果然比4分管的粗很多，确实能承受更大的电流。

各个功能区域的电要独立划分，通过不同的开关来控制。一般来说可以这么分：照明一路、厨房插座一路、其他插座一路、每个空调单独一路、冰箱一路、地暖一路、电热水器一路、弱电箱一路。当然，按空间作更细的划分就更好了。

插座要多就不再强调了。需要特别提醒的是，厨房使用率高的人，一定要保证厨房所有插座都带开关。厨房电器用完之后，把插座的电源关上，轻松又安全。用过出租屋的厨房，每天需要拔插好几次插头，就知道这有多重要。

关于水路，就强调一点，每个出水口都必须经过角阀，不能水管直接接龙头，方便将来检修更换。

确认之后就开始开槽了，你会看到家里地面、墙面横七竖八都是线槽。这些管线就像这套房子的血管，设计再合理，也需要它们来为各个设备输送“氧气”。

水管电线铺好了，封起来之前要亲自验收一遍。每个房间仔细检查，确保龙头插座口没有遗漏和错位。我就没注意到洗碗机的问题，水电工漏了这个插座，瓷砖贴好才发现。后来只能把洗碗机电源线加长，插在一个很远的插座上。

泥工

泥工阶段会把各处线槽封上，做地面墙面找平，防水处理，铺设淋浴房挡水条。最后贴上瓷砖，并且安装地漏。

这里有一点要提前想好，家里用哪种类型的地板？地板下面是铺地垄还是水泥填平？地板的资料在后面的采购章节有讲到。因为这关系到找平层的厚度，最终目的是保持各房间地面处于同一水平面（不过卫生间可以适当低一点）。

我家就临时改了主意，原先计划用实木复合地板+地垄，后来出于耐用考虑换成了强化地板+水泥找平。图中可以看出，柜子都已经做好了，我又让泥工师傅来做了一次房间的地面找平。

卫生间刷完防水涂层之后，要再养一次水，拍照记录。这里要注意一下，淋浴房区域的防水一定要刷到顶，不特别强调一下的话，可能只会给你刷墙根一小截高度。瓷砖缝隙如果渗水，就会破坏建筑墙体。

有地漏的空间，找平还要注意一点。地势要略微向地漏处倾斜，否则地面会产生积水。我家卫生间有个角落的水就流不出去，好在那在淋浴房之外，一般不会有水。

瓷砖铺上，虽然仍然是乱糟糟一团。但是，家的模样，第一次有了一点想象空间。我家阳台用了一种看起来像地板的瓷砖，倒是挺适合这个狭长的空间。

还有门槛石和窗台板需要泥工来铺贴，不过这两样可以在后续的阶段完成。

另外，厨房瓷砖贴完之后，就可以约人来安装燃气表了。

木工

木工阶段主要是制作吊顶、柜子、榻榻米、飘窗。如果有什么特殊的需求，也可以和木工师傅商量实现。与我一起装修的同学，就请木工帮忙做了一张梳妆台，向上开盖，盖板内嵌了一块镜子。

衣柜的制作、组装与固定。我家所有的衣柜都是木工打的，包括衣帽间里一整面墙的衣柜。木工制作衣柜的一大优势在于材料环保，木工使用的板材和成品衣柜的不同，污染要少得多。

衣柜内部的构造可以自己设计，装修公司的设计师也会帮你考虑。如果没有什么特殊的要求，这方面其实可以放心。木工是装修各个工种里对尺寸最敏感的，他们做出来的衣柜，构造通常不会有实用性问题。

飘窗也是木工师傅做的，储物功能很强大。

客厅装了风管机，所以吊顶是必须的。房间里就只做了简单的直角吊顶，主要是为了掩盖房梁。

我还特别请木工做了一个门洞造型，两侧是两个卧室门，以后打算在这里挂装饰画。

有的人也会倾向于让木工打造电视柜，并且是一整面墙超强收纳的那种。在此提醒一下，对待电视的尺寸要有长远的眼光，电视这个东西永远都不嫌大，不能在做电视柜的时候把将来换大电视的机会给堵死了。

油漆

油漆阶段比较枯燥，腻子粉、乳胶漆，一遍又一遍。但是，这个阶段要采购的东西最多，请参考施工采购顺序表，这里不详述了。

我家用的都是白色墙漆，可以看到各处正在逐步成型。

如果家里要用到石膏线，就要在油漆阶段安装，连同墙面一起粉刷。

全屋刷完漆，家里显得非常宽敞。不过这是错觉，等到家具入场，就该面对现实了。卷尺不会说谎。

有一点要注意，乳胶漆会滴得到处都是。所以各种建材家具的包装纸箱要留好，别急着扔。把它们割开铺在地上，防止油漆滴落在地砖、地板上，也可以保护地面不被重物砸坏。

安装

这个阶段的工作由水电工完成，会安装所有用到水电的设施，例如开关插座、龙头角阀、马桶台盆，另外还有墙面的挂钩。整体橱柜、房门、地板也都可以联系商家上门来安装了，还有燃气灶、洗碗机这些固定式家电。而且可以找燃气公司上门点火了。

其中厨房和卫生间的东西比较复杂，牵扯到电、水、燃气，安装顺序不对会惹来许多返工。我在文末的施工采购顺序表里已经整理好了。

热水器、橱柜、房门、陶瓷品、灯具、墙纸……又多又杂，这个阶段几乎每个周末都要往新家跑。

安装时水电工一定要盯紧，亲自去现场监工。不仔细的话会出一些问题，虽然功能完好，绝对能逼死强迫症：冷热水角阀装反、开关状态装反、开关面板装歪、开关上下装倒、方形灯装歪。还有最不长脑子的，灯罩里带着一堆泡沫碎屑就给你装上去了，一开灯里面全是黑点。

该较真时得较真。比如开关状态装反的问题，开成了关，关成了开。我家的水电工说没法解决，开关就两个状态，一根地线一根火线，没有第二种接法。我和他争了一会儿，让他尝试把开关拆下来，打到“关”的那一档再装回去，果然就正常了。

照明要重视，不是说灯要多漂亮，而是要充分考虑功能照明，频繁使用的区域要消灭照明死角，这需要在水电阶段就留有电源线路。所以值得再强调一次，在水电施工之前一定要仔细考虑好，哪些地方、哪些设施要用到水和电。吸顶灯这类标准设施，水电工会为你考虑。至于壁灯和这些细节处的功能照明，你若不说，他是不会给你预留的。

还有，如果打算在厨房墙上安装支架，用来搁微波炉或烤箱，那就需要早点选定微波炉，在最终安装前买回来。因为它决定了支架的打孔位置和间距。

我留了个示意图，标注了大致位置，微波炉就摆在旁边。当然，装修工人还会再精确测量一遍尺寸，最终把支架安到墙上。

采购

采购与施工同时进行，先分享一些总体经验：

刚开始选购建材家具往往无从下手，后来我逐渐找到了套路：① 查资料了解基本知识。 ② 先跑一趟，看最好的产品，了解优点，验证查阅到的信息。 ③ 确定大方向：档次、材质、结构，做些取舍。 ④ 再跑几趟，比价下单。
淘宝是个好东西，对于一些网上查不到的细节问题，尽管去问商家客服。虽然客服也未必懂非常专业的问题，但问了5、6家之后，心里应该会有自己的答案了。
装修团购会我一次也没去过，信不过这种形式。手握流量，责任却很模糊。商家必须为自己的产品负责，团购会却不必。可能有少数商品物美价廉，但如果你不是奔着它们去的，余下的几乎都是滞销品，或是搭售一些鸡肋商品。售后也令人担心，由于参与的角色太多，会场、团长、商家三方有踢皮球风险。东西迟迟交付不了拖延工期更是大问题，会完全搅乱后续计划。在装修这件事上，时间能直接转换成金钱（房租）。
家具城的东西往往以中高端产品为主，轻轻松松超预算。但是趁节假日去逛逛，会有意想不到的收获。我家的地板就买了一个大品牌的促销款，目前来看，品质与服务都没有缩水。
同时也要关注各家电商的优惠活动，尤其是电器类。一些购物比价工具很有帮助。电器是标准件，同一款电器各家货都一样，这些工具可以看到当前谁家的价格最低。还能看到历史价格走势，了解此时的价格处于什么位置，顶峰还是低谷。

大部分的建材家具选购，网上都有非常详尽的资料，只要善用搜索引擎，足够解开大部分疑惑。

下面要列出的资料没有覆盖方方面面，都是我自己查阅研究收集来的信息。有些没什么悬念的东西就没写进来，比如瓷砖就看那么几个方面，而且说实话，如果不放一起对比，新手很难看出名堂。还有一些我没买的东西也没写进来，比如我家用的是燃气热水器，就没去研究电热水器。当然，这些只关乎物品本身，至于所谓的行业猫腻，那就见仁见智了，遵从内心就好。

除此之外，也有一些东西的信息很混乱，商家各执一词自相矛盾。这些物品的信息我也重点收集研究了。请忽略其中的品牌曝光，只看基础知识，供参考：

地漏

地漏有水封与气封两种方式，水封又分浅水封与深水封，气封也有好几种不同原理。没有哪种一定是最佳选择，不同地方需要不同类型。常年大量排水的地方，和基本不沾水的地方，选择的地漏侧重点就不同。具体请看这篇文章：

http://www.dajia365.com/article/97dd4db9449092c2.html

开关插座面板

开关插座面板有一些标准形式，这几篇介绍得很详细了：

http://tieba.baidu.com/p/3251622973 http://www.dajia365.com/article/7c4e032151b68670.html http://www.kaiguanchazuobar.com/kgcz-zhishi/32.html

五孔插座的两相孔与三相孔之间距离要大，避免插头打架的尴尬。如今的插座其实设计已经比较周全了，但还是要务必确保有安全设计。有安全设计的插座，只有每个孔都同时都有物体插入时，安全口才会打开，金属器件才会接通。如果孩子只拿一根铁筷子捅是基本上捅不进去的，会被一块绝缘板挡住。

淋浴房挡水条

安装方式有预埋和不预埋两种，这是安装顺序问题。预埋就是先固定挡水条，再在两边铺地砖。不预埋就是后期把挡水条用玻璃胶固定在地砖之上。不预埋对地面和地砖平整度要求比较高，胶也要密封好，否则时间久了玻璃胶老化开缝，容易漏水到外面。预埋一般不会漏，但一旦漏到地砖下面，那就是大问题了。新家装修通常还是会选择预埋，千万做好防水。

挡水条材质通常是PVC或大理石。当然坚固耐用还属大理石，大理石是一整条实心的。而PVC的挡水条是中空的，需要在其中灌注水泥。

挡水条的形状有两处细节值得注意：裙边与胶槽。如果用玻璃淋浴房，裙边有没有都不影响。但如果打算用浴帘，有一条裙边挡水效果会好那么一丢丢。至于胶槽，不预埋方式能起到一些作用，预埋就无所谓了。

http://www.homevv.com/gonglve/201512/08488.html

橱柜

橱柜这货要专门花点功夫来讲，太乱了，研究了老半天才搞明白。其中容易搞晕的就是橱柜的基材和表面材质，太多种名称混淆视听，其实就那么几类。下面梳理一下名称及特征，具体性质与优劣比较，网上查下就好。了解这些概念，基材和表面材质是没有可比性的，有的商家很爱拿这些概念避重就轻。

首先看基材，其中许多材质在其他地方也会遇到，例如门、衣柜、沙发、桌椅，区分清楚很有必要。

图中从上至下分别为：

密度板：整个就是由木纤维、胶、和其他材料混合起来的板材，通体细密均匀。
刨花板：商家喜欢美称为实木颗粒板，其实和实木差老远了，内部由木屑与胶构成。
多层板：也叫胶合板，多层实木粘在一起构成的板材。
木工板：也叫大芯板，两片薄木板之间夹着拼接木条构成。木工打造的家具通常用的是这种板材。
实木板：实木就是实木咯，那么多种木材，没仔细研究。不同树种的木材，质量差别可以很大。相关资料找到一篇，供参考。 http://weibo.com/p/23041814d60c0640102vrz8

这还有一篇关于各种基材的资料：https://www.zhihu.com/question/24520029

再看门板表面材质：

UV板：一种表面平滑的材质，由液体漆固化在基材表面而来。
烤漆板：这个不容易混淆，汽车、钢琴表面的那种材质。
三聚氰胺板：商家会避讳三聚氰胺这个名称，称其为双饰面板、生态板，用带有颜色或纹理的纸浸泡在树脂中，然后干燥固化，通过热压固定在基材表面。（实际上三聚氰胺用在建材上是没什么危害的，再正常不过的一种材料了）
吸塑板：和三聚氰胺板原理类似，但是表面层更厚，材质也不是纸，可以做出各种立体纹理，而且能够无缝包裹，不需要包边。
亚克力板：商家喜欢美称为水晶板，也叫有机玻璃，当然其实是一种塑料，和水晶没有半毛钱关系。
晶钢板：本质上是钢化玻璃，用胶固定在基材上。基材也往往不是木材，而是金属。
防火板：这个是非常低端的东西，家庭装修通常不会用的。装修市场里没见谁家卖过，应该可以忽略。

模压板则是另一回事，这是指一种加工方式，用模具压出特定形状，与材质无关，不过一般都是指吸塑板。

橱柜设计时为冰箱预留空间，一定要以冰箱门打开时的尺寸来算。比如，60cm宽的冰箱，留60cm显然是不够的。想象一下，冰箱门只打开90度是拉不出抽屉的。门的角度再开大一些，就一定会超过冰箱本身的宽度。

另外，水槽柜内潮气很重，对柜体的侵蚀很厉害，而且东西质量再好也不能保证不会哪天漏一柜子水。所以一定要铺上铝箔纸，这是最后一道防线，减少一半以上的损失。

淋浴房

淋浴房有两个疑点，我至今没找到足够权威的解释：

五金件材质有铜、不锈钢、铝合金。多数商家说铜的更好，但也有一些商家的不锈钢款普遍比铜款价格高，而且其中还有知名品牌。从物理特性来说，纯铜防锈蚀能力强于不锈钢，硬度稍次，理论上还是铜的更好。但这些店不锈钢款反而比铜的贵，我猜质量差的铜很可能还不如劣质不锈钢，水比较深，实在搞不懂，建议不要贪便宜。
平开门淋浴房有合页和天地轴两种，玻璃的受力位置不一样，众商家也是各有说辞。 左：合页；右：天地轴。请注意开门旋转的连接位置。 德立的销售员明确表示他们不做天地轴的，因为容易下坠自爆，不如合页安全。市场上天地轴的淋浴房更多出现在中低价位的商家中，然而在这些店里，天地轴却比合页款更贵，商家也非常自信的说这种更好。感觉上天地轴的结构似乎更牢固，但还需要深入研究合页和转轴的内部结构才能有结论，我没找到这相关资料。不过有一点差异可以明显看出来，同样宽的门，合页式的门洞一定比天地轴的宽。

淋浴房的其他方面资料，这篇知乎讲得比较详细：

https://www.zhihu.com/question/24903820

地板

地板的讨论点基本就围绕三种类型的选择：实木地板、实木复合地板、强化地板。三者很容易比较，价格与环保程度递减，耐用与易打理程度递增。具体详见此文：

https://www.zhihu.com/question/34004791

燃气热水器

燃气热水器常见的有强排式、平衡式，这是指排气方式。

有的商家会和你说恒温式、冷凝式，那其实与排气方式无关，是另外两种特征。恒温式会通过自动调节水量、气量来保持恒定温度。冷凝式会对燃烧后的高温气体二次利用，用它对冷水进行预加热，也能起到一定的恒温作用，但主要是节能。

这里尤其注意冷凝式，虽然这种比较节能，但是会多出一根冷凝管。冷凝水需要从污水管排出去，这一根细管子的废水怎么排，需要考虑清楚。

http://www.dajia365.com/article/d52d55d20d8a99b4.html http://www.rinnai.com.cn/news/detail/id–62.html

厨房移门

移门能看的地方不多，基本都在这里了：

http://m.club.sohu.com/zz0277/thread/10se6surdcc

马桶

马桶内的釉面越光滑越好，一冲就干净。

冲水方式有直冲与虹吸两种。直冲就是全凭水的重力，虹吸更多会利用水封产生的气压。还有一种喷射虹吸式马桶，是在虹吸原理的基础上增加一个小喷水口，加强冲力。

水件也非常重要，大品牌的马桶也要确保水件是官方的。马桶最先坏的地方往往就是冲水按钮，按下去弹不起来、弹起来不注水，都是很常见的问题。我住过的出租屋有一半马桶出过这些问题。

马桶的排水有地排和墙排两种。墙排的不多见，对墙体的承重能力有一定要求。地排马桶比较稳妥，而且最好装在原户型的排水口位置，尽量不用移位器，密封性会更可靠。

去选购马桶之前先量好孔距，就是指排水口中央到最近的墙面的距离，商家需要根据这项数据，帮你确定合适的马桶。

http://weiyu.pchouse.com.cn/41/419033_all.html http://home.163.com/13/0704/21/92VJ650O00104K9K_all.html

筒灯与射灯

筒灯照射范围广，通常用作走廊照明或者客厅房间的补充照明。射灯照射范围很集中，而且有些射灯能手动调节照射角度，主要用来照亮局部，比如装饰画、花瓶之类。

http://www.eeworld.com.cn/LED/2015/0328/article_11941.html

衣柜门

基材常见的有3种：密度板、木塑板、刨花板（商家称实木颗粒板）。其中刨花板只用于平板门上。如果要做造型，例如假百叶或雕花，那就一定得用前两者。

木塑这种材料之前没提到过，下面两篇文章中有一些定义与讨论：

http://www.dhmyjgc.com/display.asp?id=717 http://www.hualongxiang.com/simple/?t10164871.html

浴室柜

浴室柜排水方式也分墙排与地排两种，与马桶类似。常见的材质有PVC和板材，板材通常是实木。千万要注意避免商家以密度板充数，这种材料放在潮湿的卫生间极易吸水膨胀变形，这是最怕水的板材。

http://www.guizhicui.com/zhishi/324.html

LED照明

首先要了解LED灯的发光原理，还有由此带来的新问题——蓝光过量。当然，其危害并没有那么夸张，光线太暗、色温不合适等因素，同样会伤害眼睛。使用不当造成的伤害，比这严重多了。

http://digi.163.com/15/0817/10/B17CNRDG00162OUT_all.html

灯首先考量的还是照明能力，还有许多更专业的参数，这篇知乎里有详细讨论：

https://www.zhihu.com/question/20043507

但是现实情况并不理想，网上的灯几乎看不到流明、显色性、散热能力方面的描述，能比较的就只有个瓦数、色温。所以普通消费者除了造型，也实在没什么好比较的。如果勤快点，直接去实体店里亲自感受，应该会有更深刻的理解。我还是懒了一下，直接网购了。

关于照明设备的选购，我说说自己的理解。家庭照明，从功能来分只有两种，要么照亮整个空间，要么照亮局部空间。几乎每个房间的吸顶灯都是前者，最主要的光源。但餐厅是个例外，餐厅功能很单一，需要照亮的地方就只有餐桌。我家多数空间都选了造型最简单的LED方灯，这样能够均匀照亮整个空间，不产生多余的色彩和阴影。方灯的光线向四面八方发出，无论站在哪个角度，通常都不会去直视它。造型单调点倒也不是什么大问题，顶多少了几句客人的赞美而已。

床架

床架分许多种类，常见的有皮质、木质、布艺、金属。这些是床架的表面材质，内部的核心承重材质一定是木质或者金属。

金属床架很耐用，而且无污染，但是造型有定式，难以实现封闭空间，所以往往不带储物功能。

木质床架还分为板式床架和实木床架。板式床架主要由刨花板等人工板材制成，环保和耐用性差一些，价格低，造型多变。实木床架也非常耐用，而且环保，价格较高，造型相对单一。实际上实木也分许多树种，质量差别也很大，商家比较推崇柚木、胡桃木。质地较软的树种，例如松木，倒不见得比板式床更结实。

这篇答案中有许多关于木材的详细情况，比之前橱柜部分讲得更详细：

https://www.zhihu.com/question/24335160

并非所有的床架都只用单一材料，也有的床混合了多种材质。比如关键承重部位用实木，侧板用人工板材，靠背则用的皮质或布艺。

床垫

床垫常见的种类有弹簧、棕、记忆棉、乳胶。但并不是说弹簧床垫里面只有弹簧、乳胶床垫里面只有乳胶。床内部通常都分3层，最里面是弹簧层，向外是铺垫层，最外面是面料层。还有少数全棕床垫，那是真的没有弹簧，另当别论。

铺垫层就是床垫分类的由来。这层主要是棕，那销售员就会告诉你这是棕床垫；这里如果主要是记忆棉，那销售员就会说这是记忆棉床垫。不过，铺垫层也未必只有一种材料，也有多种材料层叠使用的。各种材料从硬到软排序为：棕 > 记忆棉 > 乳胶。有些床垫还是两面用的，弹簧层两侧的铺垫层用的是不同的材料。其中棕床垫要特别提醒一下，和小时候见到的棕绷床不是一回事。现代的棕床垫做法不同，用胶把棕丝粘合在一起，压成紧密的板层。还有另一种工艺是全棕丝捆扎编织，不用胶粘合的。

弹簧层常见的有两种：一体式弹簧、袋装弹簧。一体式弹簧价格较低，但有一个相互影响的问题，你翻身时也会影响到伴侣那一侧的弹簧，一些响声比较大的老式床垫往往都是这种。袋装弹簧每一根都相互独立，是如今的主流。袋装弹簧还有一个分区的概念，把一张床垫里所有的弹簧切分成若干区块，不同区块使用软硬不同的弹簧。比如头部区、腰部区用硬弹簧，肩部区、臀部区用软弹簧，背部区、腿部区用硬度适中的弹簧。分区越细，局部支撑越合理，价格自然也越高。常见的是3区、5区、7区。

整个床垫的软硬程度，受铺垫层和弹簧层共同影响。而且软硬也不是一个单一指标，铺垫软弹簧硬，铺垫硬弹簧软，感觉很不一样。

这篇知乎里的几个答案介绍得很清楚了，以上是我的总结提取。当然，最重要的还是亲自试试：

https://www.zhihu.com/question/20645726

沙发

家庭沙发首要考虑因素就是舒适，所以要根据自己的身高和习惯去实体店试坐，然后得出2项适合自己的关键数据：坐深、靠背高。虽然这两点都可以用靠垫来调节，但效果不如沙发本身稳定可靠。

例如我本人身高167cm，试坐了一些沙发后发现，最让我感觉舒适的坐深是50-55cm。浅了的话大腿与沙发的接触面积缩小，压强增加，更容易累。深了的话，腰部缺少支撑，如果加靠垫，颈椎又总是弯曲受力。

女朋友身高和我相差不大，她有一点需求非常明确，希望头可以靠在靠背上，而且不能用头枕替代。头枕不能固定而且太软，所以一定要买靠背在60-65cm的高背沙发。网上先搜了下，发现是个难题，我们想要带贵妃椅的组合沙发。然而搜索高背沙发通常都没有贵妃椅，而且风格明显偏向于古典欧式、中式、美式乡村，不易搭配。

带着几项基本需求去逛建材市场，发现符合要求的沙发比想象中多，许多商家都提供定制款，布料、高矮、宽度随你换。

确保坐姿舒适，其次才是材质、风格、颜色等因素，不能为了后者牺牲最基本的功能。这些方面的资料网上很多，已经非常全面了。

另外，不要过于迷恋储物、沙发床类的功能，除非真的需要。因为要加上这些功能，坐垫下面就必须是硬板，坐感会大打折扣。

窗帘

除了美观、手感等个人喜好之外，有一点挺值得琢磨的——安装方式选择窗帘杆还是轨道？

窗帘杆：简单，如果没有窗帘盒，窗帘杆直接暴露在外面肯定比轨道好看，也不必像轨道那样多加一层帷幔。不过窗帘杆有个长度上限，杆太长容易变形，所以如果窗帘特别宽，就要做成两根杆了，两片窗帘之间难免有缝隙。以这种方式安装，窗帘的拆洗比较麻烦。

轨道：灵活，轨道可以轻松做成L型，对于有折角的窗户，能够做到转角处一片窗帘无缝遮挡。轨道式安装，窗帘是通过挂钩挂在上面的，拆洗很方便。如果要做多层窗帘，比如一层遮光一层白纱，那么轨道更省空间。

加装白纱帘要注意窗帘盒的宽度，够不够装两根轨道，而且距离要足够远。如果窗帘盒不够宽，宁可放弃白纱帘。因为两层窗帘挤在一起，相互摩擦会阻碍轨道轮的滑动，导致滑动不顺畅或者声音很大，得不偿失。

窗帘也不仅仅只有这两种，还有卷帘、扇形帘、百叶等做法，不过这些通常适合用在较小的窗户上。

微波炉

主要区分平板与转盘两种类型：

http://homea.people.com.cn/n/2014/0720/c41390-25304297.html http://info.homea.hc360.com/2009/09/071055446471.shtml

还有经常听到的光波炉，通常是微波加热再外加灯管加热，算是半个微波炉半个烤箱吧。就是一种差异化产品而已，没有宣传吹得那么先进，也没有谣言说得那么可怕。

https://www.zhihu.com/question/28411025 http://www.guokr.com/post/373417/

电视

电视机本身的选购没什么好讨论的，各有所爱。但是选择电视要连带考虑很多其他问题，这些都关乎使用电视的目的与方式，最后才是选择电视机本身。

首先要了解家庭电视信号源的几种常见形式，可以多种混合使用：

有线数字电视：由广电提供电视信号，直播为主，点播内容有限，而且要付费。但清晰度与稳定性最佳，而且这是专用电视线路，不影响网速。
网络运营商IPTV：运营商推出的网络机顶盒，常常跟随家庭宽带一起搭售。直播与点播兼具，直播内容与有线数字电视差不多，点播内容则更丰富些。虽然共用网线，但不占带宽。不过麻烦的是需要专用线路，据我所知，电信的IPTV必须直接接光猫才能放出节目，中间隔了路由器就不行了，所以你家的网络拓扑结构会搞得很复杂。
互联网机顶盒：最灵活独立的设备，点播内容最丰富，直播也可以通过第三方应用实现。这个就会影响网速了，说白了只是一台Android电脑主机。智能电视和这个是同一个道理，相当于盒子放到电视里面了。

关于尺寸。网上很多距离与尺寸对照表，可以参考对照。但是，不要被这些规则限制死了。如果就是喜欢大屏幕，超出比例也没什么不可。我家电视屏幕到眼睛的距离大约3m，我买了58寸的电视，看着很爽，也并没有觉得太大。

关于4K。这年头的电视好像不是4K就不好意思和人打招呼，但是首先要搞清楚自己使用电视的方式。如果只是看看各电视台的直播节目，电视有没有4K不重要，因为这些节目内容本身都没有那么高分辨率，1080p都没普及，还早呢。如果常看互联网应用的点播电影、电视剧，那4K也没多大作用，网速是个坎，即使这些平台哪天真的支持4K内容，你家网络也不一定吃得消。不过对于喜欢下载搜罗4K片源，用移动硬盘来播放的朋友，那4K电视是有意义的，而且HDMI接口最好是2.0的，它支持更高的帧速率。

关于HDR。很美好的技术，在亮度上增加画面层次，可以明显感觉到阴影与亮光处细节更加丰富。但是，很长一段时间内几乎都别想看到HDR的片源。这个功能有就更好，没有也不必强求。

关于盒子。我也纠结了好一阵子，是买传统电视+盒子，还是买智能电视。其实这根本就不是个问题，就像现在30多万买到的车基本都是自动挡，想买到手动挡的都难了。自家用的电视不会买太差，这个价格基本都是智能电视了。那智能电视是不是就不需要盒子了？恐怕也未必。我不知道是不是所有智能电视都如此，至少我买的海信智能电视是半开放式的，它自带的应用市场东西非常少，而且没有直播类应用。里面也搜不到任何第三方市场、文件管理器、浏览器，U盘插上去也读不出.apk文件，就是不想让我装其他市场的应用。所以我还是买了个盒子。还有一点，电视本身的内存还是略小了，Android系统啊，内存不到一定大小是没法用的。

洗衣机

滚筒与波轮的特点与区别：

http://post.smzdm.com/p/310/

如果不想研究，只需要几个笼统的标签来区分滚筒与波轮，可以这么理解。

波轮：便宜、省电费水、洗衣快、较伤衣服、重力排水滚筒：贵、省水费电、洗衣慢、保护衣服、电机排水

这是滚动洗衣机的一些细节：

http://post.smzdm.com/p/366/ http://www.360doc.com/content/11/1024/14/366037_158690274.shtml

关于洗衣机的容量要提醒一下，滚筒和波轮洗衣机的容量没有可比性。比如我新家的滚筒洗衣机容量是7公斤，从前出租屋里用的波轮洗衣机容量是4.5公斤，但实际上两者能塞进的衣服差不多。容量与数字并不完全成正比。

入住前的准备

装修完成之后，虽然装修公司或者装修队基本不会再露面了，但你仍然有许多事情要做。

验收装修

检查一遍是肯定要的，可能出现问题的有下面这些地方：

电器都插上电，试试能否运转。
两相插座都试试有没有电，带上手机充电器就可以检查。三相插座可以用接线板来检查。空调的16A插座比较特殊，只能直接试空调了。
检查所有照明设施是否正常。
看看所有开关的控制逻辑对不对，卧室的灯能不能在门口和床头多处控制。
把每个龙头开到最大检查，看看水流是否够大。
检查每处地漏下水是否正常，够不够快。（不过下水速度也和地漏的种类有关系，只要不是太慢，那通常是正常的）
检查瓷砖有没有碎裂和脱落，瓷砖缝有没有漏填的。
房间门、柜门的开合是否正常，有没有松动，或者发出很大噪音。
墙面有没有裂缝。

发现问题拍照记录，联系装修公司或商家解决。

开荒保洁

装修后的第一次打扫叫做开荒保洁，与普通的家庭保洁不同，劳动强度也更大，当然价格也更高。这件事通常还是请人来做，自己做确实很累。

开荒保洁主要做这么几件事：

擦窗户，尤其玻璃的外表面，沾了厚厚一层装修粉尘。
清理地面，铲掉地板、地砖上沾到的乳胶漆和各种胶。
清洁柜体，把衣柜、鞋柜、酒柜、橱柜内部打扫干净。
常规清扫，像日常打扫那样扫灰、抹地。

铲乳胶漆的确是个体力活，如果油漆阶段保护得好，现在就可以省不少力气（或者是钱，有些家政公司的开荒保洁项目，会根据地面的污染情况浮动价格）。不过也别指望开荒保洁做得太仔细，像地脚线、开关面板上面沾到的乳胶漆，他们很可能就直接忽略了，需要特别叮嘱一下。

家里备着一把梯子，让保洁阿姨能够到柜子的高处。

散甲醛

甲醛主要来自后期购置的活动家具。相比而言，木工打造的柜子，用的板材要环保的多。确切地说，甲醛主要来自胶中，越完整的板材，胶越少，甲醛也越少。像密度板这种完全搅碎重塑的板材，甲醛含量是最高的。而多层板只有每层之间有胶，甲醛含量就少很多。

为什么说是散甲醛，而不是除甲醛。因为家具会随时间流逝持续散发甲醛，只有到了空气中，我们才有办法对付它。我们能做的，只有加速这个过程，尽早让家具把大部分甲醛都散发出来并处理掉，让空气中的甲醛浓度越来越低，低到一定水准，就对人体无碍了。

要降低空气中的甲醛浓度，有4种原理：

通风：开窗透气，这是前提。如果不通风，无论甲醛变为哪种形式，都没有离开家里。
水溶：甲醛极易溶于水，所以增加空气湿度是个好办法，加湿器、绿色植物属于这种原理。植物除甲醛并不是因为某些植物爱吸甲醛，没有植物会放着二氧化碳不吸，去优先吸甲醛。而是植物的蒸腾作用会增加空气湿度，让空气中的甲醛溶解在水蒸气里。所以除甲醛的植物不是看品种，而是看蒸腾作用强不强，绿萝这样的大叶片植物效果当然好过仙人掌。
吸附：可以用细密的多孔材质来吸附甲醛，活性炭属于这种原理。但吸附只是把甲醛分子固定在这些物质表面，要把它们除去，还得定期把活性炭拿去阳台上晾晒，或者直接扔掉炭包。其实家里的窗帘、沙发套等布料，也属于多孔材质，不过孔远没有活性炭那么细密，吸附效果也差多了。所以，这就是为什么窗帘虽然不含胶，却也会散发甲醛，这是二次污染导致的，洗窗帘对除甲醛是有意义的。
化学反应：让甲醛与其他物质发生化学反应，变成对人体无害的物质，光触媒属于这种原理。喷在家具表面，与挥发出来的甲醛发生反应，能够在一段时间降低空气中的甲醛浓度。

但是原理归原理，后三者的实际效果都远远不及通风。比如说鞋柜这样的密闭空间，板材在持续释放甲醛，当空气中甲醛达到一定浓度，就饱和了，板材就不会再释放了。此时无论是让甲醛溶于水中、吸附在炭包上、还是发生化学反应，都比不上直接敞开鞋柜门，让里头的空气跑出来。

所以，如何通风，是最该花心思的地方。如果能24小时开窗那是最好的了，我家就是这么做的，没有采取其他任何措施。实际检测也表明，通风效果好的空间，甲醛浓度确实低得多。

为此，我用纸板做了一种百叶窗，固定在窗户上。能够在保持一定通风效果的情况下，做到24小时开窗，同时防止雨水进来破坏地板和墙面。

百叶窗的做法、效果与注意事项，请看这篇文章：https://victor42.eth.limo/post/3515/

细节处理

最后，还有一些零碎的小事情。

可以换个好一点的防盗门锁。
装上门铃和物业提供的呼叫系统。
用泡沫胶封上废弃的孔洞，尤其是通向户外的，防止鸟类与老鼠进入。
观察阳台的落地玻璃，有没有会漏雨的缝隙，用玻璃胶堵上。我家的两片落地玻璃之间缝隙很大，铁栏杆离玻璃也有一定距离，关了窗都能感受到冷风往室内灌。 玻璃胶打得像狗啃的一样……不过等干透之后，用小刀割一遍就平整多了。

设计成果展示

最后，到了上图时间。看看最终的设计成果，在真实的生活场景中是一番什么模样。以下图片的拍摄时间，是在我正式入住新家4个月后，已经完全适应了为自己打造的新的生活环境，用起来总体感觉很顺手。

客餐厅

进门首先看到的就是客厅。茶几乱糟糟的，我没有刻意打扫，这就是日常生活的真实状态。

椭圆机本来不打算摆在客厅，觉得挡住了交通要道，当初设计时就没在客厅留健身器材的空间。和女朋友辩论了几回，她就是不肯在运动的时候看一会儿iPad，一分钟都离不开客厅电视。转念一想，如果按原先设计放到多功能房去，她这个懒癌coach potato真就不会经常用了，那椭圆机的作用就大打折扣了。好吧，还是放客厅。

沙发背后的石膏线区域内贴了墙纸。为什么背景图不做在电视那一面，嗯……因为我这个储物狂人总希望给将来的收纳留些余地。如果以后东西再多起来，电视机上方的墙面得装吊柜或者搁板。

所以电视也没有挂在墙上，直接摆在电视柜上面。

电视柜上的一瓶装饰花，假花。

餐厅的餐边柜，马赛克瓷砖的区域还有灯光照明。本来打算在这摆一些装饰物件，小贝壳、木器之类的。在此生活了4个月之后，果断不舍得把这么顺手的位置让给毫无用处的装饰品，统统给我放到犄角旮旯的地方去！于是这里完全被生活用品和零食占据。

这就是我之前说的交通要道，通向主卧与次卧的唯一走廊。发现没有，我家一大特色就是这个蓝色的马赛克地脚线，我们戏称为“泳池”。

餐厅的布置。4把椅子特意选了灰、蓝、棕三种颜色，基本是按照配色表来的。那幅挂画的背后是电表箱。

餐厅吊灯是家里唯一有装饰效果的灯。其余空间的主灯全是LED大方盘子。

厨房

厨房进门的第一眼画面。这是灶台的一侧，这边的地柜是正常尺寸。

灶台对面是操作台，中间相连的是水槽柜，整个厨房最值钱的家伙就在这里——水槽洗碗机。操作台的地柜比较浅，只有35cm深。没错，我家这么小个厨房居然也做了U型橱柜。我真是个储物狂人……

各种角落空间都不放过。

这个白色5层推车的尺寸真的刚刚好塞进去，可以精确到1cm内。

切菜区域，上方有功能照明。

这算是个厨房神器了，不用打孔，吸得很牢。说真的，厨房的墙面要是利用好了，储物能力至少提升20%。

卫生间

卫生间大胆使用了我家的主色，大面积使用。我家的设计风格可以粗略分解为60%现代+25%地中海+10%美式+5%北欧。这个象牙白的浴室柜有点不一样的情调，正是家里少有的美式风格家具。

淋浴房花洒与置物架。

从淋浴房往外看。

门口的毛巾架。

淋浴房的特殊造型地漏，很有点小趣味。这家伙价格不菲，但装上去用几十年，想想还是买了。

多功能房

卫生间的隔壁是多功能房。这是个朝北的房间，暂时没有给它规划具体用途，也不打算住人。

其实，它还是有一个最基本的功能——衣帽间，一整面墙的衣柜啊！这个房间以后可以根据需求临时改造为玩具房、琴房、画室、书房，这都是以后的事。

平时不用的落地扇也放在这里，给他俩套上了蠢萌的防尘罩。

阳台

这是我家最不满意的空间，不过不是指装修，而是对户型不满意。我家阳台是个相当狭长的空间，好像智利的国土，只能刚好满足生活阳台的功能，休闲阳台就不要想了。

为什么刚才的洗衣机背后有一块挂帘？因为后面的水管和窗户实在太丑，窗外是客厅空调的外机。

阳台的另一头是洗衣池。

主卧

现在来参观住人卧室。床头这一面贴了墙纸。枕头被子呢？呃……因为主卧有个柜子味道比较大，目前我们还住在次卧。这里只是盖了个旧被套在挡灰。

主卧的衣柜其实也很大，而且这床下面也是带储物的。你一定觉得我疯了。

主卧飘窗，全屋阳光最好的地方。

床尾的六斗柜和电脑桌。我家使用面积最大的两种颜色就是白色和蓝色。小面积使用的颜色中，又以红、粉、棕为主。

次卧

这里是客房，也是将来的小孩房。用墙纸把房间分为了两个区域：里面色深，睡觉休息；外面明亮，工作学习。

这张图可以明显感受到，过了墙纸这个分界线，外面都是雪白的。

用了一个开放式的布袋边桌当做床头柜。

休息区。这个房间确实很小，梁和柱又多，不过这样布置也算是物尽其用了。

败笔

第一次装修，考虑不周全，要说没有遗憾那是不可能的。

客厅与阳台之间的门与墙其实可以拆掉，用窗帘分隔，两块区域空间共享，阳台还能更宽敞一点。
餐边柜上半部分还是应该带门，降低打扫的成本。而且造型真是太土了，装修队里那个打酱油的设计师画的图，不知道当时怎么一拍脑袋就同意了。
餐边柜中间的马赛克砖效果不理想，这种砖在店里看效果很棒，但到了这个昏暗的角落，就显得非常暗沉。而且开灯后的效果也不好，它不适宜用单一方向的光源照射。也许用彩色胶带或布帘来装饰效果更好。
厨房油烟机右边的吊柜不应该做，这样油烟机和灶台都能向外移一些，转角处就是个挺大的操作台，洗菜、切菜、炒菜一条线。现在只能到背后的浅柜上切菜了。
卷纸架的位置不太合理，比较靠后，坐在马桶上要转身双手拿纸，有些麻烦。
电视柜没有搭好，冒险买了个风格很不同的深棕色北欧款，和沙发、茶几搭不到一块儿。后来折价卖掉了，重新买了与茶几同款的电视柜，还错失了整套组合购买的优惠。
木纹颜色太多没控制好。两个卧室的床是黑胡桃木色，颜色偏红棕色；餐桌脚是水曲柳木色，棕色中带一些黄绿色；餐椅的脚是松木，木色很淡而且偏红；电视柜与茶几的脚又比餐椅正很多，颜色更黄一些。这么多种略微不同的木色，我看着很抓狂。

写在最后

新房装了大半年，来回奔波于新家、建材市场、家具城、品牌体验馆。那时候还没有买车，来去都是滴滴优步，现在回头翻一翻当时的约车订单，真是相当密集，多的时候一天能跑7、8个地方。

这篇装修笔记基本是按照我自己的生活习惯编写的，习惯不同的人会有不同的需求，你的需求我未必在本文中考虑过。所以更多是提供一种了解和反思自己生活方式的思路，然后依照自己的情况来制定装修方案。

在本文的写作过程中，私底下把笔记的半成品分享给了一些朋友。大家都惊叹于我的较真，说装修真是太累了，自己装修还是会交给懂行的亲朋好友。我也反问自己，装修这件事情，值得投入如此多的精力吗？要回答这个问题，首先要回答另一个问题：

家庭装修的意义是什么？

肯定不会是“把自己的住处装饰得美美的”之类。于我而言，装修让我留意到许多不起眼的生活细节，了解到大量知识。逐个细节去研究、去展开，都是对生活方式的畅想，回顾从前的生活方式，思考今后的生活方式。从混乱无序到井井有条，从苟且度日到追求品质，它会是一个全新的开始，一场生活的大革命。这些收获完全是始料未及的。

而作为设计师，热爱生活应该是我的天职。顺理成章地，自己家也必须是最自豪的作品。

组件化设计与开发

hi@victor42.work (Victor42) — Sun, 19 Mar 2017 00:46:29 +0000

终于迎来一期特刊。最近打算在公司内部做一个分享，讲的是组件化的设计与开发的思维方式。准备完演讲资料，发现这完全可以改成一篇文章。藏着掖着不合适，发出来分享给有需求的朋友吧，就当是个试讲了，希望大家帮忙指出错误。

下载地址： https://www.jianguoyun.com/p/Df4KevYQwKOaBhjO8r0EIAA

由于本文首先是以keynote的形式诞生的，其中还有动画和视频，所以我比较推荐大家直接下载keynote文件（也存了PPT版本）。内容和本文是一样的，但有些逻辑关系还真得让画面动起来才说得清。提醒一下，keynote文件大小将近150mb，嫌麻烦的朋友，当然也欢迎继续阅读。

组件化

组件化的工作方式信奉独立、完整、自由组合。目标就是尽可能把设计与开发中的元素独立化，使它具备完整的局部功能，通过自由组合来构成整个产品。

对于计算机这么复杂的工业产品，组件化是唯一能使它成为现实的方法。我中学暑假去电脑城打工，跟着别人学习电脑维修。CPU在哪里，负责什么，如何拆装；内存在哪里，负责什么，如何拆装。这些都是基础知识，各部分各司其职，什么坏了就换什么。我还见过资深维修工修主板，他真的能找出主板上哪个电容爆了，换一个相同规格的上去，电脑又能正常开机了。

对产品设计的意义

当然今天我们不讲电脑维修，组件化思维要运用到我们的工作中。首先要了解，它对设计和开发到底有什么意义？

这部分虽然讲的是设计，但对开发同学也有价值。你们能了解设计师在做设计时的思路，说直白点就是摸清楚我们的套路。其实我们做设计的时候会有系统的考虑，并不是天马行空，想一出是一出。

符合功能逻辑

组件化的设计恰恰是符合产品功能逻辑的。特定类型的信息，就有特定的最优展现方式和交互方式，这叫做设计模式。设计模式就应该提取出来作为组件。

比如要从多个维度快速检索和对比大量数据，没有什么能比表格形式效率更高。想象一下，上面这个界面的表格数据，做成卡片式堆叠在一起，划一张换一条，或者像淘宝商品列表那样，一行4列平铺开。那还对比个P啊，用户都要摔鼠标了。

保持交互一致性

交互的一致性，或者说可预测性，是用户体验的根本。比如日期选择组件，在整个产品中就应该只有一种存在形式。如果一会儿是滚轮拨盘，一会儿是日历，一会儿又是下拉列表，这样的设计绝对是不能上线的。

保持视觉风格统一

这部分主要是视觉方面的考虑，更多样式上的差异。不同的样式会给产品带来不同的调性。

就拿按钮来说。圆头造型表现出一种柔和亲切的特质，同时有利于将注意力聚焦到其中内容上。而直角则展现出一种棱角分明的硬朗，边界更加清晰。想一想三星手机和锤子手机的外观造型，两种截然不同的感觉。

为了保持产品视觉风格统一，设计师应该找到最合适的方案，并处处保持统一，不可以太随心所欲。

便于多设计师协作

组件化设计是大型设计项目的必要条件。比如两位设计师协作，一个在设计注册界面，一个在设计修改密码界面，或者在设计某个问卷调查的弹窗。这其中都有表单，两个人设计出来不一样怎么办？一个边框颜色深一点，一个边框颜色浅一点？其实没理由不同，应该保持一致。口头约定太麻烦，而且难以保证执行到位，组件化是最好的解决方式。

便于修改设计

设计总是要修改优化的，有些改动牵扯全局，动静非常大。

比如管理后台的界面，左侧的主导航是全站通用的。某天决定要给它换一套浅色的设计，难道每个PSD都改一遍吗？如果产品逻辑复杂，PSD有上百个呢？

对开发的意义

下面讲讲组件化对开发的意义。其实开发同学从中受益比设计师更多。

降低耦合度

降低耦合度，相信这是大型项目都在追求的。

举个例子，如果要把页面的body区域加宽。内部许多元素因为浮动、固定宽度、百分比宽度、文字行数减少等等，布局会乱套。就像这图里这样，这是因为内部模块的样式对页面父级元素存在依赖和继承。

可能有人会觉得并不存在依赖关系，但其实固定宽度本身就是一种依赖关系。假如说页面主体部分宽度1000px，左侧边栏200px，右侧800px。没错，这是按设计图来做的。那这个800px宽是怎么得出的？正是因为页面主体宽度1000px，才找了个合适的左右比例，设计成这样的。所以无可避免，从设计这个环节开始就产生了依赖关系。

像这种情况，我宁可在模块外面多套一层容器，模块本身的宽度写成100%，外面那层容器属于框架布局，具体宽度写在它上面。虽然DOM树变复杂了，但内外的布局逻辑被分离了。

减少冗余

比方说要新增一个带表格的界面，开发同学按照设计的效果图一行行写页面。但是如果在某个已有界面中就存在表格？或许当时是另一位开发同学做的。相比重新写一遍，把代码要过来直接用更方便一点吧？

如果表格样式之后又要改呢，是不是两个地方都得改。如此一来，用到表格的页面越多，就越容易漏改。而且静态资源服务器上存了太多份关于表格的样式，其中内容明明是一样的。

优化性能

优化性能刚好可以接着上一条说。

那么多份表格的样式，客户端每打开一个新的表格页面，就得加载一次。占用带宽，浪费了缓存资源。虽然一两个的影响几乎感受不到，但这种情况一多，就会对用户体验产生明显的影响。

慢，是用户体验的头等大忌，没有之一。

便于多开发协作

这和设计师协作的道理相同。

如果两个开发同学都在制作带有下拉菜单的页面，这部分工作只要交给其中一人就行了。TA做好之后封装成组件，另一位开发在自己的页面中加载就行了。

便于查错

便于查错，是耦合性降低的一个副产品。它可以大大加快错误排查的速度。

如果页面上出现问题，可以找出每个可能有关的组件，逐个拔除，直到恢复正常。这样就能迅速锁定错误发生的位置。同时组件内也可以形成完整的自测单元，也方便了测试工作。

便于修改

假如设计师每个页面改同一个地方要花一个小时，那开发做同样的事情至少要花一个上午，至少。

封装成组件，可以把这个时间缩短到10分钟。毕竟不用去改几十个页面的HTML、CSS和JS，改一个组件就可以了。

布局原理

讲了组件化的意义，本来顺理成章应该讲组件化的具体做法。但在这之前其实有必要插入这一块内容，帮助没有前端基础的设计师了解，开发是如何把页面搭建起来的。

大家可以先有一个粗略的想象，就像是重力朝上的俄罗斯方块。页面元素都是从下往上这样一行一行搭出来的，不过这个玩家有强迫症，他一定会从左上角、右上角或者中间位置搭起。当然……搭满一行并不会消除。 ¯\( ツ )/¯

行内元素与块元素

网页布局中有两个概念：行内元素和块元素。它们是非此即彼的关系，网页里只要是你能看见的东西，一定不是行内元素就是块元素。

这两种元素的表现略有不同。虚线框代表一行，但实际上这是不可见的，只是我为了说明布局方式画出来的，其中的绿色矩形才是页面上真实可见的元素。

我们看第一行，这里有3个行内元素。内容长度不同，它们表现出来的宽度就不同，这是一种会随内容变化而改变尺寸的布局单元，而且它们总是从左到右横向排列，只要一行里排得下。

再看第二行，这里只有1个块元素。你看它内容很短，就三个字，却占了一整行。没错，块元素就是这么任性。自习室一卷厕纸占一排座位。

最后看第三行。浅绿色是一个块元素，深绿色是它内部的元素。所以元素之间是可以嵌套的，无论多么复杂的页面，都是这样一层层嵌套形成的。但是要注意，块元素内可以嵌入行内元素和块元素，行内元素只能嵌入行内元素。请看其中的深绿色部分，第二行是一个块元素，设定了宽度，并且居中排列。其实前两个行内元素的右边明明有空间，而且右边还放得下一个行内元素。但即使如此，它还是要占一整行。

当然，块元素这个独占一行的特性有例外，我们接下来就会说。

浮动

刚才讲的是常规的布局方式，我们现在讲两种打破常规的方式。

浮动有两个方向，向左和向右。被加上了浮动属性的元素，表现都会变得类似于行内元素，根据内容变化尺寸。第一行的左右浮动元素都可以是块元素，但它们却排在了一行里。

第二行和第三行是一组对比，表现了非浮动元素与浮动元素混合排列时的规则。第二行的文字是一个常规布局的元素，可以看到左右浮动的元素各就各位，常规布局的文字很灵活地填充空隙，就像报纸排版一样。而第三行里的情况，文字段落也加上左浮动属性，并且限定宽度，它就会跟在左浮动元素的右侧。

当然，如果文字不限定宽度，它还是会独占一行，因为文字足够多。这和块元素独占一行的道理不同，它仍然带有浮动属性，本应该跟在左浮动元素的右边。只是因为自身宽度太大，一行挤不下了。

绝对定位

另一种打破常规的布局方式是绝对定位。这就毫无章法可言了，像狗皮膏药一样想贴哪里贴哪里，还可以像图里这样层叠着贴。总之，绝对定位的元素不会占据常规布局和浮动布局中的任何空间，而是直接挡住它背后的内容。

不过既然可以层叠，就有谁在前谁在后的问题。这和设计工具里的图层是一样的，当然有办法可以控制。

一个页面是如何搭建出来的

http://v.youku.com/v_show/id_XMjY0ODI3OTAyMA==.html

我做了一个动画演示，大家感受一下页面搭建的大致原理。

流式布局

现在要讲的是两个更宏观的概念：流式布局与弹性布局。

我们前面有提到常规布局，那个概念与这两者不能相提并论。其实这两种布局都是基于前面提到的原理实现的，只是区别在于对待自适应问题上采取了不同的策略。

看图中的App store界面，在iPhone 7和7 plus上略有不同。虽然布局形式类似，但7上面只能看到一张banner，而7 plus则能看到左右两边banner露出来。而且App展示区域里，7上能看到3列多一点，7 plus则能看到4列多。屏幕大则视野更大，能显示更多内容，这是流式布局的思想。

弹性布局

弹性布局则是另一种思路。根据屏幕尺寸变化，让界面上所有元素等比例放大缩小。所以无论在什么尺寸的设备上，看到的画面都是一样的，信息容量相同。只是到了大屏幕上，会变得像老年手机那样硕大无比。

这两种自适应方式都有各自的用途，不能说哪种一定更好。但我们在设计时可以考虑一下这个问题，什么类型的设计适合哪种布局。

组件化设计

补完了基础知识，现在就可以讲组件化设计的具体方法了。

提取产品中的共用部分

首先要提取产品中的共用部分。我列举了一些，这些都是极为常见的组件。

这个翻页其实有点问题，少了个当前选中状态，不知道现在是第几页啊。所以说组件的提取要考虑周全，所有可能的状态都要设计。

制作成通用组件

找到了这些共用元素，下面到具体制作环节，关于工具的使用我不会讲太多，主要是思路与观念。我用Sketch录了3段操作演示，我们边看边讲。

Sketch Symbol

http://v.youku.com/v_show/id_XMjY0ODI2MDA0MA==.html

这段视频是讲Sketch中组件的使用。

我们把这个列表项提取为一个组件，现在看其实没什么变化。我们先复制几个出来，让它成为一个列表。然后我们到组件页面去，发现刚才提取的组件就在这里。我们尝试把圆形的头像改成方形，嗯，去掉边框。回到列表界面来，发现整个列表的头像都变成方形了，但我们只在组件里做了一次修改，就达到这样的效果。

Sketch Overrides

http://v.youku.com/v_show/id_XMjY0ODI1ODUyNA==.html

这段视频是讲如何把组件的样式与内容分离开。

还是刚才的组件，不过我把头像右边代表两行文字的矩形换成了真正的文字，我要把它当作通讯录界面来设计。现在我们回到列表界面，发现列表里每一项都变成了姓名+电话号码。然后我们在每一项的Overrides选项中输入数据，因为这是在组件之外输入的信息，它只会影响那一条内容。用这种方式把每个列表项都填上数据。现在我们再进到组件里，做点样式修改，比如把电话号码颜色改成灰色。回到列表，所有电话号码都变灰了，内容保持不变。

这样就实现了样式与内容的分离，降低耦合度对设计同样适用。

Sketch Symbol 的嵌套

http://v.youku.com/v_show/id_XMjY0ODI2Mjc2OA==.html

这段视频是讲组件的嵌套。

组件小的可以只有一个按钮，大的可以是一个交互极其复杂的多步筛选项。所以复杂组件内再嵌入简单组件，这是很常见的事情。

我给刚才的组件又增加了一个按钮，我们把这个按钮也提取成组件，可以看到它出现在了列表项组件的右侧。回到列表界面，每个列表项都有了按钮，我们选中所有列表项，把按钮文字成呼叫。然后右边还有另一个界面，这里也需要一个按钮。我们在此插入之前提取的按钮组件，把按钮文字改为订阅。如此一来，按钮组件就既存在于界面中，也存在于其他组件中。这时候如果想对按钮的样式做点调整，我们再进入按钮组件，改成灰底白字。回到界面中，发现各处按钮都一起变了。

组件化的思想不限于设计工具，虽然Sketch很先进，很利于实现这种工作方式。但PS也有相应的功能，能够以另一种形式实现组件化。

一个组件就是一个完整的产品

设计组件不是把它搬到另一个地方，然后各处集中引用这么简单。开头我们就说过，组件化思维的精髓是独立、完整、自由组合。刚才我们做到了独立，同时也需要做到完整。

就拿按钮来说，我们必须考虑它的各种状态、极端情况、尺寸变化，还有所有附带的交互效果。这才能称之为一个独立完整的组件，满足其他组件对一个按钮的所有要求。除了最标准的默认、按下、禁用状态，还要考虑按钮的尺寸变化，发生服务器交互时每个状态的样式，还有特殊按钮内容的展示效果。

思考相互间的组合方式

组件内部完整了，接下来就是自由组合了。但并不是真的那么自由，我们要确定一些常用的组合方式。

像这样一个后台管理界面：页面的整体背景色，主菜单与右侧内容的距离，输入框之间的距离……这些也都要有章法。

形成规范文档

以上这些工作，沉淀下来，就成了设计规范。这套文档对项目中的其他设计师是莫大的帮助，也是开发人员重要的资料。

组件化设计是一切的源头，如果我们设计部分的组件化工作做得不到位，自己定的规范自己不遵守，开发的同学的组件化工作是无法进行的。

开发组件化

讲完设计组件化，现在我们来讲一下开发的组件化。

按组件，而不是页面来开发

最重要的一点，是需要转变一个观念。我们应该以组件为单位，而不是以页面为单位进行开发。

轻度组件化

组件化开发有两种不同程度的做法。

先讲讲轻度组件化。它的主要思想是使用相同的html结构和特定的class名，并且用同一段css代码定义样式，用同一个js函数来定义交互。

我们来看看上面这个登录框，下面3个代码块是它大致的代码结构。输入框在其他页面肯定也会用到，那么只需要与左边框里的html结构保持一致。各处页面代码中引用同一个css和js文件，至少做到了在一处集中管理样式与交互。但如果组件的html结构发生变化，修改的工作量还是会比较大。

重度组件化

重度组件化的方式可以解决这个问题，不过这就不仅仅停留在思想层面，对项目的代码结构都有一定的要求。

每个组件的html结构、css样式、js交互都独立封装管理，定义好框架和加载方式，内容在加载时从外部填充。

在重度组件化的项目中，每个组件都做到了彻底的独立封装。比如这个页头组件，它的代码存在于独立的目录下，这个目录包含了它的html结构、css样式、js交互、资源图、甚至自测试模块。

那么各处页面中要加载页头组件，往往只是一条语句，将数据传入这个已存在的结构中就行了。

组件如果要与外部进行数据传递，也应该以接口形式对外开放。组件内部是个黑盒，外部只需要了解数据的输入与返回，不必关心组件内的工作原理。

用这种思路管理项目，也会改变开发的协作方式。大家不再是按页面分工，而是按组件来分工。页头和tab由一人负责，列表和页脚由另一个人负责，弱化了相互间的依赖关系。直到将组件拼装成页面，才需要处理组件之间相互作用的部分，但这时候工作量已经被大大消化了。

http://v.youku.com/v_show/id_XMjY0ODI1NzI0MA==.html

我们可以来感受一下组件化管理的项目，应该是个什么样的结构。

一个应用由大量页面组成。一个页面的绝大部分都是组件。组件内部已经定义好了完整的结构，可以独立运行。纵观整个项目，可能就会是这样一个结构。组件的代码占了大多数，能共用的都尽量共用，各个页面的特殊代码则会变得非常轻。各功能模块的划分清晰明确，一目了然。

重在维护

虽然前面说了这么多好处，但组件化不是一件轻松的工作。在项目初期的准备工作会增加一定工作量，但随时间推移会发挥出巨大的优势。

想象一下，像windows操作系统这种航母级的开发项目，如果不用组件化的方式来管理，它有可能成为现实吗？

我们设计师要做的，就是要有专人负责维护设计组件库。组件发生了任何设计修改，或者加入了新组件，都要及时反映在设计规范上。

开发同学也需要指定人员来负责维护具体的组件。他们要做的，我就不好多说了，毕竟我不是专业的。

但可以举个例子，像Google Ara项目的这款模块化手机一样：摄像头模块只负责拍照，处理照片得交给运算模块；而GPS模块只负责定位相关功能，导航语音播报则需要发声模块来处理。任何模块的拆换，对其余模块的运转毫无影响。

双方的维护工作固然重要，更重要的是沟通交换信息。有任何变化都要及时告知对方，组件的高度同步，是这种工作方式得以长期延续的关键。

组件化思维

我们跳出工作的范畴，跳出刚才这些条条框框，单纯想一想组件化这种思想。其实它可以用来理解生活的方方面面。

它的精髓就是这么3点：独立、完整、自由组合。我们生活中见到的绝大多数工业产品，就是这么造出来的，比如汽车工业，比如富士康的iPhone生产线。甚至部队的编制也是遵循这个原理。

而且组件化甚至都不算是人类的发明。即使放在自然界，这也是早已存在的模式。想想我们人体多么复杂，绝对不亚于windows操作系统。但除去极少数器官之外，任何部分损坏或缺失，我们都能活下来。这不得不说是组件化的奇迹。

https://v.qq.com/x/page/e0350h51dga.html

最后，我想给大家看一段1分钟的视频。这是宜家厨房的宣传片，宜家是一家高度推崇组件化的公司。不仅仅是用在生产流程中，也把组件化思维从幕后推向了台前，成为了自己品牌的一种语言。

我们来直观感受一下，让组件化的思想在你脑海中留下一个具象的画面。

部分资料引自《前端工程——基础篇》 https://github.com/fouber/blog/issues/10

出色的移动端用户验证

hi@victor42.work (Victor42) — Sun, 05 Mar 2017 13:55:02 +0000

[国外设计第165期]

减少注册和登录的痛苦

处理用户验证通常是事后诸葛亮，我们总指望它有用，但很少深入思考它。它应该足够简单，但事实是，无论对于用户还是运营产品的公司，都像是在自找麻烦。登录失败、忘记密码和冗长的交互。

登录界面是你的应用中最常展示的界面之一。客观地说，75%的人都在登录时重置过密码，废弃了之前的密码（来源）。在企业内网登录中，忘记密码是帮助台每天处理的头号问题（来源）。通过清晰的表述和设计良好的流程，能极大的减少这些问题的数量。

要提升用户验证的体验，降低服务成本，增加转化率，有几件事情要好好考虑。

清晰说明规则

亚马逊和阿里速卖通的例子

避免使用模糊的规则，表述清楚。不要等到错误验证来警告用户，密码至少要6位。强调密码的最短限制是有意义的，但也不要太复杂。有实际意义的密码，比随机组合的字符更有用。

显示密码

亚马逊的例子

可以考虑让密码可见。这对用户登录和注册有帮助。不用再次输入确认，用密码输入框来切换显示隐藏，帮助用户确认首次输入是否正确。显示和隐藏的功能可以用一个小图标、一行文字标签、或者勾选框来表示。亚马逊对此做了些小变化，把隐藏字符保留在输入框里，在下方显示完整密码。增强了用户的信心，减少焦虑，表达出密码被妥善处理的事实。

忘记密码的处理

Slack和Trello的例子

没人愿意重置密码，除非登录失败或者账号被盗。这么看来，如何帮助用户在不重置密码的情况下登录进去呢？发送一个短链接，允许用户不重置密码而直接登录。提示：利用好细微文案，但要和整体的语调保持一致。

无密码登录

Medium和App Store的例子

密码总是很麻烦，所以还有个办法是根本不用密码。要么使用外部验证手段，例如社交媒体账号登录，或者利用指纹识别。比如说，在App Store里购买一直都是用指纹的。

两步验证

有时候你希望增加一层安全措施。不过要确保用户在一段时间内不会再被打扰到。把它作为一种额外手段，不要为了用户的利益这样打扰他们。提示：如果想要用户启用两步验证，可以给予某种奖励——Mailchimp对于启用此功能的账号，给予了10%的优惠。

移动端登录

Mailchimp和Instagram的例子

虽然以上原则可以用在各种设备中，但移动设备还有一些特殊的用法。如果能确定用户正在使用手机，可以发送短信或者推送消息，这招非常神奇，能够迅速带用户前往目的地——应用内的某个地方。

PIN码和数字密码

iOS锁屏界面的例子

如果不需要完整密码，可以采用数字密码。通过数字键盘来输入。

其他验证方式

Android锁屏界面的例子

还有其他的用户验证方式。连接网格中的点阵画出图形，或者点击屏幕中的特定该区域。

必要时才让用户输入用户名

如果要依赖账号体系，请考虑使用有邮箱地址。不要光为了验证而索要用户名。即使是社区网站，用户也会使用Twitter或Facebook账号登录。

无论采用哪种方式，都要考虑使用场景。只耗费最少的精力，不要把事情搞复杂，尽可能让用户感到没有障碍。

原文链接：https://uxplanet.org/nailing-the-ux-of-authentication-on-mobile-2b69ceab26df#.msjlacij2

作者信息：Levi Kovacs The missing UI controls for your next mobile project https://mobiscroll.com

Stack自动布局：Sketch中的Flexbox

hi@victor42.work (Victor42) — Sun, 26 Feb 2017 00:57:13 +0000

[国外设计第164期]

Skacks会彻底改变你对Sketch布局方式的理解。

就像CSS中的Flex Box、iOS中的UIStackView和Android中的FlexboxLayout——Stack的自动布局可以再次改变整个局面。

Sketch用户终于可以在不用CSS的情况下，直接使用Flexbox的排版技术。

我们相信，推动设计生态前进的关键在于，创造出强大的设计概念。

Flexbox已经彻底改变了局面，它出现已有好几年了。但要使用它，你得在浏览器中使用CSS来设计，因此对于多数设计师可望不可及。

Stack是另一种形式的Flexbox，它更直观，但能力丝毫不减。它能使设计师以列、行、网格的思维来思考设计——使设计更加一致。

Stack是什么？

Stack是一种特殊的组，定义了其内部图层的布局方式。

Stack组的图标是一种特殊的蓝色，上面还有图标来表示方向。

要使图层变为Stack模式，在Auto-Layout面板中点击Stack按钮。

小提示：

Stacks能产生一致性。

一致性使设计清晰。

Stacks能使设计清晰。

一个Stack组有3个属性：

方向：定义其内部图层按照水平还是垂直方式排列。方向
对齐：包括顶对齐、中央对齐、底对齐、伸展。对齐
间距：定义其中每个元素的间距。

Stack可以嵌套使用！

来解这道题！

90%的设计师第一次都会理解错！

下图由多少个Stack组构成：

正确答案是：3。

Stack组的图标是一种特殊的蓝色，上面还有图标来表示方向。

最里层横向排列的红色线框Stack组，其中有2个元素：星星和评论数。
中间层纵向排列的蓝色线框Stack组，其中有4个元素：应用名称、作者、分类、红色Stack组。
最外层横向排列的绿色线框Stack组，其中有2个元素：应用图标和蓝色Stack组。

Stack的实用诀窍：

Stack很适合用于定义同级图层间的排列规则。
在Stack组里增加或删除元素，会重新排列其中图层。
文字图层的伸展会移动相邻图层。
拖拽可以轻松地重新排列子图层。

使用Stack实现Flex网格

Alan Roy，我们产品内测小组的一位多产的成员，用Stack创造出了Flex网格系统。

他写了一篇详细解释，并且附带一段10分钟的视频。我们强烈建议阅读和观看这组教程。让人脑洞大开。【译者注：需科学上网】

https://www.youtube.com/watch?time_continue=2&v=g–AD_Yp5lk

使用AutoLayout和嵌套组，在Sketch中实现响应式Flex网格

改善设计体系，便于缩放和统一。

我们Anima的使命是让设计师能掌控自己的设计。我们正在打造一款设计工具，让设计师定义和构建UI与UX设计中所有零零碎碎的元素，并且最终能自动生成本地代码，1:1还原设计。这就使设计师不依赖团队的其他部分，比如开发人员的优先关注点就与设计团队不同。

自动布局插件下载：https://animaapp.github.io/Auto-Layout/

指南与文档：https://animaapp.github.io/docs/v1/guide/12-stacks-flexbox.html

原文链接：https://medium.com/sketch-app-sources/auto-layout-introducing-stacks-flexbox-for-sketch-c8a11422c7b5#.jyyxfm90k

作者信息：Anima App Empowering designers to own their design.

措辞不当会毁了用户体验

hi@victor42.work (Victor42) — Sun, 19 Feb 2017 00:02:38 +0000

[国外设计第163期]

别让措辞毁了你的设计成果。

用户体验设计师必须了解文案的力量。

并不需要成为一名文案写手，而且也绝对不需要小说家的文笔（当然，你愿意也可以）。但你需要清晰了解语言学，理解你所用文案的真正含义。

令人难以置信，产品和体验中使用的语言，会彻底改变用户的感受和使用方式。实际上，掌握特定词语的内涵（何时该用，何时避免）能使你的工作和创意更有效。

不信吗？没关系，我也心存疑虑——我们一起来看看。

“能”和“可以”的区别

这是个好例子，因为两者很接近。

设想回到校园时代，你在一堂数学课上急着上厕所。

你会举手，然后对话大致这样发展…

你：“对不起老师，我能去厕所吗？” 老师：“我不知道……能不能，你说呢？”

我每次都无言以对（而且非常紧张）。

许多人都没意识到，当你询问别人自己能否做什么时，你可不仅仅是在征求意见。

你问的其实是可能性。

你在问你是否有能力做某件事……他们是否有能力做某件事……某件事有没有可能发生，如果发生怎么办？

“能”使得问题含糊不清，增加了上下文变数，使你（或者用户）从目标上分散注意力。

现在，把上面例子中的“能”换成“可以”。

可以（逻辑上来说）只有两个结果——可以和不可以。

下次当你提问或请求允许时，应该用“可以”，观察对方的回答会发生什么变化。相对来说，你会更容易得到是或否的回答。实际上，只要你的请求不算荒唐，天平总是向肯定的回答倾斜。

作为用户体验设计师，我们都知道避免设计含糊不清的重要性。越清晰明确，体验越好，用户越满意。文案上的小变化，让一切都清晰起来。

为什么？

许多用户在使用App、产品和网站时，90%的时间在使用左半脑。

左半脑负责语言与逻辑，它以理性的模式处理信息，它会逐字逐理解文字和其中含义。这就意味着用户会直接对面前的信息作出反应，这又取决于大脑如何理解这些信息。

更好的语言表达，能让左半脑准确理解，并合乎逻辑地观看和作出回应。启发法（认知偏见）在此也能发挥作用，不过我们以后再讲。

我们还是看看其他的不当措辞，要尽可能在设计中避免。

“试试”的悖论

试试这个……试试那个……或许可以试试……

试试这个词的问题在于，根本不存在试试这个状态。一件事你要么做了，要么没做。“试试”创造出了一种不稳定状态，没有逻辑，也没有结果。

想想这个场景，你在厨房中，你的好朋友对你说……

好友：“嘿，[你的名字]！试试搬起这把椅子。”

你去搬起椅子的时候只有两种结果：

你搬起了椅子
你没有搬起椅子

当你走向椅子去搬动它，它抬起来了，你就算是搬起了椅子。

当你走向椅子去搬动它，试图把它抬起来，但没抬动，那你就没有搬起这把椅子。这两者没有中间状态。

“试试”会产生一种糟糕的认知不协调状态，应当在体验中避免。日常生活中会使用这个词，但务必让用户远离这个词。

“正义”（Just）只能用来形容骑士

【译者注：这个问题在汉语中应该不存在。原文中的Just一词，如今最常用来表达“刚好”、“恰好”、“差一点”的含义。】

多年以来，Just一词已经逐渐进入我们日常生活。

如果有什么可以用Just（正义）来形容，那它一定非常正确、高尚、庄严。

不幸的是，它很少用来表示这个含义。相反，这个词如今的意义主要是指几乎达到或完成。就是字面的意思，讽刺的是，它什么信息也给不了我们（或者用户）。

Just没有给出任何有意义的反馈。

听到Just这个词简直会气死人，因为它从根本上绕过了问题所在，阻碍了进步。如果某件事（或者某人）的目标未达成，其中必有原因。

使用Just一词掩盖了真相。如果你懒于思考（陈述原因），或者没有合适的方式说出你的想法，你就会用Just这个词。

比方说用户在玩一款游戏，距离排行榜第一名只差17分。与其这么说……

“你差点就拿下第一名了，继续努力！”

不如这么说……

“你与第一名已经很接近了，下次反应速度得再快一些。”

这样用户就有了可执行的反馈，他们知道该做什么来改进，并且有了目标。因此你就为他们节省了精力，让他们不必去苦想为何失败。

只在需要时说“抱歉”

说抱歉当然完全没错。

实际上，承认错误和制定计划解决问题，需要强大的领导力。

不幸的是，许多App、网站和产品体验，在每个404页面、错误状态和芝麻大的小事上滥用“抱歉”。

坦白说，抱歉说得越多，就越失去意义。对用户越多道歉，他们越觉得你不在乎。

抱歉不是一个可执行的操作，它没有主旨，也解决不了任何问题。多数时候，道歉是最简单的办法，通过说抱歉，我们会觉得已经“解决了所有问题”。

如果你的产品或产品体验哪里出了问题，找到原因，然后决定是否需要道歉。

很多时候，精心计划的操作会产生完全不同的结果。清晰地引导用户执行一系列操作，让他们解决你（或他们自己）造成的问题。

如果你的产品体验需要四处说抱歉，每个错误状态、每个小问题上都说，那说明体验还不够好，需要花更多时间精力来改善。

“非常”还不够

这一点比前几个更加忌讳，不过使用这个词也有它的价值。

非常代表许多或者充分。无论是指蛋糕、快乐或是斑马，都可以用。

蛋糕非常美味。
我今天非常开心。
这只斑马的皮肤常柔软。

所有的“非常”，都告诉我们其实还可以更多。这个蛋糕还可以更加美味，我还可以更开心，这只斑马比想象中更柔软。

每次想要用“非常”的时候，请扪心自问，有没有更好的替代的词？99%的时候是有的。

这个蛋糕口感细腻。
我今天欣喜若狂。
这只斑马的皮肤像丝绒一样。

忽然间，你的表述就有力量和画面感，具有独特的表现力。

要记住，关键在于清晰和产品给人的感觉。

使用更有力量和表现力的措辞（符合上下文语境），能优化信息传达和体验，促进用户操作。

“东西”是什么鬼？

好问题。

东西……其实什么也不是。

我们玩个小游戏，我会列出一些名词，你在脑海中想象它的画面：

猫
狗
甜甜圈
水
柠檬
鞋子
东西

我猜，除了东西之外，其他的物品你都能在几秒之内想到画面。

如果你真的尝试想象“东西”的画面，那一定是一团乱，每个人的想象都完全不同。

相反，大家对于列表中其他物品的理解，可能都有相似的画面。

“东西”无法让人马上想起（视觉上或是其他方面），它是目前提到的最模糊不清的词语。

“东西"一词要在上下文中具有意义，需要花费人太多的精力。所以它不值得使用。相反，要简洁明了地告诉用户到底是什么东西。

措辞很重要

用户体验设计中，清晰明了就是真理。

用户的日常生活中，最重要的就是清晰明了，它能呈指数地简化产品体验和操作。

要从我的词汇表中排除所有不当措辞，还有很长的路要走，不过通过训练我总有一天能达到。

本文总结成一条，措辞在用户体验设计中很重要。注意使用简洁、明了、有力的词语来表达信息。

它会彻底改变产品体验和心态。

如果喜欢本文，欢迎与我联系。

在Dribbble上关注我的项目。
在Medium上阅读我的思考。
在Twitter上对我碎碎念。

原文链接：https://uxplanet.org/weak-words-kill-experiences-3c1b48960ce0#.yi6x6fe8w

作者信息：Cassius Kiani Partner at Mikleo.

企业后台设计：帮助用户理清头绪

hi@victor42.work (Victor42) — Sun, 12 Feb 2017 00:07:04 +0000

[国外设计第162期]

典型的企业后台界面一般长这样：

有一些巨大的数字（人们都喜欢大数字，对吧？），有几张图表，可能还有表格。理论上，这些元素给用户讲了一个清晰明了的故事，让他们采取进一步措施。但是，现实情况则未必如此。

多数人眼中，这些典型的企业后台界面就像这样：

图片来自维基百科

大家都能看到小黑点，但很少有人能看到其中隐藏的画面。为什么？因为数据极其复杂，我们却要求用户自行连线，来了解信息全貌。

企业软件如此复杂，通常也有合理解释。有些行业本身就很复杂性，例如政府、健康、市场营销。但是，后台不只是给数据科学专家用的，对吧？

设计能做什么？

2016年6月，我们启动了用户体验管理后台的改版设计，当时遇到了同样的问题。它背后的技术非常强大，但我们的用户似乎无法理解这套后台界面。

这里有各种数字，它们都相当重要、有价值。但人们难以理解它意味着什么。

背景介绍

Qubit是一款客户体验管理平台。Emirate和Topshop这样的企业，就用我们的软件来追踪、分析和管理与客户的互动。

如何使用呢？

比如说你有一个电商网店，出售游艇观光线路，但人们很少购买你的旅行线路。这有无数种可能，但你能做的都做了。你已经看了数据分析，知道很多人在下单页面离开了。他们就是不点“购买行程”。

为什么呢？你也找公司决策者聊过，又做了一些用户研究，了解到用户并不愿意花599英镑购买一段旅程。这太贵了，他们无法立刻决定购买。

决策者建议你运用社交认同，因为它在这类场景中很管用。非常棒。

如果网站只用这么个数字来表现人数，那几乎不可能影响人们的购买决策。

下一步：证明社交认同真的管用。

打造成功的用户体验，好比进行一场成功的科学实验：你得定义一个目标，来评判成功与失败；并且找到正确的方法。本例中，A/B测就是个好方法，因为它就是新的体验优于从前的证据。

所以，如果再看一眼后台界面，就有意义多了。类似这样：

数据不会自己说话

在起初的用户调研中，我们发现，主要问题在于许多用户不知道这后台界面究竟什么意思。于是他们就会请我们的工作人员给他们解读这些数据。

挑战在于，怎样的改版设计能让它更易于理解，同时保持它的科学严谨？

我们首先尝试把信息拆分成更小的碎片，用另一种方式来组织它们。

但这其实没什么作用。人们喜欢新的视觉设计，但仍然难以理解其中含义。

我们第105次（我印象中是）与数据科学团队开会讨论时，他们试图向我们解释这些数据的重要性，以及它们意味着什么。这使我深受打击。

我们为什么不能简单说人话呢？

这样我们才能帮用户把一切联系起来，免去猜测，让他们掌握所需的信息。

如果需要，资深用户仍然能看到每个指标的详细信息：

¯\(ツ)/¯

企业级产品的设计中，有许多谜题，却没有一个通行的解决方法。不过，艺术家David Shrigley有一条原则，我借鉴过来时刻提醒自己：

你若悲观，万事皆衰。

在我们的案例中，这就意味着如果存在误读数据的可能，那就一定会发生。这就是为什么一定要来来回回，反复确认传递了正确的信息。有时候人真是太容易一叶障目了。

彩蛋部分

如果你想知道上文中的谜题是什么，请看下图，我已经帮你连好了线：

感谢Suganya Sivaskantharajah、Sarah Benson、Sophie Coleman、Giovanni Luperti、Jen Stott和Pavlo Huk阅读本文的草稿。我要为Qubit的研发和产品团队喝彩，是他们使之成为现实。

原文链接：https://medium.com/qubit-design/enterprise-dashboard-design-help-your-users-to-connect-the-dots-704d78535143#.d0c13hrlf

作者信息：Yuriy Oparenko London-based product designer. Currently at Qubit.

如何表达App的隐藏手势操作

hi@victor42.work (Victor42) — Sun, 22 Jan 2017 22:03:37 +0000

[国外设计第161期]

手势操作，是通过手指轻微移动来让用户操作应用。触屏界面提供了许多自然的手势，比如点按、滑动、双指缩放。但这些交互方式不像UI控件，通常对于用户是不可见的。除非用户事先了解手势存在，否则他们并不会尝试使用。

如何加入隐藏手势呢？好在有许多视觉层面的交互设计技巧，可以让用户了解这些手势。

首次打开时的教程和引导页

在手势为主的应用中，教程和引导页相当常见。许多情况下，在应用中加入教程意味着向用户说明、解释界面。但是，UI教程并不是阐述应用核心功能的最简洁方式。这种方式存在两个问题：

如果你要给产品准备说明书，就说明与用户的沟通还不到位，因为他们可不希望使用前还要读说明书。
另一个问题在于，用户不得不记住所有这些新的用法。

举个例子，Clear应用一开始会展示7页教程，用户得耐心阅读所有信息，尝试记在脑海中。这个设计很糟糕，因为它需要用户在真正开始使用之前就付出精力。

Clear的教程

避免使用强制性的多步引导，要试图在操作所处环境中教育用户（这时候用户真正需要相应功能）。几经迭代后，教程可以变成更加平缓的暗示。

关注单个操作，而不是试图在界面中解释每一个操作。

以Android版YouTube的手势操作指引为例：

Android版Youtube

这个应用有用到手势操作，但并不是通过教程的方式教育用户。它反而是在新用户首次触发时进行了暗示，每次只介绍一处，而且只在用户进入相关功能时才触发。

如何在情境中教育用户

在情境中教育的技巧，能帮助用户以一种从未尝试过的方式操作某个元素或界面。这种技巧通常包含轻微的视觉提示和微妙的动画。

纯文本指令

这个技巧主要依靠纯文本指令，促使用户执行某个手势操作，并且简明地描述这个操作的结果。

**注意：**说明文字要非常简短——文字越短，用户越可能会阅读，然后才能遵照它的指引。

图片来源：Material Design

提示动效

提示动效（或者动画暗示）表现了执行操作时具体手势的效果预览。例如，Pudding Monsters游戏的诀窍就是完全依靠手势操作，但是用户不必过多猜测就能掌握基本玩法。动画传达了功能方面的信息——用动画来展现一个具体场景，用户立马明白该怎么做。

提示动效展现了如何操作一个元素。来源：Pudding Monsters

内容的暗示

内容暗示是一种微妙的视觉线索，表明了操作的可能。下面这个例子展示了卡片的内容暗示——当前卡片的下方还有其他卡片，这显然表明它是可以滑动的。

展现出导航功能。来源：Barthelemy Chalvet

结论

总之，在移动或网页应用中展现手势操作方式，并没有万能的方案。不过在教育用户操作界面时，我比较推崇通过内容暗示、渐进式提示和微妙的动画，在具体情景中教育用户。教程和引导页应该只作为最后手段。

感谢阅读！

原文链接：http://babich.biz/how-to-communicate-hidden-gestures-in-mobile-app/

作者信息：Nick Babich

充分运用用户研究

hi@victor42.work (Victor42) — Sun, 15 Jan 2017 16:03:48 +0000

[国外设计第160期]

简单5步，外加一个冷笑话

这篇文章的简介部分，我想了很长时间。设计决策需要同时满足商业与用户需求，但了解真实用户需求也非常重要。为了平息这场争论，下面就要请出本文的主角——用户研究——一种能让设计方案落地并关注用户体验的手段。

不过我决定不去谈用研有多重要。我会主要关注如何最大程度体现用研的价值。

1. 问对问题

人为创造（例如用户画像）是一种手段——而非目标。

计划的第一步就是定义目标。希望通过用户研究得到什么？最普遍的错误就是拥有这样的目标：我要为我的应用创造几个用户画像。

但用户画像只是一种手段——是到达终点的一种方法——这种研究中的人为创造可以帮助我达成真正的目标。我希望得到的是什么？最终目标是什么？可能会是这样：我希望创造有史以来体验最棒的应用。

这也是没有意义的。这就偏得太远了，虽然热情和信念值得赞扬，但这个目标过于抽象，野心太大，无法验证。我该做的，是提出一个可以通过用户研究来回答的问题。这得是实实在在能够产出可行结果的方法。

试试这么说：**我在应用中引入了一套新的付款流程，我想看看用户是否理解，能否更轻松完成任务。**是的，这就是可以验证的问题。

问对问题可以总结为以下几点：

关注结果，而不是产出物。
实在的问题对应实在的答案。
研究中的人为创造只是到达终点的一种手段。

2. 选对研究手段

单向镜的原则：安静、关灯、关闭手机。

现在我已经有了一个问题，我可以与研究员一起决定最合适的研究方式。首先我得决定我需要定性还是定量研究。

定量研究（通过调研或数据分析收集）最适用于定义用户类别、评估偏好或评估特定功能的接受度。一切可以用数字回答的都属于这类。但如果我想理解这些分类和偏好背后的意图，想了解用户选择背后的动机与环境，或者测试某个特定功能的可用性问题，我就会选择定性研究。

定量数据通常很精确，因为它代表着大量用户，在产品自然使用的过程中产生。我之前提的问题——付款流程的可用性——最适合用定性研究来回答。定性数据可以由几种不同方式收集：

产品的自然使用（例如人种学研究、日志研究）
产品按剧本使用（例如实验室或远程操控研究）
去环境化研究——不必使用产品（例如用户访谈）

在目前这个例子中，最佳选择是实验室远程操控研究——我对想要测试的场景能够充分掌控。

3. 置身现场

同理心的部分没有人可以代劳

要进行测试的产品的设计师，没有理由（或许有一个）不参加用户研究。我能想到的理由：时间、优先级、距离……其实都是借口。

你得置身现场。

作为设计师，我参与用户研究环节的收获，远比任何经过二次传递的信息更有价值。若不是亲自参与，什么报告都无法向我解释真实用户努力使用产品的动机。即使是设定最完善的用户画像，也无法给我这种同理心，无法与面对面见证真实用户的需求和努力相提并论。

无论我在用户研究方面有多少经验——可能一点也没有——我仍然某方面的专家，我对这个产品了如指掌。但是，除非我在发起研究的各方面都颇具经验，不然试图替代研究员置身现场反而会破坏结果。

用户研究团队的组成大致是这样的：

研究员

这才是专家。她会根据我的需求，帮我选择最佳的研究方法。她还会主导和简化研究环节。通常会由她来发起访谈。

观察员

顾名思义：观察员的职责就是观察。在许多按剧本的实验室研究中，研究员无法掌控和记录。观察员就负责做这些。很有必要请至少一名产品设计师作为观察员，但这不是说所有的观察员都得是设计师。同理心和关注用户并不是设计师的特权。产品团队中的每个人——从产品经理到开发——都能从用户研究中收益，并作出贡献。

参与者

选择正确的参与者，其重要性无法估量。即使对于受控的实验室研究也一样。要获得准确的结果，场景也应该尽可能真实——真实的用户，或者相关人选，要满足必要的特质，这是测试成败的关键。

用户体验研究的主角

4. 捕捉一切

我会在研究中请来7位用户。我其实只需要6名，约了7个人是因为总有至少1个人会变卦。凭经验说，5个就足够了，但如果有2个人变卦的话……所以还是得7个。

寻找参与者这项工作最好外包。如果没有足够大的人口基数，我觉得我可找不到7名愿意参与测试的人，而且还得满足场景所需的相应特质。

下一步是找到合适的地点。为了最佳结果，就要尽可能接近产品的真实使用场景。例如，在booking.com，我们把室内实验室布置得像客厅一样。参与者可以选择坐在桌边或者沙发上——这也取决于测试的设备。把桌面电脑和外接显示器搬到沙发上可不容易。

这个地方还得有很好的网络环境、必要的记录和追踪设备、还有给观察员留出空间。因为我们要在那里花上一整天做记录，点心和饮用水是首要需求。

接下来，研究员会提一些上下文问题，并且介绍这个场景。她会谨小慎微不问任何诱导性问题，或者设置带有偏向的对话。当用户开始发言，她会请他们畅所欲言，并且向我们解释理由和动机。有时候，用户的言行会严重不一致——这种情况下，他们的行为比言语更重要。

观察员在另一个房间……我们就是观察员。我们可以通过视频来观察，无论是隔壁房间，还是在另一个大洲。或者像警察审讯那样的紧张氛围，通过单向镜。小贴士：如果我在单向镜背后，我会挡住MacBook的logo——它并非像我们所想那样真正能做到单向。

我会在表格上按时间节点记录，并且利用每个环节的间隙观察额外细节。

表格第一列会自动捕捉时间戳。这样我可以关注眼下发生的事，稍后再来关注一些细节，比如眼动追踪或是找到视频中的某个具体时刻。
第二列描述发生了什么：参与者在做什么？他们在想什么，或者有什么感觉？这些必须实在客观——最后一列有地方写我自己的想法。
第三列用来做备注：灵感、改进点、备注。这部分我写得很简洁，但都确保立刻记录下来了——总有事情在发生，我可不指望靠脑子来记住这些。

持续不断的记录。（ABC — always be capturing.）

5. 产生可检验的假设

这一天结束之前，每个人——研究员和观察员——会分享他们的记录，合作提出第一个结论。通常，这就意味着要对比记录和观察结果。把找到的共同点归类，按照重要性和严重程度给所发现的线索排序，描绘出一些可检验的见解来继续研究。

如果一切顺利，最终的结果（发现报告、用户画像、用户旅程等）会包含最初问题的答案。好吧，答案这个词可能不合适——这些只来自于6名用户——除非做A/B测来证明（或证伪）其价值，否则它们仍然是假设。

不过我就说到这为止，因为后面的步骤就超出了本文的讨论范围。如何把这些假设转化为可以验证的命题？如何选择正确的参数？如何执行A/B测？我之后会写，如果你感兴趣，请持续关注我。但还有个更重要的问题：你找到了那个冷笑话吗？

原文链接：https://uxplanet.org/get-the-most-out-of-user-research-9b2af0b7edb3#.qp87k44me

作者信息：Cătălin Bridinel senior designer @ booking.com, photographer @ bridinel.com, mostly nice

混合型界面：对话式UI的未来

hi@victor42.work (Victor42) — Sun, 08 Jan 2017 12:46:00 +0000

[国外设计第159期]

2016年是对话式设计之年。消息应用正以惊人的好评度和参与率，占领世界和app store的排行榜。每个社区产品、应用市场、点播服务、约会应用、社交游戏和电商产品，为了提高好评度、参与率和销量，都已经或即将加入消息功能。

有大量关于对话式UI的讨论，还有这种人机对话模式如何通过简单的指令和文字反馈（偶尔配合照片），将消息或语音交互融合在一起。虽然我很喜欢文字和照片，但它尚有非常广阔的探索前景，可以在对话式界面中加入丰富的图形界面元素。

这点有些讽刺，因为1986、1996、2006年也是对话式设计之年。想知道对话式UI会走向何方，我们就应该回到这些历史时期。

命令行，又称作原始对话式界面

似乎我们都见过这些界面。命令行正是最初的对话式界面。输入上下文指令，敲回车，电脑就会执行命令，并且打印出答案。输入和输出都是文字。有时候通过非常原始的方式，你能看到各种符号组成的表格或ASCII码图片。这是文字媒介的一种极具创造力的用法，但它本质上还是文本。

Linux命令行

仔细想想，这是不是很像一场互动对话，人告诉电脑做什么，电脑执行，然后回来汇报结果，或者提出新的问题，得到回复后才能继续任务。

命令行最大的缺陷在于，你必须准确知道应该输入什么，或者让电脑给你提供选项。要记住所有这些命令，对多数人而言要求太高，这时的电脑还不够平易近人。

即使早在那个年代，消息应用就已经存在了，因为人们不仅仅想要与机器对话，也想和人类对话。交互被局限于文字媒介。

图形化用户界面

施乐公司帕洛阿尔托研究中心，一家复印机公司下属部门的天才们，创立了一系列用户界面范式，彻底改变了游戏规则。让不懂命令行、也不愿花数小时学习的用户，能够直接用东西（鼠标指针）指着屏幕上熟悉的视觉形象。

Xerox Star用户界面

这些物体代表了人们在现实世界中熟悉的事物——文件夹、按钮、垃圾桶。除了这些熟悉的视觉隐喻，他们还加入了新的概念，例如窗口、对话框、桌面等等。这些物体让用户能与电脑交谈，电脑也能以图形化而非文字的方式与用户交流，只需要指向并点击他们需要的操作。

采用对话式UI的消息应用

文字主要用于输入网址、撰写文档和邮件，已经不作为人机交互的主要方式了。但它仍然是人与人通过电脑交流的主要方式，聊天室和前赴后继的消息应用都是如此。

聊天室就是最原始的Slack。显然，它更粗糙、更欠产品化。但聊天室引入的许多概念在今天再度盛行。聊天室已经支持了聊天机器人、多人测验、投票和其他类型的对话式应用，各频道可以依需要启用。

Trivia聊天室机器人

即时通讯应用在视觉上更自然，随时间推移也开始支持更丰富的媒体格式，例如表情、照片、视频和小程序，例如游戏或测验。第一批这类应用包括ICQ、AIM、MSN和Yahoo! messenger，在90年代末极度盛行。

MSN messenger里的井字游戏

随着移动通信的到来，还有运算设备屏幕的局限，需要对桌面端的富图形界面进行重新思考。早期的移动设备只有几行简单的黑白文本界面。

短信服务（SMS）是1994年少数几个出现在移动设备上的服务之一。短信只支持文字，并且不能超过160个字符（译者注：这是在作者的国度）。从一开始，它就既支持人与人互发短信，也支持人与电脑发送消息。短信具备一些聊天室和桌面即时通讯应用不具备的特征。它能持续运转，可以在任何时候接收到通知。也出现了基础的对话式服务，例如通过短信指令查询余额。文字游戏、星座运势、还有其他娱乐类内容，把短信的运用推向了一个新的方向。而相对严肃的应用，例如天气和股票行情，则又是另一个方向。这些应用通常都由服务商或者关系紧密的企业提供。不像聊天室或即时聊天应用，短信自己集成了支付系统，使得它能在这个平台上构建出真正的业务。最后，许多像Nexmo这样的上层服务商（OTT），让每个开发者都能运用短信来搭建全球平台。平台限制和入口，使得短信成为移动端对话式界面、聊天机器人、智能助手绝佳的试验田。由于只能使用文字，基于短信的应用与命令行的体验差不多。

Assist的短信聊天机器人界面

随着智能手机的崛起，我们看到越来越多的上层服务（OTT）应用开始蚕食短信的核心价值。通信应用在移动使用中占了最大比重，因为用户暴露在大量消息通知中。由于这些消息应用通过IP通信，绕过了运营商的信号网络，对内容的类型基本没有任何限制，消息中什么都可以发。可以看到，这些应用已经扩展了消息类型，包含照片、音频消息、视频、表情、动图等富媒体。微信和Line这些来自亚洲的即时通讯软件，还将这些富媒体消息扩展为迷你应用。Facebook Messenger对这个概念进行了移植。每个消息都是一个自我包含的应用，可以产生文字或富媒体界面。

上层消息应用正在逐步开放API来整合各种服务，非常像短信的演化路径。Telegram、Slack和 kik都有成百上千的聊天机器人。

Slack中的KhaledBot

尽管如此，限于应用所处的环境，其中多数机器人还是基于文字，还不支持迷你应用。仍然近乎于命令行，只是额外加入一些富媒体内容。

不像短信是整合到系统中的应用，所有基于短信的产品都依存于此，但许多产品都有应用内消息。各种消息应用、社区、应用市场、点播服务、约会应用、游戏和企业工具，都包含某种依照环境和用户专门定制的即时消息。一般来说，相对于OTT消息应用，这些应用都有简化版的消息功能，毕竟这些都不是业务的核心。但一切变化很快，我们在Layer打造的服务，能让消息功能被植入到越来越多的应用中。不只是把通常专属于消息应用的功能带给每个产品，最重要的是探索了新的可能性。

每条消息都是独立应用

下面是一些混合界面的案例，很好地将命令行与图形界面范式结合起来。2016年起，我们会看到更多此类案例，因为这种结合吸取了两者的优点：文字——对话式界面的快速输入，还有图形界面丰富直观的体验。

每条信息都是独立应用

每条消息都有成为一个独立应用的潜质。它可以显示文字、照片，或者在消息气泡的局限中展现更复杂的信息。有无限的可能，可以创造各种迷你应用，比如照片轮播、媒体播放器、迷你游戏、清单项、消息内支付等等。

富文本消息例子——音乐、照片、移动商店、迷你游戏、测验、快递、酒店预订

开发者们可以更多关注体验，不用局限于基础设施。将迷你应用作为消息的一部分，会成为一种行业标准。我们在对话式设计领域中已经能看到这种趋势，Operator这样的公司正在引领行业前行，设计出丰富的体验供用户直接操作，而不仅仅是回复文字。这是他们与传统消息应用的一大区别。

Operator中的可操作消息卡片

聊天机器人（自然语言处理、人工智能和其他许多美好事物）

你或许已经注意到了，以上案例中的某些消息，其实不必由人类来撰写和发送。事实上，随着消息变为迷你应用，加入聊天机器人就变得更有意义。这尤其方便了管理工作流的业务和应用。发出消息就是输入请求，回复的消息不仅仅是答案，还提供了一个完整的应用来处理请求。例如，向一个对话式应用提问“知道Onitsuka Tigers吗？”会得到文字或图片的商品列表，还可能返回带有轮播滚动的信息卡片，每条结果都带有购买按钮，可以直接触发支付流程。让人类来制作富媒体卡片极其耗时，但对于理解上下文问题的机器人而言，这是小事一桩。只有混合了对话式界面和富媒体图形界面，聊天机器人才能发挥它的潜能。

语音信息

苹果的Siri和亚马逊的Alexa/Echo做出了表率，语音可以成为对话式人机交互中一种强大的输入/输出手段。结合富媒体图形化反馈，它还可以更强大。带有语音输入和视觉输出的智能手表，是这个领域的一种探索。我很确信将来会出现更多类似形式。

原文链接：https://medium.com/the-layer/the-future-of-conversational-ui-belongs-to-hybrid-interfaces-8a228de0bdb5#.yn4io27e8

作者信息：Tomaž Štolfa Curious observer. Co-founder @Layer

像用户体验设计师一样思考

hi@victor42.work (Victor42) — Sun, 25 Dec 2016 18:59:22 +0000

[国外设计第158期]

插画来自Crafticons

培养探索未知的心态

（持续）学习用户体验是最需要技巧的事情。因为这不是标准教育中的某个正式课题。

它总是以某种神秘不可预测面貌示人，直到你在设计、研发、市场推广（或者其他创意领域）中遭遇到用户体验的具体概念。

虽然在用户体验方面有一些基础书籍，还有成百上千的博客文章，研究最具体的设计细节。但关于如何培养心态与思维过程，仍然严重缺乏资源。

不同于视觉设计（实践是开拓眼界的关键），我们多数人都能够思考和提出正确的问题，培养自己的用户体验思维。

毋庸置疑，成长为一名杰出的用户体验设计师需要时间、投入和努力。但实际上，大多数基本的用户体验，仍然是关于如何提出正确的问题——这点我们基本都能做到。

创造高质量的用户体验，包括了提出好的假设，然后检验、持续迭代（通过数据与反馈）。

提出好的假设，是用户体验思维、用户体验感觉和学习用户体验的基础。

插画来自Crafticons

人本主义

所有的用户体验设计，都源于人本主义和执行这些操作的人。

请别误会，用户体验其实也不仅限于人类。本文的每一章，其实也完全适用于猫猫狗狗甚至斑马——都适用。

在下文中，我们对交互作出如下定义：

在用户体验中，交互可以定义为人与物之间的一切互动。

互动一词非常重要——交互的作用是双向的。

一切交互都需要耗费资源。无论是能量、时间或是其他什么，人们总会付出他们认为有价值的东西与某物互动，他们也希望得到同等的回馈。

将耗费的资源最小化，回馈的资源最大化，就是通向杰出体验的道路。

要理解如何优化交互，就要更多了解背后的人、事、地点、和缘由。

这些问题有助于开个好头……

这个交互有谁参与？ 深入挖掘交互背后的人的人口特征与心理变量。如果能把人们从哪来、在想什么结合起来，就能产生同理心，了解他们需要什么。
他们在操作什么物体？ 物体就是指与人互动的东西。如果你在操作智能手机，那问题中说的物体就是智能手机。如果你正在开关一扇门，那么门就是物体。 人们在操作什么，那个就是我们说的物体。
他们用什么工具在操作？谈论工具时，我们指的是操作这个物体的媒介。以智能手机为例。当你（人们）使用智能手机（物体）时，你就是通过手、眼睛和耳朵（工具）在与手机交互。正确分辨出工具，对你之后工作有所帮助。
操作发生在什么地方？ 是发生在家里、咖啡馆、还是大街上？环境温暖还是寒冷，或者适中？是在安全放松的环境下，还是在危险中？
交互为什么发生在这里地方？ 人们执行这个操作的动机是什么？他们的最终目标是什么，希望达成什么样的效果？
这个操作对他们有何帮助？ 人们为什么会反复进行这个操作？他们会从中得到什么回报？这个操作让他们收获什么，如何向别人描述这个操作？

要知道，如果忽略了以上任何一项，人们绝不会在毫无价值的事物上投入时间精力。

人们操作物体，是为了创造更好的自己，即便这个行为似乎对他们不利（例如减肥期间吃快餐食品）。对这个人而言，负面的行为仍然从本质上被认为是有价值的，这就是为什么必须要理解行为。

只有理解（并产生共情），才能问出更好的问题，提出更好的假设。

插画来自Crafticons

人本主义结合工程学

当你开始提出正确的问题，并把答案放在一起研究，这时候就可以开始进行用户体验的设计部分了。

设计包含了对交互实用性的理解，还有它对于体验的影响。

上文中，我们提到了工具，还有它如何作为人与物体之间的操作媒介。用户体验的核心组成之一，就是理解工具的优劣与局限。

我们再次用智能手机（物体）和手（工具）作为例子。

手

优势两只手可以独立行动。它们每天、每次都在分别执行不同任务。手还可以承受一定的重量，并持续一定的时间。多数手都有5只手指，可以绘制形状和手势。
劣势手的大小会随基因和其他外部因素变化，例如人口统计因素。手也容易犯错，并且它的表现受制于温度。太热会打滑，太冷会僵硬。随着人的年龄增长，手也会变虚弱，要忍受关节疲劳和关节炎。
局限像身体的每个部分一样，手也会疲劳和受伤。在某些情况下，手部会在数天内、数周内受损，甚至是永久性受损。手（和手指）的移动范围和APM（每分钟操作）有限。只能伸展一定长度，在一定时间内只能完成一定量的动作。

了解了所用工具的能力，就可以提出更深入更有趣的问题。例如下面这些：

操作物体时，工具是什么样的？
工具的使用有没有对人产生约束？
使用工具会不会大量耗费资源？
如何改进这些工具？
还有什么工具可以作为补充？
有什么工具可以替代它？

设计体验的关键部分之一，就是理解交互中的工具。

理解了交互中的工具，就可以开始研究如何完善交互和物体了。

这个阶段可以做两件事情：

研究可能性和不可能。
明白资源和时间的局限。

设计体验不只是理解人、物体和工具。它还包含了对于可能性与不可能的更深入理解，还有产生解决方案需要耗费的资源。

说起来很简单……

X的理想解决方案是Y。

但是如果Y要耗费太长时间呢？如果Y的代价高到无法承受，以至于根本做不到呢？

Y方案可能比其他现有方案都提升了100%，但有没有只提升了20%的方案？鉴于时间和代价，能不能使用那种方案呢？

插画来自Crafticons

你的个人标签

就像所有创意类工作一样，你创造的每一件用户体验设计都能代表你自己。

它里面包含了部分的你、你的知识、还有过去经验。那就是你的个人标签。

你对于用户体验世界的思考和感受非常重要，它会将你的创造物（还有你的思考）与其他区分开来。

这并不代表可以忽视真正执行操作的人。

一旦忘记了用户，就会陷入自我参考的设计中，要不惜一切代价避免这种状况。

如果为自己而设计，就无法为别人解决问题，也就无法使他们受益。

始终要让自己站在别人的立场，而不是自己的。

尽管这对于用户体验而言并不容易，可以通过提出问题来评估利益与代价：

人们为什么要使用这个？
人们为什么不愿使用这个？
它给你什么感觉？
别人也有相同感觉吗？
有什么其他方式？为什么？
如何检验这些假设？

记住，创新来自多样化。

如果能理解并参与以上流程，就能让你自己的体验成为整个用户体验的一份子。

总结

像用户体验设计师一样思考，其实只有这简单的3步：

深入研究执行操作的人。
理解如何设计交互，还有它的潜在限制条件。
将你的独特思维、感觉和个人个人标签运用到作品中。

只要保持好奇心、同理心，热衷于研究身边的世界，像用户体验设计师一样思考，其实很容易。

原文链接：https://uxplanet.org/thinking-like-an-experience-designer-25610c4fa7cf#.l7dkd1gkq

作者信息：Cassius Kiani Partner at Mikleo.

移动用户体验设计：错误状态

hi@victor42.work (Victor42) — Sun, 18 Dec 2016 10:38:15 +0000

[国外设计第157期]

*“错误”时有发生。*在App与生活中都会发生。有时是因为我们犯了错误，有时是系统错误。无论错误原因是什么，它们——还有解决方式——对用户体验影响深远。但它往往不被重视，草草处理错误、组织混乱的错误信息会使用户沮丧，最终抛弃你的应用。相反，处理得当的错误提示，能把失败变为惊喜。

本文中，我们会讨论如何优化app的设计，来尽力防止用户错误，并建立良好的错误信息。

错误是什么？

错误（或者说错误状态）发生在app未能完成某个预期操作时，例如：

app不理解用户的输入
app出错了
用户试图同时进行两个矛盾的操作

无论是谁引起的，每一种错误对于用户而言，都会成为一种阻碍。好在，设计良好的错误处理能减少这种阻碍。

预防用户错误

设计过app的同学，应该很熟悉各种限制条件。例如网络状况差的情况下，很难填写表单，而且几乎没法同步数据。要考虑到这些限制，设计更易使用的app，将错误减到最少。换句话说，应该提供建议、加上限制、保持灵活，第一时间预防用户犯错。

Twitter因推文的字数限制而出名，他们会在用户达到字数上限之前提出警示。

让错误信息统一有效

10条可用性启迪中建议，要清晰优雅地表达出错误信息。有效的错误提示应该提供如下信息：

明确表达发生了什么
描述用户应该如何应对
尽可能多地保留用户输入的信息

用户输入错误

用户输入信息验证的意义在于与用户交流，并引导他们克服困难，应对不确定。

输入验证的首要原则是：“出现错误时告知他们！”简单说，优秀的表单验证由3个重要元素组成：

在适当时机和位置告知错误
为错误信息选择合适的颜色
用简明的语言描述错误

所有这些都有一个主要目标——避免困惑。

适当的时机和位置（行内验证）

用户并不喜欢填完一个长表单并提交之后，才发现哪里填错了。告知输入信息正确与否的恰当时机，正是在输入之后。实时验证就该出场了。

实时行内验证会立刻对用户输入作出提醒。如果使用行内表单验证，就会清晰标明有错误的输入项，发生错误时，提交按钮也会置灰。用户不必等到点击提交按钮才看到错误，他们能更早改正错误。

图片来源：Google

下面是几个行内表单验证的案例：

不匹配的内容 提交之前检测出的错误。图片来源：Material Design
超过或不满规定字数 带有字数统计的输入框与错误提示。图片来源：Material Design

合适的颜色（直观的设计）

*颜色是设计验证信息的最佳手段。*因为它能引发本能作用，红色的错误信息和黄色的警告信息非常有效。错误文字应当易于阅读，与背景有足够的反差，让人能注意到。但要确保界面中的颜色适用于所有用户，这是优秀视觉设计的重要因素。

让人注意到提示信息。图片来源：Material Design

简明的信息（发生了什么）

确保错误信息是写给人看的。要实现这一点，就得用用户的语言来说话，避免使用技术术语，用用户的词汇来表达一切。验证信息要清晰陈述以下内容：

什么出错了，为什么。
用户接下来该做什么来解决错误。

【图注：左图中的错误提示为，“输入日期错误”；右图中的错误提示为，“这是个过去的日期”。】

典型的错误会直接说“信息不正确”，没有告诉用户它为什么错了（是数据类型错误？还是已经被占用了？）。确保信息清晰明确。图片来源：Material Design

应用的错误

应用也会发生错误，它不受用户输入影响。这种情况下，用户会遭遇意料之外的状态。显示错误时，要解释一下用户为什么一无所获，如何摆脱当前处境。

同步错误/加载错误

当同步或链接断开，或者内容加载失败时，应该告知用户。要预先告诉他们。由于没有数据，可以使用空状态填补空隙。可悲事实是，许多空状态看起来……真的是空的。下面的例子中，错误界面只说“发生了错误”，没有提供一点有用的信息。

这个空状态界面是个死胡同。图片来源：Spotify

把错误提示想象成与用户的一场对话。在遭遇失败时，用友好且有意义的空状态来沟通。提供基本所需的信息来帮助用户，鼓励他们解决问题。

走丢了，失去连接，就像置身于荒岛？可以跟随建议，保持冷静，点起篝火，持续刷新。图片来源：Azendoo

在适当时机，提供链接或按钮帮助用户完成任务。但要提供你所能做到的操作。如果明知道会失败，就不要放出“再试一次”这样的选项。

不要展示原始错误信息

下面这个例子中的消息非常晦涩吓人。

【图注：操作无法完成。(WDGeneralNetworkError error 500.)】

这种错误信息，是由开发者写给另一名开发者看的。

不要假设人们知道提示信息的来龙去脉，或者指望他们是技术专家，要用简单的语言告诉人们哪里出错了。如何用人话来解释这些错误？把它写下来，那就是你的错误提示文案。

不匹配的状态错误

用户试图执行冲突操作时，会引发不匹配的状态错误，例如在飞行模式下拨电话，或者离线状态播放在线视频。应该清晰表明他们所处状态，避免他们陷入这般境地。简单说，就是不要让用户执行无法完成的任务。

清晰表明错误的原因和出处。图片来源：Material Design

结论

*从不出现的错误信息才是最好的。*最佳方式是引导用户向正确方向前进，第一时间预防错误发生。但当错误确实发生时，设计精良的错误处理，不仅能教育用户按你预期的方式使用app，还能防止用户感到茫然。

感谢阅读！

原文链接：https://uxplanet.org/mobile-ux-design-user-errors-1ad1f5d664f9#.fzcsdis0n

作者信息：Nick Babich I’m a software developer, tech enthusiast and UI/UX lover. http://babich.biz

文字聊天的体验

hi@victor42.work (Victor42) — Sun, 11 Dec 2016 01:20:29 +0000

图片来自Dribbble。

文章标题可能有点误导，这里不是要讨论IM产品的体验设计，而是聊天内容本身的阅读体验。

数字的强迫症

前几天，主管问我要手机号和身份证号，用于制作工作相关的证件。由于是钉钉上沟通的，很简单一件小事，我回了个OK，然后顺手发过去了：

××（我的姓名）手机号：186×××××××× 身份证：360103××××××××××××

我盯着发出去的消息，细想觉得有点问题，可以优化一下，于是我又发了一遍：

××（我的姓名）手机号：186 ×××× ×××× 身份证：360 103 ×××× ×××× ××××

我说这样便于阅读。主管说小伙子不错啊，强迫症又犯了。然后我回了一句略微有点装X的话：“用户体验无处不在。”并且配上一个咧嘴笑的表情。

事情到此告一段落。不过既然硬要把这件事情扯上用户体验，那就不妨深入思考一下吧。仔细一想，发现这真的不是没事找事。而且，我发出去的消息，其实也不算是一件合格的设计产物。

把回复消息的形式当成一项设计课题，既然是设计，绝对离不开用户场景和目标。场景很明显，对方在手机版钉钉上查看这条消息。但目标是什么呢？其实我之前并没有问清楚。要我的手机号和身份证用来制作证件，但肯定不是我主管本人制作，她要把这些信息再传递给制证者。通过什么方式传递出去？用纸笔填写还是手机转发？这可有天壤之别！

纸笔填写

如果用纸笔填写，鉴于任务比较简单，制证者不太可能用上什么逆天的高科技手段来收集信息。所以，一定会经过最原始的“阅读——记忆——书写”过程，才能完成信息的转移。书写的环节我无法掌控，但阅读和记忆就取决于我发过去的内容形式了。

有研究表明，人类短时间内能够记住的连续信息长度，极限是7个字符，超过就必须分段记忆了。我们能记住五言诗、七言诗，历史上也出现过九言诗，但生命力就弱得多。屈原的《离骚》算是一个特例，其中有不少诗句超出了7个字，但考虑到“兮”字作为语气词存在，有实际含义的内容仍然多数控制在7字以内，所以我们能从中感受到强烈的诗句韵律。

但7毕竟是个极限，能记住，却不容易。想一想我们平时收到的各种短信验证码，最多的是4字和6字两种。4字验证码我们能一气呵成记下，6字验证码我们通常会分成3+3两段来念。这也证明，我们能轻松记住的信息长度，一定少于6个字符。中国的11位手机号基本都按3+4+4的方式阅读，这已经被广泛接受。我们和朋友确认联系方式时，会说“没错，就打我那个186的号码”。网络上给手机号做隐私处理，会把中间的4位变成星号；报手机尾号，也通常是取后4位，可见这种划分根深蒂固。至于身份证号的划分，生活中见得倒是不多，毕竟它的出处——身份证上都是挤作一团的。但它天然带有特定含义，要给它划分非常简单，也容易得到大家认同：6（省市区）+4（年）+4（月与日）+4（尾号），相信绝大多数人都会这样记忆自己的身份证号。

这里还可以再插一个题外话，能够轻松记忆的信息长度，最长到底是4还是5呢？我认为是4，虽然没有找到直接证据，但上面这些现象已经能间接佐证了。如果手机号和身份证号还不够，我们可以再加个银行卡号。各家银行卡的卡号位数可不一样，但它们如果有意划分，一组最长必定不会超过4个数字。

长串数字，发出去是什么格式，对方就会按什么格式来阅读和记忆。这不仅仅是机器应该给予我们的方便，我们每个人也同样应该给予他人方便。

手机转发

回到正题，如果我的手机号和身份证号是要通过手机转发出去，并且复制填入某个后台中，那情况就完全不同了。

我无法确定录入信息的后台能不能排除空格，如果把便于阅读的格式粘贴过去，很可能最终记录下的手机号是“186 ×××× ××”。而且我主管用的是Android手机，无法安装Pin这样的剪贴板工具。把数字从整条信息中提取出来，是一件非常棘手的事。

在手机IM中，往往只能整段复制。

所以，如果要通过IM复制到别处，最佳的信息格式应该是这样：

姓名：

××

手机号：

186××××××××

身份证：

360103××××××××××××

这让我想起自己的微信公众号。由于我只在那边发文章，基本没空回复或互动，所以设置了一条自动回复，引导读者通过微博联系我。

很长一段时间，我都直接把微博昵称写在自动回复里：“我除了发文章之外，不会经常打开公众号。有需要联系的朋友，请新浪微博私信我@我_ColaChan。”

直到有一次，我尝试给自己发信息。得到了这样的回复之后，我发现要去微博里找到自己并不容易，很难从中单独复制出微博昵称。于是做了一些改动：“我除了发文章之外，不会经常打开公众号。有需要联系的朋友，请新浪微博私信我，回复‘微博’获取新浪微博昵称。”回复微博两字之后，会再收到一条消息，内容只有“@我_ColaChan”。

虽然增加了一步，反倒是方便了信息的提取。

消灭错字

既然要说文字聊天，那当然不仅限于数字和ID，篇幅最多的日常对话才是核心。日常沟通的体验，又如何界定这个“好”与“坏”？

中学的时候，大家都没有手机，用电脑聊QQ是同学死党间最主要的在线交流方式。我记得那时候有同学说，和我聊QQ感觉很安心。我问为什么，她说我从不打错别字。

嗯……现在回忆起这件事，确实有一定道理。如今生活与工作节奏远比学生时代快，加上输入法的候选词动态排序，日常沟通中难免打错字。但关键在于对待错别字的态度。我在发送消息之前，往往会自己看一遍，发现错字一定改正。

我知道许多人用微信、用QQ发消息时，是从不检查的。输完不检查，输入的过程中也不检查，噼里啪啦一通打完就发出去了。即使输入过程中发现打错，也懒得改正，指望对方通过上下文领会他的意思。于是你会收到“恩爱”、“不会你哦”这样的奇怪词语。如果关键词语打错，就要很费劲猜测他的意思，甚至要做一些同音词联想和键位联想。我联系过的许多印刷厂老板，还有部分合作过的开发同学，阅读他们的消息极其费劲。当然，忙起来确实没空检查，可以理解。不过至少可以肯定，没有错别字的文字聊天，是一种人人渴望的好体验。

语言是严肃的

我收到过这样的消息，一串连珠炮轰过来：

在

UI需要手绘?

不会手绘不行吗

投简历没有回应是不是经验不够

ui规范有那些啊 ios andriod都要看啊

在吗在吗、

没有作品怎么办啊？

不过以上内容并非原话，我只是凭记忆把它还原出来，但是很有代表性。不用标点、错用标点、空格代替标点、不删除多余的空格、中英文标点错用、固有名词写错、“那”和“哪”乱用、不按话题归类分段……日常沟通中的毛病基本都集齐了，可以召唤神龙了。

语言的存在，一大作用就是让人们相互传递信息，它是人类对一切概念表述所达成的共识。如果不遵循语言的规范，就相当于脱离或者至少偏离了人类赖以沟通的渠道。这不是小事。在我看来，即使是日常文字沟通，都非常有必要区分“的地得”，有太多类似细节被忽视。不是为了维护语言的纯正性，这方面我不关心。但为了对方有更顺畅的阅读体验，规范的语言一定更有帮助。

写新闻稿的心态

说出去的话就像是发出去的新闻稿。除非是与最好的朋友放飞脑洞、海阔天空扯淡，否则谈话必定有个主题。

还是上面那一段信息，除了不严谨之外，话题散乱更是致命伤。面对这样自言自语般的问题，要从何答起呢？如果想表达自己的困惑，希望得到对方的帮助，以此为主题写一封求助信。那上面这段连提纲都算不上。

易于阅读和理解的消息，是有特定结构的。先用一句话讲清楚在讨论的是一件什么事情，然后展开说细节，讲完一个再讲下一个。如果是告知对方信息，要清晰表明关键要素。如果需要对方做什么，至少说明原因，并最好提供可行方案。如果是反映问题，也要提供足够对方排查问题的线索。

所有问我电脑问题的朋友和亲戚，几乎都是这么一句：“帮我看看电脑吧，好像出问题了。”然后就没了，就等着我提问了。我多希望哪怕有一个人，问我电脑问题的时候，能主动告诉我出问题时显示了什么，以前有没有出过这个问题，上一次和第一次出问题是什么时候，出问题之前做过什么，之后又做过什么，尝试过哪些解决方法，有没有效果，引发了哪些变化。

试想有个人家里遭贼了，贵重物品被洗劫一空。警察赶到时，问他任何问题，他只会回答：“我家都遭贼了，赶紧帮我抓到小偷啊，不然日子都没法过了！”显然，这案子是破不了的。

只要交谈有主题有目的，就必须追求高效。十分钟能说清楚的事情，由于糟糕的交流体验，也可能要说上一个小时。浪费别人的时间是一种罪过。

现代大字报

我们国家一大特色：标语横幅大字报。城市抓环境治理，挂一条横幅：“举各方之力，谋治水之略，建和谐之城，兴水乡之貌，树世代之功”。建筑工地搞安全生产，挂一条横幅：“安全创造幸福，疏忽带来痛苦。安全就是效益，安全就是幸福”。医院要提升业务品质，挂一条横幅：“创建平安医院，构建和谐医患关系”。

我们这里不去讨论这些标语本身存在的意义。至少有一点，决定挂这些标语的人，并没有弄清楚受众是谁，要以什么样的口吻来写。我路过部队军管区看到的一则标语就很不错：“听党指挥，能打胜仗，作风优良”，这是一句有主次关系层层递进的标语，深究细想，逻辑其实非常严密。关键，它直白易懂，没有模糊不清的概念。

新闻与官媒采用模糊的口吻来表达，是为了给任何事情留有余地，同时尽可能包容，保证内容中提及的各种概念定义正确。但不要觉得这些离我们日常生活很远。我们工作中的沟通，是不是也碰到过一些人，文风很官方，或者很卖弄？想一想你看到过多少这样的引导页：一张不明所以的插画，购物车、购物袋、钱袋满天飞，上面写着一行字，“海量优惠享不停”。

有一则广告我印象很深，品牌没记住，但记住了一个场景。广告片要表现出酱油制作工艺的传统和纯天然，代言人站在高台上，面对镜头，伸手指向身后的加工基地，黄豆在一大片空地上铺开晾晒。他用一种不带任何技巧雕琢的语调说：“就在这晒，就靠太阳晒。”若是换了一些不说人话的创意公司，写出来的台词很可能会变成：“XX公顷黄豆加工基地，天然晾晒风干工艺。”这样的阅读体验是非常无感的。定义再正确，描述再精准，概念再华丽，就是没有画面感。

可以在此感受一下这则广告的直白和平实：http://t.cn/RcxcZ3I。

说到这里，我想起和同学一起调侃过的一个段子：

“滚滚长江东逝水……”

“说人话！”

“大河向东流哇！”

话题守护者

工作之后，第二次有人评价我的聊天风格，说我“用绳命在聊天”。我追问下去，对方说和别人聊天都是你一言我一语。唯独和我聊天，会看到我一直保持正在输入的状态，长的能持续十几分钟。倒杯水回来，发现我轰隆隆发来一通长篇大论，分成好几大段，逐个回应之前瞎扯歪楼产生的各种分支话题。

噢，原来我还有这样的习惯！不放走任何一个话题，拒绝不了了之，必须得出结论。其实可以想象，如果纯粹是闲聊找话题，和我这种人聊天应该会蛮累的。说实话我并不想这样，我内心深处向往一次只说一件事。但既然楼已经歪了，虽然不是我造成的，我还是会本能地尽力支撑住它。这样聊天，如果对方感到舒畅，我感觉其实是很累的。

长篇大论这个习惯，有好处也有坏处。坏处当然是要让人等，不能及时得到回应。但好处是可以避免节外生枝。假如回复到一半，其中的某些信息让对方想起另一件事，在你余下内容到来之前，对方的思绪就已经飘走了。他就可能会开始插话，从而产生更多的分支话题，这情况太常见了。

这一点让我非常纠结。之前说过，浪费别人时间是一种罪过，那么就不该让人等这么久咯？但如果不加以控制，任由话题爆炸，被遗漏的话题碎片，在将来的某个时候或许还要旧事重提，同样是在浪费时间。文字聊天，如果为对方的体验着想，当然要选择一种花费时间较少的方式。任由话题爆炸，怎么看都有点因小失大。

哦，呵呵，[呲牙]

文字聊天最讨厌这几个回复了，堪称话题终结者。为什么呢？内容短、没有实际意义，这没错。但根源在于它不能反映对方的状态。虽然回复了，但不予置评，效果和没有回复一样。你仍然不能确定对方是否理解了你发送的内容，他完全可以心不在焉地打出以上回复。

这就好像你发一封邮件出去，当你按下发送按钮，没有菊花转，没有toast，界面仍然停留在写邮件窗口，里面仍然显示着你的邮件内容。然后你把写邮件的窗口关了，发现已发送里并没有这封邮件，发件箱也没有，草稿箱、收件箱、垃圾箱、广告邮件里都没有。WTF……

看似荒唐，但这样的对话在现实中绝对不少。Android开发同学问我要一张切图，我问他打算如何实现，是切成固定尺寸还是.9图。他回了我一个“可以”。我假设他一句话没打完，不小心按到回车，先把这两个字发出来了（这种事情每个人都干过，应该谅解）。但我等了半分钟，根本连“正在输入”的状态都没有。话题终结了，并且没有得出任何确切结论，只能开启新一轮追问。

其实再也没有谁比技术同学更了解反馈的重要性了。比如TCP/IP服务器请求的过程，需要“三次握手”：首先客户端发送信息给服务器，服务器知道有东西要接入了。然后服务器把收到的信息再发回去，说这是你发过来的东西没错吧？是你要接进来吧？最后，客户端把收到的信息与自己之前发出去的信息一对比，正确无误，再发信息给服务器，说没错就是我，我们接通电话吧。

我们人类对于上下文的理解能力很强，相比之下机器则笨拙地多。但无论上下文多详细，明确的反馈一定要有。再小的事，起码都应该回复一个“好的”或者“收到”。如果有选择，至少复述一遍所选的选项。

总结

回忆一下形形色色在IM上打过交道的人，有很明显的落差。有的人沟通起来感觉很顺畅，有些人简直恨不得要一通电话轰过去。同样一件事情，文字表述的品质不同，接收者的体验大相径庭。

体验设计这个学科，说它无处不在一点也不过分，非常接地气。假如抛开各种方法论，剩下的其实就只有一句话：替别人着想。

全新的Uber App设计

hi@victor42.work (Victor42) — Sun, 04 Dec 2016 13:33:27 +0000

[国外设计第156期]

一切都从一点点小转变开始

声势浩大的改版设计总使人望而生畏。有太多变化与未知，有可能会失败。但我们知道，如果想要打造未来，我们就得欣然接受挑战。这就意味着不仅仅是在外观上下赌注，也是在重新想象整个流程。

Uber原本的主旨很简单，“按下按钮，搭上一辆车。”你不必设定目的地，也不必选择产品，只要按一下按钮，或者两下，之后就不用管了。

随着新功能的增加，产品正在变得更复杂，我们继续坚持原先一个按钮的简洁与速度。但我们意识到，速度并不只在于减少点按次数、简化流程。人们赶着去看电影的时候会选错产品（人民优步，说的就是你）。没有推荐最佳上车点，错失了节省时间的机会。

在快速成长期间，要看清前方的路并不容易。所以，要离开起初的舒适区，我们决定在新的Uber体验设计中做一点小转变：“从终点开始”。

去哪里？

有时候，为了更快地从A点到达B点，我们反而需要慢下来，查阅一番，看看前方有什么。原先Uber只需要你想着叫一辆车，现在我们会问你“去哪里？”

一切都由此开始，并围绕它进行。下一步的界面元素飞入画面中，路线动画通向你的目的地。这是一种关注未来的哲学，在乎你的去向。你的每一个操作，都驱使你进入下一步，你每次的行程体验都会得到反馈。直到你准备去往下一个目的地时，它就已经出现了。

之前这套体验的最大败笔在于产品选择面板。一个界面包含了……比如说3-4个选项，其实这都不算多，多的都能超过8个——洛杉矶和其它一些城市的乘客可以作证。更糟糕的是，当我们要发布某个运营活动选项时，已经没有空间了，我们只能直接把它放在屏幕中央。

这个功能经历了绝大多数的循环与迭代。从列表到标签栏，再到翻页，还有变化的每一个中间状态。我们每天都带着由Framer和Swift生成的原型，对用户进行访谈。一天天，一周周，我们迭代修改这些原型，直到我们获得正确答案。我们发现，人们不在乎你在一个界面中堆砌了多少种产品和功能。

现在，知道了用户的目的地，我们有充足的环境信息，能提供机会让你做出更佳的选择。我们预先展示出产品费用，你就能做出更清晰简单的选择。对于人民优步和UberX，我们展示出到达时间，方便你预订晚餐。

因为你总是关注接下来的事情，我们的app也会持续处理下一步行程，为你节省时间。你在选择产品时，它会搜索最快的上车点。当你按下叫车按钮，我们立刻让你看见未来，告诉你接车司机是哪一位，更快给你预估时间。

前往目的地

我们一开始就决定打造一个平台，让其它人可以使用，并且以此为基础进行内部延展。创造来自整个团队，而不仅仅是设计师；工程师、产品经理、运营、市场，还有团队其他许多有天赋的成员都包括在内。创造全新产品的同时打造设计系统，这颇具挑战，尤其在这种规模情况下。

理想状况下，你可能会倾向于采用标准的产品设计与平台设计方式，但以我们前进的速度，这完全不现实。不过，这样的限制反而带来了惊喜：它迫使我们在近乎真实的状况下，将平台设计的决策应用于产品设计中，用的是真实的数据，反之亦然。它使我想起一位传奇赛车手的名言：

“如果你觉得一切尽在掌控，证明你还不够快。”——Mario Andretti

我们从大量基础元素开始制定标准，例如栅格、间距、字体、颜色、内容、图标、插画、投影、状态栏、动画、操作选单，然后还有通知、头像、按钮、卡片、日期时间选择器、空状态、表单、页头、列表、地图界面、加载动画与状态、选择器、标签栏这些。但或许最重要的是，我们创造了一个空间能够与乘客在旅途中互动。

享受行程

我们曾经以为，只要你坐进车里，我们的工作就完成了，越早离开我们的app，体验就越好。不过随着一步步向前看，我们意识到我们忽略了旅途中最长的一部分：在途中。

我们考虑过你在旅途中可能想听你喜欢的音乐，想看你前往的餐馆的菜单，想与你将要碰面的人保持联系。我们以你和这段旅程为中心，构建了一个内容平台。

新的Uber应用都围绕你、你想做的事情、你想去的地方而展开。我们从终点开始，让你更贴近下一个起点。

这里要特别感谢Peter Ng、Bryant Jow、Nick Kruge还有整个Uber Design团队。不过除了设计之外，收获最大的部分就是与神奇的工程师与产品经理团队合作，是他们将设计变为现实。设计不仅仅是设计师的职责，它属于我们全体。在我们的工作环境中，我们从一开始就与工程师与产品经理混在一块儿，为我们的用户寻找最佳方案。如果你感兴趣，我们还在招聘人员，设计更多其它产品——我们需要你的帮助。联系我们吧，一起喝杯咖啡，然后加入我们。

新版本正在逐步向全世界开放，年底将会发布更多功能。希望你和我们一样兴奋。结束之前，还有一段新应用的动画短视频：【译者注：请自备梯子】

https://www.youtube.com/watch?time_continue=46&v=I1DdoN6NLDg

原文链接：https://medium.com/uber-design/designing-the-new-uber-app-16afcc1d3c2e#.usa7xc2k8

作者信息：Didier Hilhorst Design @Uber

乐观派UI：真实的谎言

hi@victor42.work (Victor42) — Sun, 27 Nov 2016 16:08:31 +0000

[国外设计第155期]

想象3个用户界面（UI）一起去了酒吧。第1个点了一杯酒，然后又再点了几杯。几小时后，它买了单，醉醺醺的走了。第2个界面点了一杯酒，直接把钱付了，然后又点了一杯酒，又马上买了单，几小时后也醉醺醺的离开了酒吧。第3个界面刚走进酒吧，马上就已经醉醺醺的离开了——它知道酒吧是干什么的，它非常讲求效率，一点时间也不浪费。你听说过这第3种界面吗？它就叫做“乐观派UI”。

乐观派UI设计并非乐观地看待页面——至少不仅限于此。（查看大图）

我最近参加了许多关于前端开发和用户体验的会议，讨论了心理表现最佳化，我很惊讶，乐观派UI设计是业界一个如此微不足道的话题。坦白说，这个术语本身都没有清晰的定义。本文中，我们来探讨它的基本概念，寻找一些案例，并回顾它的心理学背景。然后，我们讨论掌握这项用户体验技巧的关键。

开始之前，我得说，没有任何一个单独的界面能被称作“乐观派UI”。其实它是界面实现背后的心智模型。乐观派UI设计有它自己的历史和逻辑。

很久以前

很久以前——那时候“tweet”一词还只有鸟鸣的意思、苹果公司濒临破产、人们还会把传真号码印在名片上——网页界面相当单调。其中绝大多数没有一丝一毫的乐观意味。比如一个按钮的交互，可以遵循下面类似剧本来进行：

用户点击一个按钮。
按触发进入禁用状态。
一条请求发送到服务器。
服务器返回信息到页面。
页面刷新，反映出返回的状态。

那个年代，界面与乐观派扯不上什么关系。（查看大图）

站在2016年回顾这些，我们会觉得效率低下；但是相当惊人的是，同样的剧本仍然在许多网页和应用中上演，它仍然是许多产品的交互流程。原因在于它可以预测，而且或多或少总会出点错误：用户知道这项操作已经请求了服务器（禁用状态的按钮表明了这一点），当服务器有响应，更新后的页面清晰表明这种客户端——服务器——客户端的交互结果。这种交互方式的问题很明显：

用户必须等待。如今我们都知道，即使是最短的服务器响应延迟，也会对整个品牌，而非这个单独页面产生负面的用户感知。
每一次用户的操作得到响应，都会以一种相当破坏性方式呈现（整页刷新，而不是更新现有部分），会打断用户的任务流程，可能影响他们的思维轨迹。我们甚至还没说到多任务，心理环境的任何变化都令人不愉快。那么，如果某个操作本意不是改变环境（在线支付就是个需要改变环境的好例子），那么这种改变会在用户与系统的交流中创造不友善的氛围。

不久以前

然后，所谓Web 2.0出现了，提供了新的页面交互模式。它的核心是XMLHttpRequest和AJAX。一种最简单的进度条形式：“菊花”，补足了这些新交互模式，它的基本目的就是告诉用户，系统正忙着处理事情。现在，服务器返回信息后，我们不必刷新页面了；我们只需要对已经渲染的页面进行局部更新。这使得网站更加动态化，为用户创造了更加顺畅和亲切的体验。一个按钮的典型交互如今是这样的：

用户点击按钮。
按钮触发变为禁用状态，按钮上显示出某种菊花图形，表明系统正在运转。
请求发送到服务器。
服务器返回信息到页面。
根据返回的状态更新按钮和页面的视觉状态。

这种新的交互模型解决了旧交互方式存在的一个问题：页面的刷新不会导致破坏性操作，保持用户所处环境不变。相比之前，这种交互亲切多了。

XMLHttpRequest和菊花解决了旧交互方式的一个问题：服务器响应会导致破坏性的刷新，改变整个环境。(查看大图)

这种交互模式已经广泛应用于数字媒介。但还有一个问题：用户仍然需要等待服务器反馈。当然，我们有办法加快服务器响应速度，但无论我们如何努力优化基础设备，用户仍然要等待。比如，研究表明78%的用户对于缓慢或不稳定的网站产生负面情绪。更有甚者，Harris Interactive为Tealeaf做的一份调查显示，23%的用户承认咒骂过自己的手机，11%冲自己手机大喊过，而且4%的用户在网络出问题时扔过手机。延迟就属于这类问题之一。

大约78%的用户面对缓慢或不稳定的网站时，会产生负面情绪。（查看大图）

即使在用户等待时展示某种进度条，如今也于事无补，除非进度条非常有创意。多数情况下，人们已经习惯性把菊花进度条当作系统缓慢的表现。菊花如今已经是一种纯粹的被动等待，用户毫无选择，要么等待服务器响应，要么关闭标签页或整个应用。那么，我们再进一步，改善这种交互；我们来看看乐观派UI的概念。

乐观派UI

正如前文所说，乐观派UI仅仅是处理人机交互的一种方式。要理解它背后的核心观念，我们还是要回到“用户点击按钮”这个场景。不过它的原则用在任何乐观派交互上都一样。牛津英文词典的解释如下：

乐观主义，形容词，对于未来充满希望和信心。

我们从“对未来充满信心”这部分说起。

想一想：用户操作引发服务器错误的频率高么？比如说，用户点击按钮时，你的API经常出错吗？或者用户点击某个链接时经常会出错？说实话我觉得不会。当然，API、服务器载荷、错误处理等级不同，表现也不一样。还有一些其他因素，作为前端开发或者用户体验专家，你可能不会考虑。但只要API稳定可靠，前端以适当方式反馈正确的UI操作，那么由用户触发导致的问题会特别少。以目前状况来看，我敢说不会超过1%到3%。这就意味着97%到99%的状况下，用户点击网站的某个按钮，服务器的响应应该是成功的，没有错误。应该从一个更好的角度来看待这个问题。

乐观派UI基于一个假设，用户点击按钮，服务器在97%到99%以上的状况下返回成功。（查看大图）

仔细想一想：如果97%到99%以上肯定是成功的响应，我们对于反馈就有充足信心——嗯，至少比薛定谔的猫有信心多了。我们就可以写出一个全新的按钮交互剧本：

用户点击按钮。
按钮的视觉状态立刻变为成功。

就是这样！至少从用户的角度来看，仅此而已——不用等待，不用盯着禁用状态的按钮，也没有烦人的菊花转。交互流畅无缝，系统不会粗暴地现身，提醒用户注意它的存在。

乐观派UI交互里根本没有禁用状态按钮和菊花。（查看大图）

从开发者的角度来看，完整的流程是这样的：

用户点击按钮。
按钮的视觉状态立刻变为成功。
请求发送到服务器。
服务器响应发回页面。
在97%到99%的状况下，我们知道响应会成功，所以不用再给用户添麻烦。
系统只会在请求错误的情况下现身。暂时不用担心这块——我们会在后文中讲到。

我们来看一些乐观派交互的案例。你可能很熟悉“点赞”按钮，Facebook和Twitter上就有。我们来看看Twitter的。

很明显，从点击按钮开始。但是请注意用户松开并移开鼠标时按钮的状态。它立刻变成了成功状态！

点了赞之后，Twitter立刻把它更新为成功状态。

此时，我们用浏览器开发人员工具，看看里面的“网络”标签栏发生了什么。

按钮的视觉状态改变，独立于服务器请求存在，此时服务器请求正在进行中。（查看大图）

“网络”标签表明，服务器请求已经发送，但正在处理中。“赞”计数器还没有增加，但由于颜色变了，界面上已经清晰表明了点赞成功，甚至服务器都还没有给出反馈。

服务器返回成功的响应后，计数器增加，但这个变化比色彩改变微弱得多。这就给用户提供了一种流畅连贯的体验，感觉不到任何等待。

尽管赞按钮在视觉上已经变为成功状态，计数器只在服务器响应确认成功后才变化。

在Facebook可以看到另一个乐观派交互的例子，也是点赞按钮。场景非常相似，不过Facebook是连着计数器一起直接变为了成功状态，完全没有等待服务器响应。

Facebook用了和Twitter一样乐观派交互，但它连着计数器一起更新了视觉状态。

但有一点要注意。如果我们观察服务器响应时间，会发现它大约在1秒多。考虑到RAIL模型建议采用100毫秒作为简单交互的最佳响应时间，相比之下1秒显得太长了。但是，用户感知不到任何等待，因为这种交互天然的乐观属性。非常棒！这是心理表现最佳化的又一个例子。

但我们要面对现实：仍然有1%-3%的可能服务器会返回错误。或者有可能用户断线了。又或者一种更有可能的情况，服务器在技术上返回了成功状态响应，但是这个响应仍然需要客户端进一步处理。因此，用户看到的不是失败提示，但我们也不能认为响应是成功状态。要了解如何处理这种状况，我们首先要了解乐观派UI在心理学上为何能起作用。

乐观派UI背后的心理学

目前为止，我还没有听谁抱怨过主流社交媒体上的乐观派交互，就是我们之前提到的那种。那么，我们可以说这些例子已经证明，乐观派UI是有用的。但为什么它们有用？这仅仅是因为人们讨厌等待。仅此而已啊，亲！你可以直接跳到下个章节了。

不过如果你继续往下读，说明你对深层原因感兴趣。那么，我们稍微深入一点，了解这种方式的心理学基础。

大脑研究帮助我们理解乐观派UI起作用的心理学成因。（查看大图）

乐观派UI有两个值得心理学分析的要素：

用户行为的快速响应；
服务器对于潜在错误的处理，无论是网络还是其他方面。

用户行为的快速响应

我们谈论乐观派UI设计时，我们谈的其实是人机交互中的最佳响应时间。早在1968年，这类交互就有了相关建议。当时，Robert B. Miller发表了他的开创性研究“人机对话的响应时间”（PDF），他在其中定义了不同类型的响应，用户可能从计算机得到的反馈多达17种。Miller将其中一种称为“控件操作响应”——按下按钮到得到视觉反馈的时间。甚至早在1968年，就规定了它不应该超过0.1-0.2秒。是的，这并不是RAIL模式首创——这个建议大约已经存在了50年。但是，Miller注明了，对于熟练的用户而言，这么短的延迟都可能太慢了。这就意味着，理想情况下，用户应当在100毫秒内获得操作的反馈。这就接近人体最快的潜意识动作——眨眼。因此，100毫秒的间隔给人感觉通常就是瞬间。“多数人每分钟眨眼大约15次，一次眨眼平均持续100到150毫秒”，伦敦城市学院神经学创立者Davina Bristow说，他还补充说：“这意味着我们每年有9天花在眨眼睛上。”

正由于瞬间的视觉响应（甚至在实际请求完成之前），乐观派UI在心理表现最佳化中，是一种已经完善的技巧。但事实上，那些人们喜爱的能在眨眼间响应的界面，对我们而言应该不算惊喜，真不算。而且这也不难做到。即使在很早以前，我们在用户点击按钮后，会将它变为禁用状态，这通常就足以表明用户的输入了。只不过，界面中的禁用状态意味着被动等待：用户什么也做不了，无法掌控整个过程。这对用户而言很令人扫兴。这就是为什么我们在乐观派UI中直接跳过了禁用状态——我们不让用户等待，直接给他积极的反馈。

处理潜在错误

现在我们进入乐观派UI设计中的第二个有趣的心理学问题——处理潜在错误。一般来说，有大量信息和文章讲述如何以最恰当的方式处理UI错误。但是，本文中讨论的错误处理，在乐观派UI中，最重要的不是如何处理错误，而是什么时候处理。

人们天生会把行为聚类处理，以主观定义的目标或者小目标达成为结束。有时候我们把这些聚类称作“思维轨迹”、“思维涌动” (PDF)，或者就简单称作“心流”。心流状态的特征包括乐趣达到巅峰、精力集中、创造力爆发。在心流状态中，用户完全被这项活动吸引。Tammy Everts的一条推特准确描绘了这点：

【图注：我喜欢心流状态的一切，除了一点，我会连续几个小时忘记眨眼。我的眼睛现在是这样的。】

有时候，辨认出一个人是否处于心流状态非常简单。（查看大图）

在网络中，这些活动聚类的持续时间短得多。我们回顾一下Robert B. Miller的作品。他指出，响应类型包括：

粗略浏览列表信息的响应；
仔细浏览图表信息的响应；
“系统，你明白我要什么吗？”的响应。

他把这几类都归为2秒延迟的类型，用户会获得相应类型的响应。如果不继续深究，我们应该注意，这些延迟也取决于一个人的记忆运转（这是指一个人记住一定量信息所需的时间，更重要的是，不仅记住，还要能运用）。我们作为开发者和用户体验专家，这意味着在操作了某个元素的2秒内，用户会短暂进入心流状态，专注于他们期待的响应。如果服务器在这个时间内返回错误状态，用户仍然处于与界面的“对话”中，这是个比喻。类似于两个人对话，比如你说了一句话，对方委婉地反驳你。想像一下，如果对方花了很长时间点头表示同意（等同于我们UI中的成功状态），但然后最终对你说“不”。这多尴尬啊？所以，乐观派UI必须在心流状态的2秒内传达出错误信息。

乐观派UI必须清楚表达错误状态给用户。最重要的是，它要在用户进入心流状态的2秒内发生。（查看大图）

现在我们掌握了这项心理原则，用来处理乐观派UI中的错误，下面我们就开始面对那1%-3%的失败请求吧。

乐观派UI的悲观一面

目前为止，我听到最多的言辞，是说乐观派UI是一种黑魔法——作弊，如果你这么想也对。也就是说，运用这种方式，我们就是在对用户撒谎，编造他们操作的结果。从法律上说，每个法庭可能都会认同这一点。但我仍然把这种技巧当作一种预期或是希望。（记得“乐观”的定义吗？我们在这里允许某些“希望”存在。）“撒谎”与“预期”的区别在于你如何对待那1%-3%的失败请求。我们来看看Twitter的乐观派“点赞”按钮在离线状态下的表现。

首先，点击按钮后它立刻变为成功状态，这符合乐观派UI模式——当用户松开并移开鼠标，它的表现和用户处于在线状态时一样。

离线状态下，Twitter的点赞按钮仍然在点击后产生视觉变化。（查看大图）

但由于用户离线，请求失败了。

（查看大图）

那么，在用户进入心流状态后，错误信息要尽快给出。2秒通常是心流的持续时间。Twitter以一种非常微妙的方式表达这一点，把按钮的状态还原回去了。

请求失败后，Twitter以一种低调的方式还原了按钮的视觉状态，没有在视觉上小题大做。（查看大图）

认真的读者会说，失败处理还能更进一步，准确告知用户请求没有发送出去，由于发生了某个错误。这就让系统尽可能保持隐形。但还有一系列问题：

屏幕上忽然出现的任何形式的通知，会改变用户的环境，刺激他们去分析失败背后的原因，但这个原因在错误信息中可能已经说明了。
就像所有错误信息或通知一样，它应该也要引导用户进入新的环境，提供相应的操作信息。
操作信息又会进入一个新的环境。

好吧，可能大家都觉得这开始有点复杂了。因为这样的错误处理对于网站的大型表单有意义，但对于像点击按钮这么简单的事情，它就杀鸡用牛刀了——对于所需的技术开发，还有用户的记忆运转，都太过了。

所以，没错，我们对乐观派UI中的失败要有开放心态。我们要尽快告知用户，保证乐观主义不会发展成谎言。但它应当与环境相称。对于点赞失败，还原按钮状态这样的微小提示足够了——也就是说，除非用户点击的是其他极其重要的状态，需要保证它时刻运转正常。

极端悲观

这就产生了另一个问题：如果用户获得成功的反馈，但是在服务器响应之前就关闭了浏览器标签页，怎么办？最讨厌的情况是，用户在请求发送到服务器之前就关闭了标签页。但除非用户极其敏捷，或者有本事减慢时间，这种情况很难发生。

如果乐观派UI运用得当，所有对于各元素的操作都在2秒内得到服务器反馈，那么用户就得在2秒内关闭浏览器标签页。这对于快捷键而言并不难；但是我们知道，97%-99%情况下，请求是成功的，无论标签页是否激活（只是响应没有发送回客户端而已）。

所以，只有对于那1%-3%的服务器错误，这才算一个问题。然后，有多少人在2秒内匆匆关闭页面？除非他们在比赛关闭标签页，我觉得这个数量没有什么意义。但如果你认为这个关系到特定的项目，可能会导致糟糕的后果，那就应该用一些工具来分析用户行为；如果这种场景存在的可能性足够高，就把乐观派交互限定在非重要元素上。

我有意没有提及那些故意延迟的请求；这些不在乐观派UI设计的范畴内。而且，我们在悲观方面讨论得已经够多了，现在我们来总结一下运用乐观派UI的核心要点。

经验法则

我真诚地希望，这篇文章能帮助你理解乐观派UI设计背后的核心观念。可能你很希望在下一个项目中运用这种方法。那么，开始前请牢记这些：

我们所有这些讨论的前提：你所依靠的API足够稳定，能够返回可预期的结果。这点无需多言。
界面要在向服务器发送请求之前，找出可能的错误和问题。最好能够完全去除可能会导致API返回错误的因素。UI元素越简单，越容易运用乐观派UI。
在简单的是非选项上运用乐观派模式，只有成功与失败两种响应的元素。例如一个按钮的服务器返回状态包含“是”、“否”、“有可能”（每一种都代表了不同程度的成功），这种按钮就不适合用乐观派模式。
了解API的响应时间。这点至关重要。如果你知道某个特定请求的响应时间一定在2秒以上，首先应该优化API到最佳性能。之前提到，服务器响应时间在2秒以内，乐观派UI才有最佳表现。超过2秒会导致难以预期的结果，用户会更加挫败。千万注意。
乐观派UI不仅仅是点击按钮。这种方式可以运用于页面中的各种不同交互，包括页面的加载。例如框架页面就运用了相同的观念：你预期服务器能成功返回信息，所以直接向用户先展示占位符。

（查看大图）

看得出来，乐观派UI设计并不是网页中的新奇事物，也不是什么先进技巧。这只是另一种方式，另一种心智模型，帮助你掌控产品的预期表现。乐观派UI设计基于人机交互的心理学基础，聪明地运用它，能够帮你的网站树立更好更流畅的体验，同时，需要做的其实很少。但是，为确保这种模式真正有效，避免产品向用户撒谎，我们必须理解乐观派UI设计的原理。

资源

“人机对话的响应时间” (PDF), Robert B. Miller, Fall Joint Computer Conference, 1968
“RAIL简介：以用户为中心的表现模型,” Paul Irish, Paul Lewis, Smashing Magazine, 2015
“移动端网页的压力：网速对于情绪与品牌认知的影响,” Tammy Everts, Radware Blog, 2013
心流在人类发展与教育中的应用, Mihaly Csikszentmihalyi, 2014
“移动端设计细节：避免转菊花,” Luke Wroblewski, 2013
“性能的重要性，第2部分：感知的掌控,” Denys Mishunov, Smashing Magazine, 2015

原文链接：https://www.smashingmagazine.com/2016/11/true-lies-of-optimistic-user-interfaces/

作者信息：Denys Mishunov Denys is a frontend developer living and working in Norway while advocating psychological optimizations around the world. Since the beginning of 00’s he has gained experience with a wide range of frontend tasks. Being originally on “CSS side” of development, for the last years Denys has been building javascript applications, continuing breaking CSS, abusing HTML and working with optimization of pretty much all aspects of the frontend at Digital Garden AS (fastname.no and uniweb.no). Passionate about science, history, psychology, in his day-to-day job Denys enjoys getting to the heart of the matter of things and processes. Cycling, photography, impressionist paintings and many more can trigger his attention.

Eyefluence：混合现实缺失的一环

hi@victor42.work (Victor42) — Sun, 20 Nov 2016 00:03:08 +0000

[国外设计第154期]

注：本文来自我与Robert Scoble合作的新书《Beyond Mobile: Life After Headsets》中第6章的节选，目前尚未发布。这个章节关注一家你不了解的企业：Eyefluence。由于它只从事B2B业务，你很可能没听过他们。不过，如果未来你有机会用上增强现实或混合现实设备，它的体验就取决于这家公司提供的技术。

Jim Marggraff和David Stiehr，于2012年联合创立了Eyefluence，不过那时候他们早已就眼球追踪技术展开合作了。他们开始探索各种途径来为此技术赋予价值，就像它的字面意义那样。

眼球追踪技术本身并没什么大不了。它早在100年前的PC时代就出现了。科学家使用纸笔创造了一种研究方法，研究人的大脑在阅读时如何工作。到80年代，这种方式被运用到计算机中。当时，名为Marcel Just和Patricia Carperter的两位心理学家创立了理论，证明眼睛看到事物之后，大脑立刻就开始处理相关信息。

除非人类继续进化，否则再也没有什么比这个更快的了。

科学家发现了一系列领域能发挥眼球追踪的价值，例如心理学、心理语言学、还有其他健康相关领域。它能让四肢瘫痪者通过点头和眨眼，操纵屏幕上的物体。史蒂芬·霍金的语音合成系统就用了这种技术，让他的思想能够转化为相仿的语音。后来，一家名为Fove的头戴设备制造商，将它引入虚拟现实设备。动作游戏玩家欢呼雀跃，他们能够以前所未有的速度击杀外星人。

但是这些，都与大脑理解眼睛读到信息的速度相去甚远，这正是Eyefluence的研究方向。

他们利用了现有的眼球追踪软件，在其上进行扩展建设，并取得30项专利保护。然后诞生了一种新式的头戴设备操作软件，他们称之为眼控交互（EI）。

Eyefluence不像眼球追踪那样，仅仅是观察用户眼球运动，从注视、眨眼或点头中获取线索。他们的EI软件会观察用户在看着头戴设备的什么位置，并对自然的眼球运动做出反应。他们希望这些专利能够使它在这类软件中自成一派，在可预期的巨大市场中，获得强有力的竞争地位。

Marggraff告诉我们，Eyefluence与多数主要头戴设备制造商建立了不同程度的合作。

EI软件不是纸上谈兵，它在实际使用中大获赞赏。我们各自体验了演示版产品。Scoble在SXSW大会看到它，立刻折服了。我们两人当中，他对于新科技有更快、更直观的理解。

作为记者，Israel带着多年来形成的怀疑态度，更多关注商业策略。他见证了许多技术昙花一现，相关产品最终也倒在不成熟的市场面前。他在5月采访了位于加州Milpitas的Eyefluence公司总部，并且没有抱太大期望。

在那之前，Israel已经使用过大多数新式头戴设备，他怀疑这些有多少能最终生存下来，更别说盛行起来，像智能手机那样深入生活。他尤其担心个人的生产效率。

他之前与Marggraff谈话时，这名创始人强调说，今后十年内，头戴设备会是人们唯一需要的数码设备。他预言Israel的下一本书可能会用眼睛来书写，而不是用手指在键盘上书写。

Israel的质疑不止在于文字处理的挑战，他还怀疑表格绘制和演示的生产效率。

Israel像许多其他作者一样，花在桌面电脑上的时间比手机多。他从不觉得长篇写作可以离开外接键盘和大屏幕。使用混合现实眼睛写书的点子，对他来说听起来像虚无缥缈的幻想。

但是，观看了一段15分钟的演示后，其中包括Marggraff的两分钟Eyefluence教学视频，Israel就开始期待在不远的将来，能使用智能眼镜设备书写任何东西。

快速打地鼠

Marggraff给Israel做了2分钟的演示，然后他发现自己就开始毫不费力地通过眼睛移动和打开物体。他感到很放松，而且发现自己浏览地比鼠标操作的设备更快。仅仅通过看向一个图标，他就完成了机票预订，还看到他的医生如何使用X光。

Israel体验了一种往常没有的反转：不是去使用某个技术来完成目标，Eyefluence直接把技术带到了他面前。

在这个演示之前，Marggraff聊到了他的哲学博士为主的团队多年来如何研究人眼。Israel没怎么放在心上。几乎所有的创始人都会夸大团队能力、教育水平和独特文化。

现在，Israel体验过这项新技术后，他马上意识到，在他看着屏幕的同时，屏幕也在看着他，在观察他看着哪里，视线停留在何处。他有意四处游移视线，避开Marggraff请他看的地方。这项技术真的跟随他的眼睛，而不是Marggraff的指引。演示非常真实，软件了解他想要什么，它正在观察，据说还能记忆。

一个会观察你、了解你的软件还挺吓人的，我们之前这么写过。虽然这一点确实非常吓人，但Israel玩打地鼠玩得非常开心，以至于没有被分散注意力。打地鼠这个游戏1976问世，不过Israel之前并没有玩过。

如果你也像Israel一样，是那少数没有玩过打地鼠的人，那么简单介绍一下：这个游戏的目标，就是当这些可爱的小地鼠从地下钻出来，露出微笑的脑袋时敲打它们。打中的越多，分就越高。

起初，Marggraff指导他通过眼球追踪技术敲打地鼠，这需要点头。每当地鼠出现，Israel点头一击。随着他进入状态，他点头敲打的动作变快了。游戏结束时，他认为自己作为新手玩得非常棒。

然后，他用Eyefluence技术敲打地鼠。不必点头，他只需要移动视线。设备记录下了积分，Eyefluence技术使得Israel在相同时间敲中的地鼠增加了40%。

最后，Israel置身于40个屏幕中，它们360度水平方向、180度垂直方向环绕自己——这是增强现实环境的全幅视域。这与电脑桌面由标签页组织的内容完全不同。通过这个头戴设备，Israel可以轻松缩放这40个网站，只需要看着它：他甚至还能在观看时滚动或操作。

不远的将来，这就是电脑环境的样子，它一点也不可怕；它感觉很自然，富有创造力。他知道自己的信息正在被收集，但能换来这样的体验，似乎很值得。

使用眼睛输入

Marggraff向Israel展示了Eyefluence如何能加速完成组织内容、写书这样的浩大工程。通常，作家们在各种设备和应用中做笔记。最终他们会深陷在文字、视频和音频的沼泽中。Israel会用许多工具，从Post-It笔记到视频音频剪辑。在极端情况下，他还会把网址写在自己手背上。

最难的地方在于，把这些不同信息片段编成一篇完整的章节，然后写进书中。书里会有成千上万的片段，像七巧板一样紧密结合。

像多数作者一样，Israel使用Microsoft Word进行整编和写作。对他来说，这是一个非常棘手低效率的过程，在这个毫无计划的过程中，他会遗失掉一些片段。

当他坐着观看头戴设备中的40个屏幕，Marggraff告诉他如何剪切和粘贴内容，全都整合进一个屏幕中。这样能简化流程，为他节省数周甚至数月的时间。

演示之后，Marggraff告诉Israel，有一款为作者设计的杀手级应用即将问世：一款眼控输入的头戴式QWERTY键盘。Eyefluence已经完成了，但还没做出样品。据他预计，当它推出时，人的眼睛移动多快，输入就能有多快。

在科技行业中，人们总是说颠覆，但它真正在生活中很少发生。不过对于Israel来说，这可以算一个。他想不到手机和桌面设备有哪里能胜过头戴设备——并且希望迫切改变。对他而言，那款键盘就是杀手级应用。对其他人来说，肯定期待更多既炫酷又实用的应用。

原文链接：https://medium.com/@shelisrael/eyefluence-the-missing-link-in-mr-headsets-37997ae54c3a#.ib4ysmr8j

作者信息：shel israel I write & speak about technology’s impact on business & life.

表单设计优化

hi@victor42.work (Victor42) — Sun, 13 Nov 2016 21:32:54 +0000

[国外设计第153期]

设计师常犯的错误，以及正确做法

无论是注册流程、多屏分步表单，或者是单调的数据列表界面，表单都是数字产品设计中的重要组成部分。本文会探讨表单设计的注意事项。记住这些只是通用规范，每条准则总有例外。

表单应该只有一列

多列布局会扰乱用户垂直方向的视线移动。

顶部标签

顶部标签的表单比左侧标签有更高的完成率。顶部标签的表单也易于移植到移动端。但是，对于有多种选择项的大量数据列表而言，请考虑使用左侧标签，因为它们在一起更易于浏览，能够减少高度，比顶部标签更贴心。

把标签与输入框成组排列

把标签和输入框贴近排列，确保项目之间留有足够高度，防止用户困惑。

避免全大写标签

全大写标签更难阅读和浏览。

如果选项少于6个，全部展示出来

把选项放入下拉选单需要用户进行两次点击，还会把选项隐藏起来。超过5项才使用下拉选框。如果超过25个选项，就要在下拉菜单中加入搜索。

不要把默认提示当做标签

把默认提示文字当做标签，意在节省空间。但这会导致许多可用性问题，Nielsen Norman Group的Katie Sherwin对此作过总结。

纵向排列勾选框（和单选框）以保证易读性

纵向排列勾选框能加快浏览速度。

行动指令要具有描述性

行动指令要描述出具体行为。

逐行说明错误

告诉用户哪里错了，说明原因。

逐行验证要在用户填完一行之后进行（除非填写中验证更有帮助）

别在用户打字的时候进行逐行验证，除非这对他们有帮助——例如创建密码、用户名之类，或者字符数提示信息。

不要隐藏基本的帮助提示文案

尽可能直接展示基本的帮助提示文案。对于复杂的提示文案，可以考虑在输入框激活时，展现在它旁边。

区分主次操作项

对此还有一项更深刻的哲学争论，真的需要次要操作项吗？

用输入框长度来反映内容

输入框的长度暗示了答案的长度。对于字数固定的输入框，例如电话号码、邮政编码等，可以使用这种方式。

抛弃星号*，标出选填项

用户不一定都知道星号(*)表示必填项。相反，应该标出选填项。

把相关信息编组

用户会分块思考，太长的表单会让人眼花缭乱。创建符合逻辑的分组，用户会更容易理解表单。

真的需要问吗？

省略掉选填项，考虑采用其他方式收集数据。时刻问自己，某个问题的答案是否能推测出来，问题能否往后放，或者完全去掉。

数据获取正在变得越来越自动化。例如，手机和穿戴设备在用户不知不觉间收集了大量数据。想想如何利用社交媒体、对话式界面、短信、邮件、声音、光学字符识别、位置信息、指纹、生物识别技术等等。

让表单变得有趣

人生苦短，没有人喜欢填写表单。要口语化、有趣，逐渐吸引用户，让人感觉出乎意料。设计师的职责就是传递公司品牌，激发情绪反应。处理得当，就能提升完成率。一定要遵循以上规则。

原文链接：https://uxdesign.cc/design-better-forms-96fadca0f49c#.pq9x0zsdm

作者信息：Andrew Coyle Product Design Lead @Flexport | Find more of my work at http://andrewcoyle.com/

聊天机器人设计终极指南

hi@victor42.work (Victor42) — Sun, 06 Nov 2016 00:31:52 +0000

[国外设计第152期]

聊天机器人的惊人潜力在于能够一对多地根据语境分别沟通。

我们把这句话分解一下。

**一对多沟通：**现今，有许多工具可以实现一对多沟通。从基本的信件，到电子邮件市场营销，再到社交媒体，这些工具可以轻松触达大量受众和目标群体，一视同仁。但是，这些工具多半不能分别沟通。

**分别沟通：**对大量人群进行分别沟通的方式出现并不久。目前最受欢迎的方式是程序化广告投放，但是最终要以一种有意义的形式触达终端受众，需要大量研究和分析技巧，才能正确运用。

**语境沟通：**我们每天与人交谈时都要这么做。在多数人来说是下意识行为。

“未来，聊天机器人会成为交互的标准方式。”

当有人问你“我给你拿件夹克过来？”你不会问他哪天拿过来——你很清楚他说的就是现在。你下意识（或许思考过，并且看了下天气应用）意识到天气因素，基于当前对话和环境，给出最适合的回答。

我相信，正是语境沟通（动态智能的一种形式）使得聊天机器人成为一种万众期盼的革命性技术。

现如今，机器人的语境沟通还无法做到完全合理，但还是有些做的非常不错，而且我相信这种交互会成为未来的标准：

虽然聊天机器人的创造潜力仍处于婴儿期，这正是令人激动的时代，创造者们试图掌握这种新技术的最佳运用方法，尽可能创造出最好的机器人。

为什么聊天机器人正在瓦解用户体验

除了我们刚提到的原因，还有人类天生就需要靠交流来维系。这是我们日常生活的一部分，我们依赖各种设备帮助我们进行日常沟通。

只有让用户活跃于社区中，而不是将用户拉入新生态系统，业务才真正算得上成型。不仅仅因为这更容易，而且性价比高，也因为这是更自然的一种交流形式。

“用户更希望你的服务植入到一个他们已经在使用的应用中。”

人们每天平均只用4-6个应用

尽管智能手机的拥有者平均安装了27个应用，他们每天通常只用4-6个。30天之后，只有3%的应用能留住它们的新用户。

“超过25亿人安装了至少一个通讯应用。几年后，这个数字会达到36亿，大约为全人类的一半。”

——《经济学人》

下载试用一个新应用，然后看看它是否有幸能成为那6个应用之一，这已经不再现实了。用户更希望你的服务植入一个他们已经在用的应用中，而不是下载一个新应用。

这意味着什么

别再浪费钱试图把人们拉进你的生态系统中。把你的内容推送到已经有活跃用户的地方。

图片来源于Statista

通讯应用已被广为接受

数千年来，我们都通过交流的方式销售商品、学习新技能、构建人际关系。通讯应用刚好是最新最有趣的交流方式。

“当我们群发消息到Kit社区，通常其中带有一则新视频的链接，我们看到转化率高达10%。”

——Patrick Starzan，Funny or Die的投资经理

排在最前的4个通讯应用，活跃用户数高于前4的社交网络应用。它们还体现出更长的活跃时段。WhatsApp的用户平均每周花费200分钟用于交流。

这意味着什么

继续一段对话，比开始一段新对话容易。以一种亲切自然的方式，用通讯应用与受众建立关联。

数据来自Buffer和Business Insider。

标识和功能可见性

如今，也包括可见的未来，机器人几乎不受限于输出内容形式。缺乏标识和功能可见性，既是挑战，也是创造聊天机器人的一大优势。

说挑战，是因为你得想办法有创造性地运用基本元素解决这个问题。

“将内容推送到已经有活跃用户的地方。”

好处在于它会迫使你打磨体验，尽可能达到最天然、有用的体验。

每个交互都应该有意义，能够提供价值。

文字元素

对话式界面的基础就是文字。有些平台允许按钮或快速回复与文字一起出现，但这还没有形成全行业标准。除非哪天，短信能适应聊天机器人的生态系统，不然它不可能成为通行标准。

多媒体元素

现在每个聊天机器人平台都允许发送图片了，包括短信。可以接收的格式包括JPEG、PNG和GIF。有些平台还允许你发送视频和音频，不过你最多大概也只能到此为止了，这是聊天机器人的平台边界。

允许发送视频的平台，包括Messenger和Telegram，但这些更高级的多媒体类型，必须通过某种定制的编码形式。

如果用模板式机器人平台，像motion.ai、Chatfuel和其他类似平台，它们都不支持视频和音频的发送。

创建聊天机器人的最佳实践

尽管科技从业者已经很熟悉聊天机器人，但对于世上多数人而言它仍然很新奇。

我在九月回到Nebraska的家里，当我告诉大家我在进行的工作，我得到这样的回复：“你是说那种当你无聊时，可以在AOL上和你聊天的东西吗？”

我笑了，但这就是现实。有许多人并不了解你说的是什么，所以创造时要牢记这一点。

下面是9条最佳实践，能帮你创造出友善的机器人：

1. 不要对用户撒谎

人们并不傻。如果过分承诺，或者声称你的机器人是什么先进玩意，但名不副实，他们最终都会发现的。

目前为止，机器人应该负责处理逻辑和它们擅长的事情。它们并不能替代人类的存在。

“要提前让用户知道他们是在和机器对话。”

你当然希望你的机器人尽可能接近人类，但是如果你试图说服用户这不是机器人，他们就会怀疑，然后可能就会离开。再次赢得信任，比预先告诉他们这是机器人更难。

如果让人知道，他们正在与一个有先天局限的机器交谈，他们会感到更加自在和包容。

应该怎么做

要提前让用户知道他们是在和机器对话。
让用户了解机器人的能力与局限，这样他们就不会什么事都找机器人。
当事情由于机器人的能力有限而搞砸时，要勇于承认。

图注：应该让用户了解，自己正在与机器人交谈。这样在机器人犯错之后，人们会更容易留下。不要试图说服用户，相信你的机器人比实际更聪明，或是像人类一样聪明。

2. 以对话开场

尽管像Siri、Alexa和Google这样的人工智能机器人已经出现有一段时间了，多数人仍然不习惯于对着无生命的物体说话或写字，以此达成目的。他们仍然习惯于操作所见即所得的界面。

作为聊天机器人设计师，这就是你的工作，巧妙地教育用户，对话式界面有多好用。

应该怎么做

可以的话，使用按钮来给用户提供熟悉的体验。（一些平台，比如短信，尚不支持按钮，可以用操作式指令代替。）
点了几个按钮后，引导用户输入回复来继续对话，让他们习惯于输入。可以通过提供操作式指令来完成。
确保所有按钮和指令都能触发操作。

图注：提供操作指令给用户，有助于教导他们和机器人聊天。不要留给用户开放性的问题或陈述，迫使他们决定接下来的走向。

3. 为人类情绪设计

和机器人聊天很枯燥。虽然这可能效率很高，而且符合产品的客观事实，但人们可不会喜欢，并继续使用。这也不是我们习惯的方式。

如果你没有给机器人赋予人格，用户就会这么做——所以要设定你期望的人格。这是你在品牌设计过程中已经完成的事情，但此刻更加重要。

为人类情绪设计聊天机器人，重要性不输于其他任何形式的体验。情绪决定机器人，机器人决定体验。

“情绪决定机器人，机器人决定体验。”

应该怎么做

使用友善、包容的语言和用户交谈，让他们感到在和朋友或熟悉的人聊天。
把用户输入复述出来，确保理解正确。这会让用户感觉自在，帮你赢得他们的信任。
当用户开始调戏机器人（例如反复问同一个问题考验它），无礼一点并不为过，告诉用户机器人正在听。

图注：使用友善、包容的语言和用户交谈，让他们感觉不到是在和机器对话。还要确保复述用户的意思，让他们更加自在，知道你理解正确。不要完全按照模板回答，无视用户的反应。

4. 交流没有限制

语言是地球上最有力的工具之一。在大学期间，我辅修英文——语言一直都让我着迷。但构建人工智能聊天机器人，是我做过的最困难的事情。

说话——我们组织语句和词汇的方式——在生活中是一种下意识行为。但是，要创造具有人工智能的机器人，我必须解构自己的潜意识语言模型，从而教会电脑我的本领。

思考如何称呼各种人物（或事物）会让人发疯，怎样的语法结构最能表现用户的谈话，什么词汇最容易被拼写错误，会被错写成什么样？

图注： “希拉里·克林顿为可持续发展做了些什么？”这句话有多少种问法？有8种方式可以指代希拉里·克林顿，包括：Hillary Clinton、Hillary、Clinton、Senator Clinton、Hillary Rodham Clinton、Crooked Hillary、she、her。以上8种指代方式，有1714种可能的拼写错误。上面这个问题的问法，算上可能的拼写错误，鬼知道！

美国的多数孩子要经历12年的英语课堂来学习这门语言，而且他们通常也并不能运用自如。

计算机学习起来或许更快，但也需要时间。除了把大量数据扔给它，你也没什么办法可以加快进展。

应该怎么做

用那些喜欢破坏的人来构成基础用户，以此检验你的系统。引入适合的人群至关重要。
使用SEO关键词生成器来应对常见的拼写错误和失误。
接受现实，建立人工智能需要时间，而且它起初表现不会太好。只有出错，它才会进步。做好准备，设定边界来限制出错。

5. 设定边界

我们习惯的网站、应用和数码设备，都有着有限宽度的屏幕，有限长的页面，有限个按钮，等等。我们习惯了这些限制和引导元素。

对话是没有限制的——只要你愿意。

要让人融入其中，我们得为用户设定限制和路径，让他们感到熟悉。用户不会告诉你这些，因为他们也想不到，但这么做会得到他们赞赏。

应该怎么做

为用户提供操作式的陈述和按钮，引导对话。
使用按钮让人感觉交互更加熟悉，就像网站和App中的体验一样。
创造内容区块来消化错误，将对话重新引回正轨。
教给机器人一些基本的对话技巧，创造一些触发机制，解决这些常见问题。

图注：提供按钮或操作式的命令项给用户选择，以此设定对话的边界。不要让对话任意发展。没有边界的话，用户会轻易搅乱你的机器人。

6. 让人放松下来

除非你的机器人完全是基于模板，或者完全通过按钮点击来操作，不然机器人总会在某些状况下出错。这无可避免。

对话没有限制，即使你的机器人开发几个月、几年，仍然可能无法顾及用户想要的一切东西。就算做到了，你的机器人仍然有时候会抽风。

“你的机器人总会在某些状况下出错，做好准备。”

预先准备，让出错的体验尽可能不造成痛苦。

应该怎么做

要表明你理解他们的痛苦。
提供选项，教人应对这种情况，把用户引回到安全的地带。
人工干预。
不要无缘无故不搭理用户。

7. 每个交互都有意义

不必再通过软件分析每一次点击或输入意义何在。理解用户行为变简单了，但是用户保持专注则更难了。

必须要意识到，并非用户想要的一切都与你的产品有关，而且能在所有干扰中保持专注。

应该怎么做

适当地给内容块加上标签，让它们易于理解。
追踪最容易导致用户离开的内容块或输入项，找出原因，然后作出改变。

多数分析平台可以展示出哪些区块和按钮被点击了，以及用户向系统中输入了什么，还有许多其他数据。

8. 帮助用户就是帮助自己

你不可能预见此刻用户想要的一切。对话是没有限制的。

不必试图推测用户需求，或者请求他们做调研，在操作中直接通过机器人来让用户提交反馈，这才是最自然的方式。

应该怎么做

当用户询问了某些机器人不知道的东西，要允许用户提交文章。
询问用户，机器人给出的答案是否是他们所要的，如果不是，让他们告诉机器人想要什么。

图注：让用户提交内容，你就不必亲自创造一切。让用户来帮助你为他们自己服务。别让用户等待，不要剥夺他们提交所需内容的机会。

9. 辨识和迎合用户情绪

相比界面，对话中包含的情绪要多多了。不必征求用户的回复，他们总会给你反馈，无论是否下意识如此。

运用你在用户情绪方面的知识，在适当时机触发内容区块，延伸和改善体验。

应该怎么做

利用积极情绪来推广你的产品，或者让用户替你推广。
辨别出消极情绪，尽可能保全形象。

图注：用户向机器人表达某种情绪时，可以使用一些幽默的互动。通过积极情绪来推广，消极情绪来保全形象。不要用默认回复来应对用户的情绪，这只会让用户觉得你在预测意图方面有待改进。

创造未来，正是时候

创造得好的话，聊天机器人是强大的工具。随着时间推移，它们只会变得越来越厉害。

利用这股潮流，开始创造你自己的聊天机器人吧！

如果想要讨论任何关于文本的内容，所用的工具，或者其他任何事情，请联系我。

聊天机器人延伸阅读

原文链接：http://blog.invisionapp.com/guide-to-chatbots/

作者信息：Joe Toscano Experience designer for R/GA’s Google team in San Francisco, CA. Joe plans to change the world with a smile, design and some code. If you want to keep up with what he’s doing outside of InVision, follow him on Twitter or Medium! Follow me on Twitter

移动端用户体验：底部导航

hi@victor42.work (Victor42) — Sun, 30 Oct 2016 16:12:56 +0000

[国外设计第151期]

图片来源：Behance

设计师都知道，设计不只是为了好看。设计也决定用户如何融入一个产品，无论是网站还是app。这是一种交谈。*导航就是一种交谈。*因为如果用户不明白使用方式，你的网站或app再漂亮都没用。

为什么底部导航如此重要？

Steven Hoober在他的关于移动设备使用状况的研究中发现，49%的人依靠一根手指完成手机上的操作。在下图中，手机屏幕上的画面表示大致的触摸范围，不同颜色表示用户能用拇指在屏幕上触及的区域。绿色表示轻易触及；黄色表示需要伸长手指；红色表示需要用户改变持握方式。

图片表示单手操作智能手机的舒适程度。图片来源：uxmatters

**把最重要最常用的操作放在屏幕底部非常重要，**因为它们能用一只手指轻松触及。

标签栏

许多应用遵循这一规律，将底部导航（又称作标签栏）作为最重要的app功能。Facebook的核心功能一触即达，能够在不同功能中迅速切换。

Facebook的iOS底部标签栏。

底部导航设计的3个关键

导航通常是搭载用户的交通工具。底部导航应该承载重要性等同的顶级目的地。这些目的地需要在app的任何地方留有直接的入口。

优秀的底部导航设计遵循以下3条定律：

1. 只显示最重要的目的地

在底部导航中使用3到5个顶级目的地。如果少于3个，请考虑使用标签代替。

底部导航避免使用5个以上，因为点击目标相互会过于接近。在标签栏放置过多的项目，让人们难以点中他们的目标。每多展示一个标签，app的复杂性就增加一分。

如果顶级目的地确实有5个以上，不要用底部导航来承载这些入口，请考虑放在其他位置。

避免内容滚动

小屏幕上显而易见的解决方式，就是部分隐藏式的导航——不必担心屏幕空间的局限，把标签项放入滚动的标签栏即可。但是滚动的内容效率低下，因为你得滑动一下才能看到想要的选项。

iOS版Rookie Cam app中就存在“看不见就想不到”的问题。

2. 表达出当前位置

没有表达当前位置，可能是app菜单中最普遍的错误。“我在哪里？”是用户需要回答的基本问题之一，这是顺利操作的前提。

用户应该在没有任何外部引导的情况下，一眼就看出如何从A前往B。应该提供适当的视觉线索（图标、标签和颜色），操作就不需要任何说明了。

图标

正因为底部导航操作以图标方式展现，它们所表达的内容应该要适合通过图标来表达。有些用户熟知的通用图标，通常这些都表示搜索、邮件、打印等功能。不幸的是，“通用”图标很少。app的设计师常常用图标来代表一些非常难以分辨的功能。

老版本的Bloom.fm应用Android版。真是相当难理解用户当前所处位置。

我在这篇文章《图标是优秀用户体验的一部分》中强调了这个问题。

颜色

避免在底部标签栏使用不同颜色的图标和文字标签。应当使用app的主色来表示视觉焦点。

左图：不同颜色的图标让app看起来像是圣诞树。右图：应该只用主色。

遵循一条简单的法则——用app的主色来提亮当前的底部导航项（包括图标和文字标签）。

iOS版Twitter的底部菜单栏。Messages是当前选中项。

如果底部导航栏有背景色，就要用黑白的图标和文字标签。

左图：避免使用彩色图标和彩色背景的组合。右图：使用黑白图形。

文字标签

文字标签要为导航图标提供简短有意义的描述。不要用太长的标签，因为它们不能截断或换行。

避免换行、截断和缩小文字标签。

菜单元素要易于浏览。用户要能理解他点击某个元素时会发生什么。

点击尺寸

目标区域足够大，才易于点击。将界面宽度按操作项的数量等分，计算每个底部导航操作项的宽度。或者，把所有底部导航项的宽度设为最宽。

Android规范建议按照下图的尺寸设计移动端的底部导航栏。

移动端的固定导航栏。单位是逻辑像素（dp）。来源：Material Design。

标签栏的小红点

可以在标签栏显示小红点，表示有相关的新信息。

可以用低调的方式给标签栏图标加上小红点。

3. 让导航不言自明

优秀的导航应该感觉像一只隐形的手，在操作途中指引用户。毕竟，如果用户都无法找到，那最酷的功能和最有吸引人的内容都没用。

表现

每个底部导航图标都要通向某个目的地。而不能是打开菜单或其他弹出窗口。点按底部导航图标应该直接通向相应界面，或者刷新当前激活的界面。

不要用标签栏提供控制项，用来操作当前界面或app模式中的元素。如果需要提供操作项，请改用工具栏。

iOS的工具栏

保持统一

尽可能在每种情况下都显示标签栏。这样能给用户一种视觉上可靠的感觉。

不要因为功能不可用就移除某个标签。如果你在某些情况下移除一个标签，其他情况确保留，就会让你的app界面感觉不可靠、难以预料。最佳解决方案是保证所有标签都是可用的，然后解释为什么某个标签没有内容。例如，如果用户没有离线文件，Dropbox里的Offline标签会显示一个界面，教你如何添加。这个功能就是空状态。

Dropbox应用的空状态界面。

隐藏标签栏

如果界面里是滚动的信息流，标签栏可以在滚动查看更多内容时隐藏，向下滑动尝试回顶部时再显示。

底部导航栏可以根据滚动，动态显示和隐藏。

视觉愉悦

避免使用横向滑动的动效来切换界面。激活和未激活的界面，切换过渡效果应该使用叠加渐隐效果。

叠加渐隐动画。来源：Material Design

总结

底部导航应该：

可见且结构合理（使用3到5个顶级目的地，并且避免可滚动内容）
清晰（导航栏元素要易于浏览，点击区域要足够大，方便操作）
简单（保证每个导航图标都通向合适的目的地，而且通过底部导航要能够触达所有元素）

原文链接：https://uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f#.3z87f9p1s

作者信息：Nick Babich I’m a software developer, tech enthusiast and UI/UX lover. http://babich.biz

幕后故事：数字银行品牌升级

hi@victor42.work (Victor42) — Sun, 23 Oct 2016 00:08:54 +0000

[国外设计第150期]

Monese是一项无网点银行业务，能让欧洲经济区的居民在2分钟内创建本地银行账户，即使顾客无法立刻提供住址信息，或者信用记录不良，也没有关系。我们创造Monese，目的在于帮助9千万被“排除在金融体系外的”欧洲人，因为银行难以认同并给予他们信用授权。

作为金融产品，获取用户的信赖至关重要。因此，有统一易辨识的标志，是Monese成功的关键。

为什么决定要重塑品牌

在Android平台发布之后，用户基数快速增长。很明显下一步就是发布iOS版，这也是回顾和改进我们形象的绝佳时机。

此时我们已经有一套现成的品牌识别，从真实用户身上获得的第一手产品使用反馈让我们深受启发，最终我们觉得品牌需要更好地将它们反映出来——我们对用户需求有着更深刻理解。

我们从中找出了以下问题：

现有Logo不够典型、独特——它显得有点幼稚，弧度过于圆滑。

我们用的“Brandon”字体不够鲜明，它已经被许多创业公司滥用了，这就意味着它不可能是我们独有的。

品牌元素中混合了尖锐与圆润的形式，不统一，缺乏协调。

红色的广泛使用引发了一个挑战，导致Monese应用中的错误状态难以展示。

旧的Monese品牌元素

我们最初努力修补现有品牌。越深入，我们越意识到它的诸多劣势正在阻碍着我们。我们需要一系列清晰的价值，和一个全新的品牌识别，来更好地传递我们的重要性。

作为一个精益团队，我们知道彻底的品牌重塑困难得超乎想象，但如果我们打算这么做，现在正是时候。我们的任务就是用一个通用的品牌故事来统一整个公司，与顾客形成更强的连接，为将来的增长打下坚实的基础。

品牌故事板

海量的工作，始于对Monese现有成就和未来方向的研究。我们的工作跨越了英国伦敦、爱沙尼亚塔林的工作室，我们与每一个公司成员联系，收集他们各自对于公司自身价值的描述。

我们与用户体验分析师、管理团队紧密协作，定义了一套品牌故事板作为起点。我们讨论了我们的银行服务如何帮助人们“升级”，伴随他们的生活前行。然后进一步定义了我们的价值。我们非常认真对待这个环节，因为这些会形成我们的核心个性，并且会作为后续所有的根源，我们做的每一个品牌决策都能回溯到本源。

我们创建的列表在开始帮了大忙，但是内容太多难以记住。从全公司成员的描述中，我们分解得出3项更精炼的核心价值。

进步

Monese一直在关注着未来——总是通过新技术来帮助客户快人一步。

人性

我们看到了人类个体与整体的价值。我们对于客户不带任何偏见，这使我们区别于其他传统银行。

信赖

我们给钱财提供了一个安全的家，对于我们的客户完全敞开透明。我们态度亲和，时刻准备回答问题。

重塑过程

时间紧迫，我们迅速行动，开始概念的设计冲刺。因为我们是个创业公司，时常需要从冲刺中挤出时间处理app功能和其他方面的业务。所以，为了保证一切尽在掌控，我们要确保一段时间内，核心关注点只在品牌工作上，然后再专门花几天去处理其他事情。

每次冲刺大约4天左右。我们设定了每天的目标，保证大家全神贯注跟上节奏，并且检验我们的价值观、为未来的发展探索灵感。在每一段设计冲刺之后，我们会讨论回顾；一开始不为做出某个重大决定，更多是分享灵感，感受其他人的思考过程。

设计标志

Monese为顾客提供容易申请、使用的安全银行服务，帮助他们在生活中自由行动。我们想要设计的标志既要能反映这一点，也要表达出我们的价值观——“进步、人性和信赖”。于是我们开始画草图……

探索了几条不同道路之后，我们做出了决定，开始围绕我们选定的方案绘制。我们进行了许多次迭代，确保最终logo能够传达每一个品牌价值。

我们最终的方案，结合了相互连接的平滑线条，构成独特的标志，反映出我们的特征——安全、活力和人性。为了增添柔和的感觉，我们增加了倒角，让它感觉更加平滑、人性化。

字体

设计标志的同时，我们也开始探索字体。主要问题在于，我们现有的字体感觉太怪异了——没法让你放心存放你的工资。尽管它也经过精心设计，在我们公司早期阶段，带有轻微圆角的无衬线字体表现良好，但它不够成熟——这是我们的新形象需要表现的。

我们决定基于字体“FF Mark”。这款新近字体诞生于2013年，形式借鉴自史上最成功的一些无衬线字体，但它给人感觉更现代，并且在现代的设计中让人感觉无拘无束。

每个字形都精心绘制，赋予它硬朗、简洁、醒目的边界，但它的曲线也带来了一丝舒缓和亲和力，帮助它很好地与新Monese商标的形式融合。

我们顾客的大部分都是非本土的英语人士，这意味着易辨识是最高前提。Mark字体的x高度足够大，有助于在小字号的用户界面元素中清晰表达。并且多种字重使它具有灵活性，可以跨越多种品牌媒介使用。

总体来看，我们觉得Mark字体是正确的选择，因为它提升了我们品牌的形象，强化了令人信赖的调性。

配色方案

我们希望配色让人感觉新鲜、充满活力，同时运用色彩向非本土的英语人士清晰表现银行服务的元素，所以我们的选择必须兼具功能与美观。我们思考了app中用到的多种状态的信息，选择一套灵活的配色，有助于提升可用性。

主要配色中，纯正的蓝色、绿色和黄色传递出鲜活的感觉，远比暗淡柔和的旧配色更好，我们觉得这个更加适合Monese的形象。我们早期的测试者说：“它不像其他银行应用那般沉重。”

定义标志性交互

由于是数字产品，我们相信强大的品牌系统应该不只是一个符号，也应当决定了产品的表现。作为银行服务，用户使用产品中最重要的操作之一，就是付款。我们决定着重于这个操作，将它转化为品牌的核心特征。

我们尝试了多种处理方式，实验如何通过动画来体现。

重新考虑过动画之后，我们开始使用JavaScript制作样例，并且进行了一些用户测试。要确保很重要的一点，动画没有妨碍这个操作本身。

制作与测试付款操作

关键在于保持动画简单，确保它的可用性，避免形式盖过功能。我们引入了流动的彩色线条，随着用户向下滑动展开，完成付款。这种有弹性、像液体的动画效果为界面注入了更多个性，令人愉快。

发展出整套体系

更进一步，我们探索了付款的线条如何扩展为一套密切相关的视觉体系。我们运用大量相连的彩条，通过动效表现各种支付方式。连线的修剪形成了一系列情感表达，从标准、精确到活力、有表现力。

我们从旧版信用卡上收集到的用户反馈表明，有些顾客认为早先的卡片感觉不像是个合法的银行产品。基于这个反馈，我们决定设计出更迷人的深色卡片，在上面呈现彩条的连接。交错连通的线条纹理，表达出Monese平台流畅的支付过程。

新的信用卡包装

由于Monese是一款主要针对流动人口的产品，我们觉得，给品牌增加一些运动元素会很有好处。我们希望这套系统表现出运动的感觉，就像这张动图展现出来的效果。这样，我们就能真正表达出不断进取的价值观。

这种富于表现力的形状，感觉流畅、人性化，在logo标志和app界面元素中保持形式统一。

app改版

我们也彻底改版了Android和iOS应用的设计，和品牌重塑同时进行。我们希望界面感觉明亮、清新，并且容易操作。与用户体验团队合作，我们仔细考虑了每种元素，确保每一个决策都有服务用户的清晰目标。

通过插画，我们引入的元素能给用户惊喜和愉悦，也加入了交互式图形，采用与logo接近的线条形式。所有的图标都重新绘制过，更加圆润亲切。我们还采用了时间轴形式，来呈现主界面的执行状态。

重新设计的界面

原文还插入了一个视频，请前往此链接观看：https://vimeo.com/175713529

插画与角色

我们加入了新的插画风格，还有一系列的角色，帮助表现app的各个部分，也增添了一丝玩味。这些角色帮助用户打消疑虑，表现出我们是一家多么平易近人的公司，时刻准备伸出友好的援手。

举个例子：当注册Monese账号时，用户需要等待身份信息核验完成。我们加入了一个小动画，表现出正在扫描文档的场景。不一会儿，其中一个角色会站到扫描仪下，被喷了一身颜色。我们希望这能给等待中的用户一点点奖赏，甚至让他们希望等待动画循环，再看一遍。

最终成果

回到最初修改视觉识别系统的初衷——之前我们觉得旧的Monese品牌过于简陋，缺乏信任感。不仅仅因为过于圆润的logo与多边形状的纹理和插画不相称，产生了一种混杂的调性，而且它终究不够独特，不能使我们独一无二。

我们确定了这些问题——从更强有力、值得信赖的logo，到更亲切的配色——我们对于新的品牌形象很自信，相信它能为Monese打下长期增长的基础。它已经被公司内所有团队满怀热情地接受，我们现在希望顾客也欢迎这一系列转变。

这是我们目前得到的一些反馈：

Sia Houchangnia (@SiaHouchangnia)

非常棒的新品牌，已登陆iOS——一定要看看#seedcamp（译者注：一家创投公司）的公司@MyMonese！

Clóves Cardoso (@clovescardoso)：

@MyMonese的新品牌和新app看上去真棒。希望能进入英国，我很想尝试。

Rohit Rahate (@RRRahate)：

@MyMonese，太喜欢你们的新品牌形象了。

elowa Design (@Delowadesign)：

@MyMonese，好家伙，新logo很赞 :)

另外，Monese正在伦敦和塔林招人。

www.monese.com

原文链接：https://blog.prototypr.io/branding-monese-9f076baf0d79#.w8w6q9hic

作者信息：Joe Allison Design Lead at Monese

未来的汽车UI将惊艳世界

hi@victor42.work (Victor42) — Sun, 16 Oct 2016 00:38:14 +0000

[国外设计第149期]

今天多数汽车UI的设计，由于不直观、过时和缺乏美学表现力，一直饱受诟病。其他行业都将设计的品质奉为标准，汽车生产商在这方面则动作迟缓。所以，许多设计师抓住了这个机会，思考未来的汽车界面会如何改变我们的驾驶体验。

汽车行业的革新似乎日益加剧。实际上汽车行业在未来20年的变化，会超越过去一个世纪。因此，最前沿的设计师应该关注这个至关重要的行业。那未来的汽车界面会变成什么样呢？会根本上改变我们与车的关系吗？

下面是一系列优美富有未来感的汽车HUD（平视显示器）、交互界面和第三方应用控制器，它们来自世界各地的设计师。有些设计来自真实产品，还有一些仍在研发阶段。

特斯拉手机控制中心界面

来源：Matthaeus Krenn

为何惊艳：

你是否也时常怀疑自己有没有锁好车门、关车灯，或是把钥匙交给你刚学会驾驶的孩子。

这款应用让你不用离开座位，就能检查以上所有。如果还带有柴油混合动力，你甚至可以吃早餐时启动引擎除霜。作为感知反馈，直观的动画和过渡效果让你了解操作是否执行完成。

车载触摸操控界面

来源：Gleb Kuznetsov for FΛNTΛSY

为何惊艳：

这个界面用了手势操作，通过肌肉记忆来整体操控。屏幕上手指的数量与动作能触发操作，苹果的iPad、magic mouse和其他操作系统已使得这种方式成为了行业标准。这个案例中，移动能提高或降低数值。

这款界面不需要记住那些小控件和大量图形，因此能让你以同样的手势或其他操作，完成各种不同类型的任务。

可以在这里查看到完整案例研究，体验这套原型。

特斯拉控制面板概念设计

来源：Bureau Oberhaeuser

为何惊艳：

随着更多功能共用一个空间，并且相互高度关连，汽车正在变得更加智能。这些变革会将铺天盖地的数据呈现在我们面前，这在手机上已经发生了，还有其他所有原本只有单一功能的设备。它必须表现得很自然，决定了我们看什么、怎么看。人工智能和机器学习会掌控直觉，Bureau Oberhaeuser的原型非常优秀，让一切鲜活起来。

可以在这里查看案例研究和实际操作。

远程汽车健康监测和控制

来源：Ramotion

为何惊艳：

如果你的汽车出了什么毛病，拿起扳手钻到车底一通乱拧可不容易。当所有系统都电子化、计算机化，外表光鲜洁净，要判断问题所在可并不那么简单直观。这款移动应用原型，能以一种你可以理解的方式展现汽车的健康数据，让你在踏上漫漫旅途之前能进行必要的修整。

胎压监测与天气界面

来源：Ryan Duffy

为何惊艳：

这个界面表现行进中的胎压，让你分别了解各个轮胎的压力范围，准确知道要加多少压。这个界面提供了最基本的反馈，它应当成为行业标准。

Hudway增强现实平视显示器

来源：Hudway应用

为何惊艳：

毋庸置疑，驾驶员都应该将注意力集中在道路上，但是当司机查看手机导航时，内置的移动导航界面仍然会时常引发事故。Hudway应用在挡风玻璃上开启了第二块屏幕的新体验，让事情变得简单多了。玻璃是未来的界面，这款导航应用利用了这块空间，作为驾驶员手机的延伸，并伴随逐步的语音提示。

可以在这里查看案例研究，感受它的操作方式。

Car Play应用——City Guide

来源：Cleveroad

为何惊艳：

这个界面最适合勇敢的探险家。如果想要快速探索周边的世界，这款应用让你在有限的道路上激发出旅行的动力（并且会让你走在正确的车道上）。

苹果Carplay

来源：Apple

为何惊艳：

大家有目共睹。如果你熟悉所有苹果设备，完全可以无脑使用，你可能还会在汽车上安装其他产品。苹果的Carplay将第二屏的交互提升到新的高度，它只会变得更越来越优秀。

数字仪表盘显示屏

来源：Mike Montgomery

为何惊艳：

没什么能比得上发动引擎、让所有指示灯亮起来，然后像军乐队一样响起旋律。当接近下一个转弯口、油量低、或者胎压下降，你会通过周围一切声音和随后的视觉互动获得反馈，就像微动画那样表达出直观的讯息。

但是，把所有类似功能都用数码显示，总有弊端。通常都没有手动替代方式，所以如果某处线路故障或是电子故障，你的座驾马上就会变成无头苍蝇。

特斯拉的Apple Watch界面原型

来源：Eleks Digital

为何惊艳：

随着穿戴设备成为我们连接设备中的一部分，与你相关的产品生态中，最精密部分的控制不再那么依赖手持设备了。这个原型很好地表现了如何将它展现在手腕上。在此深入了解这套原型。

结论

这就是我们今天所能看到的汽车用户体验设计的前沿。你还知道其他什么产品正在拓展边疆？你觉得这一系列设计如何？可以在评论中加入讨论，发表你的高见！

原文链接：https://www.toptal.com/designers/interactive/amazing-vehicle-ui

作者信息：MUWUSO MKOCHI Muwuso is a senior interactive art director and multidisciplinary designer with key focuses in digital, brand, and experience design. Over the past 9 years, he’s led UI and integrated experience design in-house and remotely for some of the world’s biggest–and smallest–brands and agencies. He is constantly inspired by the evolution of technology, its influence on human behavior, and the resulting impact on environments and micro-cultures.

Android电视应用：Amazon Fire TV版TVPlayer设计

hi@victor42.work (Victor42) — Sun, 25 Sep 2016 00:00:08 +0000

[国外设计第148期]

设计和研发、推广一道，是移动应用的成功要诀之一。定义用户操作应用的方式，与应用的功能和高效的盈利模式同等重要。而且，当涉及到为电视这样的新交互模式设计界面，许多在智能手机和平板上有效的模式，都需要重新思考，如何利用大屏幕和遥控带来的输入模式。

Fire TV上的TVPlayer

这个任务并没有吓到TVPlayer的开发者们，这是全英国在Fire TV和Fire TV Stick上最成功的电视应用之一。

TVPlayer是一款Android原生流媒体应用，可以让你在Amazon和Android设备上免费观看电视直播，它掌握了英国许多收视率最高的频道。TVPlayer在2014年作为Fire TV的一部分同时发布，它的成功一直延续至2015年、2016年。

Simplestream，TVPlayer背后的研发与设计团队，接受了打造电视优先体验的艰巨任务。

我们采访了运营总监Lewis Arthur和Simplestream的Android开发Michael Jordan，请他们分享Fire TV应用设计过程中的真知灼见，下面是他们的分享。

设计过程：从手机到电视

在登陆Fire TV前，TVPlayer已经可以在Fire Tablets和Android设备的Amazon Appstore中下载。移动端版本的设计师，将关注点聚焦于可用性与内容的易达性。他们在欢迎界面采用了大胆醒目的图片布局，主标签内有可滚动的直播电视频道列表。设计师决定坚持“浅色”主题，为了使内容突出，也保持各平台的主题一致。

当进行平板端的支持时，设计师需要重新思考，更好地利用大屏幕。主体布局有所改动，在主界面上直接为用户呈现更多内容。这是个很好的策略，既能吸引用户注意，并且为多种相关内容提供快捷入口。

至于第一版Fire TV应用，主界面需要呈现新的面貌。电视的设计，与手机平板的界面和用户体验设计有两大不同，这都来源于TV自身的天性：它有巨大的显示器，也不提供触摸式界面，因为所有的操作都发生在遥控器上。

Simplestream在第一版Fire TV应用的主界面上，尽数使用了大胆醒目的图片。“主页”、“正在直播”和“频道”标签都移到左边，字号成倍放大，使得从远处看也清晰可辨。

第一版Fire TV应用主界面，感觉像平板端那样清爽，栅格布局中承载各类主要频道。

为Fire TV开发简单而迅速：4周就从移动端迁移到电视

当我们询问Simplestream团队，从移动版到第一版Fire TV应用花了多长时间，他们告诉我们大约4周。由于Fire TV是一款完全成熟的Android设备，搭载了基于Android Lollipop的Fire OS 5，改版迅速而流畅：移动端和电视版的核心组件相同，保持界面与应用底层结构分离，能让开发者拥有足够的灵活性快速迭代，在几周内成就完整的电视应用。

Fire TV的界面革新

这款Fire TV应用发布一年多以后，从应用数据中收集了足够的用户操作反馈，TVPlayer开发者与设计师们决定，是时候为Fire TV应用创造一套新界面了。目的在于使应用更加高效，为电视用户提供最佳的内容呈现形式，同时在应用中加入新功能。

新的一版加入了按月订阅的应用内购——包含免费与付费内容，使应用更多样化。Simplestream的设计师进行了深入的竞品分析，理解流媒体应用设计当前的趋势，掌握了如何设计统一一致的界面，甚至是跨越多平台与设备。

选用合适的配色方案，确保应用对眼睛友好

首先，设计师决定探索Fire TV的深色配色方案。在设计上一版Fire TV应用时就做出了个决策，不过在这版界面更新中更进一步，把多数UI组件都加深了。深色主题主要是为了防止浏览内容时眼睛疲劳，因此能创造更轻松的用户体验。这对于应用的启动界面尤其重要，把它改成黑色，避免“亮瞎眼”。

让用户的眼睛免于疲劳。

设计电视应用时，浅色与亮色的主题需要慎重考虑，因为多数可能的使用场景都发生在夜晚，没有自然光，因此明亮的界面会损害用户体验，久而久之导致应用被抛弃。通过色彩来展现品牌也非常重要。对于TVPlayer，蓝色作为高亮色彩，相比前一版，更有助于保持多平台的品牌一致性。蓝色表示免费内容，而粉色表示付费内容。

通过ViewPager进行内容翻页

TVPlayer的开发者们想要一套极具表现力的界面，但也希望保持品牌辨识度，并提供独一无二的用户体验。因此他们决定不遵循标准的Android Leanback界面，他们建立了自己的布局与导航系统。

TVPlayer的主体布局对ViewPager组件进行了自定义。ViewPager是一种布局管理组件，可以在多页内容中轻松左右翻页。在TVPlayer中，通过ViewPager的自定义运用，实现了水平滚动翻页切换节目与频道，每一页都包含一系列自定义视图。

内容的快速入口增强粘性

上一版中创建的网格视图得到了改进，每项有更大的间距，并且用水平滚动替代了垂直滚动。同时也引入了快速内容导航：用户可以选中翻页导航指示器，在页面间快速滚动。翻页导航指示器与ViewPager相关联，决定了当前展现什么页面，下一页是什么。快速滚动意味着用户能更快触达更多内容，因此有助于增强用户粘性、加强记忆。

马赛克式界面：内容的快速入口，更加商业化

最终的结果是马赛克式界面，能快速到达各个频道。自定义Android视图和Adapter的使用，让开发者能在一个界面中完全掌控和融合免费与付费内容，改善了通向应用内购的高级内容入口，因此也创造了更多收入。TVPlayer从第一版完全免费的形式，变为包含付费内容的新版本。保持了干净的用户界面，将界面背后的逻辑与核心应用组件分离开，使得这次改版轻松而迅速，也保证了快速迭代来创造优秀的用户体验和加强商业化。

马上开始创造Amazon Fire TV应用吧！

Amazon Fire TV和Fire TV Stick给你提供了绝佳的机会，让你的Android或HTML5应用能触达更多用户。只要遵循Amazon Appstore的开发者文档，把Android移动应用迁移到Fire TV上非常简单！这些链接会非常有用：

Amazon Fire TV：把应用和游戏带到客厅，触达更多用户

Amazon Fire TV应用与游戏开发入门

为Amazon Fire TV开发应用与游戏

原文链接：https://medium.com/amazon-appstore/designing-native-android-apps-for-tv-how-tvplayer-designed-for-amazon-fire-tv-79c3801b60e7#.sinhtvmbx

作者信息：Mario Viviani Technology Evangelist, Amazon Appstore

我的心里是满的

hi@victor42.work (Victor42) — Wed, 21 Sep 2016 00:02:07 +0000

戏入膏肓

每周末奔赴新家，处理装修的各种琐事。

某天遇见这只拦路虎，它和我各自愣了一下。然后我很配合地踏着想象中的积雪，深一脚浅一脚走到了公交站。到了公交站还跺了跺脚，拍拍裤腿……

我的心里是满的

很喜欢程璧的音乐，仿佛能从中听出一种简笔画般的设计美学。

程璧 - 我的心里是满的

不过有时候也有些迷之诡异，如果你记串了歌词：“夜里，我一个人醒来，一个人整理头发，我一点也不孤单，我的心里是满的。”

没心没肺的KT

有妹纸向KT表白了，但是在这之前，KT又把自己的同学介绍给了这个妹纸，场面有点尴尬。

没心没肺的KT表示很无奈，他说：“这时候我只想对着她唱一首歌。”

然后他甩给我一个链接：

http://music.163.com/#/song/29822071

开始方了

KT裸辞了。他说，怎么办，我开始方了。说着就唱起了童话：“我想了很久，我开始方了……”

我说，方了啊，真是人间惨剧……再也没法吃切成片的西瓜了。

“为什么”

“都方了啊，还怎么吃，啃不到瓜肉了。不要方，还是圆的好，或者扁的也好。有首歌这么唱：扁的那样呦，扁的那样呦，我的青春小鸟一去不回来。”

塞纳里奥议会的事儿精

KT还在玩wow，虽然我很久没玩了，不过还是经常和他怀念一下里面的故事人文。

塞纳里奥议会真是wow里最事儿精的组织，没有哪个地方见不到他们，跟城管大队一样。反正不管什么人干点什么事，他们就觉得是破坏了自然的平衡，就要派一大堆NPC过去顶着黄色感叹号站在那里……

本来我觉得像外域的哪块地图，我名字忘记了，凯尔萨斯的老巢，风暴三舰那个图。那么高科技的地方，他们本来应该没什么理由出现的。结果还是能看到他们，理由是，生态船副本里在搞破坏生态的实验。 ¯\( ツ )/¯

还有他们的名言：“啊！美丽的大自然！”

随时随地摆摊

仲夏时节，地面温度50+。在新家装了一天家具，没空调……回家撒点孜然就可以吃了。

漓江建议我，下次记得带点孜然出门。

嗯，非常有道理，还应该随身带一批一次性碗碟刀叉出门。哪天忽然觉得生无可恋了，直接往柏油路上一躺，身后支个小摊——20一份，调料自助。

缺心眼的装修

挑选床头储物，看到这张图的时候忽然就乐了。谁这么缺心眼，把闹钟和仙人球摆在一起，请自行脑补早晨起床的场景……

小强与未来的考古学

KT也当房奴了，最近刚拿到房子钥匙，发照片给我看。当然，他说的话、发的图从来都不止一个信息。

“马丹这个糊在水泥里的小强是什么鬼！？”

“太惨了。”

“真的糊到水泥里去了么？”

“是的啊。”

“真是人间惨剧啊！公元3016年的人会发现这个地层中的古生物遗迹，百思不得其解，‘How the hell did it get in there!?’”

“为什么是说英文。。。”

“1000年后啊……世界很可能剩一种主流语言了。”

“为什么不是哈库拉玛塔塔？或者出现了新种族，鱼人族？瓦尔尔尔尔尔~~~~”

（这画面感，看到这里我内心狂笑，这设定真是太屌了。）

“观众朋友们大家好，主持人好，这一期的《时光漫游》，我们来到了公元3200年。人类的时代终结了，现在是鱼人的时代。请看周围，我现在就身处一个巨大的鱼人村落。我们靠近一些，和鱼人朋友打个招呼。前方记者小马在此报导，我们稍后连线。”说着一张网飞过来，游荡的鱼人一哄而上把小马围殴致shi，然后在1秒钟内作鸟兽散。

XXX是我设计的

和一个建筑设计朋友讨论设计师的成就感。“XXX是我设计的”，最不得了的这个XXX是什么。

首先我们给“不得了”下了个定义，就是最多的人知道，影响力最大。朋友说迪拜塔，我想了想说可口可乐商标。仍然觉得答案不会这么简单，肯定不在我俩的专业领域之内。

然后……我们不约而同打出了“人民币”

中秋的大计划

所谓的大计划，一句话就可以说清楚：

“啊~ 光阴如梭，转眼就要中秋了！！我要赶紧把端午的粽子吃掉。”

为电视而设计

hi@victor42.work (Victor42) — Sun, 11 Sep 2016 15:45:52 +0000

[国外设计第147期]

一篇关于电视UI基本组成部分的介绍。

欢迎来到电视机的新黄金时代。不仅仅因为出现了更多比从前更棒的产品，我们在自己观看和喜爱的节目上也有了更多选择。虽然我们可以随时随地通过电脑、手机和平板观看，但电视在多数人家中仍然占据着一个特殊角色。

但我们对电视的控制，不再只局限于遥控和分线盒；我们开始使用智能电视，或者观看机顶盒的节目，例如Roku和Apple TV，或者使用电视游戏设备，例如Xbox和Playstation。这每一种设备的用户界面，都比老式的屏幕引导要强大百倍。

与电脑、甚至手机相比，为电视设计界面仍然是相对新的领域。它也是一个完全不同的平台。为TV设计需要完全不同的思考，包括屏幕尺寸和距离、技术局限、还有使用场景。

这是本系列的上篇，专注于开始思考电视的界面。我们也会特别关注游戏手柄，把它视作一种输入设备，还有手柄API的基本使用。在下篇中，我们会向你展示，如何构建TV界面原型与控件。

显示器

这就是电视不同于电脑、手机和平板的地方

市场上第一台电视是由阴极射线管制成（CRT），一种在电视上显示不连续画面的粗糙技术。在屏幕边缘处问题尤其明显，为了补偿，CRT电视只好运用过扫描。有了过扫描，图像自身稍微放大了，所以边缘超出屏幕可视区域的外延。

图片来源：Netflix

由于广播电视公司预先裁切掉了部分画面，他们想要避免任何重要信息过于靠近屏幕边缘。历史上，曾经有过标题安全区，文字在此处不会失真，还有画面安全区，图片再此区域内可以安全展示。

出于一些复杂且可笑的原因，过扫描在HDTV上仍然存在。现如今建议保留至少5%的外边距，作为通用的安全区，让所有界面保持在区域内。但是，这个百分比可以调整；Google的安全区更窄，而Apple的安全区则更宽厚。我们发现，建立布局栅格时往往要调节安全区。

以此开头，我们将画布设置为标准的HDTV分辨率：1920 x 1080px，上下60px外边距，左右90px外边距。后面我们会介绍4K。

硬件往往决定了设计模式。在移动端，标签栏作为一种导航的模式，兼顾了又小又高的屏幕尺寸。在电视上，扁宽的屏幕产生了横向排列、最大化展示信息量的布局方式。就像移动端的标签栏，这种模式在多数电视界面上非常普遍。

从左上图开始顺时针依次为：Netflix电视应用、Playstation上的Hulu Plus、Apple TV上的iTunes Store、Apple TV上的AMC

类似地，主流电视界面（除了超级萌、却也令人抓狂的LG Bean Bird），都由D面板控制，D是方向的英文首字母。无论是遥控或是游戏手柄，D面板把导航限制在四个方向上：上下左右。这使得网格成为电视应用最自然的界面结构。

Apple TV（上）用了阴影和z轴位置表现鼠标指针，而HBO GO（下）使用了蓝色的边框

电视界面另一个至关重要的元素是指针。没有触摸和鼠标，用户必须转到他们想要选择的元素上。指针高亮显示了当前选中的元素，随着D面板的输入变化而移动。应用通常使用边框、投影、z轴或几种混合来呈现选中状态。屏幕上的每个元素都可以被指针选中，也要清晰表明指针可以向哪边移动。

在我们的原型中，我们重建了一套典型的电视界面布局，只有一行内容。我们在第一项上增加了指针状态。

输入

除了遥控器之外，人们还会如何控制电视

从左到右：Logitech Harmony、Samsung Smart TV、Apple TV、Roku、Amazon Fire TV

多数电视和流媒体设备都依赖某种形式的遥控器。有些平台在实验语音输入，而其他一些，例如新的Apple TV则在尝试触摸输入。无论如何，随着更多流媒体设备将他们的应用延伸到游戏平台，更多人开始使用游戏手柄操作电视界面。电视游戏设备非常强大，设备多功能，在我们的工作室，我们非常热衷于通过这种硬件来创造最佳的设计与原型。

用游戏手柄操作有许多优势。相对D面板，游戏手柄带有摇杆，提供了标准的四个方向移动，同时也能更加微妙的斜角移动。相比D面板，摇杆更快，更易响应，尤其对于电视游戏玩家。

Xbox One控制器（左）和Playstation 4控制器（右）

有些各个平台通用的惯例，例如选择和返回按钮，在不同控制器里位置相同。每个平台也有自己的惯例。在Xbox中，trigger提供了“上一页”和“下一页”功能，bumper则用来切换不同内容视图。各平台还有许多“高级用户”按钮，经验丰富的玩家都很熟悉。

但是，为客厅设计时，场景很重要。虽然许多玩视频游戏的核心用户非常熟悉这些控制器，但客厅设备终究是分享设备。我们希望其他不太熟悉游戏手柄的用户，也用它们进行娱乐。为了核心功能，最好还是坚持标准的按钮惯例。

在下篇中，我们会通过Gamepad API，深入研究如何将游戏手柄控制器加入到界面中。

文字

从10英尺开外浏览界面

想象你坐在沙发上，看着一场电视节目。很容易看清画面的运动，但是开始播放演员表时会发生什么？或者弹出一个菜单呢？

电视应用通常都被称为10英尺的体验，这个术语表示你与电视间的通常距离。有了这个距离，我们对待界面的方式，要与网页和移动端稍有不同。界面要更加稀疏，设计元素要加大，才能从房间的另一头阅读。

在10英尺的体验中，文字的处理尤其棘手。毫无疑问，要放大。字号与字重都要增加。我们发现18px是可阅读的最小字号，只适合不重要的标签，例如页面顶部标签。在我们的设计中，我们把标题设为92px，而正文设置成24px。

优秀的电视文字设计，关键在于不断检验。纤细的小字体在显示器上看起来似乎干净清晰，但是一旦到了电视上，可能就被淹没或者无法理解。我们在电视屏幕上建立了一套测试模型，在流程早期就定义了字号。

颜色

了解电视屏幕的局限

HDTV的色彩范围比你的电脑显示器更局限。这意味着设计时，你就要使用更广的色彩范围，才能在电视上正常显示。在亮度、显示和其他设置方面，不同制造商和模型的电视千差万别。颜色应该尽早且经常在电视上测试。

开始设计前有些规范可以遵循：避免纯白，明亮的光线对眼睛有害。还要留意渐变和深度模糊，有限的颜色范围会导致色条出现。为了完成原型的设计，我们把背景色设置为#EEE，隐藏了安全区和参考线。

4K的未来

准备进入新时代

不像手机，多数消费者不会定期升级电视。越来越多4K电视正在出现，但我们的设计，仍在为一个基本局限于1080p的市场服务。

最终这些都会改变，就像移动端设计中的不同屏幕尺寸，设计师很快也要把电视设计做成2倍。除了更棒的画质，更高的像素密度意味着文字和界面更加清晰易辨识。

可能4K时代的界面设计，最有前途的会是色彩范围与深度的提升。如今的HDTV使用的是名为Rec. 709的色彩配置，色彩范围相当有限。有一种新的色彩配置，Rec. 2020，就是为4K电视而生，提供了更大的色彩范围。

图片来源

但是，色彩深度比范围更加重要。如今多数HDTV提供8位色彩。这就意味着每个RGB色彩通道只有256种颜色，总共可能的色彩只有1.678千万种。新的4K电视有10位甚至更高的色彩，每个通道能提供至少1024种色彩，总共可以产生10亿种色彩。有更大的色彩深度，渐变和模糊区域的条纹就不见了，设计师们得以有更多机会运用色彩和处理照片素材。

原型

一切设计最重要的部分

现在我们有了基本的设计，准备开始制作原型了。下周，我们会通过Gamepad API和一些基本的HTML/CSS/JS操纵手柄控制器，演示基本的导航原型。关注我们，一定要看看下篇。

同时，这里有些资源，帮你开始设计自己的界面：

下载案例(PSD)

tvOS人机界面指南

为Android TV而设计

Amazon Fire TV设计与用户体验指南

【译者注：本文的下篇核心内容为实际制作，介绍了电视手柄控制的具体开发过程与代码细节，关于用户体验的内容不多。所以有兴趣的朋友可以自己尝试，https://medium.com/this-also/designing-for-television-part-2-f31793e7d2e9?swoff=true#.k5m0pm2i1，下一期我们将关注其他题材。】

原文链接：https://medium.com/this-also/designing-for-television-part-1-54508432830f#.6vj0fdnsf

作者信息：Molly Lafferty Design Director @ThisAlso

Spotify官网的用户体验变迁（2006-2016）

hi@victor42.work (Victor42) — Sun, 04 Sep 2016 00:43:32 +0000

[国外设计第146期]

10年的巨变

网页设计在过去10年间沧桑巨变。本文中，我们来研究这些年的Spotify官网，讨论其中的关键变化。

早年的网站

“大家只想畅听全世界的音乐”——Daniel Ek。

Daniel Ek和Martin Lorentz于2006年创立了Spotify。2008年它正式发布，beta版在2007年发布。从那时起到2016年5月，它已经汇集了超过1亿的活跃用户。

2006年

2007年

这两版的设计出现在发布之前，为了推广桌面应用。他们让用户注册账号，通过邮箱获取更新。两者都缺乏图形，包括logo在内。

可以看出后者严重浪费页面空间，割裂且不对称。06年的网站给我感觉要好很多，很有煽动力，怂恿我注册。06年的网站使用的字号也更易于阅读，另一版则非常小，尤其在有大量空白的情况下。

2008与2009年

这版如果一直用到今天，其实也并不差。导航栏很简洁——上面的链接可以再丰富些，因为这看起来很空旷，不过整体还挺吸引人。运用得当的图片建立了品牌画面（似乎是一种高雅的音乐欣赏方式）。

正文字体可以增大间距和字号。几个图标都太大了。有趣的是，左侧的留白比右侧更宽，如果你注意到会感觉这很不专业。如果注册栏出现在不可用提示之前，那就会更加友好，不过总体已经很不错了。

2010年

图片的使用展示了他们的优秀产品，让人迅速了解它的作用，并且更愿意使用。卡片的设计很时尚，在那个时代可能算超前的了（卡片如今已经成为一项主要设计趋势）。

其他图片元素都处理得很好。非常简约，但展示了关键信息，一眼就能掌握，点击查看详情——这是明智的设计，让浏览更加直观。

Spotify的移动版发布了，品牌在此时大举扩张，也成就了一种在路途中欣赏音乐的便捷方式（要知道这可是2010年，令人吃惊）。

他们也提供了登录和社交媒体的支持，这是一项巨大的进步。

2011年

这版很像2010年的网站，但有几处变化表现不佳。

产品功能的列表相当杂乱，而且Unlimited级的订阅似乎并无必要，对用户来说有点抢钱的感觉。除了无广告，它和免费版没有任何区别（Spotify也这么认为，后来去掉了这一级）。

图形元素非常“卡通化”，丧失了先前设计中的精致优雅。

2012年

这一版，他们全力以赴投身极简设计，网站的欢迎页除了一个行动指令别无他物。

从某些方面而言这很管用，从令一些方面来说则不然。它开门见山（下载Spotify），但无疑缺乏描述信息，例如介绍特性和移动设备功能。

2014年

真正的优秀设计出现了。从此时起，后续的所有设计都运用了视觉差滚动。

图片很棒，高清照片传递了欢乐与时尚的感觉。Logo改版了，它的辨识度比原先的高。字体也变了，字号加大，更易阅读。而且，卡片式设计回归了。

行动指令吸引眼球，虽然免费版不如高级版醒目。但总体做得不错。

2015年

行动指令的设计更好了，因为现在的免费版与高级版有着同等的视觉强度。

所有的图形看起来迷人、富有魅力。运用鲜明的色彩呈现了“炫酷”的外观，激发了夏天与节日的情绪，营造了让人想听音乐的氛围。

极具视觉表现力，同时易于使用。

从2011版开始，不同版本的功能清单就一路沿用过来。它简洁明了，呈现了所有重要信息，并且极易辨识。

Playstation应用伴随着网页播放器一起发布，品牌进一步扩张，提供了更多的方式，供用户方便地享受他们的服务。

2016年

这一版集合了之前版本的优点。延续了相同的视觉设计风格。鲜艳的色彩回归了，但色调有所不同。主体字色几乎都是白色，略微提升了可读性，尤其在鲜艳的背景上。

“一切设备皆可播放”的标语，表现了这家公司对于可达性的重视，并且极度认可移动市场的价值。

页脚的白色文字显然比先前版本的灰色更醒目。社交媒体图标也恰如其分地回归了。渐变图标如今很盛行，因为色彩鲜艳（这是加分项）。他们在形式与功能之间找到了平衡点，让网站既易用又美观。

10年的网页设计历史就在其中。网页设计竟然走了这么远，真让人吃惊，即使从2011年起也称得上是巨变。接下来的10年会发生什么？我很期待VR与AR在未来的设计中占有一席之地，但谁知道呢，我已经等不及要亲眼目睹了！

非常感谢UX timeline提供这些图片。他们为各个网站保留了不同时期的图片，一定要去看看

原文链接：https://blog.prototypr.io/how-spotifys-website-ux-has-changed-2006-to-2016-ff981fe3b0a3#.ujajsrgyq

作者信息：Sean Hervo Scottish designer. Gryffindor. I consume copious amounts of milk.

Netflix的AB测试之道

hi@victor42.work (Victor42) — Sun, 28 Aug 2016 00:53:10 +0000

[国外设计第145期]

几周前，我在旧金山的Yelp总部参加了一场设计师与极客们的活动Anna Blaylock和Navin Iyengar两位都是Netflix的产品设计师，他们分享了自己多年在千万级用户群中做A/B测试的经验。他们也展示了相关的产品案例，帮助与会者思考自己的设计。

下面是我关于他们演讲做的记录，其中包含我最喜欢的一些精华。

演讲的照片

实验

我非常喜欢PPT的第一页——绝命毒师里的这张图用得很聪明，能表现实验的概念。

[](https://cdn.victor42.work/posts/2016-08/08-27/netab-2.jpeg “How Netflix does A/B testing”)

科学的方法

[](https://cdn.victor42.work/posts/2016-08/08-27/netab-03.jpeg “How Netflix does A/B testing”)

假设

在科学中，假设是指一个想法或一套解释，需要通过研究和实验来验证。在设计里，一套理论或猜想同样可以被称为假设。

[](https://cdn.victor42.work/posts/2016-08/08-27/netab-4.jpeg “How Netflix does A/B testing”)

假设的基本概念，是没有确定结果的。它经得起检验，这些测试也可以被重现。

“A/B测试背后的总体概念，是创造一套实验，有对照组和一个或更多实验组（在Netflix中这被称作‘单元’），对他们进行区别对待。在实验中，每个用户都属于唯一的单元，其中一个单元会被设计成‘默认单元’。这个单元代表着对照组，使用体验与所有没有加入实验的Netflix用户相同。”——Netflix技术博客

Netflix的A/B测试是这样进行的：随着测试启动，它们会记录特定的重要指标。例如播放时间和留存率之类的因素。一旦测试者得出足够有意义的结论，他们就会进一步观察每组实验的效果，定义出各个版本中的优胜者。

“A/B测试是研究用户行为最可靠的方式。”

[](https://cdn.victor42.work/posts/2016-08/08-27/netab-5.jpeg “How Netflix does A/B testing”)

[](https://cdn.victor42.work/posts/2016-08/08-27/netab-6.jpeg “How Netflix does A/B testing”)

实验

许多像Netflix这样的公司通过实验保障用户数据。同样重要的是，投入时间和精力合理安排实验，确保数据的种类和数量足以有效地阐明他们感兴趣的问题。

你可能会注意到，Netflix首页的焦点区域似乎随着登录状态改变。它们都是Netflix复杂实验的一部分，让你观看他们的节目。

我首次登录看到的首页。

PPT中的图片：用户注销后会看到纸牌屋的页面。

我第二次登录时看到的页面。

我换了另一个账号登录看到的页面。

[](https://cdn.victor42.work/posts/2016-08/08-27/netflixab-11.png “How Netflix does A/B testing”)

我换了一个“儿童”账号登录看到的页面。

我未登录时看到的页面。

A/B测试的概念，是向不同用户群呈现不同内容，收集他们的反应，通过结果来建立未来的策略。Netflix工程师Gopal Krishnan写的这篇文章里提到：“如果不在90秒内吸引一个用户的注意力，这个用户就很可能失去兴趣，去做其他的事情。这些失败的情况，往往是因为我们没有呈现正确的内容，或者我们呈现了正确的内容但没有提供足够的观赏理由。”

Netflix早在2013年做过一个实验，用来研究是否可以通过创造一些不同版本的作品，来提高某个标题的收视率。结果如下：

图片来自Netflix技术博客

Krishnan补充道：“这个信号很早提示我们，用户对于封面变化的敏感。这个信号也表明，还有更好的方式，可以通过Netflix的用户体验，帮助用户找到他们要的那一类故事。”

Netflix后来打造了一套系统，能自动根据纵横比、裁剪、润色和不同语言的同一张背景图为作品分组。他们在TV节目上也重复这个实验，用来追踪相关作品的表现。例子如下：

图片来自Netflix技术博客。两张带有标记的图片明显胜过其他版本。

图片来自Netflix技术博客。最后一张带标记的图片明显胜过其他版本。

请看两篇博客文章，可以了解更多关于Netflix的A/B测试：

Netflix如何通过A/B测试选择最佳的视频封面
Netflix实验平台，一项由专门工程师团队支持的服务，使每一个Netflix工程师团队都能够进行A/B测试。

我的收获

A/B测试是研究用户行为的最可靠的方式。作为设计师，我们应该通过实验的角度，思考自己的项目。

PPT中的图片：你的直觉未必正确。

**何时以及为何进行A/B测试？**设计完工后，运用A/B测试调整设计细节，追求2项指标：留存率和收入。通过A/B测试，全产品全天候追踪用户，可以发你的改变是否提升了留存率或者增加了收入。如果没有，则采用默认方案。用这种方式，A/B测试可以持续用来提升业务指标。
**用户的需求和行为，是你希望的那样吗？**我的经验是，通常，用户并不能像你期望的那样迅速完成一个任务。而且有时候，他们甚至找不到你放在页面上的某个特定的按钮。原因可能有很多种：设计不够直观；颜色不够鲜明；用户对技术陌生；他们不知道如何做决定，页面上太多选项；其他等等。
**你的直觉正确吗？**遗憾的是，涉及到用户行为时，我们的直觉可能是错的——唯一的证明方法就是通过A/B测试。A/B测试是检验哪种用户体验设计更加有效的最佳方案。在工作中，我们的用户产品团队，就通过A/B测试在我们的房地产网站上得到了验证。比如，他们想了解是否可以通过设计改进，来提高用户点击Google广告的注册率。他们创造了几个不同的实验性设计，对它们进行测试。他们认为那些去掉了房产图片的设计会胜出，但最终发现去掉房产图片和价格信息的转化率最高。

“了解用户是设计过程中最令人兴奋的部分。”
**探索边界。**最佳创意来自任何的创意探索。在工作中，我们的产品团队协作进行许多项目。由于牵扯到太多方面（从设计师到产品经理，再到开发者），我们必须一起探索边界。测试了我们的原型之后，有些最佳创意来自开发者或产品经理。
**观察人们的行为，忽略他们的言辞。**与用户交谈时，牢记一点：*他们总是言行不一。*我这周发起了一些用户测试，有充分的理由告诉你为什么。我让一个用户试用联系人列表界面的原型，我问他会不会经常排序和过滤联系人。他说不会，因为他不需要。但是当他发现新的下拉筛选菜单，他感到很惊奇，原来同时排序和筛选多个选项如此方便——然后他马上问产品什么时候上线这个功能。
**用数据来估计机会大小。**一切都在于为什么。数据可以支撑创意成型。

了解用户是设计过程中最令人兴奋的部分。设计没有成品，许多的改版和迭代可以改进设计，给用户带来尽可能好的体验。

本文最初发布在Medium。

原文链接：http://blog.invisionapp.com/how-netflix-does-ab-testing/

作者信息：Jessie Chen, UI/UX Designer Jessie Chen currently works at ZapLabs, where she designs a CRM for real estate professionals. She enjoys gathering user feedback through user testing, and iterating on design ideas to solve usability issues. In her spare time, she shares ideas on Medium about how design impacts businesses. Follow me on Twitter

看得见的才是有用的

hi@victor42.work (Victor42) — Sun, 21 Aug 2016 17:05:17 +0000

[国外设计第144期]

几年前的夏天，我有幸住过旧金山一幢公寓楼的两间独立套房。

由于是同一幢建筑，你肯定会认为两间房非常相似，也确实如此。两者大约都是90平米，都有巨大的网格状玻璃窗，大量的阳光倾泻而入（也带来了热量——我们总是戏称这里就像我老家德克萨斯州：每逢下午都有90度）。两套都有同样的角落厨房、通向开放式卧室的工业风楼梯，还有烦人的中空门。

唯一的区别在于，前者在顶层，后者在一楼。为什么这一点如此重要？嗯……公寓顶层的视野更开阔。虽然两者都有户外空间，公寓一楼附带有后院花园，公寓顶层则带有楼顶私密空间。

我们首先住了带有楼顶天台的那套。虽然它不像下图这么奢华，但我们上楼探索时感到非常兴奋。有一张小桌子和几把椅子，还有漂亮的城市景观，最适合下午4点一伙朋友喝着红酒玩卡坦岛（一种桌游），或者雾霭渐浓时读上一本好书。

这是个非常拉风的天台

搬家了，我们告别了屋顶天台，迎接我们的是私家花园。同样的，下面这张漂亮的图片，只是示意图。我们的花园实际上没有草，不过足够大，能放得下沙发和伞，还有一些盆栽植物和一副烧烤架。

这是个非常拉风的花园

理论上，你会觉得把屋顶天台换成花园非常公平。我是指，一个有开阔视野，另一个易于进出。有得必有失，很公平。

实际上，体验过两者之后，我去屋顶天台的次数，用一只手就能数的出来。

在同样长的时间里，我们去花园就相当频繁，每个（晴朗）午后都会去。

我一直在想这个问题。

事实是，没有任何一个天台的使用率能够比得上花园或院子，无论它多讨人喜欢、设施多完备。

我们住在公寓一楼时，我们每次看向窗外，都能瞥见花园。每天能看到20次、50次、100次，我们的眼睛看见了舒适的沙发和遮阳伞。*它就在那里。*都不必下意识去想，我们发现自己总是想找理由去外面，享受美好的天气。无论是在笔记本上办公，与朋友闲逛，或是正在烧烤。

住在公寓顶楼时，我们每天都看不见天台。它并不是难以到达——上楼大概只要30秒。*但它不在视野内。*我们得记住它的存在，并且要下决心到上面去。上去所需的意愿，和逛周边商店与公园是同等水平。当然，如果我们邀请了客人来，想让他们大开眼界，就会带他们上天台。但是，我们从不会偶然想起那些桌椅和绝妙的景观。我们很容易忘了有这样一个天台。所以，哎，几乎没怎么用过它。

设计用户界面时，我常常想起花园与天台。

我们设计师喜欢极简主义，喜欢留白，喜欢史塔克家族。我们喜欢把大量功能和选项，藏在精致的角落与缝隙中。在菜单里、在抽屉里、在长按或滑动之后。

我们的理由是，“人们学会一次后，就会一直记得。”我们会说，“无论我们把它们放在界面的何处，人们都会做出相同的选择。”

真是太容易低估可见性和默认项的力量了。

很久以前，Facebook曾经一度在移动应用左上角使用了三横图标（或者说“汉堡图标”），用来展开应用的导航面板。用这种方式来访问我们网站的各种功能，简洁而优美。（作为奖励，我们的移动应用和桌面网站都统一使用了这种导航菜单。）我们把侧滑抽屉导航发扬光大了，如今许多应用中仍然能看到这种设计模式。

汉堡菜单图标的导航面板

不幸的是，汉堡菜单就是一个天台。你只有想着“我要进入XXX”的时候才会去点它。这就是典型的眼不见心不烦。

我们采用了标准的标签栏，由天台变成了花园。虽然它在屏幕上增加了元素，但这是一种熟悉的模式，高效得多，帮助人们发现和进入我们的顶级功能。

我发现还有许多其他例子，关于天台与花园在UI设计中的讨论：

入口：设计新功能时，第一步往往是直接开始设计原型，展示这部分功能如何运转。这就像是在设计户外空间的格局与陈设，却没有问过“它在房子后面还是在屋顶？”首先应该要问“如何让人们发现这个功能？”要使你的作品成功，确定入口更加困难也更加重要，胜过反复讨论这项功能如何使用的具体细节。
菜单：把一大堆选项藏在菜单或手势操作中，非常有诱惑力，我们总会假定人们想找就能找得到。但多数人都不会，除非你积极地推荐这些功能。即使你成功地让人了解到了这些隐藏功能，也需要很长时间使它成为一种常识。如果一定要让用户知晓这些功能，就该明确地展示出来。如果不重要，考虑干脆把它去掉，降低认知负荷。
提供选择：面对没有明显答案的问题，要做出艰难的产品决策，有时候团队会勉强接受“干脆让用户自己选择”。这么做时，要知道绝大多数（80%或90%）会选择你提供的默认项，无论是什么，所以你其实并不能避开这个艰难的产品决策。（不提供默认项则更加糟糕：你会流失一大批根本不愿意做选择的用户。）
环境操作：人们正在使用或浏览时，可以推荐一些类似的事情让他们做或看。正在阅读奥运的文章？你可能还对这个发布者的其他奥运报导感兴趣。这张中世纪浴室的照片让你深受启发？请看其他浴室照片，为家庭装修项目提供灵感。正在对星标邮件分类？这里还有些你标记了稍后处理的东西，或许你现在有时间处理。这是体验设计中最有效的模式之一。
利用现有渠道：现有的分发渠道的力量在于，已经有很多人在用了。写文章发布到个人网站，这相当于天台。写文章分享到Medium、Facebook、Twitter、<此处填写你的选择>，相当于花园，能够捕获更多流量。这点适用于任何独立空间、页面、App、标签页或书签。问问自己：我需要创造自己的渠道吗，还是用其他渠道能更快帮助我达成目标？

如果想要什么被看见，被使用，不要让人去寻找它。把它放在看得见的地方。

原文链接：https://medium.com/the-year-of-the-looking-glass/what-you-see-is-what-you-use-5a97677a8c71#.fzs4uyirv

作者信息：Julie Zhuo Product design VP @ Facebook. Self-professed tyro and lover of food, games, words. Follow me as @joulee or on www.juliezhuo.com

优化数据表格设计

hi@victor42.work (Victor42) — Sun, 07 Aug 2016 12:27:25 +0000

[国外设计第143期]

**糟糕的表格。**它们到底问题出在哪里？

表格在互联网早期是基础设施之一，之后许多设计师用更新更时髦的布局取而代之。虽然在如今的互联网上很少露面，但是表格在我们基础日常生活中，仍然为我们收集组织了许多信息。

例如，我觉得有一份表格可以称之为表格之母：美国的“协调关税表”，长达3550页的表格，列出了每一种可以进口到美国的商品，包括多如牛毛的条目，例如“男士或男孩的大衣、短大衣、披肩、斗篷、厚夹克（包括滑雪衫）、防风服、和类似物品（包括带衬里的、无袖的夹克）”。

不过短大衣到底是什么？

数据表格容易使人发火，毫无疑问这要归咎于它们粗糙的设计，看起来糟糕透了。设计是表格的关键：如果处理得当，就能使复杂的数据能够轻松浏览和比较。如果处理不善，它能让信息完全无法理解。

我们当然要处理得当，是吧？

了解数字

数字生来并不等同。我不是指π和∞（虽然我在派对上经常用）；我是指数字有的是表格数字，有的是旧体数字，有的是等高数字，有的是比例数字。

下图简明地阐述了旧体数字和等高数字之间的区别。

旧体数字与等高数字

旧体数字在句子中表现很好，在句子当中它们更匹配小写字母的尺寸和间距；等高数字更加统一，强调了一种网格式的表格结构。

比例数字和表格数字之间的区别不是那么明显：

比例数字和表格数字

比例数字的设计初衷是保持黑白协调——也就是说字体的尺寸和间距大致相同。相反，表格数字每一个尺寸都相对独立，数字就能纵向对齐。虽然在一两行的情况下，两者区别似乎不大。但使用表格数字，能让大型表格浏览起来更轻松，不易出错。

使用等高表格数字的技巧

设计时，你需要花点精力，确保用对了数字的类别（等高表格数字并不是默认的）。Adobe产品有一个“opentype”面板，可以对数字进行适当设置，CSS也提供了一种slightly-cryptic语法用来开启这个功能。除此之外，稍微搜索一下你就能找到方向。

但也有个坏消息：并非所有字体都包含可用的等高表格数字。那些漂亮的非常贵。有少数例外：优秀的Work Sans字体是一款带有等高表格数字的免费字体。

如果找不到合适的带有等高表格数字的字体，可以退而求其次使用等宽字体——它们看起来更像“代码”，总是很适合在表格中展示数字。而且，新的Apple系统默认字体——旧金山字体，就包含优秀的等高表格数字，并且在小字号情况下表现良好。

对齐很重要

可以遵循3条半原则：

1. 数字应该右对齐 2. 文字信息左对齐 3. 表头与数据对齐 3.5. 不要使用居中对齐

美国各州历年人口统计——维基百科

数字是从右向左读的；这是因为，我们对比数字时，首先看个位，然后十位、百位。多数人也是这么学会算数的——从右边开始，向左移动，在移动中传递数字**[1]**。因此，表格的数字应当右对齐。

文字信息是从左向右读（至少在英文中如此）。比较文本元素通常是靠字母表顺序排列：如果两个条目首字母相同，就对比第二个字母，以此类推。如果不采用左对齐，尝试快速浏览文字会使人抓狂。

通常，表头应当符合数据的对齐方式。这能保持表格竖直方向整洁，营造一致性和上下文环境。

居中对齐会导致表格的行“参差不齐”，浏览条目就会更难，常常需要额外的分隔物或图形元素。

最小数位一致 = 更好的对齐

有个简单办法能使表格正确对齐，保持数字的最小数位一致——通常是指小数部分的数位——每一列保持统一。数位展开来讲可以写一整篇文章，那么我在此就简单总结：数位用的越少越好。

短小精悍的标签

使用标签来配合数据至关重要。这些搭配的内容能让表格被更多读者理解，适用于更多的情况。

密西西比河洪水预报——NOAA

标题

虽然是老生常谈，但给数据表格起一个清晰简明的标题，与其他的设计决策同等重要。有了好的标题，表格就可以独立使用：它们可以用在许多不同场合中，也可以由外部来源引用。

单位

表格中最常用的标签，是数据的度量单位；通常，每条数据都会重复加上单位。其实不该如此，应该只在每列的第一条数据加上单位。

表头

表头尽可能短；数据表格的设计，应当使注意力集中在数据本身，而且长表头标签会占用过多的视觉空间。

尽可能少着墨

考虑如何装饰表格中的图形元素时，目标应当始终为削弱表格的痕迹，同时精确保持表格的结构。尽可能少“着墨”，就能做到这一点——也就是说，尽可能不给元素加装饰。

2016年美国棒球联盟击球统计——BaseballReference

分隔线

如果在表格中使用适合的对齐方式，分隔线就是多余的。它们最大的贡献，就是让你缩减元素之间的距离，但仍能区分不同元素。即使要用，分隔线也要非常淡，不能妨碍快速浏览。

水平分隔线最有用，因为它们能显著减轻长表格在垂直方向的视觉重量，加快大量数值的对比工作，或者从时间中发现趋势。

关于分隔线，我有一条未经证实的观念，间隔条纹很不好。真的非常糟糕，信不信由你。

背景

在指示不同领域的数据时，背景是最有用的：例如从单条数据转为总和或平均值。

突出显示数据，为数据增加额外信息，或者用于指明与前一时期相比有变化的数据。达成这些目的，不用背景也行。单单用一些图形元素，例如✻、†（我的最爱之一）或▵。

而且，表格应当是黑白的。运用彩色来提供组织性或增加含义，也会增加误解或错误的可能，并且引发视觉障碍者的易用性问题。

结论

表格或许很枯燥，但它们是数据丰富的文档的主要元素，值得我们投入每一丝每一毫的设计思考。设计更有效、简洁、易用的表格，可以极大改善分析理解大量数据时的痛苦体验。

延伸阅读与启发

FiveThirtyEight是一个很棒的灵感来源——他们用了一种名为Decima Mono的字体来展现数据，这是专为狭小空间展现大量数据而设计的。

Butterick的实用字体，我遇到字体相关的事情首先就会来这，其中的许多资料都保存了一份——非常实用！

最后，所有的文章和数据设计，如果没有Edward Tufte的箴言那都是不完整的。他在设计上的深刻见解不可或缺。

[1] 想了解有趣的算数方法，请看日本儿童使用的这种算盘，还有网格乘法。

原文链接：https://medium.com/mission-log/design-better-data-tables-430a30a00d8c#.9hag7vx1g

作者信息：Matthew Ström Pixel farmer. Partner at @plntary. http://planetary.io

光鲜背后：Pokemon Go的用户体验现状

hi@victor42.work (Victor42) — Sun, 31 Jul 2016 11:23:26 +0000

[国外设计第142期]

今天，我像往常一样走路去上班。

但我不是孤身一人。在我周围，从店铺与餐馆门口的人行道，到城市公园里的绿色草坪，人们举着手机四处徘徊。小巷和公园入口这样的普通场所，聚满了人，在计算机算法作用下随机地聚集起来。

这就是Pokemon Go。

口袋妖怪作为一种全国现象，大约20年前就爆发过。人们喜欢这个寻找和捕获口袋妖怪的创意，当时他们满足于用Gameboy作为平台。

许多年来，口袋妖怪游戏的热潮逐渐退去，因为后续的更新版本似乎没有延续初代游戏背后的魔力。但随着Pokemon Go的出现，数以百万的忠实粉丝甚至非玩家都蜂拥加入这场游戏。2周内，Pokemon Go就有大约7.5千万的下载量。

不幸的是，并非一帆风顺。

这款游戏仍然有大量Bug，也存在许多界面问题，让初学者难以学习使用。即使作为一个有经验的玩家，我也花了好几分钟试着了解如何寻找和捕获第一只口袋妖怪。尽管有许多批评文章，有个不争的事实，许多玩家已经接受了这些频繁的、周期性的服务器崩溃，作为这款游戏正常体验的一部分。

本文中，我们收起偏见。我们来钻研Pokemon Go在用户体验方面的优点与不足。

优点

首先，我们看看是什么使得Pokemon Go的用户体验如此吸引人。

创建个人资料

个性化。游戏中人见人爱的部分。

像口袋妖怪这种身临其境的游戏，包括传统的口袋妖怪游戏和Pokemon Go，人们都希望真的感觉到自己置身游戏中。他们想要探索和体验这个世界，就像自己真的在口袋妖怪的旅程中。

使游戏贴近用户的最简单快速方法，是让他们创建定制属于自己的角色。

任天堂在第二代口袋妖怪游戏中，允许玩家选择男孩还是女孩角色，他们那时意识到了这个道理。这帮助他们创造出了他们目前为止最身临其境的游戏。在Pokemon Go中，相比其他口袋妖怪游戏，还多了许多个性化选项。

游戏风格

口袋妖怪的招牌元素之一，是当你穿过一片高草丛，忽然冒出一只口袋妖怪。任天堂沿用了这种体验，通过增强现实技术，使它尽可能真实、令人兴奋。

置身游戏中，你会随处看到口袋妖怪，确实就是字面上那样随处可见。它引发了同样的兴奋，就像1996年随Gameboy发布的口袋妖怪那样。当你将屏幕对准口袋妖怪，进入“战斗”并尝试捕获它时，会触发一场遭遇战。

就像传统口袋妖怪游戏一样，关键在于第一次投掷不能保证成功捕获。有时你的动作会落空，口袋妖怪会偏转精灵球轨迹，精灵球晃动几次后口袋妖怪会逃跑，口袋妖怪甚至会直接躲开。

这种几率正是游戏令人兴奋的所在。它让这场口袋妖怪大师之旅保持有趣，以此使用户成瘾。我在下图中用Nir Eyal的成瘾模型图表解释了Pokemon Go的现象：

社交分享

任天堂和Niantic把Pokemon Go设计成一款社交游戏。只有当包括朋友在内的其他人加入时，人们才能从这款游戏获得价值。

周围越多人玩，就能发现越多的口袋妖怪。Pokemon Go天生就是虚拟的，基于人口密度和同时在线人数。

玩家一旦达到5级，就会被分到3支队伍中。然后游戏会鼓励不同队伍间友好地竞争，玩家相互战斗来控制场馆，它们可以被任何一支队伍占领。人们会变得极其好战，这使得游戏更加激动人心。

除此之外，任天堂还为Pokemon Go的界面增加了一个非常有用的功能。许多人想要与别人分享自己的体验，尤其是向朋友们。当一名玩家看到稀有的口袋妖怪或其他什么有趣的东西，他们的本能就是手机截屏。幸运的是，任天堂在Pokemon Go的界面上增加了一个截屏按钮，捕捉精彩时刻难度大大降低了。

不足

现在我们来讨论一下Pokemon Go的用户体验中那些失败的方面。

无用的引导界面

我们从头讲起

终于在迟缓的服务器上创建好了个人资料之后，你最终能够启动游戏了，但这一刻却几乎得不到任何帮助指引，告诉你如何与环境互动。

所幸，加入Pokemon Go的世界之后，你立马会被引导看到屏幕上的几只口袋妖怪。但是，也没有明确说明，解释如何捕捉口袋妖怪。你完全得靠自己摸索如何进行，这就会延缓非玩家或休闲玩家的“顿悟”时刻。

引导界面只是流于表面。你找不到任何渐进提示，告诉用户这些关键操作：

把口袋妖怪交给教授，可以进化口袋妖怪
特定物品在游戏中如何使用，例如Razz Berries
如何点按附近的口袋妖怪查看物种的详细信息

以上所有操作，都能帮助用户加深与游戏的互动，界面上至少应该留下环境提示。

服务器问题

对于Pokemon Go的用户体验，最严重的负面影响要归于服务器问题。

从尝试创建账号开始，用户就要面临多次长时间的加载，还有频繁的客户端崩溃。游戏发布后的第一周内，许多用户甚至无法创建账号。对于那些成功在Pokemon Go的世界中创建角色的玩家，其中许多人仍然玩不了，因为严重的游戏延迟、bug，使得用户在捕获和战斗中退出游戏，引发更多的崩溃。

所有这些问题，在Pokemon Go的玩家体验中，导致了难以置信的挫败感。不仅仅因为用户难以开始游戏，而且交互流程被一系列的Bug和小故障打断，破坏了沉浸感。

Pokemon Go的游戏性和社交方面很有趣，但首先得能用。

幸运的是，任天堂和Niantic最近发布了一项更新，处理这些服务器问题。还没有完全修复加载时间和崩溃的问题，但这一步走在了正确的方向上。

没有足够的持续功能

Pokemon Go很好玩。你可以周游世界，捕获口袋妖怪、争夺场馆……但也只有这些。

Pokemon Go有两项核心的游戏方法：捕获和战斗。

250种独特物种可供捕获。当同时在线的玩家减少，存在的口袋妖怪也会减少。
战斗在场馆里发生，它们分布在世界各个角落。多数场馆存在于高人口密度的特定区域，相互之间距离很近。但是，在人口稀少的区域，场馆就更稀疏，交通更难到达，导致战斗更少发生。这就疏离了人口稀少区域的玩家。

一旦用户从游戏最初的兴奋中缓过来，“苦力活”就来了。“苦力活”指的是升级所需的枯燥工作。

用户习惯了基本的游戏后，Pokemon Go在基础部分逗留太久了。秋季和冬季临近，温度下降会致使更多用户待在室内。任天堂和Niantic需要增加贴心的功能来克服停滞和季节性因素。

收获

结尾，我们总结一下Pokemon Go的经验教训：

引导应该符合用户当前的熟悉程度。Pokemon Go的玩家由很大跨度人群构成：新手玩家、休闲玩家、熟练玩家。因此，多一些线索应该会有实际帮助。
产品在发布之初不必做到无懈可击，但是要小心用户体验和技术方面的隐患堆积。虽然这款产品没有什么功能上的迟缓，许多游戏内的bug和服务器问题仍然需要修复。
准备好进化你的产品。虽然Pokemon Go的价值和主张已经足够坚实，能够引导它在起初快速成长，但是AR的风潮不会永远盛行。用户仍然不能与好友对决（这是过去各种游戏的巨大卖点）。在商业方面，任天堂和Niantic完全有可能与商家合作（例如餐馆、咖啡店等），促进更多步行通勤。

原文链接：https://www.uxpin.com/studio/blog/beyond-hype-ux-reality-check-pokemon-go/

作者信息：Indra Sofian Indra is a Content Strategist at UXPin. Previously, he worked in product development at AT&T.

功能性动画设计：优秀的转场效果

hi@victor42.work (Victor42) — Sun, 24 Jul 2016 12:39:09 +0000

[国外设计第141期]

功能性动画是一种微妙的动画，有着明确、合理的目标。它能减少认知负荷，防止变化视盲，在空间上营造更好的印象。但还有一点，动画让用户界面鲜活起来。

通过组合与分割、改变形状和尺寸，运动可以使外表感觉鲜活。应当运用功能性的动画，流畅地在导航内容间引导用户，解释屏幕元素和排列的变化，并且强调元素层级。

成功的动效设计具有以下6个特征：

1. 响应

视觉反馈在UI设计中极度重要。因为它符合了用户确认应答的天然需要，所以它管用。在现实生活中，按钮、遥控和各种物体，会响应我们的操作，人们对事物的期待就是如此。

图片来源：Smart Design

界面应当快速响应用户输入，准确地说是要在用户触发的一刹那响应，展现出新界面和元素与触发它们的操作之间的关联。在整个应用中到处点击，并且总是能知道正在发生什么，这感觉就非常棒。

物体对于用户意图的恰当反馈。图片来源：Material Design

2. 关联性

把新产生的界面，与触发它们的元素或操作关联起来。关联性背后的逻辑，能帮助用户在界面布局中理解刚发生的变化，是什么导致了变化。

下图中，可以看到两个菜单过渡效果。第一个例子中，菜单出现位置远离触发它的接触点，破坏了与这种输入方式的关联。

错误做法。图片来源：Material Design

第二个例子中，菜单正是从触点产生。这就把这个元素与触点关联起来了。

正确做法。图片来源：Material Design

另一个例子，是操作按钮在特定情境下改变功能。“播放”和“暂停”按钮或许是开关按钮中最普遍的例子。播放变为暂停，表现出这两者是相关联的，点按其中一个，就会看到另一个。应该设计好状态间的过渡动画，让它看起来流畅不间断。

播放控件的流畅过渡，向用户展现按钮功能的同时，也为这个操作增加了一丝惊叹。图片来源：Material Design

3. 自然

*避免令人意外的过渡效果。*所有的运动都应该遵循真实世界中力的作用。现实中，一个物体加速减速的快慢，受它的重量和表面摩擦力影响。类似的，在好的界面设计中，启动和停止不会立刻发生。

下图中，可以看到一个很好的例子，用户选中列表中的一项，展开进入详情视图。展开的过程中，小卡片沿着一条弧线移动到目标位置，并且展开成一张更大的卡片。

正确做法。在屏幕上向上移动的物体，应该在移动时体现出加速的力。图片来源：Material Design

4. 有目的

在合适的时机，将视线引导到适当的位置。动画天生就是最高一级的突显。无论文字段落还是静止图片都无法与之相提并论。好的过渡效果引导用户到下一步操作。

用户第一次无法预料某个操作触发的结果，但适当的动画能帮助用户保持方向，不会感觉内容的突然改变。

Mac OS在最小化窗口时用了一种功能性动画。动画把前后两个状态联系起来。

Mac OS的最小化动画

另一个好例子是由父及子的过渡，用户选中一个列表项或卡片元素，放大进入详情视图。这个操作让用户了解来龙去脉。

由父及子的过渡动画。图片来源：Material Design

5. 快速

元素在不同位置和状态间运动时，运动要足够快，不要让人等待；也不可过快，让过渡能够理解。

不要缓慢的动画，因为它产生了不必要的停顿，延长了整个过程。

错误做法。图片来源：Material Design

交错和减缓多个元素的运动会延长整个过程。

错误做法：图片来源：Material Design

快速完成动画，用户就不必等待动画结束。

正确做法。图片来源：Material Design

保持过渡动画简短，因为用户会频繁看到它们。让动画持续时间保持在300ms或更短。

正确做法。图片来源：Material Design

6. 明确

过渡效果应当避免一次做太多事情，因为如果许多物体往不同方向或沿着不同路径运动，它们就会令人困惑。

错误做法。图片来源：Material Design

过渡效果应当明确、简洁、条理清晰。记住，关于动画，少即是多。我们应该只专注于动画能为用户带来的实际价值。

正确做法。图片来源：Material Design

结论

综上所述，动画不是随意为之。每个操作背后都有其目的。动画对它加以引导，显示出重要内容，以防忽略。无论你的应用是欢乐幽默还是严肃直接，动画的运用原则有助于提供明确、快速、有粘性的体验。

*谨慎地设计。*注意每一个细节，是成功打造易用人机交互的关键。

非常感谢！

原文链接：http://babich.biz/functional-animation-in-ux-design-what-makes-a-good-transition/

作者信息：Nick Babich

设计新趋势：化繁为简

hi@victor42.work (Victor42) — Sun, 17 Jul 2016 15:54:28 +0000

[国外设计第140期]

我们在这个“极简主义”的世界生活已经有些时日了，之后又将去向何方？

过去几个月来，设计创新领域的先行者们，将“极简设计”推向了一个新的高度。Facebook、Airbnb和Apple都遵循着近似的原则，简化它们的核心产品，这种“化繁为简”（Complexion Reduction）的新趋势就在它们的移动端设计中得到体现。

“化繁为简”究竟是什么？

你是不是从没听说过“化繁为简”的趋势？那是肯定的，因为这只是我创造出来的术语。最近我留意到一种新的趋势，它超越了扁平化设计，也超越了极简设计，独立性在逐渐削弱。有些人会说，这只是极简设计运用到移动端领域时开启的新阶段，但我认为它截然不同。有一些明确的共性和特征可以定义这种新趋势。所以我决定给它起个名字。起个名没什么问题吧？

这种横扫硅谷的热门新趋势，有以下这些决定性特征：

加大加粗的标题
更简单更普遍的图标
减少彩色的使用

结果呢？许多我们喜爱的应用界面，开始越来越像是出自同一品牌。

证据

早在5月份，Instagram发布了新设计的UI时，我第一次注意到这种新趋势。

他们此次改版的变化，其中包括去除了无处不在的蓝色和深灰色，加粗了标题，简化了底部导航栏和图标。只留下黑白界面和醒目的标题，突显内容，功能清晰。我很欣赏这套简洁有序的界面，并且同时想起我仰慕已久的另一个平台：Medium。Medium自从2012年发布以来，黑白界面就用得炉火纯青，从那以后每次设计改版，都在去除繁杂；实际上Medium正是化繁为简的开山鼻祖之一，他们自己都不知道这点。真是要恭喜Medium！

Facebook的同行们更新了Instagram的界面之后不久，我打开了Airbnb，它看起来如此熟悉，令我深受震撼。自从他们4月份发布了新设计以来，这是我第一次打开这个应用，但我感觉这一套界面分外熟悉。

Airbnb的UI改版产生的媒体影响力，并没有一个月后Instagram的改版那么大（可能因为它没有一个光彩夺目的新图标），但它也使用了许多相同的化繁为简技巧。

移动端的改版设计采用了更大更粗的标题，去除了不必要的图形和色彩，简化了图标，使它们更通用、易识别。只留下黑白界面，突显内容，功能清晰。

Apple是最近的一个例子，设计师们迷上了化繁为简的趋势。本月初，Apple的WWDC大会上，这个科技巨人发布了一系列值得期待的更新，包括iOS 10的发布，他们正在进行调试，“iOS有史以来最重大更新！”（不过由于iOS 8时也这么说，所以至少是iOS 8以来最重大的更新）

发布会中有一点特别吸引我。那就是Apple Music的改版设计。虽然它改版的最重要方面是用户体验提升和新增功能，但我首先注意到的是它的朴素。Caitlin McGarry，Macworld的本报记者就很准确地描述了这次更新，“它有一套全新外观，巨大的卡片、加大加粗的字体、干净的白背景，突显唱片艺术。”

听起来很熟悉吧？这套设计与Instagram和Airbnb的设计略微有所区别（他们用的是实心图标！Apple在搞什么？）但关键元素都在：加大加粗的标题，黑白界面。

所有这些意味着什么？

我在上文提过，这意味着越来越多你喜爱的应用会变得很相似。为什么？就像国家橄榄球联盟（NFL），科技界也是个相互模仿的圈子。这些改版设计都得到了积极正面的反馈（有些人抱怨这些黑白界面“缺乏个性”，但他们很快就适应了。你打开一个应用是为了它的功能，并不是个性），所以我预测，新老应用都会踏上化繁为简的浪潮。

这意味着iPhone的主屏很快就会变成一块彩色的马赛克，这些鲜艳的入口会引领你进入游乐场。

现在，无论你是否支持这种单色的时尚，它毫无疑问是一个发展方向。产品设计流程正在发展和进化，不再是从前那种分离式的方式，鼓励过多的设计。现在的流程更趋于整体，真正关注用户。在从前的产品设计流程中，UI设计师可能会接过UX或产品给出的原型图，要求“把它做漂亮点”。然后设计师就会画上数小时、数天来添加、去除、调整颜色，或许最好的方案可能就一直摆在他们面前……直接用原型图！由于在如今这个整体的设计流程中，UX和UI设计师的界限正变得模糊，设计师不必过分操心自己的具体职责（例如把它做漂亮点），转而关注最终目标，为用户打造最棒的产品。

化繁为简的终极指南

你是否已经接受了化繁为简的趋势，并准备好踏上这波浪潮了？很好，遵循这些指南，你马上就会创造出优秀的应用。

去除彩色。当然，你可以保留一种颜色，但要极度克制地使用它。其他一切最好是黑白的。让内容来为应用填充颜色。
加大、加粗、加黑的标题。看到标题了吗？把它加到20至30像素，并且加重。
简洁、纤细、易辨识的图标。你的图标最好是通用的，也不能使用彩色。如果想做得更好，应该按这个顺序来排列：主界面、搜索、主操作、次要操作、我。
留白区域变为原来的两倍……不对，要三倍。甚至可以到四倍。这一点绝不能出错。
应用图标更鲜艳。如果你就是喜欢设计一些鲜艳闪耀的东西，可以用在应用图标上。这是体现个性和品牌的地方，要让它光彩夺目！

原文链接：http://swarmnyc.com/whiteboard/complexion-reduction-a-new-trend-in-design-1

作者信息： Michael Horton UX/UI designer @ SWARM in NYC | www.themikehorton.com

表单中的勾选框和开关

hi@victor42.work (Victor42) — Sun, 10 Jul 2016 21:39:05 +0000

[国外设计第139期]

创建表单时，交互设计师总是会面临一个选择，选用哪种UI元素来表示可选项的操作。当然，我们每个人都有自己的法则。但是，在选用可选项控件时，仍然要多加考虑。

可选项可以用勾选框、开关、单选框和下拉菜单表示。选择得当的话，任何一种都非常出色。本文中，我们重点关注勾选框和开关。

勾选框

勾选框用在一系列选项中，用户可以选择任意数量，包括0个、1个，或者许多个。换言之，每个勾选框在列表中都是相互独立的，勾上一个框并不会取消其他选项。

带有标签的勾选框

开关

开关组件是在仿照物理开关，让用户打开或关闭某个项目。

开关提供了两种简单直接的对立选项

开关组件通常用于表现一个动作（例如开始或停止某个操作）。它类似于电灯开关：

开关通常用在电灯开关上

勾选框和开关的最佳实践

使用标准的视觉表现

勾选框应当是一个小方框，选中时有一个勾，或者一个叉。

选中和未选中的勾选框组件。图片来源：Material Design

开关应当看起来有开和关的状态

选中和未选中状态的开关组件。图片来源：Material Design

用户在操作各种控件时，应当提供清晰的视觉反馈。细微的动画能让体验更细致——在移动应用中尤其如此，

iOS7/8的开关按钮。来源：Dribbble

纵向排列列表

纵向展示列表，每行一个选项。这对于开关和勾选框都有效。如果一定要横向排列，一行有多个选项，就要调整好按钮和标签的距离，哪个选项对应哪个标签清晰明了。下面的例子中，元素之间的距离都太近了。

很难确定选项4对应的到底是哪个选框

开关的当前状态应该在控件外面

设计开关时，你应该避免状态和操作的歧义。我们以iOS6的开关设计为例，注意看写着ON的蓝色状态按钮。

并不能确定标签（例子中是“ON”）是指当前状态，还是按下的操作

你能判断按钮当前是开着的吗，或者拖动滑块、点击、点按时会开启？“ON”在这里是个状态（名词）还是动作（动词）？并不清楚。

不应该让用户感到困惑，区分出操作和状态非常重要。实际上，高亮显示当前状态，能够让它更加友好。

文字颜色表明了现在的状态（亮起的是ON）

勾选框使用肯定的文案

使用肯定、有效的文案作为勾选框的标签，用户就很清楚如果勾上选框会发生什么。避免“不要给我发邮件”这样的否定文案，这就意味着用户要勾上选框来阻止某些事发生。

勾选框永远都应该使用肯定的指令，不能用否定文案，例如“请勿……”

勾选框使用Label标签，增大操作区域

所有的勾选框都有标签，但并非都使用label标签。勾选框本质上很小，但是根据费茨定律，它们就很难点击或者点按。要增大操作区域，让用户在点击或点按标签与相关文字时就能选中选项，而不仅仅是那个小方框。

让用户通过点击方框或它的标签来选中选项

勾选框只用来改变设置，不能作为操作按钮

作为一个二元选择，勾选框和开关的主要区别，是勾选框是状态，而开关是操作。如果一个操作适合用物理开关表示，那么开关可能就是最适合的控件。

下面的例子很明显，在开关中，无线网络是开着的。但在勾选框里，用户还需要思考无线网络是否开启，是否需要勾选这个框来开启无线网络。

用开关来开启或关闭服务或硬件组成，例如WIFI

勾选框和开关的提交操作

勾选框的操作可以延后（例如作为表单的一部分），但开关的操作应当立即触发。

良好的用户体验，是立即改变开关对应的设置项，而不是点按了“保存”或返回上个界面之后才保存。我们在现实生活中对开关的期望就是如此（例如我们知道，按下开关灯立刻就亮了）。

iOS中的开启WIFI

当用户必须执行额外步骤才能让改变生效时，使用勾选框。

当用户必须点击“提交”或“下一步”按钮，修改才能生效时，选用勾选框

结论

设计界面时，交互元素的选择要保持一致、可预期。遵循设计标准，能让用户更好预测控件的功能、如何操作。相反，违背标准会让界面感觉很脆弱——好像会毫无预兆发生任何事情。

非常感谢！

原文链接：http://babich.biz/checkbox-and-toggle/

作者信息： Nick Babich

提升色盲用户的体验

hi@victor42.work (Victor42) — Sun, 03 Jul 2016 00:02:52 +0000

[国外设计第138期]

据Colour Blind Awareness的统计，总人口的4.5%是色盲。如果你的用户多数是男性，则这个比例还要上升到8%。人们常常忘了为色盲设计，因为多数设计师不是色盲。本文中，我们提出13条建议来改善色盲用户的体验——这些对视觉正常的用户同样有益。

色盲是什么？

有许多种类的色盲，但最终都能分成这几类：无法清晰辨认颜色、色彩混杂、无法区分特定颜色。

这些问题在特定环境中愈发严重，比如浏览网站。这包括低分辨率显示器、糟糕的光线、小移动端屏幕、远离大屏幕电视而坐。

仅仅依靠色彩建立可读性和可见性，会让网站难以使用，最终影响了阅读和销售。

尽管下面这些建议并不全面，它们确实涵盖了色盲用户浏览网站时遇到的主要问题。

1. 文字可读性

要确保文字容易阅读，它就应该遵循可读性规范，结合字色、背景色和字号：

“WCAG 2.0的AA级标准要求，普通字号的对比率要达到4.5:1，大字号的对比率要达到3:1（大字号是指14磅的加粗或加大文字，或者18磅及以上字号）” ——WebAim色彩对比检查器

下面列举了一些颜色和字号组合，有的达到标准，有的没有：

这表明了颜色和字号的组合形成了怎样的反差对比。(查看大图)

2. 背景图上的文字

背景图上的文字处理起来很微妙，因为图片局部或整张图都可能无法与文字形成足够的反差。

文字没有蒙层，直接覆盖在图片上。(图片来源：Jay Wennington) (View large version)

降低背景透明度能够增强反差，让文字更容易阅读。

文字覆盖在带有蒙层的图片上。(查看大图)

或者，你可以给文字选择一个可靠的颜色，或者加上投影，其他任何符合品牌规范的方法都行。

3. 颜色过滤器、选择器和色盘

下图展示了Amazon的颜色过滤器，可以看到普通人与红绿色盲（分不清红色与绿色）的视觉效果。如果没有描述文字，就不可能从这么多选项中作出区分。

不带标签的颜色过滤器，在红绿色盲看来是完全没法用的。(查看大图)

在用户鼠标悬停时，Amazon展示了描述文字，但移动端上没有这一操作。

在下图中，Gap在每个色彩旁边加上了文字标签，问题得以解决。

带有标签的色彩选择器，红绿色盲使用起来很轻松。(查看大图)

这刚好也对正常视觉的人有益。例如，黑色与藏蓝在屏幕上很难区分。文字标签能让人免于猜测。

4. 缺乏有效描述的照片

下图展示了SuperDry网站上售卖的一件T恤。它的描述是“树叶纹理”，这太模棱两可了，因为树叶可以有许多颜色（绿色、黄色、棕色等等）。

色盲难以了解这件SuperDry T恤是什么颜色。(查看大图)

Jaspe（其实应该是“jaspé”）是指随机的斑点或纹理，所以应该加上这样的特殊说明：“灰绿色树叶纹理”。

5. 链接的辨识度

链接应该容易被发现，不必依赖颜色。下图模拟了全色色盲（看不到颜色）浏览UK Government Digital Service (GDS)网站所见到的画面。许多链接都难以察觉。例如你有没有注意到“GDS team, User research”（标题下方）是链接？

GDS博客在全色色盲眼中的样子。(查看大图)

要发现一个链接，用户只能鼠标悬停，等待指针变成一个手形。在移动端，他们只能点按文字，希望它触发页面请求。

上面带有图标的链接更容易察觉。而那些没有图标的，加一条下划线是个好方法，GDS在文章正文部分正是这么做的：

带下划线的链接更容易被全色色盲察觉。(查看大图)

6. 色彩组合

在现实世界，你无法控制色彩的组合排列：红色的苹果可能掉进绿色的草丛里。但是，我们可以控制网页设计中使用的颜色。下面这些色彩组合应当尽量避免：

绿色/红色
绿色/棕色
蓝色/紫色
绿色/蓝色
浅绿色/黄色
蓝色/灰色
绿色/灰色
绿色/黑色

色盲眼中的色彩组合。(查看大图)

7. 表单的默认文字

没有标签，只用框内的默认文字提示，这是个问题，因为默认文字通常缺乏足够的对比度。Apple的注册表单就有这样的问题，请看下图：

Apple的注册表单使用了不带标签的文字提示。(查看大图)

不建议增强对比度，因为那样就难以区分默认提示和用户输入的文字。

最好还是使用标签——毕竟是最佳实践——对比要鲜明，下图中的Made.com正是这么做的：

Made.com使用了对比度强烈的标签。(查看大图)

8. 主按钮

通常情况下，只有主按钮使用颜色来表现，Argos在它的登录页面就是这么做的：

Argos的登录界面依靠颜色来强调主按钮。(查看大图)

其实应该考虑通过尺寸、位置、粗细、对比度、边框、图标和任何其他手段来辅助——只要在品牌指南的范畴内。例如，Kidly就运用了尺寸、颜色和图标来凸显：

Kidly用了尺寸、颜色和图标来强调主按钮。(查看大图)

9. 警告消息

成功和错误的消息通常各自选用绿色和红色。多数色盲没有全色色盲的烦恼，自然能够把不同的信息与不同颜色联系起来。但是，使用比如“成功”这样的前置文案，或者用我喜欢的图标形式，就能更快更轻松地阅读，就像下图这样：

带有前置文案和图标的警告消息。(查看大图)

10. 表单必填项

Denoting这种用颜色表示的必填项有问题，因为有些人可能看不出区别。

Denoting的必填项用颜色表示。(查看大图)

其实应该考虑这些方法：

给必填项加上星号
更好的方法，给必填项加上“必填”
如果可能的话，把所有选填项都去掉

11. 图表

颜色经常用来区分图表中不同的指标。下图显示了不同视觉能力的人看到的样子。右边的图表对色盲做了优化。

正常视觉者眼中的图表(查看大图)

红绿色盲眼中的图表(查看大图)

全色色盲眼中的图表(查看大图)

使用纹理，并且尽可能加上每个指标的文字，能让图表更易理解。如果文字不合适——通常是小尺寸饼状图的情况——用一个字母就足够了。

12. 缩放

浏览器有一项易用功能，让人根据需要尽可能放大页面。这点能提升易读性，在移动设备上尤其有帮助。

不幸的是，Viewport Meta标签可以禁用缩放，这也是个问题。比如，对于色彩对比度而言，字号可能过小了——放大则能有效增大字号，让文字更易阅读。所以不要禁用网站的缩放。

13. 相对字号

和前一点类似，浏览器提供了放大字号的功能（并不是放大整个页面），也是为了提升可读性。但是，如果字号被指定为绝对单位时，例如像素，有些浏览器会禁用这个功能。应该使用相对字号单位，例如em，确保所有浏览器都能提供这个功能。

工具

有许多工具能帮助你为色盲群体设计：

Check My Colours：如果你有现成的网站，可以输入URL获得反馈，告诉你哪里需要改善。
WebAim的色彩对比度检查器：提供两种颜色，看它们是否符合易用性规范。
I Want To See Like The ColorBlind：在Chrome中对网页应用色盲模式滤镜。
Color Oracle：Windows、Mac和Linux平台的一款色盲模拟器，展示常见的视觉障碍人士看到的画面。

结论

本文中的建议并不全面，它们并非要应用到每个场合中。但是，它们确实涵盖了色盲用户浏览网站时遇到的主要问题。

更重要的是要消化这些原则，这样才能将它们融入到你的设计中。最终，网页并不是仅仅为了好看——而是要易于每个人使用，包括色盲人士。

原文链接：https://www.smashingmagazine.com/2016/06/improving-ux-for-color-blind-users/

作者信息： Adam Silver Adam Silver helps people and companies make the web simple and human. He specialises in UX, Front-end engineering and Strategy. Oh, and he’s also the author of MaintainableCSS which is about writing modular, scalable and maintainable CSS.

风格指南里该有什么，如何执行？

hi@victor42.work (Victor42) — Sun, 26 Jun 2016 11:24:43 +0000

[国外设计第137期]

每个网站都需要一套风格指南。原因很简单，如果想要在整个项目中贯彻一致性，让所有人达成共识，风格指南的价值是无可估量的。

既然如此，我们先把它放在一旁，指南中究竟应该包含哪些东西？如何确保团队成员遵守规则，让视觉表现保持一致？那就更复杂了。这就是我们今天的话题。

品牌综述

如果你从没创建过风格指南，那可能令人望而生畏。新手可以先找一套自己喜欢的指南来学习——MailChimp是最优秀的风格指南之一，它还开放给了整个设计行业——可以将它作为着手开始的示例。

多数风格指南包含两部分：

版权指南
视觉指南

风格指南的每块都同样重要，它们是整个指南的一部分。融合所有元素来构建完整的品牌特征。每个品牌、公司和网站都有所不同。要选择一套在文案和视觉方面适合的语言风格和样式，但这也和整个用户群有关。

建立品牌特征时要兼顾用户和股东，这是他们想要和期望的品牌吗？他们能把它与品牌联系起来吗？他们会想与之互动吗？

语言和语调

我们最关注风格指南的视觉方面，但语言和语调非常重要。品牌特征有一部分是你如何与用户“交谈”。交谈方式是正式的还是随意的？是详细的还是简洁的？

要用与网站类似的语言风格来撰写风格指南。这有助于让团队理解期望的效果，并且展现出语言风格对品牌特征有何贡献。

应该从你做起，把语言和语调用在每一处沟通中。回顾MailChimp的大纲，总体了解品牌语调。留意这家公司如何谈论它的吉祥物，比如：“Freddie是我们的吉祥物。我们不会把它和logo结合使用。Freddie永远都面向右边，并且总是挤眉弄眼。”

“规则”和运用

风格指南应该是你的设计“剧本”。（这是不是比“规则”听起来更友好？）

它应当以一种易于理解的方式，描述如何、何时使用字体、颜色和其他所有类型的设计元素。下面是它所包含的清单项：

配色方案，包含色值和可接受的深浅变化
字体方案，包括所有字重、字号、行距和用法
Logo，包括尺寸和位置的规范
图标或元素样式（这包含了从按钮到社交媒体分享图标等各种元素的处理）
拼写，文字选择和文案风格（应当遵循怎样的文字规范？APA、AP、还是其他？）
照片指南，包括色彩、剪裁和视觉表现
SEO信息，包括备选文字和关键词
栅格系统（用于网页和印刷）
留白的考虑（设计应该宽松还是紧凑）
联系（一个让团队成员能够提问和查看说明的地方）

简单明确的概念

最难的部分来了。你得综合上面所有信息，浓缩成简单、明确、可执行的概念。

设计风格指南时，对于内容不要过度设计。这是一份视觉参考；要以视觉参考的方式来设计。
相关项目分到同一页，以供快速查阅：一页讲色彩，另一页讲字体，一页讲照片，等等。
提供外观的案例。如果可以用图解释问题，就不要用文字。
提供有用的细节标注。比如配色方案，应该使用RGB（或HEX）和CMYK模式，以使颜色在各处的运用保持一致。
从设计中拆分出各部分，展示各种元素的使用。

片段与示例

无论你的风格指南是印刷的、数字的，还是网页文档，都应当配上使用方式。其中有个要素极其有用，品牌的示例和反例。它能轻易强调你所希望的品牌视觉效果。

然后，整理一套方便查找的目录。为所有团队成员建立样式库（或一系列通用元素，这取决于你用的软件）。把文件存在一个大家能够访问的公共位置，这样就能相对容易地修改。

为项目中的每个人提供一系列的云端软件（包括链接、用户名和其他基本信息）。确保所有字体包、logo和图片文件放在常用位置，并且每个人都知道它们在哪。（在别处留一份备份，以防有人在原件上修改和保存。）

编写一套标准代码片段，能轻松复制粘贴到项目中。不必每次都重新创造。通用元素应该存放在一个共享位置，每个人都能打开。

这部分最后一点，就是要记得更新。一切都在变化——它们也是。Smashing Magazine有一篇精彩的案例研究，描绘了一套“活的风格指南”。

执行风格指南

最后，最大的问题是：“如何让人们遵循这套规则？”如果你按照上面的方式设计这套指南，就已经很好解决这个问题了，尤其是简单明确的概念。

指南要容易学习和使用（就像你的网站）。语言要简练，不要事无巨细交代，这样大家就愿意遵守规范。

它应当是一本指南书，为具体设计留下了充足的空间和灵活性。设计一系列约束能够帮助团队成员释放他们的创造力，同时创造出符合你品牌的作品。风格指南也要有个主人。这个人要负责审批更新和改变，要能回答设计决策上的问题。这个“主人”可以是一个人，也可以是一个团队，取决于你公司的大小。

结论

你是否已经拥有一套风格指南了？或者需要新建立一套？这是一项每年都应该进行的工程，这样能让指南时刻保持最新。（如果你的旧规范还在，就不能怪团队成员）

你有没有设计或见过优秀的风格指南？我对这些非常感兴趣，很想看一看。你可以在Twitter上联系我，或者给我发邮件。

原文链接：https://designshack.net/articles/business-articles/what-needs-to-be-in-your-style-guide-and-how-do-you-enforce-it/

作者信息： CARRIE COUSINS Carrie is the chief writer at Design Shack, with years of experience in web and graphic design. Sports fanatic. Information junkie. Designer. True-believer in karma.

从业余项目中学习

hi@victor42.work (Victor42) — Sun, 19 Jun 2016 00:08:37 +0000

[国外设计第136期]

某些情况下，我们总是心怀一丝产品梦——总有个项目能让我们迫不及待为之日夜奋斗。在业余项目中，你得依靠自己的经验，独立作出抉择。对于创意你能够全权掌控，并且当你的想法脱离草图逐步落地时，也会沿途获得许多技能。

离开日常的轨迹，业余项目能刺激你、让你兴奋。于我而言，兴奋来自实验和回馈整个行业。但是，从一个好想法到将它推向合适的受众，业余项目包含了大量艰辛的工作。本文涵盖了我业余时间构建UX Recipe、发布它的iOS应用所得到的收获。

UX Recipe是一个清单，让你发现、选择和评估所需的手段和技巧。UX Recipe有3种使用方法：

为自己的产品或用户体验项目创建流程。
估计每个过程的时间与金钱成本，并计算总数。
发现一系列推荐方法。

每一项都有定义，并且列举了一系列有用的链接。如此一来，团队和客户从一开始就知道需要什么、如何使用、成本多少。

网页版UX Recipe

我独自启动这个项目，是因为我觉得“UX”还大有发展空间。它不是UI——也不是简历上的装逼词汇。甚至，UX也不是使用户趋之若鹜的魔法调味料。

“UX并不是使用户趋之若鹜的魔法调味料。”

1. 规划路线

从第一版原型开始，我就知道我要启动的是个什么项目，我一直徘徊于计划中，直到真正付诸实施。这样，我不会让自己拖延截止日期、增加功能、或者尝试每一种可能。做到这么严格并不容易，但它很有帮助。把业余项目当做客户任务对待，能帮你避免明日复明日。在没有固定规则时，很容易就推迟最终期限。

有时我的确逼着自己前进：我保持着紧密的日程安排，尽快把作品发布上线。我还把项目分享给几个熟人，来为自己增加压力。失败有教育意义，但如果让别人看到就会有刺激作用。

为每一个将要发布的版本规划路线。当然，随着版本迭代，你的项目可能需要转变。一轮无干扰的设计冲刺能够创造奇迹。

“把业余项目当做客户任务对待。”

2. 要的是结果，不只是产出物

UX Recipe最棒的一点就是它的内容。UX Recipe的口号让用户产生共鸣，这得益于它随意诙谐的语调。各种资源和项目评估功能，再为之增添色彩，它不仅仅是一个计算器。

分析反馈、回顾记录之后，我注意到一些现象：人们再次回来是因为它的价值，而不是那些数字。他们要么是借助同样的语调进行推广，要么把它作为一种发现工具。这些信息的收集和分类，是它成功的原因。

要强调你的价值主张，而不仅仅是一系列功能。用户可能会因为你所代表的立场再次回来，并且长期融入你的项目，这就是最大的胜利。

UX Recipe的资源、彩蛋和模板。

3. 原型，再三强调

进行业余项目时，时间极其重要。很显然如果我想尽快测试，就要发布上线。最终内容完成后，我转而使用HTML/CSS/JS制作原型。我全部都用Github pages发布，修复明显的bug，并且征询反馈。

无论你是用HTML、InVision、还是白纸，都应该画出原型。你可以试验、快速记录想法、尽早发现错误、并且更好交流。比如，从我刚开始在Github上分享项目。它一直是在线的，我可以发布小更新和测试功能。

“画出原型能够让你尽早发现错误。”

4. 这不是独自一人的工作

到某阶段你会发现自己需要援助。我想要一个iOS应用，但我不会用Xcode。我想要推广这个项目，但我不知道所有这些市场推广手段、诀窍和技巧。

那如果我想要一个Android应用。我要自己开发吗？不。请求帮助？是的。

我很幸运。这个项目吸引了渴望贡献力量的热心人。他们对于这个项目表露出了自然的兴趣。而且，我在Github上提供了代码，事情进展更顺利了。开发者们，无论陌生人还是朋友，都帮助优化了我的代码。

“请求帮助没有任何坏处。”

一个同事开始尝试开发iOS版，他只是为了练习他的Xcode技巧。一个朋友在市场推广和分析方面提供帮助。还有一个朋友的朋友，碰巧是Android开发，开始构建Android版本。

即使是我所工作的公司，Grapefruit也支持我。承认自己不知所措一点也不可耻，请求帮助没有任何坏处。

或许你是个优秀的设计师或开发者，但你并不是独角兽。那是不存在的。

5. 学会推广

推广不只是购买广告。有一件事我从一开始就错了：依赖广告推广。它们有用，但触及不到适合的用户。

纠正方向后，我开始学习Google Analytics的更多高级功能。我更深入了解我的用户——他们从哪来，对什么感兴趣。我在社交媒体上计划发布文章，追踪转化。我学到了如果想更容易登上DesignerNews，你就得在美国西部标准时间上午9点发布。

推广给正确的用户群。

6. 耐心是种美德

关于最终结果我浮想联翩——我总在午后想象这个产品会是什么样，如何发展。然后我才意识到，我甚至都没有发布推特介绍这个项目，也没有收集反馈。

每次我发推特介绍它……结果什么也没发生。没有访客，没有转发，什么也没有。不要纯粹为了病毒式传播制作某个东西。

我知道，一个项目的成功非常微妙且极度依赖时机，但并非不可能。我刚开始发布了少量推特、点赞，在许多群组里交流。起初没有什么活跃度和回应，但我坚持做着。

偶尔会有增长的动因。这个项目被Product Hunt、Sidebar收录了，还被Smashing Magazine分享了。从那时起，其他网站也开始推广它。

7. 聆听、权衡和响应

发布项目并不是终点——它只是把你置于未知面前。

我使用Trello来保存所有反馈和创意灵感，把它们归成几类：至关重要、要做的、最好有、不需要。

我还混合使用各种工具来追踪用户行为和模式。我用了Google Analytics、Hotjar和Fabric。用户开始报告bug和错误了，所以我得扮演服务支持的角色。当你发布了一个项目——如果全凭自己的话——你会发现自己原来还会这么多技能。

基于数据的评估与改进。

8. 留心竞争者

有句话说，你不是一个人——所以你得了解竞争对手。我常常关注其他清单类的工具如何进化。我对于别人的类似尝试或新功能时刻保持好奇。

“强调你的价值主张。”

9. 卡住时，不要停滞不前

UX Recipe的网页版原型发布、访问量增长之后，一切归于寂静，很长一段时间什么也没发生。更新越来越少，我觉得很安逸。几个月以来，我都仅仅依靠推荐来获取访客。

直到我开始规划iOS应用时，事情才继续开始发展。随着iOS应用的发布，就经常会提交更新。只要有动力和活跃度，大大小小的更新就源源不断。iOS应用的发布也激发我启动Android版。我再次预先规划、制定路线，向自己保证不要再无疾而终。

10. 业余时间很特殊

只要你没有放弃正式工作，业余项目永远都是业余项目。你并不会全职投入——这让我花了一阵子才适应。

我是怎么应对的？

预先规划周末日程
安排工作日的夜晚
组织黑客马拉松完成复杂的功能

通过这种方式，我迫使自己形成定期的工作节奏，依据频率和复杂度来安排更新。例如，我周一至周五更新内容。周末我只处理新功能。只要UX Recipe仍是业余项目，我就得如此妥协。

保持交流

你是否也在经营业余项目？有没有什么诀窍可以分享？欢迎与我沟通！可以在Tweet中联系@invisionapp和@alecsandru。

原文链接：http://blog.invisionapp.com/design-side-projects/

作者信息： Alecsandru Grigoriu, Lead UX Designer at Grapefruit Alecsandru is Lead UX Designer at Grapefruit, a user experience agency from Romania. He teaches HCI laboratory classes as an assistant at the Faculty of Computer Science. In his free time he tinkers at his project, UX Recipe, and listens to The Killers all day long. Follow me on Twitter

移动端用户体验：获取用户权限的正确方式

hi@victor42.work (Victor42) — Sun, 05 Jun 2016 00:26:06 +0000

[国外设计第135期]

你知道吗？平均每个应用在安装3天内就会流失80%的活跃用户。多数人下载一个应用，打开一次，然后就卸载了。这是因为用户尝试许多应用，在接下来几天内决定要卸载其中哪些。

是应用品质低劣导致用户这样的行为吗？不尽然，但一款应用的首次交互，在树立整体印象方面扮演重要角色（无论印象好与坏）。用户打开一款新应用时，最不想看到的，就是一大串弹框请求获取权限。

应用想要获取您的位置
应用想要获取您的联系人
应用想要获取您的相机权限

这种操作在用户体验上会造成极其负面的影响，往往导致应用被抛弃。应用要在索要权限之前与用户沟通，这样才能使用户保持投入。本文可以帮助你避开索取权限时的常见陷阱，让你步入正轨。

建立一套策略

说到请求权限，最糟糕的就是在没有任何通知与解释的情况下，用权限请求对用户狂轰滥炸。过早或者一次获取太多权限是常见的错误。然而，许多应用仍然如此——成为了用户打开应用首先看到的东西。例如，Gmail的Inbox甚至在引导页之前就开始索取权限，没有任何信息和上下文说明。

图片来源：Gmail的Inbox

发送权限请求时，你当然希望所有用户都接受。要达成这个目的，就应当建立一套权限策略。权限策略取决于你所请求的权限类型的明确与重要程度。非常重要的权限应当预先请求，次要权限可以在情景中再请求。

权限请求模式。图片来源：Material Design

何时向用户索要

确定用户是否接受请求的最关键因素，是它们何时需要用到。

简单的原则：除非需要，否则不要请求获取权限。

只有重要权限需要预先获取

对许多应用而言，获取不到数据权限会改变整个用户体验。例如，如果应用需要依赖短信服务，拒绝这项权限就导致这款应用无法使用。所幸，用户会希望消息类应用获取短信权限，所以把它前置是有意义的。

图片来源：Google环聊

如果某个功能的运转需要获取多个权限，只请求相应权限，不要过头。

**总结：**确保用户清晰理解应用是做什么的（基于应用的描述或之前的熟悉经历），只预先请求用户希望应用获取的权限。

在情境中请求权限

通常情况下，如果新用户一上来就体验到一连串权限请求，你就错失了一个吸引用户的重要机会。应用要在情景中请求权限，并且告知用户这项权限能提供什么。因为只要用户被吸引，他们就更容易接受请求。

图片来源：thinkwithgoogle

**总结：**在进行相关任务时请求获取权限，用户更容易接受。

如何索要权限

应用应该清晰阐明为何需要每项权限，要提供功能的名称或详细解释。记住，如果想要用户同意，就要礼貌地请求。

简单的原则：清晰无疑说明用户将会获得什么，以此换取他们的允许。

解释权限的益处

对于不太明确的权限，需要教导用户这项权限包含什么。如果你的应用有引导页，可以用它来解释应用的功能，还有为何会出现意料之外的权限请求。

图片来源：Material Design

在情境中对权限做出解释，也是个很好的例子——它有助于增长用户兴趣，加深用户对于此权限的理解。向用户解释允许这项权限会带来的好处。

图片来源：Google地图

请求之前的教程

可以在请求之前提供一张背景图，对权限请求做出解释。Foursquare就用了一张背景图来解释为何应用需要这项特殊权限。

图片来源：Foursquare

在真正的请求之前“预先”请求

iOS的默认请求，每个功能只能触发一次。最坏的情况就是用户拒绝了系统权限，因为在iOS中要找回那个权限非常复杂。多数情况下，最好是“预先”请求用户允许，然后在放出真实的iOS权限获取提示。

Cluster就是个预先请求的例子。Cluster的流程中包含了一个情景创建界面、一个预先请求、然后才是最终的权限请求。使用预先请求对话框，几乎彻底解决了Cluster的“不允许”问题。

“预先请求”是一种预先的教育型权限对话框。图片来源：Cluster

在操作情景中请求权限

用户触发的对话框甚至比情景创建界面更有效，因为用户盼着请求出现，更愿意允许权限获取，他们想要使用这个功能。等到需要某个功能时再请求权限。例如当用户点按Cluster中的相机时，才会触发相机的权限。

在用户尝试使用这项功能时，才提醒用户允许权限。图片来源：Cluster

如何处理被拒绝的权限

由于拒绝权限可能会导致某个功能无法按照预期使用，当权限被拒绝时，应当向用户做出解释。

简单的原则：当权限被拒绝时应当提供反馈。

关键权限

如果由于关键权限被拒绝，导致应用无法运行，要解释这项权限为何需要，提供一个链接打开设置界面，然用户开启它。

下面的例子是Google环聊界面，解释了应用正常运转所需的权限。

图片来源：Google环聊

结论

显然，每个应用各不相同，但你应该思考用户何时需要获取手机各部分的数据，并且确保他们希望得到征询。用户体验的改善是不间断的。不要错失用户允许权限的良机！测试每种情况，验证哪种最适合你。

非常感谢！

原文链接：http://babich.biz/mobile-ux-design-the-right-ways-to-ask-users-for-permissions/

作者信息： Nick Babich

超越触控的手势交互

hi@victor42.work (Victor42) — Sun, 29 May 2016 16:41:10 +0000

[国外设计第134期]

未来的交互是多重方式的。但结合触控和隔空手势（还可能有语音输入）的方式，并非典型的UI设计任务。

在Exipple，我们的设计师与工程师协作打造各种环境中的界面，能够响应手势交互和用户移动等物理属性。我们从迭代式的设计、研发和评估过程中受益良多，我愿意在此分享我们在手势交互中的领悟与心得。

FC Barcelona博物馆中一堵交互式视频墙的照片。

设计易于发现的手势

手势通常被认为是与屏幕和物体交互的自然方式，我们会谈论在移动设备屏幕上双指缩放地图，还有在电视前挥手切换到下一部电影。但这些手势真的那么自然吗？

对于从没体验过某种交互方式的用户而言，手势是陌生的领域。虽然我们都本能地了解在触屏上查看地图细节该如何操作，但是想一想，如果在远处观看一块大屏幕呢？如果有人告诉你，你不用触碰屏幕，可以通过手部运动，以一种很自然直观的方式放大地图，你会首先尝试什么手势？遇到这种问题时，我们每个人对自然的手势都有各自的定义。

“未来的交互是多重方式的”

设计要易于发现，这点非常重要。要确保提供正确的设计符号线索，帮助用户轻松发现手势操作方式。这些可以是视觉提示，表明什么样的手势触发什么样的动作。反复使用后，这些探索性的提示就不必保留了，因为用户已经学会了这种手势。

还可以设计动画，渐进式地揭示某种不同的交互方式。例如，要确保用户了解到他们可以不必触碰屏幕，在远处就能操作，为此我们创造了一个菜单，当手指向屏幕时它就能显示更多信息。起初图片以一种随意的方式悬浮排列（A图）。靠近伸手指向这些图片，能显示出每张图片其实是一个分类，包含更多内容（B图）。

[](https://cdn.victor42.work/posts/2016-05/05-29/gest-7.jpg “Beyond touch: designing effective gestural interactions”)

为什么不能直接把触控操作搬过来

去年我们做了一个小小的非正式研究。我们邀请了一些人到工作室来，向他们展示了一些熟悉的电视界面：菜单和图标、地图、网格、轮播图。让他们想象应该如何在远处通过隔空手势操作这些界面。

这些界面实际上是一系列微型的手势交互原型。我们收集他们的期望，让他们探索一番并给我们反馈。其中显示出一种清晰的模式，他们的期望基本都来源于移动设备上熟悉的手势。所有的参与者，都将手机上的心理模型应用到隔空手势上。有时候，通过对界面操作的期望，我们甚至能从中区分出iOS和Android用户。

“最直观的未必最有效易用。”

但我们很快就遭遇了挑战：最直观的未必最有效易用。例如，鼠标是一种高精度设备，提供一种精确控制。人的肢体在三维空间中隔空移动就没这么精确。我们觉得自己的手在X轴上移动，但实际上我们在另外两个维度上也在微微运动。

我们无法指望达到相同的精确度。专注于精确细致的移动，会不可避免地导致某种紧张——而且“伸直手”肯定不是自然的交互方式。

触碰屏幕时，触点就是起点——一个参照点。想象一下，典型的双指缩放和双手隔空构成类似的操作，两者有什么区别。缩放等级的参考点变得模糊不定。你也不能松开屏幕来停止操作，所以起始点和结束点都变得模棱两可。

应该避免的例子：等同于双指缩放的隔空手势。

不要尝试把触控手势直接变成隔空手势，尽管它们更熟悉和容易。手势交互需要一种全新的方式——一种起初陌生，但最终能够让用户极尽掌控、并使用户体验设计走得更远的方式。

去掉“乱跳”的指针

如果你在项目中运用计算机视觉技术（例如通过Kinect、Asus、Orbecc等带有深度传感器的相机捕捉动作），你就知道，无法100%实现手和手指的位置追踪。

其他的技术或许能提供更高的精确度，但它们通常需要用户穿戴特殊的设备。随着我们手部运动，计算机并不能持续“看见”我们的手，结果就导致了我们所谓的手抖：看起来像屏幕上的指针或箭头“紧张”颤抖。

“去掉指针这种反馈形式，提供一种替代方案。”

设计另一种指针或箭头起不到多大作用，因为它仍然需要在屏幕上追踪手部运动。你可以要求开发者过滤这些微妙的手部运动来避免这种效果。但是，这种解决方案要付出很高的代价，丧失了某些响应和精确度，并且会导致指针与手有轻微的延迟，降低用户对于界面的操控感。丧失用户的操控感，我们承担不起。

那应该怎么办？

去掉指针。触摸屏上也不需要指针。去掉指针这种反馈形式，提供一种替代方案。让图片和物体“弹出来”，立即响应用户的手部运动，不需要任何指针。

这会从根本上改变你思考用户界面的方式。这不是网页，也不是移动端触摸屏体验。

[](https://cdn.victor42.work/posts/2016-05/05-29/gest-3.jpg “Beyond touch: designing effective gestural interactions”)

敞开思路

要尝试解放思想，从你熟悉的标准网页和移动UI模式中解脱出来。忘了按钮——思考动作。想象一下，不再有屏幕了，你要用手势来控制周围环境中的设备。你要如何让电视机降低音量？如何点亮电灯？

象征性和形象的手势，例如用食指做出“嘘”的手势降低电视音量，这就简单直接、富于表达力。这或许有些依赖特定场景，也需要用户学习，但一旦用户学会了，他们就很容易记住和使用。

我们创造了一些成功的手势来控制媒体播放：

[](https://cdn.victor42.work/posts/2016-05/05-29/gest-2.jpg “Beyond touch: designing effective gestural interactions”)

要在手势和它所触发的动作之间建立联系。这些可以基于容易记忆的含义或者视觉参考。这并不容易——因为你需要考虑例如文化环境这样的方面。比如说，在某个国家或文化中被普遍接受的一种手势表达，在另一个国家中或许有冒犯的意味。在某些环境中非常突出的象征，在其他场合或许就没有帮助。

依靠形象化的手势创造所有类型的交互，可能会导致太多的手势要记忆。要将它们当做快捷、有力的快速触发方式——值得分配给那些需要用户频繁重复的操作。

减少错误识别

对于计算机而言最大的挑战，就是区分真正的意图，和那些人们自然做出的偶然手势，例如与人交谈时手部四处移动。

很容易会意外触发动作，让界面在不该变化时发生改变，导致不稳定的体验。作为UI设计师，你得与开发者密切配合，找出哪些有意义、哪些没有，就能避免哪些错误的识别。

好的起点是：手势设计总是要与特定场景和需要遇到的状况联系起来。是否正在播放音乐？那么手势就可以触发。如果没有，那就什么也不做。

“忘了按钮——思考动作。”

要区分手势和意外手部运动，时间是个重要的因素。例如，如果我指着某个物体超过1秒，就意味着我的确想要操作它。

距离也是另一个因素。如果你在为博物馆或参观中心设计一套互动装置，你可能想让它识别足够靠近的参与者的手势，相对忽略那些站在远处的旁观者。

避免疲劳

就像字面意思，感受手势造成的影响并不容易。你得一遍遍观察用户，理解你所创造的体验给人带来的真实感受。

简单几点需要记住：

除非你在设计物理游戏或锻炼项目，否则要确保人们不必太频繁或太长时间举起手臂、抬起双手。
要确保手部轨迹和UI元素间距离的比例足够舒适，尤其对于大屏幕。这意味着用户可以毫不费力指向屏幕的任何部分。 一个例子，小范围动作对应屏幕上更大范围的区域，让触达更加轻松。
使用双手比单手交互更不容易感到疲劳。可以把某只手作为惯用手，用来触发操作（比如显示出滑块）。然后用另一只手来辅助（调整滑块的数值）。要考虑到你不必用单手来完成所有操作，可以探索更多的组合。 相关阅读：UX设计师应当探索手势交互的6大理由

保持一致，左右手都要触发相同动作

最后，用户通过右手触发的任何操作，也应当能够用左手触发。这不仅是为了方便右撇子和左撇子，这种一致性也帮助人们学习和接受。所以如果你学会了某个手势，你可以用任意一只手触发——不必记住要用哪只手。

一致性要贯穿你整个概念，就像其他所有UX项目一样。成功创造了手势+动作的组合后，可以考虑是否需要在其他用户场景下启用类似动作。一旦熟悉了，用户会期望使用相同的手势。

要创造易于发现和记忆的统一的手势语言。

有了这些手势交互的规范，你就可以开始探索这块相对未知的创意领域了。一旦理解了这些区别，就能结合隔空手势和触控手势，创造独特流畅的用户交互。

原文链接：http://blog.invisionapp.com/effective-gestural-interaction-design/

作者信息： Yanna Vogiazou Yanna is UX Director at Exipple, a Barcelona-based startup. She’s working with her team on new concepts and user interfaces based on gestural interaction. She brings over 8 years of experience in designing for mobile, tablet, web, TV, automotive, and domestic appliances. Outside work, Yanna can be found searching for orangutans in the jungle or exploring the underwater world.

老大要回家

hi@victor42.work (Victor42) — Thu, 19 May 2016 16:42:02 +0000

关于交互设计的一个真实故事，让我对专车软件有了一点新想法。这要从老大讲起：

老大

老大是我大学时的寝室长，言谈举止霸气，思维迥异，常常一语惊人，所以有了这个外号。老大是一名嵌入式开发工程师，极其热爱这个行业，几乎达到狂热的程度，对硬件也非常有研究。

下午4点左右，他用滴滴出行叫车来我这，找我吃饭。老大的住处在6km外，我们许久未见，聊了很多话题。

从大学同学的婚礼说起，话题开始偏向他的专业领域。他和我讲了许多算法、开发思想的问题，也聊电机的各种控制方法，还谈了新能源汽车的电池管理系统。没错，和他聊天就是这样，他知道我不懂这些，但是他聊起来就是这么毫无顾忌，并不在意听者是否理解。我虽然只能听明白一些皮毛，但也很耐心在听。他对电子的热爱极具感染力，听他讲这些天书，一点也不痛苦。这很像我大学的高数老师，讲到一半会沉吟片刻，然后由衷感慨：“这个方程的证明过程是不是很漂亮！”我当时对这门课再如何深恶痛绝，也对这位教授是敬仰万分。

我们大学专业是电子信息，全班同学能听懂专业课的可能不到1/10，我和老大都在分母里。大四那年，老大像是忽然开了窍，开始对本专业产生浓厚兴趣，恶补之前的课程，研究教材之外的知识。据他后来说，是因为那时候他终于见识到了这些专业知识在实际项目中的运用，原来学了真的有用！老大的热情就从那一刻开启了。加上他的钻研精神，我相信他如今一定是个行业大牛。

但提到互联网产品，他既不熟悉，也没有兴趣。老大的手机还是iPhone 4，装的应用很少，一屏能放完。没有建文件夹的习惯，也没想过要整理图标，dock上仍然是iOS默认的4个应用。可见，即使如老大这样富有钻研精神的人，面对不感兴趣的领域，也一样不会花半点心思。

聊天期间我问他来我这叫的是专车还是拼车（这里我的表达不够精确，因为我平时Uber也用，所以我说专车，其实是指滴滴里的快车），他不是很确定，说应该是专车，反正没有其他乘客。我问过来多少钱，他说14块。

饭后，大概晚上9点了。他再用滴滴叫车回去，我观察他的操作，有一些很有趣的发现：

叫车

他起初在出租车一栏里叫车，犹豫片刻，又点了顺风车。想到我在旁边，就试探性的问我：“应该是选顺风车吧？”

我说选快车吧。因为我认为他是快车过来的嘛，觉得应该给他一个相对熟悉的选项。

老大选了快车，输入目的地。我注意到他并没有设置“家”和“公司”，所以他必须手动输入地址。其实一开始他点错了，选的是上车地点，但他并没有意识到。

在他打算输入自己家地址时，我提醒了一下，并且指了指输入框里的文字提示：“您在哪儿上车”。

他退出去，点了目的地，但是他忽然意识到自己并不记得确切地址。于是他又退出去，点了左上角菜单，进入了行程界面。努力尝试各种方式，想把来时的上车地址复制下来，但是失败了。

然后老大回到叫车界面，手动输入了自己家地址。列表显示了几个搜索结果，有的是店铺，有的是公交站。他就这么等着，我没有说话，观察他下一步操作。

但我发现他视线已经离开手机了，手也放低了一些，老大觉得这样就呼叫成功了。

我只好再告诉他，要从那几个地址里选一个，才能确定你的目的地。

老大选了一个公交站，点了呼叫，终于成功叫到了车。

但是，我发现他快车回去不拼车也只要5块钱。所以我估计，他来时叫的极有可能不是快车。

问题

送走老大之后，我把这个过程记录下来。仔细思考和揣摩他内心的想法，得到一些意外收获。

在整个叫车的过程中，老大只有一个最高目标：回家。在老大的观念里，不确定手机应用会作何反应的情况下，他会默认假设应用像真人一样理解他的想法。既然你之前来家里接了我，那你就知道我家在哪了，回去时我要去的就是来时那个的地址。老大费劲去试图复制来时的地址，恰恰可以表明他对此目标的理解：返程——从哪里来，回哪里去。

但是很显然，实际情况并不完美。即使是真人，也未必能准确理解另一个人的想法。

实际结果和想象产生了差异，于是引发了问题。这个问题并不是他不记得自家地址，根源在于老大觉得滴滴应该知道他家在哪，但它其实不知道。按理说，常用地址里的“家”和“公司”就是为解决此问题而生的。然而据我对身边朋友的观察，会主动设置常用地址的人寥寥可数，甚至一些IT人士的这两栏也是空的。

想到这里，我觉得有点混乱。难道这不是两个不同的问题吗？

滴滴不能聪明地知道或猜出我家在哪。
滴滴没有提供一种方便的返程叫车方式。

在老大的例子中，回家和返程重叠了。但它并不总是一回事，那就来分别考虑：

回家

从心理模型上说，回家的过程其实是两种状态的切换，一个是“在家”，一个是“在外面”。叫车出门了，就脱离了“在家”的状态。踏进家门之前，一直都处于“在外面”的状态。

举个例子，如果某人最近网购了东西，外出期间接到电话说有快递到了，许多人都会说我“不在家”，或者说我“在外面”，你放物业吧。

“外面”是哪里，没法确定，“家”就相对固定。通过历史行程，分析每组接近地点的出现次数，还有每次到达此地的时间，应该是有办法能猜测出来的。对于没有设置常用地址的用户，如果发现他频繁叫车前往同一地段，则可以在某次前往该地叫车成功后给出提示：发现你经常前往某某地点，那里是你家吗？或者是公司？通过推荐和引导的方式，能够帮助更多用户设置好常用地址，方便未来的出行。

返程

返程算不算一个常见需求？我不知道，我看不到数据。不过这样的场景至少有它的代表性，很典型：从家里（或公司）前往某处娱乐消费（办事情），并且当天以同样的方式返程。

如果是来往于两个常去的地点，倒不太适合套用返程这个概念，我们会更直接的理解为回家、去公司，这都是我们日常生活的一部分。返程的前提，是要前往一个比较临时的环境，不常去，并且下意识认为自己待在这里是暂时的，这就进入了一种短暂的“出差”或“出游”状态。就像身在外地的朋友们回家过年一样，假期结束，我们需要“返程”票回到自己生活的城市。办事地点不重要，重要的是来到这里，能回得去就行。此时“返程”这个概念就清晰明确了。

但“返程”概念有意义，并不代表“返程”功能有意义。最无脑的做法是在主界面增加一个返程的入口，能够一键叫车前往当天内最后一段行程的出发地。细想有很大问题，如果出去办事是招手拦的出租车呢？假如出门聚会是搭了朋友的车呢？用户想要回到出发地，他并不在乎来时是通过什么交通工具，用的是哪个App。这些场外信息，应用是无法知晓的，盲目提供返程，反而是在添乱。

关键的问题在于两点：

滴滴如何掌握用户通过其他途径出行的记录？
滴滴如何了解用户某一次出行的目的地是一个临时环境？

单靠手机应用，对这两点都束手无策。所以，“返程”概念或许有意义，但它并不是某种单一的出行方式所能给得了的。

优秀配色方案的探索过程

hi@victor42.work (Victor42) — Sun, 15 May 2016 00:09:57 +0000

[国外设计第133期]

选择配色方案往往是个难题，尽管网上有各种各样的色彩库，配色仍然至关重要，有时候最好还是亲自动手。而且这个过程也非常有意思。

为这类工作找到一套标准流程是不可能的，因为它天然具有创造性。我使用Sketch来进行这项工作，你当然也可以用Illustrator甚至Keynote和PPT来做。

提醒：品牌建设包含的远不止选择颜色和字体，如果你想要给自己的公司寻找一套配色，我还是建议你雇佣专业的品牌设计公司。

我接下来会重现我选定配色方案的过程，我需要把它用在一些演示当中。一切开始于这张照片，Zurich机场，由Erez Attias拍摄。在Unsplash上你可以找到许多更加漂亮（并且版权免费）的照片。

瑞士Zürich-Flughafen的Zurich机场

首先要做的是从图片中选取一些颜色。目前，我只会选出4种颜色：一种强调色彩、一种浅色、一种深色、还有一种其他颜色。我们之后可以随时回来查看这张图片。

初始配色，从图片中选出的样本。

有了4种基础色彩，可以开始做一些色彩上的探索了。尽管我不是这方面专家，但我有色彩理论的基本知识，我以此来引导我的决策。

探索色调和饱和度

使用Sketch的调色盘，我们可以减淡或加深每一种色彩。既然有浅色和深色，我们就得稍微调节一下饱和度和明度。通常情况，调节色调时最好保持饱和度与明度近似，反之亦然。

通过其他工具探索

我们可以使用像Paletton这样的在线工具帮助我们发现新的色彩。在本例中，我用了两种不同工具来计算互补色和三色系。

最后，还可以尝试在配色上叠加40%透明度的白色和黑色。

尝试各种叠加

我最后尝试的一件事情，来自Marko Vuletič的绝佳提议。建议你直接看看：

《快速创建配色方案的秘诀》

选择强调色时，我们可以尝试之前生成的某些更亮的颜色。

这整个过程帮助我们生成了相当多不同的颜色。如果我把最初的配色去掉，它们就是这些：

最后得到的色彩样品

哎呀，这颜色太多了 😧

一点没错，这颜色确实太多了。我发现通常最好保持4到5个主要色彩，其中有一个应当作为强调色。还可以有一系列的辅助色来支撑，比如用来表达某些含义（红色代表错误等等），将不同部分或者概念分组，（比如用在我的演示中），或者用于代码语法高亮。

现在我们已经有了这一大堆演示，该花些时间相互搭配，尝试看哪些可以凑成对、可以用在哪里。在这里我给不出什么建议，你只能相信自己的内心，还要考虑这些色彩能否很好描绘你的气质和身份。

打磨配色（这不是在玩俄罗斯方块）

纠结一阵子后，得到最终的配色方案：

**更新：**自从把本文的草稿发给一些朋友看，就有人指出我的主要配色和Deliveroo几乎一样。这当然不是故意的，不过我忍不住想，是不是我的潜意识已经被伦敦遍地都是的Deliveroo品牌形象影响了。

原文链接：https://medium.com/@dannysmith/finding-a-good-colour-palette-through-exploration-b90abde88a1c#.j7e0r5lit

作者信息： Danny Smith Teacher. Engineer. People Geek. Blues Musician. Rubyist. Used to design things, now I teach others how to build them better.

用户体验设计中的分步导航

hi@victor42.work (Victor42) — Sun, 08 May 2016 13:21:45 +0000

[国外设计第132期]

设计大型电商网站或者复杂的在线服务时，你很可能需要设计一套系统，来梳理顺序与结构。把它设计得简单直观，让用户顺利通过，是提升转化率的关键。沿途所有的挫败都可能导致他们离开，去选择其他的产品。

易用的分步流程有助于用户避免挫败，成功地完成主要任务。本文中，我们来了解分步导航的各种形式，看如何使用它们。

分步导航是什么？

分步导航（或者说分步指示器）将一系列的过程分解成多个合理的步骤。它引导用户通过一些步骤最终完成一项复杂的任务。好的分步导航应当告知用户以下信息：

他们已经完成了哪些步骤（或任务），最好要有适当的视觉反馈
现在处在哪一步（用户当前在整个流程中的位置）
还有哪些步骤，多少步（最好都要有清晰的名称）

分步导航通过步骤编号表达出整个过程

有3大理由应该使用分步流程：

合理地将数据输入分组
为用户建立明确的期望
在复杂的过程中追踪整个流程

为什么有效？

分步导航清晰地指明了完成任务的路径。研究表明，它给用户以明确的概念，完成最终目标需要多少步，能够显著降低放弃的概率。从心理学角度来看，这颇具意义。如果你知道完成这个过程需要多少步，你就更容易完成它。

分步注册账号

分块展现内容，便于用户浏览，有助于他们理解。实际上，分块其实就是在有意创造视觉分隔的内容单元，在整体环境中有它的意义。

分步导航的使用

分步导航可以用在许多种情景中。下面3个领域最常见。

在线下单

目前为止，分步导航最广泛的使用案例，就是与在线购买相结合，因为这个任务可以很自然地分割成多个步骤。

多步表单

如果表单需要用户填写许多信息，最好将它分成多步。

引导页

分步导航也可以用来引导用户了解一个应用或服务的功能。如果步骤不多，也可以使用小圆点来表示（就像下图Dropbox的例子）。

Dropbox的引导页

分步导航设计最佳实践

创建优秀的分步导航，并没有通用的方案。但有一点是肯定的——你时刻要考虑用户如何与该系统交互。简单说，就是要把流程步骤设计得尽可能简单清晰，不要让用户困惑。

设定用户的期望

当用户要进行一项复杂的任务时，重要的是事先营造他们的期望，告诉他们需要多少时间和精力。如果用户认为这个任务只要2分钟，但实际上花了10分钟，这个体验就很糟糕。

提供简单的描述，能够帮助用户为复杂的任务做好准备。这也很有助于估计完成任务所需的时间，尤其当这些步骤并不均等时（例如有些步骤比其他的更长）。

建立合理的流程

显示流动的方向。最好使用箭头来强调方向，因为线条本身并没有提供“流程”的含义。
结合图形与文字描述其中步骤。要让用户清楚步骤的顺序。
过程不要太长。3-5步就足够了。
使用数字序号描述步骤，指示用户当前所处的步骤（例如第3步、第5步）。

让用户清楚自己当前位置

“我进行到哪儿了？”这是导航需要用户回答的基本问题之一。所以优秀的分步导航设计，最关键的就是保持用户了解当前所处位置。这能够提升连续性，因为用户知道当前位置与之前步骤和后续步骤之间的关系。

要为流程设计一套良好的视觉展现。用户依赖导航元素中的这些视觉线索来回答这个至关重要的问题。

图片来源：Dribbble

状态的变化要清晰，告诉用户当前的步骤不只是改个颜色。适合的图形和文字标签，能帮助用户理解菜单项。

异常标签的错误状态

避免多层分步导航

避免在一个页面上多次使用，或者嵌套使用分步导航。这会导致界面的混乱。

显示出流程反馈

分步导航可以在每步保存后，短暂显示反馈信息。只应该在步骤间有较长延迟时使用这种反馈。

这个分步指示器在步骤保存后，短暂显示了反馈信息。

移动应用中的分步导航

因为横向空间有限，在移动应用和网页上，纵向分步导航也许是不错的方案。不过要确保每步内容是响应式的。

小屏幕上使用纵向分步设计。

结论

把分步导航设计得简单易懂、低调含蓄，也别忽视它们的视觉表现，应当在视觉上吸引和引导用户。“用户至上”。记住我们不是在为设计师而设计，我们为普通用户设计。最终，优秀的分步导航能让用户停留，完成任务，并且让你的网站和应用留下正面的印象。

感谢阅读！

原文链接：http://babich.biz/progress-trackers-in-ux-design/

作者信息： Nick Babich I’m a software developer, tech enthusiast and UI/UX lover. nick@babich.biz

以人为本的矛盾

hi@victor42.work (Victor42) — Wed, 04 May 2016 22:00:15 +0000

中午偶然想到，会不会在许多年之后，我们今天所说的“鼠标手”、脊柱弯曲，不再会被当成一种病，而是新时代人类的特征？

想想觉得不对，这个假设被迅速推翻了。

如果这些不是病，那腰间盘突出要作何解释？同样是现代生活的副产品，严重时却可能导致瘫痪。这些现象在影响我们身体的同时，其中多数都会带来生理上的痛苦，这绝对不能说是人类的进化。

科技的发展无法预料，今天的道德观、社会结构可能会被轻轻松松推翻。我们觉得理所当然的事物：婚姻、语言等等，都可能消失，被其他某种机制替代。但有一样东西不会变，至少不会大变——我们的身体构造，这是一切的根基。

我们亲手打造了自己生活的环境，努力让其中的方方面面都符合人类的身体特征。通过助力，我们可以仅用转动方向盘的力量移动成吨的物体；所有建筑和交通工具的出入口，都至少能保证一个成年人顺利通过；闪烁的红灯与急促的警示音，强烈的感官刺激暗示了事态的严重……身边所有事物的设计出发点，都围绕着我们的手、身体和5大感官。

阿西莫夫的机器人系列里描绘过一个问题，为什么人们要把人工智能造得和人类一模一样？在一些具体的工作上，人类身体并不比专用的机器更有优势。但是，派人形机器人前往其他星球垦荒时，它们会在不经意中按照符合它们习惯的方式来设计和建造，把这些拓荒者设计得和我们一模一样，恰恰是符合了将来人类移民的生活习惯。

虽然是科幻，却揭示了世界的本源。一英尺的长度单位起源于一位国王的脚；古代城墙高度足以令人无法翻越；法定结婚年龄不会定在150岁，也不会定在15岁。整个人类文明，都建立在我们的生理特征之上。我们感受到寒冷和饥饿，于是意识到我们需要住所、耕种。另一方面，仰望星空也给了我们诗和远方。所有的创造物，最终都要为我们所用。上帝不会去创造那颗自己也搬不动的石头，人也一样。

这就是设计的意义，帮助人们通过最基础的感官来理解和控制世界，同时最大程度免除身体的痛苦、打破身体的局限。我们用遥控控制电视与空调，用手套来抵御冬天的严寒，用盲文来帮助视觉障碍者参与大众生活……如果一种物品的设计，或者说一种生活方式的设计，会无法避免地给人带来某种痛苦，说明它仍然不够完美。无论如何，我们的身体会通过某种不适感告诉我们，还需要更好的方案。

以人为本，或许就是这个意思。

—— 180度大转折的分隔线 ———–

意识流本该到此就结束，然而我想到，世上又存在另一些东西，可以轻易推翻以上观点，比如说：高跟鞋，你觉得它的存在究竟是天才还是恶魔呢？

如果把心理因素也考虑进来，设计或许永远也做不到客观。设计者的喜好、价值取向，多少都会体现在他的创造物中，这正是有趣的地方。设计师、创造物、还有它的使用者，自然而然因为相同的观点聚集在一起，通过创造物进行一种精神层面的沟通，就像在读一本书。这种情况下，设计者的身份就变了，从幕后创世的上帝，变成了引领人们的耶稣。

这就容易让人困惑了，究竟该怎么做？满足需求和创造需求，似乎需要两种截然不同的做法。前者的设计方式，要尽可能隐形，让设计成为身体反应的一部分，任何引起不适感的细节，都是设计中的败笔。而后一种设计，却偏要让人注意到，不仅让使用者注意到，还要让旁观者注意到，这就需要消耗人们的时间和精力，但是他们乐意！

其实这并不矛盾，就像牛顿经典力学和相对论，该用哪一个，放到了具体场景中自然就清楚明了。或许你选择了某个设计方向，吸引了一批拥护者，另一些人却离你而去。但是没关系，人的多样性正体现在这里，尤其是在心理上。全自动洗衣机好过半自动的，所有人都能达成共识。可是要说桂花比薰衣草好闻，却并非人人都会同意。如果能赢得薰衣草爱好者的认同，这个设计也是成功的。

尊重人的多样性，同样是以人为本。

为儿童设计可不是儿戏

hi@victor42.work (Victor42) — Sun, 01 May 2016 00:31:09 +0000

[国外设计第131期]

或许你已经看到了：孩子们已经离不开平板电脑和智能手机了，用他们软乎乎的小手指，在上面大胆地滑动。从机场和餐馆，到家庭甚至学校，移动设备充斥着如今的童年生活。苹果公司去年在App Store中发布了一个专属于“儿童”的分类，如今已经有超过80,000个应用了。

有如此众多的儿童类应用，可能你自己也会想设计一个。“为儿童设计能有多难呢？”你可能会这么想。但是，不要被表象蒙蔽了。尽管情节简单、音调低龄化，但为儿童设计是一件严肃的活。并不是套用成年人的内容，然后将它幼儿化。实际上，有许多理由表明，为儿童设计比为成年人设计更加复杂。

本文中，我会通过下列用户体验的考量，指出如何避开常见的陷阱：

观察玩耍过程，能够转化为对数字领域的理解
何时并且如何使用真实的产品模型
对儿童进行可用性测试的各种途径
为年幼的用户提供何种程度的可见性
如何设置一个好用的菜单
何时加入声音和视觉反馈
为什么不能忽视成年用户

用户研究大有帮助

在Mutual Mobile，用户研究是我们设计流程中的一个关键环节。我们发现，从最初的头脑风暴阶段，到打磨最终成品，让用户全程参与整个设计过程的价值是无法估量的，尤其你的用户还是孩子。

那么为什么为儿童设计如此困难？主要原因很简单：设计师并不是孩子。他们是成年人，充斥着成年人的生活经历、成年人的技术倾向，还有大量成年人对于孩子喜好的偏见。我们都知道，用户的情感共鸣有多么重要。这尤其适用于儿童用户。想象一下，有可能你为目标用户夜以继日创造了一个应用，但对于他们来说却太难用了。所以，在设计和开发之前，要通过一手的用户研究，切身体会用户天真烂漫的视角。

在设计的最初阶段，你的研究甚至不必加入科技因素。就只要观察儿童玩玩具的过程，我们就能了解到许多孩子们的交互方式，什么吸引他们注意，什么让他们觉得无趣。所有这些理解，都能转化为应用中的数字娱乐体验。

确定目标用户年龄范围

在开始蜡笔和玩具兵的狂欢之前，很有必要退后一步，为你的应用确定目标用户年龄范围。孩子成长和改变的速度远比成年人快，所以通常以最多2年的范围为间隔。想一想4岁和6岁小孩的发展阶段的区别，或者6岁和8岁的区别。比如，在某些年龄时，孩子喜欢开门见山，自己探索应用。而其他一些年龄的孩子则需要预先的说明，给他们自信，让他们继续下去。（想要了解每个年龄阶段的详细信息，请看Debra Gelman的《为儿童设计》。）

观察

一旦确定了目标年龄层，就瞄准开动吧。召集一组这个年龄层的孩子，理解他们的行为，作好记录。如果可以的话，尝试观察不同的分组类型（例如，相互认识的儿童，陌生的儿童；全是男孩，全是女孩；室内，室外，等等）虽然对于成年人而言，孩子的行为可能很傻，但这很有说服力，能够表明这些孩子会如何操作你的应用。例如：

这年龄层的孩子喜欢在规则内，还是更喜欢发明自己的游戏规则？
他们是很努力在尝试，还是在相互“打趣”？
男孩和女孩玩耍的方式有没有不同？

一旦对这个年龄的孩子有了概念，就要让你的观察更进一步，为你的产品创意设定相关情景。例如，如果你的应用包含了童话故事，就让孩子们扮演王子和公主。你还可以加入一些没有科技含量的物理模型，观察孩子们作何反应。

Toca Boca Tea Party就开始于纸质模型，使用了茶壶、茶杯和茶匙的剪纸模型，摆放在iPad上。Cyberchase Shape Quest，一款操控积木的增强现实游戏，使用了类似于纸板拼图的剪纸模型来评估，这个难度对于孩子是否太高。孩子天生就很有创造力——你往往能得到一大堆创意，指引你如何使应用更加吸引人、令人兴奋。

分享式设计

分享式设计，也称作合作设计，是一种有趣的理解儿童如何看待世界的绝佳方法。这包含了聚集成组的孩子（通常在6到12岁），给他们制作工具，让他们为你的产品出谋划策。

孩子们使用类似的工具在Mutual Mobile总部设计应用。（查看大图）

虽然最终的设计结果，很少会直接采纳儿童的创意，这个练习能帮助设计师理解孩子们对这个主题有什么感觉。例如，孩子们可能会设计一个机器人，帮助他们完成作业，但它需要具备怎样的人格？是个友善的、鼓励人的机器人，还是一个专制的机器人？孩子们思考的是什么特征，目的是什么？

理解这些细微差别，能让设计师在打磨产品时产生移情作用。孩子们还能创作出拼贴画、故事板，或者把练习本带回家完成，效果类似。

可用性测试

随着产品设计和开发的进行，反复进行可用性测试，是开发周期的一个关键部分。像Marvel和Pixate这样的原型设计工具，能让你无需代码检验一些复杂的任务，例如滑动和双指缩放。像这样的手势操作尤其需要尽早、频繁测试，因为小孩运动能力没有完全开发，不能像成年人那样自如地运用手部。

对年长一些的儿童进行可用性测试时，可以使用传统的交谈方式，不过你需要更具创造力，让参与者感到兴奋。让孩子们“教你”如何玩这个游戏，或者观察一个孩子如何教其他孩子玩。这些可用性测试的讨论是无价的，尽量仔细，处处留意。你的应用是否易用、有趣？或是无聊、令人困惑？如果是个游戏，那么不同的关卡、时间限制和奖励是否明确？结果可能完全出乎你意料。其中一个团队的设计师发现，游戏失败后出现的“伤心小猫”的声音与动画，让孩子们觉得非常有趣，他们甚至会故意输掉游戏，不停地触发一阵阵的傻笑。

孩子正在发笑，因为我们测试的应用中包含有趣的声音和动画。（查看大图）

抢占先机的设计诀窍

虽然用户研究能够确保你创造的产品对于儿童而言足够吸引人、欢快和有用，但还是需要牢记一些设计的最佳实践，让你抢占先机。通常，其中多数诀窍都关乎如何让应用更容易被儿童理解。虽然多数孩子并不怕在一个新应用中胡乱滑动和点按，但如果应用不能符合他们的心智模型，他们很容易就会感到沮丧。

可见性

首先，孩子喜欢丰富的色彩，这点人尽皆知。孩子们希望他们的应用是鲜艳、吸引人的。大胆使用颜色，但要清楚明白表现出哪些元素是可交互的。随着扁平化设计的到来，一切都可点按。单独的文字（在适合的环境中）也是可点按的。成年人了解这点，但多数孩子不知道。

解决方法很简单：创造功能可见性。设计可交互元素时，使用明确的特征表明它们可以被点按。例如，按钮可以带有简单的白色边框，或者投影；可交互的背景元素，应当摇摆、闪光，或者通过其他某种方式吸引用户注意。对于更年幼的儿童，在不可操作的背景上使用暗淡的色彩，来凸显可交互元素。Sesame Street应用（下图）就很清晰地表明了哪些物体是孩子可以操作的。

简单的Sesame Street Touch & Learn应用。（图片来源：Microsoft The Fire Hose）（查看大图）

菜单和图片

多数儿童应用使用了全屏菜单，帮助孩子进入不同的应用区块（单人游戏、双人游戏、积分榜，等等）。这尤其有助于儿童的浏览，保持它们简单明了至关重要。让行动指令（CTA）最具号召力，并且按钮尺寸最大，能够防止孩子迷失其中。

作为我研究的一部分，我观察过孩子们如何使用著名的教学应用——VocabularySpellingCity。尽管这个应用在教师中被广泛接受，但许多孩子并不理解两步的菜单操作流程，这需要让孩子们先选择一个较大层级，然后选择游戏。孩子们被自然吸引到屏幕的右半边，那里的游戏名称使用了有趣的字体。他们会选择一个游戏，然后等待，继续等待。有个孩子甚至进入到iPad的WIFI设置中，检查有没有断网。想想看：他能去检查iPad的WIFI设置，但应用界面对他来说却太难理解。其实通过把这两步分到两个界面中，或者在选择第一步之后才激活第二步，就能轻松解决这个问题。

VocabularySpellingCity令人困惑的菜单。（图片来源：iPad Apps for School）（查看大图）

对于菜单而言——在整个应用中——不要过分依赖文字。你的用户可能无法阅读复杂的文字，还有许多与学校作业有关的阅读（那可不好玩）。在整个应用中加入简单的图形，是易用的保障。不过要确保对图形进行可用性测试，因为孩子们并不像成年人那样，对真实世界的物体那么熟悉。

反馈、环境和声音

反馈在应用中至关重要。成年人需要在遇到错误时获得反馈。任何时候，发生任何事，孩子们都需要得到反馈。以页面切换、物品移动或声音的形式加入反馈。例如，在Yuby中——我们为Union Bank创造的应用，教导孩子如何存钱和追踪消费——任何时候向账户中存款，孩子们都能听到硬币的叮当声，看到钞票从屏幕顶端飘下。

甚至成年人也喜爱Yuby应用的声音和动画。（查看大图）

在教育类应用中，反馈尤其重要。如果孩子答错一题，不要只给个红叉叉然后继续。再给一次机会，展示出正确答案，或者解释如何得到正确答案。这似乎很简单，但不幸的是，如今的许多教育类应用，并没有把这些时刻作为教学的机会。

对于游戏，要提供符合环境的反馈，展示一些提示，告诉用户如何取得成功。愤怒的小鸟在这方面就做的非常好（并没用到任何文字就让我取得一些初期的成就）。

愤怒的小鸟直接演示了如何游戏，而不是通过说明来展示。（图片来源：dy/dan）（查看大图）

设计时也要考虑环境。孩子们会在什么地方使用你的应用？在家、学校、或是介于之间的某个地方？如果你的应用是用在学校里的，平板电脑往往会被分享使用。你需要账号应对多用户、不同关卡的情况。为每个孩子加入用户资料的功能，带上照片或头像，轻松辨认出每个人。还要保证有保存进度的方式，让那些进行到了很远的孩子，不必无聊地重复之前的简单关卡。

还有，考虑声音时也需要注意环境。声音是提供反馈和说明的有趣方式，但孩子们并不总是处在安静的环境中。如果孩子在吵闹的教室或机场里使用你的应用——或者他们的父母需要安静——声音真的是必须的吗？许多应用应当在静音的状态下同样易用。

别忘了成年人

最后，虽然你应当重视儿童用户，但也不能忘了成年人！我是指家长、监护人、老师，还有其他任何需要操作这个应用的人。成年人在这个应用中扮演什么角色？他们是与孩子同等的搭档，在旁边一起玩？还是协助或监督玩耍的过程？如果出了问题他们能否解决？或者他们是另一类用户，需要考虑以上所有？例如，教师可能就需要登录应用中的一个特别的部分，查看每个学生的进展。

现在，我们可以很肯定的说，儿童应用所需的关怀和体贴，不会比成年人日常应用的少，他们也需要得到同等的尊重。而且作为潜在的巨大收入来源，这些年幼用户的肩上承担着软件产业的未来。如果想要我们的研发产业继续进步，我们在今天就要吸引住下一代。最好的方法就是通过设计精良的应用。

原文链接：https://www.smashingmagazine.com/2016/01/designing-apps-for-kids-is-not-childs-play/

作者信息： Becky White Becky is a Senior UX Researcher at Mutual Mobile, a mobile and IoT software agency, where she inspires, informs, and validates digital products through research. She’s worked across a variety of clients and industries, and is most passionate about designing apps for children.

设计的7条心理学原则和定律

hi@victor42.work (Victor42) — Sun, 24 Apr 2016 02:14:52 +0000

[国外设计第130期]

在设计中，心理学无处不在。正因为心理学，我们才了解红色很适合用于餐饮业的logo——因为它能增进食欲——或者让首屏的行动指令按钮产生更多转化。

也就是说，作为设计师，你不能忽视心理学。因为人类大脑的这些原则，决定了人们对你的设计作何反应、如何相互作用。回顾这7条心理学原则和定律，你能够将它们结合到实际运用中。

1. 冯·雷斯托夫效应

冯·雷斯托夫效应告诉我们，某个元素越是违反常理，就越引人注目、令人难忘。

Hedwig von Restorff在1933年检验了这个理论。她让实验对象观看一系列相似的物品。如果其中某个很特殊，比如说有聚光灯照射，那么相比其他物品，受试者就更容易回忆起这件物品。

这条原则能以多种不同方式应用到设计中。最明显的是如果你想要让某物引人注目，就要使它特殊化，例如通过色彩、尺寸、留白等等。

但是，由于人们更在意特殊物体，他们对于整体的印象就不深。思考是否要突出显示某物时，要牢记它的负面效应。你是想要人们记住一件事情，就只有这一件事，还是说其他元素也同样重要？如果所有都同等重要，你希望人们全部记住，就不要凸显其中某个。

2. 色彩心理学

经验丰富的设计师，对于色彩以及它与设计的关系，有着固定的理解。但是，设计新人们容易忽略色彩对心理的影响，而是选择他们自己喜欢的颜色进行设计。即使你精通色轮，知道如何搭配互补色或者相近色，你有没有考虑过你的设计如何影响受众呢？

没错，颜色可以影响情绪。Adobe列出了一些色彩和与之相符的情绪，下面是一些积极的方面：

**黑色：**精致和力量（案例网站）
**白色：**干净、精致、纯洁
**红色：**勇气、激励、力量；也能激发欲望
**蓝色：**冷静、安定、信任、安全（案例网站）
**黄色：**乐观、欢乐
**绿色：**平衡、可持续的增长
**紫色：**皇权、精神意识、奢华
**橙色：**友谊、舒适、食物
**粉色：**平静、女性化、性

记住，颜色给人们带来的情感，会随着文化和宗教背景而改变。以上列出的仅代表西方文化的观点。

3. 马斯洛需求层次理论

可能你在高中或大学学过马斯洛需求层次理论。如果需要回顾一下，请看下图：

![设计的7条心理学原则和定律：马斯洛需求层次理论中文版五色金字塔图示](https://cdn.victor42.work/posts/2016-04/04-24/2016-04-23 19-41-25.jpg)

译者注：上图的中文版金字塔并非原文内容，找来帮助大家理解。

这个金字塔形，用来表现一个人要达到自我实现，需要经历哪些步骤。例如，在能感受到爱之前，他们的生理和安全需求一定要得到满足。

那这个在心理学课堂之外有什么用处？营销人员和设计师们，可以将马斯洛需求层次理论应用于广告和公共关系。

设计推广材料时，创建消费者人物角色就能用这套理论。想想你目标客户的需求，处在金字塔的哪一层。你的设计如何激发他们向更高的一层迈进？

也可以用它来挑拨人们的情绪和需求，让他们被吸引到你的设计中来。比如看看这些Salvation Army的海报，就在挑拨爱与归属感。

4. 席克定律

席克定律关系到一人需要多久来做出决定。如果人们有更多选择，就需要更长的时间做出抉择。某些情况下，需要花费的时间太长了，以至于他们根本做不出决定，因为决定的负担太沉重。这就是你为什么在餐馆经常见到简短的菜单——他们不想把顾客吓跑。

这个概念也可以运用到设计中。例如你设计网站时，你就会想要保持导航栏尽可能简洁，只有少数几个选项。如果有必要，将一些页面分组放入下拉菜单，网站访客就更容易对选项归类，并且迅速做出决定。

这对于行动指令也成立。设计海报时，你可不能一下子讲6件不同的事情。你想要人们关注一两个选择。例如，你的设计或许主要是为了募捐，主要的行动指令是“今天就捐赠吧——拨打（888）888-8888”。还有一个次要的行动指令“在Facebook上关注我们”，通过一个二维码，把客户引向Facebook页面。

5. 面部辨识

在设计中加入人脸，是最有效的设计技巧之一，可以吸引人浏览你的海报、网页、或书籍封面。人们天生会被面部吸引——甚至我们能在没有人脸的地方看出人脸来，例如月球或火星表面。更有甚者，研究显示，当网站里加入了人脸，转化率会增加。

这个概念有多种应用方式。

首先，可以使用面部来连接你的受众。只要在设计中放上一张人脸，就更容易吸引访客视线——即使那不是一张真实的脸，而是某个感觉像脸的物体。

还可以根据模特的面部和视线的朝向，来引导用户的注意力。眼部追踪研究显示人们会循着别人的视线，就像跟随指示箭头一样。

还可以使用面部来传递感情。有六种公认的面部表情：

快乐
难过
惊讶
害怕
厌恶
愤怒

利用这项原则，你立马就能确定设计的基调，并且跨越语言的界限进行沟通。

6. 费茨定律

译者注（图中文字）：费茨定律示例它是什么意思呢？费茨定律表明，你应当让按钮和其他界面元素足够大，因为用户点击小按钮十分困难。如果你有个小按钮，像【OK】这样，可以增加一些内边距，或者让它更宽：【　OK　】如果说网站上有个按钮，让整个按钮都能点击——而不仅仅是文字标签。而且，如果你把物体放在很远的地方，最好就要增大它的尺寸作为补偿。

费茨定律是一条科学定理，通常用于描述人机交互。它说“移动到某个目标上所需的时间，是一个由目标尺寸和目标距离构成的函数。”

这项原则可以用于网页设计中。本质上来说，点击区域越大，就越容易被点到。

举个例子，当你设计一个网页时，你当然会把导航做成可点击的。但是链接的可点击区域是哪块？只有文字能链接到目标地址，还是标签页本身也可以点击？

同样的，你也可以反过来设计。不想让人轻易点击到的链接——例如删除或取消按钮——就应该有更小的点击区域。

7. 奥卡姆剃刀原理

奥卡姆剃刀原理告诉我们最简单的解决方法往往是最好的。尽管这与其说是设计定理，倒更像是一个哲学概念，但它还是很容易用于设计中。刚入行的设计学生们容易创造出复杂的设计，里面有许多不必要的元素，只是为了展现他们的创造力。但是，你会发现这些设计往往对用户是不友好的。

这个概念也可以和席克定律关联起来。如果你尝试向网页中塞入过多内容，而不是选择最简单的方案，人们就会有过多的选择。然后，设计就会变得令人眼花缭乱，会被人们迅速抛弃。如果你不清楚设计将如何发展，通常可以稳妥地倾向于选择最简单的方案。

心理学在我们日常生活中扮演重要角色，但如果你是设计师，就更要加倍关注心理学原理，来创造能够与用户交流并为客户带来转化的作品。你的下个项目中会如何使用这些原则呢？

了解更多能够用于平面设计中的原则和定理，例如著名的斐波那契序列、三分原则、黄金比例、帕雷托法则（80/20 二八定律）等等。

原文链接：http://justcreative.com/2016/04/13/7-psychology-principles-laws-to-apply-to-your-designs/

作者信息： Mike Wallagher

优秀设计主管必备的品质（下篇）

hi@victor42.work (Victor42) — Sun, 17 Apr 2016 13:31:41 +0000

[国外设计第129期]

编者按：我们每周会征询一些设计主管的建议。本周的议题是“你觉得优秀的设计主管需要哪些必备的品质？”下面请看Libby Bawcombe和Chris Thelwell的分享。

还有，请别错过Peter Merholz和Uday Gajendar的回答。

你多少次被人称赞“有创造力”？虽然这是事实，设计师确实是创意十足的人群，我们都通过各自的方式展现我们的创造力。

这就是说，好的设计主管也可能千差万别。但我发现有一个成就优秀设计主管的共性：慷慨。

设计师要在办公室里与多种角色协作：其他设计师、公司里其他部门同事、供应商、还有外来客户。

图片来自Inside Design: DocuSign。

正因为我们要营造大家的合作关系，我们最大的善举，就是对创意慷慨、对时间慷慨、对赞扬慷慨。

对创意慷慨

把创意分享出来。我们越多地与别人谈论自己的创意，创意就能碰撞出更多火花。讨论和抛弃那些糟糕的创意。选出那些优秀的，让别人的观点为它添砖加瓦。

如果说我没有依靠团队伙伴，全凭自己想到一个好创意，这样的例子我可找不到。在团队中无所不知、最有创意，对于设计师是极具诱惑力的。但有时候，我们做不到，我们能做的最好的，就是把创意的萌芽公之于众，请求同伴们为它添砖加瓦。分享出来的创意会成倍增长。

“设计师是创意十足的人群，通过各自的方式展现他们的创造力”

对时间慷慨

当我们为其他人腾出时间，合作就能取得最大成功。让我们把它作为团队取得成功的先决条件，而不是合作发生时的被动需要。时间与专业技能同等重要，如果我们不相互分享，谁能从中受益呢？我并不是在建议大家多开会，但我们怎样能创造更多机会，让彼此腾出时间进行非正式的交流？我们可以通过视频聊天与队员远程沟通，亲自主持站立会议，当群聊和邮件失控时快速发起会议。如果我们将自己的时间用在彼此身上，我们的协作就能更灵活有效。

Envato的设计师们。

对赞扬慷慨

我们的最大善举之一，就是公开地鼓励他人，表示我们对于同伴的工作有多么关注和赞赏。此举的目的不仅仅是给同伴加油打气。公开赞赏他人，表示我们注意到了别人努力的成果，这些努力甚至超出了他们的工作职责，或者处理得特别好。

“成为一个高效的设计主管，与我们所能给予的直接相关。”

我们可以发邮件给团队或某个主管，说：“你知道这是Ana设计的吗？就是她！这真令人吃惊，对我们的项目大有帮助。感谢Ana！”

或者，我们可以在社交媒体或下一次跨部门会议上，大声宣布优秀队员的名字。这样的彼此赞扬似乎有传染性。当我们慷慨的给予赞美，相互欣赏的文化就传开了。

成为一个高效的设计主管，与我们所能给予的直接相关。当我们对创意、时间和赞扬都慷慨时，我们就在构建体贴、协作的人际关系。最优秀的作品就是这样诞生的。

毕竟，合作就是一种掩饰的艺术。

在如今的公司机构中，设计师的角色被广泛误解了。决策者们都知道他们需要设计师，但并不知其意义所在，如何将他们作为一个部门来管理，如何使他们融入整个公司。我觉得在这种环境中，设计主管最重要的特质就是适应能力。

“优秀的设计主管适应能力强。”

我征询了Envato的设计团队，是什么成就了一名优秀的设计主管。有一个答案非常引人注目：

这个人要能够建立和支撑一支强有力的设计团队，同时在公司内推销设计的重要性，让设计师产生影响力、获得自治权，更有效地完成他们的工作。

——Paul Moran，Envato的高级用户体验设计师。

这段陈述很好地概括了设计主管的主要目标。虽然它并没直接提及适应能力，但我相信它是使这些生效的核心组成部分。

图片来自Inside Design: Envato。

我来分解一下：

能够建立和支撑一支强有力的设计团队

建立一个设计团队很难，这需要相当长的时间。作为设计主管，你要与预算进行抗争，让团队壮大。

但要说服高级管理者，我们需要更多的设计师，而不是工程师，这就更难了。还有谁比他们更直接关系到实现产品交付到顾客手中？你需要一个清晰的概念，表达出你希望未来的设计团队是怎样的。不要在你想要打造的团队上放弃或妥协。

“不要在你想要打造的团队上放弃或妥协。”

然后就是人员招募，这或许是壮大队伍最难的部分。需要付出巨大的努力来寻找最有天赋的人——你带领他们经历一个漫长的过程，确信他们适合你的团队，然后他们去了其他地方。当你最终填满了所有角色的空缺，又会有人离开。然后你要重新开始这个过程。

支撑一个团队也非常难，但别忘了你招来的都是优秀的设计师。优秀的设计师可不好管理——就像从前的你一样。记住他们在自己角色中的感受。别管细枝末节，不要在人的屏幕上指指点点，记得你早年的那些糟糕的设计主管。

在公司内推销设计的重要性

设计师应当在决策者中占有一席之地。作为设计师，我们都知道这点，但在多数公司中都并不现实。如果你是设计主管，你就得为设计在公司中的重要性挺身而出。

需要时间和精力来推广设计——而且还往往是对牛弹琴。

你会习惯于决策者们把设计仅仅当做难以用商业标准衡量的视觉工作来谈论，但我们知道并非如此。你得想办法用商业的语言来谈论设计，让他们听进去。

然后，还有调研。我曾经听过另一家公司的决策者说过：“我们不需要和顾客沟通——我们知道他们要什么。”你的职责就是改变这一点，但你会发现公司的其他部分并不愿意与客户沟通，因为这是你们团队该承担的角色。

你只能继续努力，散播这些信息，直到人们开始聆听。

让设计师产生影响力、获得自治权，更有效地完成他们的工作

你招来了非常出色的设计师，对吧？也在公司内为他们赢得了所需的影响力。

现在你需要为他们争取自治权。

“要让你的团队相信你在支持着他们。”

但这就意味着允许他们犯错，这是学习过程中必须犯的错误。当结果不够理想时，你要在公司其他成员面前收拾烂摊子。通常他们的设计比你的更好，但这也正是你招他们进来的原因。

你的职责已经由设计师变为了一名领导者。你得组建起最棒的团队，为他们提供能够产出最佳作品的环境。这从来都不容易，但要让你的团队相信你在支持着他们，你还必须迎面接受所有挑战，一而再再而三，以此赢得他们的尊重。

如果你没有适应能力，你就疲于应付所有这些挑战。团队会对你失去信心，质疑你为他们提供所需环境的能力。他们不信任你，你也无法成为他们的领袖。

加入讨论

在Medium上写下你自己对于“你觉得优秀的设计主管需要哪些必备的品质？”的答案，然后提交给我们的刊物吧。

原文链接：http://blog.invisionapp.com/qualities-of-a-design-leader-2/

作者信息： Chris Thelwell Chris Thelwell has been a digital product designer in the UK for many years, juggling award-winning F1 projects, cool Google Chrome apps and the occasional European football championship. Now he’s busy disrupting the design world down under as the Head of UX and Design at Envato. Follow me on Twitter Libby Bawcombe Libby Bawcombe is a senior visual product designer with the NPR digital media team. She collaborates with designers, developers and editorial teams to bring NPR’s unique storytelling to readers and listeners across different platforms. Libby was formerly digital design director at The Atlantic, where she led user experience, art direction and responsive design of the digital experiences for TheAtlantic.com and its iOS apps, and CityLab.com. Prior to this, Libby designed interactive touch experiences at the Newseum, the museum of news in Washington, D.C. Follow me on Twitter

优秀设计主管必备的品质（上篇）

hi@victor42.work (Victor42) — Sun, 10 Apr 2016 16:20:01 +0000

[国外设计第128期]

编者按：我们每周会征询一些设计主管的建议。本周的议题是“你觉得优秀的设计主管需要哪些必备的品质？”下面我们给出Peter Merholz和Uday Gajendar的回答。

无论规模如何，单一的权威主管对每个设计团队都有好处，具备远见卓识和高标准的个人，能够最充分地激发他的团队。这是团队中最重要的角色——也是最难做好的岗位。

团队主管必须能够：

**向下管理。**主管意味着对整个团队的表现要负起责任。他们得创造一个能够孕育伟大设计的环境（无论是现实中还是观念上的）。他们要教育、指引、辅导、激发团队。要处理好协作中的挑战、协调个人冲突、明确权责、顾及队员的情绪。
**横向管理。**设计主管需要多方协调，包括产品主管、业务主管、技术主管，还有其他岗位，确保团队的工作能融入整体。他们还要能可靠地抵御不合理的要求，当别人抱怨设计团队的工作难以实现时，出手捍卫。
**向上管理。**这些设计主管要能轻松地与总裁进行交谈，这点至关重要，无论是解释设计决策背后的缘由，还是申请人员或设备的开支。设计主管需要清晰表达出请求，不带情绪地传达信息，证明他们的工作对于宏观目标和客观目标的意义。

“最优秀的团队主管，是导师、外交官和推销员的结合。”

图片来自Inside Design: OpenTable。

简而言之，最优秀的团队主管，是导师、外交官和推销员的结合。他们要通过经验构建一座桥梁，将远在天边的理想目标，拉到咫尺之内。他们要把控各端的体验，确保用户的需求得到理解、业务目标清晰、设计方案适当、并且最终产出质量要高。

要达成一致性，他们必须整合多方的努力，包括产品设计、沟通设计、用户体验研究、还有内容策略。他们有责任清晰表述设计愿景，不仅仅在所领导的团队中，还有跨职能的其他伙伴。

毫无疑问这样的人才是非常难觅的。

组织好设计师的创新力量，激发他们的长处——不要靠琐碎的流程来管理。

信任与尊重至上

这些理念，是构建富有弹性的工作关系的基础，能够承受异议和沮丧的反复冲击——当你的创造对于他人极度新奇、甚至有些吓人时，这样的状况不可避免。

“没有信任和尊重，你的设计师们会扬长而去。”

它们也是展开积极合作的基石，让创意在其上搭建通向理想与需求的阶梯。没有信任和尊重，你的设计师们会扬长而去。营造设计文化的最后一丝希望也将破灭——很可能再无力回天。

透明产生协作

玻璃墙和敞开的门使得协作成为可能。在设计过程中，每个人都应当感受到自己作为一个有价值的贡献者和成员存在。

要让每个人都感受到欢迎和尊重，否则他们会惧怕合作。

通过与之相称的、有意义的问题，给设计师带来挑战

几乎所有的设计师都乐于解决有趣的问题，让他们的设计在其中产生切实的影响，从下一代的概念设计研究，到解决过时的“保存”图标。

设计师们希望接触新的领域、用户类型、工具和风格，以此证明自己，并使自己的技能和经验上一个台阶——他们并不愿被当做“支持部门”对待，为明天的PPT评审折腾图标。这也是尊重设计师价值的一部分，能够激发他们去处理有价值的问题。

“尊重设计师的价值，能够激发他们去处理有价值的问题。”

慷慨的补偿和奖励

设计是辛苦的工作。非常辛苦，因为各种原因，诸如战略、团队变化、技术局限、市场人员的异想天开等等。

认可一名设计师的巨大付出，有以下方法：

公开称赞
一件酷酷的T恤
加薪
以上全部

有些人给个简单的手势就足够了，还有一些人则需要更多。但有一点是确定的：没有人喜欢自己的付出被看成理所当然。

还有重中之重：留出“思考时间”，让设计师们回顾、吸收、和加工他们的作品。

学习上的支持

为设计师们开辟教育预算，买书、购买课程和参加研讨会。

打造一个激发灵感的工作空间

设计师需要现实中与认知上的空间来发掘创意，合作与独立工作都有此需求。这是设计项目过程中，关于工作风格和队员个性之间的一种平衡。可移动的家具、鲜活的形象、自然光、可供书写的地方、图钉墙、还有灵感素材（杂志、游戏、电影、海报等），这些有助于启发创新思维。

图片来自Inside Design: Capital One。

还需要特定的空间，用于和非设计人员进行严肃的探讨。

最后：不要说设计师“有创意”。有创意是个形容词，不是名词。你雇佣的是专家，他们为你的企业设计未来，实现产品、服务和体验，帮你占领未来的市场。

设计师助你成就精彩。拥抱多元化、冲突、开创性观点带来的集体智慧，思考哪些是有用的、你渴望的、有价值的，有助于为团队、公司和顾客做出最佳决策。

“设计师助你成就精彩。”

因为说到底，企业存在只有一个原因：为顾客创造和实现价值。设计师在这场努力合作中有不可替代的位置，有效地领导他们，发挥出最大作用。

这部分由一篇首发于Uday博客的文章编纂而成。

加入讨论

在Medium上写下你自己对于“你觉得优秀的设计主管需要哪些必备的品质？”的答案，然后提交给我们的刊物吧。

原文链接：http://blog.invisionapp.com/qualities-of-a-good-design-leader/

作者信息： Uday Gajendar Uday Gajendar is a catalyst for design-driven innovation, defining next-generation concepts & coaching start-ups on UX fundamentals. Uday’s specialities include creating visionary concepts for new business/revenue models, leading “3-in-a-box” design collaborations with engineering & product, and shaping a progressive design culture. Follow me on Twitter Peter Merholz Peter Merholz co-founded Adaptive Path in 2001, perhaps the world’s premier firm dedicated to user experience. He was instrumental in AP’s growth from a small boutique firm to a renowned international consultancy. More recently, he led the global design team at Groupon, including product/UX, marketing, and brand design where he doubled the team from 30 to 60, and was instrumental in the first redesign of Groupon.com since the company launched. He’s also worked with OpenTable and Jawbone. He is currently co-authoring a book on building in-house design organizations. Peter is also perhaps most (in)famous for coining the word “blog” in 1999. Really. In the OED and everything. Since then, he’s been blogging continuously at peterme.com. Follow me on Twitter

巧用色彩为卡片设计加分

hi@victor42.work (Victor42) — Sun, 27 Mar 2016 00:07:40 +0000

[国外设计第127期]

得益于Material Design日益增长的人气，卡片式界面已经随处可见了。这种时尚且注重功能的美学，运用块状的设计元素承载多种多样的信息。如果想要利用这种多才多艺的手法，你的卡片设计必须别具一格。

色彩就是方法之一。优美的色彩选用、令人振奋的色彩搭配、和有趣的结合，能创造重点、提升易用性，并且吸引用户深入你的设计项目。

卡片式设计基础

要运用卡片来设计，有许多要注意，这些卡片会突出不同类型的数据（例如图片、文字、按钮、链接、评论、或视频），这些数据都关联到同一则信息。

这些可点击的区块，被设计成复古校园游戏卡牌的样式，其中一块区域包含了某种视觉信息，还有一小块文字或按钮。卡片风格界面的优点是，用户能很轻易领悟它们的用法，使得它成为大量内容或电商的理想方案。而且，它们易于浏览、适于分享、用途广泛。

图片来源：Urban Ministries of Durham

图片来源：The Clymb

要开始运用卡片设计，可以从学习卡片设计的基础开始，请看UX Pin的《2015-2016的网页设计趋势手册》。

你还得遵循《有效的卡片式设计完全指南》中的这7条最佳用法：

**留白。**运用足够的边界和边距来避免杂乱。
**一张卡片一件事。**卡片能简化你的网站结构。不要让每张卡片过于复杂，破坏了这层基础。
**合适的图片。**卡片中的图总是比较小，要确保图片清晰、裁剪得当，适合相应的场景。
**简洁的字体。**由于文字也很小，简洁的字体最易辨识。选用简洁优美的字体，避免使用装饰性字体。
**发挥创意。**付出额外的努力让它别具一格，使用诸如动画效果、视频、圆角、或新颖的配色。
**使用开放的栅格。**标准的栅格有助于保持间距一致，同时包容各种尺寸和断点。
**贯彻菲兹定律。**正如我们在《交互设计最佳实践》中所描述的，菲兹定律（同样适用于卡片）建议整个卡片都可以点击——而不仅仅是上面的文字或图片。这使得用户操作更轻松。

浅色与深色卡片

首先要面临的抉择，是使用浅色还是深色的配色。两种各有利弊；白色或浅色的配色最普遍，但深色在移动应用上正在变得流行。

图片来源：Dribbble

Dribbble的卡片很容易分辨、排列、和点击，让人了解某个项目的详细信息。它的设计在浅色背景上使用了白色的卡片，每张图片下方有个内容区域显示作品。浅色在桌面端表现尤其优秀，对于眼睛很友好。

图片来源：SB Joinery

SB Joinery则选用了深色的配色——在深色背景上使用反白文字——并在图片上叠加了颜色，让视觉重心停留在文字和幽灵按钮上。弹出菜单同样使用了深色主题。得益于粗字体和高对比度的色彩，深色风格的卡片易读性强，极其实用。

鲜艳的配色

卡片式设计的运用主要受Material Design的影响——好的影响。设计风格强调移动端的可用性，借扁平化设计和极简风格之所长，遵循一套用户日益习惯的美学风格和技巧。

这种风格吸收了鲜艳、高饱和的配色，从蓝色到绿色、红色。虽然不是一定要遵循这些色彩建议，但这是个好主意。加入大胆、明亮的配色，能够创造重点和顺畅的体验。

图片来源：Helbak

如何充分利用饱和色？

用在页头、按钮和行动指令元素上。
作为一种有含义的背景元素使用——例如不同类型的卡片使用不同颜色。（就像Helbak.的案例）请注意，即使是柔和色和浅色也能美妙地套用这种方式。
将色彩用于主要的文字元素，提升可读性。
用鲜艳的色彩叠加在图片上，或使用双色渐变的技巧来引导用户浏览卡片。

用于强调的颜色

最后，大胆的颜色选择，是一种强调特定元素的手段。例如，彩色元素能打破视觉单一，促进交互行为。

图片来源：Mayors Challenge 2016

The Mayors Challenge的设计充分运用了material design的概念，却没有做出Google产品的感觉。颜色鲜艳而明亮，同时卡片在某种程度上却非常简单和“不明确”。图标、文字和链接中都有鲜艳色彩，所有这些暗示，都在引导用户在网站上进行操作。

关于卡片式界面设计有一种批判的声音，它使各种元素看起来过于相似了——所以需要挥洒创意、打破陈规。

总结

色彩正是让卡片式设计独具一格的因素。选择所用技巧时，要考虑色彩如何最好地与品牌相结合，并为用户服务。

要产生最佳效果，就要带着特定目的运用色彩，通过设计吸引用户，促使他们采取行动。无论是使用浅色还是深色，或者是鲜艳色彩和流行混搭，色彩都能影响用户对于设计的感知和操作方式。

原文链接：https://studio.uxpin.com/blog/use-color-to-up-the-ante-on-your-ui-cards/

作者信息： Carrie Cousins Carrie Cousins has more than 10 years experience in the media industry, including design, editing, and writing for print and online publications. Carrie is also a sports fanatic and spends way too much time planning football and basketball trips and obsessing over stats.

博客与写作工具

hi@victor42.work (Victor42) — Thu, 24 Mar 2016 00:09:07 +0000

广告文如期而至，今天来介绍一下我使用的markdown写作工具——MarkEditor。作为书写工具，对我而言最重要的意义就是博客写作。大家不妨先听我唠叨一段我博客的历史，然后你们会明白我的选择。小小透露一下，文末有限时优惠噢！

无聊是第一生产力

这个博客的诞生，完全不是出于什么人生大计，纯粹就是无聊。早在大学期间，我就开始写点小日记，记录一些鸡毛蒜皮的小事，今天又骑车去哪逛了一圈、期末高数又挂了之类（哎我为什么要说又呢）。内容的形式逐渐分化，开始产生一些固定栏目：旅游照片、生活趣事集锦、影评书评、梦中神奇经历、还写过几篇矫情的微型小说。如今这些都原封不动保留着，偶尔翻一翻，也算见证一下当时的青葱岁月。直到大学毕业，我都是直接在博客平台里写，用的是哪家门户已经不记得了，反正纯粹是当作私人日记本在用，访客寥寥。

免不了要走上折腾的道路

毕业一年左右，朋友们说，作为设计师，怎能没有个人网站呢。那时的做法很偷懒，找个相册网站，把作品往上面一扔，博客那边再加个主导航外链。朋友说这也太low了，既然你会点前端，搭个wordpress啊。找了一圈模版，发现都不太符合我的要求。以博客为主的，作品展示效果不好；以作品为主的，文章往往藏得很深。作品反映的是身为设计师的我，而文章更接近完整的我，不能喧宾夺主。

没办法，只好自己卷起袖管改代码，在朋友的指导下理解了域名、空间、独立博客之间的关系，第一个独立博客搭起来了。我还清楚记得第一版的样子，首页有一张大大的海星特写，背后是沙滩与海洋。从中取了天蓝、明黄和咖啡色，作为博客的主要配色。遗憾的是当时没有备份意识，早期的几版博客模版都被彻底覆盖了，什么也没留下。只能找到最后一版wordpress博客的主页，贴出来供大家吐吐槽：

不能忘了，写作是初衷

模板一套又一套地改，从别人的独立博客学到了许多技术知识。这些博客往往有个特点，翻它早期的文章，可以看到一些生活和感悟，后来就逐渐变成纯技术博客了。

我不想那样。

我花了太多心思在文章的展示上，却从没重视过写作的过程。台前与幕后，写博客的初衷是什么？让别人看得开心，还是自己写得开心。如果非要选一个，我觉得是后者。失去兴趣的写作，无论如何也不可能坚持将近10年。技术博客之所以改变方向，也必然是博主的兴趣转移到了技术上，兴趣使然，自己喜欢就好。

尊重写作本身

虽然爱好和意志力有不可否认的作用，但一个舒适的写作环境也有积极的意义。和文字打了这么多年的交道，却忽略了一个显而易见的问题：为什么非得用这个来写？相当长一段时间里，我只在两个地方码字：Word和wordpress，只能说它们名字起得好，直击本质，让人潜意识觉得不需要其他的选择。

当然了，并非真的不需要。

最理想的写作环境是一整套体验，需要各方面的支持。手边要有一杯温水，喝水的间隙时常能产生灵感；背后要有一个厚度适中的靠垫；要有舒缓心神的音乐，或者大自然的声音；最好还能有微凉的轻风让人保持清醒；当然，专业的写作工具也是必须的，让人只关心内容，不必去想大标题用24号还是21号、宋体还是黑体。

Markdown就是这样一种格式，可塑性强，放之四海皆准。除此之外，编辑器更加功不可没。把写作想象成庄园里的午后，与某位远方来客喝茶闲谈，那编辑器就要起到侍从的作用。它得通晓十八般武艺，“手机拍照插入文中”、“生成图片分享全文”这样的事情，肯定不能劳烦你亲自动手。同时又要保持缄默，按下全屏快捷键，世界只剩思想，其他一概遁入阴影，等待召唤。

MarkEditor

能够做到召之即来挥之即去的写作工具已不在少数，但在多才多艺方面，MarkEditor绝对算是个中翘楚。功能强大的意义在于，不必写作中途费一番周折上传图片，也不必为了回顾某个章节翻遍整篇长文。因为做这些事情，思绪会被打断，这并非简洁前卫的UI能够弥补。若要追求流畅的写作体验，该简洁的其实是输入内容的过程，并不是编辑器的功能。

这就是MarkEditor的第一印象，相较于它丰富的功能，界面已经极其克制和朴素了。你可以不去管那些附加功能，放手开始写作，一样的简单清净。你也可以仔细探索一番，发掘它的无穷潜力。MarkEditor的自由化程度极高，众多小功能都不是花瓶玩物，而是些杀手级的功能。有没有想过？链接能直接生成二维码图片，插入文中。下面列举一些让我感到惊喜的功能，逐一演示：

工作目录

许多Markdown编辑器都只能设置一个工作目录。MarkEditor可以设置几个常用工作路径，通过快捷键召唤出工作目录窗口。同时处理多份文档时极其有用。

值得一提的是，每个工作目录还有些选项能独立设置。我的博客文件夹有多个日志分类，我可以把目录设成树状结构展示，能够操作整个目录下的文章和图片。

而用来写工作周报的目录只有一层，就比较适合简洁风格，只显示文章，忽略其他文件类型。

生成二维码

文章中需要插入二维码，便于PC端读者浏览某个H5页面。以往碰到这种情况是很头疼的，切出去打开浏览器，用chrome插件或某个网页工具来生成，然后再下载、插入文中。

MarkEditor考虑了这种情况，快捷键呼出二维码窗口，粘贴内容，直接就能生成了。

临时插入手机照片

窗台上飞来一只漂亮的鸟，想拍下来发到博客上，又要大动干戈一番。要设法把照片同步到电脑上，再拖到文章中。

在这里就要方便不少，激活插图窗口，手机扫个码，拍照上传，完事。当然还可以从相册选取图片。

![iPhone照片选择界面，提供拍照、从相册选取和更多选项三个图片插入方式](https://cdn.victor42.work/posts/2016-03/03-23/2016-03-23 15.35.04.png)

改变图片尺寸

插入文中的图片可以很方便地再手动缩小尺寸，拖动一个滑块就行，MarkEditor官网的介绍视频中有这个操作，给我极其深刻印象深刻。

打字机式滚动

这个功能虽然不是独家，却还是不多见的。每回车一次，就会滚动画面，让光标所在行移到屏幕中央。

很像打字机，这是对眼睛最大的善意。

文章内容索引

长文会有比较复杂的结构，主副标题能多达3级甚至4级。如果要回顾之前某个章节的内容，做个呼应，这时翻滚动条也要翻半天。

文章内容索引就能很好地解决这个问题，这是天然的大纲结构，便于查找的同时，也能帮助自己梳理逻辑。

生成长图

发长微博时这个就特别有用了。如你所见，除了长图，还可以导出成许多其他形式，用于不同的场合。

长微博图片对移动端做了优化，清晰美观大方。

历史版本

自带历史版本功能，如果你不用dropbox或坚果云，那这个功能意义重大。而且这个历史版本可比dropbox的详细多了，能看到历史版本与当前版本的具体差异，代码对比功能的妙用。

灵活的自定义皮肤

MarkEditor有意思的地方是直接把UI的配色表放出来了，几乎所有能看到的元素，都可以改颜色。

我就自己改了个夜间模式主题，绿色链接，紫色图片，标题和正文的颜色略微改柔和了一点。如果你喜欢，可以在下面链接中复制我的配色表。

http://pan.baidu.com/s/1kUbUYb1

Todo list

无序列表还能当Todo list用，鼠标点击直接标记完成/未完成，我平时工作就是用的这个来记录一些临时需求。

同步到第三方云服务商

这是个重磅功能，也是解决图片存储问题的关键所在，真正把图片存储和写作集中到一个地方了。

图片可以同步到第三方云服务商，例如七牛、亚马逊云，也可以同步到Farbox自家服务器。文章发布之后，图片自动转为相应的云端地址。除了写文章，你什么都不用做。

总结

这款写作工具还有大量待发掘的高级功能，比如可以自定义markdown的转译语法，怎么用就取决于你的想象力了。MarkEditor与同门产品Farbox配合，会让博客的管理非常省心。

如果要为MarkEditor找一个关键词，我觉得应该是：自由。把整个博客都放在自己的硬盘上，能获得最大限度的自由。无论是博客还是编辑器本身，都能灵活调整迎合自己的习惯与喜好。

在重要且常用的工具上，定制化程度高的产品有它无可替代的优势。一番悉心调教后，它会成为你最得力的助手。

还有最亲民的一点，它也提供windows版。

最后附上MarkEditor的官网，可以先下载体验一下，其中部分功能需要购买才能激活：

http://markeditor.com/app/markeditor

优惠购买【优惠已结束】

终于到发福利的时刻啦，我向MarkEditor作者讨来了独家优惠。首先请关注微信公众号【可乐橙】，并发送“优惠”2字。使用优惠码购买，前3名享受3折优惠，前30名5折，之后到2016-3-28都是7折。

点击购买按钮后，会看到实际购买价格。**一定记得填入优惠码噢！！因为License激活后是无法退款的。**要是一激动原价买下了，我也无能为力。

¯\_( ツ )_/¯

Harry Beck，伦敦地铁图背后的天才设计师

hi@victor42.work (Victor42) — Sun, 20 Mar 2016 12:33:50 +0000

[国外设计第126期]

译者注：在上一期《11名顶尖设计师的职业忠告》中，我们提到过伦敦地铁图的设计，这是人们首次通过设计抽象化绘制出的地图，将错综复杂的系统变成了易于理解的网络。关于这个话题，我意犹未尽，本期带来这篇地铁图背后的故事，还有它的传奇作者。

© Ken Garland，由伦敦交通博物馆提供

Harry Beck的肖像并没有出现在任何硬币或邮票上，但他的影响遍及伦敦。Beck生于1902年，是一名英国的工程测绘员，他创作的这幅激进的新伦敦地铁图，在20世纪30年代初掀起了一场小小的革命。

他的这套由色彩区分的直线图，起初得到了交管局的理解和欢迎，然后迅速在伦敦的市民中展现出它的人气。如今，它被证明是世上最易识别的和最有影响力的交通地图，在全球的主要城市掀起了类似设计的狂潮。

伦敦市在他死后授予他一副蓝色牌匾，那是一个荣誉头衔，庆祝这幅地图诞辰80周年。正如牌匾上的文字所言，它改变了人们流动的方式，以此向他致以崇高的敬意。此举使Beck的遗产再次收到关注，但它背后的作者却依然面貌模糊。

伦敦地铁图，1908-2012

“Beck的地图是一场简洁的革命，”在周一的揭幕仪式、同时也是伦敦地铁运行150周年纪念上，Sam Mullins，伦敦交通博物馆的主任说：“它已经成为伦敦的一种象征，影响着全球众多的地铁图设计，同时也启发了当时众多的艺术家与设计师。”

在Beck的设计出现之前，伦敦地铁图的易读性近似于一碗意大利面

在Beck的设计出现之前，伦敦地铁图的易读性近似于一碗意大利面。实际上，直到1908年，所有地铁线路才开始绘制在一张图上；而在那之前，每条线路都有一本自己的小册子。将所有的线路结合起来，目的在于彰显地铁系统的广阔和便捷，虽然伦敦地铁的快速扩张可能导致无法预见的后果。

“当时有些评论指出，地图已经越变越复杂，因为伦敦地铁线路的数量正在增加，”Anna Renton，伦敦交通博物馆的高级馆长说：“随着地铁线路的开发和扩张，地图变得拥挤不堪，尤其体现在口袋书的版本上。”

1908年的伦敦地铁图，来自伦敦交通博物馆

在1908年的版本中，每个站点都按照真实地理比例来放置，导致伦敦市中心被一大堆杂乱的点淹没，而城郊只有少量斑点。换乘的标识也不清晰，每条线路都画成了一条代表它真实走向的曲线，标出了它上方的街道和十字路口。就像一只鸟的X光片，是一种极其忠实的呈现。但对于乘客，它却让人彻底晕头转向。

1931年，变革即将到来，Beck开始制作他的原型设计。我们并不清楚是什么启发了他，让他承接了这个项目；据Renton说，他并没有得到明确的委任，更多是在待业状态的闲暇时间进行设计。

“它简直是Beck独具匠心的象征，发现了问题，并找到了解决方法，而不仅仅是对于大众需求的反应”，Renton说。从那之后，Beck在伦敦地铁标识办公室已经担任了6年的工程测绘员——这段经历可能对他的地图产生了简洁的机械美学影响。

易读性VS真实性

一开始，Beck把地图现存的蜿蜒曲折的弧线改成直线——水平、垂直和45度角。他还扭曲了比例，把站台等距放置，移除了上方的街道网络。得到了稀疏的、类似电路板的设计，为了易读性，抛弃了精确的地理关系。

Ken Garland，一名英国设计师，也是Beck的传记作者。他说这幅地图最创新的特征，是它的“放大镜效果”，不匀称地放大了伦敦市中心的区域。在与The Verge的一次邮件访谈中，Garland说这种手法“恰如其分”地呈现了区域内高密度的地铁站分布，以一种更加优美的方式，让乘客们理解快速发展的城市丛林。

这种放大手法承载着一种潜意识的含义，而且，它让伦敦的城郊看起来更接近市区的商业中心。“这些郊区基本上就是兴起于地铁的扩张，”Renton说，“让它们看起来离市中心更近，向人们展示从城郊去市区有多么方便，这幅地图会促使更多人搬到郊区去。”

Harry Beck的地铁图设计，1993，来自伦敦交通博物馆

地铁当局却不怎么热衷于这个点子。宣传官员起初嘲笑Beck的提案，担心这套地图过于离经叛道，最后还是同意在1933年印制一套口袋书版本。同年3月，它以一张海报的形式发布，不久之后便成为了全伦敦的新标准。它也启发了世界各地的类似设计，在1939年，悉尼率先采用了它自己的Beck风格交通图。

据说，Beck最初的设计只获得了5基尼——大约5.25英镑，或者约为8美元。接下来的20年内，他继续设计伦敦地铁图，为新开辟的线路修改地图，直到1959年，他的公寓仍然简陋不堪。

Beck的伦敦地铁生涯在动荡中结束

“伦敦交通部里没有人说过，他们到底为什么舍弃的Beck的技术。”Garland努力回想，没人提及当时他与Harold F. Hutchison的故事，那是当时的宣传官员，据报道两者理念不合。Beck离开了，他了解到自己的地图将会被Hutchison的版本取代——一套寻求接纳Beck美学，同时保留更多精确地理关系的设计——最终他终身致力于在伦敦印刷大学中教授文字排印。

“我觉得Beck当时肯定相当难过，因为自己的设计被盗用而离开，”Renton说：“由于他从没被正式聘用过。这段伦敦地铁工作经历，我认为是悲剧收场了。”

Beck为巴黎地铁设计的提案，1951年，来自伦敦交通博物馆

直到1974年Beck逝世，他仍在继续提交大胆的提案——其中包括极具先见之明的巴黎地铁图（上图），还有一套结合了伦敦地面与地下的交通图——虽然在他有生之年没有任何一幅被实现了。

即使伦敦地铁已经扩张成了今天这株庞然大物，它的地图仍然在坚定不移地遵循Beck早在80年前提出的设计原则。

“这个概念很明显仍然归功于他，”Renton说：“我希望这份功劳能被公正地记在他身上。”

原文链接：http://www.theverge.com/2013/3/29/4160028/harry-beck-designer-of-iconic-london-underground-map

作者信息： Amar Toor Amar joined The Verge in April 2012. He previously worked as an editor for Engadget, and before that, as a writer for Switched. He has also worked as a consultant at the OECD in Paris and at Miramax in Santa Monica. He’s currently based in Paris.

11名顶尖设计师的职业忠告

hi@victor42.work (Victor42) — Sun, 13 Mar 2016 12:07:00 +0000

[国外设计第125期]

优秀的设计师活到老学到老。

在Springboard，我们把用户体验和数据科学方面的导师与学员相互组队，这对于聆听前辈的建议有重大意义。

我们整合了许多顶尖从业者的建议，用来编写我们的用户体验职业指南。

因此，我们采访了11位了不起的用户体验设计师，问他们从何处获得灵感，有什么用户体验方面的建议要给其他从业者。

我们与UXPin团队合作，为你带来他们的深刻见解。

1. Paul Boag

Paul是网页设计机构Headscape的联合创始人（他们的客户包括Nestle、Macmillan和一些英国的大学），他在互联网行业已经工作了20年以上，同时是一名多产的作者和演讲者。

设计启迪

我最喜欢的设计是原版的伦敦地铁图。

它打破常规，具有非凡的独创性。它抛弃了按照真实比例表现距离和位置的惯例。破除这些约束后，就能够为一个复杂的网络创造出一种简洁的表现形式。于我而言，这就是优秀设计的全部——从另一个角度看待复杂，然后将其简化。

职业建议

老实说，我会避免给当年的我提任何建议，因为我知道自己听不进去！

即使我给出建议，若没有亲身体验和探索，还是无法收获这些价值。犯错是学习任何事物的最佳方法，所以我不会剥夺年轻的自己这样的机会。温斯顿丘吉尔说过：“成功就是不断失败，而不丧失热情。”

不要听别人的，自己犯错跌倒，起身再来过。

2. Eva Kaniasty

Eva在波士顿经营着自己的公司（Red Pill UX），会定期举办UXPA，她在其中担任会长。

设计启迪

我最近发现了Duolingo，一个在线语言学习平台。

我有一万个喜爱它用户体验的理由……它界面非常简单，欢乐动人。许多应用都试图融合游戏化和社区元素，因为这么做非常酷炫，结果往往给人画蛇添足的感觉。Duolingo在游戏元素上却运用地恰到好处，多种多样的课程令用户欲罢不能。

我还喜欢它的沉浸式语言学习部分，用户在此协作翻译。作为语言学习的固有阶段，记忆和背诵是相当枯燥的，很显然Duolingo的员工们经过了深思熟虑，试图简化这项挑战。

我时常感觉我们已经达到了某个阶段，应该重视用户应用的革新，能看到如此新颖绝妙的产品真是太棒了。

职业建议

要知道，在用户体验这样的协作型职业中，人比技能更重要。如果你在研究和设计方面有天赋，你总能及时掌握相应技能。但是，人际关系决定着你职业生涯的成败。

当我第一次转行进入科技行业时，我知道只有少数人在做着同样的事情。然后我去Bentley University学习人机工程专业，这向我敞开了一个全新的世界。当然，其中绝大部分都是学习，但最终积累的人脉也同样有价值。

如今，我通过本地协会UX Professionals Association继续投身这行业。这个协会则愈发重要了，我开始开展独立咨询业务。尽可能多地结识同样热衷于用户体验的人，请他们提出建议。

3. Mike Kus

Mike从平面设计起家，然后转行做网页设计，与Twitter、Microsoft和Mailchimp这些公司合作过，创造形式与功能兼具的用户体验。

设计启迪

Hipopotam Studio，我喜欢这个网站的界面，满满的创意和趣味。

职业建议

学会把UI潮流和实用的UI设计惯例区分开。因为就算某个趋势正在广泛运用，也不代表它就是最佳方案。

4. Jack Zerby

Jack是Flavors.me和Goodsie的联合创始人，之前也当过Vimeo的设计总监。他说自己深受父亲的影响，当他高中时第一次启动Photoshop，就被设计深深吸引。如今，Workshop中能看到他的身影——一个有干货的青年企业家养成计划。

设计启迪

近来我最喜欢的产品体验，来自于应用ParkMobile。

不用准备零钱、等待找零，只要按照停车计时表支付就行了。我现在只需要输入计时表上的数字，设定想要停的时长，然后付款。时间快到时还会短信通知我，如果需要我还能追加停车费。

流畅无障碍。

职业建议

要时刻考虑最终结果，还有用户或顾客所处的情景。他们要完成什么任务，身处什么样的情景。

例如，我想在车上安装一个自行车支架，我进入了制造商的网站。我的目标就是尽快成功装上支架，然后上路。在这个情景中，我站在车外的骄阳下，孩子们正在大哭，因为他们现在就想去公园。

设计时心中要有这样的考量，要了解用户。就像要达到成功的营销目的，就要理解他们的痛点、问题、失望，然后用他们的口吻与之交流。

不要想当然，成为自大的牺牲品（我们往往如此）。

5. Laura Klein

Laura在硅谷当了超过15年的工程师和设计师。她的目标就是帮助初创企业了解他们的顾客，让他们加速创造出更好的产品。她写的书和她的著名设计博客Users Know教导产品的创造者，在研究和设计方面应该做哪些工作。

设计启迪

我们只会注意到令人厌烦的设计，我想这就是用户体验设计师的诅咒。也可能只有我是这样。不论怎样，我一直都十分热爱那些简单的设计，与生活高度融合，以至于我不会注意到。

职业建议

你需要两名导师。

首先是某位在你关注的领域中有影响力的前辈。他们能帮助你树立观念，告诉你需要哪些技能，才能被他们那样的人录用。

另一位导师应该要比你年长几岁。他们会告诉你要如何准备，来应对即将到来的工作。我不清楚如今科技行业新人的生活状态，但从事了几年的人会有深刻的见解。

所以你需要两个人：一个帮助你得到下一份工作，另一个帮助你做好这份工作。

6. Joshua Garity

Joshua可谓是设计心理学家和品牌战略家，他与Wendy’s和纽约时报这样的公司合作过，帮助他们与顾客建立连接，提高他们的收入。可以在他的博客、Twitter和他经营的公司Candorem看到他的相关言论。

设计启迪

用户体验围绕着我们，它早已延伸到数字网络之外。从交互设计场景和具体媒介或平台的角度看，用户体验作为一种标志，一定会被看见。

举个例子，来看看我们通常意义上的汽车。

假定我们在车里多数时间都是在驾驶。当我们驾驶时，主要精力都会放在前方道路上，至少我希望如此。保持车道，不超速，留意其他车、行人或动物。然后我们加入了收音机和空调。视线哪怕是短暂偏离道路看向别处，都可能对路上的每个人造成严重危害。那么，汽车制造商设计控制台时，为什么还要考虑这个？其中许多都有强大功能，众多选项、按钮、旋钮甚至触摸屏，用来控制温度或电台。

如果用户体验关乎交互情景，那我们就得着眼于简化体验，保障用户主要注意力不受负面干扰。

好的设计能引导用户，无需多想。困惑是最大的敌人。

职业建议

永不知足，活在当下。不要被某个标签或理想定死了。向所有人和事物寻求答案，即使他们与当前问题看似毫不相干。你渴望的一切成就都能实现。

7. Kevin M. Hoffman

在Seven Heads Design，Kevin“致力于解决你自己都没意识到的问题”——不仅仅包括人与电脑的交互，也包括人与人之间。他的客户有哈佛大学、任天堂和MTV。可以在他的网站和Twitter上找到他。

设计启迪

我非常喜欢原版Android、或者说“Google Play”版Android的整体体验，最近更是爱上了Android Wear。

我尝试使用Android已经有一段时间了，那时候“Kit Kat”版本的软件和Nexus 5刚刚出来，从那以后我就没有换回去过。我觉得许多界面的设计都非常棒，但我最喜欢的还是它的预期和微交互部分，比如通知的几种操作方式，还有与日程需求的无缝整合。

我第一次意识到，原来要告知别人我会议要迟到一会儿，两次点击就可以了，我当时觉得“哇！这太有用了。”最近，我在试用Android Wear手表，它只用了5天就完全自然地融入了我的生活。现在，我只要时常看看手表，基本能从社交信息中抽身了，不用从口袋掏出手机查看和操作通知。

我也非常期盼Android Auto。我们能看到下一版iOS是什么样子，但我想我暂时不会换回去了。

职业建议

“嘿，年轻时的我！

你会花些时间构思长期目标，这是很好的练习。你也会思考理想的工作、雇主、生活方式、家庭，等等。但在现实中，追寻这些事情难以令你满足，绝不能坐等它们到来。

要过好眼下的生活。

最大的乐趣就在现实生活中，有时候会面对一些微小（有时不小）的抉择，是还是否。你的目标应当是更善于做决策，对你的人生产生巨大影响，而不是某个特定理想。

还要尽量明白一点，自我怀疑虽然使你谦卑，但没有其他好处了。别对自己太认真了。多做练习，小伙子，看你把今天的我变成了什么样？还有，不要滥用‘还有’这个词。”

8. Lis Hubert

Lis和许多大大小小的公司合作过，共同创造科技产品——比如espnw.com和nba.com，永远地改变了人们的生活。她同时也是Future Insights大会的咨询委员会成员。

设计启迪

我近来最大的启发，来自于大城市的公共空间设计，例如我居住的纽约。

不容忽视的是，不仅像Central Park这样的大空间设计得非常棒，而且目力所及之处的小空间都极其便捷。我发现自己沉迷于观察人们使用公园、运动场和球场的方式。我向这个生态系统寻求灵感，是因为如果要使这些地方如此成功，设计师必须以如此庞大、复杂的人群的体验为目标，让他们享受此地，而这是一个眼花缭乱的拥挤场所。

这点于我而言，就是建筑的用户体验设计。让人们在此穿梭，看他们在空间中怎样做决策，最终达到令用户、场地主人和设计师都满意的预期结果。

职业建议

冷静，初学者们。

在我们这个行业中，我们非常了解自己工作的重要性，也希望其他所有人都了解和“理解”。所以我们总是竭尽全力想让大家领会其意义。

当然，结果会令人心力憔悴垂头丧气。但我意识到，如此努力地向外行灌输我们的知识，并没那么重要。据我了解，公司、科技团队、或其他任何人，能否“领悟”我们工作的最深层意义，真的无关紧要。

最重要的，就对自己掌控范围内的事充满热情。尽你的职责（有必要就多做一点），让热情绽放，享受你的征途。

9. Matt Hamm

Matt是英国一家工作室Supereight Studio的联合创始人，从1998年起就开始在网络上做设计了。可以在这里看到它他的作品，或者来Twitter看看他的相关言论。

设计启迪

Dropbox在用户体验方面持续领先——使用非常顺畅。

优秀的用户体验设计应当是隐形的。Dropbox许多地方令我印象深刻：欢迎界面的体验，注重细节，独立思考而非照搬设计模式，使它完全符合直觉。

职业建议

把一切文档化！

精心整理一份用户体验设计参考文档，以供浏览，整理过程中就能帮助你学习和解决问题。记得也要写下真实世界的体验，这些模式也可以纳入文档。

10. Pavel Macek

Pavel目前是Slack的一名产品设计师，他说自己“非常在乎别人”，这也体现在了他的工作中——设计和构建大众喜爱的东西。

设计启迪

对我来说，用户体验设计的一个绝佳案例就是Technics SL-1200型唱机转盘，它已经卖了35年，没有做过什么大调整。而且依然在DJ、制作人和音乐家群体中广受欢迎。

它展现了最佳的功能设计，还结合了体贴到位的设计细节。我认为用户体验设计师总是会忽略他们的部分职责，那就是确保设计执行到位，这才是最终决定产品成败的因素。

职业建议

不要在设计方法论和设计模式中迷失自我。学习设计方式、拥有严格的设计流程固然重要，但出发点往往非常简单：我在为谁设计？他想要达成什么目的？如何帮助他达成目标？

然后就只需要不断迭代，研究哪些有用、哪些没用。

11. Robert Fabricant

Robert专门从事医疗保健和社会创新方面的设计。最近他发起了Masiluleke项目，在南非开创了运用移动互联网技术对抗艾滋病毒的先河。他之前在名扬四海的设计机构frog design就职。他还开课、演讲和写作。

设计启迪

纽约地铁系统给我带来持续不断的灵感、激励和挑战，这是一种惊人的多层面用户体验。

我乘坐地铁已经（至少）45年了。如果不是生活在它当中，并且生活相当长的时间，你就不可能真正了解和欣赏某种体验的价值。

有太多我们赞美的用户体验设计稍纵即逝——我们手机里安装的应用可能待不了几个月。而地铁就在这儿，咫尺间、人潮流动、机器运转，都能反映它的进步。这种设计是一项缓慢而艰巨的工程。

但变化是永恒的。作为纽约的居民，很少有比地铁更值得“学习”的系统了。但这种体验在何处开始，何时结束？它并不只限于站台、车厢和闸机范围内。

近几年，地铁系统已经成为一种实验平台，既有授权许可的项目，也有即兴创作。最近，巨大的触摸显示屏开始出现在Union Square站。第一次看人们操作它们，揭开了一种崭新的体验，将这座伟大城市（没错，这就是我的家乡）的居民们连接起来，着实令人着迷。

作为用户体验设计师，我们应当在大尺度上思考和创造体验。还有什么比一座城市更合适？在这里，数据和流动性相互交错，我们得以不断探索（和欣赏）自己与周边人的体验的交集。

职业建议

我很喜欢和设计师们谈论第一次展示作品的时刻，希望人们探索、体验、喜欢（但愿如此）你的设计。

在这个时刻，甚至在别人被这件作品吸引之前，你都会对它带着某种偏好。就像古语说的“茅塞顿开”。你忽然看到（并了解到）有太多事情超出了你的理解、计划和直觉。

这些时刻很宝贵——极其宝贵——同时也令设计师感到羞耻，无论你经验多么丰富。

设计在比较中才显露其价值，在项目中尽可能多地创造这样的时刻。你需要的并不是同意！

在frog工作了13年，我很庆幸能在不同的团队中一再上演那种情形——与设计师群体近距离接触。

要衡量质量，一直以来都只能靠作品的反馈——看它能给用户带来多大的吸引、愉悦和帮助。

行为是我们的媒介，牢记这一点。

为虚拟现实而设计

hi@victor42.work (Victor42) — Sun, 06 Mar 2016 00:36:00 +0000

[国外设计第124期]

虚拟现实，这种体验自从80年代中期就出现了，但似乎科技总是在拖后腿。终于，智能手机和相关科技的发展，使虚拟现实的惊人潜力触手可及。如今，我们正处于一场虚拟现实的革命当中。

从价值上千美元的高端平台，到可运行在智能手机上的系统，虚拟现实的设计仅仅展露了其冰山一角。从根本上说，它仍是一片蛮荒，亟待崭新概念的探索开垦，Google敲开了这扇大门。

去年，他们开始推出Google Cardboard：一种简单、廉价的方式，让任何拥有智能手机的人都可以体验虚拟现实。只要下载Cardboard应用，购买（或者自己动手制作）Cardboard眼镜，你就跻身虚拟人群了。想要开发自己的应用？它还提供了SDK。然后，2015年初，关于Cardboard还发布了一系列成文的设计指南。其中细节树立了基本原则，例如“如何避免晕动症”和“如果通过固定物体使用户感觉脚踏实地”。不过，还有什么方法能比亲自体验一遍能更好地教育和启发虚拟现实设计师呢？

在Google 2015年的I/O大会上，Cardboard团队发起了Cardboard Design Lab：基于虚拟现实的交互式“指南应用”，它诠释了早些时候定下的标准和原则。Google与ustwo合作，不仅仅为了设计和开发相关体验，同时也是一次试水，通过路演亲自验证这些原则。我们的共同目标是帮助每个对虚拟现实设计与开发感兴趣的人，拓宽他们的基础面，揭示更多可（待）探索的领域。

在Design Lab内部，这些原则被分类成相互影响的章节，叫做“基础”和“沉浸”。基础部分的关注点，在于教导设计师基本的虚拟现实准则，或多或少都是宇宙通行的规则。沉浸部分则更具探索性，无论在理论上，还是Cardboard Design Lab本身的体验上。首先，我们来接触其中一些基础原则：

在风车脚下四下环顾时，锁定用户的视野，印证了头部追踪的重要性。

头部追踪

如果用户在虚拟现实环境中移动头部，它应当在应用中有所反映，这是老生常谈了。“虚拟现实设计中最重要的规则，就是时刻保持头部追踪。应用中绝不能停止追踪用户的头部位置运动。即使是短暂的停顿，也会导致用户感到不适。”这项原则，还有“使用恒定的低速率”和“让用户在虚拟环境中脚踏实地”，都是虚拟现实体验中必备的基本原则。

适当制造运动体验，通过矿车移动我们可以看到正面与反面例子。

加速度

让用户在虚拟环境中穿行是非常微妙的，因为它是人类感知空间位置的最基本方式。如果你站着不动，因为万有引力存在会导致一个加速度，这决定了你的站立方向。完全忽略加速度或明显的匀速都是不自然的。挑战在于，要么找到正确的加速度数值，或者完全用某种其他事物代替加速度的感觉。在这版Cardboard Design Lab中，我们的团队实验了83毫秒的加速度，之后大概3米每秒的匀速运动，再是266毫秒的减速。我们觉得这个方案不错，但作为Design Lab的一项原则，我们希望能从设计师群体中获得一些反馈。

引爆气球时，有和没有十字星的效果差别。

利用十字星

因为多数虚拟现实系统无法追踪眼球位置（目前如此），无法告诉应用，用户当前视线停留在哪里。所以，十字星能帮助应用标示出画面中心点。在上面的例子中，我们让用户在没有十字星的帮助下尝试引爆气球，结果他们在找到窍门之前，似乎要偏离了目标好几次。我们之前在虚拟现实中从没见过十字星的运用，但这就是个绝佳的例子，如此微不足道的东西为设计师打开了一扇大门，创造更好的体验。

使用十字星的目的，是让用户轻松意识到哪些物体是可以选中的，或者在菜单中快速浏览等等。我们很谨慎地不让十字星干涉应用的设计，有时候我们会将它隐藏不见，而在飞行员的版本中则保持极简样式和基本功能。设计师能以此为设计和迭代的基础，无论他们是要设计成十字、摄像机，还是其他一切他们认为有利于体验的物体。

理解了基础，设计师们就要进入到沉浸原则中。受旧金山北部Muir森林的启发，Design Lab的沉浸部分教了设计师们一些特定原则，虽然对于虚拟现实应用并非绝对必要，但仍然极力推荐，它们能尽可能为用户提供好的体验。下面的案例都是关于这些原则，我们觉得它们会随着时间推移剧烈变化：

运用比例

有许多方面致使虚拟现实有着相当特殊的体验，其中最引人注目的，是用户和周遭环境的比例变化产生的视觉冲击。构建Design Lab时，ustwo尝试了许多种不同比例，最终选定了你在上文中看到的视角，让人感觉到渺小，甚至卑微。因为沉浸原则的目的，就是激发情绪反应。我们觉得，让设计师们体验到周遭世界的宏大和广袤，有助于启动他们的想象力。

循着右耳的猫头鹰鸣叫，你就会发现一只猫头鹰站在枝头凝视你。

空间音效

3D和虚拟现实游戏中有个相当独特的概念，空间中的音效，在你周围环境中固定了声源的具体位置。所以从某物体传到你左侧的声音，在耳机中听起来像是来自左侧。在上面的例子中，用户听到猫头鹰的鸣叫，看向右侧，然后在相应位置发现了猫头鹰，正站在枝头凝视自己。虽然简单，但这一课告诉设计师，在虚拟现实的创造中，音效有着无尽的可能。

注视提示

注视提示的运用，对于刚开始设计虚拟现实的设计师而言，或许是个新概念，这也是我们非常期待随时间而演变的一项特性。注视提示基于用户视线方向，体验到相应反馈。这种体验可能表现得更为微妙，“悬停状态”，或者也可以基于事件触发，例如在恐怖游戏中身后涌出大量怪物。在我们为Cardboard Design Lab创造的案例中，注视满天星辰，会激活一个悬停状态的注视提示，显示出一系列的星座。

徒步达到山顶，达成最终目的，看到海上的日落。

赋予它美感

最后一条沉浸原则？那就是赋予它美感。注重创造物在视觉上的美感，有益于用户的沉浸式体验。穿过森林，在遍布课程的徒步旅行终点，呈现在用户眼前的是崖顶俯瞰大海的场景，让他们目睹日落。我们希望用户在开始自己的虚拟现实设计之旅前，有片刻的喘息，让灵感沉浸其中。

“我们的目的并非创造虚拟现实领域的圣经”，Toph Brown，ustwo的项目经理、Cardboard Design Lab项目成员说。“虚拟现实正在高速发展，而且这是一项团队运动——行业中的每个人都在一起努力，使得虚拟现实更易用、更有用。正因为如此，画一条分野线并且声明’就得这么做’是愚蠢的。同时我们认为有些观念已足够成熟，能让我们达成共识。通过Cardboard Design Lab，我们试图创造一种能够反映和验证这些观念的体验。我们希望设计师们接受它，以它为基础在虚拟现实世界中创造美。最棒的是我们才刚刚上路，还有许多等待发掘。”

Cardboard Design Lab项目最初的目的，不仅仅是一种可能性的案例，也是作为一种交互式学习体验，让设计师与开发者们能够接受我们的观念，继续前进打造他们自己的产品。这需要灵感的激发，需要交流，需要踏上虚拟现实的征程，创造出人们真正想要使用和体验的应用。今天是第一步，我们非常期待设计师群体的反馈，Google、ustwo和所有的虚拟现实设计师都能一起继续探索前路。

Cardboard Design Lab现在已经可以在Google Play Store下载了。

原文链接：https://ustwo.com/blog/designing-for-virtual-reality-google-cardboard/

作者信息： CASEY HOPKINS Casey is a curator of marketing, community and events at ustwo™. Hopeless geekette. Extreme baker. World traveler. Follow her on Twitter @caseyhopkins.

让你的Logo被采纳：8步优化设计流程

hi@victor42.work (Victor42) — Sun, 28 Feb 2016 02:10:00 +0000

[国外设计第123期]

在Dribbble上，品牌设计师只占少数。Dribbble社区的主导力量由界面、用户体验和动画的设计者构成。当我去年七月去波兰Gdańsk市参加第一届Dribbble Meetup时，我觉得会遇到一群类似的听众。确实，他们大多是自由职业网页设计师和跨界人士，多少都有被要求设计logo的经历。

不过，我决定不谈论如何创作一个好logo。你在网上可以找到许多文章，介绍经久不衰的logo看起来应该是什么样的，优秀logo有哪些核心特质。我重点关注的却是流程本身。

作为logo和品牌设计师，在第一个概念稿诞生前很长时间，我们的工作就已经开始了，并且在最终稿完成很久以后才真正结束。

我们的工作要求远不仅限于创意和技巧——它迫使我们同时身兼市场专员、战略家、心理学家、销售员、表演家和项目经理的职责。这非常困难，但也很激动人心，极具挑战！

我这篇文章的目的，在于帮助你重新思考（logo）设计流程。其中有些是我个人建议，还有一些则借鉴自世界知名的设计师。所有这些诀窍和技巧都经得起测试和验证，专为优化你的品牌建设（改造）项目流程而量身定制。

“顺便说一句，我还需要一个logo。”

Duang！你拿下了一个网页设计项目。一个新产品或服务即将在全球市场露面，他们需要你的创意援助。然后你向他们索要品牌指南，却得到回复，“噢，我们还没有logo。你能设计一个吗？”

迟疑片刻后（因为品牌设计并不是你的主业务），你回答，“好，当然可以！”

这个答案非常常见。客户总是不希望把一个项目分给多个设计师。但是，logo设计的流程有它自己的特点。它的产出不仅取决于logo多有意义、多优美，还有你的工作流程。

1. 解释你的设计流程

无论是个人客户还是机构，他们雇佣你时，他们也雇佣了你的工作流程。

我的工作流程

工作流程决定了能否做出好作品。这是你在职业生涯中构建的行为框架，并且会随每个项目而调整。

尽可能让你客户理解和信任这套流程。第一次会议时向他们展示*（当然，要视觉化）*，并且解释为何遵循它是如此重要。首次演示就要明确你将要交付的logo方案数量、修正和修改次数，还有付款和交付时间节点。

如果你把流程透明化，好的客户会尊重你的流程。

2. 向客户提供创意简报

在设计流程的这个环节，我的主要建议是多提问题。不要怕问东问西，即使是话题之外的事情。首次客户会议中，我通常这样开场：“我会提出许多问题。其中一些似乎与我们项目毫无关系，或者并不是设计师需要了解的。但所有的信息都至关重要。这有助于我创作出能够传达你们身份、直击顾客情感的特征形象。”

关于品牌的问题

你是谁？
你做的是什么，为什么？
你承诺给顾客带来什么？
你的独特卖点是什么（“我们是唯一[提供这项服务]的公司”）？
你有什么故事？
你期望的未来是怎样的？
你的竞争对手是谁？
谁喜欢或者可能会喜欢你，为什么？
你会不会影响顾客的生活方式，怎么做到？
你希望唤起顾客怎样的情感？

这其中有些问题很难立刻回答。让客户准备好答案发给你，别忘了提醒他们，回答也会是创意简报的一部分，没有它们你无法展开logo设计工作。

我有个简易模板，首次会议之后让客户填写，以便他们深入思考其中部分问题。（通常，这都伴随特殊的卖点——很难用一句话解释人们为何会选择你。）

如果想要进一步加深客户的参与度，可以发起一个小型的研讨会！

出于这个目的，我创造了一套品牌个性卡牌。它由24张卡片组成，正反面展示了24组对比鲜明的形容词，比如年轻/成熟、平和/桀骜、严肃/顽皮，等等。它有助于明确客户目标，他们希望顾客与品牌互动时产生怎样的核心感受。

3. 了解如何与创意型客户打交道

你是否经历过在你忙项目时客户坐在身边？我就有，幸运的是职业生涯中只有两三次。（就5年的工作室/机构经历而言，可以说我是个幸运儿。）这些是我们工作室的客户，所以我无法抗拒我的老板，并拒绝如此亲密无间地工作。没错，当客户在一天结束时离开办公室后，整个团队都为我鼓掌喝彩。不过这已经足够了，我可以再设立一条创意流程准则：在品牌创造过程中，尽可能让客户参与进来。确保你们相互理解，如果你所有的修改都在远程进行，这会有所帮助。

来自客户的一封邮件。相信我，其中附件真的是……“顶尖的”绘画艺术 :)

有时候创意型客户会在会议一开始提出创意建议，或者在简报结束后提出，如何应对？这种情况会让许多设计师翻白眼，包括我。不过最终我改变主意，意识到与客户合作总是有益的。

这并不意味着你应当遵从客户的建议，“那就这么干”。客户的想法是非常有价值的资源。这意味着他们真正在用心！他们需要你的帮助。

也就是说，要尊重客户的想法。仔细聆听他们。即使你不敢苟同，也要问他们为什么认为这是个好方案。你时刻都要确保将他们的想法纳入考量，并会为之付出努力。

通常，客户并不会想到一个终极品牌方案，但这并不意外：他们的工作是经营一家公司，你的工作是为它打上烙印。这种情况下怎么做？有两个技巧：

将客户的想法当作一组关键词，对它进行重新设计。
即使你清楚，客户的草图既不匹配品牌目标，也无法吸引受众，在第一次演示时还是要列出这些logo，向他们解释你为何不再深化他们的概念：“我非常喜欢的你想法，但这对你的业务没有帮助。因为……”准备好应付激烈的争论。

我要给出最终建议：你要格外小心那些已经自己画了草图，或者有其他设计师开头，然后希望你将它设计成logo的客户。你得明确自己的位置：你究竟是一个提供设计解决方案的专家，还是一个使用Adobe Illustrator技能的美工？“这算什么问题！我当然是专家”，你会这么说。所以要诚实地回应客户：

“如果你只想要把你的草图画成矢量，请个设计学生吧。他们可以做的很好，而且花不了你多少钱。但如果你要雇我来操刀这个项目，我们就得遵循完整的logo设计流程。当然，我会记下你的草图，并且加以研究。不过暂时我不知道所有的项目细节，我不能保证这就是最好的解决方案，我也会构思其他的概念。”

如果客户同意，你作为一名设计师的公信力就已经建立了。如果不同意，那这客户不适合你。

4. 从研究入手，以研究结束

研究是所有设计流程中最基本最首要的。在思考新logo看起来什么样之前，你得在客户的业务部门内调查解决方案。

例如，你正在为一家初创企业创作品牌标识，他们刚刚创造了一款新的穿戴设备，为……比如说，滑雪板运动员而造。填写创意简报时，客户只会写下一部分竞争者。通常这些是当地企业——同一个城市、国家或世界上相同的地区，这取决于他们的目标市场，当然还有野心。

少量公司并不足以得到完整的图景。这就是为什么你要研究客户提供的资料以外的东西。研究有两个阶段。

首先，你应该寻找其他（世界范围内）相同业务领域的公司logo——尽可能多。这是第一轮（市场）调研。将这些logo收集到一页幻灯片里，展示给客户：“你潜在竞争对手的logo就长这样”。

HappyTeamCheck的市场调研

有时候，一家公司的名字包含了某个名词，你可以轻易联想到特定的视觉图像。或者公司创始人可能会要求你验证他们的想法，比如选取某个动物作为他们的吉祥物。这时候就该进入研究的第二个（创意）阶段：找到尽可能多带有这个符号的logo。但是，你得避免重复那些已经存在的概念。正如Austin Kleon提到：“没有什么是完全的原创。”别管这个想法对你而言多么独特，总可能有其他设计师先于你一步想到同样的点子。

我会一再重复相同的创意调研，在向客户演示前检查我的创意。一旦我准备好了两个最佳的logo，我会在下面5个地方列出所有可能的关键词来搜索：Behance、Dribbble、Pinterest、Designspiration和Underconsideration。

需要把所有的研究展示给客户吗？不必。我总在第一次演示中仅展示市场调研结果，让他们对行业现存的商标有个简略认识，解释其中哪些是好案例，哪些完全不起作用。创意研究我则自己保留。

有时客户会要求你修改，并且不经意间让你的方案与现存的设计相似。这时候就该从中指出：“实际上，我建议过不要这么做。因为我们最终会得到与这个非常接近的logo。”

在概念演示中，一旦客户想到了一个点子：“我们把logo切成片！”为什么不呢？这是个好主意，很好地吻合了他们公司名称，Clipatize。在下次会议展示我自己的版本之前，我会向客户展出我找到的所有切片式logo：“我们不能重复这些造型。”

**这种研究对于双方都有保护作用：**对于你，免于错误地侵权指控；对于客户，免于商标注册时的麻烦。

5. 创建情绪板

情绪板是一种传统的设计工具。客户雇佣独立设计师时，并没有指望看到情绪板。给他们一点惊喜和深刻印象，让客户准备好进入logo概念稿的演示。

为什么用情绪板？

首先，它展示了品牌的外观和感觉。这是客户对简报中一个问题答案的视觉化，“你希望激发顾客什么样的情感？”有时客户会要求换掉情绪板上的某张特定图片，或者将情绪板合二为一。

Betoscope的情绪板，在线赌球网站

第二，如果处理得当，在logo概念稿展示之前，这会给客户带来好心情。你有没有听说过“Three Yes”的沟通方法？这就是第一个“yes”。

最终，情绪板为你节省时间，让你自由掌控。一旦客户接受了情绪板，如果将来设计修改偏离初衷，你还能把它搬出来。

我现在某个项目的情绪板

6. 像个广告商一样展示你的设计

**设计不会为自己代言，也无法推销自己。**许多大公司的懒惰的项目经理，创造了这句谣言。在那里，设计师不允许与客户交流，在你与客户之间隔着许多个传话筒。我曾经也是这种系统的一部分。然后逃离那里，去了小软件公司。

不要等着客户自己理解这个概念——在演示中要引导他们。展示你的工作成果，解释这些方案如何帮助客户达成商业目标。

下面的诀窍能帮助你主持一场更有效的演示。

保持生动

我一直都会尽最大努力亲自主持第一场演示，或是在Skype电话、Google hangout中进行。为什么？因为你可以掌控整个流程，可以附加一些说明，并立刻回答客户的问题。要了解正确的次序。你有没有读过Carmine Gallo的史蒂夫·乔布斯的演说秘诀？如果没有，我强烈推荐。

最有用的精髓，是事不过三原则：人们只能记住每个列表中的3件事。3是一个极具说服力的魔法数字。如果这个数字特别大（例如概念稿的数量），那么次序也很重要。人们最容易记住第一位的东西，其次是最后一位，然后第二、第三，以此类推。所以，当展示概念稿时，把最好的方案放在首位，第二的放在末尾，（如果你要展示3个概念）第三的放在中间。

展示多少个概念取决于你。我以前也展示过3个，但我发现打磨第三个选项纯粹是浪费时间。从概念阶段头脑风暴出的30个点子中，选择最好的两个方案，这样其实更好。

展示故事

你知道为什么人们爱看镜头背后的故事吗？你在制作视频过程中，是不是经常有惊喜时刻？Logo也是相同的道理。不要以最终成品来引导用户——他们在幻灯片上就能看到。相反，从概念的根源开始。解释为什么以及如何产生这个点子。毕竟，你并不仅仅是在创造一个小图标或者logo，你在创造一则品牌故事。

不要以最终成品来引导用户——从概念的根源开始

使用标记

这个真的很有用。怎么用？想象一下，你刚完成了面对面的logo概念演示。已经传达了你的专业观点、哪个概念最符合客户的商业目标、以及为什么。客户几天后会带着反馈回来找你，因为他们需要隔几天才能做决策。当他们第二天再看你的演示时，他们会注意到这些标记，并想起你的建议。

当第二天再看你的演示时，客户会注意到这些标记，并想起你的建议

使用合适的演示模版

模版很有用，因为在这上面，相比孤零零logo更容易让人理解最终产出物。但遗憾的是多数设计师都在错误地使用它们。为什么？有两种模版：演示用模版，还有作品集用的模版。

演示用模版 vs 作品集用模版

所有这些漂浮的名片、带角度的桌面上的iPhone照片……虽然很好，但不适合用来演示概念。你在哪种情况下能看清名片上的信息，平直地拿在手中，还是摊在一米外的桌子上？你用手机时是垂直拿着，还是45度角倾斜持握？你明白其中意思。这就是为什么演示中最好使用平直的模版。

7. 注意应用图标

我很喜欢文字商标。但这种logo有一大缺憾——要从它们中创造出一个独特的应用图标简直难于登天。网站小图标就要好很多，因为它不需要太特殊。但是，应用图标必须特殊（而且最好不要和App Store中现有的图标哪怕有一点点相似）。

应用图标必须特殊

如果你创作的品牌，它的公司或服务会有一个app，我建议你设计图标+文字的logo。

8. 往大了想，超前思维

一个Logo不代表一个品牌。（关于这一点有太多要讲。这是个很好的话题，可以另外写一系列的文章。）

（从Entrepreneur的指南，到创建令人印象深刻的创业品牌）

没错，和名称一样，logo是最有价值的品牌资源，但它只是品牌视觉识别系统中众多元素之一。创造一个Logo概念时，想一想整个品牌看起来是什么样的：

创意是否容易进化？或者说你设计的Logo是否足够中立（或者说通用），留下了充足的创新空间？
能不能创造出鲜活的品牌识别系统？
在Logo中传达了怎样的品牌特质，哪些留待其他资源体现？

谁知道这个项目之后会由谁接手呢？今天请你设计一个logo，但明天可能就会请你继续设计剩下的资源。

记住：设计是一份工作

**我们不是艺术家。**我们并非通过设计来表达自己。我们对设计充满热情，但设计对于我们并不只是热情。而且这绝对不只是兴趣。

这是我们的工作。我们通过帮助别人达成商业目的来挣钱。

总是要调整你的设计来达成项目目标。为自己的创造物负起责任。自信满满推销你的概念，做好准备聆听各种反馈。

在项目中保持学习，对设计流程进行持续优化。记住，你的设计流程是你专业程度的反映。这部分关乎你作为设计师的名誉。

原文链接：https://www.smashingmagazine.com/2016/02/design-workflow/

作者信息： Iryna Nezhynska From the very beginning of her career, Iryna has been passionate about how people and organisations expressing who they are. She began with designing brand identities for financial and industrial companies; then she switched to retail sector to help polish retail brands enter the era of iPad magazine apps. Now she is a Senior Visual Designer at Upnext, a Warsaw-based software agency where she creates visual identities for digital products. She recently has focused on lean branding for startups. Iryna tweets at @iranezhynska and has a published her work on her Dribbble blog, too.

设计师个人品牌指南

hi@victor42.work (Victor42) — Sun, 21 Feb 2016 00:03:00 +0000

[国外设计第122期]

个人品牌是人们将自己和事业作为一个品牌推广出去。如今，空有一门好手艺已经不够了，独特和真实可信方可过关，但前提是人们得知道你。正如Michael Simmons所写道，在数字时代，真实才是关键。强有力的个人品牌可以创造大量机会，获得充分认可。

个人品牌在所有行业都开始成为关键因素。技能和无聊的简历再也不能给你任何保障。你确实应该开始发掘自己的品牌，并且建立起一个群落。或者换句话说，组织起一个粉丝群体，他们能给你带来工作机会与支持，分享你的作品，并认可你。

本文中，我想分享一些个人品牌指南，过去几年我都在实验这些观点。这些技巧与方法为我带来了演讲、福布斯和Fast Company的访谈、业务增长，这还不算我因此获得的连接与朋友。

为什么要关心个人品牌的建立？

有许多理由表明你应该考虑加强个人品牌建设。重要的是个人品牌总是存在的，它就是人们对你、你的作品、你的行为的认知。经营起来，确保品牌符合你的价值，还有你希望人们对你的认知。而且，树立易辨识的个人品牌还有如下好处：

职业机遇
更好的工作
优化公司人脉与客户
行业认可

愿景

创造一个强有力的愿景，务必将它推而广之。无论是登上月球，还是环游世界，这一定要是个大胆的计划，人们会记住这些。如果你还没看过Simon Sinek的TED演说“伟大的领导者如何激励人们行动”，他提出了“黄金圈”和“从为什么开始”的理论，一定要去看看，创造你自己的愿景。

你的目标是谁？

谁是你的受众，你要通过品牌与哪些人交谈？最常见的错误就是所有人，我们都想吸引尽可能多的人。现实是残酷的，如果你试图取悦每个人，就谁也取悦不了。总有人因为某种原因喜欢你，也有人因为另一个原因讨厌你。每个人都有各自的观念，所以你不必考虑吸引所有人。好好想想你的愿景和长期目标。

使用高质量的图片

无论你的网站看起来多棒，有多少精彩故事要讲，人都是视觉动物。人类基于第一印象形成观念，图片比所需信息传达更多信息，让人留下强烈的印象，对品牌形成某种概念。

引自3M Corporation，相对于文字信息，人们极度容易被图形吸引。

“90%传输到大脑中的信息都是视觉，大脑处理图形要比文字快60000倍。”

德国设计师Tobias van Schneider是个很好的例子，高质量图片在个人品牌传达中的运用，显著且突出。

还有些很棒的案例：

Kerem Suer

Karim Rashid

Jeff Broderick

Jim Ramsden

Viens-la

坚持创作

引用Austin Kleon，一名纽约时报畅销书作者的话，“展示你的作品！”你得坚持不断在网上发布你作品、创意的细枝末节，还有你在学习什么。不要浪费时间“刷互联网”，好好利用互联网。

想一想，你做了这么多杰出的作品，却没人知道。一定要好好利用如今的互联网生态，将你的草稿、创意、更新、工作过程和成品发布出去，获得反馈、认同和潜在渠道。

有许多非常好的设计师社区，Dribbble、Behance、DeviantArt只是其中几个。个人博客和作品集也是另一种媒介。

熟练的故事讲述

故事讲述是一门极强大的技能，可以让你区别于行业中那些不知名的设计师，并打磨你的品牌。人们会对你感兴趣，甚至在需要一名设计师时想起你。

除了展示作品，也展现一下你的日常生活，分享创作过程，分享日常轨迹，分享你如何激发灵感，等等。Tomas Jasovsky是个很好的案例，这名斯洛伐克设计师试图进入Facebook、Spotify这样的大公司，失败之后决定打包行李，与他的女友环游世界。他称自己为游牧设计师，他分享的一切都结合了旅行、设计、美食与冒险。谁对这样的生活方式不感兴趣呢？

更多案例：

Pieter Levels

Ryan Putnam

建立联系

开始构建你的职业网络，在圈子中网罗行业领袖，这点无比重要，因为人们会觉得你也是行业领袖之一。

“你的人脉就是你的网络资产。”——Tim Sanders，作家、公开演讲者、前雅虎总监

有许多方式与人建立连接，你不能只关注设计师，一切连接都是有益的，可能将你引向设计“大牛”，你从其他设计师那里或许都接触不到。

如何让别人对你感兴趣？做不到。你得从倾听他们开始，尽你所能为他们提供价值，只有那样，人们才会与你以一种真实的方式建立连接，形成长久持续的关系。如果想了解更多设计师的人脉原则，请看我去年的文章：设计创业者关键的人脉原则

下面这些网站和社交媒体非常利于认识新朋友。

Startuptravels——接触全世界的创业事件。在此结识超过160个国家的创业者和热心人。
Meetup——世界最大的平台之一，通过各种话题结交朋友，话题之多超乎你想象。
Startuptravels——Dribbble Meetups创造了机会让设计师进行社交、讨论设计，并且培养当地的设计社区。

获得媒体报道

再没有什么比你、你都故事或作品广受尊重更强大的了。它为品牌增添了许多可信度，将你与行业中的竞争者区别开。

但获得媒体报道并不容易。你要么通过自己独特的故事，或是创作某些非凡、有争议的作品，例如为现有产品进行革新改版，或是某个实现后非常酷的新概念。

有个绝佳案例之前已经提过，Tomas Jasovsky，一名斯洛伐克设计师。他想到一个商用版Instagram的概念设计，被某家科技出版物报道了，其中就有The Next Web。

更多案例：

Paul Jarvis

被广泛谈论的Leo Drapeau的iOS7改版设计

将自己与其他强大的品牌关联起来

在品牌的可信度上下功夫。被报道虽然很棒，但可能不足以给潜在客户留下印象。人都喜欢与熟悉信任的人打交道。如果你刚起步，没有大量粉丝，最好将自己与更大的品牌和公司关联起来，无论是以任何方式与他们合作、帮过他们、向他们请教过都行。这样人们就会把对品牌的信任与你的品牌关联起来，为你的品牌可信度与喜爱度创造巨大的飞跃，带来新的生意或客户。

请看上面的例子，呈现方式优雅且令人信服。对于熟悉Badoo、ITV或O2品牌的访客而言，第一次来访会增加信任。

更多案例：

THENERO

Tushar Merwanji

监控

为了建立真实的连接，吸引真诚的粉丝，在网上监控追踪人们对你的认知和评论极度重要。有许多在线工具，可以在网络和社交媒体中追踪个人品牌，并且让你作出反应、参与交流。

Google Alerts——简单却杰出的工具，让你根据特定关键词创建自定义邮件通知，看看谁在网络上谈论你。
Mention——这个工具让你实时监控媒体、品牌和竞争对手，全设备通用，而且免费。
Klout——帮助想要善用社交媒体的人。
Brandwatch——强大的社交媒体监视和分析工具，新锐品牌和全世界创意机构的选择。
Brand24——直达互联网上提及你品牌的内容。

做自己

听起来像是陈词滥调，不过你确实只要做自己就好。如果不喜欢现在的方式，那就寻找更好的爱好，自我提升。如果你羞于描绘现在的自己，就向人们展示你想要成为谁。

“做自己吧，因为其他人已经有人做了。”——Oscar Wilde

以我的经验，我可以告诉一点，保持谦卑和真诚总是胜过谎言和自大。告诉人们你的目标，分享你的愿景，诉说自己独特真实的故事，你就会看到人们关注你，与你的故事、品牌和个性建立联系。

结论

个人品牌不再是高深莫测的东西，但它需要长年累月经营和维护。希望我在本文中分享的经验和实验，可以帮你经营自己的个人品牌，给你带来职业机遇、有意义的连接和行业认可。

我很乐于聆听你关于个人品牌的想法。你用什么策略吸引更多人，你如何经营人脉、推销你的作品？

原文链接：http://designmodo.com/personal-branding-guide/

作者信息： Tomas Laurinavicius Adventurous designer and entrepreneur from Lithuania. Editor-in-chief at Despreneur and Product Manager at Refe. Connect with me on Twitter @tomaslau.

毁掉移动应用设计的6个想当然

hi@victor42.work (Victor42) — Sun, 31 Jan 2016 13:06:00 +0000

[国外设计第121期]

过去几年来，用户交互进化如此迅速，设计师们都快跟不上了——导致在创建移动应用时，从其他媒介（甚至陈旧的应用设计）中照搬交互设计技巧。

其实重要的是要记住：交互模式和设计要随着媒介的改变而变化。

这种思想的第一阶段，可见于鼠标键盘的台式电脑过渡到触摸屏的过程中（Apple新推出的3D Touch就是个更加精细的例子）。从全新的交互模式，到微小的交互细节和趋势，每种新的设备、环境、模式和手势，都带来了机遇和陷阱。

照片来源：Apple

光是了解它们就要费一番功夫——更别说为它们设计了——下面是一些设计移动应用时应当避免的想当然。

1. 用户总是需要创建账号

他们不需要，许多时候他们不想、也没有必要。

作为开发者，除非将用户固化到数据库中，否则很容易把他们拒之门外。但从用户的角度看，这不是光彩之举。

凭什么要先注册，才能知道里面有什么？这个过程劳神费力，必须得物有所值。

相反，用户数据可以离线储存，当用户最终决定创建账号时转移到账户中。或者，可以考虑使用“访客”或“试用”模式，开放核心功能（比如下面的Wunderlist），展现应用的功能，但是功能有限，或者带有水印。

照片来源：Wunderlist

一旦证明了你的应用有价值，用户毫无疑问会决定注册。在那之前，就有点过分要求了。

2. 用户需要一套教程，告诉他们你的应用有多棒

让用户使用，借此展现你的应用有多棒。解释它有多好是非常无力的。而且，用户通常都会跳过并忘记引导页。

浏览了所有说明的用户，并不太理解整个引导页设计。

如果你一定需要用户使用全部注意力，一步一步浏览引导（有些应用确实如此），那就要尽可能短，并且凭借帮助菜单来呈现。这就有意义多了，即使在用户用了一段时间以后。

照片来源：UXCam

3. 不要假设某种方式能适应所有应用

即使是常见的交互模式，也应该根据你应用的特定环境来评估。

有个常见的例子，地址输入框里的“省份”下拉选项。由于省份名可以写作几种不同形式，标准的预定义内容下拉菜单有它的合理意义。在这桌面端或许是可接受的（尽管这尚存争议），但对于移动端可用性而言，下拉菜单是最糟糕的选择。

应用的交互也是强调品牌的绝好机会。如今的应用中，有些非常难忘的品牌“瞬间”，例如从启动图进入信息流时的Twitter小鸟，Snapchat的个人资料图片动画，还有Hopper的加载图片（详见第5条）。

关键是我们不该迷信久经考验的方法，那不是使我们应用出彩的唯一方式。

Hopper应用的加载界面。

4. 应用设计和响应式网页设计是一回事

虽然响应式设计近似于移动应用设计，但为任何设备设计，与为独立应用设计，有天壤之别。

用户在移动应用中期望特定的交互模式和界面元素。

例如，在iOS应用左上角通常有个“返回”按钮，用来返回前一个界面。在网页浏览器中，网站本身就不需要返回按钮了；它通常都被省略掉，因为那和浏览器本身太像了。

虽然这是很基本且显而易见的例子，从菜单和表单，到“弹窗”和字体大小，一切都有细微差别。我们在网页中的设计，在移动应用中往往显得有点尴尬或粗糙——并非必定是哪里错了，而是它本就不同。

图片来源：TD Bank iOS应用的登录和LinkedIn iOS应用的登录

比较一下TD Bank iOS版和LinkedIn iOS版的登录界面。

在TD Bank iOS应用中，你会发现他们主要的UI元素做成了应用的样子，左上角有返回按钮，底部还能看到一栏菜单（与iOS的模式一致）。却没有像应用那样，为登录框本身（和其他页面内容）设计样式。输入框上有默认的iOS圆角和阴影，勾选框非常小，链接带有下划线，UI中甚至还带有版权公告。缺乏应用独有的感觉。

相反，LinkedIn iOS应用的确感觉像是个应用，尽管不是因为哪个特定的设计或界面元素。而是因为他们没有把网页打包成应用。他们为应用而设计，而非移动端网页——我们能看出区别。

5. “加载小转盘”是表达加载中和思考中的正确方式

默认的加载图标（例如iOS的小转盘，从中心点发散出的灰色线条）似乎有负面的暗示。

它们不仅出现的不是时候，也作为移动操作系统的一种功能，指示一切事物的状态。从设备开机，到连接wifi出现问题，或是应用加载缓慢。

正因如此，人们讨厌看到孤零零的一个转盘，没有任何指示信息或时间进度。

相反，应该尝试让加载感觉更自然——甚至将它隐藏。一种方式是通过占位元素来暗示内容，Facebook就这样呈现时间轴的加载状态。你还可以利用这个机会，在加载指示器和信息上发挥创意，例如在界面上加入一些奇思妙想，或者强调品牌。

照片来源：Facebook iOS app

6. 用户首次使用时，会盲目地允许通知

绝不能依赖操作系统默认的“允许通知”对话框。这个无脑设计会绊倒无数移动端设计师。首先，它并没有说得足够清楚为什么应用需要获取权限，让它能随时随地侵犯用户隐私。

相反，应该在应用中设计一个自定义的“允许通知”界面。

永远都要告诉用户你的通知有多么重要（尽可能给他们展示例子），并且向他们保证不会有不必要的垃圾信息轰炸。

一旦用户理解了应用通知的价值，谨慎提供原生的、基于系统的弹窗——他们会立刻看见，不会把事情搞得一团糟。

照片来源：http://peach.cool/

一款广泛宣传的新近应用Peach就做得很完美。

它第一个“允许通知”对话框看起来很像真正iOS系统对话框（但并不是），他们解释了“为什么”需要通知，消除了疑虑。用户点击“允许”之后，就会看到真正的iOS系统对话框（相比之下，这个没用多了）。

照片来源：http://peach.cool/

7（还有更多）

人们对应用界面的期望更多了，标准正在水涨船高。

对于基于应用的公司，不当地忽视细节会损害应用的接受度——甚至会破坏你与用户的关系。

以上6个想当然还只是开始。如果想要继续深入，要学着留心和避免日常的假定。小心不要想当然以为自己知道什么界面最适合——始终都要努力寻找最佳方案。

想要学习更多关于用户体验设计的最佳实践，请看《2016决定性的用户体验设计电子书集合》。这个集合里包含了350多页和超过300个移动端设计、用户体验设计、网页设计的案例。

原文链接：https://studio.uxpin.com/blog/6-assumptions-that-kill-your-mobile-app-design/

作者信息： Drew Thomas Drew Thomas is the chief creative officer and a co-founder of Brolik, a Philadelphia digital design agency. While Brolik is his focus, he also considers himself a “maker” and tinkers with all kinds of side projects, both digital and physical.

2016年电商设计的9个趋势

hi@victor42.work (Victor42) — Sun, 24 Jan 2016 20:57:00 +0000

[国外设计第120期]

在当今这个瞬息万变的电商世界，对于任何一位设计师，预测未来都极具挑战。今天新潮，明天就会落伍！作为设计师，想要给顾客营造顺畅的购物体验，同时使自己领先于竞争对手，你得持续不断评估当下趋势的价值。

如果你正要搭建（或者翻新）在线商城，你就得了解电商领域当下的流行趋势。下面我们来深入了解即将主导2016年的热门电商设计趋势。

1) Material Design

Material Design继续盛行，如今开始大范围被电商企业采用。自2014年发布起，鲜明的、专注内容的设计风格便开始流行，而且还会在未来继续引领风潮。正是Material Design统一、切实、欢快的体验，跨越各种设备与平台，使得电商网站如此迷人。

尽管将Material Design应用于在线商城是个让人望而却步的任务，还是有些电商敢于冒险尝试，成功地运用了这种设计风格，PA Design和Bewakoof就是两个例子。

2) 隐藏式菜单

隐藏式菜单，最常见的一种变化是汉堡菜单，已经极为盛行了，因为可以清理电商网站杂乱的版面。最初它们是为移动端设计的，但现在也越来越多用在桌面端的设计中。

2015年，许多在线销售商在大大小小的屏幕上都使用了隐藏式导航菜单，节省了大量屏幕空间，这个趋势在未来还会持续增长。如今许多知名在线商城都使用了隐藏式菜单，例如House of Fraser和EtQ。

3) 向上的响应式

响应式设计是2016年大多数网站的基本要素，但除了优化移动端和平板，为大屏幕设备设计也至关重要。因为在高清设备（例如电视）上浏览和购物是大势所趋。

超过32%的互联网用户拥有1920像素甚至更高的设备，这说明兼顾那些大屏幕有多么重要。整个2016年，会有越来越多电商网站致力于兼容大屏幕设备，比如Firebox、Smythson和Burberry。

4) 丰富的动画

动画是吸引顾客、与他们沟通的良好方式，许多电商网站开始将它注入设计中，让在线购物体验更加欢快好玩。如果使用位置和时机恰当，动画会让你的顾客感到你在真正关心他们的体验。

在2016年，你会看到更多电商网站有创意地运用动画——例如按钮旋转、图标转动和加载进度条——为顾客留下深刻印象。想找点灵感吗？看看Nixon、Fleet Feet Sports和Fallen Hero，它们在运用动画方面都做得非常棒。

5) 故事讲述

在如今这个竞争激烈的电商领域，只有故事讲述能让你的品牌鹤立鸡群。用一种独特且引人入胜的方式呈现内容，好的故事不仅在品牌与顾客之间建立情感连接，也能增加忠诚度与销量。简单说，故事讲述能让品牌起死回生。

虽然电商网站讲述故事并不容易，但许多快速成长的电商都在实践这种策略，作为他们的优势。有两个电商网站充分利用了故事讲述，Bonobos和Greats。

6) 卡片式设计

近几年，卡片式（类卡片式）布局在设计师当中累积了极高的人气，毫无疑问这个趋势将延续至2016年甚至以后。首先，因为卡片是Material Design中最主要的元素之一；其次，因为它们在响应式设计中表现非常好。

卡片布局最棒的一点就是对用户友好。让你可以排列组织产品，不仅让访客一眼看到所有相关信息，同时如果某件产品不合适，也能产生有效的增加销售，让顾客浏览更轻松。Rejuvenation和Lord & Taylor都将卡片运用得登峰造极了。

7) 大号的活动文字

内容为王是当然的，但如何呈现内容反映了它的力量有多大！同往年一样，2016年也会以大号的响应式文字著称，它们适用于所有类型的设备，从小屏幕手机，到大屏幕桌面显示器。

要建立强有力的品牌视觉识别，文字至关重要，吸引潜在顾客购买你商城中的产品，大量的商城都热衷于运用这种技巧。AYR、Nasty Gal和Brdr. Krüger都很好地运用了大号活动文字。

8) 大幅背景

考虑过大号文字，我们再考虑一下大幅背景。它一直是最吸引人的网页设计趋势之一，所以并不意外，迷人的大幅产品照片在电商网站中得到广泛运用，让产品更能激发购买欲。全屏背景图片或视频，为在线商城赋予了非常清爽、专业、时髦的外观，迫使潜在顾客进入商城后尽快购买。

虽然大幅背景在主页上效果很好，它也能用在产品页上，让顾客沉浸其中。在产品详情页面使用沉浸的交互式图片或视频，让访客在点击购买按钮前，就感觉像拥有了它一样。

9) 动态搜索

最后，我注意到了一项新的设计趋势异军突起，动态搜索。2016年，许多电商网站会使用基于JavaScript和Ajax的搜索，动态展示产品。这项技术非常成功，尤其是当你有庞杂的产品系列。

最具吸引力的电商网站案例，JadoPado，就运用了这项令人称奇的技术。去他们网站看看，搜点什么，你会看到页面展示的产品动态变化。还有另一个很棒的动态搜索案例，Stuart Weitzman。

原文链接：http://www.webdesignerdepot.com/2016/01/9-ecommerce-design-trends-to-embrace-in-2016/

作者信息： AJEET YADAV Ajeet is a senior web developer at WordpressIntegration - PSD to WordPress service provider, where he is responsible for writing custom JavaScript code during the conversion process. In his spare time, he writes on different topics related to JavaScript, WordPress, and Web Design to share his work experience with others. You can follow WordpressIntegration on Facebook More articles by Ajeet Yadav

超越平庸：寻找网站失落的灵魂

hi@victor42.work (Victor42) — Sun, 17 Jan 2016 13:28:00 +0000

[国外设计第119期]

**网页设计是否丧失了灵魂？**这是否要归咎于响应式设计呢？我的朋友兼同事Noah Stokes提出了这些问题，不得不说是有点耸人听闻。毕竟，响应式网页不仅能让我们通过日益丰富的联网设备浏览网页，还能感受其乐趣。

作为设计师，我们的首要任务是解决问题，这可能远远超过其他的事情。响应式网页设计是一种绝妙的解决方案，能创造出适应各种设备的虚拟体验。但仍然有许多问题亟待解决，尤其是如何让各种内容都有趣迷人。一页纯文字可以成为一篇优美的博文，一大堆无关联的JPG图片可以成为一部专业的作品集。

然后，问题就变成了：我们能同时实现两者吗？

我们所获得的

毫无疑问，网络已经成为一个美学胜地。基于可靠的网格布局，构建简单迷人的网站，已经成为一种标准。互联网的垦荒已经完成，以框架和活动栅格形式出现的律法与秩序，已经掌管这片土壤，开始了和平的统治。

所有这些都是好事。简单迷人的网站，优势显而易见且丰富：

熟悉，便于用户浏览（操作正确的话）。
原型设计（相对）简单快速。
建站技术的高度标准化（流水线取代了工匠）。
快速布局节省了大量开销（有一定可能会转嫁给消费者）。
严格的栅格布局促进了响应式设计（它严重依赖极简的布局趋势）。

漫步Awwwards这样的网页设计画廊，其中展出的网站，有成百上千个都符合简单迷人的标准。（查看大图）

毫不夸张的说，标准化与其相关技术确有重大意义。无数的个人与小公司从中受益，通过简单迷人（却毫无独特性）的网站，向全世界分享他们的品牌。但是，那只是一方面。

我们所失去的

将个人行为纳入考量，如今的专业网站看起来基本上都很棒。拿一个名不见经传的设计师作品集网站，与十年前最好的设计机构网站相比，你甚至会承认我们在网页设计这件事上，已经做得好太多了。然而，四下看看，很容易得到结论：一切看起来都趋于同化。

是不是设计师都丧失了开拓精神？便捷是否牺牲了创造性？在回答这些问题前，我们先看看是什么致使今天网页设计缺乏多样性。

为何网站看起来都一样

看看如今的网站，同化的背后是什么力量在驱使？应该怪谁？事实证明，并不能简单归咎于某种工具或方法。响应式设计或许推波助澜，但它只是诸多因素之一。下面是一些疑犯。

布局

有限的布局创意，是网站缺乏多样性最主要也最显而易见的原因之一。抽离色彩、动画、视觉差滚动及类似效果之后，你就会注意到一些基本的网页布局原则。有多少网站是在这5种布局上稍作调整而成的？

5种常见的网站布局。（查看大图）

Noah哀叹“到处都是条条框框”，指的就是这个。我们似乎停滞了，独特的布局成为了一种失传的艺术。

响应式网页设计

在以前，你可以确保，所有的网站访客都在用低分辨率的台式电脑屏幕浏览。如今，网站在所有尺寸与分辨率上表现良好，这已不是一种奢侈，而是一种必需。宽度活动、可伸缩的基本栅格系统，使得响应式网页设计比随性的布局更易处理。

框架

网页设计框架或许可以加速设计与开发流程。对许多人而言，它们是建立跨浏览器响应式网页最安全快速的方式。作为奖励，他们还会注意保持内容简略，从按钮到表单，涵盖所有通用元素。Bootstrap和Foundation这类工具有着惊人的人气，导致成千上万的网页设计师在他们每个项目中使用完全相同的代码库、布局、甚至美学风格。

原型工具和设计流程

即使在从零开始的过程中，设计流程也在有意识地抑制创造力。多数原型工具都鼓励、甚至可能迫使你使用标准化的方框元素，严格遵循网格式的布局。

许多原型工具都鼓励使用常规网格布局结构。（查看大图）

高清免费照片与图片

获取优美的免费设计资源真是史无前例地容易。方便与可承受占据了支配地位，设计师们蜂拥向免费照片网站，从一个小小（但在不断增长）的池子中获取相同的资源。

两张免费摄影图片。（查看大图）

在过去的两年中，你看到过多少个网站用了其中某张照片（或者两张）？如果你经常浏览网站，我打赌有几十个。

The Village Style和Jigglist； College Essay Guy和Get Busy Make Money（查看大图）

这还不仅仅是照片，还包括图标、字体、设计模式等等。好的方面是，没有任何预算的设计师也能做出好看的网站；糟糕的是，所有其他设计师也在用同样的资源做着同样的设计。

设计趋势

对于某些设计师而言，“趋势”是一个贬义词。但它不该是贬义词。在20世纪找一个年代，看那十年的设计趋势。你会发现真叫人着迷。它为那个时代赋予了独特的风格与个性，往往能反映出整个文化环境。即使你看不见，它也正发生在你的工作中。你看到与体验到的一切，都在影响你的行为，互联网则前所未有地放大了这种效应。导致许多设计师从相同的资源获取灵感，追逐相同的趋势。

我们设计师

上面列出的每一项工具与资源都极有价值。它们能简化工作，让网页设计与开发的大门向更多人敞开，也为客户省钱。我不会胡乱使用它们，我会精心挑选。如果真要寻找破坏网页设计多样性的元凶，我会举起自己的手，就是我。我觉得不是每个项目都值得进行独特的设计，我要向那些尝试有趣设计的设计师们脱帽致敬。

要知道，有一点很重要，你用上面所有这些资源仍然可以创造出独特的设计。这都取决于你如何使用这些工具。

如何挑战现状

你的网站是否有独特的设计，现在想必你心里有数了。或许你不在乎这个——这完全没问题。但如果你想要打破标准的工作流程，这里有些概念能帮你实现，还有些网站可以作为非常棒的案例。

奇异的布局

关掉你的原型工具，拿出纸笔，思考一下如何创作出有趣且有用的布局，脱离你以前的套路。

Phases Magazine

Phases Magazine就是个很好的例子，在布局上大胆突破。它也有条条框框——其中有网格——但他们以某种方式创造出了完全不同于标准网站的体验（屏幕截图不能让你很好地感受到，请一定要亲自打开看）。如果你看到这个觉得，“哇，这太奇怪了”，那么很好！他们要的就是这个效果。有人会喜欢，有人会讨厌，但我喜欢的是他们在尝试做一些改变。

Phases Magazine用了一种非传统的网格。（查看大图）

不幸的是，这个网站的整体体验非常糟糕。有不必要的滚屏，表面上是响应式布局，但在某些尺寸下严重错乱。

Phases Magazine的布局在小屏幕上完全乱了。（查看大图）

Curious Space

这个概念还有一个更好的应用案例，Curious Space。

Curious Space的布局。（查看大图）

这里的网格也有些天然随性的感觉，但滚动功能是常规的，响应式断点也运转良好。

Curious Space适应各种不同设备。（查看大图）

操作这个网站时，你会注意到许多不错的小设计细节。例如，鼠标悬停会影响图片的层叠顺序。

鼠标悬停会让内容到前面来。（查看大图）

而且，滚动时还有点小趣味，但至少不会打乱操作，也与网站随性的视觉主题相吻合。logo开始是一堆混乱的字母，随着页面滚动，它们各自归位，在导航条中组成了“Curious Space”。

随着滚动，logo的字母各自归位。（查看大图）

Le Temps D’un Trajet

Le Temps d’un trajet也是一个有趣的例子。我们在此又看到了非标准的网格，但它的布局不是零星分散的，而是刻意聚集而成。

Le Temps d’un trajet的首页布局。（查看大图）

排列中的每个方块都是一张静止图片，鼠标悬停则变成一则短视频。但是最酷的地方，是网格随着焦点流畅地变化。

变化效果的视频演示

不要四四方方

为网站营造特别氛围的一种方式，就是跳出条条框框思考。这话听起来令人生厌，但当你向其他几何图形敞开心扉时，事情就开始变得有趣。

Built By Buffalo

Built By Buffalo用了六边形的布局。（查看大图）

看看Built By Buffalo构建出的蜂巢。这种图片集的设计对于移动端不太友好，所以他们索性在某个断点处变成了矩形。这个例子完美诠释了在适当时机做出独特的设计，同时了解何处是界限，应该收敛一点，给用户提供最佳体验。

在更窄的尺寸中，布局会变成矩形。（查看大图）

Anakin Design Studio

最近看到的Anakin Design Studio是这个系列中我的最爱之一。不仅因为布局漂亮、出乎意料，纵观如今的网站，它用到的形状都远远超出你的预期。

Anakin Design Studio的主页。（查看大图）

如你所见，巨大、遮罩式的文字让人印象深刻。但除此之外，随着页面往下滚动，还能看到他们最近的作品。许多设计师都会在这里放几排简单的矩形缩略图完事，但Anakin则在形状上玩了花样，使它更加吸引人。它们仍是矩形图片，却用白色背景营造出了多种形状的错觉。

Anakin Design Studio的作品集。（查看大图）

Avex Designs; Mathilde Jacon

还有一些其他网站使用了出乎意料的实验性形状。

Avex Designs和Mathilde Jacon使用了非常规的形状来营造独特的体验。（查看大图）

赋予生命

Fixate; For Better Coffee

像Fixate和For Better Coffee这样的网站结合了插画与天然元素，密密麻麻的布局创造出了强烈、令人印象深刻的体验。

Fixate和For Better Coffee运用了图文并茂的布局，使它们引人注目。（查看大图）

上面这种布局看起来复杂，只是因为插画；事实上，插画可以轻易拿掉。在一个迷失于千篇一律、四四方方小缩略图的世界中，特制的插画作品是传达独特品牌个性的绝佳方案。

For Better Coffee则用了有趣的动画，随着页面滚动，跟随咖啡豆亲历整个咖啡制作过程。体验非常流畅，页面也不会固定到特定位置，滚动变成了讲述故事的一项特色。

随着页面滚动，咖啡豆落入研磨机。（查看大图）

再往下滚动，新鲜咖啡会倒入杯中。（查看大图）

HappyFunCorp

既然我们提到美妙的插画型网站，就应该看看HappyFunCorp。

起初，看起来就像是个带有动画的普通网站。当你开始操作，奇妙的事情就发生了。主页的场景是其他所有页面的基础，当你点击链接，不会加载一个全新页面，而是放大查看场景中的某处细节。

点击链接放大查看细节。（查看大图）

这还挺奇特的，不过我喜欢它的创造性思维。而且正因为导航仍以标准方式呈现，所以对于用户没有学习负担。整个体验稍微有点出人意料，但这与网站正常的交互并无冲突。

差异化体验

我们对于用户有一条基本的期望，我们希望同一个网站的每个访客有相同的体验；要想做点不同的事情，可以把这点抛到九霄云外。Vasilis van Gemert网站不仅使用了独特的层叠式方块布局，它也会为每个访客呈现不同的配色。

Vasilis van Gemert网站的3种不同配色。（查看大图）

这个极具创意的特征，也延伸到了所有子页面中。

子页面也会改变配色。（查看大图）

创造独特的视觉主题

打造独特网站的另一个方法，是选取有趣或吸引人的主题，以此为基准左右所有的设计决策。这为你所有的行为提供了良好的指导，鼓励你探索传统UI之外的世界。

虽然这不适合所有网站（例如政府网站），但对于活动公告或小公司网页而言，这令人耳目一新。dConstruct 2015的新网站就是这方面的绝佳案例。

dConstruct 2015网站中的部分复古未来风格设计。（查看大图）

如你所见，他们营造出了复古未来的氛围，向《杰森一家》致敬。你会非常乐于滚动看完整个网站，想要了解他们如何呈现网站的各个部分。

dConstruct的一处设计细节。（查看大图）

这个网站有许多非常棒的细节值得注意。首先，大标题的处理就极其复古，结合了Lamplighter Script和Andes字体。

但最棒的地方，是这些是实实在在的网页字体，通过简单的CSS倾斜来改变方向。斜线贯穿运用于整个网站，有助于设计的统一性与创意。

创意地使用风格独特的网页字体，所有文字都可以选中。（查看大图）

这个网站完美诠释了响应式设计也未必就无聊。布局给人感觉并非四四方方或典型布局，但它仍然做到了各种尺寸适配良好。实际上我非常喜欢他们极具创意地在小屏幕上呈现元素。例如，随着屏幕尺寸缩小，下图的票券图片通过动画过渡，由横条变为竖条。这是个小细节，但非常聪明，反映出他们向整个布局的方方面面倾注了多少心血。

在窄屏中，票券由横条翻转成竖条。（查看大图）

我要向Clearleft脱帽致敬，是他们创造了这件杰作。

把版权素材作为一种输入，而非最终结果

我在Creative Market工作，我当然喜爱使用优秀的版权图片、字体、照片等等。高质量的版权资源，能给每位设计师的工作带来极大的帮助，但如何使用需要慎重考虑。无论你是在使用有趣的矢量作品、图标集、或是整套网站主题，考虑付出一些额外的努力，别让你的作品和其他人看起来一模一样。绝大多数人下载那些资源，都不肯费心做出哪怕一丁点定制化设计，所以只要一点点就大有帮助。

独特网站的问题

找到令人拍案叫绝的独特网站非常困难。为了写这篇文章，我花了许多小时搜寻，只找到少数几个可供展示的。我发现其中有个压倒性的倾向，如果设计师们真的想要追求独特的网页设计，做出的网站用户体验往往不可靠。

实验是好的，但如果网站怪异、难以预料的不愉快体验使用户感到困惑，则往往偏离了初衷。许多这类网站反而倒退一步，向我们呈现出FLASH时代的体验：加载太久、过于华丽的动画、跳跃式滚动、还有复杂的用户流程。有一种折衷，可以让你创造优美、外观独特的网站，但不必彻底颠覆交互。

网页设计长存

标准化、可预测的设计总会在网页中占有一席之地。实际上，它们或许最适合向各种屏幕展现各类内容。也就是说，我们需要一遍又一遍地，让我们的创意直觉与理性本能一决高下。

让我们尽自己的职责，维护互联网一直以来的面貌：一个包容科技、艺术和设计以新颖有趣的方式相互交叉的地方。成为一名开拓者，去试着做前所未见的事情——当然，路上会犯许多错误。时不时创造出奇异的东西也很棒，即使被其他人厌恶。这个叫做互联网的疯狂事物就是这样建立起来的，我们也正是这样在推动着它前行。

最后，尽管事实上大量网站看起来都一个样，但我不相信网页设计趋于停滞。有数不清的极有天赋的设计师们，创造了许多难以置信的网站，使这个群体持续不断进步升华。但这个话题仍有广泛争议。我想听听你的想法，关于网页设计的现状，还有你觉得谁在做着最有趣的工作。

原文链接：https://www.smashingmagazine.com/2015/07/hunt-for-the-webs-lost-soul/

作者信息： Joshua Johnson Josh Johnson is the Product Manager for Creative Market. He’s also a writer, designer, and photographer, and currently lives in Phoenix.

在设计中运用潘通年度代表色

hi@victor42.work (Victor42) — Sun, 10 Jan 2016 13:26:00 +0000

[国外设计第118期]

潘通为2016年选出的“年度色彩”令人拍案叫绝，融合了蔷薇粉与宁静蓝来构成这组色调。

这组柔和的配色很可能会成为接下来一年的配色趋势。正如潘通往年的选择，这些颜色通常都会成为设计、时尚与其他项目的标杆。对于某些设计师而言，柔和色彩可能不太好处理。不过，今天我们来看看，有哪些方法能够在项目中充分运用这些色彩。

蔷薇粉与宁静蓝

自2000年起，潘通就开始推选年度色彩，其中多数都是明亮的色彩——从去年的玛萨拉酒红，到2013年的翡翠绿和2008年的鸢尾蓝。所以今年发布的色彩，某种程度上来说是一种惊喜，因为它包含了两种柔和色彩，共同构成了今年的年度代表色。

下面是潘通对今年所选颜色的定义：

“人们不懈追求正能量与幸福安乐，以缓解现代社会的压力。为此，我们非常需要迎来一款能够给予人们心灵慰藉与安定的色彩。蔷薇粉与宁静蓝相互结合，在温暖的玫瑰色调与清凉宁静的蓝色之间，呈现出一种与生俱来的平衡，象征连接与健康，还有抚慰人心的秩序与平和。

“蔷薇粉与宁静蓝的流行组合，对于色彩联想的传统认知是一种挑战。

“在时尚圈，世界各地都在经历一场去性别化运动，它也通过色彩的趋势逐一影响了其他设计领域。这种色彩上的归一，恰恰迎合了许多社会现实：性别平等与流动，人们更习惯于将颜色作为一种表达方式，这个时代不必担心千篇一律或是被妄加评判，数字信息的开放交流让我们见识了丰富的色彩运用。”

蔷薇粉

蔷薇粉是一种淡粉色，这种颜色很容易使人联想到小女孩与新生命。

Pantone: 9281 C
RGB: 242 R, 221 G, 222 B
CMYK: 0 C, 14 M, 9 Y, 0 K
HTML: F2DDDE

宁静蓝

宁静蓝是一种淡蓝色，略微偏向紫色。

Pantone: 7451 C
RGB: 137 R, 171 G, 227 B
CMYK: 46 C, 23 M, 0 Y, 0 K
HTML: 89ABE3

有了这些颜色样本，你可以将这个色彩概念运用于各种类型的项目。也不必拘泥于它们给人的第一印象（例如这两种颜色都是非常流行的发色）。用上这些颜色、或者它们的变种（在下面的案例中你会看到），玩得开心！

背景底纹

潘通今年的代表色可以作为很好的背景。这种色彩组合很容易在自然界找到，如果你拍摄晚霞，就能看到它充满了粉色与蓝色。将它用作一种背景底纹，你可以最大限度地用这种色彩营造出自然的环境。

得益于它们的柔和天性，这两种色彩也能很好地用作背景色，因为色彩融入背景中，不会从前景和图片上夺走注意力。

上面这个Camper的案例演示了蔷薇粉与宁静蓝的运用。注意两种色彩之间的美妙渐变，衬托出了前面的小狗图片。这种色彩营造了一种平和的视觉，与白色的小狗相得益彰，并没有形成干扰。

图片与色彩叠加

使用这些颜色最简单的方法，就是用在主画面中。从照片到插画，蔷薇粉与宁静蓝都可以结合到设计中，不会有生硬的感觉。上图的案例，展示了这种色彩组合能在照片（Nebraska City）或更艺术化的色彩表现（Kata Farkas）中呈现出怎样的华丽。

还有一种方案，可以通过这种色调来创造温暖或清凉的颜色叠加。Holiday Memories的网站熟练运用了粉色调来遮盖整张图片，蓝色的文字与之相称。得益于照片的处理和清凉酷爽的文字颜色，这样的搭配极具魅力。色彩相互协调，营造出阴阳的效果，感觉恰到好处。

强调元素

通常，你考虑将红色作为按钮颜色时，较柔和的色彩或许是正确选择。柔和色彩也能用于按钮的设计，尤其按钮元素或行动号召面积太大的时候。而蓝色按钮，则是一种普遍存在，将颜色改为宁静蓝轻而易举。

还有个很有趣的做法，选定潘通的年度代表色，与它衍生出的梯度色彩相结合，然后用在按钮或其他元素上。

这些颜色能用于文字元素（尤其在深色背景上）或是链接、粗体文字，这取决于整体美感。注意上图的网站中，使用了多种近似的粉色与蓝色元素，包括文字左侧的小爪印。

颜色的变种

虽然你已经迫不及待要在项目中运用这些颜色了，但它或许并不适合所有情况。这时候就更应该使用其变种。可以考虑加入黑色营造更暗沉的美感，或者增加白色创造更柔和的色调。

这正是年度代表色有趣的地方，可以看到这股潮流会将我们引向何方。最终方向完全取决于你。并非要死守着精确的色彩搭配，才算搭上了这趟潮流列车，你也可以实验创造出属于自己的东西。

来自Design Shack Gallery的一组设计灵感

Design Shack Gallery里充满了各种案例——还能通过颜色搜索——可以看到其他人如何处理这些颜色。下面这些项目，可以帮助你思考应该如何运用粉色与蓝色。

Byanise

Appon Calendar

Mel Louie

Melodrama Boutique

FForever

NeatFolio

Dockpop

结论

年度代表色为我们打开一扇未来之窗，让我们见证接下来这一年的潮流趋势。如何将其运用于项目中取决于你，但还要敢于打破常规，以非传统的方式运用这组颜色。（这本就是非传统的年度代表色）

尽情创作，然后在Design Shack Gallery展示你的作品吧。

原文链接：http://designshack.net/articles/graphics/how-to-use-the-pantone-color-of-the-year-in-design-projects/

作者信息： Carrie Cousins Carrie is the chief writer at Design Shack, with years of experience in web and graphic design. Sports fanatic. Information junkie. Designer. True-believer in karma.

UI中国专访

hi@victor42.work (Victor42) — Mon, 04 Jan 2016 11:28:00 +0000

前阵子接受了UI中国的专访，为了方便大家了解我，原封不动搬到博客上来，以下是采访稿正文：

采访：UI君肚脐美少年&

Victor，也叫可乐橙，UI中国会员，IFEC译文团队核心成员之一，每周发布UI设计领域的译文。欢迎登录UI中国网站 www.ui.cn，进入我的个人主页（http://i.ui.cn/ucenter/93876.html）阅读UI设计译文-Design干货！

采访可乐橙的过程，有点好像高考前夕家长会请一些大学生在家一对一辅导小孩的状态。当然他是老师我是学生，有问有答而且凡事都会告诉你为什么。

好奇心极重的他同时也很享受“好奇心”特质给他带来的一切，是继续探索世界的动力，敢于去尝试新鲜事物，让自己变得更好。

“如果长期守在自己的世界中，偏安一隅，怎么有机会改变自己的生活呢？”

这就是他，一个说起话来循循善诱，给人以踏实稳重之感，不急不躁的专注于自己的事情，做一个积极热爱生活的人。这样的人不论做什么事都会成功吧！

UI中国：介绍一下自己

**我：**我嘛其实算是半个科学青年吧，不是文艺的那个路子。对自然科学和社会科学有种特殊的崇拜。

一大爱好就是看科幻小说、电影之类的作品，思考未来的社会、未来的生活。我本人也是个重度的实用主义者，其实不说别人不一定能看出来是设计师。比如我穿得就不怎么讲究，哈哈~

毕业于杭州师范大学电子信息专业，从事设计工作5年多了。最初做平面设计，中途有一小段时间转做了网页前端，从此才算真正进入互联网行业。大概有两三年时间我都在同时做网页设计与前端的工作。这期间，我自己也在不断学习，其中唯一值得一提的就是开始折腾个人网站，改过许多次版，并且坚持在里面写写东西。

UI中国：大家所了解的可乐橙多半是以翻译优质外文为主，是何种原因开始了这样的兴趣？第一篇文章是在什么情况下翻译下来，途中遇到什么问题？

**我：**算是一种偶然发现。

同行之间会互相分享一些资料和信息。有个小伙伴发我一篇设计文章，看了很受用，在文末发现这篇文章是翻译来的。

然后好奇宝宝发作，找到了它的原文出处，发现那里设计文章质量很高，当天就挑了一篇开始翻译。

第一次翻译其实惨不忍睹，原文看两遍才懂。第三遍边看边翻，卡住无数次。翻完再读一遍译文，还是惨不忍睹。于是润色、修改措辞，整个翻译过程花了3个晚上。

但是翻译挺有意思，加上我本来就喜欢写写东西，后来就没多想，出于惯性坚持下来，反正一周一篇频率也不算高。

UI中国：何种契机驱使长期翻译，坚持这么久就没有想要过放弃么？

**我：**坚持了3、4周之后，开始感到翻译速度和译文品质有明显提高，觉得长期坚持下去应该没什么问题，于是开始认真思考这件事情的意义。

我想到了4点：

第一，我喜欢写东西，这能保证我长期处在一种写作、组织语言的过程中，算是一种日常训练。

第二，每周挑选原文的过程中，都能有发现、有收获，这对设计也是有意义的。

第三，我还挺喜欢英文的，虽然水平一般，但不想荒废掉，这是与英文保持接触的良好方法；第四：这一点我比较晚才意识到，就是文章慢慢开始有读者之后，就会认识许多同行，交流中会有收获，结交志趣相投的朋友。

坚持了一段时间，这4点都一一得到印证。

不过这个翻译项目也有停止的可能，如果哪天我离开设计行业，或者觉得自己已经跟不上时代了，那就无法正确理解行业中的一些概念和思想，也无法保证译文质量。

可乐橙一年内翻译的文章：

UI中国：你写了一篇关于如何翻译UI设计文章背后的故事分享，为什么要这么做？

**我：**除了翻译，我有空就会写些文章，什么都写（虽然现在少了，不过以后会恢复的，最近要忙很长一段时间）。

这篇译文背后的故事，仅仅是各种自我消遣的杂谈中的一篇。写文章和做设计挺像的，在写作的过程中想法时刻会变化，会成长。本来只想简单写一点，写着写着意犹未尽就变成这样一篇详细的翻译手册了。

UI中国：如何看待UI设计这个环境？

**我：**简单的说就四个字：回归理性。

现在是2015年12月，我个人觉得这个时间点正处在UI设计的沉淀期。

前几年、前十几年，科技界取得进展确实太光彩夺目了，尤其是智能移动设备的诞生于发展。新兴行业呈现出的图景就像宇宙大爆炸，一时间能看到整个行业百家争鸣一片繁荣。

但这种拓荒者们带来的繁荣不会持续太久，需要时间冷静、沉淀、反思，然后再迎来新的、真正的繁荣。可以看到业界越来越少讨论空洞的概念，对于炫技式的设计有越来越多的批评声音，越来越注重设计的回归，回归产品与业务本身，为它们服务，而不是一种独立的存在。

这就是我所感受到的UI行业目前的处境。

UI中国：作为UI设计师觉得UI设计较其他设计有什么不同，为什么？

**我：**我觉得作为一种存在于虚拟世界中的设计，它与其他的设计有本质上的不同。

印刷品、工业产品、建筑、服装等，最终都要具体落实到一件产品上，而产品一旦产出、售出，就无法继续掌控它了。

UI是一种不断演进、随时变化的设计。UI设计与具体业务能够更紧密的结合，能够更快做出改变，工作方式与思考方式自然就不同。比如我们可以接受暂时的不完美，单凭这一点，就足够把UI与其他设计区分开了。

UI中国：现在很多人都要转行或是从事UI设计这个工作？你如何看待？以过来人的身份给一些有什么建议或者意见？

**我：**好现象嘛，加入的人多了，更容易推动UI行业进步。这是挡也挡不住的趋势，我也是从其他设计转过来的。

建议有这么几条：

善用网络。搜索不是输入关键词敲个回车而已，也不只局限于搜索引擎。要用人肉搜索的精神去寻找所需的知识，互联网比你想象中还要大。
保持好奇心。也就是多问为什么，甚至可以小声说出来，长年累月会养成自言自语的习惯：“为什么呢？为什么这样呢？” 然后心里真的会对许多事情产生疑问，再用第1条的方式去寻找答案。
与人为善。总会遇到一些让人不开心的事情，往往是由人引起的。好好与人相处，保持好脾气。带着情绪做事情，不会有好的成果，也得不到有价值的收获。

UI中国：在BAT工作和创业的状态，你更倾向于哪一种？

**我：**阿里待过不到一年，感觉当然是很棒啦，看到这些非常专业的同事，照葫芦画瓢顿时感觉自己都变专业了很多。而且，阿里杭州西溪园区的食堂真的很不错啊，现在还经常怀念。

尽管第一次创业项目失败了但是体验过创业之后。就更喜欢创业公司的氛围，大概是更贴近生活吧。

这和我是个实用主义者有关系，比如在大公司，能照规范来的事情尽量都要按照规范来。但在创业公司不一样，这里是野路子，只要管用，什么土方法都可以使，这是一种很有意思的智慧。创业的状态和之前的工作完全不同，成长快了很多，而且这改变了我对于学习本身的看法。

就拿设计来说吧，这么多种先进的工具，看起来个个都很牛啊，个个都能大幅度提高工作效率。要是以前的我，那肯定就一个个都学个遍，不管以后用不用得上。

但是到了创业团队，我发现没有精力学完这所有东西，策略就被迫转变了。只要知道这东西在那里，能做哪些事情，就好了。要用的时候临时学一下。而且我感觉这才是正确的学习方法。

UI中国：如果不做UI设计师，你愿意做什么，或者未来最想做的事情是什么？

**我：**其他一些创造类的工作，比如木匠、厨师、音效设计等等。

未来没什么大计划，过好眼下的生活吧，尽量保养身体，万一以后有条件环游世界呢？

UI中国：能不能向大家展示一下你的工作台？

我：

最后~

谈起了他做个人网站的缘由。可乐橙笑谈是因为同事怂恿为了更好的找工作加上功利心驱使才有了victor42.eth.limo的产生。

不过后来因为个人的原因，这个逐渐成了他的私密花园，内容都是主人精心修缮但又在自然而然的情况下枝繁叶茂，阳光有时雨露有时，简单且芬芳。三三两两前去拜访的人自然懂得主人的心意。

用他的话说就是：“这时候设计的意义才体现出来。”

10条建议打造更聪明的设计流程

hi@victor42.work (Victor42) — Sun, 03 Jan 2016 00:32:00 +0000

[国外设计第117期]

身为用户体验设计师，回归对艺术设计的热爱非常重要。尤其是当你寻找创意的时候。

原因有很多。或许是我们工作节奏太快强度太高，精疲力竭。也可能是你身处一个抑制创意的环境，每天要与众多阻力抗争。也可能你不知不觉就成了一个循规蹈矩的执行者，一遍遍重复同样的工作。或者仅仅是你感到厌倦了。

设计流程能让你自信满满地进行创新，因为创意的萌芽和演化是有迹可循的。

你的流程不应该一成不变，每个项目都有其约束。无论是资源还是技能，你的设计流程都必须随着这些实实在在的制约而改变。

下面，我依据自己职业生涯的亲身经历，整理出10条改善设计流程的建议。

1. 寻找解决方案之前，先确定问题

爱因斯坦说过：“如果我有一小时来解决问题，我会花55分钟思考问题，5分钟思考解决方法。”

许多设计师都犯了致命错误，认为问题是显而易见的。多数时候，表面问题仅仅是根本问题的一种表现。找到真正的问题时你一定会有所觉悟，因为它同时会解决许多其他问题。

免费电子书网页UI最佳实践中提到，以“我们该如何……”作为设计项目的起点，开始设计的思索。牢记一点，首先要确保你在设计正确的产品，然后才是正确地设计产品。

2. 对用户了如指掌

有个开发者曾经告诉我，她正在为“每个人”打造一款产品。这对于批量生产或许说得通，但如果不能精确指定某一类用户，就无法创造有意义的用户场景。

没有有意义的用户场景，就不知道你的MVP(最简形态产品)是什么，也不知道如何建立产品计划与策略。所有的产品都致力于解决某些微不足道的问题，对于需要它的人而言，这就简单易懂。

发起用户调研，创建人物角色，开始制定用户情景与流程。任何能给用户留下更深刻印象的手段，都有助于将设计推向成功。

3. 思考极端的解决方案

暂时逃离创意的困境，也是设计的乐趣之一。天马行空的机会总是值得歌颂。

打破惯例恰恰对它有益。跳出单一策略思考，将用户一天的生活写在故事板上，看看有哪些可能发生的接触。撇开草稿，自由发挥。

别在这上面花上数周时间（除非你时间充足），但是一次创意的停歇能将你的潜意识与要解决的问题联系起来。

看看Duolingo。这个应用感觉更像是一款手机游戏，而不是语言学习平台。这完全是无意识的，在理论上可能会受到质疑，但是数字证明了其价值——在2015年6月的Google Capital中，这家公司估值4.7亿美元。

在你的行业外寻找灵感，设计方案的有效（及创意）会出乎你意料。

4. 设计之前，建立一个假设进行测试

假设提供了一条寻找真理的道路。每个设计都要构建在某种坚实的基础上。

把它想成是论文的论点，这就是设计的核心。早在开发工作之前，这里就是用户情景演绎的地方。

尽可能多地头脑风暴各种情景，与你的团队在白板上分享。进行设计工作室练习，让参与者画出他们完成特定任务的方案。你得持续探索（并且迭代）你的假设，这是设计中的第一步。

需要一套有用的框架流程，请看Maximilian Wambach（Ebay的交互设计）的方法。“如果[动作]那么[结果]，因为[用户有需求/遇到问题]”这样的思维模式极其有用。

5. 就最佳方案与不同人探讨

如果你的设计是可靠的，那就要能经得起批评与讨论。来自不同背景、有不同经历的人，能为你指引更好的方案。

可以考虑成立一个利益相关者的智囊团，让他们分享各自独特的视角，为你的设计提供改善建议。与你的设计主管一起，确保产品团队仍然有最终的决定权，否则你就会落入群众设计的陷阱。

6. 写文档创建一则故事

产出一份讲述故事的文档。你设定的人物角色是其性格的缩影。使用场景是荧屏展示的关键部分，线框图是舞台，操作流程和用户流程是编舞，UI组件集则是舞台设计。

所有相关元素都相互交融。

文档往往被忽略了，因为它缺乏环境。把你的设计资源与产出当成拼图，相互独立时价值甚微，拼接起来却成为一幅讲述故事的好画面。

不要视野狭隘，过分沉迷于优化某一项设计文档。相反，要确保每份文档之间的关联简单易懂。

精简那些无法推动设计前行的文档。如果文档没有用，就没有必要创建它。

7. 在纸上设计与测试

任何阶段都可以进行快速的纸上原型设计，而且这对设计决策总有帮助。

给自己或团队一定时间来迅速迭代创意。设计一旦以像素形式出现，就很容易对其过分依赖。而在纸上绘制原型能让你的大脑不断探索可能性。

照片来源：“App sketching”

绘制草图有利于探索创意，然后召集3-5人进行一场迅速的非正式可用性测试。

一旦想到你认为可靠的设计，通过虚拟的操作流程对它进行测试。找个伙伴一起推演各种不同使用场景，你们可以相互提醒，避免遗漏和潜在的错误。一旦你的伙伴理解了这套设计的作用，在可用性测试过程中，他就能扮演“人肉计算机”的角色操作这些纸上原型。

8. 将产出物贴在墙上

在墙上贴大量的便签可能是陈词滥调了，但这么做确有非常正当的理由。

照片来源：Acquity Group的关系图

想想所有那些侦探剧。当侦探在探案时，墙壁就会变成犯罪地图。所有的证人与嫌犯，都与收集来的证据一起展示在上面。

为特定用户设计时，也会发生同样的事情。就像侦探一样，用户体验设计师需要定位问题与用户之间的关联，然后将它直接连接到解决方案上。这些实际产出物不是用来展示的。团队有一个分享的地方，任何时间都能查看，有助于将用户体验方法灌输进每一个人的工作流程。

9. 创建低保真原型用于测试

低保真原型可以用基本的HTML、Keynote、PPT、剪纸、故事板、和特定的原型工具来创建，例如UXPin（我对此非常熟悉）。

一旦进入开发阶段，某些限制总是不可避免（浏览器兼容性、网站性能等等）。在开发之前验证你的设计，因为它能更好地呈现用户故事，使开发者们充分感受与理解。

低保真原型可以让你连接多个线框图，创建完整流程。这样一来，你就能测试这套流程的有效性，而不仅仅是用户在屏幕上看到的各种元素。可以以此验证交互的次序对用户是否有效。

10. 协作创造

设计师不是孤岛。人们往往独自工作太长时间。

就像配对编程已经被证明能够减少技术错误（因为人很容易陷入代码盲区），尝试Cooper的配对设计的技巧，能够更好地分析和迭代。与其他人一起工作，能够产生自我提升的动机，营造团队工作的感觉，在生产力与分享精神之间找到平衡。

认为只有与其他人隔离开才能做出好的设计，这是相当守旧的想法。这个想法就像办公室吸烟一样已经不合时宜了。遵循指南：《设计出不让开发厌恶的效果图》，你的项目也可以很有趣，充分协作。

准备好打造属于自己的设计流程了吗？

可以从用户体验设计流程地图开始，然后在UXPin这类工具中实践，与你的团队并肩设计。

原文链接：http://designmodo.com/design-process-tips/

小而美：清晰的可穿戴设备界面

hi@victor42.work (Victor42) — Sun, 27 Dec 2015 00:44:00 +0000

[国外设计第116期]

移动端的设计教育我们要设计得小，如今，可穿戴设备则使我们的设计愈发的小。手表的设计或许听起来吓人，但只要回到设计理论的本源，你就能做出正确的选择。

提到穿戴设备的设计，就要面临一系列其独有的挑战。

屏幕很小，甚至可以说是袖珍，而且还流行着许多种不同的穿戴设备。（一直都有各种手表式的产品在冲击市场。）有些提供了彩色屏幕和丰富的功能，其他一些则有着超简单的美学外观和稳健的功能。

各种不同的穿戴设备

从简单的健康追踪设备，到能够与手机系统同步的功能齐全的手表，设计这些小屏幕界面时，有许多变种需要考虑。

图片来源：Apple Watch

图片来源：Tom Tom Multi-Sport

图片来源：Fitbit Surge

目前，我们可以看到有3种主要类型的穿戴设备：

依赖手机的手表，例如Apple Watch和Samsung Gear S2
独立手表，例如运动员中流行的那些带有GPS功能的手表
运动追踪器，例如Fitbit Surge

每种设备都只有一块几厘米大的屏幕，使得手表的UI设计成为一项特别的挑战。有些设备用了彩色屏幕，还支持动画。许多都带有手机上的功能，而其他则仍然局限于黑底白字显示屏（也有白底黑字的）。

运用UI设计理论

那么，要如何设计所有这些设备？又如何保持一致？

这最终都要回归到你的第一个设计项目，以及其中的设计理论和概念。这些概念包括色彩、对比、留白和字体。

色彩

如今多数手表屏幕都黑色的，许多手表应用是在深色背景上使用亮色元素。这使得色彩的选用尤为重要，因为你选用的颜色既要与环境融为一体，又要清晰突出。

处理深色背景，就意味着设计元素要基于一套浅色或者亮色的配色方案，这令人想到Flat配色和Material Design。

图片来源：Runtastic

上图中，Runtastic就处理得很好，明亮的色调在深色背景上清晰易辨。蓝色有助于展现品牌，更鲜艳的绿色则用于按钮和用户操作项。其中所有颜色都容易辨识，对设计与功能起到了积极的作用。

对比

对比在小屏幕上同样重要。

设计应该清晰地划分各项元素，在它们之间建立起大量区分。屏幕上有多个点击区域时，这点尤其关键。还有一个重要原因，它使得元素能一眼轻松瞥见，这正是许多手表用户的使用方式。

图片来源：Streaks

上图中，Streaks运用了明暗的手段来建立显著的对比，提升了易读性和可操作性。每个圆环都设计成可点按的，功能也清晰可见，这得益于所用的颜色与尺寸，让每个元素都鲜明突出。

留白

在小屏幕上，留白是成败的关键。留白过多则没有地方呈现内容。留白太少元素难以分辨和阅读。两个极端之间，只有一片狭窄地带是对功能和可用性有益的。

图片来源：The Guardian

上图中，卫报做得很好。图片与文字的摆放留出了大量的空间，每“屏”上只显示一则消息。消息包含文字和图片，请留意每行的字数和加大的行距。

字体

在这些袖珍屏幕上，只有一种字体有用：简单的字体。

市场上几乎所有的应用都用的是简单的无衬线字体，字重也是中等（还有些更细或粗的字体用作辅助）。字号通常都比你所想的更大。每行大约20个字母，每“屏”不超过6行。再多一点点文字，就难以阅读了。

图片来源：Citymapper*

上图中，Citymapper用了几种不同层次的文字，为各种操作建立了可靠的区分与层级。字体简单，文字清晰。这款手表应用将所有元素组合起来——色彩、对比、留白、和优秀的字体——帮用户梳理出最重要的信息。

提及穿戴设备时，朴素、简约和微交互同样重要。将它们相互融合，你就会得到在小屏幕上看起来（还有用起来）很棒的产品。

图片来源：Pittsburgh Steelers App

上图中，Pittsburgh Steelers app结合了所有这些元素，运用大量色彩和图片，使得应用美观惹人喜爱，同时也易于使用。正由于元素间大量的留白与反差，还有清晰可辨的操作项，内容与信息具备了功能性。

接下来呢？

讨论穿戴设备时，我们其实是在学习穿戴设备的最佳实践，配合一切具体创意来完成UI设计。

虽然许多穿戴设备界面是原生的，我们能不能在其中融入更多网页和其他应用呢？多数设计师都在遵循现有工具进行设计，两者能否结合？

我们是不是该思考一下，穿戴设备有哪些不同的使用方式？

去问每一个人，似乎他们都有自己使用穿戴设备的理由和目的。但就目前为止，与手机相连的穿戴设备似乎只是手机本身的一种延伸。我们希望这个状况有一天会改变，但是用户是否会在手机上浏览网页，仍是一件难以预料的事情。

图片来源：7-Minute Workout

穿戴设备的应用何时能走出原生应用的范畴？

移动优先的设计我们不久以前才开始谈论。如今它已成了第一原则。

这也会发生在穿戴设备上吗？很难说。在行业朝着那个方向发展之前，市场可能就会趋于饱和。（预计Fitbit和Apple Watch将会占据穿戴设备的主导地位，创造出250万到600万的手表销量。相比之下，iPhone用户预计有940万。）

结论

基本设计原则的存在有它的理由。不论设备尺寸如何，运用这些概念都能创造出有效的设计。但这并不是说应该坚持UI设计理论中的每一条“规则”。

去实验去尝试，但要聆听你脑海中的微弱声音。当你开始质疑使用方式和设计方式时——不论是多么小的疑虑——都应该回归本源。而且要找用户做测试。

焦点图来源：Forbes

原文链接：http://studio.uxpin.com/blog/think-small-applying-ui-design-principles-to-wearables/

别让扁平化设计平淡无奇

hi@victor42.work (Victor42) — Sun, 20 Dec 2015 21:12:00 +0000

[国外设计第115期]

早在2013年iOS7发布以来，扁平化设计就轰动了互联网世界。从那以后，它就持续发扬光大，并且发展出数量惊人的变种。

随着带有扁平化色彩的Google Material design规范的推出、卡片式设计的广泛采用、还有排山倒海的极简化趋势——似乎在可预见的未来，扁平化设计会成为主宰风格。

正如2015与2016年的网页设计趋势一书所描述的，扁平化设计正在进化：

“最初的扁平化设计是严格的扁平，极少有强调，注重极简设计。近来我们则看到了更多吸引眼球的元素，例如阴影与着色的暗示。尽管纯粹的扁平主义者会反对，但设计圈接纳了它，它与其他流行的设计模式能够有效结合。”

以往波澜不兴的风格发生突变，引发了一连串有趣的问题。

如果它是如此的流行，那如何与众不同地将它运用在自己作品中呢？你要的是扁平化设计，而不是平淡无奇。巧妙的运用，与粗劣的复制，这之间有何区别？

本文讲的正是这个。我们看看扁平化是如何进化的，怎样能使你的设计引领潮流。

长投影

我们所谈论的设计应当是扁平的，但阴影能产生纵深感，虽然这似乎有点违反直觉。

但这些细微元素能为设计增添一丝情调，又不至于太引人注目。实际上，他们仍然可以算作留白的一部分，虽然他们从技术上说确实是一种视觉元素。

毕竟，没有光哪来阴影？

更重要的是，长投影为画面增加了一种反差元素，使得整个视觉体验变得有吸引力。要达到想要的效果，甚至投影都不必那么长。

请看：

图片来源：Kikk.be

柔和的色彩和短投影呈现出一种美妙的视觉元素，并不会抢了页面导航和主要信息的风头。请留意这些阴影如何令画面明亮起来。也使得图像仿佛脱离了页面。投影、扁平化的内容区域、还有柔和色彩这三者的结合，与网站上的动画元素融合得非常好。

说到颜色，应该很容易引出我们下一项扁平化特性。

色彩运用：鲜明色彩与辅助色

色彩是扁平化设计的重要能力之一。

明亮、积极的色调，成就了许多扁平化的设计，用以弥补视觉表现力上的欠缺。扁平化设计中的投影装饰，看起来跃然纸上，为设计增添了鲜活和动感。这与其他动态视觉元素能够很好配合，例如视觉差滚动和CSS动画。

图片来源：Spotify

而且，这些明亮的色彩能作为一种辅助色，用在柔和的背景上。这似乎成为了一种标准的未来趋势。就像这样：

图片来源：Takeit

深色背景上的亮色图片绝对足够给人留下深刻印象。强烈对比的视觉元素，更是与如今的扁平化趋势形成完美的配合。通过简单或夸张的手法来突出事物，其中也包括字体。

简单/夸张的字体

如今的“扁平”字体通常由单一字体组成，或者是两种非常接近的字体。这一点造就了易读、易辨识且默默无闻的字体。这正是关键所在。

你不希望字体分散注意力。如果字母带有过多的风格与个性，就会阻碍用户的阅读流程。

图片来源：Cienne

最好的做法是“隐形的设计”，换句话说，就是做出让用户不会注意到的设计。因为每当他们留意设计，就会丧失沉浸式的体验。

当然，你也可以走另一个极端。在处理极简式界面时，你得调整所加入的元素。在空白背景上使用大的粗体字，可以为界面的文案营造出独特的语境。如果界面没有其他任何视觉元素，你就必须呈现出某种美感，而且能用的也只有字体和颜色。

图片来源：Truthlabs

幽灵按钮

要做到漫不经心——甚至如空气般透明——那我们就得花点功夫来谈谈幽灵按钮。

你能一眼就找出下图中的幽灵按钮吗？它们并不显眼，这正是关键。透明按钮给用户一种暗示，导航项未必会从下层的视觉重点上抢夺注意力。

结论

总而言之，扁平化设计的元素与其演化的成果，全在于吸引注意力。

无论是使用浮夸的背景或焦点图等视觉元素，还是极力克制，只用文字或导航提示——背后思想都是相同的。使用少量元素，按照极简方式排布，在页面上创造出对比，正确引导用户的注意力。

扁平化是潮流中的先行者。究其原因，是因为设计师能够通过各种方式，在简单的界面内体现多层次的复杂性。

我预料扁平化设计会作为一种趋势，求新求变，持续演进。同时保持最核心的简洁，使它引领潮流。

要了解更多扁平化设计与其他优秀的网页设计趋势，请看这本180页的2015与2016年的网页设计趋势。

原文链接：http://studio.uxpin.com/blog/how-to-prevent-flat-designs-from-falling-flat/

作者信息： Zack Rutherford Zack Rutherford is a UX Design Writer at UXPin. His work has been published in UX Mag, awwwards, and Speckyboy.

网页设计未来趋势：高清设计

hi@victor42.work (Victor42) — Sun, 13 Dec 2015 00:04:00 +0000

[国外设计第114期]

网页设计中最热门的技巧之一，就是高清背景图，这得益于高清显示屏的普及。但面对复杂的商标时，就不好处理了。

本文中，我们来展望一下网页设计的未来。高清网页设计是否能主导网络，这已经不是问题了，关键是高分辨率显示屏何时能够普及，这是提升视觉设计的必备条件。

下面开始，我们将要探索如何运用图片、视频、或是动画来创建高清背景，并且把所有内容有层次地组合。

图片

超大图、焦点图、全屏图。

以上几个词，最适合用来描述现代网页设计的背景图片。设计师们对高清设计不仅停留在思考层面，他们将其发挥到极致，用背景图占据了整个画面。

这种设计技巧很有效，因为用户天生就是视觉动物。

正如《2015与2016的网页设计趋势》所描述的，毕竟我们理解周围世界时，视觉在主导潜意识。而且，令人愉悦的图片在一定程度上能创造更好的用户体验，因为我们理所当然认为有吸引力的东西更好。这看似极其肤浅，但在设计中，感知就是真相。

高屏幕分辨率创造了绝佳的机遇，让用户能看到从前无法察觉的细节。图片中的小细节——例如Junction Moama所用的Macquarie公园的多色调纹理（上图的两种）——提升了界面的精细程度，对至关重要的第一印象大有帮助。

使用高清图片的5条建议：

使主画面成为视觉焦点——虽然图片是作为背景，不代表它就能占据舞台中央。优秀的照片能与用户建立情感连接，学习图片的精妙之处，看它如何影响设计的视觉层次。
考虑使用多图——使用我们在网页UI模式中提到的幻灯片或卡片风格的结构，来应对内容丰富或相片集类型的设计。
在图片上添加效果——模糊或色彩叠加，能够增加或是改变一张图片的调性（例如全用红色调会更加积极）。这在高清图片上很管用，因为下层的图片画质够高，细节仍清晰可辨。
考虑图片在不同屏幕尺寸下的效果——安排各种尺寸下的背景图，使之能适应任何断点，不会露出纯色块（那其实是真正的背景）。
打破局限——照片背景不一定要遵循标准的1:1.5相机比例，也可以使用从各自背景中裁剪出来的图片。

背景照片能创造简单的视觉吸引。选用优秀的照片强化品牌、产品或信息时，效果最佳。记住，有时会用多张背景照片，要确保这种设计结构和周遭元素能与每张图搭配良好。

视频

高清视频背景可能是今年最盛行的技巧之一——尤其是有着疯狂感的大量快镜头动作。从AirBnB这样的巨人，到几乎所有类型的小网站，视频迅速成为了网页设计中重要的一道风景线。

最初一批运用背景视频的网站，正是电影网站。例如《少年派的奇幻漂流》官网，用了一段电影预告作为背景（而且还是可下载的格式）。

视频作为一种设计技巧的出现，与它本身的新奇性毫无关系。在HTML5（还有能播放高清视频的智能手机）推出以前，许多浏览器与网络连接环境根本无法处理全屏视频背景。

任何关于高清视频的讨论，都应当围绕最终成品。无论是像Dunckelfeld’s这样的超现实主义黑白手法，还是像AirBnB这种更加现实的蒙太奇短片，你都需要来回调整它的饱和度和帧速率，让视频更吸引人，而不会使人分心。

光有一段视频可不够。所有拍摄优秀电影的技巧——取景、变焦、平移——在网页视频中同样重要，即便是用作背景。

Brindisa Tapas Kitchens做得非常棒，它剪辑了大量短片来展现它的食物与环境。视频从多个角度拍摄，有些片段用了缩时摄影的风格加速，另一些则刻意调慢来营造合适的氛围。

同样，在设计中运用高清视频也有5条建议：

注意视频长度——背景视频应当在几秒钟内呈现一段视觉故事，让用户感受到氛围。最佳循环间隔是10到30秒。
关闭声音——对于多数用户而言，声音仍是一种很极端的自动播放元素。如果想要使用声音，也要默认设成静音。
关注加载时间——虽然高清视频很有意思，但不能因此拖慢网站加载速度。如果用户在加载过程中就退出了，视频再精彩都没有用。
考虑备选方案——有些设备无法渲染高清视频。在Goolge统计中查看访客最常用的设备，根据情况进行设计。通常，你会选取一张静态图片作为备选方案。
坚持高质量的视频——不论是否自己拍摄，为了清晰出众的画质，最好雇人来做这个事情，或者使用版权视频。不仅仅因为它要用在高清的环境中，也因为需要相当好的画质。就像照片一样，如果超过原片分辨率使用，视频就毁了。

网页设计，尤其是使用背景视频的网页，都在营造一种电影般的体验。网站中的高清视频，创造了一种完整的多媒体体验，在运动的背景之上层层传递信息。

动画

高清背景动画存在于固定图片的设计中，因为这些动画往往同时包含固定与运动元素。

它与加载动画同样盛行，数十年来设计原则几乎没有改变。唯一改变的是高清显示屏能呈现的画质水平。

成功的高清动画，关键在于时间控制。动画应当有着流畅无痕的效果。所有的循环动画都要首尾相接。

《2015与2016的网页设计趋势》中描述过，我们建议牢记以下5条原则：

坚持简单的动画——太复杂的故事与动作可能会加重认知负担，如果能实现完美的基本动画，就不要制作复杂的效果。
使用亮色调来关联界面——例如，可以从简单的鼠标悬停效果入手，改变链接颜色。考虑选用配色中最亮的颜色作为鼠标悬停色，让人注意到这个动画效果。悬停时放大文字也是一种视觉线索，能够起到额外的强调作用。这些简单的手段有助于突显特定的用户操作。
利用高清屏幕的特性——为了最佳的视觉效果，使用可缩放的图片格式，例如矢量图。
用视频的方法制作动画——同样的精妙之处也适用于动画。应当避免不和谐的运动和物体，例如声音，那会令用户感到厌烦。
为合适的观众制作动画——虽然许多设计师常把动画和插画合为一体，但这未必适用于每个网站。

同样，要注意细节。根据网站与用户的不同，动画可以是卡通式、视频风格，或者仅仅是插画环境中的一系列运动感。动画可以通过用户操作触发——点按、滚动或是鼠标点击——或者就简单地自动播放。

层层构筑：融合所有内容

高清背景只有作为某一层信息时才有效果。精彩的图片、视频或动画独木难支——你得考虑它与屏幕上其他内容的关系。

以下是3个简单的案例研究，这几个网站都将它们融合得非常好。

Adidas设计工作室

Adidas设计工作室用了各种技巧处理鲜明的大尺寸图片，号召人们加入。

全屏背景实际上链接到一段视频，滚动操作还有视觉差效果，引导用户浏览整个产品线和相关信息。清晰的图片搭配同样清晰的文字。通过一种温和的方式，用颜色构建了视觉的层次。

Flipboard

Flipboard熟练运用固定背景图的技艺，这高度依赖传统的摄影艺术。

高清图片包含许多细节，却不会咄咄逼人。图片还延伸到了屏幕之外，让人想象餐桌还会向各个方向延伸，在不同的屏幕分辨率下也确实如此。整个色调将这张图片塑造成背景元素，使注意力保持在其上更明亮的行动号召信息上。

5 Eme Gauche

5 Eme Gauche的特色是具有多层元素的大背景图，包含底部导航、社交媒体图标，还有屏幕中央的品牌logo和主页链接。

每层内容都与背景有互动，并且有所区分，让你一眼就能看出屏幕上的分层关系。这个网站的内部层级很清晰，因为所有页面都采用同样的分层格式和滚动动画。

结论

尽管高清背景近年来正逐渐盛行，但不能仅把它当作一种潮流。它们的产生，是可用性终于跟上科技发展的结果。

这意味着人们不会有一天厌倦高清设计，转而寻找下一股潮流。作为日渐成长的视觉行业，这种创作技巧绝对值得一学。

想学习更多不会过时的网页设计技巧，请看UXPin推出的免费电子书《2015与2016的网页设计趋势》。这份指南通过分解165个今日最佳设计，讲解了10种最有用的趋势，它们来自Intercom、Spotify、Apple、Google这样的公司。

原文链接：http://designmodo.com/high-definition-design/

设计须知：客户演示前的准备

hi@victor42.work (Victor42) — Sun, 06 Dec 2015 18:39:00 +0000

[国外设计第113期]

客户项目的截止日期近在眼前。向客户当面演示的时刻即将来临。你准备好了吗？

把设计稿丢给客户，并不是正确的客户演示方式。要使你的设计或提案更容易过稿，还有一些其他的事情要准备。演示非常关键，你需要做好万全应对，让自己感到舒畅、自信，使你的项目（或提案）更容易留下好印象。

下面是具体的做法。

从基本要素着手

甚至在你正式开始演示之前，就要弄清楚你到底在演示给谁看？你在做客户演示时，会有哪些人参与？这次演示的目标是什么？了解观众，是制订合适策略的关键。

在不同的观众面前，你的演示也需要量体裁衣。面对公司老总和设计团队成员时，演讲风格可能就会不一样。

通过这3种方式来了解你的观众：

提前几天确认演示细节，确定听众的身份与人数。
查询这家公司与员工，看看他们在网上的“形象”。这会让你与他们的接触更顺畅，得到一些视觉暗示，有助于你与他们正确产生共鸣。
如有必要就请求援助。如果你的演示观众是一大群人，就该考虑是否需要协助了。

设计一份演示稿

你是一名设计师，演示稿会反映出你的设计质量，它也需要经过设计。

思考这些点：

灯光与视力。这些资料能否看得清？
幻灯片是定制的、还是带品牌logo的？
一张幻灯片讲一件事。确保演示简单易懂。
再三检查所有元素，确保它们视觉与文字内容无可挑剔。避免使用看不清的文字图片、或是半成品。
准备一种备用方式，以防技术故障，还有各种因素偏离预期。

如果想要了解演示稿的设计，可以考虑使用Slides。这件Designmodo的工具有着专业的外观界面，可以通过定制化帮你你打造一份非常棒的演示稿。

准备好阐释设计

客户演示中，你还需要思考可能被问及的问题。一定要准备好答案。（记住，有时候最好的答案就是“我会再看一看的。”不要过分承诺弄巧成拙。）

思考演示内容时，需要专注于两件事：

阐释基本的设计，它的意义何在
重点演示设计方案的独特之处

这些因素都确定下来，你也就准备好面对客户了。

这种演示评审会的最高目标，就是将你的设计服务出售给客户。要把自己想象成某件产品的销售员。把你的设计当作一件产品，这样才能将它出售给客户。准备好解释设计的任何方面，回答各种问题——甚至包括你职能范围之外的问题。

练习演说

作为你设计作品的销售员，演说至关重要。客户对这个项目的反馈，与你的演说质量有很大关系。所以需要练习并改善你的演说。

记住，在设计方面，“能演示就不要用说的”。即使你手头只有效果图或是草图，你仍然需要可视化地呈现你能为客户做什么。（如果你的演说是为了阐释你所提供的服务，那就一定要从作品集中选出最佳案例。）
演说要言简意赅。不必过度解释你做了什么、能做什么。（许多人就在这个环节遇到了麻烦。）只讲你需要表达的，然后就此打住。
在演说中加入一些兴奋点。虽然这类事情气氛通常有点紧张，但尽量不要照着稿子念，或是整场演说都没有抑扬顿挫。你的音调与肢体语言，应当与演示稿的视觉“调调”相吻合。如果它是非正式的，那谈话也要随意。如果它节奏快、令人振奋，演示中也要融入这些情绪来使观众更加投入。
留意时间。提前排练演示，了解所耗的时间。演讲与幻灯片同时进行，让所有因素相互配合。

演示大纲

它能帮你梳理出一份可供日后使用的演示大纲。这能使整个流程更加顺畅。

以感谢开场，对项目进行简述。
告诉客户你的项目进行到了什么阶段，下一步是什么。
提醒他们提供反馈与建议。
视觉演示，贯穿你具体的设计作品。
请客户提问或讨论。
总结，例如下次演示之前需要客户准备的事情，还有你接下来的工作内容。

结论

准备客户演讲是十分令人紧张的。以上这些因素能帮你更好地准备和应付这项任务。

如果你不知道从何下手，那建议你看看Slides。它是专为演示而创造的，你可以用于个人网站或是当面沟通。

原文链接：http://designmodo.com/designers-checklist/

作者信息： Carrie Cousins Carrie Cousins has more than 10 years experience in the communications industry, including writing for print and online publications, and design and editing. You can connect with her on Twitter @carriecousins and Google+.

KT没有女朋友

hi@victor42.work (Victor42) — Thu, 03 Dec 2015 18:12:00 +0000

忙着打理自己的家，不知不觉又好几个月过去了，许多栏目都无限期搁置了。不过大家放心，我最不可能停的就是幽默栏目，因为这就是生活本身。

雕像中的赢家

我想过一个问题，历史人物对后世的影响，在某种程度上也体现在雕像上。关公雕像遍天下，可见他留下的历史形象多么鲜明；毛泽东的雕像可以在任何一处红色景点看到；孔子游历四方，人到哪里雕像也跟到哪里。那从这个角度看，在所有领域中，最具影响力的历史人物究竟是哪一位呢？

某天乘车时得到了答案。雕像最多的人物并不是什么开国元勋、盖世英雄、文化领袖，他的名字大家都熟悉——禁止攀爬。

大闹网易

小钢约在网易上班的阿文日本自由行，临到出发前一个月阿文变卦了。

“这个贱银，上次放我鸽子一定要找他算账。”

“直接去大闹网易，然后说不定被破格录用了”，大家纷纷声援小钢。

“提把斧子到大门口喊道：骚文你给我粗来！”

“要提两把，喊的时候两把斧子要相互碰一碰，这样有气势”，我补充道。

“然后你在后面壮声势。”

“我在后面提个录音机，接个音响，放金蛇狂舞。”

（以防有朋友对这首曲子没什么印象，在此放出链接。现场会有怎样的效果，一听便知）

http://music.163.com/#/m/song?id=5271923

KT没有女朋友之一

我：最近上班比较闲，可以做自己感兴趣的事情。

KT：可惜不能弹吉他。

我：要是当个小区保安，说不定可以上班弹吉他……

KT：迷倒万千少妇。

我：为什么大家提到吉他就觉得是迷倒万千少妇呢，为什么提到唢呐没有这种感觉，这是为什么呢？

KT：因为乡下结婚吹唢呐。

我：那为什么吹笛子也不能迷倒万千少妇呢？口琴也不能迷倒万千少妇，手风琴也不能迷倒万千少妇？

KT：这就是我没有女朋友的原因，我都会……

有没有听过CCO？

程序员小钢又打算掀桌了，诶……我为什么要说“又”呢?

总之他在群里说让大家给个好去处。一有人要掀桌，大伙就来劲了。说还打什么工，咱们成立个网络科技公司可好？

“同意，先去注册一个！”

“CTO小钢。”

“老子不干CTO，面试两个创业公司的CTO，都sb，净扯淡。我要做CEO！”

“那BB来做CCO吧！”

“干嘛的？”

“cheaf cooking officer，就是主厨。”

丢雪球

这回轮到KT上班闲了。

KT：好无聊啊，我边上那个也没事做，然后他的东西貌似全想丢给我做。

我：这样你们可以丢来丢去玩，他把文件传给你，你接一下。你再把文件传给他，他接一下。来来去去，一下午就过去了，皆大欢喜。就像wow里的雪球，[使用:向队友投掷！]

KT：怪不得你说没时间玩wow。

我：这之间有什么关系？

KT：因为你一般都和队友丢雪球丢一个下午。

诶……为什么我会无法反驳呢？

Contact Us

忘了要求证什么，某天打开了mapbox的官网。这个工具挺好的，最基础的用法，可以生成牛逼哄哄的地图。

不过我发现似乎有什么不对。

原来只要contact us一下就有那么多东西啊哈哈哈哈，那还付什么钱！

点的设计

KT要我推荐我两三个平面设计素材网站给他。我问他要什么类型的的素材，图标？照片？还是其他什么。

他说比如我现在想要个点的设计啊！

啥？

点。

点是个球啊！

就是点啊。

给你，点的设计。

小熊猫

国庆回了趟家，一伙人去火锅店腐败。

菜上齐了，一样样下锅。KT端起一盘虾滑，说我来给你们下。

人杰说你积德诶，放着让服务员来下吧。你看你下的那叫神马玩意，虾滑被你切成了蟹肉棒。

虾滑不就这么吃么，你还想我切出个小熊猫来啊！？

……

（全场鸦雀无声）

从此以后，我就发现小熊猫这个词特好用。比如竹子跟我抱怨他们公司的产品经理唧唧歪歪，一个按钮颜色让她改了20多版。这个时候，我就能脱口而出：

“搞什么不就个颜色么，调来调去，还能调出个小熊猫来啊？”

KT的日常

KT上班经常和我现场直播他们办公室的故事，主角通常是一只喵星人。他说过很多次，楼下的大姐经常对着猫讲话，一讲就是大半天。不过我一直对他们办公室的格局不是很明了，很难想象，直到……

“楼下在抓猫，然后在啊啊啊啊的叫，老子已经无语了。”

“你是坐在吊床上办公么，楼下什么都能听见。”

KT没有女朋友之二

这一期KT的故事貌似很多啊，主要是最近和他扯淡扯太多了。这人脑洞太大，是激发灵感的好伙伴。副作用就是扯到深处会毫无顾忌地犯2。

我：为什么会打雷下雨，噢！为什么有冬和夏天，是个难题！

KT：类欧，下雨要搭讪类哦……等等，我知道我为什么没女朋友了。

为可视化数据寻找适合的配色

hi@victor42.work (Victor42) — Sun, 29 Nov 2015 01:29:00 +0000

[国外设计第112期]

虽然如今好的配色方案已经唾手可得，但为数据可视化找到合适的配色方案，却仍是一项巨大挑战。

在Graphiq，事情甚至更加棘手，因为我们要通过上千种各不相同的数据集合来传递信息，它们有着各自迥异的视觉表现。

目前的问题

我们没有立刻开始建立自己的配色表，而是发起了一些调查，研究网络上已存在的配色方案。令人惊讶的是，我们发现其中只有少数是为复杂的图表和数据可视化而设计的。我们发现一些不能使用现有配色的原因。

问题1：辨识度低

我们看过的许多配色方案都不适用于数据可视化。不仅由于颜色的明度差异不大，其实它们在创造时就没有考虑过辨识度。Flat UI配色是最广泛使用的配色之一，原因显而易见：它非常优秀。但是，正如它名字所述，这是为界面而设计的。使用Flat UI配色的话，色盲者就难以辨认出数据图像。

Flat UI配色的完整色彩、红色盲模式、灰度模式。

问题2：色彩不够多

另一个问题是，许多现有配色方案没有足够的颜色。创造Graphiq的数据可视化时，我们需要至少6种颜色的配色方案，甚至有时需要8到12种颜色，才能满足所有的应用场景。我们看过的许多配色方案都没有足够多的色彩供选择。

下面是Color Hunt里的一些例子：

虽然这些都是很棒的配色，但它们都不够灵活，无法提供丰富的色系。

问题3：难以区分

不过等一下，还有一些配色方案看起来像是渐变——理论上说可以创造出任意数量的颜色，对吧？

不幸的是，它们明度差异通常不大，其中许多颜色很容易变得无法区分，就像这一组，同样来自Color Hunt：

我们试着选第一组，把它扩展为10级色彩：

如果普通用户能正确的区分出这些颜色，并与相应的数据项对应起来，我就服了，尤其是能区分出左边的4种绿色。

我们的方式

在Graphiq，我们以数据为生命，并且投入了大量时间寻找能够用于数据可视化的配色方案，不是一组，而是许多组。我们在这个过程中受益良多，并且打算分享这些能够创造出灵活配色的准则：

第1条：色调与明度的跨度都要大

要确保配色非常容易辨识与区分，它们的明度差异一定要够大。明度差异需要全局考虑。选择一种单色系的配色，并且测试它在红色盲、绿色盲与灰度模式下的表现。你就能迅速了解这个配色的辨识度水平。

Google Material配色中的浅蓝色的完整色彩、红色盲模式与灰度模式。

但是，有一组明度跨度大的配色还不够。配色越多样，用户越容易将数据与图像联系起来。如果能善加利用色调的变化，就能使非色盲用户更加轻松。

对于明度与色调，跨度越大，就能承载越多的数据。

第2条：仿照自然的配色

设计师都知道一个小秘密，对于理性派们而言这似乎不符合常识：并非所有颜色都是均等的。

从纯数学的角度来看，淡紫到深黄的过渡，与淡黄到深紫的过渡，感觉大概相似。但我们在下面可以看到，前者感觉很自然，后者则不是。

这是由于我们已经习惯于那些长期存在于自然界中的渐变。在华丽的日落中，我们就能看到明黄色向深紫色的渐变，但却没有哪里能看到淡紫色向深黄色的过渡。

照片来源于Kyle Pearce、Wesley Fryer、和Jon Sullivan。

类似地，还有浅绿色到藏蓝色、鹅黄色到深绿色、棕红色到蓝灰色，等等。

照片来源于Kbh3rd、Ian Britton、和Jon Sullivan。

由于我总能看到这些自然的渐变，所以当我们在可视化图表中看到对应的配色时，会感觉熟悉和愉快。

第3条：使用渐变，不要选择一系列固定颜色

渐变配色结合不同色调，对两者都最好。无论你需要2种颜色还是10种，渐变中都能提取出这些颜色，让可视化图表感觉自然，同时保有足够的色调与明度差异。

改用渐变的思维并不容易，不过有个好方法，可以在Photoshop中拉辅助线到断点位置，与数据的数量对应上，然后持续对渐变进行测试与调整。以下是我们在修正渐变时产生的屏幕截图。

可以看到，我们将配色表紧挨着顶部的灰度渐变，调整渐变叠加（之后就能得到精确的渐变色值），然后从那些断点处选取颜色，测试配色在实际运用中的效果。

我们的配色方案

我们对最终成果感到兴奋。下面是我们使用的部分配色，它们都有从纯白到纯黑的渐变，以达到最大限度的明度差异。

冷色、暖色和霓虹色。

配色的实际运用

长话短说

尽管优秀的配色方案越来越多，但并非所有都适用于图表和数据可视化。我们的配色方法就是创建色调与明度变化都足够大的自然渐变。这么做能使我们的配色便于色盲辨识，对其他人则更明显，并且可以满足1到12种数据。

阅读、工具和资源 [更新]

这个过程中，我们发现了一些很棒的资源和文章，与我们得出的结论类似，但他们采用了更精确的方法，甚至钻研了色彩理论。我们觉得应该分享出来，供大家深度阅读：

阅读

如何避免等差的HSV颜色，作者Gregor Aisch
通过chroma.js控制多色调的色彩比例，作者Gregor Aisch
微妙的颜色，作者Robert Simmon
翠绿配色方案，作者Bob Rudis、Noam Ross和Simon Garnier
MATLAB色彩地图，作者Steve Eddins

工具

数据颜色采集工具——一件很趁手的工具，让你保持浓度不变的同时轻松选择配色
Chroma.js——一个处理色彩的JavaScript库
Colorbrewer2——热点图与数据可视化颜色工具，自带了多色调与单色调的方案

其他资源

我们还找到一些其他爱不释手的配色资源。虽然它们并非专为数据可视化而设计，不过我们觉得或许对你有帮助。

ColorHunt——高质量配色方案，能够快速预览，如果你只需要4种颜色，这是绝佳的资源
COLOURlovers——很棒的颜色社区，其中有许多工具可以创建配色方案，还有设计模式
ColorSchemer Studio——强大的桌面取色应用
Coolors——轻量级随机配色生成器，你可以锁定你想要的颜色，然后替换其他的
Flat UI Colors——很棒的UI配色，这是最流行的配色之一
Material Design Colors——另一套优秀的UI配色。它不仅提供了跨度巨大的颜色，也为每种颜色提供了不同的“色深”，或者说明度
Palettab——一个Chrome插件，在每个标签页里呈现一套新的配色方案和字体灵感
Swiss Style Color Picker——另一个优秀的配色方案集

希望本文对你有所帮助！你建立配色方案的过程是怎样的？你还用到其他的工具吗？我们想听听你在配色与可视化图表方面的经验。

想了解更多我们的工作流程，请订阅我们的刊物：Graphiq Engineering。

原文链接：https://medium.com/graphiq-engineering/finding-the-right-color-palettes-for-data-visualizations-fcd4e707a283#.s6benocrb

作者信息： Samantha Zhang Senior UI/UX @GraphiqHQ. Tutorial writer @TutsPlusCode. Product maker. Data nerd. Side project ninja. More at http://samanthaz.me/ and @moyicat

简洁行不通了——为截然不同的用户而设计

hi@victor42.work (Victor42) — Sun, 22 Nov 2015 21:05:00 +0000

[国外设计第111期]

Bindo POS 3.0的设计过程

以上是该应用上百个界面中的一小部分

早在2013年5月，Bindo POS的第一版，一款iPad登记软件，带着许多先进的业务功能问世了。然后它在几名设计师手中经历了多次迭代，其中还有才华横溢的Sean Farrell。不久后iOS7发布了，我负责进行改版设计，以迎合新的风格。2014年1月，2.0版发布了，如你所料，仓促赶出来的产品平淡无奇。

1.0与2.0，仅仅是视觉上的修修补补。

我们的产品中打包了许多功能。我们源源不断收到客户的反馈与新功能需求。正由于我们用户的多样性，这些需求往往专门针对他们所属行业。这些通常都是不容忽视的功能。如果不加入它们，产品则根本无法使用。我们支持的各种硬件设备，更加剧了它的复杂。例如，每种发票打印机模版配对方式都稍有不同。有时候感觉我们仿佛是在设计一套独立的操作系统。

我们没法关注多数用户，或者选取一通百通的最佳方案。这是单一功能的极简型产品的另一个极端。随着越来越多功能的加入，按钮数量剧增，应用变得臃肿。我们需要一套简练的解决方案，来适应尽可能多的使用场景。

一场大扫除刻不容缓。

最初的一些草图。我们画了将近400张这样的图。

线框图

我们从质疑上一版的决策着手，同时尽可能多收集客户反馈与功能需求。根据优先级分类列出所有可能的使用场景。这通常是简化事情的重点，只有少部分使用场景被认为是必要的。但是，既然我们要满足各种业务的需要，我们集思广益来提高灵活性。在这个阶段，用户调研扮演着至关重要的角色。

好吧。我也当了一回标题党。

简洁仍然是我们所追求的。只是我们无法立即摆脱其中诸多限制。但这不意味着我们无法使界面更智能易用。接下来这版更新，我们寻求的是环境的融合，甚至有时是可预期的。如果临近中午时分，或许你会需要午餐菜单。如果你向供应商订货，有可能你想查看需要补货的库存清单。我们严格控制按钮的数量，减少杂乱，避免屏幕上产生太多选项。遗憾的是，用户似乎并不会注意到所有这些简化工作，除非对比着给他们看。¯\( ツ )/¯

怎样才算过于复杂？我们允许何种程度的定制化，考虑哪些使用场景？这些是在一开始就要确定的问题。线框图就是一种寻找最佳方案的绝妙手段，却不用投入过多的时间。

一切都需要经过设计——不论是有意的决策还是无心的过失。

当我深思所有这些设计意图时，我就真正开始相信自己的设计正在成长。一切都需要经过设计——不论是有意的决策还是无心的过失。以扫码界面为例。它看起来似乎千篇一律，但只要你提出问题，就会发现它显然不能凭主观臆断。有个框框来放置条形码，但这个框实际上并不是扫描区域的边界；它是一种指引，表明摄像头应该离条形码多远才能聚焦。方形的形状也不是巧合。长方形会暗示人们将条形码旋转到特定角度，而我们想表达的是，我们支持任何角度扫码。

像扫码界面这样无关紧要的细节，都经过了细致的构建。

原型

原型的画板已经近乎疯狂了。有如此多选项可供选择，每个都有其优劣。我们从线框图开始做原型，随着工作的进展持续推进。但我们为何感到困扰？

它使你尽早确认想法或发现问题，就不会等到代码都写完了才发现残酷的现实——它没有用。
在真实设备上预览设计十分重要。某个手势或许比你想象得更难操作，某个按钮也可能比你笔记本电脑上看起来更小。
不会成为开发团队的眼中钉，动不动找他们麻烦，他们会因此热爱你。
不用与工程师们来回折腾。你可以随心所欲对各种因素进行调整，直至完美。
不必撰写无人能懂的需求文档，你能直接分享交互式原型，准确演示你脑海中所想。
如今，制作原型实在太简单了，有那么多优秀的工具。为什么不用？

如果要用文字来解释复杂的交互，总是会令人疑惑。

但是并非一切都需要高保真原型。要快速测试用户流程，我们的选择是Marvel。配合他们新增的用户测试功能，你可以记录屏幕界面和使用者的操作，这对于可用性测试极有价值。

我们要求所有自定义动画都要在原型中体现，并得到充分测试。它们的目的应该是向用户交代界面的变化，引导他们达成预期结果。以我们结账流程的动画为例，结账按钮原先会触发一个完全不同的界面，虽然两个界面有部分是共用的。在这版更新中，两个界面结合成了一个连续的界面，通过动画来表现它们的关联。这个动画也可以通过滑动手势触发，可以快速开启结账流程。

下单界面和结账界面合并了。

动画也能取悦用户。加入多少动画，这能考验设计师自制能力。制作原型在这方面也非常有帮助。我们会在原型中实现动画效果，然后反复触发，直到看吐为止。（受虐狂啊，我懂。）用户更容易领会，并提出必要的问题。其中许多最终都被废弃了，或者速度加快了。我们使用Origami还有新宠Principle来模拟动画效果。用Principle来制作接近原生应用的交互式原型简直轻而易举。录屏和分享也易如反掌。

这是一个被废弃的锁屏概念动画，因为动画时间太长，它阻碍了交互流程。

制作原型的额外收获，就是我们团队可以在进入开发阶段之前，就着手准备市场推广材料和视频。

一段预览引导视频在开发之前就准备好了。

早期的方案倾向于明亮温暖的色彩。

视觉

出于某些原因，人们都相信面向商户的产品都很丑陋，我们想要改变现状。无论面向商户还是面向客户，我们都致力于尽可能使它在美学上令人愉悦。毕竟，任何用户都需要时时看着界面。我们都不希望优秀的产品以不尽人意的外观呈现，那会给人一种草率的感觉。谁是用户，并不相干。

UI流程确定下来后，我们探索了许多视觉方案。多数早期方案都鲜明大胆，有些也相对柔和。我们从中选择最好的创意，然后挑选某个折衷的方案。我们希望营造自信与友善的感觉，但不要过于嬉戏。鲜明的色彩保留下来了，使用上却不会过于放任。

统一性

我们先选出少数界面进行设计，作为剩余界面的参考。我们创造了一套粗略的风格指南，来描述各种元素的构成、摆放，还有字体、阴影、主操作项等等。而且，它还包含一套标准配色和通用图标集。

目标之一，就是培育出一系列产品，一眼就清晰可辨出自我们之手。在统一性与自由创造之间寻找平衡尤其困难。各平台限制条件各不相同，决定品牌如何展现，也是一项挑战。这是一段不断试错的学习经历。

我们所有的产品都有着相同的设计哲学。

我们后续还讨论加入了更多内容。就在我们完成改版之时，风格指南已经变得丰富了许多。这套指南会继续演化，在各种平台塑造我们其他产品的整体形象。

设计回顾

我们有一项非正式的日常设计“批评会”。我们通常不去会议室在墙上写写画画、展开讨论。但整个团队了解，我们是在批判作品本身，而不是它的设计者。不过当你的作品被批评时，难以完全剥离自己的感受，不为此感到泄气。所以我们才尽可能使整个过程舒适。我们在任何时候都会把不确定的事情拿出来分享。我们从来不发邀请函，或是为此专门找时间和场地。不由自主的天性会鼓励我们自由开放地交谈。这些交谈只有一条原则——“别得罪人”。

协作都是自发且非正式的。

可用性测试

把问题归咎于用户，对他们拒绝新事物感到忿忿不平很容易；专心聆听，从他们的角度看问题却难很多。

我们刚开始和每次测试版更新前，都会进行可用性测试。最普遍的反馈确实让人很震惊。人们天生就害怕改变，有时这会阻碍我们做出任何显著的改进。责任便落到我们肩上，告诉他们哪里有变化，为什么要改，如何才能尽可能无阻碍地切换到新版本。把问题归咎于用户，对他们拒绝新事物感到忿忿不平很容易；专心聆听，从他们的角度看问题却难很多。我们必须确保这种彻底的改变是有意义的。

最有价值的反馈来自测试版。所幸少数商家很有耐心，愿意当小白鼠，允许我们观察他们如何操作。真实的测试最残酷，却也最深刻。无需多言，有些看似精妙绝伦的创意，直接被打回来了。

在每项任务中，我们通常会向开发者提供用户流程图和标准UI组件指南。

执行

执行阶段不像部分人想象地那么简单。并非输出资源图片、准备好文档就完事了。在整个过程中，设计团队都与开发团队一起进行，也深度介入内部测试与品质保证工作。工程师们在构想我们希望的小细节上非常有帮助。他们需要思考真实的执行方案，提出技术问题，例如“如果没有获取到隐私权限怎么办？”还有“如果网络连接断断续续呢？”文档总是片面的。要产出我们想要的一切，沟通至关重要。

即便如此，也没有人喜欢每隔5分钟频繁提问/回答。与界面相关的每一个人都有一份Sketch源文件。开发者喜欢在里面查看你漏标的CSS属性、坐标、尺寸、距离、还有那些16位颜色值。

许多精力都花在让操作更加“迅捷”上。有个功能是让雇员上下班时用前置摄像头拍照打卡。在早期版本中，用户在锁屏之前，要等待照片上传到服务器。现在，我们会在后台上传照片，用户不必再盯着旋转动画看10秒钟了。

迭代

设计是一个迭代的过程。每次我听到有人对一个产品草率下结论，不尊重它背后的努力时，我就感到心痛。在我的观念中，设计的真正价值不是由最终产品决定的，而是我们倾注其中的所有心血——也包括那些不称职的设计师的。迅捷的反应，需要相当传奇的设计团队。

3.0版更新现在正处于最后的开发阶段中。很自然地，我们已经在进行下个版本的工作了。在产品发布前，设计工作都不算完成。我们持续收到反馈，做出相应调整与改善。无论复杂与否，解决问题都需要耐心。

设计产品的方式并非千篇一律。坚定、专注的策略很好，但它未必对每个人都有效。我们对这个项目的变化欣喜若狂，等不及让我们的客户用起来了。

关注我的Twitter和Dribbble了解我更多的设计想法吧！:)

感谢我亲爱的同事*Nicole*和Jillian校对这篇文章。

原文链接：https://medium.com/user-experience-design-1/when-simplicity-isn-t-the-answer-designing-for-vastly-different-audiences-aba249005d2d

作者信息： Raven Yu Product designer

移动端设计模式的误用

hi@victor42.work (Victor42) — Sun, 15 Nov 2015 08:49:00 +0000

[国外设计第110期]

如果你是一名经验丰富的设计师，你一定会认同一点，受他人启发并不是在抄袭UI设计。这是一种最佳的研究实践。它也要运用各种设计模式，也要遵循设计规范，也需要确保选择用户熟悉的模式来建立可用的界面。

有些人可能会说，死守规范和模仿他人会扼杀创造力，终将有一天，所有应用都长一个样。但从用户体验的角度我注意到另一个问题。习惯于最佳实例可能会让你盲从Google/Facebook/Instagram/还有你最喜欢的应用，误以为他们的设计目标与你的相同，你却未对此产生质疑。下面是一些被认为（或是曾经被认为）是最佳实例的模式，但未必如你初见时所认为的那么好。

1. 隐藏式导航

至少有五十万篇关于汉堡菜单的文章，多数都是设计师写的，为此展开激烈争辩。如果你对此一无所知，可以读读这篇或者这篇。但简而言之，讨论点并不是这个图标本身，而是将导航隐藏在一个图标中。

侧滑菜单非常灵活，使用也方便。

这个解决方案对于设计师很有诱惑力，方便快捷：你不用操心有限的屏幕空间，把整个导航塞进默认隐藏的滚动层里就可以了。

但是，实验显示，用一种更加可见的方式展示菜单项，能够提升活跃度、用户满意度、甚至收入。这就是为何所有大公司都在舍弃汉堡菜单，让最重要的导航项持续可见。

YouTube导航的变革，Luke Wroblewski注

如果你的导航很复杂，将其隐藏并不是友好的移动端做法。为它排个主次才是。

2. 图标，到处都是图标

由于屏幕空间有限，另一个看似无需动脑的节省空间的方法，就是把文字尽可能都换成图标。象形图标占用更少空间，也不需要翻译，毕竟人们对这些都很熟悉，对吧？而且其他应用都在这么做。

脑中带着这样的假定，应用的设计师有时就会把功能藏在一些难以辨识的图标里面。例如这个，在Instagram中你可以通过这个图标直接发送消息，你能猜到吗？

或者假设你从没用过Google Translate，点下面这个图标你觉得会是什么功能？

有个常见的错误，就是假定用户都熟悉这些象形图，或者愿意花时间探索和学习它们的含义。

Bloom.fm难以理解的标签栏。

如果你认为在图标上加上悬浮气泡会让它更易用，那你就错了。即使你是Foursquare，用户无论如何都需要学习使用。

Swarm中的图标提示。

这不是说根本不应该用图标。有许多人们相当熟悉的图标，其中多数都表现一些常用功能，例如搜索、播放视频、邮件、设置等等。（但用户仍然会感到不确定，例如，点击心型图标时究竟会发生什么。）

有些图标多数用户都认识，这些可以作为通用图标。

但是，复杂且抽象的功能总是应该带有适当的文字标签。在这种情况下，图标仍然有用，因为它们提升了菜单项的显著性，也为应用增加了一丝亲切与个性。

Pixelmator的导航

基础功能用图标可以很有效地展现，但对于复杂的功能，应该带上文字标签。（如果要用图标，一定要做可用性测试。）

3. 基于手势的导航

苹果在2007年推出iPhone时，多点触控技术成为主流焦点，用户了解到他们不仅能够在界面上点击，还可以放大、捏合和滑动。

手势在设计师群体中盛行起来，有许多应用都带有实验性的手势控制。

Clear应用中的手势导航。

就像把导航藏在图标中替代文字标签，手势有时候对于需要节省屏幕空间的设计师而言也极具诱惑力。（“不应该有删除按钮，人们左滑就行了。或者右滑也行，这个我们来决定。”）

关于手势要知道的第一件事情，就是它们总是隐藏的。人们需要记住它们。就像汉堡菜单那样：如果将某个选项隐藏起来，使用它的人就会减少。

而且，手势与图标有同样的问题：有些通用手势大家都掌握了，例如点按、缩放、滚动。还有一些手势每个应用都不同，需要探索和学习。

但不幸的是，多数手势在不同应用中，都是非标准且不统一的——这仍然是触屏界面设计相当新的一个领域。甚至简单如滑动手势，在不同邮件应用中也不一样。

在苹果的邮件应用中右滑，会显示出标为未读选项。

同样的手势在Mailbox里却是归档邮件。

还有，想一想，摇晃手机可能既是撤销（iOS）又是发送反馈（Google Maps)。

不要忘了手势是隐藏式的控制，你的用户需要付出大量的精力才能记住。除非你是Tinder，那你或许可以为全世界定义右滑的意义——但也仅限于你应用中至关重要的某个概念。

4. 首次使用的教学引导

首次使用，最近一个火热的用户体验议题，指的是用户与应用的第一次接触。在许多例子中，这就是指显示一些教学引导层，向用户说明应用界面：

dcovery中的教学引导。

为什么这是个糟糕的方案？因为多数用户会跳过你的介绍；他们只想立刻上手。即使他们注意到你的教程，通常也转瞬即忘。（尤其当界面信息太多时。）最后这点也很重要：加入教学引导并不会使界面更直观。牢记这一条：

用户界面就像一则笑话，如果你非要解释它，就不好笑了。来源：Startup Vitamins

首次使用的流程还可以用许多其他方式来设计，或许对用户更加有用。例如Slack，用了主界面来营造环境氛围。他们做了自我介绍，重点阐述了它的好处，而非界面与功能。

有一种更加有互动性的方式欢迎新用户，渐进式。Duolingo没有解释应用的功能：它鼓励用户打开，在选定的语言中做一套快速测试（甚至都不用注册），因为人们在实际操作中学习最快。而且它也是一种更吸引人的方式来展现应用的价值。

还记得滑动手势在Mailbox中与Apple Mail里不同么？这就是它如何渐进式引导的：用户会看到一系列引导页，在实际使用应用之前，他们要在其中试着操作每一个手势。

在设计半透明层上的教学引导之前，停一停，思考一下用户首次打开的体验会是怎样。要重视环境。多数情况下，总有更好的方式来欢迎用户。

5. 有创意但不直观的空状态

空状态非常容易被经验不足的设计师忽略，但是，它是应用整体用户体验的重要因素。

有时候设计师把错误信息和空状态当作挥洒创意的画布。

例如Google Photos的这个空状态界面：

Google Photos中的空状态。

第一眼看觉得很棒，对吧？遵循规范，层次分明，还有漂亮的插画。

但再看一眼，有一些奇怪的东西：

如果都没有相片集，为什么还要一个如此突出的搜索按钮？为什么要在空无一物中搜索？
第二明显的元素——插画，却显然是不可点击的（尽管许多人会试着去点）。
提示说我应该寻找顶部的“+”按钮，这太尴尬了。为什么提示本身不带有添加按钮？这就像是在说“点击继续按钮继续”。

上面的这个空状态并没有帮助用户理解环境：

相片集是什么？它们有什么用？
为什么我没有相片集？
我该怎么办（我该做点什么吗）？

说到创造力，有时候少即是多。下面的空状态在实用性方面表现就非常好。（我们暂且忽略“现在点击下方按钮”的说明。）

Lootsy的空状态。

别忘了空状态（类似于网页的404页面）不仅仅关乎视觉美学与品牌个性。它们在可用性方面还扮演着更重要的角色。要让它们直观易懂。

质疑一切

不要误会我的意思：设计模式与最佳实例仍然是你的良师益友。但要牢记应用和用户是不同的，某种解决方案可能在一个应用中大放异彩，在你的应用中却一败涂地。这不是普适规律。而且，你永远都不会知道一个应用为什么要这样设计。

独立思考。独立设计。独立研究。

权衡、测试、验证——别怕违背规范，只要那样做更有意义。

原文链接：https://medium.com/@kollinz/misused-mobile-ux-patterns-84d2b6930570

作者信息： Zoltan Kollin Thinking about experiences as UX director at Ustream, co-organizer of Amuse UX Conference and co-author of http://uxmyths.com/

9种状态的设计

hi@victor42.work (Victor42) — Sun, 08 Nov 2015 01:26:00 +0000

[国外设计第109期]

现在的UI设计团队通常先设计组件，多数界面几乎就是各种组件的结合。这会在用户的“异常路径”上留下不容小觑的断档。由于我们构建的是整个系统，而非几个页面，我们必须投入精力打磨这些常常被忽略的状态的设计，创造出组件的整个生命周期，来适应每一个人。我所理解的生命周期是这样的：

状态

1. 初始状态

一个组件做任何事情之前是怎样的？可能这是用户首次看到它。或者它还没被激活。根本上说就是这个组件存在，但还没有启动。

Jonas Treub的设计能确保你了解framer的最新动向。

2. 加载中

令人厌恶的一种状态。在理想状况下，没人会看到这个。哎，可我们这里是现实世界。有许多方法能使加载状态微妙而含蓄。Facebook在这方面做得很好：

Facebook使用“假文章”来代替传统的转圈圈。

3. 空状态

组件已经初始化，但是空无一物。没有数据，没有项目。这时候正适合引导用户采取行动（“点这里！”），或者给他们鼓励（“好样的，一切正常”）。

Luke Seeley就将它作为了一种捷径。

4. 单一项目

开始有些数据了。在输入界面中，这或许是按下第一个键的状态。在列表中，可能是只有一项（或仅剩一项）时的状态。

又是Luke Seeley，MetaLab项目。

5. 有一些数据

这通常是你首先考虑的状态。某个组件的最理想状态是怎样的？数据加载了，也有内容输入，正是用户熟悉的状态。

UENO.舒适的大仪表盘。

6. 数据过多

哇！用户似乎操作过头了。产生了太多的结果（或许你现在正对它们分页处理），太多的文字（可能显示省略号？），诸如此类。

不错的翻页设计，来自Pete Orme

7. 错误状态

组件出错了。产生了异常。

dunked.com的错误状态很棒。

8. 正确状态

很好！这一项操作正确。

Ionut Bondoc ( ►IB )的设计

9. 完成状态

应用已经接受了用户的正确操作。他们不需要再为此操心了。

Igor Chebotarev给出了一些积极的反馈。

随着不同页面、用户操作、数据更新还有任何你应用的状态改变，这些状态都会反复出现。深思熟虑地设计这些变化，就能为用户创造优美的体验，无论他们身处何种情况。

这其中许多状态都没有被考虑过，被遗忘，或仅仅是被忽略了。这是个巨大的错误，也是你赶超对手的机会。将状态的思考纳入你的设计流程，在与用户产生共鸣的同时，也能掌控好你的应用。

这9种状态的设计适用于所有设计项目和组件。即使你做出了清醒的决策要忽略其中某一种，遵循这套准则也能确保你的确思考过那些异常路径。

原文链接：https://medium.com/swlh/the-nine-states-of-design-5bfe9b3d6d85

作者信息： Vince Speelman Designer, developer, diner, dreamer, discoverer, do-gooder, Detroiter.

保持创造力的5种方式

hi@victor42.work (Victor42) — Sun, 01 Nov 2015 22:20:00 +0000

[国外设计第108期]

遵循这些建议，找到你才思枯竭的原因，寻找自我提升的策略——geekmentalhelp。

*Geek Mental Help Week*是一系列为期一周的文章、博客、会谈、播客和线上活动，围绕心理健康问题和如何帮助人们。在这里，设计总监Hannah Donovan揭示了一些方法，她以此避免才思枯竭，使自己保持进步。

同样住在我34楼公寓的热带鸟再一次吵醒了我，当然，它住在外面。香港的湿热气候已经包裹了整个清晨，我的手机开始嗡嗡作响。“虽然很不情愿在你工作之余打扰，不过可否请你帮我做一个项目？”

我的长期合作伙伴Matthew Ogle需要一名设计师。但设计师是我好几个月前的身份了。

我才思枯竭了。我去工作，尝试打开创意的水龙头，但什么也出不来。这不是一天两天了，已经持续了许多星期。于是，在临近2011年的几个月前，我辞掉了Last.fm的工作，打包好行李，并不知道即将去向何方。设计——我唯一想到的方向，我唯一赖以谋生的手段——已经干涸枯竭了。

作为“创造者”（无论是设计、开发、产品设计、写作或是其他什么，这些我们谋生的技能），你会发现我们最重要的技能之一，就是好好保持我们创造力。但现在，我在盯着这条信息好一会儿，脑袋却塞住了，不仅在考虑如何回复，也不知道接下来该怎么做。

“好啊”，我回复，“什么项目？”

然后我意识到只有一条路可以逃脱困境——继续创作。当然，我也得寻找新的道路，但那也是创作生涯要承担的责任。从那以后，我不仅仅走出了困境，也重新设计了我创作的方式。以下是我所发现的最有用的办法。

01. 学会停下脚步

如果你在真实媒介上创作，很容易学会应该何时收手。因为如果作品“完成”后你还继续作画，反而会毁了它。这样的错误会耗费大量时间与材料，你不会轻易忘记这点。

但是数字设计在这方面更加包容：有很强的诱惑力促使你不断微调下去。很容易就没有结束的概念。

了结旧事物，才能为新事物开辟空间。在我的观念中，如果你不“完成”一个创意，它就会变得很臃肿。它打破了“产生创意——创作——创意完成”的循环。如果你感觉卡住了，可能是有太多的创意在游荡。

02. 允许丑陋的创意

我为粗糙的草图道歉过。设计师身上天生就承载了对美的期望。当然，创意与美在现实中则免不了有许多丑陋。去年我听说Jason Santa Maria在New Adventures中宣称：“创意都倾向于丑陋”——它们鼓励大家参与和协作。

我现在就不会为粗糙而道歉了。我让同事们忽视设计的粗糙，关注核心概念，向他们保证成品会是美好的。

对于任何事情，过早产生高期望会使得项目极度难以启动。它会带来可怕的一张白纸无从下手的感觉。虽然我保留了设计生涯中的所有手绘本，但面对新的手绘本总会感到恐慌。于是我在第一页上信手涂鸦，降低自己的期望。然后翻过去，开始正式工作。

如果不知从何下手，不要担心初次的尝试难看。实际上，就应该怀着它可能会很丑的想法。越快把它画出来，你或你的同事们就能越早想到创意来改善它，你则会更受启发。

03. 行动起来，做什么都可以

有一项常见的误解，认为“创造”是某种魔法般的过程，灵光一闪，创意凭空出现给你启发。这几乎和魔法药粉一样不切实际。

有好几次，我不得不向失望的记者解释，故事剧本并非Matt和我忽然想到了现在这个项目的灵感，我的处境其实是花了超过5年时间沉浸在Last.fm的音乐产业中，实验许多备受争议的创意，然后将它们融入其中。

若想让创意成为一道耀眼的闪电，首先你要使天空黯淡阴郁、耐人寻味。采取某种行动——无论大小都行——把一切都搅动起来。

04. 拥抱意外发现

理应如此，我们的行业非常重视流程——最佳的习惯能帮助我们打造最棒的产品。这些既定模式有时真让人感到厌倦。敏捷开发、长期运行、固定的晨间咖啡等等。这些模式有些无趣，但没关系，创造力还是很有趣，我们需要日常程序来使自己保持状态。

但创意类工作也需要非常规的输入——我们的生活需要惊喜。人们很容易陷入一步步的常规流程，忘了产生意外惊喜的模式。记得上一次你花时间寻找意外惊喜是什么时候吗？无论是独自一人还是和你的团队一起？常规流程模式与意外惊喜模式都十分重要，每个人在两者之间都有一个平衡点。

真正让我对于创造保持兴奋的，正是脱离常规、迈出这创意的一步，这胜过其他一切。尽管我从事全职工作，我也会做许多副业。比如印刷品设计，我接触这个媒介尚不满六年。

这些项目与我的主线工作没有什么关系，当然，也正是这种“不相干”的媒介让我再次对工作充满激情。尝试运用自己的技能，切换到另一种模式或语言中，看看会发生什么。

05. 自我表达

虽然这些技巧帮助我走出低谷，但什么样的环境最容易引发这个问题呢？科技行业——特别是创业公司——最容易产生这种对创造力有害的环境。

当然，很明显的长时间高强度工作是一个原因。但对我产生最大的负面影响的因素，是我自认为在为自己工作，但实则不然，然后会逐渐屈从于这种同质化的科技行业文化。

不像在创意机构中工作，在那里人人都知道他们在为别人而创造，创业心态会让人对这一点视而不见。只要人们在用你的产品，你就是在为别人而创造。或许你对自己的事业激情满满，但责任使得你无法遵从于自己的异想天开。你还是需要纯粹的个人项目和副业。

我工作中的同质化文化扼杀了我许多的个人表达（比方说时尚，一项重要的个人视觉输入），我反而让自己去适应它。如此回应或许是我所做的最糟糕的事情了。自我表达能激发自己灵感，灵感又促使我想要表达。我扼杀了一条良性循环道路。

如果这些听起来都似曾相识，要仔细想想你究竟在为谁而创造；拥抱行业中的多样化；整理那些能够避免和克服才思枯竭的技巧，分享出来。若非如此，我们则无法帮助到别人。

原文链接：http://www.creativebloq.com/web-design/geek-mental-help-week-5-ways-keep-your-creative-tap-turned-101412827

作者信息： Hannah Donovan Hannah Donovan is co-founder and design director of new music service This Is My Jam, and prior to that led design at Last.fm. This article originally appeared in net magazine issue 256.

通过设计简化学习过程

hi@victor42.work (Victor42) — Sun, 25 Oct 2015 00:02:00 +0000

[国外设计第107期]

如何通过设计让学习不那么令人厌烦？

这可没有听起来那么简单。坦白说，人们往往不会偏离道路去学习一些新东西。研究显示，在美国只有3%的成年人会在一天中花时间学习。

细想一会儿：尽管我们指尖轻按就能触达所有信息，所有的新技术似乎都在一夜间爆发，但97%的人却不会花任何时间积极地探索新知识来提升自己。

我们正面临着这样的挑战，我们在Google的团队正着手打造Primer，一款新的移动应用，帮助人们在5分钟内学习数字营销概念。

用户体验是这项任务的核心。在学习面前有诸多障碍：你需要了解学什么、在哪学、为何想要学习，然后还需要投入时间、金钱和精力，坚持到底。

这意味着我们的用户体验要承担双重任务：这个应用需要吸引人且直观，同时它得克服所有阻碍人们学习的因素。

要应对这项挑战，我们思考了应用中主要的3处地方，人们可能会在其中花时间：操作面板、单项课程、还有每项课程中的操作。

1. 操作面板

操作面板的重要性毋庸置疑，因为那是人们打开应用首先看到的东西。我们花了数月的时间，反复迭代绘制不同操作面板的原型。我们有许多想法：课程包，让用户从3个随机课程中选择，事件相关的课程话题，或是为与我们有合作的专家和品牌创造特殊组件。可能性总是无穷无尽。

早期的操作面板原型。

显然，我们需要一套准则来作为指引，所以我们把自己置于用户的视角。我们推论，来到应用中的人们可以归为3类：

被动型：他们会随便看看。
好奇型：他们会来学点东西，但学什么并不确定。
积极型：他们有不止一件想学的东西。

最终的操作面板视图：重点推荐、分类、和队列。

对于被动型，我们创造了重点推荐模块，展示了5项可以立刻学习的推荐课程。

同时，我们通过话题或分类：广告、文案、数据统计、和策略等，来使好奇型用户更容易找到课程。

而对于积极型用户，我们创造了一件管理工具：队列。在这里，他们可以把自己的“播放列表”集中起来，能够随心所欲添加和删除课程。

2. 课程

应用的下一个元素就是课程本身。Primer的课程都非常适于消磨时间；用户在火车上就能完成，或者在他们的孩子看动画片的时候。

但学习还是需要吸引力的。我们不能让用户不知不觉间略过所有内容。

我们把解决方案称为“有节奏的学习”。每一项课程元素——每次滑动、每组卡片堆、还有每张插画——都设计得为了有节奏地引导用户浏览内容。

每张卡片、每组卡片堆的滑动手势，让用户有种完成的仪式感。一份包含所有信息的文档令人望而却步，但分解成卡片的课程则让人感觉容易处理。这些卡片被分成3到7组，滑出最后一张卡片后，另一堆卡片就会进入。完成一堆卡片就成为了一项小成就，这意味着用户不必等到课程的结尾，才能感到自己学到了东西。

这也是插画进场的时机。每幅插画都是轻松一刻，让人会心一笑，使课程内容鲜活起来。在我们的课程创建过程中加入插画，增加了额外的工作流程，但也绝妙地融入了幽默，减轻了课程的官方口吻。

3. 操作

用户体验设计的第三项、也是最后一项元素就是操作。我们最终落地在3种不同操作上，它们在不同时机出现：快速开始在每项课程开始触发；课程中操作在过程中触发；立即行动则在末尾。

快速开始的要点在于第一时间用课程的概念吸引人们。例如，在研究广告课程时，用户被要求在一大堆衣服中寻找条纹袜子。这种找你妹类型的操作，阐释了搜索结果顶端位置的价值：不同于混杂于其他衣物中的袜子，搜索广告在搜索结果中显得特别突出。这个交互并非一项测试，但却能让人们立刻思考这个问题。

在这则快速开始操作中，我们使用了找你妹类型的操作阐释了搜索广告的优势。

如你所料，课程中操作出现在课程过程当中，它们会打断阅读，让用户以新方式与话题进行互动。在某个课程中，我们有一项操作很有特色，它要求用户按照字面意思来拼图，将节目媒体的投放组合起来。在另一项课程中，我们引入了一套常识的是或非操作，来重新构造复杂问题。例如，解释移动端的用户吸引时，我们问用户肆意发送通知好不好。答案很显然，而那正是我们要表达的。这些交互让用户建立起信心，让他们以一种简单直观的方式处理信息，然后构筑相应的知识。

这项课程中测试，通过一种直观易感知的方式解释了一个复杂问题。

最终，立刻行动功能为用户提供了一些合适的资料，能够立刻运用在他们的业务中。应该从何入手追踪网站各项数据？准备好进行节目广告投放了吗？这使得课程更加人物化，而且以行动为导向。我们相信，把知识带入实践是最佳的学习方式，即使婴儿学步也是如此。

立刻行动选项让用户填空，体现了人格化的一面。

就像其他所有移动应用一样，为了争夺用户的空间与注意力，Primer也面临着激烈的竞争。正是如此，设计有趣、快速、信息丰富的用户体验才如此重要。

我们的用户体验设计，意在让学习变得愉快——使它成为人们想要做的事情，而非一天中的匆匆片刻。我们希望用户喜欢这种形式，还有它所包含的灵活性。曾经看似是责任的东西，如今成了晨间（排队或在家）等咖啡时的一件易事，当然也包括其他所有5分钟左右的闲暇时段。

脚注：

25岁以上的美国成年人的数据，来自2015劳动局统计的全美时间消费调查。

原文链接：https://medium.com/google-design/designing-a-ux-for-learning-ebed4fa0a798#.iklxc3a0t

作者信息： Sandra Nam Team Lead / Product Lead @ Google. Working on an edu mobile app called Primer.

设计行动号召增加注册量

hi@victor42.work (Victor42) — Sun, 18 Oct 2015 14:12:00 +0000

[国外设计第106期]

想要更多人注册吗？在他们刚打开网站时，艳俗的弹出广告可是不管用的。

仔细想想：如果有个路人径直走向你，询问你的电子邮箱，并不作任何解释，你可能只会摇摇头继续前进。

在那个场合中，他们甚至都没有说你好或是尝试建立信任。若想让人首次使用你的产品，信任是必须的。最佳方式之一，是使你的用户流程能首先建立起信任，更有策略地放置你的行动召唤模块。

本文中，我们且以收集邮箱地址作为业务目标。我们假定，用户的目标是对产品稍作了解，然后注册订购。那么首先，我们来看一些使行动号召更加有效的摆放位置，然后我们再了解有助于增长注册量的设计策略。

设计一套吸引顾客的流程

用户流程是访客在你网站上的旅程。理想情况下，旅程尽头最终完成某个特定任务，例如购买商品、注册或填写邮箱。

“想让行动号召开门见山？那就要设计一个优美的行动号召页面。”

要设计最佳的用户流程，牢记这两点：

确定你的业务目标，或者说你希望用户在网站上的行为
分辨出用户的目标、需求和渴望

在设计用户流程之前，要先确定这两件事。这样才能预见和防止任何阻碍流程的事情。

想要让人遵循这样的流程：直接来到你的网站，或者通社交媒体等其他来源。在这里，他们看到了迷人的、有意义的内容，使他们感到愉悦，或是激发了兴趣。在此基础上，他们留下了邮箱地址。

我们设计的用户流程可以类似这样：

你网站的访问链接 -> 着陆页或博客页面 -> 留下邮箱

一旦你确立了用户流程，网站的一切都要围绕最终目标展开。

改善行动号召位置的4个手段

1. 末尾触发广告

相比直接用大幅广告来吸引人，不如设计成滚动到页面底部触发行动号召弹窗。这种方式收集邮箱，更不容易使人分心。

编者按：我们发现这种策略的确很成功，请在访客身上自行验证。

这种策略依赖于一个假设，就是人们会花时间了解你的产品——如果是篇博文的话那就是文字——然后他们不介意分享信息。

“设计成滚动到页面底部触发行动号召弹窗。”

正因为人们来到了网站的底部，所以他们可能并不会离开。如果他们想了解更多，行动号召就会非常有用。

末尾触发广告总能简化用户的选择过程。它们防止用户陷入是或否的选择，使得整个流程无需做选择，一马平川。

“正因为人们来到了网站的底部，他们可能并不会离开。”

OptinMonster是个很有用工具，能帮你创建自己的退出式广告。请看下例：

[译者注]图中文字：如果检测到鼠标停留在退出上方，广告窗口就会弹出。

他们把广告窗口安插在你正打算离去之时，向你展示一则有价值的信息，以此换取你的邮箱地址。

2. 滚动触发窗口

你可以在用户阅读部分内容之后触发窗口。这种方式假定：“既然他们都看到了这里，说明他们可能感兴趣。”滚动触发窗口在博客网站上最有效。

滚动触发窗口比行动号召弹窗令人更不容易分心，因为你不必关闭它。你可以继续滚动，窗口会在底部角落里静候用户完成。

它们是一种更加温和的提醒，用户可以随时订阅。

这是AddThis里的一个滚动触发窗的例子：

[译者注]图中文字：滚动时保持固定。

滚动触发窗会让出足够的空间，人们仍然可以阅读内容，直到他们决定订阅。

SumoMe里有个滚动触发式应用，你可以放在自己网站的任何一个角落。也可以随意改变滚动触发窗的外观和内容。而且它也适用于移动端，这非常棒，因为对于多数网站而言，30%的流量来源于手机。

3. 页面顶部的行动号召栏

如果你不喜欢弹窗，可以考虑在页面顶部放一条行动号召栏。

这个方法也很有效，因为它同样不招人烦或使人分心——用这种方式引导用户订阅，简单清晰。

它允许用户先探索内容，但既然它是首先映入眼帘的东西，用户如果有兴趣订阅，就还会回来的。

Customer.io就在博客页面用了此法。

他们的行动号召简单清晰——并没有妨碍网站的用户体验

SumoMe的Smart Bar和Hello Bar是两个绝佳工具。两者都能温和地提醒用户订阅内容。

4. 极简的行动号召页面

如果你希望让行动号召开门见山，又不想尝试立刻弹出的广告窗，那就设计一个简单优美的行动号召页面吧。

这不会太令人讨厌，因为用户首次访问并不会被打断。立即触发的弹窗会给人耍花样和讨厌的印象，但清晰、有吸引力的着陆页则是一种不错的吸引用户的形式。

SumoMe的着陆页简明地陈述了他们的目标，例举事实说明超过10万用户在用他们的产品，还有他们的行动号召。

SumoMe的Welcome Mat是很棒的工具，让你设计出优美清晰的行动号召着陆页。事实证明，它能使邮箱注册转化率翻两倍甚至三倍。

让行动号召富于视觉表现力

既然有了杰出的行动号召工具，该考虑考虑设计了。行动号召应当引人注目、有吸引力，尤其当它并非首当其冲时。

“设计与位置同等重要。”

研究显示，人们对于视觉营销的反应是兴奋的。设计与位置同等重要，因为视觉是我们的主要感观。相比2007年，互联网上视觉信息的运用增长了9,900%

设计行动号召时考虑4个因素：

1. 颜色

设计视觉信息时，颜色是首要考虑因素。带有色彩的信息会快70%被注意到，它能提升你的销量80%。

这主要因为我们先天就将色彩赋予含义。在进化学或个体上，我们总是喜欢那些令人想起积极事物和回忆的色彩。

“信任是注册量增长的重要因素。”

蓝色与绿色通常能联系到友善和和平，但棕色和黄色则容易产生负面影响。红色表现出粗暴一面，但可以有策略地使用它们。

ProfitWell在页头的行动号召中就用了这些颜色策略：

他们选用蓝色和绿色有助于获取信任。信任是注册量增长的重要因素。下面的色轮显示了哪种颜色最能表达信任。

色彩可以划分内容，是一种在视觉上突出信息的方式。

2. 图片

研究表明，图片可以极大提升内容对用户的吸引力，因为图片将许多信息简化为一个简单的概念。让人瞬间理解视觉信息。

想想这个交通标志与文字所描绘的具体概念。

[译者注]图中文字：两者说的是同一件事，但有的要花更长的时间消化。

这个概念对行动号召尤其重要，因为如果你能通过一种图片或符号传递大量积极信息，以此引诱访客，他们就更容易按你的要求坚持下去。

GetResponse的这个例子很有趣：

烟火总与快乐回忆和庆典有关，于是你在订阅时想着的正是这些。

3. 肖像

我们如此自然地会被肖像吸引，这个证据表明我们大脑有个特殊的单元，当辨认出人脸时就会兴奋。

肖像也是强大的情绪指示器。作为人类，我们会被情绪吸引。我们持续不断地分析评估他人的表情和微表情，试图了解他们的情绪。

以Noah Kagan的着陆页为例，在他的博客OkDork上：

他的笑脸表现出喜悦和诚恳，我们可以感受到他应该是个友善的人。他还提供了吸引人的简介，告诉你在此能看到什么。

4. 运动

类似于色彩，运动也是一种获取注意力的方式。在视觉营销方面，运动使用户对他们所见保持警觉与兴趣。

当你看到移动物体时，你的视线立刻会被吸引过去。当视野中其他东西都静止时，运动物体非常突出。

“运动使用户对他们所见保持警觉与兴趣。”

如果你打算依赖运动来突显行动号召，滚动触发窗和末尾触发窗或许就是最佳选择。用户的视线会移向那个窗口。不过要选择一种不招人烦、使人分心的方式。

设计邮箱注册的行动号召时，要考虑用户流程。明确业务目标与用户目标，然后设计出效果最佳的行动号召。

确立了这一点后，时刻考虑位置与设计。越不令人厌烦，越具视觉表现力，转化量越多——邮件订阅或注册人数也会越多。

原文链接：http://blog.invisionapp.com/designing-email-list-cta/

作者信息： Walter Chen, Founder and CEO of iDoneThis Walter Chen is the founder and CEO of iDoneThis, the easiest way to run a remote daily standup with your team. Follow me on Twitter

UI动画可不是卡通片

hi@victor42.work (Victor42) — Sun, 11 Oct 2015 12:41:00 +0000

[国外设计第105期]

我之前撰文讲过多余的动画，引发了一些共鸣。得到了非常积极的反馈，我很高兴了解到，动画过多的界面也会令其他人手足无措。

老实说，我并不反对为界面进行动效设计。我主要是在质疑那些妨碍用户的动画。

克制，是一名优秀UI设计师的特质。它要求你了解所选平台的能力，然后避免使用它（除非时机成熟）。

与其为多余的动画惋惜，我宁可学习深思熟虑的动画，尽量提出一些方案。

我期望得到你对本文的评价与建议。

做作的动画案例

下面是一则快速且做作的动画案例，我以此来演示UI动画中的卡通化现象。尽管这是个略微夸张的例子，但事实上，确有许多界面呈现出了这种花哨的动画。

点此查看案例原文。

似乎我们刚抛弃了拟物化的视觉设计，又陷入了行为上的拟物化。我们把虚拟物表现得像是果冻，或像是挂在隐形的橡皮绳上。

拒绝肆无忌惮的动画

动画就像某种咒法。如果过度使用，就会效力尽失。

动画原则

我听闻一些UI设计师推崇卡通化的动画设计，将它作为UI设计师的必读准则。不幸的是，这增强了UI的娱乐功效，总会使得界面变成用户的阻碍。

许多UI动效设计师似乎把界面设计当成了他们的动画作品集。除非你想被收录进Pixar，否则请避免使用“弹跳”、“加速后减速”这样的缓动效果。

界面是什么？

在计算机科学中，界面是指计算机系统中，两个独立组成部分相互交换信息的衔接处。界面（计算机）——维基百科，自由的百科全书https://en.wikipedia.org/wiki/Interface_(computing)

界面居中衔接、传达信息的作用使得它如此重要。决定何时可以违背这条UI中心原则，是设计师所面临的挑战。

UI设计中的动效

这些简单的准则让我受益良多，在此推荐：

站在用户的立场对每段动画做出决断，“挺好看的”可不是正确答案。
保持每段动画时间不超过300ms。
避免使用线性动画，它使得动画看起来迟缓、无趣且机械。
99%的动画都应该使用简单的“加速”或“减速”缓动效果。
你极少会需要那些更加醒目的缓动效果，例如弹簧、弹跳等等。

界面案例

这些例子请尽情批评、挑刺。你们的评论和建议常常能改善我的想法。

通知

通知案例1

点此查看案例原文。

这个简单的动画只持续300ms。它有细微的分层效果，卡片的动画开始后，消息在100ms内淡入显现。本例中的动效确实提升了用户体验，因为它将用户的注意力引向了不可忽视的重要的通知。

通知的升级

通知案例2

点此查看案例原文。

上面的例子使用了更强烈的动画。

首次点按，通知淡入显现
再次点按，整个标签晃动

如果用户持续点按按钮，还可以叠加一个模态窗口吸引用户注意。

而且在后续失败的尝试后，也可以通过改变按钮本身颜色来警示。

卡片展开

这是卡片视图的一种简单有效的实现，移动端通常都这么做。我非常喜欢这个交互，因为它让用户熟悉来龙去脉。即使列表视图不见了，我们也知道它就在那里，在展开项的背后。

卡片展开案例

点此查看案例原文。

我故意让卡片的关闭按钮稍稍延迟显现，同时使用了位置与透明度的动画。用户的视线不会漏掉这个重要的UI元素，他们在收起卡片时会需要它。

重要性分层次

作为设计师与开发者，必然要决定我们界面中哪些元素更重要。它有很多种体现方式：

使用标题
下划线、或是加粗
使用色彩
使用形状和图片
运动

你当然不会把文章的每一句话都当作标题。这个原则也适用于动画。界面中的每个动画元素，都等同于文章中的一个标题。它应该用来显现元素的重要性。过度使用反而会混淆层次，同时干扰你试图表达的信息。

功能动画 vs 装饰动画

程序员常常谈论“代码嗅觉”。这是指编写代码时的某种特质，它并无绝对的对错，但能避免老练的程序员写出低质量代码。

如果你听到团队伙伴谈论UI动画“愉悦”用户，你的“设计嗅觉”警钟可能就响起了。为了动画而做动画（几乎任何时候）是糟糕的设计。

切记，动画同样符合少即是多的原则。功能动画总是胜过纯粹的装饰动画。

不要让动画妨碍了用户。这就是为什么飞机驾驶舱的界面从不用使用动画。额外增加毫无必要的300ms动画，对你的界面而言可能人畜无害，但它给用户带来的烦恼远比“愉悦”更多！

总结

界面中还是需要动画的。要将它作为迅速传递重要信息的工具。多用功能性而非纯装饰动画，珍视用户花在你界面上的每一毫秒。

原文链接：https://medium.com/@sophie_paxtonUX/your-ui-isn-t-a-disney-movie-703f7fbd24d2

作者信息：Sophie Paxton

苹果旧金山字体的秘密

hi@victor42.work (Victor42) — Sun, 27 Sep 2015 12:42:00 +0000

[国外设计第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的系统字体都改了，而不是只用于Apple Watch？

旧金山字体不仅仅是一款字体

旧金山字体拥有许多高度易读的特征。实际上Apple Watch和iOS/Mac上的旧金山字体并不相同。

字体族“SF”用于iOS/Mac，而“SF Compact”用于Apple Watch。在“o”、“e”这类圆形字母上可以看出区别。SF compact的竖线比SF更平坦。

SF与SF Compact

这点差异使得SF Compact的文字有更大的字距，从而使Apple Watch这样的小设备有较高的易读性。

而且，SF与SF Compact被划分为两套子字体族，分别称作“Text”和“Display”。这就是苹果所谓的“视觉尺寸”。Text字体用于更小的文字，Display字体更大。

旧金山字体族

正如我之前提过的，Helvetica这种非自然（或者说无衬线）字体，两个邻近字母会“交叠”在一起，像“a”、“e”、“s”这种字母在小字号时看起来很相似。

Display与Text字体

用于小号字的旧金山Text字体，被设计成比Display字体有着更大的字距。Text字体的字怀也更大，为了小屏幕的易读性。

旧金山字体是动态的

旧金山字体的一大特点是它动态组织文字。系统会随着字号自动切换Display/Text字体。明确地说，20pt正是这个界限。

设计师与开发者不用操心该用哪种字体。比如给UILabel设置系统默认字体，系统就会为你选择合适的文字。

旧金山字体有一点让我印象很深，就是它的冒号（:）的显示方式。一般情况，冒号会刚好放置在基线上，所以放在数字之间时，它并非垂直居中的。而旧金山字体中，会自动将它垂直居中对齐。

垂直居中的冒号

旧金山字体是为数字时代而生的字体

如你所见，旧金山字体经过了精心的设计，为了使任何字号、任何设备都易于阅读。

被旧金山字体所替代的Helvetica，1957年诞生于瑞士，那时尚没有电子设备。即使今天，Helvetica也被许多公司作为企业字体广泛运用，毫无疑问，未来它会被当作一款伟大的经典字体使用。

另一方面，旧金山字体是一款现代字体。它会根据环境动态改变文字。这是数字时代的一种“数字原住民”字体。

→ 字体 —苹果开发者中心

原文链接：https://medium.com/@mach/the-secret-of-san-francisco-fonts-4b5295d9a745

作者信息： Akinori Machino traveling around the world, seeking next challenge

网页设计师该向印刷设计学习的3件事

hi@victor42.work (Victor42) — Sun, 20 Sep 2015 10:52:00 +0000

[国外设计第103期]

了解这3条经典原则，能帮助你创造更好、更易懂的网页设计。

许多经典原则，例如那些字体设计原则，在线上仍然有效。图片由Peter Van Lancker提供，www.flickr.com/photos/petervanlancker

设计就是特定功能的构成——无论构成物是字节还是原子。这就意味着网页设计从它的祖先——纸墨中受益良多。

本文中，我们重点介绍几则印刷设计原则，它们在线上仍然适用。

熟练掌握后，你就能提升UI与UX设计水平，创造出更好、更易懂的设计。

01. 让读者保持专注

印刷设计专注于易读性，网页上也是如此：只是把“读者”换成“用户”而已。

目标应当是清晰的表达，并且让人能够轻松纵览整个设计。我们来看几个从印刷设计沿用过来的概念。

排版

就像报纸，用户不会阅读网站上的每个字——至少一开始不会。正如免费电子书《为人眼进行网页UI设计》里面描述的，扫视页面是用户的标准行为。

为扫视而设计时，有两种模式需要考虑。首先是F模式。

F模式排版：Creative Bloq的主页

F模式反映了用户最通常的扫视页面的方式。他们的视线从上面开始横向移动，然后沿着左边垂直移动，寻找突出的文字。

一旦找到激起他们兴趣的内容，他们又会开始横向浏览页面。

还有Z模式：

Z模式布局：MailChimp的主页

Z模式也是一种自然的浏览模式，通常用于报纸，网页上也是如此。用户在页面顶部水平浏览，然后向左下移动，在页面的下一行再次进行水平移动搜寻。

文字

和印刷一样，网页文字也应该有清晰的层次。选择适合的字号，有助于关键词在页面上突出，让用户更轻松的浏览页面。

清晰的文字层次：World Baking Day网站

我们来看看文字层次中一些常见的层级：

主要：页面上最显著的文字更大更闪耀，吸引用户的注意力。通常用于标题与装饰。
次要：介于中间的所有内容。不像标题那么显著，但要在页面的常规文字中突出显示。
再次：主要内容所选的文字。文字层次中的这一级，有助于使用户沉浸在正文中。
其他：更小的一级，使用斜体、粗体、下划线、不同颜色等等。

配合运用，建立文字的层次，可以创造出秩序，防止用户迷失其中。

要测试你页面的易读性，可以使用“3秒原则”：简略地浏览页面，然后看向别处。其中突出的内容有没有反映出你设计意图？如果是的，那你方向正确，继续保持；如果不是，则需要打回重新设计——可能确实如此。

02. 建立平衡感

无论平衡感来自于对称、非对称或是放射状，都是为了让设计创造出稳固与一致的感觉。如果用户在你的网页上感到轻松，他们会更愿意逗留。

图片或文字不要过于密集：时刻考虑元素的间隙。排版倾向于简洁——密集的布局会妨碍用户。眼睛难以接受杂乱，使人更难接受信息的流转。

考虑使用极简的设计，通过白色、黑色或非常深的背景和前景元素达到平衡。《为人眼进行网页UI设计》里讨论过，负空间的运用可以引导用户的注意力。

震撼的极简设计案例：鞋类品牌ETQ的网站

上面展示的ETQ网站，利用了负空间将视线引向所陈列的产品。页面底部对比鲜明的黑白色块，让用户选择尺寸或查看商品价格。

网页上极少干扰信息，创造了一种平静与秩序的感觉——当然，也希望有助于促成用户购买。

03. 创造可靠的设计

让你的设计对于所有用户都是可靠的。不要使用两种以上的字体，确保所有年龄层的用户都能阅读。过于杂乱会扰乱信息。

如果你发现自己在屏幕前手足无措，你的设计可能就包含了太多的图片。

选择配色方案时也要时刻为用户着想——如果是医院网站，使用冷静柔和的色彩；如果受众是青少年，则适合更鲜明的色彩。

UC San Diego Health的网站选用的配色很吻合它严肃的内容

下面是一些书籍设计中常犯的错误，同样适用于网页：

**未经过足够的测试：**始终要尽可能广泛对设计进行测试。内容可能会跨越多种媒介（网页、电子书、印刷品），这会使得文字有新面貌。而且，有些字体转换到新媒介上可能会变得不易阅读。找到适用于所有情境的字体非常重要。还要考虑你的设计在不同屏幕尺寸、不同分辨率和不同浏览器中如何展现。
**不恰当的语调：**为每个页面元素选择正确的语调。与字体一样，标题应该吸引读者注意，副标题作为标题的阐明或补充，正文要像一段友好的对话——温暖亲切，让读者渴望了解更多信息。
**不恰当的格式：**遵循你所选的媒介：否则，会一直浪费时间修改文件，应对CMYK用于印刷、RGB用于网站这样的问题。

深度阅读：UXPin的免费电子书，2015-2016趋势的网页设计手册

想要了解更多有用的UI与UX设计技巧，查看UXPin的免费电子书，《2015-2016趋势的网页设计手册》

在其中，你会看到166个手工挑选的案例，来自于Adidas、Intercom、Apple、Google与Versace这样的公司。还列出了100项免费的在线资源，帮助你加速设计流程。

原文链接：http://www.creativebloq.com/web-design/3-things-web-designers-can-learn-print-design-91516662

作者信息： Kyle Pereira Kyle is publishing and design studio manager of TLAC Design Studio. He has more than 20 years of experience in print, graphic design, computer graphics and prepress: www.tlac.ca

小白的视角

hi@victor42.work (Victor42) — Sun, 13 Sep 2015 15:50:00 +0000

最近工作比较闲散，又有些私事要忙，有一阵子没有理会科技与设计了。持续几天后感觉不太对，与世隔绝的状态下，创造力与洞察力正在一点点流失。

以往这种情况，我会立刻回归工作状态，或者开始探索一些新的设计领域。然而这回，我打算玩大一点。因为我猜测，两耳不闻窗外事的心态，其中必定藏着非常重要的事实。

近2个月时间，不看设计资讯，不在意科技新闻，不关心行业动态。将自己与设计、与互联网尽量隔绝起来。做最基本的工作内容，维持每周的翻译，除此之外什么也不做。业余时间一心一意处理私事，与朋友聊天胡扯，出门吃吃喝喝，在家睡懒觉、打游戏、看小说、看电影。不得不说，这样的日子过得实在逍遥，但心里并不好受。

刚开始，会感到紧张，发现自己正在变迟钝。关于设计的想法越来越少，感觉它在离我远去。之后逐渐习惯，甚至觉得舒适，当然啦，不动用脑子肯定舒服。最后终于进入状态，无论如何，这也是另一种生活，另一种心态。有它自己的处事方法与思维模式，有其独特的看问题角度。而且，因此开始产生一些新的想法，这些想法，正是其中最宝贵的东西——我成功地让自己退化为一名小白用户，用小白的眼睛观察世界。看到他们在乎什么，不在乎什么。

小白用户不是傻，只是不在乎

长期接触设计与科技的我们，看小白用户多少有点不屑。点头像就可以修改不知道么？自己把通知关了还怪收不到消息？总说文件忘在家里，不晓得用个云么？

现在，我也是一名小白了，越来越对这种“科技无知”感到认同。虽然科技产品的感觉不会一夜消失，通过分析思考，我仍能比多数人先找到我要的功能。但不同的是，我不再有耐心了，我还赶着去看小说打游戏呢。

16G的iPhone5，经常提示我可用空间不足。从前我会查看空间使用量，不厌其烦地去那些应用中清除缓存，删除已下载的数据。即使到今天，我都没法清楚记得哪些应用能清缓存，哪些不能。现在作为一名小白，我找到了最简单粗暴却有效的方法——把微信QQ直接删了，重新下载安装，就能多出几百MB空间。

此举匪夷所思，但我有充分的理由。删掉两个软件，下载安装，重新登录，总共需要花5分钟，该如何操作我也很清楚。去各个应用里清缓存或许只要花2分钟，但就因为多了这个“或许”。会不会弄了半天没什么效果，最后花了我15分钟呢？

如果内心深处不认为手机是一件“好玩”的东西，我可1分钟也不愿多花在它上面，因为那并不是生活的一部分。

消息、更新，与我何干

我的朋友小棣与小帅，同是IT人，手机桌面截然不同。小棣的手机有着典型的产品经理式的桌面结构，以文件夹居多，按照功能仔细归类整理。小帅的桌面完全是另一个样，文件夹少，屏数多，滑半天不见底，满屏小红点。偶然滑到第一屏，发现Appstore的小红点数字已经堆积到了70多。

很经典的议题——小红点强迫症。我以前有更新必装，有消息必开（但开了不一定读）。就像在游戏里做日常任务，不把NPC头上的感叹号消灭掉，总是不舍得下线。小棣经常因此嘲笑小帅，说你还是前端工程师，手机桌面这个样子。我虽没跟着起哄，但也一度认为这个问题能反映出一个人的自我管理能力。

其实……根本不是这么回事。不知何时起，我开始能坦然面对小红点了，或许这拜微信公众号所赐。一个应用本身能推送的消息毕竟有限，点几下还能清掉。订阅号就不一样，先关注了再说，谁管看不看得完。消息铺天盖地涌来时，茫然了，小红点随之失去作用。微信说，怪我咯？你也会说，那怪我咯？不能怪任何人。

这就像是丧尸的末日，我拿着枪走进一间超市。里面有2只丧尸，我会尽量消灭它们，大门锁起来。如果丧尸足足有一个连，即使罐头够吃20年，我也会果断撒腿跑。

近几年开始，有不少应用在Appstore的更新说明上玩花样。Opera Coast就写过不少有趣的俏皮话，Medium还写过诗。我看完会心一笑，那一瞬间确实被逗乐了。然后……并没有打开它，默默返回了桌面，每次都是。

字段是什么鬼

我大概有1年半没有使用过前端技术了，不再需要我兼任。许多技术概念，我都要回忆一时半刻才能跟上思路。如今又主动与科技隔绝，想想还是有点担心的，这会不会是我设计生涯的拐点。

某天我在注册一个网站，输入框旁边写着“此字段必填”。当下我虽然清楚字段的意思，但还是感觉到了陌生。字段是什么鬼啊？区区5个字，来回看了三遍，怀疑是不是开发者打错字了。

还有之前提到的缓存，今年过年一定要问问我妈，你觉得这个“清除本地缓存”按下去会发生什么？如果她说是清除自己的位置信息，我会欣然接受，因为我就这么想过。

工作中，有个交互细节经常会引发不同意见：一个复杂的操作流程完成后，该不该有返回按钮？返回到哪个界面？化身小白后，实际行动告诉我这根本不重要。照产品的逻辑来走，我一层层进来，然后再一层层出去，再自然不过了。那让我来描述一下真实的情况：任务完成——按home回桌面——（如果是地图这类耗电大户，双击home关掉进程）——电源键锁屏——放回口袋。之后我仍然嫌这个过程繁琐，偷懒几次后找到真谛：任务完成——电源键锁屏——放回口袋。关键是放回口袋！对于我来说才是流程的结束，而不是离开你的功能模块。

回到小白状态，手里拿着这块捉摸不透的玻璃屏幕，此刻我只想从网易云音乐分享一首歌到新浪微博。它提示我新浪微博授权已过期，需要重新登录，于是我又耐着性子输了一遍账号密码。这样的事情经常发生，也在其他应用里发生。但头一回，我心里本能地骂了网易云音乐，而不是微博。片刻后才反应过来，其实网易背了黑锅。

如果我真是一个彻底的小白，我可能永远想不通这一点，网易这黑锅也怕是要永远背下去。任何的技术细节、产品业务逻辑，我都不懂，也不想懂。现象告诉我，有人得为此负责。也许我踩到积水，在餐厅里滑倒，传菜员会上前来替保洁员向我道歉，然后事情就此了结。

你提醒我还是我提醒你

很少见到身边人用siri对不对？我理解这种心情，大庭广众之下，与一台机器交谈，并指望得到想要的回答，多少让人有点傻傻不自在。周围环境吵闹时，还会识别出奇怪的东西。而且这么做会暴露隐私，让周围人知道你在做什么。

可是话说回来，它管用啊。回家路上正听着音乐，想起包里的手帕纸用完了，回家要记得补充一包。这种芝麻点大的事，我吃顿饭就忘了。于是长按耳机线按钮启动siri：“晚上9点提醒我带纸巾”，完全不必掏出手机。

以往我是个效率软件狂魔，邮箱、日历、笔记都是主屏的明星应用，摆在最顺手的位置……虽然实际用得很少。尝遍各种Todo应用，制作精良的俯拾皆是，各有千秋。我一直用Any.do，喜欢它的简单纯粹。下拉添加任务，右滑完成任务。我会按照场景给任务分组：买洗衣粉归为生活，更新标注图归为工作，研究pixate归为学习。有截止日期的任务，还会关联到他们家的日历应用Cal里。正是按照Any.do所希望的方式，井井有条地进行着自我管理。

偷懒用了一回siri之后，就再也回不去了。我是个小白呀，不是专业人士。竹子提醒我，回来记得买点水果；公司HR提醒我，记得给新同学做一份名片。两者有什么区别？都是在某个时间点，想起一件事要做，仅此而已。做完之后又为什么要向Todo软件汇报？这是它在提醒我，还是我在提醒它？

提醒到位的那一刻起，我就不需要它了。如果你能为我完成，那么请完成后告诉我结果。正因为你完成不了，才让你提醒我，我自己来。毕竟没有哪个应用能替我炒出一盘番茄鸡蛋。目标按时达成，就是最好的自我管理。Todo软件里一团浆糊，又有什么关系？

召之即来挥之即去，这才是称职的仆人。

我们锱铢必较，尤其时间与金钱

搬家到了一个有KFC的地方，晚饭举棋不定时经常去。KFC很争气，接入了电子支付，现在只有充公交卡需要现金了。

支付宝的8.8折优惠已经持续了很长时间，我和竹子每次去都会先领折扣。她的手机还是2G网络，领到一半没动静了。我们找个空桌坐下，折腾了10分钟，终于领到折扣去点餐。

有时我自己也会去，同样遇到没网，这估计得怪运营商。我真没耐心折腾，也不好意思让排在后面的人等，5块钱可买不了这一队人饥肠辘辘的2分钟。手机付不了款，我会直接用现金。掏出来递过去，接回找零，塞进口袋，也很方便。而且不必目不转睛盯着一块小屏幕，并试图点击其中几个更小的区域。

同样的状况，两种完全相反的应对。竹子一心想要折扣，不惜花上10分钟。我饿着肚子穿过半个杭州，一秒也不想等。无论哪种，都不关电子支付什么事。

翻一翻我和竹子的微信聊天记录，没什么实质内容。每天抬头不见低头见，急事电话说，不急回家说。即使这样，微信里还是频繁有信息往来，都是外卖应用的优惠券。观察聊天记录的变化，很有代表意义。

有那么一段时间，每天临近中午，我俩开始互发饿了么优惠券。某天她开始发美团外卖，我仍然在发饿了么。这情况又持续了几天，我也开始发美团。又过了一些日子，我开始重新发饿了么，她也随之倒戈。到最近，我们又几乎同时开始发美团外卖。这中间发生了什么？

那天我偶然想起这件事，问竹子怎么换来换去。她嫌弃我学她，我说后来是你在学我好吧。聊开之后，得到了一个显而易见的事实：饿了么满15减8，我们开始频繁点外卖。补贴力度逐渐减少，变成满15减6之后，竹子首先发现美团有满15减7。我后知后觉，某天心情好也装了一个，自此就很少打开饿了么。但我并没有删掉它，直到我某天发现它开始满20减12了，又重新启用，同时留着美团。很显然，竹子也发现了。好景不长，当然长不了，那可是减12啊。我们看着它变成满15减8，再变成满10减6。然后我们又开始欢快地互发美团外卖优惠券。

如果要打价格战，那就没人关心好不好用了。

写在最后

现在，点亮你的手机，扫一眼主屏的图标。回想一下，它们有没有在使尽浑身解数吸引你的注意？看这里看这里看这里！可我是个小白呀，我只想查一下去地铁站的公交车。大家的热情过头让我紧张不安，我一头钻进地图App，找到我要的路线，然后头也不回掐灭手机，走我的路。

身为小白用户的两个月，感觉是一段很精分的日子。心情好见到什么点什么，莫名其妙下过几个游戏和软件，第二天竟然记不起我是如何找到的。没心情时一切都是噪音，拉开通知中心一看，简直是见了鬼，默默把它推回去，当作什么也没看见。

很难理解，人就是这么不稳定的存在。小白用户喜怒无常、出尔反尔，打不打开某个应用基本看心情。这段时间，深感我的思维方式是意识流，我的行为方式是goto语句，难以捉摸。

本以为小白状态是暂时的，但是发现这感觉很妙，其中一部分对我产生了永久的影响。可以讲的还有很多，但我不愿再写下去了。写这篇文章的过程中，设计师的角色正在回归，小白的感觉正在退散，而这其中有些心态与视角，我并不舍得就此抛弃。

结论可能有点悲观，也可以说根本没有建设性的结论。但这段时间来，我感受到的是真实，或许这才是科技生活该有的面目。

有目的地为Apple Watch而设计

hi@victor42.work (Victor42) — Sun, 06 Sep 2015 10:40:00 +0000

[国外设计第102期]

几周前，我在纽约参加一个会议。这是我第二天使用Apple Watch，于是我想应该用它来查找从会场回程的路线。在以前，我会想掏出手机，输入地址，设置成步行导航，并且在步行途中视线来回游移于手机与街道之间，避开时代广场的出租车、自行车和穿着各异的人物。

现在，我只需要说“带我去时代广场的W Hotel”，按下开始然后步行——从来不用操心手表，除非我感受到振动，告诉我该拐弯了。

它从根本上改变了我与城市的互动方式。不再拘泥于屏幕，我可以眼观六路耳听八方，给予手表充分信任，让它告诉我接下来怎么走。除非在我确实需要的时间或地点，我都没有看过我的移动设备，它被解放出来了。

我意识到我从没有真的想要操作我的手机——只是觉得我需要这么做。如果移动技术能足够融入环境，我就会忘了它，那些充实我生活的时刻除外。

举个例子

有个盛行的食谱应用，我觉得它就是个反面教材。在iPhone上，它非常有用：少量点击就能查找、收集和分享食谱，还能看到查看营养成分、创建购物清单等等。

那相应的Apple Watch应用可以用来做什么呢？几乎一样。

这就是问题所在。他们实际上什么也没改变，除了使你在iPhone上的常用操作变得单调乏味。

“想清楚一点，你的智能手表应用为何存在，既然有iPhone应用。”

应该想象成一个手腕上的更加智能的应用——它不该被视作相应工具的复制品，而是烹饪助手。

或许它应该追踪你的购物清单，在你接近喜爱的食品店时，提醒你要买什么。或许它应该指导你的整个烹饪过程，告诉你接下来用什么配料、需要多少量（甚至使用加速度计或其他传感器来检验你是否搅拌均匀），为你设定时间，晚些时候提示你评价这份菜谱-Food（并且将评价作为推荐新食谱的参考）。

当你本周想要探索新方式或做一道新菜，你应该使用iPhone应用，手表应用这时应该有个截然不同的存在理由。应用很少能接近这一点，这就是史蒂夫·乔布斯所说的，魔法。

开发者还没有权限使用所有传感器和控制器（即将开放），其中多数人在创建第一批软件时甚至都没有一台硬件设备，所以我们不必对他们过于苛责。但如今可用的多数应用，只是把口袋里的通知中心移到了手腕上，或是创造了一个烦人的袖珍iPhone应用。这个问题，并不值得专门创建一个新的$350-$17,000的产品类别。

摄影师：Kārlis Dambrāns。Creative Commons Attribution 2.0 Generic.

Apple在他们的人机交互指南中暗示了它的潜力，但他们自己也并没有完全挖掘出来。公平地说，他们知道的可能比开放出来的更多，给出了产品的早期形态。

“设计师：理解用户的体验，精确把握介入时机。”

当然，设计一个真正有意义的应用需要Apple Watch和传感器更加智能。设计师也需要更加明智，理解用户当下的体验，精确把握介入时机。

真正的机会

如果多数手表应用所做的，本质上只是把手机绑到我们手腕上，并且移除了其中多数功能——或者更糟的是保留了这些功能——那我们就是在错失良机。我们需要重新思考智能手表意义所在。

归根结底：iPhone替代现实，而Apple Watch是现实的扩展。

换句话说，iPhone是终点站，是个移动中心，将你所需的一切信息虚拟化。它不断召唤你去探索它、用它学习和创作。它是庞大内容世界的一扇窗。不论喜欢与否，它与现实世界是有所冲突的。

在手机上，很少有通知是只展示而没有进一步操作的——既然打开了，为什么不看看Twitter呢？作为一个平台，它往往是被动的。设计师尝试预测你想做什么，为这个目的而设计界面，但是否开始第一步、告诉应用你要做什么，这仍取决于你。

相反，Apple Watch不会（至少不应该）吸引你进行更深的探索。需要它时，它会激活。它会感知你的动作，为你展示一点点特定的有用信息，然后默默退下。这是与环境高度融合的暗示，作为你现实生活的通知与补充——此地，此时。

本质上说，这是移动技术更加有利的位置。

摄影师：Shinya Suzuki。Creative Commons Attribution-NoDerivs 2.0.

为Apple Watch设计时需要牢记的一些诀窍

确保你真的了解使用场景——不仅仅是人们如何操作应用本身，还有他们这些时刻“在现实生活中”在做什么，你什么时候可以带着信息介入。如果你只能描述你所设计的功能，而不是相对应的时刻，那你还有很多事情要做。

“如果你只能描述你所设计的功能，而不是相对应的时刻，那你还有很多事情要做。”

**要想着增强现实，不要取代现实。**目的不是让人花更多时间看着屏幕——而是将人从观看屏幕中解放出来，让他们更加聪明、聚精会神地融入周围环境。

**不要试图打造迷你版iPhone应用。**Apple Watch擅长一些事情，也有很多无法完成的事情。善用它的长处，想清楚一点，你的智能手表应用为何存在，既然有iPhone或iPad应用。

摆正位置，Apple Watch并非把通知中心向左移动1、2英尺。Apple Watch的意义在于移动设备扮演的角色的演化，退居二线，为人类活动让道，成为一个真正辅助的背景角色。而不是与人们生活的现实世界作对。它让你更好的生活，聚精会神地做自己。

那样的愿景——至少以一种成熟的形式体现——就是我从中领悟到的。

焦点图摄影师：LWYang。Creative Commons Attribution 2.0 Generic

原文链接：http://blog.invisionapp.com/meaningful-design-apple-watch/

作者信息： Peter Lewis, Product Designer at Capital One Peter Lewis is a Creative Director, Design Strategist, and Product Designer at Capital One, working in the Washington, DC area to design new experiences that help people manage their financial lives. On the side, he writes and makes videos. Follow me on Twitter

何谓隐形设计

hi@victor42.work (Victor42) — Sun, 30 Aug 2015 00:03:00 +0000

[国外设计第101期]

设计并不总是耀眼夺目的艺术。它讲究微妙、实用，而且常常是不确定的。很简单，好的设计往往是隐形的。

明确一点——隐形的设计并非在项目中增加图层、透明度或是隐藏含义。它是为了打造用户为中心的项目，使之功能齐备，视觉愉悦。

当我还是个年轻的设计师时，就一遍遍听到这句话。如果你不得不“装饰”画布，那就是在过度设计。最好的设计——真正使项目有效运转的设计——是隐形的。

但是如何做到隐形？尤其网页设计是一种相当视觉化的手段。（额外补充，本文会重点列举几个网站，来印证隐形设计的观念。）

思考设计中的隐形

咱们别离题万里，设计当然是可见的。关于这点毫无疑问。但是你所用的工具与技巧，不应该在普通用户面前耀武扬威。

多数设计只追求“感觉对了”。用户想要沉浸其中，操作某样东西。他们不必理解其中缘由。这就是隐形的设计。

Oliver Reichenstein，Information Architects的创始人和总监，以强调隐形设计观念而闻名。虽然在听到他的观点之前，它已经深深烙印在我的脑海中。在The Verge的访谈中有一些只言片语。

“优秀的设计是隐形的。优秀的界面设计会细到亚原子级的微观字体（文字的精确定义）、看不见的宏观文字布局（文字的运用方式）、还有由交互设计和信息架构组成的隐形世界。最少的输入，最丰富的输出，界面设计师都致力于使用户花费最少的注意力。就像字体设计师与工程师那样，我们并不会试图找到完美的解决方案，但会寻找最佳的两全之策。”

隐形的交流

当你创造网页、移动应用甚至智能手表的交互时，就是在设计某种类型的交流。设计要承载信息，而非阻碍信息。

你在处理时会用尽所有设计手段来打造一种体验。最终产出并不是给你的，甚至也不是给其他设计师，而是给广大不懂（也不想懂）色彩理论、间距和字体的受众。他们只知道所有这些结合在一块，是否紧密、好用和有趣。

这就是将设计视为一种隐形的手段的重要之处。

不同类型的隐形

我们谈论隐形设计时，会想到一些不同的东西。每一种隐形设计都很重要，会通过不同方式影响你的工作。

隐形的产品和排版，例如品牌或是你不会注意到的广告。（这对应用和游戏设计师很重要，他们常常要思考设计中的摆放问题）
隐形的交互和通知都做到了无缝衔接，在你执行某些操作或任务时并不会想到它们。（例如手机上的闹钟和警告）
隐形的美学设计可以建立情感连接，与用户融为一体，让人们渴望投入其中。（这正是我们所关注的）

设计技巧

隐形的美学植根于设计理论的基础中。这并不是一种趋势，也非某个酷炫的新用户体验特征的运用。它使用文字、色彩、字体、图片、图标和一些技巧来传递信息。我们来回顾一些基础，看看它们能如何为你所用。

**文字和语言：**用来向用户传递一种语调和情绪的文字。在用户与设计进行交互时，使用一种语言来传递你想表达的感觉。它是正式的、轻松愉快的、还是滑稽的？它应当使你感受到热情，或是想要做出某种反应？还要想想措辞的韵律，大声朗读时听起来是怎样的？
**色彩：**每种颜色和色彩组合都有不同感觉。要考虑情绪和文化因素，选择颜色会花费许多时间。仔细选择配色方案，选用那些能促使用户执行特定操作的颜色，同时也创造合适的感觉，保持平衡与协调。
**字体：**字体本身也会带有含义。从干净的无衬线字体，由周遭环境获取含义（Helvetica）；到复杂的粗黑体风格（巴洛克式文字），带有一种形式感。你选用的字体类型会传递特殊的感觉。举棋不定时，就坚持使用无衬线字体或是简单衬线的字体，使用统一的笔画粗细和常规字重。
**图片：**你所用的图片里有什么？包括照片、动画和视频。其中的人是开心面带笑容的吗？（里面有人吗？）颜色是暖色还是冷色？动作快速还是缓慢？浏览步调与阅读流程要合适——就像步行速度一样——可以给用户创造一种特定的舒适度。太快或太慢的动作，就会开始引人注意，用户就会更加关注它，甚至超越图片本身。
**图标与UI元素：**统一的图标集和用户界面元素，在隐形上大有帮助。一套系统会通过标准化展现，来告诉用户网站如何运转、如何操作，即使图标对应的操作与特定外观可能并不相同。当用户不需要思考它如何使用时，隐形就生效了。想想每一个零售商都在使用的购物车图标，它是查看商品的一种标识。用户不需要思考如何进行到最后一步，或者说如何支付；这个元素会将他们引向正确的操作。
**其他技巧：**有一大堆设计技巧可以成就或破坏你的设计——投影、文字效果（例如倾斜）、描边与边框、留白、下划线、列表，等等。其中任何一种的关键还是在于运用。如果你打开编辑软件的工具窗口，在默认设置状态下点击“应用”，你就做错了，还会引发花哨的效果。用户忽略了某张图片，并且怪罪于它阴影太重的时候（尽管受过训练的设计师之眼能够辨认出来），才应该使用这些效果。设计效果只应该有助于整体信息和视觉目标。

结论

再回想一下Oliver Reichenstein说过的。它强调“微观”和“宏观”元素。这是关键。要达到完全隐形，设计的每个细节都要精心推敲。

带有目的进行简单的设计。不要仅仅因为你想要使用某种技巧，就过度装饰或加入流行元素。设计好每个细节，让它们无缝协作。同时设计好大局，让它勾绘出你的项目试图传达的整体概念。不要过度思考：有时候简单的解决方案就是最正确的。（也许正是隐形设计的概念促成了扁平化设计的兴起，并且持续盛行）

你有没有偶然发现哪些网站的设计是隐形的，并且完美运转？可以在评论中与我们分享。

原文链接：http://designmodo.com/invisible-design/

交互设计的5个常见错误

hi@victor42.work (Victor42) — Sun, 23 Aug 2015 12:53:00 +0000

[国外设计第100期]

交互设计从来都不容易。它包括了用户行为的深度分析，和一丝不苟的规划。随着新技术和交互设计模式的出现，事情并不会变容易。

艳丽的图片、顺畅的鼠标悬停效果和意外的动画，不再那么容易引起用户注意了。但难题却没有解决——如何创造令人愉快的用户体验，让用户面带笑容完成转化？如果你对常见的设计陷阱有所警觉，就能更少犯错。

为了方便——可能也为了让你知道你不是独自一人——以下总结了最常见的交互设计误区。

1. 铺天盖地的创新

网页设计师都非常有创造力。我们希望通过作品来表达自我。我们总是在寻求创新的设计方法来脱颖而出。但是，当涉及到交互设计时，创新并不总是好事。甚至会给你的网站带来坏的影响。用户渴望熟悉的事物，他们总是会遵循一些特定的操作方式。

Randy J. Hunt，Etsy的创意总监和Product Design for the Web作者，清晰地陈述过：“嘿，设计师：别再TM自作聪明了。”在文章中，他详细解释了为什么别在网页设计上过分热衷创新。

以Iotorama网站为例。它挺漂亮，音乐深情，但是看着满屏幕移动的球，用户不知所措。不要误解我的意思，这个项目非常出色，超级有创造力！我喜欢这个大胆的创意，但它一点也不直观。

还有一个例子。Safety on the Slopes项目背后的创作者想到一个巧妙的交互式图形，用来警告用户冬季运动的危险。非常创新，同时也很直观、有趣、令人印象深刻。

2. 令人困惑的导航

“不要自作聪明”的准则也可以沿用到导航上。有些设计师试图使用折衷的名称来寻求新颖。比如Chijoff网站就让用户不知道他们究竟提供什么，如何聘请他们。需要看上好一阵子，才能理解“共同创造”页面实际上就等同于“服务”。甚至还有，通读整页后用户仍然不知道该怎么做……页面末尾只有个小注册表单用来获取最新的行业新闻和提示！在“联系”页面也没有表单，只有邮编和邮箱地址。使人们联络或聘用他们非常困难。

你能猜出“Universe”在Maison Margiela网站中是什么意思吗？实际上它链接到他们的Facebook主页。谁能想到？

相反，看看legworkstudio的网站。它的创意与超凡令人震撼。导航非常清晰不含糊。用户绝对不会迷路。

3. 杂乱无章

有一段时期，网站都试图把一切可能的东西摆上台面。那些日子已经一去不复返，但是很多网站仍然在犯这个错误。看看这个在线商城：

设计师试图坚持一种单色配色，但是大量颜色不同的色块、logo和字体，在这个页面上就足够让用户步履蹒跚。搜索框有着醒目的文案：“那么，今天你想要什么？”，但整个布局的外观和感觉非常过时。

EBay是主要在在线零售商之一，在这点上做得不错。没有用产品图片、促销和各种行动召唤塞满整个页面，而是保持它干净简洁，强调他们确实希望用户首先关注的东西，并附上清晰的提示，接下来该怎么做。

4. 注意对比，大哥！

对比是创造视觉层级、吸引用户注意特定元素的最重要的方式之一。在网页设计中，对比不仅仅意味着颜色使用，也包括尺寸、形状和位置。

这个网站是最简单生动的例子。他们做到了统一一致，但整体背景和按钮并不够吸引人，尤其是在订购按钮上。

相比来看这个。颜色选用很接近，但结果却完全不同。而且，创新的滚动效果，流畅地介绍了产品的新功能——反光材料。很酷，对吧？

5. 忽视表单样式

表单设计是用户体验最基本的部分。每个网站都有一个目标——无论是树立榜样、直接售卖产品或是提供信息。不幸的是，许多网站有着光鲜的首页，却宁可用长表单和复杂的验证码来使用户厌烦致死。除非用户有强烈的先导动机，否则他们就会离开。

有了JCF这样的有效的跨浏览器的解决方案，是时候忘记那些丑陋的默认表单元素了，转向一种更加沉浸的用户体验吧。

另一件气人的事，是表单要求太多信息，或者没通过完善测试。例如sketchybusiness.io的表单高亮显示了所有的空白框，甚至包括非必填项。

如果你看了mostlyserious.io的表单，你绝对会喜欢它的鼠标悬停和按钮按下状态。而且，“别害羞”的提示文案增加了一丝亲切幽默的感觉。

最后……

不要懒于测试！对你重要的对于顾客未必重要。他们在哪里遇到问题卡住？是导航、奇特的视觉差滚动效果、还是长时间加载的视频？用户测试的最大好处之一，是你可以通过用户的视角来观察，关注他们的需求、做出改进。不要抑制你的创造力。要牢记网站访客可能会感到困惑和沮丧。

你见过最糟的交互设计错误是什么？可以在评论中分享你的想法和故事。

原文链接：http://designmodo.com/5-interaction-design-mistakes/

作者信息： Anna Lisnyak Anna Lisnyak is the Art Director at PSD2HTML.com, the leading PSD to HTML and web development company. With over 8 years of graphic design experience, Anna is an avid reader and blogger. She has an exceptional eye for details and enjoys everything related to typography, web and UI/UX design.

使网站显得业余的10个错误

hi@victor42.work (Victor42) — Sun, 16 Aug 2015 00:11:00 +0000

[国外设计第99期]

创建自己的网站对于资金拮据的企业主似乎是个好主意。可以以后再找设计师，等你的创业项目取得了一定的地位，那时你才会开始考虑这些无意义的事情。

是这样吗？

事实证明，对于初具雏形的业务，设计远比你想象得重要。当你运营线上业务时，访客的判断往往取决于设计中的小细节。

顾客都是三心二意的。他们对一些主流品牌已经产生了信任。为什么忽然要开始信任你？除非你在头几秒就吸引住他们，否则他们就走了。

最终，最微小的细节产生了最大的差异。如果你要树立一个值得信任的品牌，创造收入，这些细节必须仔细查验、精心准备。本文中，我就来谈谈网页设计中常见的业余错误。即使设计能力有限，你也能辨认出一些常见的错误，它们或许也渗入了你的网页设计中。

注：本文中使用的案例，都来自于创业项目，它们都特别重视各自网站的反馈。

1. 模版的不恰当使用

我不赞成在大型业务中使用网站模版，不过小型的、基于bootstrap的创业公司确实有此需求。无论如何，如果你最终用了一套模版，最好还是找个设计师为你的品牌适当定制化。最终甚至可能得到非常棒的产出。

预先设计好的模版网站存在一个普遍问题，logo和网站其余部分的视觉关联很弱。logo色彩并没有重复出现在网站的其他地方，或者与网站使用的字体并不搭配。

如果你要节省品牌包装开支，至少这模版不能太明显。

2. 使用默认的Bootstrap外观

另一个同样骇人的错误，是在公司网站上使用Bootstrap的默认设计。使用Open Sans可愚弄不了大家。很难区分各个使用相同设计的网站，这对你的品牌有害。

Bootstrap网站的一个赠品是极佳的字体。（正如Bootstrap那样）它全面的基础图标库，为它聚集了大量人气，你会需要它们来创建统一的视觉语言。非常适合的情况下，它可以作为复杂界面的一种有益补充。

当然，如果原创图标比通用图标对你的品牌更好呢？为什么不找找更精细的图标集，来描绘你的主要卖点——或是异想天开？找个插画师来帮你吧。

3. 文字对比问题

多数非设计师都远没有意识到字体的重要性。它们会成就或破坏整个设计，即使只是些“字母”。

“小作坊出品”的网页设计有个常见问题，标题和正文之间的对比太不明显。单单选用几个字号通常并不能解决。尝试在标题上使用更粗的字重，让它显然比其余文字重要。这有助于建立层级，温和地引导视线浏览网站。

4. 使用深色背景

背景色覆盖了网站的绝大部分区域，所以要谨慎选择。

首要规则，纯黑网站几乎没有好看的，除非经过专业的设计。白色比较无风险，不过更多设计师使用非常浅的灰色。当心更深的灰色，更糟的是黑色字母在这种背景上的易读性。灰度最好在15%以下，保持设计的明亮。

5. 多个同等的行动召唤

网站的每个页面都应该只有一个主要的行动召唤。如果不止给出一个操作——访客会困惑，他们可能会需要更多时间来做决策，然后采取行动。他们甚至会因为这样的认知负担而离开！

尽可能多地去除行动召唤。让人们更容易采取行动，无需思考。无论是注册按钮还是选择套餐，通过图形符号来使你期望的操作更加显眼，同时让其他选项更加温和，削弱吸引力。

6. 对齐与间距问题

间距很难处理。保留适当间距，元素周围不要太多留白，这可能是设计要考虑的最困难的部分。但通过一些规则可以简化。首先，确保所有元素都恰当地分组。其次，在这些组周围保留足够的空白。

7. 不专业的文案

写作同样很难，但它必不可少，能让你的卖点通过互联网传播。尤其如果你在卖东西，你得确保文案容易理解，并且有校对者检查修正所有拼写错误。

我常常在网站文案中看到一些令人尴尬的句子，似乎从设计的原型阶段开始，就以一段占位符卡在那里。最好在网站上线前找人通读所有文案。

8. 易读性问题

如果无法阅读，再多再好的文案也拯救不了你的业务。许多小细节可能损害文字的易读性，结果会影响人们对你公司的印象。

要小心地修复这些问题，比如行高太小、字号太小无法阅读，或者是文字与背景反差太小。尽管这些对于多数人不会造成实际的阅读困难，但事实是这些问题存在于网站上，使得网站看上去显得不太专业。你想象一下Facebook会有易读性问题么？

9. 不统一

你的品牌最好保持统一。在所有出现的地方，无论是社交媒体、Facebook广告，或是线下，顾客都要能立刻辨认出你的品牌。

不过我们回退一步，首先要确保网站本身的一致性。有没有继承的无序列表样式覆盖了正文字体？logo的颜色和网站上使用的完全一致吗？你是否在各处使用相同的阴影，还是说只是“足够接近”？通常要好好组织CSS文件，删除一切不需要的代码就能修复这些不统一的问题。

10. 过时的设计

不论喜欢与否，我们现在要向拟物主义告别了，每个仍然在重度使用渐变和阴影的网站一定会显得过时。尽管你的一些3D效果或许在某处侥幸成功，最好还是在扁平化设计指南中探索创意。

都在这里了：这是我通过分析一些不同的创业公司主页，得出的10个最常见的问题。现在再去看看你的网站，是否触犯了上面的哪条？

顺便提一下，我在写一本关于设计如何帮助企业主建立业务的书。想在发行时得到通知吗？来名单中留个名吧。

原文链接：http://designmodo.com/10-mistakes-website/

作者信息： Heidi Pungartnik Heidi Pungartnik is helping bootstrapping entrepreneurs grow their business with design at DesignforFounders.com. She’s writing a book on the topic as well so be sure to jump on the launch list!

入门指南：品牌音色与用户体验

hi@victor42.work (Victor42) — Sun, 09 Aug 2015 14:04:00 +0000

[国外设计第98期]

为什么有些产品深入人心？他们的设计中，是什么使我们感觉亲近、愉悦和高兴？

iOS和Google Play应用商店包含了超过200万应用。如果这还不至于让你头晕，那我们来聊聊8.76亿个网站和212个主流社交网络，它们都在竞相争夺用户的注意力。

对于我们这些创造者来说，这个市场挑战巨大。我们这一代接触的科技产品更加有趣好玩，难以自拔，我们会问：我们的项目如何杀出重围？

用户已经厌倦了毫无生气的语言，然而绝大多数科技产品仍在将之强加于用户。他们也受够了平淡乏味的界面，已经操作了几十年了。

相反，用户想要真实的体验，能让他们舒适、轻松，感到亲切。

用户想要真实的体验，能让他们舒适、轻松，感到亲切。

精明的用户需要轻松的体验。轻松是对他们而言。对于我们？我们有责任付出一切代价提供这样的体验，并且以一种有意义的方式区分我们的品牌。这意味着需要花费额外的时间，来保证我们的产品说的是人话——而不是机器语言。

当然，这些听起来都很复杂。不过我将它精炼为3个简单的步骤：

找到品牌个性
定义品牌音色
将它转换融入用户体验

我们一步步来：

1. 个性：什么使你的品牌具有人格，为何如此重要？

美国心理协会(APA)将个性定义为“在各种场合、随时间变化，能够影响多种特征行为模式的个体的独特心理特质。”

我们的个性会影响我们思考、表现和感受周遭环境的方式。类似的，用户操作你的产品时，他们希望友善的言语引导他们经历特定的事件流程。将品牌与几种典型的人类个性关联起来，就能创造关联性更强的故事，容易使用户更加投入。

换句话说：

人与人容易亲近，如果你的品牌感觉像“人”，他们就会更亲近。

2. 音色：用一个简单的模版来定义语调

定义品牌个性，让我们更好地思考如何面对用户。它表明了要用什么音色来讲故事。将品牌音色的概念牢记于心——它会帮你完整这个决定性的转变，从“机器语言”到人话。精心设定的音色会影响产品体验的不同阶段，成为销售、社交渠道、甚至客户支持的重要资产。

定义品牌个性，让我们更好地思考如何面对用户。

像音色、语调和语言这样的术语可能让人困惑。牢记一点，音色是你品牌表达的整体风格，而语调是音色中的变化，用来反映特定态度或响应特殊情境。另一方面，语言是特别指措辞的运用。简单说，你的品牌通过特定语调来反映整体音色，使用特定的语言来适应不同场景。

基于你刚树立起的品牌人格，花几分钟来回答以下几个关于音色的问题：

我的品牌会说什么？怎么说？
在体验的不同阶段，我的品牌应该对用户说什么？
它讨厌的是什么？
什么是它的至爱？
尝试横向思考：你的品牌最喜欢什么喝什么、吃什么？为什么？

当你想到这些问题的答案，将你新定义的品牌音色写在纸上。建立一系列指南和例子，来帮助团队中每个人达成一致。看看Mailchimp的音色与语调网站，这是品牌音色指南的杰出案例。

我建立了一套模版帮你捕捉语言，用来反映品牌的音色。要填好它，你需要定义一系列用来表述激动、鼓励、担忧、遗憾和感谢的措辞。例如，成功提示表达出激动之情，而警告信息表示担忧。还要想出一些措辞案例，来表现如何在语境中使用措辞。

3. 转换：将品牌音色融入用户体验的10个方法

无论你使用哪种结构来将整个用户体验可视化（行程图、流程图、网站地图、故事版，类似这些），你的品牌音色可以也应该融入到每个阶段中。

通常可以从这些地方开始，加入你定义的词汇和语调：

注册流程
行动号召按钮
登录流程
合作伙伴着陆页
通知
业务邮件
升级流程
帮助区域

改变机器语言是个令人望而却步的任务。你可能会不止一次觉得自己做过头了。我们会不会太不正式了？这会吓跑用户吗？购买按钮可以用俚语吗？回顾之前的模版，有助于你停留在品牌上，常规的A/B测试能让你在合理的风险范围内做实验。

我收集了8个主要品牌音色案例，它们都融入了用户体验流程，希望能给你启发。其中多数都关注微文案，这些表面上的细微文案和措辞，对于用户就是一切。

1. PicMonkey的创意预加载文案 经验：如果你的品牌吉祥物是一只懂科技的猴子，放胆让它在压缩用户的文件时“凝视光束”。

2. Virgin America的机智评语 经验：幽默有助于缓解紧张，某些行业（例如航空）绝对会充分利用。嗯，就像Virgin说的：生活可不是海滩度假。

3. Hootsuite极度诚实的睡眠模式 经验：用户消耗了不必要的服务器资源。打个盹，让他们知道它正在休息——用尽可能友好的方式。

4. Pandora的touché station介绍 经验：如果你已经克服困难，创造了高度复杂的算法（音乐基因项目），你也可以发起一个会话，告诉我它的意义所在。

5. Buffer直率的通知 经验：用户成功的操作，是一个发扬品牌个性的机会。如果它刚好可以机智又有趣，那有何不可呢？

6. Slack令人耳目一新的欢迎信息 经验：用户有时感到压力山大。面对它，拥抱它，让它成为你任务的一部分，成为他们一天中最棒的部分。

7. Waze体贴的建议 经验：让用户知道，你时刻牢记他们的利益。尤其当用户手忙脚乱时，你的应用需要弹出警示。

8. Mailchimp欢快的提醒 经验：有时候一行代码写着“操作成功”，对用户更有意义。没错，我意思是你的应用确实发出了一封邮件，但那背后如何？花些时间来祝贺用户，别炫耀你的技术。这是属于他们的光荣时刻。

原文链接

作者信息： Laura Busche Laura earned a summa cum laude degree in Business Administration from American University in Washington DC, and a Master of Arts in Design Management from the Savannah College of Art and Design (SCAD). She is passionate about consumer research, design thinking, branding, and their exciting crosspoints. She is the author of O’Reilly Media’s Lean Branding book. Laura is a Brand Content Strategist at Creative Market and regularly blogs about branding and business at laurabusche.com/blog. Follow me on Twitter

Material Design只是独辟蹊径，并未全面胜出

hi@victor42.work (Victor42) — Sun, 02 Aug 2015 00:04:00 +0000

[国外设计第97期]

Material Design发布之时，Google在设计领域做出的努力令我印象深刻。在这方面Apple一度遥遥领先。这种局面结束了。记得我以前总抱怨Android设计的那套不统一、缺乏文档、缺乏吸引力的暗色主题，还有模棱两可的汉堡菜单的滥用。Material Design解决了其中很多问题。如今它提供了一套统一的设计语言，更明亮、色彩丰富，并且背后有深思熟虑的设计指南作为坚实支撑。

但是尽管它色彩漂亮，卡片的使用提供了强烈的纵深感与操纵感。我时常扪心自问，这真的像许多设计师说的那样，比Apple的iOS设计优秀吗？我要发表一下我的看法，我觉得它只是独辟蹊径，并未全面胜出。

与iOS的相似点

我们从iOS的3项核心原则说起：清晰、遵从和深度。

清晰是指文字易读、图标明显、对比强烈。清晰的定义,对于不同平台是特定的。对于iOS和Android用户而言，什么是清晰的取决于他们熟悉什么。iOS用户可以立刻辨认的图标，Android用户或许不行，反之亦然。

深度是两大平台共有的另一项原则。但它们用不同的方式表达这一概念。iOS提倡模糊和渐变，Android却强调投影和纸张的概念。

拟物2.0

虽然都这么说，两大平台都用了重要的方式重现了现实世界。它们通过模糊、投影，还有符合物理规律与空间关系的动画呈现一种拟物化。拟物设计使用熟悉的隐喻，有助于引入新概念，但是过度细致的纹理和立体效果绝对是自取灭亡。作为用户，由于科技对我们而言已经不那么陌生，我们已经不适应拟物设计了。皮质日历和黑胶唱片，在这个时代已经比不上数码概念了。

设计的数字化，使得陈旧的概念显得过时且莫名其妙。

没有人再用这样的日历了。

这两种设计语言都有各自的弱点。

例如，多层模糊相互叠加，有种割裂感。而且，有点太鲜艳了。

卡片的概念在圆形屏幕上看起来截然不同。卡片占据了整个宽度。文字的对齐方式感觉不协调，因为有很多不必要的留白。在圆形屏幕上，列表也难以使用，因为边角处隐藏了重要内容。

不过这些Android Wear界面看起来非常棒。真的给人一种专为圆形屏幕设计的感觉。

内容在Material Designs中并非核心

顺从是这两者的差异所在。iOS完全是内容优先，而Android使用卡片的概念来使内容显得更有触感，尽管这样会在左右两侧损失一些重要的屏幕空间。眼花缭乱的色彩也盖过了内容。

华丽隐藏了内容，阻碍了交互。

色彩、导航和行动召唤有强烈的聚焦作用。（这就是新的Material Design Lite，为网页而生）

相反在iOS中，关注点更多在内容上。界面的颜色更加中性、符合情境（它们会根据内容变化）。鲜明的色彩尽量少使用，通常都用于操作项。

Apple Music与Google Music的简单对比显示了Material Design使用了更多亮色和插画。对于Apple Music，唯一使用的亮色就是“立即试用”按钮。

标签栏 VS 汉堡菜单

关于是否应该使用汉堡菜单，争议由来已久。距离结束尚遥遥无期。尽管Apple在设计中很少使用。

但至少可以这么说，自从Material Design 鼓励使用之后，我们通常更多在Android上见到它们。

iOS更偏好标签栏作为导航。有趣的是，LukeW指出明显的就是更好的。Facebook的iOS版改用了标签栏后，用户粘性有了重大改善。

Google Inbox使用了汉堡菜单。

但有些时候汉堡菜单是个好主意，比如最重要的内容就在主页上。汉堡菜单内的选项必须只能是次要的，例如设置和登出。

色彩运用

Material Design突出地使用颜色。当然，它们非常漂亮。Flat UI配色方案也是。我们都知道，柔和色在各种状况下效果都很好，不像CSS或Xcode中那些耀眼的默认色彩。

iOS配色（左），Flat UI（中），Material Design Palette（右）

不过Material Design在页头中使用那些色彩，有时甚至盖过了内容。许多颜色竞相展现时，其他元素的重要性便降低了。

页头是可以操作的吗，因为它有颜色？应该改用图片来表现我的产品吗？“Goals”这个标题为什么和链接颜色相同？

色彩确实有含义，但这些含义很有限（例如红色意味着警报，黄色意味着警示等等）。颜色也能传达品牌，但是品牌不应该占据界面的中心。实际上，应用图标是最适合呈现品牌的地方。除非你确定要在页头使用一种单色，不然就该想想更富表现力的方式。用某种方式确切表现你的应用。

同样的，这对Android有意义，iOS则否。

如果一图胜千言，一种颜色只胜十言。

各平台定制 VS 全平台通用

不得不承认，我曾经认为一套设计语言统一全平台是最好的方法。但不幸的是，这会导致用iOS的设计语言来设计Android应用。从我的观点来看，它确实有意义，但最终对用户是不友好的。Android用户就是不熟悉iOS。

Material Design统一全平台的目标是个勇敢的尝试，是我所见过的在这方面做得最好的。但这真的是最好的方式吗？

网页上真的需要华丽吗？卡片适合小屏幕吗？

卡片的概念，在Android wear上，有时还是圆形的屏幕，真的起作用吗？给人感觉这套设计语言并没有优先考虑设备。相反，像是事后聪明。

看看Apple Watch，它的设计完全为了手表而重新思考过。这就意味着会有新的UI范例要考虑，尤其对于按压、数字表冠、手腕检测和黑色屏幕边缘。

Material Design定义更清晰

从材质如何操作和选用，到色彩如何结合，一切都在指南中有详细解释。

每种设计元素应该如何选用，来创造统一的构造和投影。

有一套特定的配色方案和颜色的组合方式。

Material Design甚至还提供了一整套系统图标。

有一套严格的风格指南，好处是不容易出差错。就像Bootstrap。它提供了一套统一且方便的体系。坏处是它限制了创造力，会让多数应用同质化。

Material Design的闪光点

不要误会我，还有很多地方Material Design做得很好。只是似乎每个设计师都没有认真考虑其缺点，就高唱赞歌。

设计规则从来都在不断变化，将人们的生活推向时代前沿。只要我们的生活在变化，设计也会改变。

例如，他们新的设计细则是一流的。在多个设计议题上都作出了指导，让你在Material Design的领域之外也有所收获。

Material Design中的颜色和动画指南确实让人印象深刻。

卡片的概念在整个平台表现很好。它可伸缩且模块化。当然也适用于网页——在移动浪潮来临前，设计师们已经使用了很久了。但我相信屏幕越小，它越没用。

之前我提过，柔和色并非一项新事物。但是Flat UI trend和Material Design都很推崇它。我们正在返璞归真，创造协调的色彩和漂亮的字体。这是件好事。我们越了解设计的基础，就能更好地塑造上层的设计。

Material Design的动画优雅，讨人喜欢，尽管不像人们理解的那么革新。在iOS7之前，过渡式的界面仍然是个非常新鲜的概念。很高兴看到两套规范都推崇更加顺滑、渐进式的动画，来逐渐引导用户，而非通过骤然变化来引人注意。

Material Design中有意义的动画。

没有完美的设计语言

永远不会有完美的设计语言和模版。本文的目的不是为了批判其中之一，而是从优势与弱点的角度来审视。设计就是为了某个目的选择最适合的方式。那么继续前进吧，持续实验来找出最适合你产品的那个。别忘了考虑人们所用的设备。

我经常写一些关于iOS、Android和代码的文章。你可以在Twitter上通过@MengTo找到我。感谢阅读！

原文链接

作者信息： Meng To I design, code and write. @mengto

印证渐变复兴的20个网站

hi@victor42.work (Victor42) — Sun, 26 Jul 2015 00:13:00 +0000

[国外设计第96期]

扁平化设计的时代正在终结，或许不会一蹴而就，却的确在逐渐衰亡。最有力的证明就是这种崭新的渐变潮流正在兴起。相比在web 2.0时代见到的那种渐变，它们更加细致微妙。

坦白说吧，渐变再度盛行了！

我列出了20个主打渐变形式的崭新网页设计。其中有些非常微妙，另一些则极度鲜艳；不论哪种，渐变都是一种为你设计添彩的有趣手法。

VO2 Group

VO2新网站的欢迎页面采用了非常规的设计，大量不同元素层层叠加。树洞般的设计造就了这个网站！很有意思，与众不同。背景元素之一——三角形——呈现了轻微的渐变。就此而言，它为三角形元素增添了视觉吸引力。

Melanie F – Look Book

Melanie的look book采用的布局方式，在时尚类网站中愈发流行，其中文字置于图片之上，两者却不粘连。在本例中，介绍文字呈现在网站页头的矩形上方。矩形中填充了绿色与紫色的渐变，很显然，它有助于吸引视线。

Adoratorio

这家设计机构以特别的方式运用渐变，将它用在了文字区域上。独具一格，相当酷炫。这种方法确实能巧妙地将文字风格化，非常管用。

Qards

甚至我们Designmodo Qard的着陆页也展现了多种渐变。大多页面都被分割成小块，背景填充了不同的渐变色。截图中的页面用的是橙色，其他页面则用了由浅到深的蓝色或绿色渐变。渐变的背景为网站设计增添一种独特的格调。

Symodd

Symodd的首屏，或者说介绍部分，主打由橙色到粉色的全屏渐变背景。这种渐变相对细微，因为这两种色调差异不大，赏心悦目。

Inc

Inc也在首屏区域使用了渐变。但是稍微有点不同，他们将蓝紫色渐变叠加在照片上。此处的渐变也没有太强烈，蓝色与紫色是非常接近的色调，将它置于照片之上效果很好。

Pho

又是一个蓝紫色渐变。它是这个案例集中相对柔和的一款，不过所选的两种颜色相当华丽——它们饱和度低，但对比强烈，看起来令人非常愉悦！

Impossible Bureau

Impossible Bureau的页面采用了非常鲜明、反差强烈的渐变色！很酷的是，每当页面加载完成，其他元素在上方出现，页面的浓烈与戏剧性并没有被冲淡。

Customeed

Customeed选择极度罕见的绿色渐变。出于某些原因，蓝色、紫色、粉色渐变非常盛行。但是绿色渐变也没有问题，它看起来令人愉快，与Customeed的网站配合良好。

Webflow

Webflow并没有大篇幅展示渐变——至少不像本文中其他网站那样。他们在网站首页用了一小片粉、紫、蓝的渐变点缀。这种激动人心的渐变在各处小范围运用，营造了很棒的格调。

Product to Profit

着陆页的渐变色很淡——略微有水洗的感觉。无论如何，它看起来的确很棒，因为并没有刻意突出。淡蓝淡紫色的渐变叠在照片上，效果很好。唤起这个网站一种友好的氛围。

Table Hero

Table Hero的主页遍布友好的小花样，说小花样是指各处的点缀。在1像素宽的按钮边框上，或是极细的标题文字上透出一丝渐变。这种方法很有意思，在设计中融入渐变来增添深度和多样性，却不会让渐变走火入魔。

GoGoRo

GoGoRo的焦点区域采用了极简设计，但绝对够抓眼球。除了巨大的文字“go”、小摩托的照片和少量小字，别无他物。文字本身很细，但由于字号够大，使它表现出一定的厚度。网站的设计师将欢快的蓝绿渐变作为文字的颜色。

Segment

Segment用了深色设计，通常整个区域都采用深灰色背景。但是为了给它添彩——或者说点亮它——他们用了很多明亮的霓虹绿色来提亮设计。某些区域的绿色渐变颇具吸引力，使整个设计引人注目。

Mapbox

进入Mapbox的主页，你会看到一个非常棒的首屏。轮播图中有些采用了微妙的渐变背景，为整个设计增加了纵深感和清晰度。

Gradients, motherfucker.

不知道你是否还记得这个网站，Visual Idiot在2012年发布的。不过随着屏幕滚动，你会发现它的渐变真是切中要害。这个网站相当简单，而且非常滑稽。展现了一系列难以置信的渐变，取自彩虹的颜色，例如粉色、蓝色、绿色、橙色。

Pitney Bowes

又是个大胆的案例。这个网站的设计相当平滑，白色文字在紫色为主体的渐变上显得鲜亮。文字看上去的确很棒。这个渐变其实是均匀线性的，但是得益于上面的蓝色圆形纹理，这种视错觉让它显得有点圆润。很酷，对不对？

Stripe

Stripe近期更新了他们的网站，他们也用了渐变！有些首屏轮播图用了非常漂亮的渐变，你在截图中看到的就是其中第一张。由深色的海军蓝过渡到绿色的渐变，色彩丰富，作为暗色调背景非常好。

One John St

这是Brooklyn DUMBO一个公寓群的着陆页。这个网站令人惊奇的地方，是渐变色会在一天中随着时间改变深度。这个设计非常有趣。

Wake

最后一个案例展现了最流行的蓝紫色渐变，这种配色正如日中天。Wake的网站遍布这种渐变色，因为这是他们应用品牌色一部分。

结论

可以看出，渐变是一项有趣的设计决策。它们造就了这种欢快、激动人心的设计。总体来说，渐变并不差——从来都没有差过——只是我们对太极端的渐变感到厌烦。尽管这些案例中有部分对比很强烈，也有一些呈现了它柔和的一面。希望这一系列能在你未来的设计中激发你的灵感。

原文链接

作者信息： Paula Borowska Paula runs a user experience blog BeingLimited and an author of an upcoming book about mobile design, the Mobile Design Book. You can connect with her on Google+.

提升用户体验的7大微交互

hi@victor42.work (Victor42) — Sun, 19 Jul 2015 11:20:00 +0000

[国外设计第95期]

众所周知，我们总是依据封面来判断书的好坏，聪明的设计师会创造实用有吸引力的界面。潜在用户可能会被吸引，但如何一直黏住他们呢？

要试着回答这个问题，所有一切都指向人本设计，其中用户是最主要的考量。以人为本：你的应用应该使用日常用语，包括情绪、口语，外观还要有一丝“诱惑力”。界面应当成为你的好朋友，时刻准备给出建议提升你的体验，让你会心一笑。

现在揭幕：是微交互在起作用。精确的说，这主要是界面附带的交互动画，使它更具表现力。优秀的动画能够：

表达状态并提供反馈
提升直接的操纵感
将操作结果可视化

在用户体验中，关键是你如何对待用户，还有他们使用产品时的感受。极小的细节都值得加倍留心。微交互提供了用户所需的反馈，表达了当前运行状况。无论背后逻辑有多么复杂，都能使界面更亲切。

1. 显示系统状态

Jakob Nielsen在可用性原则启示第一条中描述：让用户始终知晓当前在发生什么。用户希望立马得到回应，但总有些情况下，网站需要一点时间等待操作完成。

那么，界面就应当在背景处显示图形，反映完成百分比。或是播放声音，让用户了解当前发生的事情。这个原则也关系到文件传输：不要让用户觉得无聊，给他们看进度条。即使是不太令人愉快的通知，比如传输失败，也应该以令人喜爱的方式展现。让你的用户微笑！

2. 突出显示变化

通常为了节省空间，应用会在需要时把某个按钮替换掉。有时我们需要展现通知，确保用户注意到了。动画可以吸引他们注意，不至于忽略你认为重要的信息。

3. 保持前后关联

在这个智能手机和小屏幕智能手表的时代，难以在屏幕上展现大量信息。有一种处理方式，是在不同页面之间保持清晰的导航。让用户理解什么东西来自何处，便能轻易回溯。有多种方式可以实现：

4. 非标准布局

继续之前的例子，微交互应当帮助用户理解如何操作非标准的布局，去除不必要的疑惑。照片前后滑动、滚动式图表和旋转角色都是很棒的选择：

5. 行动号召

除了帮助用户有效地操作应用，微交互也有鼓励用户操作的能力：持续浏览、点赞或分享内容，只因为这很有吸引力，用户不舍离去：

6. 输入的视觉化

所有应用中，数据录入都是最重要的元素之一。数据录入决定了用户所得结果的质量。通常，这部分很无趣，但微交互可以使它与众不同：

7. 使教程生动形象

当然，在应用发布后，动画可以教育用户。它突出一些基本功能和控件，排除用户在未来的使用中的障碍。

结论

所以，如果你重视用户体验，就应该从头到尾精细打磨界面，通过微交互与动画为它增色添彩。它会为你的项目赋予生命。

注意每个细节，是使人机交互易用的成功要诀。

原文链接

作者信息： DMYTRO SVARYTSEVYCH Dmytro Svarytsevych is a Design Office Director at SoftServe, and a regular contributor to the SoftServe United blog. Dmytro has been in the industry for more than 13 years, specializing in User Interface design, Interaction design, Mobile design, Information Architecture and User Experience. At SoftServe, he is responsible for all User Experience touch points, defining and integrating a company-wide User Experience Strategy to facilitate consistent and flexible expertise growth, as well as applying UX best practices and methodologies to various SoftServe projects. More articles by Dmytro Svarytsevych

数据驱动的界面设计

hi@victor42.work (Victor42) — Sun, 05 Jul 2015 11:58:00 +0000

[国外设计第93期]

“仪表板”、“大数据”、“数据可视化”、“数据分析”——越来越多人和企业，开始运用他们的数据来做一些有趣的事情。在我的职业生涯中，有幸参与一大批数据为重的界面设计，我要在此分享一些观点，讲讲如何造就这种特殊且有意义的产品。

很多人已经讨论过这个议题，我会围绕创作过程中最具影响力的部分。

1. 用户不同，数据不同

任何时候设计一套复杂的系统，都不可避免要为很多用户和角色进行设计。总裁、经理和分析师是几个常见角色，每个都有自己的工作流程和对数据的需求。

定义好角色，产生不同视角，这本身就是一种艺术。我就不在此详细解释了。如果你对此有兴趣，请看Cooper的这篇有用的文章。

关于角色，重要的一点是预先确定好，围绕它们来组织信息结构与线框图。

下面是我们去年做的一款健康报告应用的最终成品。这套系统有着不同的用户群，他们各自都需要不同的数据管理。创建了关键角色后，我们每次评审会将它们放在旁边。

注意画板上的那些角色。我们的客户都接受这种方式。

在满屋子客户面前展示作品是件难事。无论是在解释线框图、流程图，还是就视觉设计进行讨论，都很难让每个人跟上你的观点。

通过角色来组织作品，会防止你（和客户）在这些讨论中跑题。

2. 制作页面模型

我多年所用的一个技巧，是制作页面模型。核心点很简单：

首先为用户呈现他们需要的，再将页面余下的信息根据用户故事或信息层级，进行结构化处理。

制作页面模型的概念，正是写散文（和其他很多种沟通形式）的核心原则，我在写过一本书之后就对它了如指掌了。多年来，我花费大量时间在这本书《样式：清晰与优雅的基本要素》上。它除了作为绝佳的写作参考之外，还清晰阐明这项观点：

如果一开始就使人分心，那么用户不仅难以分辨每个元素是什么，也难以集中精力于整个流程。

这是进行用户体验设计时需要牢记的一项准则。下面是制作页面模型的两个常用方式。

给画板创建某种结构。问问自己——通过这些信息要讲述怎样的故事？

我在behance和dribbble上看到很多仪表板和数据画报项目，（视觉上）设计得很漂亮，但通常都使人眼花缭乱、过目即忘。它们要么是各种图表组件以缺乏层级的瀑布流形式排列，要么视觉上过度设计，并不适合这项数据。

左图展示的就是眼花缭乱的数据画报。右图例子则是装饰物分散注意力，注意不到数据。

在上面的图中（左图），这个数据面板用了控制台的方式来呈现信息……相当有压迫感。为避免如此，我们试着以组织信息的方式处理这类界面，让人们感觉像是在阅读杂志文章。

并不是说控制台式的界面就没有用武之地……我个人愿意设计成那样。但多数情况下，没有必要时刻看见所有信息。

最关键的一点——避免创造出令人一知半解的图形。为页面信息建立模型，首先给用户呈现关键信息，然后才是支撑内容。

3. 选择正确的图形

在美学方面，有很多（太多了）设计都在误用图表。

最糟的是——这些“坏习惯”似乎在成倍增加。随处可见本应是饼形图的面积图，还有本应该是柱状图的曲线图。让我们一起来制止这些设计……下面这些建议有助于你正确对待数据：

始于数据

未经处理的原始数据表格一点也没有吸引力。但它是最佳的起点。它帮你开始思考数据中有哪些变量可用，这些变量数据如何关联。

原始数据的单调特性，会帮你思考系统中各种变量间的关联。

除了从空白数据行列入手，等待灵感忽然进入你意识。你还可以更积极一些，通过下面这些很棒的资源，帮你揭示出有趣的关联：

Charted ——Medium开发的一款自动数据可视化工具。
通过Google Sheets、Illustrator和Sketch设计更好的图表。
Tableau——这个工具是最好的，不过相当昂贵。

在整个过程中，这部分并没有灵丹妙药。别对深入研究数据心存恐惧，试着混合搭配不同变量，创建基本图表。这需要时间，但它是值得的。我想到的一些绝妙点子，都来自这些原始数据文件的拼拼凑凑。

处理离散数据和连续数据

我花了很长时间才意识到这点，有些图表比其他更能表达你的数据。在创作中很容易陷入这样的境地，选择一种好看的图表，然后指望它能发挥作用。我经常这么做（我挺喜欢散点图），并为此感到内疚。

有些图形比其他更好，这取决于你所处理的数据类型。选择合适图表的方法之一，是评估你手中的数据。有两种主要数据：

离散数据——数值可清晰计数。比如进球数或Facebook点赞。

柱状图最适合表现离散数据

连续数据——任何范围值。比如一季的降雨量，或一个人的身高体重。

曲线图最适合表现连续数据

简单说，曲线图最适合表现连续数据，柱状图最适合表现离散数据。

Dona Wong的一项资源《华尔街日报：信息图指南》帮我凝练了其中精髓。真希望几年前我就有这本书。这是本无价的参考书，帮你选用合适的图表，阐明信息展现的行为准则。

http://www.amazon.com/Street-Journal-Guide-Information-Graphics/dp/0393347281

4. 基本的或定制化的图形

最后，作为这些海量数据系统的设计师，你得反复问自己“我应该选择非常规方式来定制化设计？还是使用久经考验的图表来展现信息？”

最近无意中读到这篇来自37 Signals的文章—— 只要3种图表就够了。作者强烈表达一个观点，图形的“有效性”胜过它的视觉特征。我非常赞同文中这一观点。不过，我觉得他的观点代表着一种极端实用主义的视角。我相信定制化的图形通常也能提升数据的易用性，同时独具一格引人入胜。

基本柱状图的例子

对我来说，有“一种尺寸通行”的图表，还有“适用于最佳尺寸”的图表。表格、曲线图和柱状图就很好，可以容纳各种类型的数据，但它们也非常普通（一种尺寸通行）。作为专业的设计师，我希望我的作品看起来和感觉上是独特且有用的。

比如，纽约时报做得很好，通过定制化的交互式图形，来为他们的文章添彩。可以在这里看到更多他们的作品。我们来看一些完美的定制化图表案例：

这个案例对曲线图做了调整，让人“一睹”那些支撑图表的基本数据。

http://www.nytimes.com/interactive/2013/03/29/sports/baseball/Strikeouts-Are-Still-Soaring.html?_r=0

在这个3D图表中，透视角度的改变在视觉上非常有冲击力，也让用户更好理解数据间的关联。

http://www.nytimes.com/interactive/2015/03/19/upshot/3d-yield-curve-economic-growth.html?_r=0

Selfiecity.net的这个例子做得很好，用了真实内容来创建图表。

http://selfiecity.net/

最后，来自我们为CNN做的一个项目。我们用了颜色编码来展表现政党偏好，同时立体突起在视觉上表现人口统计信息。

http://truthlabs.com/work/cnn

作为首要准则——数据与技术所需，我们需要尝试各种定制化图形。但我们还是要有备选计划，以防设计并不奏效，或者客户喜欢相对保守的方式。

5. 那又如何？

我们为什么要把所有这些数据放在页面上？答案是：这样人们才能使用——做决策、调研、预测未来，什么都行。关键是，用户不会沉浸于你所选的漂亮色彩，他们是来工作的。

我的建议是——在你排布好页面一切就绪后，问问自己“那又如何？”。看看每个图表、组件、表格，仔细考虑人们从中能获取到什么。通常你会得出这样的结论，“这些都不重要”，这就意味着要减少或是重新思考。

这在我身上发生过好几次——我创作了复杂漂亮的仪表板，包含了一系列时尚的图表、饼形图，还有成千上万数据点构成的地图。但总是被客户质疑“我只想知道这样有效吗……我要的东西在哪？”还有“我只要3样东西……X、Y和Z。哪里可以看到它们？”

哎，这时候你才会意识到自己迷失在杂草丛中，遗失了重点。

我会有个办法，尝试使用文字来精确表达人们所要的东西。

在重要信息上，文字总结可能比图表更有效。

上面的图来自我们最近的两个项目。两者都通过文字展现用户所需的信息，并没有依赖需要解释说明的图表。

这个方法使我们的客户产生共鸣，尤其在重要信息上。但我之前提过，总要考虑各种角色，所以要用在适当的地方。

就像其他所有形式的设计一样，它也需要一种平衡。

力求使你的数据与众不同，但是要避免过度设计和无谓的分心。

为数据选择正确的图形，但别忘了有层次地构建页面。

无论多么单调、令人沮丧，还要打磨每个小细节……还有别忘了问自己，“那又如何？”

原文链接

作者信息： Erik K I design digital products that make peoples lives easier. Co-Founder/Creative Director at Truth Labs in Chicago.

全新的导航形式：全屏菜单

hi@victor42.work (Victor42) — Sun, 28 Jun 2015 12:51:00 +0000

[国外设计第92期]

与其他用户界面细节一样，菜单的设计也在随着当今的潮流改变。一些变化能带来积极的效果，改善用户体验，还有一些却会破坏有利的形象。追随潮流是件棘手的事，尤其是在菜单上。

比如，隐藏式菜单和极简式导航栏最近正处于风口浪尖。但是，它们并不适用于所有网站。相比之下，全屏菜单多数时候几乎都适用于所有项目。后者正在汇聚人气，因为它灵活易变，能够提升而非破坏用户体验。它在不经意间呈现了很多数据，整洁地排布文字与多媒体内容。当然，这使得主页又多了一层点击，但有时为了更好的用户体验，应该做这样的牺牲。

今天我们进行一场头脑风暴，来看20个新颖绝妙的全屏导航网页设计案例。

全屏菜单案例

Maecia

Maecia采用了讨人喜爱的蒸汽朋克外观，增添了一分独特的精细和机械感。基于图片的导航占据整个屏幕，与动态主页和主题高度吻合。

Olcese

Olcese有好几个菜单，便于用户更彻底地探索这个网站，同时也强化了品牌识别。基于图片的网格式全屏导航中，充满了有趣的照片、漂亮的图表和令人愉快的效果。这些元素的结合扮演着至关重要的角色。

Moeko ABE

摄影师的在线作品集还能是什么样？以照片为核心的主页明亮耀眼，导航运用了多媒体，为这位艺术家高调代言。菜单在整个页面投下柔和的阴影，呈现出美丽的照片链接。

Conference Awwwards

颇具开创性的主页，一流的HTML/CSS/JS动画立刻引人注目，让人印象深刻。简单的导航占据了整个屏幕，视觉聚焦于导航链接。这是非常合理的方案。

Drygital

Drygital的主菜单流露出欢乐积极的情感。华丽鲜艳的渐变背景，非常有利于展现亮白色的导航。一如往常，菜单覆盖了整个主页。不过得益于半透明的背景，用户可以在着陆页欣赏一段视频。

Aleman’s Design

Aleman’s Design有着无缝式的导航，与整个场景搭配良好，对美感有重大贡献。这个团队采用了非同寻常的方案，利用动画背景来强调菜单项。

Mas Industries

Mas Industries的特点是基于图片的全屏导航菜单，它从“汉堡”菜单中优美地展开。对金属部件的完美渲染散逸着冰冷严肃的氛围。虽然前景与背景的反差很弱，但另一方面，这种方案对系列设计有强调作用。

Danne Olsson

壮观的照片背景，映入Danne Olsson的用户的眼帘，充满自然意象。为了弱化如此吸引眼球的核心元素，将视线引向更简单朴实的导航，他采用了很直接的解决方法，将全屏菜单与纯色背景相结合。

Impossible Bureau

在这里，主导航将首页划分为4列，让网站的主要部分充满全屏。为了使外观鲜活明亮，不至于让主页看起来黑暗阴沉，每个链接都带有美丽的渐变背景，还有绝佳的字体和配图。

Voisins

Voisins的主页是个庞大的导航体系，有两个菜单组成。其中之一如我们所料，迎合了当今网页设计趋势，通过“汉堡”菜单触发。另一个则占据全屏，可以更高效地处理视频链接。

Fornace Studio

Fornace Studio采用了一种非常规方案，主菜单由小小的导航图标触发显示。它从一个特别的角度滑入，模糊并覆盖整个主页，立刻吸引了用户的注意力。

Webgriffe

Webgriffe的设计很精细，文案、极细的雅致字体、幽灵按钮、强烈而现代的图形和趣的背景，共同构成了视觉焦点。菜单与主题的配合非常好。

Moma

全屏导航让用户很自然地点击首页的图片，进入主菜单中的其他功能。这个方案相当整洁优雅，完全适用。

Giaco Morelli

和上一例类似，这个全屏菜单带有轻微的半透明背景。厚实圆润的字体转移了访客的注意力，从迷人的交互式主页，转向网站更重要的部分。

Gianluca Bocchi

虽然极简式设计缺乏丰富的装饰，但这家画廊的官网散发着典雅、精美的艺术气息。在这里，第一印象尤为重要，庄严的菜单巧妙含蓄地将着陆页分成3部分。

Elliot Lepers

Elliot Lepers有着全屏式轮播，一列列呈现信息。尽管这并非菜单的传统形式，但它是纯正的导航，使其得以充分运用。

Fahrenheit

Fahrenheit的菜单由4个基本的链接构成，这适用于多数小型在线作品集。尽管如此，这个团队仍然在其中倾注心血，将整个页面让给导航列表，证明了它的重要性。

N3RD

首页就是个导航页面。最棒的一点是，这个团队应该不会担心平板和移动端的变化，因为这个方案全平台适用。简单而优雅，尽管相当原始。

ivxvixviii

ivxvixviii有着相当精致的几何体，壮丽的图片和微妙的效果丰富了造型。精巧独特的导航足以激发兴趣，迫使用户深入其中。

The Colors of Motion

这个网站的特色是奇异的无字导航，一眼看去使人迷惑。设计师采用了打破常规的方案。在这种方式中，菜单与名称相结合，支撑着整个主题。

结论

受趋势影响，导航可以采用不同形式。全屏菜单是种双赢的做法，可以解决很多网页设计的问题。

原文链接

作者信息： Nataly Birch I’m an internet entrepreneur and an amateur web designer and developer from Sevastopol. In my spare time I read books, play board games and volleyball.

网页改版7大要素

hi@victor42.work (Victor42) — Sun, 21 Jun 2015 17:45:00 +0000

[国外设计第91期]

Shopify Plus是我们创立的电商平台的企业版。2014年2月发布，如今仍然是第一版。我想是时候改版了。

经历了一年多，我们对客户与自身都有更深入的了解。陈旧的品牌已经不合时宜了。

我们并没有什么特别的流程，就是将以下7件事情串联起来，便达成了目的。

1. 面谈

我对执行团队的成员进行了一对一面谈，明确了Shopify Plus是什么。为了真实还原，我录下了每段面谈，供以后回放。

面谈之后便有灵感涌现——我觉得自己对于这个产品已经了如指掌。撰写愿景、任务描述、品牌指南、项目概述和网站文案都变得容易了。我们的网站需要更好传达信息，让人顿悟其中含义。

2. 项目概述

深入项目之前，我们写了一份项目概述，使大家达成共识。我们会适时更新，让它反映出项目的当前状态。

项目概述中可能会提出一些问题：

我们试图完成什么目标？
如何知道项目成功与否？
需要做什么？
为什么需要这么做？
有什么必要条件？
做这件事情是为了谁？
如何让他们知道？
项目团队有哪些人？
截止日期是什么时候？

3. 竞品分析

我们研究了还有哪些同类产品。我先从一系列竞品开始，然后转向电商领域之外那些与我们目标客户相同的公司。

我们对比了竞品的长处、弱点和机会，还有我们想要涉足的重点领域——和我们想要避开的领域。

我们的竞品分析文档

4. 信息结构

信息结构是内容组织的表现，使内容易于理解。在网页设计中，结构图表反映了网站里各页面间的关系，让你从更高的角度看待网站的构成。

我给旧网站画了一张信息结构图，展现出各页面间的关系。在更新和改变之前，我评估了内容、目标与工作量。这张图表帮助我们确定项目的范畴，可以作为所有页面撰写、设计和编码的任务清单。

Shopify Plus的信息结构图表

5. 线框图

在整个改版过程中，我都使用线框图帮助自己思考问题、激发创意。有一些画在餐巾纸上，面对面分享，另一些草图则通过网络分享。

线框图能带来一项意外收获：它帮你撰写内容。写文档让你难以把一切视觉化，在线框图中粘贴内容能让人清楚感受到页面的跳转流程，每块内容与其他如何保持关联。

Shopify Plus改版所用的高保真线框图

6. 灵感画板

我的灵感画板展示新品牌可能的样貌。它们有助于让我在项目早期从团队得到反馈。

我使用Pinterest创建了众多画板，用于局部分解，例如导航、动画和字体等，不会让创意迷失在单个画板中。

研究过程中在我Illustrator中绘制灵感创意，将文字、图片和色盘结合成类似广告的图样。同样的设计元素出现在各处设计稿中，不过位置和表现有所变化。

Shopify Plus的灵感画板

从灵感画板中探索Shopify Plus可能的品牌形象

7. 效果图与交互原型

线框图和网页设计印在纸上时，多数人都不会在意。在屏幕上展现设计很好，但最好的方法总是通过受众的视角来审视。

我在线框图流程早期就开始制作交互式效果图。直到网站编码完成前，都持续将它们与客户和团队分享。

我让他们在浏览时大胆讲出自己的看法，才能知道他们操作界面时所想。这些反馈都突显了局部的问题，也验证了设计方案，便于项目的最终定稿。

Shopify Plus的InVision项目页面

为Shopify Plus收集反馈

尽管一些机构会在改版过程中坚持特殊的顺序，但这7个步骤对我们很有效。选用适合你工作流程的策略，是改版成功的重要因素。

原文链接

作者信息： Filippo Di Trapani, Designer at Shopify Filippo is a designer working at Shopify’s headquarters in Ottawa, Canada. He’s a loving husband, father of 2, and an avid music lover. Follow me on Twitter

网页动画终极指南

hi@victor42.work (Victor42) — Sun, 14 Jun 2015 10:19:00 +0000

[国外设计第90期]

动画是人类毕生的理想之一（如果像某些历史学家相信的那样）。这个理论源起于洞穴壁画：在某些洞穴壁画中，经常见到一些生物被画上远多于正常数量的肢体。

这背后有很多套理论。有些指出这很简单，因为艺术家们并没有方法可以擦除这些肢体，于是将他们的错误留在壁画上，传给了子孙。还有理论相信，这些是最早的试图在静止图像中捕捉动态的方法。我选择相信后者。

还有比捕捉动态更加自然的愿望了吗？自然界的一切都在运动。人在行走，水在流动，植物开枝散叶，自然界唯一不变的就是变化，以一种运动的形式。有些在模糊中一闪而过，有些则慢到难以察觉，但这些都在发生。

动画对于网页设计师已经不再新奇……它正在成为最基础的交互设计效果。

动画就是变化，是一种运动。它是我们艺术创作中最接近真实反映生活的东西。这就是为什么人们总是说“动画使我们的网站（或是演讲，诸如此类）鲜活起来。”这可能是陈词滥调了，但这个词很优美地呈现了动画在网页设计中的目的。

正确使用运动感，可以告诉用户他们完成了某些操作。他们成功地与界面进行了交互，引发了某些变化。

人们与真实物体互动时，也会触发并体验到相同的感觉（至少是类似的感觉）。就某种程度而言，动画是拟物的。没错，我说的就是拟物。

使用得当时，动画可以被设计成模仿真实世界的交互。我们似乎在原地打转。可能我们不会再过多使用复杂的皮革纹理，但我们仍然在尝试效仿现实世界。

网页动画简史

在进入实用部分之前，我们看看互联网上的动画是如何发展到今天（这么酷）的。最初一切都诞生于gif图……

原来.gif文件年龄甚至比我还大2岁。它们在1987年被创造，正是早年我们刚知道（或多或少）互联网的时候。因此开创了跳舞婴儿的纪元，那些东西太可怕了，还是忘了好。

如果gif图的流行告诉了我们什么，那就是人们想要将动画引入网页中。在此提醒一下，多数人可能并没有从改善可用性的方式考虑动画。一切都只是为了产生一点个性，表现一点生机，与其他静止的网页区分开。

现在正是关注网页动画与App动画的最佳时机。

当.gif文件的能力耗尽后，人们想要一种更好的方式，来向网站中添加动画。对，声音！声音太棒了。如果人们打开你的网页，开始播放你最喜欢的歌曲，这得有多棒啊？要像真正的歌曲……而不是那种破烂电脑音乐，对吧？

是Flash让我们艰难地学到了这个教训。但是别忘了Flash在它所处的年代是相当惊艳的。实际上它是一种革新。它是一种进步。它非常酷。

无论后来它被如何滥用，要知道Flash让我们在互联网中做一些从没想过的事情。它拓宽了创意的视野，为人们在一个崭新的行业创造了工作机会，带来了“网页动画”和90年代最棒的东西（除了天堂）：Flash游戏。甚至直到现在，我都觉得那些游戏使人入迷。

随着时间推移，很多设计师转移到基于Javascript的动画上，用于创造一些小东西，比如下拉菜单和其他导航元素。毕竟如果做得恰当的话，这更有利于SEO。其他人只用Javascript是因为，那正是FrontPage和DreamWeaver调用按钮图片的方式。微小的进步仍然是进步。

00年代中旬，W3C已经在努力将动画加入到CSS规范中。2009年，首份公开的CSS动画规范初稿就发布了。

如今呢？我们探索出了强制硬件渲染、CSS动画结合SVG文件、延伸基本动画功能的JavaScript库，等等。

现在我们正在探寻各种方式，不仅仅是为网站增添风格。我们在试图改善可用性，告知并教育用户，让用户更容易了解他们在做什么。

对于网页设计师，动画不再是新奇事物。它成为了影视行业的基础，一种全新的叙事方式。对我们而言，它成为了有效交互设计的基础。

现在正是关注网页动画与App动画的最佳时机。科技尚没有完全成熟（什么时候会呢），也无法提供全方位支持（何时能够呢），但我们在探寻新的方式将它呈现在世人面前，无需通过插件或是专用代码。

我们越是以开放的动画标准为基础，越多的人就能首先看到。近年来人们专注于运用动画驱动交互，这是一件非常非常好的事情。

是时候成为先行者了。

网页动画的种类

回到正题。我们在谈论的是哪种动画？我的意思是，我说了很多关于使用动画改善用户界面的言论，那些究竟是什么意思？

很显然，我们不能将动画效果随手加于网页元素之上，然后期盼它能提升转化率。那太傻了。就像设计的所有其他方面，使用哪种动画，何时使用，这都需要仔细考虑。

实际细节与实现也是必须考虑的。如果你的动画过于耗费资源，拖慢用户的移动设备，或者更糟的是拖慢他们的桌面设备，这就有问题了。很多问题。

我们由此入手，看看网页上几种典型的动画：

界面元素动画

我不知道这是不是最普遍的一类动画，不过我猜是的。它应该获此殊荣。在我的观念中，这是最有用的动画类型。

正如我在介绍中说的，这是一种让用户了解他们的操作（比如点击）被记录的动画。变化的发生需要他们的点击来催化，无论是转向另一个页面，打开侧边栏或模态窗口，还是在客服窗口中发送电子邮件。

不是说有反馈更好，而是如今反馈是必须的，这是个扁平化设计的世界。人们需要了解界面与装饰物之间的区别。让元素运动起来，是简单微妙的交互方式，给予用户他们所需的反馈。

它就像改变按钮背景色或让它跳动那么简单。这个类型也包含了侧边栏菜单“滑入”页面的动画，还有模态窗口放大显现的动画。

等待动画

这个也是，同样是为了给用户提供反馈。这类动画，会在某些操作正在后台进行时呈现给用户，你可不想让他们等到崩溃。

这类动画的作用很久以前就得到了印证，就在图形化用户界面首次发明的时候。最早的方式是鼠标指针变成沙漏，还有进度条也是。Apple在某时刻采用了“旋转的沙滩排球”，而windows则呈现了文件优雅地从一个文件夹飞向另一个。

这些惯例第一时间就被网页采用了，理由很充分。当用户开始疑惑正在发生什么时，他们会一直点击或点按。这是沮丧的一种表现。他们认为这样会让进度加快一点。

无论哪种方式，告诉用户正在发生的事情，哪怕通过一个简单的进度条，也能极大减轻精神负担……即使对于我们这些使用电脑很久的用户也是一样。

Beegit是一款写作应用，我用它来撰写和编辑这篇文章。它提供了一个便捷的“进度圈”，告诉我图片何时会上传完成，在模态窗口的左上角可以看到：

讲故事的动画

如今，用动画来讲故事已经超越了卡通。实际上，我要讲的完全不是那些动画。而是那些被设计出来与用户互动（比如向下滚动）的网站，操作引发了动画，讲述了故事。

有些普遍例子，那些页面会在你眼前将产品“装配”起来，以此展现新产品。其他则更像卡通片，有个小卡通形象跟随你到页面的每个地方。

这些动画的作用……存在争议。通常它们并没有提升可用性的意图，只是为了让用户印象深刻，为他们提供页面主题相应的环境。它们可能是在试图呈现一件产品的工艺，或是分享打造这件创造物的经历。

动画能否做到这点，取决于它们本身的质量。是否过度影响了网站的性能，或是影响了页面内容本身。如果用户在网站上找不到自己要的东西，世上所有的动画效果都救不了它。

有两个案例我的确很喜欢，它们来自深谙此道品牌：Apple和Sony。

Mac Pro的页面，致力于向下滚动时精确呈现内部构造：

同时，在Sony网站中，他们展现了多款不同设备。当然，“装配感”并没有那么强烈，各部分相互撞击，在火焰效果中成型。

纯装饰动画

无论好坏，有些人在网站上加入一些没有目的的动画，只是为了让人看到。这值得吗？

值得，也可以说不值得……

我会尽量避免，因为它使人分心。你想要人们的视线集中在商品信息和购买按钮上。让他们来此达成目的。如果网站没有提供特定的目标，或者确定目标时过于使人分心，他们就不会再回来了。

装饰性的动画应该完全隐藏起来。在人们完成行动召唤后再展现出来。还可以包含微妙的动画，只在用户触发某个特殊操作时才展现，比如鼠标悬停在页头和页尾的某个小物件上面。

在WDD网站中，鼠标悬停在logo上会让它动起来，虽然这点尚存争议。因为logo是个链接，并非纯装饰物，但它仍然是个不错的例子。Google随便一搜，就会找到很多带有彩蛋的网站（比如跳出一只哥斯拉并且咆哮怒吼……我不是在开玩笑）。

还有很多其他例子，包括Google众所周知的彩蛋，下面这个来自photojojo.com：

在任何页面一路滚动到最底部，会出现一只友善的恐龙“给你拍照”。而且在有气球的页面上，画面中的气球会微妙地来回飘浮。

广告中的动画，可以说：内心抗拒，钱包却不听使唤

广告。对于某些网站来说就是他们收入来源（咳咳），对于另一些网站则如同瘟神。给广告加上动画，duang！视线就被吸引过去了，违背了本意。这是个条件反射动作。

再加入声音，用户会感到强烈的憎恨……这也是条件反射。

但这几乎无法避免。如果想让人看广告，让它动起来就是个好方法。这可能在某些自我标榜“不喧宾夺主”的广告平台那里不受欢迎，但如果动画广告不起作用，我们就不需要它们了。

不过这种动画也有着与装饰性动画相同的问题：将用户的注意力从主要任务上分散开。这个在线销售的世界，分心就意味着死亡。

最终，衡量利弊还取决于你。没有广告、低调的广告、或是动画广告，都需要权衡。

你可能注意到了，我前面一直没提过启动界面动画。那是因为我觉得大家都已经很了解了。

动画的实现

技术实现方面也很重要，但无论你用.gif图、视频、CSS、SVG、甚至Flash（天哪），都有一些更重要的原则。暂时忘掉你打算使用的技术与技巧，再多做一些理论储备。用户会感谢你的。

性能，性能，还是性能

你会想，“当然，这很明显。动画应当运行流畅，不能卡顿。”正确，这在理论上确实显而易见。但问题是我仍然能看到一些网站，虽然用最新技术构建，动画却很卡。

我的Nvidia GTX 750 TI显卡要200美元。你的动画没理由卡。最近有些网站让我觉得，“《上古卷轴》运行也比这流畅。”我没有开玩笑说大话。

现在，想象一下在低分辨率的平板或手机上，浏览那些网站是什么样子。一方面，这是个检验个性的方法，但另一方面，它无法给这些龟速网站带来任何业务。如果你的印象中只有卡顿的动画，或者压根没有动画，那还不如让界面元素直接各就各位。

这就是说，那些加入了诸多动画和特效的网站也不怎么样，它们需要加载界面和进度条。没有人在看到想要的信息前，有义务等待动画加载。让人等待，就是你业务流失的方式。

我们将这些分成几点：

如果《上古卷轴》比网站的桌面端运行更流畅，那很糟糕。
如果用户看到主页前要等待加载动画，那相当糟糕。

在此我要给出一点技术层面的建议：考虑了硬件加速和性能之后，CSS几乎总是优于JavaScript。有选择时，使用基于CSS的动画，将JS作为备选。

从细微处开始

将动画当作设计工具而非样式表现时，最好从细微处着手。比如，微小低调的动画表现更好（见上一章）。第二，巨大炫目的动画必须带有实用的目的，不能只为了“好看”。

除了那些让UI元素感觉“真实”和接近自然的动画，多数网站都不需要任何动画。想像一下婚礼上撒米祝福的场景，加入那种视觉差滚动效果之前，问问自己，它真的改善了用户的体验吗。巨大炫目的东西在屏幕上四处移动，比常规文字和美丽的图片更能告知和引导用户吗？

多数情况下，答案很可能都是“不”。当然也会有例外。例外总是会有。但多数时候，让按钮动起来，让隐藏的导航条滑入，用动画移除发送客服邮件后的成功提示，这就足够了。

微妙是好设计的关键，这点往往被低估。以此为起点，然后如果你能确信，更大更闪耀的东西在用户体验方面更符合你的目标，那么再全力以赴！

持续时间要短，或者说：我觉得有必要加快速度

动画要快，准确的说，应该发生得快。这里我不是在说性能，而是一个物体在运动过程中实际耗费的时间。

想想我们如何与真实物体互动。有时候我们动作很快，有时慢。我们操作物体的速度，取决于它的尺寸。是顺手而为的任务，还是像端着满满一碗水那样。通常我们会很快地拿起物体，快速移动。单个动作可能发生在毫秒间。

在我们度量界面动画时，“毫秒”是最通常的度量单位。再长的话，人们就会开始对机器或产品、或是两者失去耐心。得确保它够短，不然让人感觉迟钝。

对于人们反复使用的产品，这点尤其正确。即使某个动画相当有趣好玩，第10次看到时也会失去吸引力。它只是个跳动的按钮或是滑动菜单，而不是你最爱的电视节目的片头。没有人会为此随声附和。

有时要让物体具有弹性

真实物体都会回弹。有些并不明显，但基本上所有的物体都有一点弹性。如果将它从足够高的地方扔向坚硬的表面，而且如果没有太大的空气阻力的话……总之你懂我意思。

与UI元素交互就像在操作硬质的小物体。将它们抛到一边，它们回弹一点。扔下去，也会回弹一点。

因此这很有帮助，适当时候让你的动画“回弹”，尤其是当它们垂直移动的时候。这都是在维持运动感。

物体不会突然停止

移动中的物体需要一些时间才能静止。静止物体需要一定时间加速。耶，物理现象！

所以，当你使物体移动或停止时，记得给他们一些时间（以毫秒计）来减速或加速。这个叫做“缓动”，这个功能被置入了CSS中。

链接

终极指南如果没有一个满是链接的章节，就是不完整的。下面来了。我们整理了一些文章链接，围绕网页动画背后的基本理论、入门教程，还有大量案例。请尽情享用。

网页动画理论

开始做动画前还想了解更多信息？没问题。这儿有一大堆聪明人的建议，其中一些还对网页动画的未来作了预测。

Animation Principles for the Web 这篇文章围绕CSS动画。描绘了运动物体背后最基础的原则。仔细看看他们网站的其余案例、教程和邮件课程。（不过，邮件课程是收费的）

Invisible animation Steven Fabre告诉我们动画要如何像设计本身那样，基本不可见。读了之后你就不会觉得这句话矛盾。快去吧。

Will animation be the big UI trend of 2015? 对于动画的指导原则做出了一些很棒的推测性的阐释，如果再短点就好了。

The Role of Animation in Web Design 另一则简单基础的建议。短小精悍，当你每次需要做出动画方面的重要抉择时，都值得回来重读一遍。可以将它作为记录思想的便条。

The State Of Animation 2014 Rachel Nabors出品，一套非常棒的总览，（或多或少）讲述了网页动画是如何完成的。你还会见到她的名字好几次，因为她是这个领域的专家。

Five Ways to Animate Responsibly Rachel Nabors的又一篇干货（我早说过还会看到她的作品……）。这篇中，她重温了5种加入动画同时不会疏远用户的方法。

教程

关键在这里！学习更多你想都没想过的CSS属性。学习easeIn和easeOut的区别——其实我也要查阅一下。

4 Simple CSS3 Animation Tutorials 跳过简介部分，直达干货，如果这样符合你习惯。我在下面还包含了很多引导性的教程。如果你想直接看一些基础代码，请由此开始。

A Beginner’s Introduction to CSS Animation 正如标题所描述的。只要你有基础的HTML和CSS知识，就能跟上这个教程，掌握一些有用的基于CSS的动画知识。

The Guide To CSS Animation: Principles and Examples Smashing Magazine为读者奉献了大量的基本动画。这是简单却有价值的知识。

Flashless Animation 又一篇很好的CSS动画介绍，传奇的Rachel Nabors出品。没错，它是2012年的文章，但那时与现在的唯一区别，是她提供的技巧如今得到了更多浏览器的支持。

Codrops tutorials 我说真的，Codrops的这些家伙，推荐多少次都不为过。他们创作了大量的案例、概念样品、灵感收集，当然还有教程。他们热爱动画，并且做了许多来分享他们的爱好。

这里是一些他们创作的动画相关的教程：

CSS3 Transitions, Transforms, Animation, Filters and more! 深入全面的交互教程，大量生动的案例。当你完成了大部分基础教程，可以来这里看看。它给你很多用于练习的创意。

Transitions & Animations 一篇简易CSS动画教程，特别关注transition和相关属性。

Shaking Up The Web With CSS3 (How To Make Links Shake) 重点讲述晃动物体的教程。我是指……看看就知道了。

High Performance Animations 这篇教程由众人爱戴的Paul Lewis和Paul Irish联合创作完成，关注如何在不拖慢浏览器的情况下完成动画。由于这点在移动端尤其重要，很值得一读。

Tutorial: Using animation-fill-mode In Your CSS Animations 在学了这么多让物体运动的方法后，还可以学着处理那些尚未移动、或是运动完成的物体。有时候样式会很棘手，这就是为什么需要animation-fill-mode属性。

Keyframe Animation Syntax css-tricks.com提供的一些非常有用的片段。不记得如何设定keyframe来达成目标？收藏这篇，就再也不用担心了。

A Look Into: Cubic-Bezier In CSS3 Transition 这篇完全是关于时间。我是指动画字面意义的时间。更确切的说，是讲述使用贝塞尔曲线来使动画节奏适中。

弹跳物体！ 我发现两个不同的教程，讲述如何打造弹跳动画。每个都采用了不同的方式，有一些其他所没有的内容。犹豫不决之余，我干脆把两者都放出来。

Create a CSS Flipping Animation CSS Transitions, Transforms & Animations – Flipping Card

Animating CSS3 Gradients 多数动画教程都假定你是要改变物体的几何形体或在页面上的位置。这篇则教你如何改变他们的内部……在本例中是指渐变。

标题图：动画图片，来自Shutterstock

原文链接

作者信息： EZEQUIEL BRUNI Ezequiel Bruni is a web/UX designer, blogger, and aspiring photographer living in Mexico. When he’s not up to his finely-chiselled ears in wire-frames and front-end code, or ranting about the same, he indulges in beer, pizza, fantasy novels, and stand-up comedy. More articles by Ezequiel Bruni

人性化的增强现实用户体验

hi@victor42.work (Victor42) — Sun, 07 Jun 2015 00:36:00 +0000

[国外设计第89期]

从醒来的那一刻，我们就被广告包围了：它出现在我们的咖啡杯上、电视上，回家路上也充斥我们眼前。但我们总能关掉它，将它逐出视线。

增强现实（AR）是一种新方式，将数字化的体验呈现在我们的虚拟世界。

如今的生活与增强现实下的生活，区别就在于你可以避开广告。

有了增强现实，就再也没有阻隔与界限——除非我们人为设定。

向过去学习

让我们回到21世纪初：网站都是800x600尺寸，用table构建。一种新的广告形式正在酝酿，它将成为自Ally McBeal的跳舞婴儿以来，互联网上最招人烦的东西。

弹窗广告。

弹窗采用了最直截了当的方式，通过占据人的视野来夺取注意力。提到自动播放音频的弹窗时，一位Nielsen研究的测试用户写道：

“如果有什么比弹窗还糟糕的，那就是这个了。我讨厌这种广告。极度讨厌。”

随着我们掌握如何在增强现实的维度中传递信息，事情就开始变得棘手。但是这次，让我们为了用户体验，抛弃弹窗和笨重的广告吧。

如何触达增强现实的使用者，而不使他厌恶：

学习用户的社交节奏，作出响应
有选择加入，而非全部加入
收集行为线索，解读兴趣
采用影响程度低的方式，比如消息推送
基于真实世界，构建实体的广告模型，例如户外广告
大胆探索新的沟通模式

用户设定社交活动的度量

我的社交节奏类似这样：

早晨：独自工作
下午：探索、与人交谈
晚上：与家人共度

增强现实应当补充与改善社交节奏，不必时常调整参数就更好了。

在我想象中，增强现实应该是这样改善社交节奏的：

早晨：优先展现邮件和Slack、Basecamp这类应用，同时关闭娱乐与广告频道
下午：打开社交开关，让我与朋友连线，提供宽泛的娱乐与广告内容
晚上：切换回家庭优先模式：交流、安排日程，写下买一加仑牛奶的便签

广告有选择进入

你正在线购买一双鞋，结账过程中，商家问你是否可以给你发送邮件和文字通知，并且愿不愿意下载他们的应用。你可以选择接受，或叫他们走开。

同样的模式也适用于增强现实，但是触发方式可能不同。我们看看增强现实设备可能会如何收集行为线索，解读兴趣。

发现增强现实设备可以通过观察你的行为，呈现你的感兴趣程度。

关注你在一则增强现实内容上逗留了一定时长。设备将之解读为感兴趣，于是提供额外的内容。

接受你采取行动接受这些内容。它可以是一个手势、语音指令，或是眨眼。

体验内容在你周围展开，切换现实世界的体验。

退出退回最初状态。

增强现实世界会和当前世界一样，但有一些额外信息。再举2例来说明它可能的形态。

1. 通知推送

接受通知推送时，有3种典型选择：

忽略它，任它消失
关闭后续通知推送
查看详情

推送的时间与注意力成本相对较低，不像弹窗，它对用户是可选的。可选这一点至关重要。

2. 户外广告

你走在充斥着海报的墙边。其中一张吸引了你的眼球，你走近查看详情。这是种古老却仍然有效的交互方式，因为它很简单。在广告的世界中，这就是户外广告（OOH）。

OOH存在于高人流量的区域，有各种形式，例如广告牌、售货亭、海报和交通工具表面。

2条将增强现实用于户外广告的论点：

广告图像能被机器视野识别
增强现实可以强化户外广告，或使它在用户的头戴设备中唯一定制。

有人会设定增强现实的界限。可能也会有某些无广告的行政区。或许建筑会向增强现实广告收费，也可能它会受制于言论自由。现在预测为时过早，但我相信未来会更加多彩而活跃。

设计和开发新应用时，要探索新的交互模式——不要在新时代来临之际，继续沿用陈旧的方式。

原文链接

作者信息： Matt Sundstrom, ‎Associate Creative Director at Instrument Matt Sundstrom is in love with the future, drawing, and user experience. Find him at Instrument, an independent digital creative agency that launches brands, products, campaigns, and interactive experiences for every screen — located in verdant Portland, OR. Follow me on Twitter

灵感库的故事

hi@victor42.work (Victor42) — Mon, 01 Jun 2015 10:59:00 +0000

开门见山，这是一篇广告文，分享一款设计师灵感库管理工具。诶，先别急着开骂，我可没有商业化的打算。我打广告一定要严格满足三个条件：【朋友】推出的【好产品】，【无偿】广告。

不过，在做广告之前，我有故事要讲。

设计师的职业生涯就像一棵树，素材库与灵感库交织出了年轮，从某方面反映着你的成长经历。不知道大家的灵感库经历了怎样的演变与迁徙，至少我的是几经辗转。

起先根本没有收集意识，需要什么临时找，几个网页书签就是全世界。从实习公司的老师那里拷来一套商业图库，10几个G。看得心花怒放，每件素材看着都精美无比。很长一段时间，那个文件夹就是我全部的上升空间，探索没有尽头。然而这个世界再精彩，也难以为我所用。文件多如牛毛，分类方式不合我的逻辑，找素材还不如百度来得快。我这才第一次意识到个人积累的意义。

于是开辟了一个硬盘分区来存放素材——必须按我的习惯整理。网络上的素材涌入素材库，商业图库里的一部分也逐渐被吸收进来，其余的则索性删掉了，因为很多大半辈子也不可能用上一次。隔壁目录下，灵感库文件夹也慢慢成长起来。鼎盛时期，两者加起来超过了30G。

然后大迁徙开始了，起因是应聘时被要求当场做设计。空着手去的，以我那时的水平，结果可想而知。解决方法不止一种，我选了最辛苦却一劳永逸的——统统搬到云端。灵感库采集到花瓣，人工上传，搬家持续了整整一个下午。而素材库要随时取用，电脑上也得有一份，同步盘比较合适，上传了两天两夜。

随着经验与水平的增长，早期的素材与灵感，现在看来就不忍直视了。这中间又经过几番大清洗，灵感库也搬到了Pinterest，因为它更好用。然而意义最重大的，并非这些图片的数量或质量，而是两者的泾渭分明。

其实在相当长的一段时间内，我都在以错误的方法工作。拿到一个设计需求，先打开素材库，看看哪些东西能组合起来。长此以往，素材不但帮不了你，反而会阻碍进步，阻断你的思考。近年来，我的灵感库在不断扩充，倒是素材库几乎是一滩死水，极少更新。素材库的内容也与之前大不相同，零散的小玩意取代了整体的设计模版。原因只有一个，素材的作用是为我节省时间，不能被它左右了风格。打开素材库之前，设计就应该已经完成了，要么在纸上，要么在心中。

说到这里，灵感库的作用显得愈发重要了。它不能代替你画图，却能指引你设计。除了自己，能左右设计风格的，就只有它了。所以在这件事上，务必要有一件趁手的工具。

今天的主角，PinCap，就是这样一款灵感库管理工具。看看界面先。

乍看像个图片管理工具。当然，那是最基本的功能。分类目录管理、图片预览、信息修改。还有色彩筛选，对摄影图片很有用。

PinCap中的目录，对应着硬盘上的文件夹。在PinCap中做的各种操作，最终都会体现到文件和文件夹上，反之亦然。

就管理功能而言，它刚刚好，很节制。

更精髓的是采集功能。只要有图片被复制到剪贴板里，就能触发它的采集窗口。选个目录，完事。

有时候我们并不希望触发采集。在设置里可以过滤掉一些设计软件，避免不必要的干扰。

通过PinCap，可以把网络上、聊天窗口中、截屏工具里的图片集中收纳管理。图片多了，优势自然就体现出来，管理本地文件总是最容易的。

如果想要同时兼具云端同步的功能，需要另外有个同步盘。我把PinCap的默认文件夹直接设在了百度云同步目录里，problem solved!

PinCap的UI与交互细节，在各位挑剔的设计师眼中，我相信仍有提升空间。不过真正打动我的是一个想法——连接一切现有资源，应用本身甘做一扇窗，深藏功与名。

很好的开始，我们不妨拭目以待。

最后奉上下载地址：http://zrey.com/app/pincap，有mac和windows两个版本。6月1日-6月3日半价优惠。另外我还从朋友那里要来了3个免费名额，在此送给大家。需要的朋友，请发邮件到greenzorro@163.com，邮件主题就写PinCap免费领取。前三名发进来的朋友会获得免费License，晚些时候统一发给大家，手慢无喔。

时间感知对交互设计的影响

hi@victor42.work (Victor42) — Sun, 31 May 2015 15:48:00 +0000

[国外设计第88期]

在交互设计中如何加以利用时间？它是可控的吗？

元素的时间控制难以描述，但我们都能感觉得到，从令人厌烦的等待加载，到令人愉快的轻松穿梭于页面间。时间控制的范围很广，大到可感受到的时间增量，小到区区毫秒。单独看似乎没有意义，但无论如何，它积累起来就能影响用户的看法。

本文中我们讨论的内容涵盖一切随时间变化的元素：视频、音频、动画等等。我们会从时间为何重要讲起，然后讨论时间控制的要素，还有如何改善它们，之后我们会探索快速和简洁如何发挥作用。

时间为何重要

时间是个难以掌控的概念，因为它的范围如此广阔。就像一个电子的大小，相对于我们银河系几乎无法察觉。一毫秒的跨度也一样，相比一个千年，根本感受不到。

但是数字世界的时间与人类的时间不同。几秒的差距，就决定了体验是令人沮丧还是令人愉悦。我们可以把它归为基本的人类心理学：

**记忆与注意力是有限的——**正如我们在交互设计最佳实践中描述的，设计师应当评估界面的认知负荷。否则，用户会苦于短暂记忆导致的信息丢失，使他们沮丧。
**人们必须感到一切尽在掌控——**没有人愿意受科技的支配。正如我们最新的博文中陈述的，有些人仍然把计算机作为黑盒子对待。让人等待的电子产品，会给人一种不够格的傲慢印象。

用户的操作是有节奏的。在用户体验领域，时间的度是以10的量级来丈量的。用户判断是否值得在一个网站花费时间，只需要0.05秒。如果它们决定留下，通常会在2-4分之内离开。

无论目标是更新你的Facebook信息流，或是在Amazon上对比购买产品，每项体验都可以分解为一系列的交互，交互操作之间的耗时对用户体验会产生复合影响。

交互设计中的时间要素

那时间和交互设计具体有什么关系？设计顾问David Malouf相信，时间把交互设计与其他用户体验学科区分开来。时间远非线性的过程，因为随时间流逝所有交互都会发生。Malouf建议，我们可以具体从3个不同角度来检验时间：步调、响应和环境。

1. 步调

在设计方面，步调与固定时间内完成的事情息息相关。你马上就会想到，“那么用户完成的事情当然越多越好”，但这未必正确。

来源：席克定律

根据经验，操作流程远比可用的操作数量重要。席克定律说到，过多的界面元素实际上阻碍决策（因此也影响目标的完成）。

想一想，比如有一组庞大的注册表单，和另一组分成多页面的小表单，两者信息相同，会有怎样的区别。长表单会花费更少的时间，但一系列小表单似乎更容易掌控，对用户也不那么复杂。

下面的例子来自LinkedIn，结合表单引导和进度条是个很不错的策略，改善了体验的步调。创建一套专业档案所需的冗长过程被分为4个可掌控的步骤。用户也能看到它们的进度到了什么地步，这会激励他们继续进行。步调与效率关系不大，更多是用户是否对体验感到舒适——不会使他们负担过重，也不会减慢它们的速度。

来源：LinkedIn表单引导

2. 响应

产品的反应时间与用户的掌控程度直接相关。Jakob Nielsen说过，电子产品最重要的3个响应时间范围是：

**1秒——直接控制——**用户感觉他们在直接操纵这个系统，就像使用真实的工具一样。除了结果的视觉呈现外，不需要任何反馈。
**1秒——间接控制——**用户会注意到延迟，但在网站的体验中仍然感觉尽在掌握。比如对于加载新页面，这个延迟是可以接受的。
**10秒——部分控制——**用户的注意力已经转移，操作流程中断。反馈对于减少半途而废至关重要，这就是加载界面如此流行的原因。

响应时间中的延迟必须与任务的重要性相称。例如，加载云端面板，5秒是可以接受的。但是触发一个下拉菜单就不可忍受了。延迟越长，用户与界面之间的关系就越趋于分裂。

来源：UXPin

3. 环境

如何、何时、何地，甚至为何使用一个应用，都对时间感知有所影响。

比如，网站的平均停留为2-4分钟，尽管电商销售流程的平均要持续28分钟（这甚至都没有考虑销售的品类——买一辆车可得花上几个月）。同样的，那些在商场购物会通过移动设备比价的人，比坐在家中沙发里购物的人更重视速度。

来源：理解企业中移动运算的时间、地点与环境

如果你发现用户过早离开你的网站，你就得修改链接文案了。你还可以检查页面的视觉层级（颜色、对比、字体），确保重要的信息得到了强调。

但是，这些吸引眼球的方法，在单独一页沉浸式内容中或许有违直觉，例如博客。这种情况下，你最好善加利用留白来强调内容（就像Medium那样）。同一个获取注意力的策略，依据网站类型的不同，会产生两种不同的效果——这都取决于环境。

越快越好……在某种程度上

讨论一个界面的步调时，我们提到过并非总是越快越好。

坦言之，绝大多数时间相关的可用性问题，都由于系统反应太慢。但是，也有些情况速度太快反而不好。通常，速度太快的界面会导致两个问题：错过信息，或是用户跟不上。

来源：FourSquare_

1. 用户错过信息

信息变化太快时，用户只要看一眼屏幕的其他地方，就会错过它。这些通常适用于并非由用户触发的意外操作，而且通常这个变化离相关操作越远，越容易被忽略。有简单的补救方法可以将注意力引向这些变化，通过恰当处理的动画效果（我们稍后会讨论）。

我们可以把西门子作为界面速度过快的例子。此例中，向用户展示了如下页面，然后询问他们是否发现了西门子有洗衣机的特别促销。

来源：Auto Forwarding

正如Jakob Nielsen，Nielsen-Norman Group的联合创始人所描述的，即使页面顶部以巨大文字展示了促销信息，用户还是没看到。为什么会发生这种事情？因为轮播图（其实更像手风琴效果）每5秒自动切换一张。每次屏幕切换，唯一的指示器就是右侧的边栏——它通常都被忽略了，因为这两个行动召唤看起来像是banner（从而引发了banner盲区）。

2. 用户跟不上

即使用户注意到屏幕上快速切换的动画，也未必能理解。这通常发生在轮播图、旋转体和其他自动切换功能中——用户被图片激起了好奇心，当他们把鼠标移上去，它已经变成了另一张不怎么有吸引力的图。

可以发现，先前西门子的案例就是糟糕的用户体验决策的综合体。无论如何，5秒的轮播图是其中最糟糕的。因为它占屏幕主导地位，轮播图立刻就能吸引用户注意。但是这个轮播图每5秒改变一次，使用户迷失方向，并没有清晰表达出促销信息。用户并没有触发这个操作，于是为了努力赢回用户体验的控制权，他们对用户体验的其他不足更加敏感（比如糟糕的文案）。

来源：应该使用轮播图吗？

实际上，最好是摈弃自动切换的轮播图，因为它们最擅长分散注意力，最让人沮丧。目标与轮播图内容无关的用户，会发现它令人分心。真正需要了解其内容的用户，又无法及时反应。

对于非母语用户，响应问题更严重。年纪越大，或越不熟悉科技产品，越难以使用。要确保你的界面反应不至于太快，这些建议很有帮助：

让用户手动控制——屏幕上的快速变化，必须限制为由用户的操作触发。否则，这就违反了最少意外原则，这是指用户通常都不喜欢突发事件。
用动画来减慢速度——用800毫秒到1秒之间的动画来表现屏幕上的变化。
给每个轮播图留出足够的时间——如果你必须用自动切换的轮播图，要大声朗读其中文案，然后所花时间再乘以2.5。这就是每张轮播图应该停留的时间。还有当鼠标指在轮播图上，要确保切换暂停。

记住，交互设计中，感知到的就是真实的。令人愉快的等待，远比推着用户列队前进要好。

点击要简单，而非快速

既然提到速度，很有必要纠正另一个普遍的设计误区，3次点击原则——这个原则指出，用户通过3次及以内的点击，应该要能查看网站的任何内容。对于这个3次点击原则的最佳描述，可以说“意图是好的，但造成了误导”。

来源：你仍在信守的5个用户体验谎言

Hubspot的前用户体验总监，Joshua Porter创作的这张图表表明，点击次数与用户的满意程度并不存在确切的关联。其中的教训是，设计师应当少考虑让用户尽快完成任务，多考虑让用户尽可能容易地完成任务——目的不同，是界面设计存在差异的依据。

为了进一步印证我们的观点，看看这张图表。它遵循了3次点击原则，因为任何页面确实可以通过3次点击到达，但这种模式真的提升了可用性吗？它其实损害了可用性，因为用户得从过多的导航中过滤出他们的选择。而且，当他们到达新页面，他们需要再次从众多选项中过滤。

来源：Oracle

看看上面的Oracle网站。当然，你可以在3次点击内进入任何产品类目（例如数据库或Java），但你真的想这么做吗？

相反，我们建议遵循1次点击原则：每一项交互都让用户离目标更接近一步。这种策略有助于缩减顶级导航的项目数量，而不会使用户迷惑。它有助于让人关注探索的体验，而非探索路径本身。

来源：Chase

打开了我的帐号页面。我看见一个行动召唤，Ultimate Rewards，我点击了。

来源：Chase

进入了奖励页面。我看见选项_Use Points_和_Earn Points_。我点了_Use Points_。

来源：Chase

当来到点数兑换页面，我能看到有多少点数可用，有多数可以兑换。我选定了数量，兑换现金，然后达成了目标。

来源：Chase

这需要3次以上的点击，但每次点击都只花很少的精力。而且每次点击都让用户在通向目标的道路上更进一步。现在，如果你仍然坚持3次点击原则，你可能会把顶级导航其中一项设为“使用奖励”。点击次数当然减少了，但这种扁平式的策略实际上会展现过多的项目，难以同时筛选过滤。因此为了更短的点击路径，牺牲了可用性。

我们想要强调3次点击原则背后的精神：点击应该尽可能简单和直观。并非确保用户在网站上所花的时间最少，而是值得的。

总结

提到交互设计，一秒的延迟就能左右成功与失败。如果用户体验太慢，人们会感到沮丧。如果太快，人们会错过重要信息（或者不明白它的意思）。理解人类对于时间的认知、速度（和轮播图）的限制，还有直接点击的重要性。

如果有疑问，记住这条简单的可用性原则：清晰就会顺畅，顺畅就会快。

原文链接

交互设计三大法则

hi@victor42.work (Victor42) — Sun, 24 May 2015 00:03:00 +0000

[国外设计第87期]

科幻作家艾萨克·阿西莫夫在他的机器人系列故事中创造了“机器人学三大法则”。这些法则被永久性地植入每个机器人，作为防止灾难、保护人类的最后一道保险。我很好奇，我们最后一道保险是什么？对于交互设计师而言，三大法则又是什么？

用户对于界面的感知，离不开它的形式、内容和行为。就像工业与平面设计师专注于形式那样，交互设计师将行为作为最重要的元素来考虑。要通过设计来左右用户的体验，首先要考虑我们的三大法则，界面的行为如何表现，它对用户的行为产生什么影响。它们必须得作为稳固的基础，在它之上构建其他交互设计原则。幸运的是，我将要运用的三大法则早已有人提出——三大法则的主人，Mac电脑项目背后的大脑，Jef Raskin。他在他的著作The Humane Interface的某一页中写下了这三条铁律，本书在交互设计中的地位接近圣经。细细品读，你会发现现代最流行的用户界面，都采用了这本里程碑式的著作中的概念与技巧，其中也包括微软和苹果的设备。

第一法则

善加利用阿西莫夫的三大法则本身，Raskin写道“交互设计第一法则应该是：电脑不应该妨碍你的工作，或由于不作为而使你的工作受到损害”[1]。我们都应该牢记，电脑是一件用来完成任务的工具；最终目标不可能或极少情况下是使用软件本身。因此，我们可以一致同意，在电脑上最恶劣的体验就是让工作蒙受损失。唯一一件比丢失已完成的工作更糟的，是丢失无法精确还原的数据，比如创意类的工作。

当你键入时，应用应当如实反映数据，并尽可能防止你丢失工作。可能你会觉得这只是工程师该考虑的。开发者应该确保他们的软件有防护措施和冗余，来防止数据丢失（还有一些潜在bug），不是吗？实际上，数据保护与工作保存也是界面设计的任务，作为设计师必须预先行动——通过用户研究——发现用户会如何损失工作，或是不得不重复工作。这就意味着要加入一些保护，比如强大的撤销功能和破坏性操作保护，来防止无意的数据丢失。很棒的一个例子就是GitHub仓库的删除对话框，它确实发挥作用，不同于其他确认对话框，它强迫你输入仓库名称才能继续。这个技巧很聪明，在删除过程中迫使用户的注意力集中到仓库名上。安全措施防止用户习惯性的操作导致损失。

GitHub删除确认对话框。

第一法则也适用于保存用户的工作相关与内容本身。比如，要选择一系列项目进行操作（比如说文件），需要大量的精力。因此，建议在工作流程中保留选中状态，将它们保存在一个可以撤销的操作列表中。类似的，如果界面允许用户对元素进行自定义或排序，这些排序或自定义都应该保存下来。

为什么Apple的Time Machine和自动保存，还有Dropbox的历史版本这么棒，就因为遵守了第一“法则”。它们承认人类会犯错这个事实，尽管用户可能会触发一个破坏工作或数据的操作，那并非他们的意图。

Apple的“浏览所有版本”功能非常棒。

第二法则

Raskin继续写道，好的第二法则应该是“电脑不该浪费时间，或要求你做非必要的工作”[2]。很常见的情况，用户肩负众多任务，因为人工执行一项任务比编写一个系统让它自动执行简单的多。这些情况下，如果技术允许，电脑应该承担起这些工作。比如迫使用户选择信用卡的类型，虽然从卡号就可以推断出来。

Stripe就做对了，自动检测信用卡的类型。

用户学习一套新的界面或系统数据模型，所花的时间与精力也要纳入考虑，要与总工作量取得平衡。用效率较低的方式执行一项操作，或许比学习一种高效的新方式再操作工作量少。用户只原意与少量界面进行交互。至于其他，稍加牺牲效率，换取更加直观的操作或许是值得的。

假设某种状况下你需要迫使用户改变他们自己的思维模式，这时需要谨慎。因为这项设计抉择会影响用户的内容结构（通常出于技术要求），而非让他们自己决定如何组织信息，或是使用他们熟悉的结构。优秀的界面以用户最想要最易懂的形式展现信息系统。以多数银行希望你存钱的方式为例。通常，你需要把钱分几个账户存，或是存在一个账户上，然后自己判断哪些不该花。Simple用了另一个方案。相比强迫用户思考存款的运转方式（比如在银行账户中），Simple让你简单通过“目的”设置任意数量的钱，这些数目与之后的交易一起，都在“可使用”余额的追踪下。

Simple的“可使用”能辨认出人们确切的用钱方式。

第三法则

我相信，Raskin的书余下的所有部分，讲的就是第三法则。他说界面应该是人道主义的；它应当“响应人类的需要，并且体谅人类的弱点”[3]。这是整部以用户为中心的设计的核心定律，由此得到其他的交互设计原则。好的交互设计永远都会尊重人脑和身体的局限。它有必要对我们的本能物理反应和文化价值保持敏感。

让界面变得人道主义的一个例子，是围绕人们同时只能注意一件事情进行设计。比如，键盘大写锁定键上的指示灯。它本身并不是个好的解决方法，无法避免误触开启大写锁定模式，因为用户按下时，关注点通常不在按键上。Mac的密码输入就处理得很好，它在输入框内提供了视觉指示，表明大写锁定被开启了，用户此时就在看输入框。

大写锁定的信息就在你需要的地方。

“响应用户需求”的一个例子，是在他们进行操作或执行工作流程时，持续展示用户关心的内容（注意：他们关心的是目的，而不是你的应用）。看看Amazon，它自动显示你查看的镜头是否匹配你近期购买的相机。

Amazon的相机镜头匹配组件。

最后一条“定律”是交互设计定律的精髓。在今天的世界，要知道设计界面非常重要的一点就是人道主义，从认知的格式塔原则和平面设计原则，到相关的文化心理学。我们的工作永无止境。随着时间流逝，技术前景和我们的文化环境在缓慢改变，我们将颠簸前行，继续演进我们的设计与设计流程。

无论如何，这三条定律是我不断回溯的基本准则，它们再三成为成功的界面的试金石。在你决策界面的外观和行为时，牢记它们很有帮助，不论你最终设计的美学样式如何。

总结

电脑不应该妨碍你的工作，或由于不作为而使你的工作受到损害。
电脑不该浪费时间，或要求你做非必要的工作。
界面应该是人道主义的；它应当响应人类的需要，并且体谅人类的弱点。

另：可以关注我的Twitter@uxdiogenes，我的Medium文章，或者订阅我的博客RSS。

原文链接

作者信息： Diogenes Brito A craftsman of order and clarity. Product Designer @SlackHQ (slack.com). Formerly a designer and engineer @Squarespace, UX @LinkedIn. http://uxdiogenes.com

网页设计的未来深藏于建筑史中

hi@victor42.work (Victor42) — Sun, 17 May 2015 01:09:00 +0000

[国外设计第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就是网页设计中的彩色玻璃。基本元素到位，我们就开始选用看似不可能的材料。哥特式建筑将石头变为反重力的壮举，令人屏息。虽然如今难以记得，那些早年的Flash和CSS网站，仅凭像素就使我们惊异不已。

没错，我将早期的Maroon 5网站与兰斯大教堂进行了对比。

5. 文艺复兴时期建筑

干净、精确、合乎逻辑

维琴察圆顶别墅，公元1567年；Rdio.com，2012年

这就是我们如今的阶段，近年来的“扁平式设计”趋势，与文艺复兴时期建筑惊人相似。文艺复兴建筑呼吁古典逻辑的回归。简单的几何学形式取代了华丽的复杂度。设计变得更干净。人们开始发表新准则的论述，一切都在变化。

接下来，我开始走进未来…

6. 巴洛克式建筑

扭曲一切准则

罗马圣卡罗教堂，公元1638年；未定义，2017年

合乎逻辑、保持精确的乐趣只持续了这么久。最终我们开始打破规则。在建筑设计中，这意味着真正打破部分古典元素，将他们扭曲成某种复杂的形式。与文艺复兴时期的理性主义相比，巴洛克式设计更富于情感和戏剧性。

我们在网页设计上会怎么做？这很难说。只要再等等，它几年内就会显现。

7. 新古典主义

Harkening back to the past

聆听过去

先贤祠（巴黎），公元1790年；未定义，2022年

一切周而复始。一旦获得足够的进展，我们会开始赞美最初的经典，全面复古。只要一定时间。新古典主义网页设计就在遥远的前方——虽然旧时代的Yahoo网站在我们看来很逊，并不庄严。但是6、7年后呢？它可能又很酷了。

8. 在那之后，谁知道呢？

我们大概知道了。它会类似于新罗马主义或是新哥特式的形式。总之是某些新形式。艺术会持续以复活重生的形式延续自身。最终呢？新的科技和新世界观会到来，我们如今是无法想象的。

然后一切开始变得神奇超然。

原文链接

作者信息： Mike Sall Product Science at @Medium

17个绝美的初创公司官网

hi@victor42.work (Victor42) — Sun, 10 May 2015 00:12:00 +0000

[国外设计第85期]

初创公司是非常有意思的业务模式，员工都雄心勃勃、奋力工作、思维卓越。

就我自己而已，我与很多初创公司协作过，我喜爱这种快节奏的环境。不过我最喜欢初创公司的一点，是它们极为重视产品与网站形象的设计。这些公司为了积累指数级的增长押下重注，所以设计被摆在基础的地位。

我收集了17个初创公司，它们成功打造了惊艳的网站。

初创公司网站案例

Exposure

如果你喜欢摄影和讲述故事，你就会喜欢Exposure。他们是一个照片平台，充斥着全世界人们不可思议的照片故事。页面很简单，但焦点很清晰地落在了照片上，这点很有利。搭配上干净鲜明的非衬线字体，页面效果就会非常好。

Nobly

Nobly是个社交app，试图连接想要做好事的人们。首页焦点区域非常抢眼。在鲜明的紫色背景上，是他们巨大的白色logo。这是最重要的入口，或者说欢迎页面——它很有效。

The Fernmway

Fernway是个旅行资源网站，专为想探索新目的地和新体验的人而生。如果你即将踏上旅途，一定会有兴趣的。即使你只对好的设计感兴趣，它也很不错。Fernway的布局似乎受杂志排版设计的影响，而且行之有效。深色的网站非常简洁，但展示效果相当好。

Flowmail

Flowmail为电子邮件简报而生，他们有着最干净的着陆页。除了3项重要议题和注册表单，屏幕上鲜有其他信息。恰如其分地传递了一个信息：他们能以优雅、简洁且有效的方式做事情。

Xero

Xero是个专注设计的在线会计软件。主页为潜在用户提供了大量信息。这些信息被精心排列过，看起来很棒。有他们自己的风格！

Assembly

Assembly是各种不同背景的创造者的在线社区——汇集了设计师、开发者、市场专员等——让他们相互接触、雇佣，合作项目。这是个建立在信任与团结之上的杰出社区。了不起的品牌形象反映出人们之间的连接。品牌的外观与感受很友好、欢乐、吸引人；这更激发人们成为社区的一份子。

eRated

如果你是在线零售商，名声非常重要。eRated提供此种便利，让你追踪名誉并帮你改善它。网站充斥着厚重的大号字体，还有彩色的图标和图片。所有这些都营造了友好和可信赖的氛围。

Brewster

Brewster是个为你记录联系人的app。他们对设计理解很透彻，因为长年来，着陆页和app本身就以启迪性著称。它现在的着陆页区别于其他典型的高端华丽，他们用卡通形象替代，有助于使品牌更加友好亲切。它与众不同，令人耳目一新。

Squarespace

Squarespace是个网站平台和网络主机服务商，专门帮助人们和公司完成高品质和高端的设计。它的风格很简单、清爽和精致。他们很好地运用了文字、留白、比例均衡和照片，打造了非常杰出的网站平台。

Rdio

Rdio能在线试听音乐，最新一次改版很有意思。他们摈弃了典型的网站布局，创意颇具实验性。为了强化创意设计的方向，他们选用了鲜明的色彩。网站看起来很棒，它欢快、乐观、激动人心。

Kissmetrics

Kissmetrics的着陆页是极简设计，刚好切中要害。这个统计分析类的网页应用通过中分来利用屏幕空间，只有行动号召放在一侧。另一侧是一张完全不相关的美丽照片。这很有效，因为很多人已经知道Kissmetrics是什么，他们除了一个注册或登录框以外，什么都不需要。

Virb

Virb是个网站创意平台。这个网站很华丽，使得注册他们家的服务更令人信服，也更便捷。他们很好地运用了照片贯穿全站。

Evernote

Evernote是人尽皆知广受喜爱的产品。然而，Evernote的那些家伙深谙公众证言的力量，他们推出Adam Savage和Jamie Hyneman作为他们的超级用户之一，酷到了极点。它现在不仅仅是产品看起来如何，还借用他人名义，成倍放大app的体验。

Narrative

Narrative是一款可穿戴相机。随着页面滚动，着陆页突出展示了这款设备的正面和内部。周围都是由这个app所拍摄的华丽照片。它很好地讲述了产品故事，通过它，你也能拍出这么棒的照片。

Square

Square因为高品质的设计标准声名远扬。网站和产品经年累月进化，但他们对风格的绝佳把握始终如一。他们对字体、照片和颜色运用恰到好处——设计非常干净，并且像素级精准。

Hotel Tonight

Hotel Tonight是个可以预订当下酒店房间的应用。他们的着陆页呈现一种紧迫的外观和感觉——就像app一样。像他们这样的产品，有点亲密的感觉会很有趣。而且，他们的着陆页充斥着优秀的高质量照片，都是你可能投身或向往的地方。

Geckoboard

Geckoboard是一个展示公司指标的平台。他们的产品——还有他们网站——都清晰地表明数据未必是无聊乏味的。他们的品牌涉及一些微妙而优雅的设计元素，例如绝妙的配色和精心挑选的字体。

结论

初创公司一次次证明，大力投入设计能够取得成功。如果设计做得到位，它会迫使我们尝试新事物，让你了解一些使你一见倾心的产品和公司。我希望这17个网站确实对你有帮助，使你理解设计是件大事。并且在你下个项目中，这些公司的美妙设计能给予你启发。

我个人倾向于极简而鲜明的设计，这些网站中你最喜欢哪个？可以在评论中留下你的想法。

原文链接

作者信息： Paula Borowska Paula runs a user experience blog BeingLimited and an author of an upcoming book about mobile design, the Mobile Design Book. You can connect with her on Google+.

Material design无需照搬Google

hi@victor42.work (Victor42) — Sun, 03 May 2015 12:21:00 +0000

[国外设计第84期]

最近，我们决定替换一下我们常备的邮件app原型，换成更迷人、跟上时代的东西——其中考虑采用了Google的material design原则。

但我们注意到很多设计师遵循Google的规范，最后……结果做成了Google。聪明的品牌会沿袭Google的风格，但对于想要跟上设计趋势同时保持自身品牌力量的公司而言，这就不太好了。

设计新的邮件app原型时，我们深入考虑了这个问题。我们要确坚持material design基于触摸、用动效表达意义、大胆地表达意图的核心原则，但不能完全复制Google Now或是Inbox。

我们想在此从两给方面分享构建这套界面的收获：其一，分享我们关于material风格的思考和设计。其二，分享界面本身——你可以从文末获取到。

颜色

Google一直以它大胆的主色运用著名，从他们无处不在的logo，到山景城园区的户外陈设皆是如此。Material通过辅助色、基于饱和度的色谱扩展了它的配色，但仍然专注于运用大片的扁平色彩，并没有使用长年主宰网页设计的渐变色。

尽管关于设计趋势的讨论，都倾向于将渐变、投影和拟物化融为一体，material design鼓励使用引人注目的阴影，回归现实中的触觉反馈。

于是，我们向用户展现了引人注目的渐变色，以示区分——包括app主图标中的条纹。构成这种渐变的色彩来源于material的配色，但我们以一种Google没有的方式进行混合。然后我们给悬浮操作按钮加了一定程度的透明。不过在信封的翻折处仍然有浓厚的阴影。

由于material design需要明亮、高对比度、浓烈的颜色，使用宽泛的配色来填充设计，极具诱惑力。但颜色不必强烈反差来满足material的标准、达成目的——只要意图鲜明就可以了。

我们的邮件app最后用了相对简单、接近的配色，采用投影和渐变来区别于Google，同时创造并传达其意义。

字体

Google显然具有运用字体传播品牌的力量。通过创造和统一使用他们的Android预留字体，Droid Sans和Serif，如今则是Roboto和Noto，他们不仅创造了清晰的界面，也强调了品牌。他们还（聪明地）更进一步，坚持在网页上也使用Roboto资源，比如Play商店、material design官方网站、和Android版本网站。

我们要一套简洁、现代的外观，类似于Roboto——但不尽然。Google Fonts上对的Roboto描述表现了他们试图让它适用于所有人——他们用了少量词句描述，比如混搭、人文主义还有几何学。

于是我们选了Avenir字体，另一种跨界字体，它源于无装饰的Futura字体，但融入了更多人文主义曲线。不像Roboto或Apple的挚爱Helvetica，它不是混搭字体。

我们也用过人文主义的Open Sans字体，我们的品牌字体之一。不过这没什么意义，我们不想过分强调自己的品牌。

交互与动画

交互、动效和动画可以给用户带来大量的反馈信息。通过过渡效果，让他们知道任务已完成，表达出app的层级结构。这些都不需要逐一写成文字。

Google的动画效果能给人启发，让人思考事物相互间如何关联与转变，UI元素如何帮助用户接受与登录，界面元素如何取悦用户（而非令他们分心）。

但要确保它最终确有启发性。谨慎考量你的app的最佳交互隐喻。Google的纸墨隐喻难以抗拒，这点无可否认。通过它让你的用户理解app的行为、工作原理和各元素间的关联，只有这样，它才是正确的选择。

交互效果与动画要对你的app有意义，有助于融入Android（或iOS）生态系统，能够打造最佳的用户体验。时刻围绕自己的平台很需要精力——这就是为什么我们在设置中的iOS开关、切换项上稍微卡住了一会儿，为了保持material的感觉。

请随意取用

设计这套新原型，教会我们很多。我们希望这个Sketch文件也能给你同样多的信息。它总共有23给界面，包括登录。马上下载吧，完全免费！

原文链接

作者信息： John Moore Williams I’m the Director of Content Strategy here at InVision. Nice to meet you. Follow me on Twitter

避免3种响应式设计灾祸

hi@victor42.work (Victor42) — Sun, 26 Apr 2015 11:42:00 +0000

[国外设计第83期]

响应式设计方法对开发者非常有用，因为它使我们的内容在各种设备上广为传播。不用保留几个独立版本的网站，也可以摒除诸如缩放和流式布局这些方法的弊端。

本文重点讨论设计师遇到最多的3个响应式设计问题，也会提供一些规避错误的策略。

缩放、流式布局与响应式

这些术语容易造成混淆，设计师常常错误地交替互用。实际上，每个都是布局技巧的显著进化过程，像技术演进那样逐一显现。

缩放布局，旨在相对缩放每一个元素。它们会随着窗口大小变化动态缩放内容，就这方面而言，它们是响应式的。布局本身保持静止，通过改变每一个元素来保持一致的表现。

上图：不同分辨率下缩放布局的例子，这种设计为了统一牺牲了易读性。

流式布局就不一样，因为它们随着窗口尺寸缩放容器元素。通过em这类相对单位可以做到这点，克服了缩小文字的问题。用户主动缩放时，设计就被破坏了。

上图：不同分辨率下流式布局的例子，这种设计为了易读性牺牲了统一。

响应式设计不会缩放任何东西。相反，它会根据窗口尺寸决定显示哪些内容。

上图：不同分辨率下响应式布局的例子。

灾祸1：菜单折行

如果在页面顶部使用了导航栏，当页面展现在小屏幕上时，响应式设计通常会把它“掰”成更紧凑的格式，但这并非总是有效，如果显示区域比断点更宽，又不足以在一行显示所有菜单项的话。结果会导致菜单的折行。

有些方法可以解决这个问题。其一，减少导航栏中横排菜单项的数量，将它们分门别类。然后选中某类时，你可以通过下拉菜单来显示子类。

其二，减少断点的数值。应该以导航栏开始出问题的实际数值为准，而非具体设备尺寸。

其三，不同设备使用不同方式，例如滑动抽屉。

灾祸2：使用固定宽度图片

内容区域通常都随窗口尺寸变化。所以当固定宽度图片超出显示区域时，图片就被裁剪了。

上图：糟糕的固定宽度图片例子，它太大了。于是出现了滚动条，内容被推到屏幕之外。

通过给图片设定相对单位，可以避免这个问题。或者使用支持响应式的框架（比如Bootstrap），使用响应式图片class名来控制（例如class=“img-responsive”）。

上图：同样的元素，用响应式图片class名的方式，滚动条就不见了。

灾祸3：元素的扭曲

这有点晦涩难懂，但本质上，布局显示在小窗口上的时候，所有未经处理的列都会以行的形式呈现。这是个问题，因为内容的扭曲会不经意地改变设计的层级。

上图：列变成了行，扭曲了内容。

解决方法显而易见，但令人惊奇的是，仍有很多人在纠结它：只要明确地设定元素的宽度、高度、内边距。如果它移出所处位置，盖住了其他元素，可以通过将它包裹在div容器中，设置外边距，迫使它回到原本的地方。

规划有助于避免问题

本文只讨论了3种最普遍遇到的响应式设计灾祸，还有很多其他途径会毁了一个好的设计。预防错误并不难。现代浏览器都有内置的响应式布局测试，好好规划设计，多做测试。

原文链接

作者信息： EMMA GRANT Emma Grant is a professional freelance content writer from Ireland. Over the past three years she has travelled the world while running her business from her laptop. You find her at www.florencewritinggale.com More articles by Emma Grant

移动端尺寸基础知识

hi@victor42.work (Victor42) — Sun, 19 Apr 2015 19:55:00 +0000

初涉移动端设计和开发的同学们，基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白，感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理说起，理清关于尺寸的所有细节。由于是写给初学者的，所以不要嫌我啰嗦。

现象

首先说现象，大家都知道移动端设备屏幕尺寸非常多，碎片化严重。尤其是Android，你会听到很多种分辨率：480x800, 480x854, 540x960, 720x1280, 1080x1920，而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了：640x960, 640x1136, 750x1334, 1242x2208。

不要被这些尺寸吓倒。实际上大部分的app和移动端网页，在各种尺寸的屏幕上都能正常显示。说明尺寸的问题一定有解决方法，而且有规律可循。

像素密度

要知道，屏幕是由很多像素点组成的。之前提到那么多种分辨率，都是手机屏幕的实际像素尺寸。比如480x800的屏幕，就是由800行、480列的像素点组成的。每个点发出不同颜色的光，构成我们所看到的画面。而手机屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320x480，iPhone 4s的屏幕像素是640x960。刚好两倍，然而两款手机都是3.5英寸的。

所以，我们要引入最重要的一个概念：像素密度，也就是PPI（pixels per inch）。这项指标是连接数字世界与物理世界的桥梁。

Pixels per inch，准确的说是每英寸的长度上排列的像素点数量。1英寸是一个固定长度，等于2.54厘米，大约是食指最末端那根指节的长度。像素密度越高，代表屏幕显示效果越精细。Retina屏比普通屏清晰很多，就是因为它的像素密度翻了一倍。

倍率与逻辑像素

再用iPhone 3gs和4s来举例。假设有个邮件列表界面，我们不妨按照PC端网页设计的思维来想象。3gs上大概只能显示4-5行，4s就能显示9-10行，而且每行会变得特别宽。但两款手机其实是一样大的。如果照这种方式显示，3gs上刚刚好的效果，在4s上就会小到根本看不清字。

在现实中，这两者效果却是一样的。这是因为Retina屏幕把2x2个像素当1个像素使用。比如原本44像素高的顶部导航栏，在Retina屏上用了88个像素的高度来显示。导致界面元素都变成2倍大小，反而和3gs效果一样了。画质却更清晰。

在以前，iOS应用的资源图片中，同一张图通常有两个尺寸。你会看到文件名有的带@2x字样，有的不带。其中不带@2x的用在普通屏上，带@2x的用在Retina屏上。只要图片准备好，iOS会自己判断用哪张，Android道理也一样。

由此可以看出，苹果以普通屏为基准，给Retina屏定义了一个2倍的倍率（iPhone 6plus除外，它达到了3倍）。实际像素除以倍率，就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同，它们的显示效果就是相同的。

Android的解决方法类似，但更复杂一些。因为Android屏幕尺寸实在太多，分辨率高低跨度非常大，不像苹果只有那么几款固定设备、固定尺寸。所以Android把各种设备的像素密度划成了好几个范围区间，给不同范围的设备定义了不同的倍率，来保证显示效果相近。像素密度概念虽然重要，但用不着我们自己算，iOS与Android都帮我们算好了。

如图所示，像素密度在120左右的屏幕归为ldpi，160左右的归为mdpi，以此类推。这样，所有的Android屏幕都找到了自己的位置，并赋予了相应的倍率：

ldpi [0.75倍]
mdpi [1倍]
hdpi [1.5倍]
xhdpi [2倍]
xxhdpi [3倍]
xxxhdpi [4倍]

各型号iPhone的倍率比较简单，我们后面会讲到。那么Android手机那么多，具体怎么分？哪些手机是几倍的倍率呢？我们先看一张表，这是友盟2014年10月到2015年03月的数据：

就目前市场状况而言，各种手机的分辨率可以这样粗略判断。虽然不全面，但至少在1年内都还有一定的参考意义：

ldpi 如今已绝迹，不用考虑
mdpi [320x480]（市场份额不足5%，新手机不会有这种倍率，屏幕通常都特别小）
hdpi [480x800、480x854、540x960]（早年的低端机，屏幕在3.5英寸档位；如今的低端机，屏幕在4.7-5.0英寸档位）
xhdpi [720x1280]（早年的中端机，屏幕在4.7-5.0英寸档位；如今的中低端机，屏幕在5.0-5.5英寸档位）
xxhdpi [1080x1920]（早年的高端机，如今的中高端机，屏幕通常都在5.0英寸以上）
xxxhdpi [1440x2560]（极少数2K屏手机，比如Google Nexus 6）

自然地，以1倍的mdpi作为基准。像素密度更高或者更低的设备，只需乘以相应的倍率，就能得到与基准倍率近似的显示效果。

不过需要注意的是，Android设备的逻辑像素尺寸并不统一。比如两种常见的屏幕480x800和1080x1920，它们分别属于hdpi和xxhdpi。除以各自倍率1.5倍和3倍，得到逻辑像素为320x533和360x640。很显然，后者更宽更高，能显示更多内容。所以，即使有倍率的存在，各种Android设备的显示效果仍然无法做到完全一致。

单位

不难发现，真正决定显示效果的，是逻辑像素尺寸。为此，iOS和Android平台都定义了各自的逻辑像素单位。iOS的尺寸单位为pt，Android的尺寸单位为dp。说实话，两者其实是一回事。

单位之间的换算关系随倍率变化：

1倍：1pt=1dp=1px（mdpi、iPhone 3gs）
1.5倍：1pt=1dp=1.5px（hdpi）
2倍：1pt=1dp=2px（xhdpi、iPhone 4s/5/6）
3倍：1pt=1dp=3px（xxhdpi、iPhone 6 plus）
4倍：1pt=1dp=4px（xxxhdpi）

单位决定了我们的思考方式。在设计和开发过程中，应该尽量使用逻辑像素尺寸来思考界面。设计Android应用时，有的设计师喜欢把画布设为1080x1920，有的喜欢设成720x1280。给出的界面元素尺寸就不统一了。Android的最小点击区域尺寸是48x48dp，这就意味着在xhdpi的设备上，按钮尺寸至少是96x96px。而在xxhdpi设备上，则是144x144px。

无论画布设成多大，我们设计的是基准倍率的界面样式，而且开发人员需要的单位都是逻辑像素。所以为了保证准确高效的沟通，双方都需要以逻辑像素尺寸来描述和理解界面，无论是在标注图还是在日常沟通中。不要再说“底部标签栏的高度是96像素，我是按照xhdpi做的”这样的话了。

Web怎么办

移动端页面的绝对单位仍然是px，至少代码里这么写，但它的道理也和app一样。由于像素密度是设备本身的固有属性，它会影响到设备中的所有应用，包括浏览器。前端技术可以善加利用设备的像素密度，只需一行代码，浏览器便会使用app的显示方式来渲染页面。根据像素密度，按相应倍率缩放。

可以通过这个测试页面 http://greenzorro.github.io/demo/basic/响应式断点.html 来看看你的移动设备屏幕宽度，这是逻辑像素宽度。

以iPhone 5s为例，屏幕的分辨率是640x1136，倍率是2。浏览器会认为屏幕的分辨率是320x568，仍然是基准倍率的尺寸。所以在制作页面时，只需要按照基准倍率来就行了。无论什么样的屏幕，倍率是多少，都按逻辑像素尺寸来设计和开发页面。只不过在准备资源图的时候，需要准备2倍大小的图，通过代码把它缩成1倍大小显示，才能保证清晰。

实际应用

大家最关心的还是实际运用，画布该怎么设置。我们就iOS、Android、Web三个平台来分别梳理一下。不过在这之前，我要为使用PS进行设计的朋友介绍一个小技巧。

之前我说过，我们要以逻辑像素尺寸来思考界面。体现到设计过程中，就是要把单位设置成逻辑像素。打开PS的首选项——单位与标尺界面，把尺寸和文字单位都改成点（Point）。这里的点也就是pt，无论设计iOS、Android还是Web应用，单位都用它。当然，各平台单位名称还是要记住的。这里我们用的只是它的原理，不用在意名称。

要调节倍率，则通过图像大小里的DPI来控制。这个DPI，其实就是PPI，像素密度。有个常识大家都知道，屏幕上的设计DPI设成72，印刷品设计DPI设成300。为什么是这两个数字？

首先说300，这和人眼的分辨能力有关。由于1英寸是固定长度，每1英寸有多少个像素点决定了画质清晰程度。之前说过，这就是像素密度，也就是DPI。DPI达到300以上，其细腻程度就会给人真实感，像真实世界中的物件。相反，DPI只有10的话，在你一个食指指节大小的长度内只有10个像素，这明显就是马赛克了。所以印刷品要设成300，才能保证清晰。

再说72，这有一定的历史原因。最早的图形设计是在mac电脑上进行的，mac本身的显示器分辨率就是72。PS中把图像DPI也设成72，就能保证屏幕上显示的尺寸和打印尺寸相同，便于设计。72的PC显示器分辨率逐渐成为一种默认的行业标准，这套规则就这么沿用下来。

现在回到正题，我们怎么通过DPI来调节倍率？既然屏幕本身的分辨率是72，DPI设成72刚好是1倍尺寸，那设成72的两倍就是倍率为2的屏幕了，就这么简单。

下面来看看3个平台各自的画布设置：

iPhone

iPhone的屏幕尺寸各不相同，我说的是逻辑像素尺寸，这确实是让人很头疼的事情。如果想用一套设计涵盖所有iPhone，就要选择逻辑像素折中的机型。

从市场占有率数据来看，目前最多的是iPhone5/5s的屏幕。倍率为2，逻辑像素320x568。上升势头最猛，未来有望登上第一的是iPhone 6的屏幕。倍率为2，逻辑像素375x667。

按照这两种尺寸来设计，都是比较主流的做法。可以兼顾短一些的iPhone 4s，大一点的6 plus也不会过于空旷。

不过在切图的时候要注意，由于iPhone 6 plus的3倍图是由2倍图放大而来，所以位图要注意保证清晰。

Android

都说Android碎片化严重，但它现在反而比iOS好处理。因为如今的Android屏幕逻辑像素已经趋于统一了：360x640，就看你设成几倍了。想以xhdpi为准，就把DPI设成72x2=144。想以xxhdpi为准，就把DPI设成72x3=216。

对于那些比较老的低端机，宽度是480px的那批，画面确实会小一些，显示内容会更少。稍微留意一下，重要内容尽量保持在界面中上部分。

当然，这些机型不出一年就会被边缘化，基本淘汰。现在能运转的也是当作功能机在用，软件多了必卡无疑，用户体验无从谈起。不作考虑也是OK的。

Web

手机端网页就没有统一标准了，比较流行的做法是按照iPhone 5的尺寸来设计。倍率2，逻辑像素320x568。

这样的做法比较实在，倍率2的屏幕无论在iOS还是Android方面都是主流，而且又是2倍屏幕中逻辑像素最小的。所以图片的尺寸可以保持在较小的水平，页面加载速度快。当然，缺点就是在倍率3的设备上看，图片不是特别清晰。

如果追求图片质量，愿意牺牲加载速度，那么可以按照最大的屏幕来设计。也就是iPhone 6 plus的尺寸，倍率3，逻辑像素414x736。

总结

移动端的尺寸比PC端复杂，关键就在倍率。但也正因为倍率的存在，把大大小小的屏幕拉回到同一水平线，得以保证一套设计适应各种屏幕。站在这条水平线的角度看，会发现它很好理解。

在响应式项目中连接设计与开发

hi@victor42.work (Victor42) — Sun, 12 Apr 2015 00:18:00 +0000

[国外设计第82期]

优秀的网页项目，不会单靠好的设计或是开发就能成功——它也需要设计师与开发者的沟通与协作。

我看过相当多的设计师与开发者由于缺乏沟通而糟蹋了项目，结果导致关系恶化。我也见过很多初学的设计师和开发者，通过团队协作创造出惊人的结果。他们避开了潜在陷阱，及时发布项目，并且迅速迭代。这种协作不仅对项目有益——善于沟通协作的团队也是一个更快乐的团队。如果任务并没有如愿进行，也会有更少的误解与紧张。

设计与开发的协作，在响应式网页设计（RWD）项目中尤其重要。各团队如今都要应对大批设备。固定的、“像素精准”的设计，如今该让位于流动的百分比设计。而且，图片资源也需要为多种设备尺寸与分辨率进行优化。

简而言之：响应式设计带来更多变数，需要交付更多资源——这也会导致更多问题。我发现一些技巧，可以克服这些障碍。

1. 首先关注“最极端”的屏幕尺寸

如果对此存疑，可以根据网页的一般经验设定屏幕尺寸范围：iPhone尺寸和桌面浏览器展开。

尽管有些设计师直接“在浏览器中”创作，一开始就完全是流式布局。但多数设计师仍然从固定尺寸开始：选定一组屏幕宽高，以此绘制效果图。

但这提出几个问题：你对开发团队重视到何种程度？应该首先交付哪些高保真资源？由于技术限制需要先考虑哪种设备？

我一直都建议从最“极端”的用户设备入手——最小和最大的设备尺寸。如果对此存疑，我建议以此为2015年的网页用户标准：

320 x 568像素（iPhone 5竖屏）
1600 x 1000px（桌面浏览器展开）

注意：你的用户可能存在差异，所以要看数据分析来定义你的“极端情况”。

“为最小和最大的设备尺寸设计，以此为响应式设计项目的起点。”

先应对最小的屏幕尺寸，这会迫使你做出艰难的选择，选出设计中最重要的功能。大屏幕尺寸则让人从另一个方向思考：最多包含多少内容？文字段落是不是太宽不易阅读？下拉菜单元素需要额外留白吗，如果需要，多少才能避免给人脱节的感觉？最后，选定最小和最大屏幕，通常需要你思考至少两种输入方式——最小的屏幕基于触摸操作，最大屏幕则使用鼠标和键盘操作。

可能最重要的是，当你应对极端情况时，你是在同时处理两种尺寸。并非完全绘制出一种屏幕尺寸，而后去适应另一种。那样会引发设计与开发的冲突。

2. 在各个断点之间讨论内容布局

既然在静止线框图和排版上投入这么多，就千万要记住，响应式网页设计天生是流动的。这意味着众多网站用户体验到的，是你设计的“中间”状态。所以几乎每件设计，都需要考虑特定尺寸间必要的布局调整。比如当尺寸减小时，内容可能会收缩，图片减少为单列。

要避免主观臆断，认为开发团队能够或是应该实现那样的布局调整。尽早行动，先知会你的开发团队，避免他们陷入太深。对于特别复杂的布局变化，最好另外绘制一张线框图或效果图来说明。特殊性不太重要的情况，通过简单的讨论，或者用邮件描述这些变化就足够了。

3. 尽早制定资源图策略

很多响应式图片需要多套资源。我个人网站的主页头图，根据屏幕尺寸和分辨率不同，会从6张不同图片中选择一张呈现。

图片格式与尺寸，通常是设计师与开发者之间的障碍。你可以使用PNG、JPG、图标字体，或者用SVG实现更小的元素或图标。并没有哪个是正确答案：一切都取决于内容和可用的资源。但重要的是对某种格式达成一致，坚持使用它。而且随着网页项目的进行，你还可以创建一些常用图片尺寸。

不过对于如今的响应式设计，这只是刚开始。你要至少输出2套位图资源（JPG）：1套给普通显示器，一套给高分辨率显示器。高级的响应式图片技术，需要更多套资源适应不同屏幕尺寸。

避免到项目末尾再决定响应式图片格式。至少要有一套像素密度显示策略。看看srcset和Picturefill，来保证良好的跨浏览器支持。如果感觉太过了，就从简单入手。用srcset属性来更换一些图片元素，这是个好的开始。看它如何处理，然后由此展开。

4. 微观的思考，模块化的设计

我的响应式设计工作流程深受Brad Frost的Atomic Web Design和Jonathan Snook的SMACSS影响。两者的框架都依赖小型、可复用的组件，以此为基础打造强大的网站结构。

对于交付给开发的资料，我喜欢先专注于小型、可复用的组件。因为它们在不同设备上，通常表现出同样的体验和外观。这样的统一性有利于开发团队消化。另外，小组件通常更容易跨页面复用。所以如果你设计了一套有效的解决方案，之后再重复使用就非常简单了。

小组件通常在不同设备上表现出同样的体验和外观。这样的统一性有利于开发团队消化。

假设你在设计一个注册页面，有标题、大幅图片和表单。根据设备不同，这些元素可能会变换交错或是改变尺寸。起初，要同开发团队一起专注于注册表单的小细节。它看起来是怎样的？需要怎样的验证？相对鼠标键盘，触摸输入会使表单发生什么变化？

5. 从开发者那里获得视觉与用户体验的反馈

有些设计师把开发者阻挡在产品会议、可用性讨论和其他反馈机会之外。只有一个启动仪式，交付一些资源，和一点点其他东西。这是错误的。

要记住，经验丰富的开发者掌握大量知识。如果他们与产品接触了一段时间，他们可能也有独到见解。

前端开发者和设计师的技能通常是重叠的。越来越多的设计师自己写代码。开发者也在刻苦钻研快速原型设计、线框图和美术设计。响应式设计加剧了这项趋势。即使没有“设计师”的头衔，一名开发者也可以表达出强有力的设计见解。

我们得承认，角色与责任的独立仍然有其价值。但稍加融合便可显著改善最终产品。所以，在你的下个可用性测试中，请一位开发者加入来讨论最终产出吧。或者如果你在进行一场设计头脑风暴，或许应该邀请一些开发者。

合作很重要

所有这些技巧都需要规划和认同。由于注重产品发布与截止日期，这就难以做到。但设计与开发关系良好对任何网页项目，尤其响应式设计项目都是有益的。初期的小投资，会为你的团队带来指数级的回报。

原文链接

作者信息： Nick Schaden, Web Platform Lead at Pocket At Pocket, Nick oversees development and design initiatives on Pocket’s web app, Chrome packaged app, and marketing web sites. He has extensive experience introducing and integrating responsive web design, both at Pocket and previously at Animoto, a video startup based in New York. Prior to Pocket and Animoto, Nick worked in technology at Gucci and Goldman Sachs. He loves electronic music and 80s action movies. Follow me on Twitter

Apple Watch设计入门

hi@victor42.work (Victor42) — Sun, 05 Apr 2015 12:32:00 +0000

[国外设计第81期]

这个月晚些时候，众望所归的Apple Watch会带来成千上万的手表应用，冲击应用市场，吸引你的注意。由于屏幕尺寸更小，又始终戴在手腕上，交互方式也有所不同。要在Apple Watch上创造一个美观、舒适的体验，需要新的设计方式。本文将带你入门。

本文中，你将学习如何通过一些基础理论和准则，为Apple Watch设计应用，借此初探可穿戴设备设计。

应用结构

Apple Watch应用有3部分：WatchKit App、Glance界面和通知。每种都有不同的目的，面临不同的设计挑战。

WatchKit App

WatchKit App是查看应用数据或与之交互的主要手段。它通常从手表主屏进入，但也可以从Glance或通知进入。

很重要的一点，要知道WatchKit App只有两种类型的导航——层级式和页面式。虽然iOS应用可以编写出自定义导航，但WatchKit App限制很严格，目前并不支持。

层级式非常适合相对复杂的应用，类似很多现存iPhone应用，用户在其中需要进行一系列的选择，然后到达结束界面。牢记Apple预期用户在10秒内突击使用手表，所以别在手表上照搬现成应用，应该将它升华。

页面式通过横向滑动，让用户在多个页面间穿梭。如果各页数据并不依赖其他页面，这种导航方式更佳。

开始设计时，想清楚什么数据对用户最重要，相互关系如何，然后选择最适于体现数据的导航结构。

Glance

Glance是一系列可浏览的内容，基于时间或环境，穿戴者从最喜欢的应用中挑选而出。在Apple Watch上上滑可以触发Glance，然后可以水平滑动。Glance不是必须的，所以并非所有应用都具有，或者需要。

Glance被限制在无法滚动的一屏中，所以你得把最有用、最重要的信息展现在屏幕上，可以通过颜色、不同字号和图片来在视觉上区别你的Glance。在Glance上点击任何地方，会打开手表应用。所以要避免在其中包含按钮、滑块和菜单这样的操作项。

最后，Glance基于一些模版。所以你的设计要选择一种最能体现数据意义的形式。Apple提供了一系列模版，适用于上半屏和下半屏。

通知

Apple Watch应用有两种通知状态，分别叫做short-look和long-look界面。用户首次收到通知时，short-look通知会出现，持续较短一段时间。用户可以降低手腕忽略通知，也可以抬起手腕或点击short-look通知，进入long-look查看详细信息和功能。

由于手表始终戴在手腕上，你得对通知有所限制，只推送最有用的信息。如果你持续被不重要的消息打断，那是很令人厌烦的。最好的通知会使用用户的环境信息——比如位置、时间或活动——来提供实时、相关的信息。

short-look界面包含应用图标、应用名称和通知的标题。由于标题是你唯一能控制的东西，它需要为通知的内容提供简短的提示。

所有应用的long-look界面结构都是一样的。顶部显示应用图标和名称（也可以自定义这一条的颜色），底部是忽略按钮。中间是定制内容，至多4个自定义操作按钮。

交互方式

除了手机上那些我们熟悉的日常手势——点击和滑动，Apple Watch提供了两种新的交互方式：

滚轮

应用可以通过滚轮来滚动，不会像手指滑动那样挡住屏幕。滚轮尤其适用于长页面的滚动。

按压

Apple Watch的屏幕可以区分点击和按压。就像鼠标的右键单击一样，按下可以显示当前界面的菜单，其中包含至多4项相关内容。

双指缩放这样的多点触控手势在手表上是没有的。

布局

Apple Watch有两种尺寸——33mm和43mm。小屏幕尺寸是340x272像素，大屏幕是390x312像素。手表的一大特点是retina屏，就像iPhone那样，你要提供两倍分辨率大小的图片。

你不必提供不同尺寸的图片（虽然可以这么做），也不必设计两套不同的布局。因为Apple使用相对尺寸和距离，图片和组件会缩放充满可用空间。

设计应用时，Apple建议用黑色背景来配合外框。相比浅色，深色与亮色的搭配更好。由于外框提供了额外的边距，占满可用空间、按满屏宽度设计非常重要。

至于按钮，Apple也建议满屏宽。不过，如果你有并列按钮，应该用图标代替文字。一行中不建议包含3个及以上按钮，因为屏幕太小。同一屏中的按钮应该高度相同，以保持视觉一致性。

颜色

由于是在深色背景上设计，你得在应用中使用明亮、高对比度的颜色。颜色也可以作为你应用品牌的一部分。

每个应用可以定义一个“主色”，它会显示在状态栏的标题和通知的应用名称上。还可以自定义long-look通知的顶栏颜色。

动画

美观、细致的动画可以提升用户体验，使应用更迷人、更具诱惑力，令人过目不忘。设计手表上的动画时，要确保它足够迅速，而且确有其目的。如果动画阻滞了用户获取他们所需的信息，则会损害用户体验。

在Apple Watch上创作动画时，你可不能给工程师一张GIF图，然后让他动态实现。你得提供每一帧的独立静态图片，来制作更快速和流畅的动画集成。最佳方式是将你的动画文件导入After Effects或Photoshop，提取出独立的每一帧。

Context menu至多显示4个操作项，它表现为一个带有标签的圆形图片。点击某个操作项或屏幕上的任意位置，菜单收起。设计Context menu时无需考虑颜色。就像iOS应用的标签栏图标一样，Context menu的图标是模版内置图片，颜色仅仅定义了图标的形状。

对于Context menu，你得给每个图标提供两种大小的图片。在42mm的手表上，图标的线宽通常比38mm版多1像素。

字体

Apple开发了一套无衬线字体，叫做San Francisco，为Apple Watch的易读性做过专门处理，包含23种变化。虽然你也可以用自定义字体，Apple建议使用内置文字样式，因为它们是专为小屏幕设计的。

使用Apple系统字体的另一项好处，是标签过长时文字会自动缩放。随着字号增大，字间距会减少。如果要指定字号，那么San Francisco字体建议使用19点或更小字号。San Francisco的Display字体应该用于20点或更大的字号。

应用图标

像iOS主屏图标一样，Apple Watch也需要一个应用图标。和iPhone不同，iPhone以方形显示应用图标和名称，Apple Watch是圆的，不包含标签。这就使你的图标必须比iOS应用图标更容易辨识和熟悉，同时表达出它的作用。

为这么小的屏幕设计应用图标时，简洁为先。在炫目的应用图标海洋中，图标是用户打开应用前首先看到的东西，所以你得通过优美的图标设计留下良好的第一印象。

设计不同尺寸的图标，来适配两种手表尺寸和各个展现图标的界面。系统会自动为图标加上圆形蒙版，所以图标应该依据Apple提供的指南做成方形图片。

可以下载这个好用的Apple Watch图标模版来生成图标。

基础之外

Apple Watch为用户提供了一种不唐突的数据获取方式，这对他们至关重要。通过理解一款应用的结构、交互方式和最佳设计原则，我们可以在Apple Watch上打造更加美观、讨人喜爱的体验。

要深入学习入门，请看Apple Watch人机交互指南，并且下载Apple Watch设计资源，里面有一系列模型、参考、模版和字体。

关于讨人喜爱的可穿戴设备体验设计，更多细节、窍门和资源请看为可穿戴设备而设计。这是一门免费课程，让你一步一步经历Apple Watch的应用设计。

原文链接

作者信息： Kenny Chen Kenny Chen is a UX Designer from Los Angeles passionate about creating better experiences through thoughtful design. He curates UX Design Weekly, a hand-picked list of the best user experience design links each week. Follow him on Twitter at @kennycheny.

交互设计中的5项视觉指导原则

hi@victor42.work (Victor42) — Sun, 29 Mar 2015 22:49:00 +0000

[国外设计第80期]

来自UXPin的Jerry Cao，通过本文向我们解释了如何保持视觉与交互的协调。

我不想贬低文字的重要性，但也不想忽视视觉。两者是同等重要的交互设计元素。文字就是交互，但那些视觉元素（比如图标、菜单、图像等）才是用户实际上操作的东西。虽然有些可用性专家会提及Craigslist甚至Amazon，作为丑陋但可用（而且受欢迎）的网站案例。但毫无疑问，美感总会有所帮助。

情感是用户体验的关键：视觉设计优秀的网站能使用户放松，提升可信度和易用性。考虑到多数用户注意力短暂，认知往往成为事实：如果视觉做得很糟糕，用户不会费神去深入研究你的交互设计。

让我们来细说视觉的重要性，因为它关系到交互，保证了清晰的方向指引和一致性。

01. 尊重视觉的主导地位

我们从案例展示开始。看看下面的文字：

很显然，我们都知道“黄色”一词所指的颜色。但当多数人看到它时，他们理解到的可能只有红色。文字的外观取代了它的真正含义。

信息图专家David McCandless表明，我们大部分的脑力资源都花在了视觉上。

作为人类，视觉是我们的主要感观。但是其他动物更多依赖听觉与嗅觉，我们是视觉主导的生物。正如数据记者兼信息图专家David McCandless在一场引人入胜的TED演讲中提到的，我们会调动全部感观，但多数的脑力都花在了视觉上——虽然我们很难察觉。他用计算机进行了类比……

“视觉是感观中最迅速的。它和计算机网络的速度相同。之后是触觉，相当于一个U盘的速度。然后才是听觉与嗅觉，约等于硬盘的速度。

“后面才是可怜的味觉，运算速度几乎近似便携式计算器。角落里那个小方块，百分之0.7，那就是我们实际了解的量。所以你的很多感观——绝大多数感观都是视觉上的，它蜂拥而来——你却浑然不觉。”

视觉影响行为，也影响体验，Stephen P. Anderson说。

但是对于交互设计这意味着什么？它意味着你对产品做出的每一项视觉上的决策，都对交互有极大的影响，即使是在不知不觉间。

产品设计顾问Stephen P. Anderson指出，视觉影响的不只是体验，也会影响用户的行为。

这就是说好的视觉设计可以提升销量，提高注册量和转化率，激发某些特定的用户行为。看看下面这两个表单：

表单A

表单B

记住，交互设计的目标之一就是让用户尽可能少地思考。你认为哪个更有利于销售？哪个视觉上看更舒服？

第一例中，那密集恐惧症般的间距和过量的文字，让用户望而却步。第二例则色彩丰富、优美，看起来更简洁（尽管用户都得输入这些信息）。

由于交互设计就是要创造人们想用的东西，有吸引力的事物更激发人的渴求，因此更能发挥作用。

图片和导航在这个在线香料商店中相互协调。

不过除了吸引人的交互，优美的设计也提供了一层额外的理解。看看上面这个Old Town Spice Shop案例，你会发现这个网站的橱柜式布局立刻暗示了这家公司的意图和香料产品。

尽管你可能会质疑，用户先看到橱柜还是“Spices”和“Extracts”这些文字。毫无疑问的是，两者相互协调。

02. 提供清晰的方向与指引

用户不会漫无目的浏览网站。人们通常都有个大体概念他们要去哪，但还需要一些指引和线索。他们会在脑海中创建地图，既然我们刚刚提到人是视觉生物，那么就需要一些视觉路标来指路。

某种程度而言，你的导航要像GPS那样。用户需要了解他们当前位置，哪些路线是可行的，下一步该怎么做。

面包屑导航是满足上述3项需求的最直接的方式。就像下面的Newegg 这种常见的UI模式，这种方式给用户留下了清晰的视觉踪迹，来追踪他们的访问过程。

但面包屑导航应该作为备选方式，因为对于页面间的点击跳转，它们在视觉上并不直观。它们多用于层级复杂的网站，比如电商网站，简单的网站不需要它。如果对此持疑，回顾你的网站地图，看看加入面包屑导航能不能提升易用性，或者只是添乱。

面包屑导航、链接——还有菜单、搜索框和可点击的图标——都是基于视觉的手段，让你建立方向和指引。谈到主导航时，你需要让它给人留下强烈的视觉印象。

如果要学习更多导航的最佳实践，请看我们的免费电子书Web UI Design Best Practices，还有这本5-part series，讲的是交互设计中对导航的简化。

03. 确保视觉统一

一致性在交互设计的所有方面都非常重要，不只是视觉。无论如何，视觉上的不一致是非常醒目的（看看世上最糟糕的网站），见证一下设计的地狱。

有些事是不该做的。

一致性展现了网站在设计和排列方面的逻辑，创造更加令人愉悦的体验（我们都知道，开心的用户是会回头的）。

我们之前提过，人们更喜欢统一是因为它增加了可预知性（降低学习成本）。如果你的界面容易学习，它也会更容易使用。人们不喜欢令人不快的惊喜，正如惊讶最小化原则中所说：

不一致引发的问题，是它增加了“认知负荷”。Nielson Norman Group的用户体验专家，Kathryn Whitenton，在热议博文中解释过，认知负荷是用户在使用产品时需要思考的量。

一致性展现了网站在设计和排列方面的逻辑。

每项不一致都迫使用户停下脚步，来处理此处不同所表达的含义，它为何不同，又是如何影响他们的行为。因此，不一致的地方越少，交互越顺畅，体验越好。不一致的现象几乎无处不在：UX Matters的Michael Zuschlag有一张有用的图表。

例如，单选按钮在界面某部分只允许单选，那么它在其他部分就不应该多选。文案也该如此，既然在某个部分用了“保存”作为名称，在其他部分里就不该称作“储存”。如果某张图片触发了一个弹窗，那它在别处就不该打开新窗口。时刻要问自己，“我希望用户如何操作？”

04. 将UI设计模式作为基准

UI设计模式，可以理解为特定情况的最佳设计实践。既然用户已经熟悉各种设计模式，使用它们降低了界面的学习曲线。常见的UI模式包括旋转木马、相关链接、幻灯片……还有更多（可以从这个网站看到，它致力于给它们分门别类）。

Netflix用了相关内容模式，来帮你找到其他可能感兴趣的节目。

比如，Netflix使用了“相关内容”UI模式，帮助用户找到其他可能感兴趣的电影或节目。由于内容是智能生成的，用户交互感觉更像是有人在推荐有用的内容。这并不是一项开创性的设计，但它是个快速有效的解决方案，让你的界面鲜活起来。

当然，UI模式并非即插即用的模块，你还是得基于网站的外观与感觉为它们特殊定制。

要为产品寻找正确的模式，你可以查看各种模式库，通过它们的分类来浏览各种模式，比如“导航”或“输入框”。今年，我们发布了两个单独的UI模式系列（还有财富榜500强企业的使用案例分析）：2014网页UI设计模式和2014移动UI设计模式。

05. 通过风格指南创建一致性

虽然UI模式有助于提升熟悉感，风格指南才能确保全站统一。

风格指南是一部手册，列出了产品的特殊偏好，这些部分很难记忆——比如全站内容的尺寸和字体、主导航的主色与辅助色的颜色梯度、按钮点击状态的表现，等等。

来这里www.yelp.co.uk/styleguide看看Yelp的风格指南。

在UXPin，更新网站时我们会创建风格指南。这能帮助我们估计出额外的工作量，因为我们可以把带有技术细节的截图添加到公司内部wiki中。正如我们在从风格指南到效果图中描述的，这种“拼拼凑凑”的方法对于简易的风格指南非常有效，可以分享给整个公司。

我们在网页UI设计最佳实践中充分讨论了风格指南，包括如何制定、需要包含什么。要了解关于风格指南的更多案例，请看以下几项绝佳资源：

要深入学习交互设计中的一致性，请看这篇全领域创建用户体验一致性，还有这篇系统、平台和现实世界的统一。

精华总结

人们上网时，他们说自己在“看”网站，而不是与它“互动”，尽管后者更准确。我们严重依赖视觉，视觉引导我们建立观念、解决问题，我们所相信的会引导我们的行为。由于交互设计如此贴近用户体验，通过视觉打造最佳的用户体验，虽然间接，但确信无疑促成了更好的交互。

要深入学习，可以下载这本电子书Interaction Design Best Practices: Words, Visuals, Space。视觉案例研究包含了30多家公司，其中有Google、AirBnB、Facebook、Yahoo。还有一些专家的建议，比如Stephen P. Anderson、Jared Spool等等。

原文链接

作者信息： Jerry Cao Jerry Cao is a content strategist at UXPin — the wireframing and prototyping app — where he develops in-app and online content for the wireframing and prototyping platform. To learn how to use mockups of all types and fidelities, check out The Guide to Mockups.

平板手机对移动端用户体验的影响

hi@victor42.work (Victor42) — Sun, 22 Mar 2015 11:55:00 +0000

[国外设计第79期]

还记得那些小手机大行其道的日子吗？

已经一去不复返了。

大屏智能手机已经存在了很长时间，毫无衰退的趋势。如今正是时候，回顾一下我们为移动端设计的方式，思考新一代移动设备，尤其是平板手机，给用户交互带来的变化。

平板手机是什么？

这个词（Phablet）顾名思义：手机（phone）+平板（tablet）=平板手机（phablet）。

这些手机的尺寸超出我们的习惯认知，但又不足以被称为平板。准确的说，这些设备的屏幕尺寸通常介于5英寸和6.9英寸之间（127到180毫米）。作为对照，想一想iPhone 5s屏幕对角线是4英寸。

平板手机与普通智能机的区别就是屏幕尺寸。其他方面与普通智能机和平板是一样的。

平板手机并不新奇，虽然直到最新的iPhone 6 Plus发布前，很多人都忽视它们的存在。不过事实是，Samsung早在2011年就发布了5.3英寸的Galaxy Note，“开辟了”平板手机市场。

为什么？

研究显示，人们在移动设备上比从前消费了更多的视觉内容。手机的主要功能，通话，使用率有所下降。记住这点，就不会太惊讶于平板手机份额在2018年以前都会以36%的速度上涨，同时其他智能手机每年只上涨4%，数据来自Statista。

平板手机的交互

平板手机非常酷，多数消费者都愿意为这些设备丢弃原有智能机。但这些消费者甚至都不完全确定，平板手机用起来是否比普通智能机舒服。因为屏幕在变大，我们的手和手指却没有变化。所以我们要调整平板手机的交互方式。

可能你已经很熟悉这张拇指热区图，它描绘了人们持握智能手机的方式，将屏幕上难以触及的区域视觉化了。

Steven Hoober在他2011年的《Designing Mobile Interfaces》一书中首次使用术语“拇指热区”，将它描述为“单手使用时最舒适的触摸区域”。这项陈述是基于1333款智能手机的使用观察分析，它显示了49%的用户使用单手持握手机，这么做就要依赖大拇指来操作。这也出自这项研究。

36%的用户用支架支撑手机，用拇指或其他手指触摸屏幕。
15%的用户双手持握手机，其中90%竖屏持握，只有10%横屏持握。

但是在平板手机上会有怎样的变化呢？用户会试着伸长手指，越过屏幕点击，还是改变握法？

根据Steven Hoober最近发起的研究，“人们会用上另一只手，而且会频繁换手，也频繁更换握手机的姿势。”这指的是各种智能手机，包括平板手机。

不过，我们看看不同屏幕尺寸上拇指热区的自然变化，很明显用户不会单手持握试图触达屏幕每个角落，这是自我折磨。假定他们只会改变和调整持握姿势。记住这点，我们就知道用户不会困扰于大的屏幕尺寸，他们会改变姿势来持握，并舒服地与平板手机进行交互。

这似乎是巨大的解脱，但是要考虑到很多用户使用平板手机时在进行多项任务，单手持握仍然是必要的。理想情况下，应该明智地把移动界面设计成主操作项位于拇指热区中。这样用户甚至不必切换持握姿势。

不过在现实中，这招并非时刻奏效。

如何为平板手机而设计

Samsung Galaxy Note多少算是平板手机市场的开山鼻祖，但它对改善交互的唯一帮助就是触屏笔。它能起到一定作用，不过触屏笔只能作为补充工具，不是每个人都喜欢。

在这个意义上，Apple似乎为用户的舒适度多考虑了一些。iPhone 6 Plus一发布，它们同时发布了操作系统级的“可达性”功能：轻触两下home键，iOS会把屏幕顶部下拉至用户拇指热区。这个功能当然不自然，它增加了完成任务的时间，也增加了操作步骤。但它仍然是一个其他平板手机用户所没有的选项。

Luke Wroblewski提供了另一个解决方案，将最重要的操作项置于屏幕底部。根据重要性，按从下到上的顺序排列这些操作项。我觉得这对于iOS开发者是个好办法，但对于很多Google Nexus 6这种底部有操作条的Android平板手机，可能不合适，操作条可能会与应用级的操作项起冲突。

结尾的思考

平板手机绝对重塑了我们消费数字内容的方式，影响了移动端的设计。我们需要更多确切的使用数据与相关研究，来为用户体验设计决策打基础，让大屏交互和小屏一样舒服。对于用户体验专员，真正的挑战是通过最自然、最少痛苦的交互方式，突显平板手机的长处。

原文链接

作者信息： Armen Ghazarian I am a UX consultant from Armenia with a big passion for sleek and usable digital products. You can always get in touch with me @armen_ghazaryan and Google+ and Website.

跨平台移动应用的延续性

hi@victor42.work (Victor42) — Sun, 15 Mar 2015 19:52:00 +0000

[国外设计第78期]

设计一款适配多平台的移动应用极具挑战。怎么知道何时采用系统原生控件、自定义，或是混合使用？在iOS和Android版StumbleUpon的改版中，用户体验团队采取了混合的方式，调整了原生的设计模式，创造独特、简洁的界面。最终打造了更快捷、更直观的体验，促进了用户的参与。

每个产品的设计流程都该如此，一切源于共鸣。

理解用户

要理解用户所想所做，什么能刺激他们，痛点在哪里，你得从他们的角度考虑。这使你与用户的渴望和需求协调一致，运用你所了解的，来充实每一项设计决策。向真实用户学习有助于磨练直觉，激发共鸣。

对于每个新功能，我们都从收集灵感开始，然后画出各处关键交互，直到方向正确。我们不仅依靠内在本能和设计知识：还通过用户调研和当前数据来丰富并修正我们的决策。

这个app体系重在无穷无尽的娱乐信息。于是我们不断自我挑战，寻找一种能让我们突显于众多竞品的设计方式。StumbleUpon的妙处在于，它揭示了互联网最棒的一面，给用户带来高质量内容，他们甚至都不知道这就是自己要找的。我们试图运用设计来诠释这种意外的发现。

向真实用户学习有助于磨练直觉，激发共鸣。

定下设计目标

在iOS和Android的改版中，我们给自己定下几个目标：

建立跨平台的统一性
满足当前的用户群
提升整体体验，保持用户活跃

2014年，我们进行改版设计的过程中，Google提出了material design风格。我们设计新版iOS StumbleUpon时，仔细研究了material，考虑了一些能在两个平台通用的方式。设计Android版时，我们也吸收了material的美学与交互，打造更加优雅精良的体验。

我们在多个界面中整合了Google的卡片式设计，同时也保持了许多iOS的原生图标和界面样式。我们决定在两个app中使用相似的图标设计，但是根据各自的平台调整了风格。在iOS上坚持使用轮廓式、中空的图标，在Android上给图标加粗。

当我们开始改版Android版时，我们进行了一次视觉评审，详细列举了手机和平板的体验，用以理解大方向。全局纵览一套生态系统，有助于找出有待提升的部分，突出了平台间的差异，让我们专注于设计。

然后，我们开始将UI模式标准化，来配合Google的material标准。App局部已经向material标准看齐了，其他还需要调整。我们还发现几个案例，证明动效可以展现细节交互和过渡效果。

关注这些问题，使我们提升了StumbleUpon的核心体验。我们迎合material界面元素，丢弃了拟物的装饰。更粗的字体和全屏图片，帮助我们丰富了环境信息和数据，提升了Stumbling的预览体验。引入悬浮按钮，突出了从前易忽略的关键操作项。在整个app中融入悬浮卡片，不仅简化了界面，也为Android用户创造了熟悉的环境。

除了在iOS和Android上都使用了卡片风格，我们还通过相同的配色、品牌元素和Stumbling核心功能创造一致性。在整个设计过程中，从静态图片到交互原型，再到最终成品，我们都牢记界面元素之间的相互作用、位置和过渡效果。

在app的特有风格和两大平台的核心规范中寻求平衡，使app的视觉与功能结构更加协调。同时接受material和Apple的设计规范，让我们打造了有亲和力的体验，实用、愉悦、有意义。

两者的改版都暗藏着风险。一方面，只用平台特有的控件，可以创造出顺畅的体验。但过于依赖一个平台的设计规范——比如用iOS标准来设计Android平板app——就使其他平台上的体验产生割裂感。我们最不希望的事情，就是在界面上创作过头，疏远了现有用户，让app既难学又难用。运用设计思维来规避这些潜在问题，对我们的设计流程至关重要。

StumbleUpon用户体验团队成员：Asher Blumberg, Amy Luo, Michael Spiegel, Jennifer Fleming 和 Matthew Spangenberg

乐于持续优化创意，能使优秀的产品走向伟大。

验证我们的设计哲学

在StumbleUpon，我们有灵活的工作流程——通过快速迭代的设计与原型来验证我们的方案。对不同方案进行A/B测试，看哪个效果最佳。所以我们会持续优化设计，即使在第一版完成之后。

我们不仅制作可点击的效果图，也为它们增添动画效果，来展示界面之间的过渡，为交互增加节奏和动感。通过视觉化展现这些自定义过渡效果，我们从开发人员那边得到了重要反馈，因为有些动画的实现太耗时，会拖慢我们为期2周的设计冲刺。

尽早从工程师、设计同僚、产品经理和利益相关者那里得到反馈，有助于建立和提升创意的水准，推动产品前进。乐于持续优化创意，能使优秀的产品走向伟大。

原文链接

作者信息： Asher Blumberg, UX Mobile Designer at StumbleUpon Asher is a multidisciplinary designer obsessed with creating compelling and functional experiences across mobile and web.

2015网页摄影图的流行趋势

hi@victor42.work (Victor42) — Sun, 08 Mar 2015 13:11:00 +0000

[国外设计第77期]

提到设计，运用摄影图是其中一项基本手段，每件设计都或多或少都会用到。本文要剖析的并非摄影图本身，而是网页设计中运用和掌控摄影图的流行趋势。

其中有些显而易见、广为人知，其他则频频使用，却鲜有提及。当我们将同类趋势收集整理成套，对此概念的认识则会超乎我们想象。而且，像这样把各种趋势对比着看，我们似乎会发现当下采用的方法并非最佳，可以找到更好的替代方案。

1. 巨幅背景图

首先考虑一项最盛行的趋势。以下是一系列运用巨大照片作为背景图的网站。毫不夸张地说，这是一种快被消灭掉的方式。但这并不是说就该禁止使用。每种趋势都有它的意义。撰写这个章节时，我的任务就是寻找那些没有把这种风格作为权宜之计的网站。相反，我找的网站都带着目的运用它，背景摄影图在传达网站信息方面，扮演着重要角色。浏览以下案例时请牢记这一点。

2. 背景搭配前景内容

有的设计师聪明地将摄影图同时作为背景和前景元素，对巨幅背景图做的这种变通深得我心。在这些设计中，照片以装饰性的形式填满整个背景。同时突显了照片中的某些元素。这通常是通过纵深来实现的，产品或前景元素被置于焦点区域。这种视觉区域的混合，使照片具备一种格调，同时内容也意图鲜明。这种颇具挑战的方式，需要对照片有所规划和协调，以下是我最喜欢的一些案例。

3. 单色照片

对设计师而言，把照片“PS”一下来适应设计并不新奇。这个系列采用同一种特定方式，将这个概念发挥到极致。设计师将照片转为单色，尤其是非黑白的方式。尽管多数时候，这或许是风格上的决策，但我认为不止于此。颜色可以确定基调，传达出微妙的信息。通过在照片中运用单色调，设计师能反映出单一的情感。蓝色使人感到安全、稳固和协同。红色使人感觉兴奋、鲜活、充满能量，诸如此类。通过将照片转为单色风格，它呈现出一种新的传达方式。

4. 柔和色照片

这个系列的案例风格可能极度盛行，但老实说，它确实很时尚，而且有点使用过度。但是当我挖掘这类风格的案例时，我发现它并没有我们想象中那么流行。这些网站基于色调柔和的照片。更明确地说，这些照片都有一种褪色、近乎复古的风格。最常见的是搭配白色文字，置于照片上方（下面5个案例中都有）。这种方式与潮流风有密切关联，去年非常流行。最后，我很惊奇地发现，在我找到的这些案例中，几乎每个都利用了装饰性字体，置于照片之上。

5. 营造基调和氛围的照片

作为老师，我发现有些事总要我一遍遍地指导学生。其中之一就有关照片的选用。通常设计师会使用装饰性照片，不会直接传达出任何网站相关信息。比如，第一个案例是一组太空摄影集。它表面上并没有表达出任何品牌相关内容。在从前，我的观念中对这类装饰性照片的选用相当严格。随着对于照片运用的深入探索，这个观念逐渐趋于缓和。这就是我喜爱剖析趋势的原因，这样我们可以打破主观臆断，为我们的设计发现崭新的途径。这些案例证明，营造基调和氛围的装饰性照片，对设计的成功非常有意义。钻研这些案例，看看你是否同意。

6. 整理术

最后，来看一组在照片中运用了整理术的网站。整理术是将物体平行或者90度排列，来创造一种条理。这种方式非常小众和独特，设计师们很少使用这种风格。同样的，这种风格通常和潮流风设计有关，但不止于此。这些照片反映出内容之外、照片本身的含义（这当然是有意义的）。它们暗示着照片背后的品质，透露出一丝秩序、方法和条理。这些是好的品质，尤其是用来指代设计师和机构。

结论

摄影图片是设计师最天然的工具。通过研究这些使用方式和多种多样的风格，希望你能发现新鲜的灵感。总而言之，我希望这个简陋的案例集能帮你发现新鲜创意，为你的工作带来启迪和挑战。

原文链接

用户体验简史

hi@victor42.work (Victor42) — Sun, 01 Mar 2015 13:34:00 +0000

[国外设计第76期]

回想你上次在餐馆用餐的情形。那里提供了什么菜肴？

是什么促使你选择那家餐馆？第一印象如何？有没有等位？菜单是如何安排的？上菜够快吗？口味怎样？客户服务如何？结账流程顺畅吗？下次会不会再去？

这些问题的答案，包括兴致的高低，都是在围绕这家餐馆的用户体验（UX）。

不过，当人们使用这个术语时，他们通常指数码科技产品或服务的体验。这其中暗示着用户体验是被设计过的，而且至少有被进一步设计的可能。

如今，用户体验已经成长为一门重要的设计学科，而且还在继续成长和演化。在它还是个新概念时，它的学术史可以一路追溯回文艺复兴时期——甚至更早。

人们争论不休的用户体验设计，会将我们带向何方。要思考这一点，先回顾它曲折进化史上的关键事件很有帮助。

大约1430年：莱昂纳多·达芬奇的“厨房噩梦”

Michael Gelb写过一本很棒的书《How to Think like Leonardo da Vinci》，里面详细描述了米兰公爵委托达芬奇设计高端宴会厨房的故事。这位大师带着他的创造天赋接受了这份工作。达芬奇设计并采用了传送带，向宴会筹备者输送食材，这被认为是这项技术的首次运用（早于工业革命几百年）。他可能还创造了首个喷灌系统，作为一种保护措施。

不过滑稽的是，传送带对筹备者来说运转太不规律。更糟的是，喷灌系统爆炸了，毁掉了一些食材。

虽然这个特例以不幸告终，它确实是关于用户体验设计最早的故事。

20世纪早期：泰勒主义和工业革命

Frederick Winslow Taylor，一名机械工程师，也是最早的业务顾问之一。他写了《The Principles of Scientific Management》，其中对工程效率的研究对业界产生广泛影响。和亨利福特开创性的批量生产技术一道，Taylor和他的支持者们，为工人和工具之间的交互描绘了早期图景。

1948年：Toyota和制造系统的人性化

和福特汽车一样，Toyota重视工程和生产中的效率，它也在探索员工的投入。他们极其重视装配工人的价值——几乎和所用的科技摆在同等地位。Toyota的巨大成功，将人们的注意力引向了人机交互技术。

1955年：Dreyfuss的人本设计

Henry Dreyfuss，一名美国工业设计师，写下了经典的《Designing for People》。

他在其中写到：

如果产品和人的关联中充斥着冲突，它的工业设计就是失败的。

换言之，如果人们在与产品接触过程中感到安全、舒适、渴望购买、更加高效，或者仅仅是更开心，那么设计就是成功的。

随着产品和用户关联点激增，这些原则，包括我们如今再三呼吁的取悦用户，都变得更加关系重大。

1966年：迪士尼和欢乐的代名词

在早期的通告中，Walt Disney把如今的Disney World项目描述成“永不停步，要成为运用最新科技改善人们生活的地方”。他富于想象力地使用科技来给人们带来欢乐，持续鼓舞着用户体验设计师们。

20世纪70年代：PARC和个人电脑的设计

著名的Xerox研究院，PARC，为计算机赋予了形式与功能，供大众使用。Bob Taylor，一名经验丰富的心理学家兼工程师，领导他的团队打造了许多个人电脑交互史上的不朽经典，包括图形用户界面（GUI）和鼠标。

1995年：Don Norman，第一位用户体验专家

就职业而言，Don Norman是一位电子工程师和认知科学家。他加入Apple，为它即将到来的以用户为中心的产品，提供研究与设计上的帮助。他让人们称他为他“用户体验设计师”，这是该术语作为职位头衔的首次使用。

Don Norman也撰写了他的经典著作，《日常物品的设计》。将易用性和功能性的设计置于美学之上。至今仍对设计师有巨大影响。

2007年：iPhone

2007年，史蒂夫·乔布斯在MacWorld揭开了iPhone的面纱，把它称作一款“飞跃式产品”，并承诺它远比市场上任何智能手机都易于使用。它不仅履行了承诺，还永远地改变了移动设备的面貌，让Apple飞升至今天的地位，成为全世界最成功的公司之一。

事实如此，第一代iPhone的精髓，在于先进硬件和软件的融合。通过革命性的电容屏实现了连接，使其他手机的物理按键显得陈旧过时。简单的说，它提供了优于同时期所有其他手机的用户体验。

这在不经意间导致了如今业界对用户体验的关注。如果Apple对优秀用户体验的重视，为它们赢得了市场的胜利和决定性地位，其他人当然也想跟进。

用户体验的未来

用户体验进化史上的每个重要的里程碑，都包含着科技与人类的互动。随着科技和互联网继续融入我们的生活，我们就继续期待用户体验的进一步演化吧。它将激发出更多跨学科的专业技能方面的需求，包括用户调研、平面设计、客户倡导、软件开发等等。实际上，Indeed.com上有一项用户体验相关职位的研究显示，过去15天内发布了超过6000个岗位。

互联网不再局限于我们的笔记本和智能手机里了——可穿戴甚至可植入设备，将我们置于一个始终在线的状态。这就为用户体验专员提供了机会，来设计新的交互方式。超越形态的因素，直指最终目标——改善人们生活。

所以，无论你是达芬奇还是福特，Dreyfuss还是Disney，Taylor还是乔布斯，似乎还有很多机会，能为世界带来更好的用户体验。

参考

Buley, Leah. The User Experience Team of One: A Research and Design Survival Guide. Rosenfeld, 2013 Gelb, Michael. How to Think Like Leonardo da Vinci: Seven Steps to Genius Every Day. Dell, 2001. 达芬奇的厨房噩梦 Designing for People Walt Disney：世上第一个用户体验设计师

原文链接

AE环形进度条

hi@victor42.work (Victor42) — Tue, 10 Feb 2015 15:16:00 +0000

【补充：本效果证实有更简便的实现方法，详情请直接看末尾。不过本文的解法中用到的一些技巧还是很实用的，可以作为一种练习。】

我过去这一年才开始接触AE，确实是很有意思且实用的一门技能。AE入门挺简单，如果学过FLASH，上手会更快。其实任何复杂的UI动画，都是通过最基本的位移、旋转、缩放、透明度、颜色变化的组合来实现。网上这些基本技巧的学习资料非常丰富，比如我就是靠这个系列视频入门的。

不过，今天要分享给大家的这个环形进度条，制作起来需要花点心思。

思路

环形进度条是个挺特殊的动画，在旋转的基础上还要选择性地显示部分区域。似乎没有很直接的实现方式。

参考之前做过的CSS3环形进度条，感觉可行。它的实现方式，核心思想是把圆环分割成左右两个半圆。进度条的深绿色，事实上是背景色，不会动的。左右两个浅绿色半圆遮住进度条，先右后左依次旋转，露出下方的进度条。

至于圆怎么变成环，在上方盖一个小点的圆就行了。在AE中，还可以使用图层遮罩，这个我们稍后会讲。

其实AE的实现方式可以更好，能做出真正背景透明的环形进度条。但核心仍然是左右两个半圆分别旋转。原理请看下图。

把圆分成左半圆（红色）和右半圆（蓝色），限定两个半圆的显示区域在各自半边空间里。底下再加一层静止的右半圆（紫色）。详细的原理，我们边做边看。

左半圆、右半圆、背景半圆

首先把静止的素材准备好，也就是这3个半圆。

建立合成，随意选了个720p的尺寸。

画圆，尺寸设为400*400。

把圆的位置（不是形状图层的位置）设为0, 0，圆就准确定位在画布的中央。

在同一个形状图层中再画个矩形，宽高设为200*400，半个圆的大小。

矩形的位置设为-100,0，刚好能盖住左半边圆。没错，这个矩形就是用来裁剪半圆的。

点此处的添加，选择复合路径。

模式设置为相交。这个和PS和AI里的路径加减道理相同。

然后选中圆、矩形和复合路径，command/ctrl + G编组。这个组就是我们需要的半圆。

展开组，复制其中的矩形，粘贴到组外面来。

这个新矩形才是真正用来做遮罩的，可以理解为PS里的矢量蒙版。AE本身也有遮罩功能，但是只能应用在图层上，图层旋转，遮罩也跟着旋转。我们需要的效果是半圆旋转，遮罩层静止不动。半圆转到矩形外面的部分不可见。所以我们要再用一次复合路径。

添加——复合路径，模式仍然选择相交。这回是新矩形和组的相交。

可以试着把组旋转一下，超出矩形的部分确实看不见了。

旋转归位，给组的旋转属性加个关键帧，因为后面会用到。一层层点进来找实在太麻烦，如果有关键帧存在，按快捷键u就直接打开了。

现在我们可以开心地把这个图层命名为“左半圆”了。

command/ctrl + D复制图层，这个新图层是右半圆。把组外面的矩形位置设为100, 0，刚好盖住圆的右半边。但是什么也没显示出来，没错，因为我们只是把蒙版移到了右边，半圆的位置仍然在左边。

好多图层，是不是有点糊涂了？简单来说，组里的圆和矩形，用来产生一个静止的半圆。我们后面需要旋转的时候，转的就是这个半圆。组外面的矩形，则是矢量蒙版。左半圆的矢量蒙版盖住左边，右半圆的矢量蒙版盖住右边，拼起来刚好能显示完整的圆。

把右半圆再复制一个，改名为背景半圆，移到底层。把组内的矩形位置设为100, 0，圆完整了。

至此，动画所需的静止素材都准备好了。

制作旋转动画

现在要让半圆动起来。

多按几次快捷键u，之前展开的各种属性都收起来了，只剩有关键帧的旋转属性。注意，这并不是图层的旋转属性，而是每个图层内那个组（静止半圆）的旋转属性。

右半圆和背景半圆的旋转属性的关键帧可以去掉了。不过右半圆的旋转属性我们还会用到，先不要折叠起来，不然找起来很麻烦。

点击左半圆图层的这个小圆点，只显示当前图层。相当于PS里按alt点图层眼睛。

做一个最普通的旋转动画吧，旋转一周。

这步很重要。按alt点右半圆的旋转属性，下面多出一行，时间轴里出现了表达式。

接下来，把右半圆旋转属性的这个螺旋状图标，拖到左半圆的旋转属性上。表达式随之变化。（这里扯一句题外话，拖拽过程中可以试着在中途某个空白处松手，会看到一个很有爱的动画效果）

刚才我们做了什么呢？按alt点旋转属性，激活了它的表达式。把小螺旋拖动到左半圆的旋转属性上，会让右半圆的旋转属性始终同步，数值与左半圆保持一致。所以从现在起，任何时候我们旋转左半圆，右半圆都会跟着转。

现在我们可以关闭左半圆的单独显示。

为了能清晰地区分3个半圆，我们来填上不同的颜色。当然，填色没有实际用途，只是教学目的。

就按照思路里的示意图，左半圆填红色，右半圆蓝色，背景半圆紫色。

找到临界帧

可以试着播放一下看，现在的动画显然是不对的。左半圆怎么能一上来就显示？应该要在右半圆转完半圈之后才显示。背景半圆也是。

所以，我们要找到特定的一帧。在这帧之前，左半圆和背景半圆都必须是隐藏状态。

这个临界帧，就是右半圆刚刚转到180度或超出一点点的时候。

选中左半圆和背景半圆，把时间轴左端缩到临界帧的位置。现在它们不会在不该出现的时候现身了。

再播放一下，这回对了！

不过这么机械的匀速旋转绝对是拿不出手的。要让旋转的过程自然一点。点击这个波形图标，打开曲线编辑器。选中左半圆的旋转属性，编辑器中出现了一条直线。

选中直线，点击这个两端手柄的图标。直线变成了曲线，出现了两个手柄。

曲线编辑器这个功能很好理解。横轴是时间，纵轴是值的变化。曲线的平缓处，值的变化慢。曲线的陡峭处，值的变化快。

比如我们这里要做一个快速进入、再逐渐减速停止的动画，就应该把曲线调成这样。

这时候我们就需要重新找一遍临界帧了。还是那条原则，右半圆刚刚转到180度或超出一点点的时候。

添加遮罩

圆形进度条已经完成了，我们把它裁剪成环形。

选中所有图层，右键预合成。

3个图层变成了一个，这个有点像PS里的智能对象，或者FLASH里的影片剪辑。

command/ctrl + shift + N，创建遮罩。这里的遮罩就是我开头说的图层遮罩，AE自带的遮罩功能。

现在的遮罩是个矩形，盖住了整个画布。我们展开遮罩菜单，点遮罩路径。

上下左右4个值设置成图中数字，下面的钩打上，重设为圆形。

这4个数字是算出来的，目的是为了让遮罩变为圆形后，尺寸与位置刚好与圆形进度条重合。

然后我们勾上这个反向。圆不见了，因为遮罩现在变为只显示它外面的部分。

选中遮罩，command/ctrl + T（各位相当熟悉的快捷键）

按住command/ctrl + shift，以中心为原点缩放遮罩，把它稍稍缩小一点。圆环露出来了。

大功告成，这就是我要的~~滑板鞋~~进度条。

总结

教程洋洋洒洒写了这么长一段，大多都在解释思路与原理。其实整个制作过程非常简单。多来几遍，以后再碰到这样的需求，基本5分钟拿下。

当然，你也可以再偷懒一点。因为在文章末尾，我一定会把源文件放出来的。 →_→

传说中的源文件

我最后要提醒一下，由于我也是半桶水，不能保证这就是最佳的实现方法，只是能实现而已。我猜测，或许在我还没有研究过的路径动画中，藏着更简便的解法。

如果你有更好的方法，请不吝赐教。

【补充：马上就有朋友回复了，更简便的方法还不止一种。“径向擦除”和“修剪路径”，我试了下径向擦除，真是一步到位。有兴趣的朋友可以看看这篇文章中的圆形生长部分。】

移动端字体7准则

hi@victor42.work (Victor42) — Sun, 08 Feb 2015 00:13:00 +0000

[国外设计第75期]

可能你听过这说法，好的字体是隐形的，不过更准确来说，应该是好的字体让阅读行为毫不费力。

当视线掠过一行文字时，它是跳跃前进的，我们称之为扫视。你读的不是字母，甚至不是词语，而是文字某部分的影像，大脑会补上它预期的内容。如果超出大脑预料，它会促使眼睛回去核实假设十分正确。通过在字里行间创造平顺的视觉流动，好的字体极度减轻了眼睛的负担。

对任何字体工作者而言，在移动设备上要面临与生俱来的挑战：空间有限，环境光通常比较微弱。不过将已经用于web端的技巧稍加调整，我们就可以提升移动设备的易读性。

1. 留足空间

与普遍观点恰好相反，字体并非屏幕上弯弯曲曲的线条排列；它主要在于周围和相互间的空间。

字母本身对字体的影响，与构成它的空间相比，要小得多。

要理解这一点，了解字体从何而来很有帮助：字母o（还有b、c、p等等）中间的圆孔被称作“凹槽”。在最原始的印刷机上，铅字由金属雕刻而成，这些凹槽来自雕刻成型、排列在盘中的金属活字。第一个字体设计师所处理的模具，实际上并不能用于印刷。字母本身对字体的影响，与构成它的空间相比，要小得多。

谈到层次时，我们通常指的是h1到p，有时候还会到h6。但另外还有一种层次在影响着行或段落的视觉流，这是特殊的层次：字母间距小于字间距，字间距小于行间距，以此类推。

要在移动端创造最佳易读性，尤其要注意这些特殊层次，这些格式塔式的词语、行、段落的文字组合，在自然光环境下同样至关重要。

2. 行宽

行宽是一行文字的长度。或者确切的说，是一行文字的理想长度，因为很难让每一行都精确吻合。

众所周知，舒适阅读的理想行宽是65个字符左右。行宽产生的物理长度，取决于字体的设计、字间距（见下文）和你使用的具体文字。本文开篇的65个字符（译者注：此处请参见英文原文），用PT Serif字体是26.875em宽，用Open Sans是28.4375em宽，用Ubuntu字体是27.3125em宽。如果再加入斜体、大小写和一大堆其他字体细节，还会有更大的差异。

在桌面端浏览器中，65个字符很难触及边缘，但在移动设备上，65个字符（如果至少大到看得清）会超出浏览器的边界。所以，在移动设备上，你必须得缩减行宽。

移动端并没有普遍认可的行宽标准。不过传统上，报纸或杂志上每一个窄列都会趋向于39个字符。鉴于这个理想行宽已经经历了数个世纪的考验，它在移动端字体上也运转良好。

3. 宽松行距、紧凑行距

行距是行之间的空间，行距太紧凑，会让视线难以从行尾扫视到下一行首。行距太宽松，字间距会开始形成队列，产生了我们通常意义上的河流，阻断了行的视觉流。

从左至右：理想行距、太紧凑、太宽松。

行距的标准通常是1.4em，但以我的经验，这对于屏幕来说太紧凑了：在屏幕上表现良好的字体都有一个关键特征——大的凹槽，大凹槽需要更大一些的行距来保持空间层次。

反过来，更短的行宽需要更小的行距。所以你可能需要将桌面端的行距设得宽松点，同时记得将移动端的设置得紧凑些。

4. 找到最佳状态

所有字体至少都有一种最佳状态，在屏幕上展现最佳的尺寸，还有在浏览器中最能保持字形的抗锯齿选项。

最佳状态下，多数笔画通常都能排列在像素网格中——像素字体，如果你还记得的话，那些字体仅仅在字号调整到最佳状态下才有效。

将字体设为最佳状态能形成更强烈的对比。为移动端设计时，对比尤其重要，因为户外的强光可能分散注意。

你会发现，微调行距会使每行脱离完美像素匹配。我觉得，在移动设备屏幕上，对比的重要性胜过行距。所以如果你不得不在行距上妥协，来保持每行契合像素网格，那就这么做吧。

通常设计师通过基线网格来排列文字。但在移动设备上，我们需要使用x高度来代替（x高度顾名思义，就是小写字母x的高度）。从易读性研究中，我们知道大脑识别的是文字顶部，而不是底部。所以要成就更加平顺的视觉流，我们要确保字符顶部最契合像素网格。

5. 不要忽视起伏边

起伏边是一段文字的边缘。你读的多数内容是居左对齐的（至少对于拉丁语系而言），导致右边沿参差不齐。

当视线从行尾跳至下一行首时，大脑最好要能判断出下一次跳跃的角度和距离。把每次跳跃都想象成跑过跳板，如果间距保持一致，就会快很多。因此，文字左侧边缘应该是平的，每行从同一个地方开始（对于从右至左的语言，恰好相反）。

因此你绝不应该将两三行以上的文字居中对齐。

通常文字会设置成两端对齐，这意味着每行文字所占空间相等，所以两侧都不会有起伏边。我怀疑两端对齐的流行和响应式设计有关，它教设计师们以块状形态思考。两端对齐的文字产生的留白不统一。最糟的情况会导致一行中只有几个字，相当不协调。更窄的行宽会加重两端对齐的问题，所以两端对齐的文字在移动端是难以阅读的。

从左至右：左对齐、居中对其、两端对齐。

如果整洁真的非常重要，那么使用连字符号来让起伏边更平滑，绝不能在移动端使用两端对齐。

文字右侧是起伏边在移动端还有一项额外好处：人们通常在易分心的场合阅读文字，读者视线频繁地从文字上移开——查看站名，或是接电话。起伏边创造了一个随机形状，让右撇子的视线可以通过重读最少的文字，回到刚才的位置。

6. 减少反差

增强文字与背景对比的同时，我们也要减少不同层次文字间的反差。

在移动端，实际可见的文字更少，所以反差被放大了。

其原因是我们的大脑基于环境来判断重要性。在桌面端，标题可能是正文字号的两倍甚至三倍，因为屏幕上有更多文字，所以这是有效的。在移动端，实际可见的文字更少，所以反差被放大了。

多数设计师使用斐波那契数列式的字号组合。在移动端，应该缩小比率来减少字号间的反差。比如，如果你使用黄金比例1.618与字号相乘。在移动端，应该用更小的比例1.382来替代。

桌面端屏幕比移动端容许更夸张的字号缩放。

7. 按比例调整字间距

为移动端调整字号时，我们要意识到字间距发生了必要的变化。

（先说一句，不应该调整固有字距。固有字距是两个字母相互组合时的距离，使它们的间距与其他字母间距在视觉上统一。创作字体时，就纳入了固有字距的考量，这个过程可能要花上数月。如果你选用了一款专业的字体，它的固有字距就是合适的，如果你觉得不对，请换一个字体。）

字间距并不是固有字距。字间距是字体中应用在所有字符上的间距。通常你也不应该调整字间距。

大字号是个例外，拿标题和小号文字（比如脚注）举例。大号文字需要减少字间距，小号文字需要增加字间距。前者是考虑到分组，后者则是为了增强对比。如果你在调整标题，或是用了通常字间距紧密的艺术字体，缩小时可能就需要把字间距放开一点。

总结

字体是一门工艺，设计师终其一生都在精心打磨。的确如此，因为每个文字、每种字体和每项技术都带来了新的挑战。没有一成不变的普适规律。

假如你追求易读性，要牢记三条原则：行内的视觉流要平顺，空间层级要清晰，要有足够的对比。这尤其适用于移动端页面。

没有不可撼动的规则，全凭你双眼决断。不过本文的指南可以作为理想的出发点，让你在移动设备上优美地排列文字。

原文链接

拥抱统一与迥异

hi@victor42.work (Victor42) — Thu, 29 Jan 2015 10:04:00 +0000

[国外设计第74期]

统一的力量是强大的。作为人类，在日常活动中，我们潜意识期望某种协调和秩序。世上每个禁行标记看起来都很像，这是有原因的。我在澳大利亚时，学着在道路另一侧驾驶就已经很艰难了。想象一下，如果每个城市都有自己特定的禁行标志——紫色霓虹灯禁行标志——那会是什么情况！某种程度上来说，我们靠一致性来使自己感到平常和舒适。

我们会注意到相互迥异的事物，这可能让人沮丧和迷惑。但有时又会让人耳目一新、为之着迷。我爱星巴克，我会本能地购买咖啡，动作一气呵成。领取我的白色超大杯咖啡时，也没有丝毫畏缩。忽然，在十一月的某天，我手捧着一杯迷人的红色假日杯，上面有一些令人感到安逸的冬季图案。白色的杯子星巴克已经使用多年，没有什么打破过这一传统，但有时制造点混乱也不错。它能通过人们不熟悉的方式，吸引和迷住顾客。

所有这些，也发生在我们与科技的关系中。作为设计师，我们应该拥抱统一的力量。了解何时应该严格遵循风格指南，何时运用创意打破陈规，这是非常有益的。

我们会注意到相互迥异的事物，这可能让人沮丧和迷惑。但有时又会让人耳目一新、为之着迷。

构建一致性

设计是有难度的，尤其在项目的起步阶段。有这么多点子，要筛选如此多种字体组合、配色方案、图标和按钮样式、排版趋势、图片处理方式。理想情况下，所有这些元素相互配合，向你的用户传达出清晰的讯息。但是要把它们恰当地相互关联起来，其中困难重重。

虽然这很明显，我们还是迅速回顾一下统一的基本要点。要构建一致性，我们要牢记以下元素：

色彩：主色、辅助色、次要颜色，配色方案
字体：标题、正文、手书字体，还有它们之间的层次与位置
视觉元素：图标集、按钮、照片的处理、插画
排版：导航/菜单的位置、栅格结构，还有响应式变换
交互：表单元素、对话框、动画、过渡效果、菜单等

下面这些案例中，样式库和风格指南都执行得很到位：

在设计中构建统一，有助于强化品牌，并使品牌信息保持清晰。在颜色、照片、字体、插画、图标等元素间规定统一关系，决定了用户如何与品牌建立联系、感受如何，还有如何使用。

这些框架和模式一旦成熟，确立下来了，怀着一致性进行设计应该相当简单。这会取悦用户。统一的界面学习成本更低，因为用户可以将他们的理解转移至其他界面，让整个体验更加流畅。易于理解促成了信任和舒适，会使用户更加投入（并转化为顾客）。

在设计中构建统一，有助于强化品牌，并让品牌信息保持清晰。

别忽略了用户

在设计中也有反对统一的声音。其中之一，是很多设计师过于注重新设计与旧设计是否一致，而忽略了新设计是否符合目标用户当下的理解（Spool, 2005）。

每个按钮都要是蓝色的吗？每个页面都需要搜索框吗？各处的页尾都要保持一致吗？正文字号永远是14像素吗？这些取决于具体情况。用户所处的环境通常应该先于一致性。

我们创建的风格指南和样式库，并非不容置疑。除了统一外，还有界面设计的原则，有时候这些原则应该优先于一致性。底线是：我们应该努力为用户提供最好的体验，有时这就意味着，要为其他某方面牺牲一致性。

少关心“我的设计与其他地方是否统一？”，多关心“我的设计是否吻合我们之前提供的用户体验？”。统一的设计让用户自信——用户会期望它的表现与之前体验过的一致。

除了统一外，还有界面设计的原则，有时候这些原则应该优先于一致性。

打破规则

还有一股邪恶势力在与一致性抗争，这就是设计创新的自然动力。任何时候我们都希望表现出创造力。在确定的风格指南或样式结构框架内设计，真的很令人沮丧。别担心，我们可以利用这一点。

在使整个界面变得一板一眼之前，牢记矛盾性的利用价值。迥异的元素和表现会吸引注意力——你若想让特殊元素被注意到，这就很管用。使用一种新的颜色，或是特殊的布局，能让用户从潜意识中惊醒。我爱把这种策略称作矛盾。

迥异的元素，在销售或追求顾客转化方面极其有效。我们可以做些小动作来扰乱常规体验：

增加新的说明元素
改变排版和焦点区域
显著改变标题字号
引入新的照片处理方式
大胆配色

Classy的登录注册页面，排版和样式看上去和主页、探索和公司介绍页面完全不同。在这些页面上，我们可以推测出用户的意图，也不希望有不必要的元素混杂其中。如果为了与其他页面保持统一，在此完完整整加入顶部导航、搜索和页尾，那就太愚蠢了。

其他一些重大的迥异之处：

比如Campaign Monitor，只在Customers页面的焦点区域用了动画效果。

Mailchimp’s SNAP的app页面，交互和动画有别于其他页面。

最后的思考

优秀的设计师会明智地运用统一。大多时候，设计师必须努力实现一致和统一，来尽可能创造最易用的界面。但是，一致性原则不能盲从。熟练的设计师不仅学着遵循这些原则，还会彻底地检验它们，并且学会何时以有意义的、目的导向的方式打破原则。

良师益友Ralph Waldo Emerson说得很好——“头脑简单者才需要傻傻地保持统一。”

原文链接

2015年至关重要的4种排版趋势

hi@victor42.work (Victor42) — Sun, 25 Jan 2015 14:01:00 +0000

[国外设计第73期]

近十年来，互联网已经发生了翻天覆地的变化，然而它其实一点也没变。如果看看10年前，我们会发现大批网站都有一套通行的排版模式。页头、页脚、侧边栏和内容区域，构成了这种直截了当的布局。这是人们预期中的网页排版。同时期Macromedia Flash的兴起，引领其他排版方式进入了一个新的时代。布局不必再拘泥于固定格式。当然，随着FLASH的衰退，这种方式也稍稍淡出……我说稍稍，是因为它如今又卷土重来了。

假如你研究一个流行的作品集网站，里面展示了当今的网页设计。毫无疑问，你会注意到网页的基本结构千变万化，根本没有固定形态。它可以伸缩变化成任何所需的东西。我认为这是响应式网页设计带来的最棒的副产品。事实上，新的准则，就是根本没有固定准则。

综上所述，我们能观察发现几种重大的排版设计趋势，能够代表我所理解的非常规布局。说它们非常规，是因为它们并不严格遵循某种准则或既定体系。但这种趋势的例子，即使没有几百，我也能找出几十个，归入这几类中。

本文中，你会看到有趣的非常规排版趋势大杂烩，希望它能给你带来启发，帮助你构思网页设计的基本结构。我们这就深入了解一下……

##分割屏幕

在这类中，我们精选的网站都用了垂直分隔线来分割屏幕。可能这么做有很多原因，通过研究大量此类案例，我发现主要有两点。

原因之一，有时候在一套设计中，的确存在两个同等重要的主体元素。网页设计的通常方法，是按照重要性给内容排序。然后重要性会体现在设计的层次和结构上。但是假如你就是要推广两样东西呢？这种方式，可以让你突出两者，并让用户迅速在其中做出选择。

原因之二，有时你要表现出一种重要的两重性。以Eight and Four网站为例。他们在此要表达的是，他们的核心竞争力来自植根数字领域，还有多才多艺的员工。这两点成就了他们。通过屏幕分割来表现这一点，是种令人愉快的方式。

##去界面化！

网页设计中的主要元素之一，就是容器元素：方块、边框、形状和所有类型的容器，用于将内容从页面中分离开。想象一个古板的页头，元素刚好容纳其中，与内容分隔开。如今的一项普遍趋势，就是去除所有这些额外的界面元素。

这是种极简主义的方式，但它更进一步，带来一些有趣的转变。

在这个例子中，他们把页头和页尾的概念统统去掉了。反而更像一个交互式杂货摊。从左向右的排列，就基本完成了内容层次的排布，有助于让排版更加直观。用于分隔导航和内容的界面就不需要了。取而代之的是漂亮的产品惊艳全场。

可以发现，移除任何感官上的页头和页尾后，内容得到了极大的强调。你会先看到公司名称，然后是关于他们经营内容（和场所）的清晰描述，而不是先看到页头。之后才是主导航。让用户浏览之前先重点强调品牌，这个方式太棒了！它造就了优美的视觉流程。有趣的是，当你滚动页面时，页头和界面才出现。美观且有效的排版，这种模式的运用颇具启迪性。

##基于模块或网格

接下来这些排版方式，建立在模块化或类似网格的结构上。在这些设计中，每个模块都力图根据屏幕尺寸伸缩调整。实际上这并不是什么新的方式，不过响应式网页设计让它变得更加有用。它暗示了一种自适应布局模式，可以像搭积木一样，由各种模块组件创建而成。

这个案例完美地诠释了这一点。整个设计都是响应式的。随着屏幕尺寸变化，每个模块都改变尺寸来适应空间。均匀划分屏幕使得设计更易于适应。他们还（在大屏幕尺寸中）引入一些元素来打破模块界限的束缚，这是画龙点睛之笔。

这个案例更加激进。当然，它也包含了模块化的方式，让他们能够根据需要轻松增减内容。但此处还有一个重要的设计元素在发挥作用，之前的案例是没有的。模块通过尺寸变化，来反映其重要程度和在各层级中的地位。这类模块化的布局方式存在一种风险，它使每样东西尺寸都相同，这意味着无法强调任何事物。相反，这个案例还是清晰地突出了主要元素。

##一屏以内

最后，还有一些网站采用这样的方式，让设计完全在一屏内展现。这是响应式设计的一个分支，因为它会适应屏幕尺寸。不过在这个绝佳案例中，整个设计的适应方式完完全全吻合屏幕，没有产生滚动条。没有滚动，意味着内容必须极度聚焦，而且要建立清晰的内容层次。我发现这些网站的聚焦能力和清晰程度，令人耳目一新。

##结论

虽然我把这几种趋势分开讲，但其实他们都表现为积木块的形式。这些积木可以通过很多不同方式组合。事实上，本文中展示的很多案例，都可以放在我们讨论过的其他几个分类中。现代网页的布局如此多样化，而且确实合乎使用，造就了如此激动人心的互联网媒体。

原文链接

译文背后的故事

hi@victor42.work (Victor42) — Sat, 24 Jan 2015 10:44:00 +0000

我默默地翻译着文章，除此之外，个人网站越来越少出现其他内容。可能业余时间都用来睡懒觉了。既然这样，唯一能讲的故事，就只剩翻译背后的故事了。

从2013年7月开始，心血来潮翻译了第一篇文章，就爱上翻译这件事。和设计一样，它也是一种创造。但是来得更纯粹，抛去了设备、媒介、载体的考量，只剩语言和思想。日积月累，从中收获了很多，设计水品、英文水品都有提升。还有一些意外收获，诸如眼界、人脉、思考、坚持。

今天，我给大家带来幕后的故事，一篇译文完整的诞生经过。

1. 找原文

首先，这一切的前提就是科学上网。国外设计网站图多、速度慢，直连的话简直就是在浪费绳命。另外，翻译过程中用到的一些小工具，也需要科学上网支持。

我找优秀原文有几个固定地址，多是人尽皆知的知名网站。虽然来源挺狭窄，但他们家的原文质量都比较高，我一个人翻也足够了，在此分享给大家：

怎样的原文算优秀，首先自己要能从中学到东西。有些文章虽然概念好、题材火爆，但讲得极其空洞。我以前也发过这样的文章，比如别在自命不凡了，设计师。发出来后觉得太敷衍了，很对不起读者们，在此向大家道歉。

翻译前还是要确认一下有没有别人译过，除非那人真的译得很烂。这里，我们的第一个工具要亮相了——google图片搜索插件。很不幸，第一个就要科学上网。

设计类文章有个好处，里面最不缺的就是图片。找到一篇心仪的原文，用这个工具随意搜索其中两三张图片。如果有别人翻译过，通常都能搜到。

2. 原文转成markdown

我一直用markdown来写作，不论翻译还是个人日志。markdown不是一种工具，也不是一种格式。它去除了所有样式，是内容最原本最朴实的形态。这是一种能够让写作流程标准化的东西。同时，也能给你最纯净和专注的体验。

但是原文不会给我markdown格式，都是富文本。用浏览器开发人员工具一看源代码，嚯！各种style属性，各种span、div，甚至有很多html5标签，比如figure、section。手动删掉那些div、span标签会让人想掀桌，普通的markdown转换工具又无法处理。于是我在别人的基础上改进了一下，基本满足需求，偶尔会产生几个空行而已。也分享出来给有需要的朋友。

工具地址：something- to-markdown

转好了markdown，要找个趁手的编辑器。在mac上我目前用的是Mou，在windows上感觉没有哪款客户端好用，最后选了个网页版工具stackedit，用着也挺顺手。在iPhone和iPad上，我用的是Write。【现在mac和iOS上都已经改用byword了。】

3. 翻译

翻译其实要进行两遍，第一遍确保不遗漏重要信息，第二遍润色。

不必逐字翻译

优先忠实原文，但不必每个词的意思都表达出来。we, and, just, an, if等等这些词的含义，有时我会省略或者扭曲一下，并不会破坏作者要传达的信息。

比如这一句：

How can you take advantage of the trend?

文章讲的是网页设计中的一种趋势。这里的you翻译出来似乎有点累赘：

你可以如何利用这项趋势？

在汉语中，这种时候往往是省略主语的。所以不翻就可以了：

如何利用这一趋势？

勤查词典

查字典要勤快，即使是我熟悉的词，感到翻译卡住了马上查。因为我并不能保证这里就是我熟悉的意思。

其实查词应该先查英英释义，有些词用中文无法解释，一看英文解释，就恍然大悟，某个巧妙且准确的成语便可能浮上心头。

看看这篇讲网页排版趋势的文章，有个词很有难度：

But in this niche the designs adapt in such a way such that they completely fill the screen and do not produce scroll bars.

这个niche是什么鬼！？一查词典是壁龛、合适的职业，文不对题嘛。查了下英英释义：

a position particularly well suited to the person who occupies it.

讲的也是合适的职业，但是忽然就明白了作者的意思。他想表达的是这个案例非常适合这种设计方式。所以在想到更传神的表达之前，这个niche，我们可以把它译作“绝佳案例”。

看看，这么一大串意思，英文可以用一个词表达出来，真是神奇。

较真

对于难翻译的词我非常较真。词典查不到，本着人肉搜索的精神刨根问底。Google这个词或短语，看其他地方怎么用，即便是再读另一篇原文，也要弄清楚。

比如portrait和landscape，第一次遇到这两个词的时候，找了半个小时，才弄明白是指竖屏和横屏。

再举一例，还是刚才那篇，里面提到有一类趋势，叫做No Chrome。那这个No Chrome要怎么翻译？没有铬？没有谷歌浏览器？显然都不合适。

词典没用，这时候就必须靠Google大法。通过搜索No Chrome，找到另一篇文章，其中有关键的一句“No more Chrome”，显然是同一个意思。于是耐着性子开始读这篇文章，发现它讲的是网页设计中一个去界面化的现象。

People feel they are interacting directly with the data.

用户直接与数据进行互动。

回来看手头的文章，发现正是这个意思。没有容器，没有界面，直接展示数据，案例网站的图片也能印证这一点。

至于为什么是No Chrome，想必是因为Chrome在国外就已经是浏览器和web界面的代名词了，毕竟他们几乎不用360、搜狗这样的外壳浏览器。问题迎刃而解，原来它真的是没有谷歌浏览器的意思。但翻译可不能这么翻，No Chrome应该翻译为去界面化。

结合专业知识

既然是翻译设计文章，在疑难词句上，优先考虑结合专业知识，回忆一些相关的行业信息。这样就可以根据自己工作经验来猜测。

感谢@Gaoyounger提醒，其实那个portrait和landscape就是AI中新建文档时常用的纵向和横向比。所以，日常软件应该尽量装英文版，很有帮助。

还有之前的no chrome。回想一下ios7刚发布时候，官方反复强调的“内容为主”，着重演示了safari浏览器的全屏效果，这也是一种暗示。

临时发挥

有些词确实找不到相应的汉语词，这种情况往往是短语，里面每个单词都认识，但凑在一块好像就没有意义。这就说明汉语文化中根本没这个概念，这时候我会自己发挥一下，用其中某个词直译过来组词，揣摩作者的意思。

同一篇文章中有如下句子：

This go-to pattern consisted of a header, footer, sidebar and content area.

这个go-to就完全查不到，较真也没用，就是查不到。

首先想到C语言里有goto语句，是一种打破常规顺序直达某处的语法。而go to在英文中就是去的意思。“Go to hell！去死吧！”，有点快去、直接去的意思。所以这里就YY一下，翻译成“直截了当”。

通过上下文锁定含义

有时一个词有很多种相近的意思，似乎每种都说得通。这时候我就会打个标记，继续往下读。通常读完一整段，这个词的含义就清晰了。

比如这篇SoundCloud再设计，其中有一段的小标题是“The Stream”。stream有很多意思，流动、潮流。在用户体验中可以代表信息流，在音频方面也能表达流媒体的意思。这篇文章刚好讲的是音乐产品，究竟是哪个意思呢？

这种时候只能往下读了。看懂下文之后，发现作者讲的是SoundCloud信息流界面，再回来把小标题补上。

补充信息

适时补充信息。英文有时候是很精简的，动词当作名词用。直译过来就不通了，所以需要补上主语或宾语，让它变成一个完整的短句。

再次回到那篇网页排版趋势，看这一句：

I find the focus and clarity of these sites to be refreshing.

focus and clarity of sites，网站的焦点和清晰？说不通。这时候也需要小小臆测一下，补充一点信息进去：

我发现这些网站的聚焦能力和清晰程度，令人耳目一新。

拆分长句

长句直译过来是很难读懂的，尤其是带有很长定语的从句，需要拆成多个短句来译。如果“……的……的”这样的长串定语，“的”字超过两个，我一定会把它断开。有时哪怕稍微不忠实原文，将定语形容的对象替换掉，也要保证句子易读。

有篇讨论网页中彩色滤镜效果的文章，开篇就是个变态长句：

Who would have thought that such simple instruments as color and gradient can catalyze creativity and enormously enhance the website’s aesthetics in the modern world of advanced effects and intricate styles?

那么来细细分解一下。首先分成两部分：

Who would have thought
that…

只看主谓宾，不看定状补，that后面又可以继续分：

such simple instruments (as color and gradient) can catalyze creativity and (enormously) enhance the website’s aesthetics (in the modern world of advanced effects and intricate styles)?

然后就是拼拼凑凑和调整语序了：

在当今这个充斥着先进的特效和精妙风格的世界中，谁曾料到，像纯色和渐变这样简单的手法，竟能够催化出创造力，并极大提升网站的美学水准？

沿袭原文文风

文风也会尽量忠实原文，偶尔出现的一些口语化的说法，翻译过来也需要口语化，贴近作者的真实表达。

在这篇讲动效的文章中，一张无过渡效果的案例图下方，有一句“Yikes, that’s rough…”。

这个Yikes是口语词，表示惊讶的意思。自己亲口把这句话读上几遍，尝试各种语调，似乎能体会到作者那一丝嫌恶的感情。那么这里就可以翻译得活泼一点，“我去，太挫了……”。

专有名词通常不处理

专有名称建议不翻译，比如material design。之前在译言的时候，我把它直译成材料设计，读者一致反对。

这篇文章中，有这样一句：

One Page Love: One Page Love is the premier one page website gallery, with more than 5000 example sites, and adding more all the time. They also feature tons of templates and other resources.

这个One Page Love显然是个网站的名称，翻译成一页情要闹笑话了。

标点符号

注意标点符号，英文用逗号，翻译过来未必也要是逗号。英文本身句子就长，跟一大堆从句，有可能三四行连一个标点符号都没有。10几行的一段，只有3、4个逗号也是常有的事情。中文要是这样，读者就要疯了，不信体验一下：

注意标点符号，并不是英文用逗号，翻译过来就得是逗号，英文本身句子就长，跟一大堆从句，有可能三四行连一个标点符号都没有，10几行的一段，只有3、4个逗号也是常有的事情，中文要是这样，读者就要疯了，不信体验一下。

4. 润色

文章是给中国读者看的，要符合中国人的语言表达习惯。有必要花时间再读一遍翻译稿，专门进行中文润色。当然，有自信的话，对于难度较低的文章，这步我会和翻译一起完成。

整理语序

有时整个句子的语序要颠倒过来，英文经常把if放在后半句，但汉语这么说就显得不太自然。

避免重复

一个词连续使用太多，读着就不顺畅。比如一个句子中出现太多的“响应式设计”一词，可以适当省略，或者换成“它”代指。

动词也一样，尽量避免一句中出现两个相同的动词。比如本文的翻译那章，有一句话“一篇讲网页排版趋势的文章提到有一类趋势”，其实原先是“一篇讲网页排版趋势的文章【讲】到有一类趋势”。“讲”字重复了，所以我把其中一个改成了“提”。

变通

虽然要尽量忠实原文，但是用词可以灵活一些，偶尔添加一些原文没有的意思，无伤大雅。比如这一句：

If you survey one of the many popular galleries showcasing current web design you will no doubt notice that the fundamental structure for web pages is anything but fixed.

后面半句需要动点脑筋。anything but虽然是个固定短语，意思是根本不。但是直译过来仍显生涩，需要变通一下。润色关键是表达原文的“神”，不必拘泥于“形”。

最终译成：

毫无疑问，你会注意到网页的基本结构千变万化，根本没有固定形态。

保持简炼

还要注意去掉不必要的“是”、“的”、“了”，它们会使文章显得啰嗦。

成语

润色的另一个要点，就是成语的使用。这是汉语的精华，善用成语可以让句子简炼易读，有时还能表达得更加传神。

例如在这篇讲述人眼阅读习惯的文章中，有一这样一句：

which is why we hold the masters like da Vinci and Van Gogh in such high regard.

当然，它可以直译成“这就是为什么我们如此高度景仰达芬奇和梵高这样的大师”，没有问题，只是不够简炼。其实一个成语就能画龙点睛：

所以我们才会对达芬奇和梵高这样的大师推崇备至。

检查错别字

最后，务必确保没有错别字。

5. 发布

我的文章要发很多地方：个人网站、微信公众号、豆瓣小组、站酷、UI中国。另外还有优设、人人都是产品经理社区等不能自主发文的网站，貌似和我形成了某种默契，时不时会自主转载，不需要我动手（我当然不会告诉你我里头有人 →_→），不然这活我可干不了。

这时候markdown的优势就发挥得淋漓尽致了，因为它是最纯粹、不带格式的内容，便于转换成各个平台的格式。

个人网站

我个人网站用的是farbox博客系统，本身支持markdown，数据还是存在dropbox里的。发布相当简单，把markdown文件往dropbox里一丢，状态改成已发布，时间设置一下就OK了。

微信公众号

微信公众号的编辑器不支持markdown，需要用到一个chrome插件markdown here。把markdown粘贴进去，点一下插件小图标，就转成了富文本。甚至能产生微信公众号不支持的h1~h6标签。

豆瓣小组

这个是最棘手的，豆瓣的编辑器……说它是编辑器都抬举了，它真的只是一个textarea。markdown here也不管用了，怎么办？

所以又得自己做工具了，既然有something-to-markdown，当然也可以有markdown-to-something

这个工具可以把markdown转成纯文本，就是txt那种。至于图片，也有它的处理方法。虽然还是土办法，不过比纯手工上传还是要强多了。

站酷、UI中国

这里就是常规发文流程了，比较方便。

不过在图片本地化方面我有点个人看法。我个人网站中的文章，图片地址从来都不改。一方面是出于懒，另一方面我觉得应该信任这些来源站。或许哪天我的个人网站都不存在了，他们的博客一定能继续运转下去。互联网的精神本该是开放和信任，而不是据为己有。

那么图片是放在自己的服务器可靠，还是留给他们自己管理可靠呢？

6. 学习

这是翻译的初衷，其实在翻译过程中，该学的都已经学到了。不过站在读者的角度读一遍文章，会发现文中哪些是干货，哪些是夸夸其谈，可以作为以后筛选优质原文的参考条件。

另外，很多文章都会旁征博引。其中有些是设计案例，有些是技术资料，有些是工具介绍。若有需要，都可以研究起来。运气好的话，还能找到另一篇优秀原文，果断收藏起来，留待以后翻译。

结语

翻译是一件很需要耐性的事情，和设计有那么一点像。你需要在自己的mind palace中纵情驰骋，和自己对话，精心雕琢一件作品。我很享受这样的过程，可能我真有一点孤僻吧。

人眼如何浏览网站

hi@victor42.work (Victor42) — Sun, 18 Jan 2015 00:32:00 +0000

[国外设计第72期]

要创造正确的视觉层次，你就要理解我们的眼睛如何处理信息，UXPin的Chris Bank说。

Chris Bank，来自UXPin——一款线框图、原型图app，在本文中阐释了网页UI设计中创造视觉层次的原理和惯例。可以在这本免费电子书网页UI最佳实战中，看到超过33家公司的UI案例分析报告。

一个艺术大师除了要具备创造力，还要考虑一些细节问题，比如写作、用色、尺寸、包含哪些内容，可能更重要的是舍弃哪些。这可不是容易的事，所以我们才会对达芬奇和梵高这样的大师推崇备至。

网页UI设计师也应该如此。这本免费电子书网页UI最佳实战中讨论过，网站也是视觉艺术的一种形式，以它独有的方式，它要遵循很多传统艺术形式的规则。这是审美的科学，掺杂了一些商业准则，非比寻常的网站界面，必须让人感觉毫无压力、引人入胜。

本文中，我们首先看看视觉层次是什么，如何创造，然后我们再了解它如何在视线的自然运动中发挥作用。

###组织视觉

Luke Wroblewski，专栏作家兼雅虎产品设计高级主管，在他的的文章通过视觉层次沟通中阐释了网站界面的视觉表现在以下方面的重要性：

通知用户——像一只无形的手，界面应该引导用户一步步采取行动，却不会让用户感到压迫。比如当你向下滚动，支付服务商Square引导你了解它的价值所在，每一步都有相关的引导号召你采取行动。
传达内容之间的关联——界面展现内容的方式，应该符合用户对信息的优先级理解。例如，人气设计网站Abduzeedo在顶部包含了清晰的分类，推荐内容在中间，底部则是详细的分类。
影响情绪——人们去餐馆可不只是为了食物果腹。他们要的是口味、质感、外观，还有令人难忘的环境。界面设计也一样，而且假如你建立了积极的情绪响应，人们可能更容易谅解网站的缺点。比如Wufoo就是个完美案例，界面非常实用且令人愉悦。

你的UI设计，最终目标是要解答以下三个问题：

这是什么？（有用）
如何使用？（易用）
关我什么事？（渴望）

###人眼的可预见性

不论是角落的匆匆一瞥，还是对某个路人的仔细打量，人的视线总是自动聚集在某些特定的兴趣点上。虽然这点因人而异，多数人还是容易遵循某种明确的走向——也包括如何浏览网站。

来源：Nielson Norman Group；www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

在一篇关于视觉原则的文章中，99Designs的设计专栏作家，Alex Bigman，谈到了在左向右阅读的民族中，两种占据主导地位的阅读模式。我们依次来看看。

###01. F模式

通常体现在文字密集的网站中，比如博客，读者首先沿着左侧的文字垂直向下浏览，从每段的前几句寻找他感兴趣的关键词或要点，F模式由此得来。

当读者找到了喜欢的东西，他们就开始正常阅读，构成了水平线。结果就导致了看似字母F或E的路径。CNN和NYTtimes两者都使用了F模式。

Nielson Norman Group的Jakob Nielson进行了一次易读性研究，基于232名用户浏览上千个网站，还有F模式涉及实践的详尽说明

用户很少逐字逐句阅读。
前两段最重要，应该包含你的营销妙语。
起始段、副标题、重点列表中要带有诱人的关键词。

它会如何影响网站的界面设计？请看下图。

来源：理解F型布局；www.webdesign.tutsplus.com/articles/understanding-the-f-layout-in-web-de…

图中可以看到，数秒钟内就能看到最重要的内容，下方立马接上更详细的内容（还有行动号召），方便快速浏览。

对于想要嵌入广告和行动号召，又不希望内容被淹没的网站，F模式非常有帮助。切记，永远是内容为王，侧边栏的存在是加深用户的参与。和其他所有模式一样，F模式是一套指导方针——而非模版——因为读过F中的头几行之后，F模式可能会让人感觉枯燥。

###02. Z模式

Z模式浏览发生在不以文字为核心的网站中。读者首先浏览页面顶部的一条横线，不论是因为菜单栏，还是出于在顶部从左至右浏览一遍的习惯。当视线到达尽头，它会飞速向左下移动（这也是出于阅读习惯），在页面下方部分重复水平方向上的搜寻。

来源：理解Z型布局；http://webdesign.tutsplus.com/articles/understanding-the-z-layout-in-web…

Z模式几乎可以运用于任何网站界面，因为它满足了网站的核心需要，比如层级、品牌、行动号召。Z模式对于简洁至上、核心是行动号召的界面效果最佳。

在一个内容复杂的网站中强行使用Z模式，或许不如F模式来得奏效，但Z模式有助于带来一些秩序，导致布局的简化（还有转化率的上升）。牢记以下几则要点：

背景——分离背景，让用户的视线停留在网站结构内。
1号点——这是你logo的最佳位置。
2号点——增加一个彩色的次要行动号召，有助于顺着Z模式引导用户。
页面中央——页面中央的焦点轮播图能把顶部与底部区域分离开，引导视线顺着Z模式流动。
3号点——增加图标，从此处开始，顺着横轴移动，能将用户引导至4号点的最终行动号召。
4号点——这里就是终点了，是你主要行动号召的最理想位置。

预测用户的视线如何移动能带来巨大的优势。在页面上排布元素之前，通过优先级找出最重要和最无关紧要的元素。一旦你知道要给用户看什么，将它们置于各种模式的“热点区”，创造正确的交互，简直易如反掌。

你甚至还能在整个页面中贯穿和延伸Z模式，如果你觉得在行动号召之前还有更多有价值的主张，可以重复运用1-4号点。

作者：Chris Bank

Chris Bank是一名发展经理，就职于UXPin，一个创造响应式交互线框图和原型图的UX设计app。

原文链接

单页网站设计指南

hi@victor42.work (Victor42) — Sun, 11 Jan 2015 13:45:00 +0000

[国外设计第71期]

单页设计，是一项处理小型网站的绝佳技巧，甚至有些网站你可能认为一张页面搞不定，也同样适用。从易于维护，到减少带宽占用，使用单页网站的好处不胜枚举。

假如你应对的是个小型网站，通常只有几个页面的那种，可以考虑使用单页设计，看看它是否能简化项目，对用户更加友好。继续阅读，你将了解它的益处，何时使用（或不该使用），还有一些你该遵循的绝佳惯例。

##单页设计的益处

很显然，单页设计并非所有项目的理想选择。但假如可能的话，有一大堆理由使用它。

###直观易用

默认情况下，用户要浏览单页网站，只要知道如何滚动就行。你也可以加入箭头或其他浏览暗示，但除了少数例外，其实滚动就足以让用户在各部分间穿行。

完全不用担心用户身陷多层导航中，无休止地寻找他们所要的东西。如果页面上有多个部分，页头或其他导航链接通常很有帮助，不过即使没有它们，网站仍然是可用的。

###维护起来更快速、更简单

这点并非既成事实，编码良好的单页网站，或许编写起来比多页网站更快。设计过程有时可以花更少的时间，尽管这取决于单页网站的复杂程度。

一旦你脑海中有基本的布局，单页网站还能利用某些特定的设计约束来加快进程。尤其较之于多页网站而言，单页网站各个部分要保持无缝衔接。如果你已经明确哪些能做哪些不能，这类约束的确能加速页面开发。

维护也更简单。当你只需要处理一个页面，维护工作就大大简化了，只要网站本身编码良好。

###它迫使你进行简化

这条构筑了上面一点。当你只有一个页面要处理，你不得不把一切简化为它们最基本的形态。不再需要一页页毫无用处的市场宣传。你必须直截了当、开门见山。

###更具SEO潜力

高质量的站内链接，是网站在搜索引擎中的表现的重要组成部分。尽管搜索引擎并不是很多网站必须的最大流量源，它们仍然重要。

单页网站的链接总是指向自己。搜索引擎抓取时，这可以增加网站的权重。

###叙事的手法促使用户有所行动

单页网站往往从叙事角度出发，这点多页网站可不擅长。这可以促进转换，激发用户采取行动。

人们习惯于聆听故事，不论在线上还是线下，所以这点有着显而易见的用户体验优势。我们儿时就开始阅读和听故事，于我们而言，这是自然而然的事情。

###易于组织

再也不需要组织一列列数不清的页面和子页面了。无需多虑每个页面是父级还是子级。也没有庞杂的导航菜单和子菜单。所有都在一页上。是要包含导航链接，还是让用户滚动，这取决于你，就看是否有助于提升用户体验。网站如果有多个页面，是绝对不会这么考虑的。

###减少带宽占用

尽管不像从前，对服务器而言已经不成问题，不过想想近年来有多少用户通过移动设备访问你的网站。减少网站的带宽占用，会赢得流量有限的用户的感激。

###消灭了移动版网站

当然，响应式设计不只限于单页网站。但即使采用了响应式设计，网站越复杂，让它适应小屏幕还是愈发困难。单页网站并不复杂，这是必然的。运用响应式设计总体来说更容易。简化导航和类似改变，也更容易成就适用于小屏幕的设计。

##要不要用视觉差滚动？

视觉差滚动可能是互联网中发生过的最美妙的事情，也可能是个被滥用的噱头，来蹂躏我们浏览器，这取决于你怎么看。无论你站在哪一方，它似乎近期并不会消失。

就我而言，我希望有时间和地方来实现视觉差滚动。这个效果对于某些单页网站大有裨益，而对于另一些则是噱头，甚至更糟：难以使用。关键是要明确一点，你使用视觉差滚动真的能提升网站的易用性吗，还是因为你觉得它看起来很酷？

如果要使用视觉差滚动，还要考虑一件事，使用Javascript还是纯CSS技术来实现。关于这两个选择，请参见资源部分了解更多信息。

##何时使用单页网站，何时不用

虽然有单页网站大有益处，但它们也不是完美的全尺寸适配方案。虽然很多时候单页网站比多页网站更合理，但也有很多时候不应该使用单页设计。

总之，假如你的网站只有少数页面，单页网站或许是最佳选择。将一切浓缩在一个页面上，能让网站整体具有更现代的外观，如果内容精简，那么单页网站可以让它看起来更丰富。

单页网站的另一个普遍案例，就是发布预告页面。它们通常是单页网站，带有新闻邮件的注册表单。多数情况下，发布预告期间面向大众的信息很容易组织在一个页面上，所以，设计这些页面时优先考虑这种风格是很合理的。

产品单一的电商网站，也是单页网站表现优秀的领域。如果你只卖一种产品，无论它是实体或是虚拟的，何必劳烦使用多个页面呢？一个简单的单页网站才是更好的销售工具。

可能你觉得更复杂的电商网站不适合用单页网站，但它仍然可行。当然，有十多种产品的网站中我会避免使用，不过单张页面也足以轻易支撑一个简单的在线商店，通过弹出窗口来承载产品详情和支付流程。

不该使用单页网站的情况十分明确：庞大、复杂，或必须保有海量信息的网站不适合做成单页网站。在这些情况下，使用相对传统的网站结构更加明智。

##混合型网站

虽然有大量的单页网站存在，但也有很多混合型网站。它们给人印象是个单页网站，但通过ajax、弹出窗和类似技术，它们事实上包含了多页内容。

网站Dang & Blast就是这方面的绝佳案例。

如果无法让所有东西彻底融入单个页面，这会是和很好的解决方案。

说到单页网站，某些站点用了某种“取巧”的办法。它们的主站是个单页网站，但在其他域名下也有个博客（有时是Tumblr或托管在WordPress.com的网站）。这么做没有问题，它能突出主站的信息，也不用舍弃博客带来的好处。

##单页网站的绝佳惯例

优秀设计的多数准则，在单页网站中仍然适用，其实也适用于任何网站设计。还有一些额外的东西需要牢记，其中有些之前已经提到了。

###保持简单

设计如果对于你试图表现的内容而言过于复杂，对你和你的用户都没有任何好处。相反，要尽可能简化设计和内容，还能表达出你要的信息。

###导航链接还是有帮助的

正因为用户可以通过滚动来浏览你的网站，但并不意味着这是最友好的方式。如果你的网站很长，有很多部分，这点尤其正确。除非有特别好的理由，还是应该加入直达特定部分的链接，来使你的网站更加友好。

###分割内容

单个页面不代表一整个冗长部分。实际上也不该如此。将内容根据逻辑划分为几大块，用户才能更容易找到他们所需。

###让所有的背景都有所作为

单页网站常常有大幅背景。当然，有时候这些背景很朴素，或带有平铺纹理；不过也有单页网站利用所有的空间来挥洒创意。前面提到了，这也有助于划分内容。背景未必要是单一的图片。可以是一系列图片，如果这样做与内容更相符的话。

##单页网站的资源

单页网站的资源成百上千，还包括模版；我们这里重点关注表现突出的几个。

PureCSSParallax Scrolling：Keith Clark的这篇文章阐释了如何通过纯CSS打造视觉差滚动效果。如果你不想用JavaScript（或者不懂）的话，这是个很好的选择。

Skrollr：“为剩下的人准备的视觉差滚动”。这是个独一无二的库，适用于移动端和桌面。不需要jQuery，只有原生JavaScript。

Stellar.js：Stellar.js是另一个简单易用的视觉差滚动库。它提供了很多设置选项和iOS支持。

One Page Website Wireframes：如果你不确定如何构建你的网站，这个单页网站线框图集是很好的出发点。免费下载。这里还有第二集可供下载。

One Page Love：One Page Love是首屈一指的单页网站集合，里面有超过5000个网站案例，并且一直在更新。他们还主打大量模版和其他资源。

Start Bootstrap：Start Bootstrap集成了海量的免费单页网站Bootstrap主题。主题适合机构、自由职业者、作品集、着陆页等等。

One Page Love Templates：除了丰富的网站集合，One Page Love也提供免费和收费的模版。

One Page Mania：One Page Mania提供独特的网站和模版集合，供你下载或购买。

##结论

对各种网站来说，单页设计都是非常棒的选择。尽管它们不是小型网站的唯一设计方案，对很多项目而言它都是值得考虑的。思考使用单页设计的理由，然后也思考不用的理由，再做决定。

原文链接

5项启迪性的移动端设计趋势

hi@victor42.work (Victor42) — Sun, 04 Jan 2015 10:23:00 +0000

[国外设计第70期]

App Store和Google Play里的app多如牛毛。很难说未来的趋势是什么，不过显然我们可以轻易选出当下的5种趋势并加以分析。

看看时下的app中的颜色、创意和简单朴素，我们能从中学到一些设计移动app的技巧。

##App中的色彩

**公认的，色彩始终是设计的一部分。**不过，近来很多app将色彩当作设计的基础使用，而不只是点缀。色彩可以营造氛围，极大地影响了app的整体体验。当你把一个色彩缤纷的app和一个几乎纯白的app进行比较，就能清晰体会到这一点。通常，颜色用来树立app的个性，比如友好、有趣或优雅。

看看Rubie、Sky、Rise或Peek这样的app。设计中充斥着华丽的色调，因为色彩是设计中最显著的部分。Rubie和Peek诠释了暗色设计不一定要使用黑色和深灰色。不要自我束缚，尝试使用深紫色或深红色来创造优雅而友好的暗色调设计。

另外，还有像Sky和Rise这样的app，它们信奉的是由鲜活色调构成的渐变。看到如此强烈的色彩在app设计中突出运用，真富有启迪性。两者看起来都如此华美壮观。难道不是吗？这一切都要归功于将色彩作为主要设计元素的运用。

##UI的简单朴素

很多app信奉简洁清晰的设计；这么想真是令人欣慰。常年来，设计师都在为更简洁更干净的设计而奋斗，尤其是极简主义，近来的趋势显示它依然如此。

2012年，Google做了一些研究，证明了简单的网站更好。点击此处深入阅读。总而言之，这个观点很直接。简单的网站更容易消化理解。复杂的网站需要访客付出更多认知上的努力，提供相对逊色的体验。因此，网站视觉上越简洁越好。移动app也一样。Conversion XL基于Google的研究写了一篇文章，关于简洁的网站为何有明显优势。

比如Product Hunt或AirBNB。两者都提供了简洁干净的界面，慎重且适当地展现内容。Product Hunt在一个列表中展现了许多不同内容，但滚动浏览相当简单。理解内容毫无障碍。AirBNB也一样，虽然它提供的信息更多。在任何一个界面，即使是列表或消息界面，呈现给你的信息永远不会将你淹没。

##优雅而精致的氛围

有意思的是，有些app试图通过设计营造一种精致优雅的气氛。这在网站中也不常见，在移动app中明显更加罕见。这个概念适用于酒店、酒吧或餐馆类的业务，他们想通过app创造亲密无间的感觉，就像他们的线下服务一样。不能说这种设计更好或是更糟；不过看到app尝试非典型的设计，总是不错的。

Hotel Tonight和Litely是这类设计的两个例子。两者都有着暗色的设计，展现出优雅、精致和亲切的感觉。这是种截然不同的设计风格，也正是它在支撑着这类非典型设计的app。Hotel Tonight提供的是眼下急需的酒店预订，但它把这件事处理得很时髦。谁说预订酒店一定要在枯燥的白色和浅色中完成。此外，Litely则使你忙于编辑照片，它的深色界面非常时尚。

##App创意

认真想一想，你用过多少称得上独特或创新的app？总体来看，我们常用的app中，没有一款打破常规。或许某项服务或产品曾经很新颖、富有创意，但用了一段时间后，我们习以为常，它就一点也不新颖了，成为一种平常的存在。有些杰出而巧妙的app打破常规，应该受到赞美，它们成就了与众不同的app。

我们很难发觉，有时智能手机在妨碍我们。Kimd就是个简单得不可思议的app，但它的创意想到聪明。作者Julie Chabin饱受明亮屏幕的干扰，比如观看演唱会的时候，于是她打造了一款暗淡的照片视频拍摄app。这个创意如此简单，甚至有点傻气，但它非常有效！整个现代社会都在无休止地使用智能手机，人们总是容易忘记，在某些特定场合使用智能手机是非常奇怪的举动。

另一个精彩案例是DRAWNIMAL。这是个儿童app，帮助他们画画、学习字母表。同样的，这并不是第一个以此为目的的app，却是第一个如此挥洒创意的app。这个app延伸了智能手机的学习体验，它让孩子用真实的纸笔画动物，并将智能手机作为绘画体验的一部分。它为app增加了一个维度，而且并不强迫使用数码设备来学习。这个app的使用方式很特别，也正是这点成就了它的创新。

##无处不在的照片

有一点，我敢肯定你注意到了，那就是各类app对照片的广泛运用。它们被当作内容和设计元素来使用。数码照片正在成为我们生活中不可思议的一份子；这的确是一项非常好的趋势，因为经常接触和用到自己的照片，真是件优雅的事情。在app中使用照片是一件强有力的工具。

VSCO和Steller两款app就是基于照片，相当惊艳。它们都尝试利用你的摄影才能，并激励你分享。以VSCO为例，兼具照片编辑与展示/分享功能。这意味着你可以随心所欲编辑图片，并上传到自己个人资料页面。这是个严格的社区，致力于分享高质量照片。Steller则允许用户创建图片故事。长短任意，可以填充文字、视频，当然还有照片。这个小小的社区有海量图片故事供你浏览，各不相同，比如DIY教程和游记。

###你的观点？

当今移动app带来的5项启迪，就是如此。你觉得app中会掀起怎样的热潮？你觉得设计与app创意，会趋于稳健，还是更加颠覆呢？

原文链接

material design学习笔记

hi@victor42.work (Victor42) — Sun, 28 Dec 2014 12:36:00 +0000

图多，耗费流量7.6MB，请在WIFI下打开

自从material design发布以来，我就在一直收集相关素材与资源，研究别人的作品。这套设计风格非常鲜明，带有浓郁的Google式严谨和理性哲学，深得我心。实际上，光是研究素材和别人作品，就能发现一些明显的规律，做出几分相似的设计。这样半吊子的状态一直保持到现在，最近有时间通读一遍官方的设计指南，终于有了深入的理解。在朋友的项目中实践了一番，虽然很抱歉拿朋友开刀，不过他对整体效果似乎还算满意。

material design的设计规范细致入微，需要消化好一阵子。越读越感受到它的妙处，假如每个细节都严格遵照material design的思想来设计，哪怕你不是设计人员，你的产品也一定不会难用和难看。当然，作为设计师，要求就更高了。设计文档本身，就提供了一种很好的方式，帮你从各个角度思考和构建自己产品的规范。但在这之前，先要好好整理一下学习笔记。要打破规矩，必先掌握规矩。

由于只是笔记，我会写得尽量简单。并且省略掉一些我认为设计师都已经掌握的信息。想要深入了解material design，还是建议有空通读一遍官方文档。不过，牢记以下要点，基本能做到90%了。实际上，Google官方的应用也有不遵照规范的地方，不能太拘泥于条条框框。

##1. 核心思想

material design的核心思想，就是把物理世界的体验带进屏幕。去掉现实中的杂质和随机性，保留其最原始纯净的形态、空间关系、变化与过渡，配合虚拟世界的灵活特性，还原最贴近真实的体验，达到简洁与直观的效果。

material design是最重视跨平台体验的一套设计语言。由于规范严格细致，保证它在各个平台使用体验高度一致。不过目前还只有Google自家的服务这么做，毕竟其他平台有自己的规范与风格。

##2. 材质与空间

###材质

material design中，最重要的信息载体就是魔法纸片。纸片层叠、合并、分离，拥有现实中的厚度、惯性和反馈，同时拥有液体的一些特性，能够自由伸展变形。

这些是纸片的魔法特性，真实纸片所不具备的能力：

纸片可以伸缩、改变形状
纸片变形时可以裁剪内容，比如纸片缩小时，内容大小不变，而是隐藏超出部分
多张纸片可以拼接成一张
一张纸片可以分裂成多张
纸片可以在任何位置凭空出现

不过，魔法纸片有些效果是禁止的：

一项操作不能同时触发两张纸片的反馈
层叠的纸片，海报高度不能相同
纸片不能互相穿透
纸片不能弯折
纸片不能产生透视，必须平行于屏幕

###空间

material design引入了z轴的概念，z轴垂直于屏幕，用来表现元素的层叠关系。z值（海拔高度）越高，元素离界面底层（水平面）越远，投影越重。这里有一个前提，所有的元素的厚度都是1dp。

所有元素都有默认的海拔高度，对它进行操作会抬升它的海拔高度，操作结束后，它应该落回默认海拔高度。同一种元素，同样的操作，抬升的高度是一致的。

注意：这不止是设计中的概念，开发人员确实可以通过一个值来控制元素的海拔高度和投影。

##3. 动画

material design重视动画效果，它反复强调一点：动画不只是装饰，它有含义，能表达元素、界面之间的关系，具备功能上的作用。

###easing

动画要贴近真实世界，就要重视easing。物理世界中的运动和变化都是有加速和减速过程的，忽然开始、忽然停止的匀速动画显得机械而不真实。考虑动画的easing，要先考虑它在现实世界中的运动规律。

###水波反馈

所有可点击的元素，都应该有这样的反馈效果。通过这个动画，将点击的位置与所操作的元素关联起来，体现了material design动画的功能性。

###转场效果

通过过渡动画，表达界面之间的空间与层级关系，并且跨界面传递信息。

从父界面进入子界面，需要抬升子元素的海拔高度，并展开至整个屏幕，反之亦然。

多个相似元素，动画的设计要有先后次序，起到引导视线的作用。

相似元素的运动，要符合统一的规律。

###细节动画

通过图标的变化和一些细节来达到令人愉悦的效果。

##4. 颜色

颜色不宜过多。选取一种主色、一种辅助色（非必需），在此基础上进行明度、饱和度变化，构成配色方案。

Appbar背景使用主色，状态栏背景使用深一级的主色或20%透明度的纯黑。

小面积需要高亮显示的地方使用辅助色。

其余颜色通过纯黑#000000与纯白#ffffff的透明度变化来展现（包括图标和分隔线），而且透明度限定了几个值。

黑色：[87% 普通文字] [54% 减淡文字] [26% 禁用状态/提示文字] [12% 分隔线] 白色：[100% 普通文字] [70% 减淡文字] [30% 禁用状态/提示文字] [12% 分隔线]

##5. 图标

###桌面图标

桌面图标尺寸是48dp X 48dp。

桌面图标建议模仿现实中的折纸效果，通过扁平色彩表现空间和光影。注意避免以下问题：

不要给彩色元素加投影
层叠不要超过两层
折角不要放在左上角
带投影的元素要完整展现，不能被图标边缘裁剪
如果有折痕，放在图片中央，并且最多只有一条
带折叠效果的图标，表面不要有图案
不能透视、弯曲

常规形状可以遵循几套固定栅格设计。

###小图标

优先使用material design默认图标。设计小图标时，使用最简练的图形来表达，图形不要带空间感。

小图标尺寸是24dp X 24dp。图形限制在中央20dp X 20dp区域内。

小图标同样有栅格系统。线条、空隙尽量保持2dp宽，圆角半径2dp。特殊情况相应调整。

小图标的颜色使用纯黑与纯白，通过透明度调整：

黑色：[54% 正常状态] [26% 禁用状态] 白色：[100% 正常状态] [30% 禁用状态]

##6. 图片

###选用图片

描述具体事物，优先使用照片。然后可以考虑使用插画。

###图片上的文字

图片上的文字，需要淡淡的遮罩确保其可读性。深色的遮罩透明度在20%-40%之间，浅色的遮罩透明度在40%-60%之间。

对于带有文字的大幅图片，遮罩文字区域，不要遮住整张图片。

可以使用半透明的主色盖住图片。

###提取颜色

Android L可以从图片中提取主色，运用在其他UI元素上。

###图片加载过程

图片的加载过程非常讲究，透明度、曝光度、饱和度3个指标依次变化，效果相当细腻。

##7. 文字

###字体

英文字体使用Roboto，中文字体使用Noto。

Roboto有6种字重：Thin, Light, Regular, Medium, Bold 和 Black。

Noto有7种字重：Thin, Light, DemiLight, Regular, Medium, Bold 和 Black。

###文字排版

常用字号：

12sp 小字提示
14sp（桌面端13sp）正文/按钮文字
16sp（桌面端15sp）小标题
20sp Appbar文字
24sp 大标题
34sp/45sp/56sp/112sp 超大号文字

长篇幅正文，每行建议60字符（英文）左右。短文本，建议每行30字符（英文）左右。

##8. 布局

所有可操作元素最小点击区域尺寸：48dp X 48dp。

栅格系统的最小单位是8dp，一切距离、尺寸都应该是8dp的整数倍。以下是一些常见的尺寸与距离：

顶部状态栏高度：24dp
Appbar最小高度：56dp
底部导航栏高度：48dp
悬浮按钮尺寸：56x56dp/40x40dp
用户头像尺寸：64x64dp/40x40dp
小图标点击区域：48x48dp
侧边抽屉到屏幕右边的距离：56dp
卡片间距：8dp
分隔线上下留白：8dp
大多元素的留白距离：16dp
屏幕左右对齐基线：16dp
文字左侧对齐基线：72dp

另外注意56dp这个数字，许多尺寸可变的控件，比如对话框、菜单等，宽度都可以按56的整数倍来设计。

还有非常多规范，不详细列举，遵循8dp栅格很容易找到适合的尺寸与距离。平板与PC上留白更多，距离与尺寸要相应增大。

##9. 组件

###Bottom sheets

通常以列表形式出现，支持上下滚动。

也可以是网格式的。

###Buttons

按钮分为悬浮按钮、凸起按钮和扁平按钮3种。重要性如下递减：

最重要且随处用到的操作，建议使用悬浮按钮。信息较多时，选用凸起按钮可以有效突出重要操作，但注意纸片不要叠太多层。扁平按钮适合用在简单的界面，例如对话框中。

使用悬浮按钮要遵循以下规则：

建议只用一个悬浮按钮
悬浮按钮可以贴在纸片边缘或者接缝处，但不要贴在对话框、侧边抽屉和菜单的边缘
悬浮按钮不能被其他元素盖住，也不能挡住其他按钮
列表滚动至底部时，悬浮按钮应该隐藏，防止它挡住列表项
悬浮按钮的位置不能随意摆放，可以贴着左右两边的对齐基线

悬浮按钮通常触发正向的操作，添加、创建、收藏之类。不能触发负面、破坏性或不重要的操作，也不应该有数字角标。下图就是悬浮按钮的错误使用：

悬浮按钮有两种尺寸：56x56dp/40x40dp

###Cards

即使在同一个列表中，卡片的内容和布局方式也可以不一样。

卡片统一带有2dp的圆角。

在以下情况考虑使用卡片：

同时展现多种不同内容
卡片内容之间不需要进行比较
包含了长度不确定的内容，比如评论
包含丰富的内容与操作项，比如赞、滚动条、评论
本该是列表，但文字超过3行
本该是网格，但需要展现更多文字

卡片最多有两块操作区域。辅助操作区至多包含两个操作项，更多操作需要使用下拉菜单。其余部分都是主操作区。

###Chips

狭小空间内表现复杂信息的一个组件，比如日期、联系人选择器。

###Dialogs

对话框包含标题、内容和操作项。点击对话框外的区域，不会关闭对话框。

通常情况，避免出现滚动条。空间不足时允许滚动，滚动条建议默认显示。

对话框中，取消类操作项放在左边，引起变化的操作项放在右边。要写明操作项的具体效果，不要只写“是”和“否”。标题文字要明确，即使不读正文内容也能知道在干什么，标题不要用“确定吗”这样的含糊措辞。

在对话框中改变内容，不会提交数据，点击确定后，才会发生变化。

对话框上方不能再层叠对话框。

还有一种简易对话框，不带操作项。点击列表内容触发相应操作，并关闭对话框。点击简易对话框外面，对话框会关闭，操作取消。

对话框可以是全屏式的，全屏对话框上方可以再层叠对话框。左图是一个普通界面，其中的任何改动立即生效。右图是全屏对话框，其中任何改动，要点击保存后才生效，点击X取消。

全屏对话框右上角的操作项，可以是诸如保存、发送、添加、分享、更新、创建之类的操作，不要使用完成、OK、关闭这样的含糊措辞。

只有必填项都填了，右上角的操作项才变为可点击状态。

内容发生了改变，点左上角的X，需要有个确认对话框，提示是否忽略修改。内容没有发生改变，点左上角的X，直接退出全屏对话框。

对话框的四周留白比较大，通常是24dp。

###Dividers

列表中有头像、图片等元素时，使用内嵌分隔线，左端与文字对齐。

没有头像、图标等元素时，需要用通栏分隔线。

图片本身就起到划定区域的作用，相册列表不需要分隔线。

谨慎使用分隔线，留白和小标题也能起到分隔作用。能用留白的地方，优先使用留白。分隔线的层级高于留白。

通栏分隔线的层级高于内嵌分隔线。

###Grids

网格由单元格构成，单元格中的瓦片用来承载内容。

瓦片可以横跨多个单元格。

瓦片包含主操作区和副操作区，副操作区的位置可以在上下左右4个角落。在同一个网格中，主、副操作区的内容与位置要保持一致。两者的操作都应该直接生效，不能触发菜单。

网格只能垂直滚动。单个瓦片不支持滑动手势，也不鼓励使用拖放操作。

网格中的单元格间距是2dp或8dp。

###Lists

列表由行构成，行内包含瓦片。如果列表项内容文字超过3行，请改用卡片。如果列表项的主要区别在于图片，请改用网格。

列表包含主操作区与副操作区。副操作区位于列表右侧，其余都是主操作区。在同一个列表中，主、副操作区的内容与位置要保持一致。

在同一个列表中，滑动手势操作保持一致。

主操作区与副操作区的图标或图形元素是列表控制项，列表的控制项可以是勾选框、开关、拖动排序、展开/收起等操作，也可以包含快捷键提示、二级菜单等提示信息。

###Menus

顺序固定的菜单，操作频繁的选项放在上面。顺序可变的菜单，可以把之前用过的选项排在前面，动态排序。菜单尽量不要超过2级。

当前不可用的选项要显示出来，让用户知道在特定条件可以触发这些操作。

菜单原地展开，盖住当前选项，当前选项应该成为菜单的第一项。

菜单的当前选项，始终与当前选项水平对齐。

靠近屏幕边缘时，位置可适当错开。

菜单过长时，需要显示滚动条。

菜单从当前选项固定位置展开，不要跟随点击位置改变。

菜单到上下留出8dp距离。

###Pickers

日期和时间选择器是固定组件，在小屏幕设备中，通常以对话框形式展现。

###Progress & activity

线形进度条只出现在纸片的边缘。

环形进度条也分时间已知和时间未知两种。

环形进度条可以用在悬浮按钮上。

加载详细信息时，也可以使用进度条。

下拉刷新的动画比较特殊，列表不动，出现一张带有环形进度条的纸片。

###Sliders

滑块左右两边可以放置图标。

或是可编辑文本框。

非连续的滑块，需要标出具体数值。

###Snackbars & toasts

Snackbars至多包含一个操作项，不能包含图标。不能出现一个以上的Snackbars。

Snackbars在移动设备上，出现在底部。在PC上，应该悬浮在屏幕左下角。

不一定要用户响应的提示，可以使用Snackbars。非常重要的提示，必须用户来决定的，应该用对话框。

Snackbars不能遮挡住悬浮按钮，悬浮按钮要上移让出位置。

Snackbars的留白比较大，24dp。

toasts和Snackbars类似，样式和位置可以自定义，建议遵循Snackbars的规则设计。

###Subheaders

小标题是列表或网格中的特殊瓦片，描述列表内容的分类、排序等信息。

滚动时，如果列表较长，小标题会固定在顶部，直到下一个小标题将它顶上去。

存在浮动按钮时，小标题要让出位置，与文字对齐。

###Switches

必须所有选项保持可见时，才用Radio button。不然可以使用下拉菜单，节省空间。

在同一个列表中有多项开关，建议使用Checkbox。

单个开关项建议使用Switch。

###Tabs

tab只用来展现不同类型的内容，不能当导航菜单使用。tab至少2项，至多6项。

超出6项，tab需要变为滚动式，左右翻页。

tab文字要显示完整，字号保持一致，不能折行，文字与图标不能混用。

tab选中项的下划线高度是2dp。

###Text fields

简单一根横线就能代表输入框，可以带图标。

激活状态和错误状态，横线的宽度变为2dp，颜色改变。

输入框点击区域高度至少48dp，但横线并不在点击区域的底部，还有8dp距离。

输入框提示文字，可以在输入内容后，缩小停留在输入框左上角。

整个点击区域增高，提示文字也是点击区域的一部分。

通栏输入框是没有横线的，这种情况下通常有分隔线将输入框隔开。

右下角可以加入字数统计。字数统计不要默认显示，字数接近上限时再显示出来。

通栏输入框也可以有字数统计，单行的字数统计显示在同一行右侧。

错误提示显示在输入框的左下方。默认提示文本可以转换为错误提示。

字数限制与错误提示都会使点击区域增高。

同时有多个输入框错误时，顶部要有一个全局的错误提示。

输入框尽量带有自动补全功能。

###Tooltips

提示只用在小图标上，文字不需要提示。鼠标悬停、获得焦点、手指长按都可以触发提示。

上图是错误例子。提示不能包含富文本，不需要三角箭头。

触摸提示（左）和鼠标提示（右）的尺寸是不同的，背景都带有90%的透明度。

###Navigation drawer

侧边抽屉从左侧滑出，占据整个屏幕高度，遵循普通列表的布局规则。手机端的侧边抽屉距离屏幕右侧56dp。

侧边抽屉支持滚动。如果内容过长，设置和帮助反馈可以固定在底部。抽屉收起时，会保留之前的滚动位置。

列表较短不需要滚动时，设置和帮助反馈跟随在列表后面。

##10. 设置界面

设置和帮助反馈通常放在侧边抽屉中。如果没有侧边抽屉，则放在Appbar的下拉菜单底部。

设置界面只能包含设置项，诸如关于、反馈之类的界面，入口应该放在其他地方。

设置项使用通栏分隔线来分组。7项以下不必分组。如果某项独立一组，考虑把它放在顶部（重要）或放在底部的“其他”一栏中（不重要）。设置项较多时尝试合并，比如把两个相关的勾选项合并成一个多选项。设置项非常多时，使用子界面。

##11. 易用性

###无障碍设计

material design很重视用户的广度，应该尽量照顾到残障人士的体验。设计时考虑以下使用场景：

没有声音
没有色彩
手机开启了高对比度模式
手机画面放大
没有视觉信息，使用屏幕阅读器
只能通过语音控制
以上多项结合

并注意以下问题：

无鼠标、纯键盘操作。鼠标悬停显示信息，也要通过其他方式展现。
考虑大字号情况下的使用体验。
不要只通过颜色表达某些信息。
音频信息也要提供文字或其他视觉呈现。
为图片和视频提供备用的文字信息。

###本地化

为阿拉伯语、希伯来语、波斯语用户设计相反的界面，他们的书写和阅读习惯是从右到左的。

##12. 资源（需要科学上网）

##实践

最后，展示一下朋友的项目——云集的部分界面。这是一款浏览器，也是一个html5应用平台。功能结构不算复杂，但也有它的特殊性。非常适合用来理解material design，并尝试做一些变通。

打造超棒GIF动画的7个秘诀

hi@victor42.work (Victor42) — Sun, 21 Dec 2014 21:17:00 +0000

[国外设计第69期]

在InVision，GIF可不是消磨时间的玩意——它们在市场和教育方面扮演着强有力的角色。更有甚者，我们在首页上用的就是GIF，而不是基于代码的炫酷动画。

实际上，人们开始询问，“那些GIF你们怎么做出来的？”是时候透露一下秘密了。

##设计GIF

###1. 秘密武器

这就是我不可告人的小秘密：所有的GIF是从视频文件开始的。我通常在ScreenFlow里制作，我们也用它来制作产品视频。它足够简单，学起来很快，内置了一些非常有用的动画工具。

将动画导出成视频文件后，我通过文件>导入>视频帧作为图层将它导入到Photoshop里。

高级技巧： 如果ScreenFlow或After Effects超出你的预算，可以在Keynote里创作你的动画，然后导出成视频。是的，最后有这个选项。

###2. 更少的颜色 = 更多的乐趣

如果想要惊艳的GIF，你得精挑细选地使用颜色。它不仅会使文件大小激增，使用更少的颜色也能让你制作更长、更复杂的GIF，而且文件仍然可以相对较小。（对我来说，1MB以下才算小）

###3. 可能的话，使用运动模糊

像ScreenFlow和After Effects这样的软件，能输出带有运动模糊效果的视频。这不仅使你的动画看起来更专业，而且为了压缩文件尺寸，要从Photoshop中的GIF里删掉一些帧，还能帮你蒙混过关。

###4. 懒（某种程度来说）

想像一下，本文开头的那个GIF，我本来还能加很多东西进去。带有用户名的小提示、一个鼠标指针点击加号按钮、鼠标滑过头像触发更多提示和悬停状态。人们不用看到每个细节就能了解情况，所以就只展示需要展示的部分——时间和文件大小是有限的。

##导出GIF

下面这些诀窍可能会让你有些紧张，在这之前，先尝试直接导出GIF。如果文件大小可以接受，那么很好！继续这么做。如果它太大了，继续往下看。

###5. 删除重复的帧

你的动画很可能在某处会暂时停止。仔细观察，你会发现这些片段包含了一大堆重复的帧，每个0.03秒。如果有10个重复帧，删掉9个，把剩下的那个时间设长一些，比如说1秒。

如果这没用，尝试重新导入视频，但这次要选间隔帧。它会显著缩减文件大小。

高级技巧： 这不是一条铁律，但如果你的GIF有超过150帧，你就得花好一阵子来削减文件大小。

###6. 缩减色彩

在Photoshop中保存GIF时，右边能看到一个下拉菜单写着“颜色”。随便调调。只要GIF不会变成一团糟，设得越低越好。

###7. 调整失真率

老实说，我甚至不知道失真率是什么意思。但我的确知道，如果你把它设置成1和10之间的某个数，就能在不降低画质的情况下剔除很多kb。

(喂Andy, 这就是失真率意思——Ed)

###这些都不管用！求助！

如果上面方法都尝试过，但GIF大小就是压不下去，这时候需要倒退一步。你想做的是不是太多了？有没有其他方式达成你的目标？如果把它拆分成几个不同的GIF呢？就像大多数创意产品一样，如果你专注于一件事，你的GIF会表现更好。

福利视频：极速创作

挑毛病：下载视频文件，本文的GIF就是用这个做的！（需要ScreenFlow 5以上打开）

译者注：上图是一段视频，建议前往原文页面查看

**高级技巧：**在原型中使用GIF，可以创造一些惊艳的过渡效果。

##还少了什么？

关于本文还有什么杀手级的技巧吗？想聊聊GIF？在Twitter上和我联络@andyorsow，或者访问我们网站@invisionapp。

原文链接

SoundCloud再设计

hi@victor42.work (Victor42) — Sun, 14 Dec 2014 12:53:00 +0000

[国外设计68期]

##为什么？

SoundCloud是个非常酷的地方——听众可以关注艺人，获取他们最新的音乐，艺人可以在此发布单曲甚至完整专辑来吸引粉丝。但通常用户知道，与这个平台进行互动是很让人沮丧的。

与其他音乐服务的简洁、美观的设计相比，SoundCloud感觉沉重而过时。网站和移动app的体验，都充斥着违反直觉的设计和尴尬的使用流程。

尽管如此，我仍然沉浸于这个社区，因为我信任它所提供的服务。我想让SoundCloud变得更好。

作为一个用户，我关心的是：

干净、直观的功能性界面
更了解我在听的艺人，并且发现新艺人
分享并与我的朋友们交流

这些基本功能，网站目前都做的不错，但都能做得更好。看我来分解它……

##1. 导航条和播放器组件

###出现的问题

我通常会搜索艺人或歌曲名称

**搜索栏太宽了。**最宽状态下，网站有1240像素宽，搜索栏输入框就有668像素。通常输入几个字后，自动补全功能就可以完成查询。

深灰色的这条就是播放器组件，令人困惑的一团乱麻

**播放器组件在页面的底部。**导航条用来提供入口，可以在所需的任何时候打开某些链接和功能。在音乐流媒体网站中，包括暂停当前歌曲、下一首和上一首。尽管播放器组件在每个页面都能看见，它位置在底部并不能直观地传达出它的功用。

**点击我的用户名会出现下拉菜单。**没有任何视觉指示告诉我这下面（也就是下箭头）有下拉菜单，这样展现很古怪。这网站我用了好几年，我的直觉仍然告诉我，它应该指向我的个人资料。我通常点这里去我的个人资料、喜欢和播放列表。

###解决方案概念

他们目前的设计（顶部）和我的概念设计（底部）

搜索栏输入框的宽度减少到108像素，为播放器组件腾出空间，加在正中间。

重要的链接在导航的右边，不再缩在下拉菜单中。头像图片指向用户的个人资料，右边的图标分别指向设置、喜欢、播放列表、消息和通知。上传链接去掉了，因为它并非随时随地需要使用。它被归到个人资料页面中。

##2. 信息流

你关注的人发布的歌曲和播放列表展现在这里，最新的在上面，像Twitter的时间轴那样。

当前形式的信息流

###出现的问题

**很难辨认出正在播放哪首歌。**除了小小的播放/暂停按钮，没有任何样式突出或强调当前播放歌曲与其他的区别。过去的音乐仍然保持橙色的波形状进度条，这毫无意义。

**每次只能看见3到5首歌。**一个音乐流媒体网站，一页应该能显示更多。

**信息流不会自动滚动。**我通常在浏览器中开着信息流，让它播放歌曲，同时去做其他事情。当我回到页面时，我不得不向下滚动，浏览波形图来找到当前播放的歌曲。我通常依靠播放器组件了解歌名，然后执行页面搜素（Cmd + F）来找到我的位置。这样的流程效率低，而且投机取巧。

**波形图上的头像实际上没有意义。**它们太小，无法从视觉上分辨留言者。它们唯一的价值，就是让用户知道音乐上有留言，而留言的数量已经显示在波形图下方的评论图标处了。

有认识的人评论了这首歌吗？

当用户离开信息流，回来时他们会期望什么

**信息流的刷新缓慢而笨重。**当我离开信息流再返回时，SoundCloud试图给我展示当前播放的歌曲，这很棒。但不是每次都正常。通常情况下，它通过渲染当前歌曲前面的每一首歌来做到这一点，这占用大量内存，这方法比普通的页面加载（这看起来很糟）还要慢。对此肯定有软件上的解决办法。

###解决方案概念

信息流概念图，我在SoundCloud上找到一些超赞的歌来模拟界面，右边栏是固定式的。

展开的尺寸、大幅的插图和可见的波形图，清晰地标示了当前播放的歌曲。另外，相同空间里可以显示更多歌曲。

有个选项可以使信息流在播放时自动滚动。开启这个功能会让一首歌在播放时移动到页面的顶部，像上面图中的那首歌Goldroom。

很明显，从歌曲的评论数来看，多数用户并不评论。评论会在视觉上让人分心，于是我增加了一个隐藏它们的选项。

音轨的鼠标悬停状态和发布时间标示

下载、喜欢、转发、评论、添加到播放列表和分享按钮被图标替代。这些图标已经充分传达了它们的功能，不需要再转译为其他语言。为了保持界面简洁，图标只在鼠标悬停状态显示（但当前歌曲会一直显示）

一个动态更新的气泡，显示了歌曲在信息流中出现了多久—à la Path—在滚动条的旁边，像这样。

我之前提过，我想更了解我在听的艺人，并且发现新艺人。概念设计中的侧边栏突出显示了当前歌曲的艺人，链接指向他们的个人资料。这部分非常有用，尤其当你听的歌来自一条你不熟悉的歌手的转发。它让你一窥他们的档案，却不需要离开信息流。也显示了他们的粉丝数，还有一个选项让你选择是否要关注他们。

##3. 分享

分享是SoundCloud用户文化和音乐探索中的重要部分。就目前而言，转发可能是最普遍和有效的功能，让你分享一首歌给你的朋友和粉丝。

我喜欢转发功能，不过我觉得SoundCloud如果更注重私密分享和私信，会受益良多。更多的站内分享，意味着更多时间在这个网站中度过，还有推荐内容的更多曝光（Spotify在这方面做得相当好）。还有，用户会频繁回到一个有朋友分享交流的平台。

###存在的问题

**分享视图并没有鼓励站内分享。**要发信息，你得移到第三个标签，而且并不明显。

首先弹出的是分享视图（左侧），而不是消息视图（右侧）。嵌入的视图（没有显示出来）目前表现不错。

SoundCloud的设计如果鼓励用户优先站内社交，会大有好处。

###解决方案概念

两个标签的设计优先推荐消息，也保留了站外分享。在同一个视图中包含两者，有助于带来新用户，并让老用户回来看看。

##4. 消息

目前的消息系统功能齐备。不过，它还能再简化，来增强信息流和其他页面之间的流动性。

###概念

全部消息（左侧）和一组对话（右侧）

点击导航栏中的消息图标时，消息视图从页面右边滑出，和OS X Yosemite的通知面板类似。

对话列表以一种熟悉的视觉形式出现，却不会妨碍左侧的信息流或其他页面。点击一则对话，滑动进入对话视图，非常像智能手机的短信应用。

##5. 通知

SoundCloud有两类通知。与账号动态相关的通知，显示在导航栏的一个下拉菜单中。页面上也有弹出式通知来标示歌曲动态。

账号动态通知（左侧）和歌曲动态通知（右侧）

###存在的问题

**账号动态通知不易理解。**用户会收到这几种通知：关注、评论中的@提醒、播放列表的喜欢与转发、上传音乐的喜欢和转发。考虑到Twitter和SoundCloud内容结构相似，我还希望有转发的喜欢与二次转发的通知。

**歌曲动态通知存在时间太长。**导致它们挡住右侧边栏顶部和下拉菜单中的东西。有时候它们会卡在那里，如果我进入个人档案，通知仍然看得见。

我的头像被信息流的错误提示遮住了

**错误提示不会自己消失。**我不知道什么原因，它们频繁出现，能够盖住页面的整个右边（直到超出底部），除非我手动关闭它们，一次还只能关一个。

###解决方案概念

点击通知按钮时，从右侧滑出一个面板，就像我在消息的概念设计中的那样。这个窗格可以滚动，而且不需要额外的页面来查看通知。

通知现在包含转发的喜欢和二次转发了。这很有用，因为通知使一个平台具有粘性，并且巧妙地让人习惯于经常回来看看。另外，知道朋友在听并且沉醉于相同的内容，是很有趣的。

页面动态的通知样式与其余部分的设计统一，会如我所期望渐隐消失，不会妨碍任何重要东西。

##结尾的思考

这绝对不是一系列彻底的批评和概念。我考虑重新设计发现界面、个人资料界面、设置面板和播放列表编辑器。如果可以把歌曲拖拽到右侧边栏的播放列表，那该有多酷？

我写这篇文章的同时，SoundCloud每月服务超过175000000个听众。显然，他们做了很多正确的事情。他们平台在发现和分发音乐、设计事务方面，仍然扮演重要角色。

我们知道，SoundCloud对于艺人和相似的听众而言，是个冷漠的地方。希望他们开始在网页和移动app上做出出色的改变。我乐于看到更多我认识的人经常使用SoundCloud。

另：想找一个能写代码的产品经理？联系我吧。

原文链接

艺术在产品设计中扮演的角色

hi@victor42.work (Victor42) — Sun, 07 Dec 2014 19:20:00 +0000

[国外设计第67期]

很多人将视觉艺术与设计混为一谈，就因为它们有诸多相似点。艺术与设计都需要巨大的创造力、对于美感与风格的敏锐感知、情商，还有通过视觉媒介讲述故事的能力。虽然这些相似点令人着迷，有时候也让人困惑，不过这两个学科的用途惊人的明确。

设计需要达成某种功能，艺术则不需要
设计以结果为导向，艺术则不必

主要区别源自工作的目的。设计师开始工作时，他预先就知道要达成什么目标。他由一个目的、一项计划、一个客户或一份合同驱动。设计师的驱动力则是想象力。

##艺术在产品设计中扮演的角色

产品外观的重要性正在提升。将产品设计放在首位的公司迅速崛起，恰恰证明了这个观点——比如交通领域的Uber、银行业的Virgin，或是Snapchat对沟通产生的影响。可用性曾经是唯一必须的特征，如今用户期望的是，高效满足他们需求与惊人的视觉感染力兼备的产品，这就是他们与注重设计的品牌频繁接触的结果（看看苹果的各种产品）。

没有这两者的协力，用户对你产品的感受可能会受到损害。往往会达到令他们统统抛弃的程度。

那么对于产品设计师而言，这意味着什么？

某种程度上，设计师必须像艺术家那样思考。他们得有条理地运用一个富有想象力的创意，将其转化、诠释为一种无形的完美。设计任何新产品或新功能点时，一定的艺术思维是必须的。

用艺术驱动，用设计诠释

##将艺术思维运用于设计构思

艺术是有目的的挑衅。它是有意图的情绪。每一道笔划、碳素墨点或油墨泼溅，都意在勾起观众的某种反应——拉扯观众的情绪。最终，设计师需要理解视觉如何影响情绪，情绪如何影响选择，还有如何利用它来发挥你产品的优势。所有的设计选择，都应该依据用户如何使用、打算如何使用产品，还有对产品的感受。

艺术思维可以运用在设计上——用户最终依赖你的产品，因为他们信任它，导致这种信任，是由于产品迎合了他们特定的需求，而且提供了恰当的情感体验。

尽管情绪往往表现得不合逻辑，还是有办法应对它的变幻无常。逻辑上讲，失去平衡的东西，也会让人感觉失去平衡。留白使人感觉平静……但是太多的话，用户就会感到孤立。学着理解和诠释人们的情绪化反应，就能在你的产品中设计用户的反应，更好地控制他们的情感体验。

##情商

不幸的是，很多人都不善于理解自己为何在特定时间产生特定的感受，甚至更不善于表达它们。你的工作就是诠释它们，并让用户遵照这些感受行事。准确识别、诠释和引导这些情绪，就是“情商”。

你可以通过以下方法提升自己的情商——每一种在用户调研中用起来都相当简便。

###从视觉化中获取更多信息

当一个人看着某样东西时，他能辨认出某种普通的情绪状态，但这种状态不仅仅由这样东西的表述决定。注意一个人花多长时间来回想他的感受。如果是立刻，那么你的视觉表现精确地展现了一致的体验。如果在这样东西上，他花了好几秒以上才反应过来，视觉意图显然是不清晰或复杂的。

还可以注意一个人的肢体语言——他们身体前倾（意味着好奇），还是侧身（意味着防御）？

###提出正确的问题

人们更擅长回答精确的问题，而不是自己想出词汇。但别这么问，“这给你什么感觉？”相反，应该明确化。试试“这让你感觉平静还是麻木？”明确问题通常可以给你展示更多细节，提笼统的问题则会错失它们。

明确化通常也会让人谈论起那些细节，总之让你更理解你的用户。

###设身处地为用户着想

文化与教养起着重大作用，影响着一个人如何与他身边的世界融合，也包括他们使用的产品。对这些差异敏感，有助于准确辨认和理解潜在用户对于你产品的情绪状态。在相应环境中，向用户提出问题，有助于发觉他们对产品中可能存在的不同情绪的反应。阅读：文化如何影响人们的习惯。然后，将那些习惯内在化，通过新了解的环境，来设计用户在产品中的可能表现。

###艺术家的思维方式如何帮助你进行产品设计

艺术在产品设计中的角色，就是准确理解、然后在产品中引导用户的情感状态。随着你更擅长理解用户的情绪和反应，而不需要对方说明，设计流程会变得更简单，你的产品对于用户也会更有吸引力。

原文链接

特色挖掘机炒菜馆

hi@victor42.work (Victor42) — Sun, 30 Nov 2014 17:30:00 +0000

还能不能愉快地做宣传册了[1]

愚蠢的人类给我看了他做的宣传册，说就需要反应这3个信息，要求是高端霸气上档次，问我怎么改。

我说你要找几个特殊的字体，不要用最普通的什么宋体楷体。于是……就变成了这样，他一定是故意的：

还能不能愉快地做宣传册了[2]

愚蠢的人类又发来一张目录页。我说好吧，像一页PPT，就这样吧。他不甘心，说那怎么弄，让我问问竹子。他自己继续改，于是又变成这样：

“ps已经被萌翻了。”他说

“你一定要在项目里卖萌么？”

“我只是推测了下问完竹子后页面会变成什么样子。”

“nonsense，明明不是这个卖萌路线！”

于是……

还能不能愉快地做宣传册了[3]

“圈的颜色太重，整体太偏右了吧。”我说

“圈离文字再远一点点，太近了。”

“太远了，半个字距离差不多。”

“你经常给客户看这个么？”

“不会，偷着做，一般坐我后面看图的时候我会点开一秒给他看然后关掉继续讲。”

特色挖掘机炒菜馆

阿文说，准备开一个特色挖掘机炒菜馆，大家说，有没有搞头？

群里炸开锅了啊，各种看好，出谋划策。

“有搞头！这下生活有奔头了！”

“标语我都想好了：深挖洞，广积粮，人间正道是沧桑。”

熊孩子的一天

楼下的熊孩子又在鬼哭狼嚎，竹子立马运用起她最擅长的换位思考：

“熊孩子的一天。”

“早晨六点，美好的一天开始了，先开个嗓，嗷！！！！”

“7点，吃完早饭，到了玩玩具的时间。为了树立我的威信，我要先把玩具熊藏起来。然后再开个嗓，嗷！！谁动了我的玩具！！！”

已经约好了妹纸

麦当劳蜀黍与肯德基也爷

“好想次麦当劳啊！”我在群里说。

独孤跳出来：“走走，蜀黍带你去吃。”

然后他又说：“不过我想吃全家桶。”

“来，也爷带你去吃。”

多么和睦的场面……

阿文的内心独白

阿文的手机摔水里了，一时情急，手贱拆了后盖，留下一条裂缝。

“还好合回去还能用，就是留了一条缝。一条缝…..”

[以下为我脑补阿文的内心独白]

一条缝……

条缝……

缝……

枕套床单蚕丝被

路边小店喇叭里，一个受过专业训练的男声在喊：“路过的朋友们，本店新到一批枕套、床单、蚕丝被、羽绒被、鹅绒被……” 商品越念越多，声音也越来越不专业，最后变成关谷师兄。

顿时就同情这个念稿的哥们，就像：“logo要大！标题要大！商品图片要大！合作商赞助商都放上！大大大！对，都放一页上！”

这是为什么呢？

愚蠢的人类的QQ签名，向来是一句话就能把你带进精神病院。

“这是为什么呢？公司通宵加班回家，撞车了，飞出去1.414米。”

我问他：“为什么呢，为什么是1.414米，为什么不是3.1415926米，为什么不是先飞出1米，然后再弹1米，再弹2米、3米、5米、8米、13米……为什么不是直接达到7.9km/s环绕地球飞行”

“因为我是超人。”

“你飞出1.414米还是车飞出1.414米？”

“当然是车，前轮都撞成麻花了。”

在网页设计中运用柔和色调

hi@victor42.work (Victor42) — Sun, 30 Nov 2014 04:18:00 +0000

[国外设计第66期]

网页中的柔和色调的使用，不止是近来的趋势，这是一项设计师使用多年的技巧，用来创造有冲击力的视觉效果。

当你听到“柔和”一词，想到的可能是淡粉色、淡蓝色、淡黄色，不过这种配色远不止这些颜色。柔和并不一定要感觉像新生儿一样。通过某些适当的方式，配合其他元素，这些色调也可以相当鲜明。

下面我们从优秀的案例网站出发，了解10种在网页设计中运用柔和色调的方法。

###柔和的照片

照片上的柔和遮罩层，或是在恰当的光照环境中拍摄的照片，可以成为精妙绝伦的网站背景。照片的色调越淡雅，设计师就有越多的区域可以放置其他元素。

使用柔和的照片同样有助于与其他元素产生反差，比如logo或按钮。请注意Solasie的logo与柔和色调的照片搭配得多么完美。这种思想也能突出幽灵按钮。

###柔和的背景色

柔和的背景色是个好主意，使用多种颜色却不会咄咄逼人。由于柔和色调更加淡雅，画布上可以使用更大面积的颜色，却不会感觉太强烈。

处理柔和背景色的一个常见的趋势，就是像Dear Mum这样，使用单色调的配色方案，对一种颜色进行深浅变化。单色调能够与白色的文字元素产生美妙的视觉对比。搭配合适的字体，这种技巧也能打造时髦的现代感。

###鲜明的柔和色

尽管你通常不会把“鲜明”和“柔和”相提并论，这类配色可以帮你创造出大胆的设计。因为柔和色容易退居幕后，所以如果你要在它附近有所动作，这是非常棒的选择。

Marie Catrib’s在这方面做得很好。这里的柔和色相当鲜明，但似乎没有喧宾夺主，你能看到这个从色块层探出头偷瞄的女人。鲜明的柔和色帮助你发现并聚焦在图片上，完全柔和的背景冲击力就会稍显逊色。

###柔和色调营造氛围

你希望网站的访客产生怎样的感觉？柔和色很擅长营造平静、放松、缓和的感觉。如果这些情绪可以描述你的网站或公司，它或许就是正确的选择。

Sweez做得很棒，通过颜色创造了这样的情感链接。图中的一切都带着淡雅柔和的色调。它让你想到坐在安静平和的地方，享受一杯温暖美妙的卡布奇诺。看见没，这种简单的色彩多么有效。

###柔和色的插画

柔和色也是插画的绝佳选择。运用这种色彩理念创造出令用户驻足观赏的作品。

柔和色调的插画，将带有某种平静的绘画作品与色彩结合起来。它让绘画的运用出人意料。

###与柔和色产生对比

柔和色并不一定要凭空创造。它是一种很好地与其他设计元素产生对比的手段。

Kinder Fotografie在这方面做得非常好，运用了柔和色和明亮的照片、文字。设计中的柔和色部分包含了大量小细节，但你首先看到的儿童照片和文字“smiles”。然后用户才开始注意这些精致的细节。

###柔和色的导航

柔和色调也是创造优秀导航的手段。通常情况，设计师会给网站设计黑白色的导航条，但彩色在这里也有用武之地。

柔和色可以作为导航的手段，是因为它们避让了其他部分的设计。比如，Wonderfully Wild中，用户最先看见照片并做出反应。导航元素与主要内容融合地很好，但由于颜色的选用，它并没有妨碍主要视觉内容。

###扁平化设计中的柔和色调

我们今天看到的柔和色调大多都没有采用扁平化设计。设计师们喜欢的各种亮色，都变成了扁平设计兴起之初那些超级亮色的淡雅版。

在扁平化设计项目中使用柔和色调，好处是颜色仍然保有相同的感觉和整体外观，这种方式却不会为了吸引注意而过于压迫用户。在网站中运用柔和色与扁平风格色彩，更容易通过颜色引导用户到屏幕的特定区域，或是强调重要的文字元素。

###柔和色文字

设计师们不止是在图片和背景上使用柔和色调。这种配色风格也可以运用在文字上。（虽然这会很微妙）

柔和色最好以粗大字体的方式使用，与更加朴实的背景相衬来创造鲜明对比。使用带有粗描边的大字体，可以确保屏幕上有更多柔和色。这个概念通常用于少量的字母或文字组合，不适用于正文。

###柔和色调的界面元素

将柔和色用作界面元素的一部分，是个有趣的概念。这是扁平设计理念孕育出的又一个“花样”，按钮和其他元素可以使用柔和色。

Duy Tran的网站中，每块柔和色区域实际上是个超大的按钮。这些柔和色告诉用户哪块是哪块，让每个都易于点击（或触摸）。这些色调很突出，因为与极简的主图区域形成鲜明对比。（轮播图中的每一张与这些柔和色调的按钮区别开）

###结论

使用柔和色的关键，在于让它看起来清新，而不是褪色。将柔和色调与你期望的深色、更鲜明的图片或白色元素对比搭配，有助于创造带有冲击力的柔和配色。

柔和色调天生就带有令人放松和冷静的理念。网页设计时使用这种配色方案对你有利。要牢记颜色与整体设计的其余部分如何相互影响。

原文链接

6种方式提升在线酒店预订体验

hi@victor42.work (Victor42) — Sun, 23 Nov 2014 18:19:00 +0000

[国外设计第65期]

说到电商支付流程的用户体验，有大量关于转化率的议题，也有很多有用的建议能够解决可用性问题。但这些资料都没有包含甚至触及到一个特殊的电商领域——在线酒店预订。在用户体验方面，这是一个被忽视的话题，可能的原因之一，是它缺乏一些基本的可用性准则。

随着在线交易占酒店销售额比重的提升，拥有强劲的在线销售工具变得至关重要。酒店网站甚至面临更大的挑战，要与Expedia, Booking.com和其他整合者竞争，他们有更多资源来不断提升网站的用户体验。

多数独立酒店网站使用第三方酒店预订引擎，它们得到授权与Expedia这样的预订渠道合作。为什么？这样酒店就可以从一个地方轻松管理所有预订渠道的房间和评级。所以它们要么遵守第三方服务的设计和体验，要么就勇于创造自己的特色。

这些网站的UI问题在于，它们的优秀是很久以前的事情，但之后再也没有变过。时间似乎在2004年前后停止了，无论添加了什么新功能，都没有显著改变现有设计。整个互联网在进步，用户对网站有更高的要求，对于糟糕用户体验的容忍度也在下降。这意味着，相比独立酒店网站，如果像Expedia和Booking.com这样的酒店整合者有更好、更全面、更简单的预订流程，用户甚至更愿意通过这些渠道预订。

但是酒店网站没有全盘皆输。做一些必要的可用性调整，酒店网站就能为顾客提供更好的体验，或者至少不会显得太令人生厌。

##预订日历的可用性

用户经历酒店预订流程时，首先会遭遇到的就是预订日历，你要确保它符合并且超出用户的预期，对吧？入店与离店输入框内，分别填入当前日期和后一天，让用户向你渴望的结果迈出一步。这听起来似乎显而易见，但鉴于很多酒店的日历框中仍然是空白的，一个温和的提醒并不会伤害到谁。

此外，当选择入店日期时，离店日期也应该跟着变（加一天），并将之前所有日期都标为不可选。这种基本的方式可以防止输入错误，例如无效的日期选择，这是Jacob Nielsen的10个可用性启发中的一个。

##预订的进度条

用户喜欢掌控流程，并且要能够预测它将会花费多长时间，那为什么不给他们展现出来？通常，有个好办法是将冗长的酒店房间预订流程分解为几个步骤，让它更容易消化。同时展示出进度条，消除用户由于不知道要花多少时间精力来完成任务而产生的焦虑。通过一个简单的进度条，来向用户展示，他们距离完成目标多么接近，同时也会鼓励他们继续。

##详细的房间信息和照片

不，我不是说要在你的网站上加上图片库和奇特的描述。我要说的是，当用户要选择一个可用的房间时，在用户面前展示出这些照片和必需的房间信息的重要性。像“豪华双人房”、“皇家阳台”和“常规标准间”这样的房间分类，并没有告诉用户任何信息，除非给它们配上相关的图片和关键特征，这些会成为相应的房间评级的佐证。还有，你能提供的图片越大、令人印象越深刻，就会有越令人满意的用户体验。

##精确易理解的评级信息

酒店网站电商部分的难处在于，酒店在相同时段甚至相同房型上，通常有不同的评级。要设计一个简单易懂的评级信息选择器，相当有挑战。尝试清晰高亮展示评级之间的差异，以及可能产生的额外费用，同时要消除杂乱，避免用小字来解释各种评级。

##预订表单的可用性

在可用性方面，这是预订流程中最痛苦的部分。至关重要的是，不要让用户被预订所不需要的额外的输入框淹没。首先，不要要求用户注册/登录来预订，除非你有好处可以交换。不要因为推广目的，用额外的任务来折磨用户。那不是好的用户体验。

那么，预订流程中，哪种信息是酒店需要的。

肯定的是，并没有默认的需求清单，因为每家酒店有自己的系统和运作标准，但通常最基础的是：全名和email地址。除此之外，你可能还需要一些非必填项，例如电话号码、特殊要求和到达时间。预订表单的一个小变化，有可能成就或毁了你的用户体验，所以要确保进行A/B测试，来为你特殊的网站找到最佳的表单结构。

##信誉和信任

酒店网站在用户眼中的一个主要弱点，就是信誉。如果我可以通过Expedia这样长期信赖和存在的网站预订，为什么我还要满怀信任地把我的信用卡信息，交给某个不知名的酒店网站？这个问题不可避免，作为酒店网站，你所需要的就是安全地处理和保存信用卡信息。更重要地是，使用他/她熟悉的安全徽章和图标，来向用户证明你的信誉。

##最后的思考

酒店网站正面临严酷的竞争，因此糟糕的用户体验是不能忍受的。尽管一些可用性议题会造成很多麻烦，或者导致向第三方服务提供者妥协，这些努力还是会取得成功，创造更好用户体验，让顾客更开心。在这样的环境下，至关重要的是准确了解你的用户是谁，相应优化在线预订体验。

不用说，对于不同年龄层，需要用不同的方式来对待一切可用性问题和文案措辞的设计。

首先，花些时间研究和理解你的目标用户，然后思考如何给它们设计更佳的体验。

原文链接

给设计师的品牌故事创建指南

hi@victor42.work (Victor42) — Sun, 16 Nov 2014 16:50:00 +0000

[国外设计第64期]

想想那些你一如既往乐于为之付费的产品。它允诺了你什么？关于这件产品，有什么让你感到自己在某方面变得更擅长？它是不是感觉像你内心渴望的一种写照？

在每个成功的用户体验的核心，都藏着一则创造品牌价值故事。顾客使用我们的产品，因为它们为顾客潜意识中的渴望提供了解答。想想你在使用的产品，它如何满足了下面的某种渴望，甚至更多：

变得独立，并且使别人也这么看你
生活少一些压力，放轻松
表达自己，展示自己的独特之处
在生活中开启新角色或位置
改善你与他人的人际关系
寻求安全与稳定
优化你对时间与资源的使用
出名
作为一名人类真正的成长

强有力的品牌故事，有助于传达出为顾客附加的某种价值。本质上说，用户想到你的时候，品牌仅仅是他回想起的一个故事而已。因为这个故事是由用户体验的每一个环节构成的，作为设计师，我们的职责是就每个场面如何展开得出明确的画面。不过，当我与90多个科技创业团队合作，他们来自各种你能想象的行业背景。我注意到，对于我们多数而言，讲述故事并不容易。所以我设计了一个简单的工具：品牌故事板。

通过完成这些场景，你会回答一些品牌故事背后的关键问题。我们一边填写故事板，一边考虑。

1. 从前……

这个场景中，你将会描述你的用户人物角色。品牌故事中谁是主角？他/她看起来是怎样的？

为何重要：

了解你的用户，会让你产生更情感化的设计方案。它也会帮助你决定各种沟通方式的理想受众，这与产品成长息息相关（广告、邮件或活动方案）。

2. 他/她总是……

定义一些用户日常涉及到的主要任务。他/她每天都会做什么？他/她在生活和工作中的主要职责是什么，与你提供的产品或服务如何关联？

为何重要：

你对用户的了解取决于这些生活场景，这个产品如何与他/她的生活方式相吻合。了解用户的日程，会让你清楚何时何地对你产品的需求是最强烈的，你要如何调整设计来适应一个特定的时间/空间。

3. 但一直以来都有个问题……

陈述用户每次尝试完成他/她的任务时遇到的主要问题。在这个故事中，有什么未得到满足的需求或渴望？

为何重要：

了解用户的痛点，对于他们接受你的产品至关重要。随着品牌故事的展开，与用户沟通的过程中，你随时都想强调这种渴望。实际上，当你发掘了用户的核心需求，你会发现还有其他（不紧迫）的需求与之相关，你的产品最终也能解决。

4. 他/她试图解决它……

如果之前的问题真实存在，你的用户可能已经在解决它了。在这个问题中，还有什么其他的备选解决方案？你的用户会试图做什么，来部分满足这种渴望？

为何重要：

分析竞争对手的产品，可以让你复制它的成功之处。毕竟，用户喜欢哪些特色，就会成为他们的评估你产品的参考标准。了解哪些其他的解决方案与你的产品形成竞争，对于设计出真正差异化的体验至关重要。

5. 但是他/她希望……

概述用户当前解决方案中的瑕疵。尽管购买了其他产品或服务，你的顾客仍然没有得到满足。还少了什么令人兴奋的解决方案？

为何重要：

竞争对手的瑕疵，就是你的机会。你可以通过这些激动人心的用户考量，将你的品牌定位为最佳的解决方案。

6. 直到有一天……

描述你的顾客从何得知你的产品。他/她首次听说的时候，会发生什么？

为何重要：

要知道，不同的方案可能会使人第一次尝试/购买你的产品，这点至关重要。什么会引发用户的首次尝试？花些时间找到这个问题的答案，而且身边一定要有市场团队人员的帮助。举个例子，比如你了解到用户通过社交渠道知道你的产品，你就会想要通过社交API设计一套完善的体系。

7. 不像他/她的解决方法，这个……

列出你产品体验有别于竞争者的某些方面。相对于用户目前的解决方法，你如何提供差异化？

为何重要：

尽管你的产品可能与竞争者在几个维度有所区别，试着确立一个清晰的因素，让用户转向你这边。这个核心的品牌承诺，会是沟通策略的中心，也是你产品开发努力的基石。

8. 他/她的愿望成真了……

清晰地定义你的产品满足了什么渴望。什么叫你的顾客“愿望成真”？

为何重要：

定义“满足”对于用户的意义，使你更容易让他们满足。有时候，即使你的产品确实提供了用户所需的功能，我们仍然说不清这个功能与他/她想满足的终极需求有何联系。换句话说，除非你指出这一点，否则你还没有成功。

渴望无非只是一点点追求——是影响我们日常决定的驱动力。无论那个目标，是让工作更有组织、激发更多创意，还是成为美国总统这种不相干的事情。强大的产品提供强有力的故事，它能将用户寻找的答案浓缩其中。随着你继续设计产品或服务，还可以参考以下观点：

人类所有的渴望，都是品牌与之建立关联的机会。

作者信息：Laura Busche, 嘉宾作者 Laura (@laurabusche)获得了华盛顿的American University的企业管理最高荣誉学位，Savannah College of Art and Design (SCAD)的设计管理艺术类硕士学位，如今正在读心理学博士。她热衷于用户调研、设计思考、品牌和它们的交叉点。她是O’Reilly Media’s出版社的《Lean Branding》一书的作者。Laura会定期在leanbranding.com和博客中发布品牌与商业方面的文章。

原文链接

应原文作者要求，加上如下链接：www.leanbranding.com，这是文中品牌故事板的原出处。

设计师写代码的方式

hi@victor42.work (Victor42) — Sun, 09 Nov 2014 12:40:00 +0000

[国外设计第63期]

设计师应该会代码吗？是的，但不是像开发者那样。

这个著名的问题“设计师应该会代码吗？”，答案不只是点个头了，它有更深刻的意义。首先，我们了解一些相关背景。

我们正在迅速地转向移动端主宰的世界。从Sketch 到 Pixate, 再到 Framer，设计师的工具，能越来越简单有效地通过原型表现创意。制作app的成本从没有这么低过。也从从不曾如此迅速。

对于开发者来说，这意味着他们终于可以尽快学会设计。相比学习Photoshop，这一步迈得显然要小得多。他们不会再对绘画、照片处理和3D工具兴趣平平。相反，Sketch的用户界面和OS X很相似，有工具栏、导航和信息窗格。Sketch的UI和Xcode中的Storyboards惊人相似。如果把其他都隐藏，你会发现是一样的，导航在左，内容在中间，信息窗格在右。Xcode甚至有相同的智能参考线和距离功能。相似是件好事。它使你轻松地在工具之间切换。

开发者正在变得更好协作。他们对设计师的期望也是如此。

然后，Swift问世了。或许除了Ruby on Rails，历史上再没有其他哪种语言吸引了设计师们这么多注意。我能自信地这么说，是因为我编写了给设计师的Swift，这个话题和Sketch一样火热，真是难以置信。我的Swift研讨会门票大多卖光了。别搞错了，设计师们其实也想开发app。他们想创造下一个Uber、Airbnb或者YO。他们需要的只是一点点推动力。

正因为我在尝试解决这个问题，我反复问自己，为什么没有更多的设计师学习代码？和我聊过的每个设计师都在寻找下一个原型创作工具。那么，原因很明显，没有足够的为设计师量身定做的资源。Swift book就是一个例子。在里面你学不到如何绘制长方形或是改变颜色。你也学不到如何操控资源图，来让它们完美适应每种设备，比如iPhone 6 Plus。你也学不到如何为界面增添动画。

在讨论解决方法之前，先让我解释一下设计师是如何工作的。

###设计师注重结果

设计师并非不熟悉打字。他们会发tweet、写email，还经常和数字打交道。但和写作不同的是，写代码得不到任何结果，除非你检查语法、调试错误（如果有的话），然后构建app。

类似Swift Playground的东西就是个好解决方法。它还需要做得更好，像PaintCode那样。

###设计师注重UI

设计师每天花费将近8小时移动图形，直到它们合情合理。他们不知疲倦地工作，提供最完美的图片资源，直到开发者满意。不幸的是，有些设计师最后还是遗弃了PSD，然后收工。这些人应该被炒鱿鱼。

完美的工具，应该看起来和他们的设计工具类似。比如Storyboard，有着拖放式界面，可以画图形、测量距离和多设备预览。如果设计师们学过自动布局，他们简直可以包揽一个app所有UI方面的事情，让工程师集中于他们最擅长的领域——实现app功能，消除bug。

###设计师注重动画

和我聊过的很多开发者几乎没接触过动画。要求开发者实现你设计的动画，就像要求设计师写开发文档一样。他们没有受过那方面的系统训练。像Pixate、Framer和Form就是理想选择，因为它们专注于动画，而且它们提供的结果能够被开发者作为代码复制。

###最后的思考

我心里有个毋庸置疑的观点。学习新技能从未如此简单。每周有成千上万新课程、教程和工具被分享。很多人可能会抱怨有太多东西要学。但如果工具再简单一些，难道不就和学习使用筷子一样容易吗？

原文链接

首屏大图:最大限度利用设计

hi@victor42.work (Victor42) — Sun, 02 Nov 2014 15:17:38 +0000

[国外设计第62期]

当下网页设计最重大的一项趋势，就是大图片的使用。不只是大，这些巨幅图片看上去就像在屏幕上活过来一样。用在页面顶部时，就是我们常说的首屏大图。

如何利用这一趋势？需要从哪些工具入手？本文中，我们来看看这些首屏大图、用好它们的诀窍、熟练掌握这一趋势优秀网页案例，甚至还有可供下载研究的赠品。

##什么是首屏大图？

首屏大图，就是在首页或其他页面顶部，运用焦点图、文字和导航元素。首屏大图体现为多种形式——作为一张图片或带文字的图、图片轮播、固定图片、视频或是动态图片。设计风格也囊括写实与手绘。

焦点图片是你在网站中首先看到的东西，它的设计的宗旨就是引人入胜。它应当具备强烈的聚焦能力和视觉吸引力。

首屏大图在视觉上起着强烈的聚焦作用，通常仰仗简洁的字体、极简用色，还有基本图形构成的界面元素。多数设计元素都放在图片上，通常需要一些设计策略，来保证文字刚好融入屏幕中的特定位置。一般来说，品牌、导航和其他工具放置在外边缘——典型的是在顶部的左右两个角落——来保持注意力集中在图片本身。

首屏大图在各类网站设计中广泛发挥作用，几乎适合任何设计风格。这种视觉上讨人喜爱的趋势，其实只需要一样关键事物——一张惊艳的图片。

###使用首屏大图的诀窍

一旦你决定使用首屏大图，设计时要记住一些要点。设计要干净，元素不能干扰主图片、图集或视频。在这类设计中，分离各种元素至关重要。设计焦点图片时，记住这几点：

包含品牌。通常这个会放在左上角。选用纯白或纯黑的品牌标识或logo，不要带很多颜色。
标题和字体要鲜明。尽管照片很大，文字才更有助于吸引用户的注意。
就导航元素和辅助元素而言，文字处理得要精细。坚持只用一张大图和一片文字；让其他都在设计感中淡出。
注意色彩的选择。如果用了彩色图片，其他东西都要坚持使用黑色或白色。如果图片是黑白的，为文字选择一种简洁或单一的配色。
放置文字时，不要妨碍图片的视觉流程。不要遮挡图片中的人脸或重要部分。
考虑使用大而纤细的字体。（时尚且非常易于阅读）
考虑使用幽灵按钮来增添一点精致。（阅读之前的文章中详细了解）
使用固定导航。让用户更容易滚动和浏览页面。雕琢首屏大图的导航，使它在首屏内外都适用。
减淡图片颜色有助于突出文字。所有文字都要易于阅读、起到作用。
深度设计首屏大图，让用户了解接下来该怎么做——点击还是滚动。要包含一些视觉提示。记住，首屏大图未必要充满整个屏幕；只是多数会这么做。
创造能存在于响应式环境中的首屏大图。思考它在小屏幕上如何展现。该显示什么图片和文字？

###有启发性的案例

互联网上随处可见优秀的首屏大图案例。这组案例包括了正式上线的网站和进行中的作品。

##赠品

若你正准备从首屏大图入手，通常有两种免费资源可供选择——由真实图片或3D渲染构成的首屏大图，或是绘画作品。这取决于具体项目，每种风格都能良好发挥作用。

下载焦点图片时候要注意的是分辨率（图片要大过最的大屏幕宽度）、可编辑、文件格式和智能对象（如果你要四处移动元素的话）。正如所有免费的设计元素一样，确保核对过使用许可，遵循相应条款。免费赠品通常可以用于个人项目，但商业项目需要支付费用；使用前阅读任何元素的所有细节。

###2个免费的首屏大图展示

###扁平风格首屏大图

###2张复古风格首屏大图

###创意素材集

###免费焦点图资源

##付费资源

尽管有很多免费资源，也有相当多的高质量付费首屏大图资源。在付费资源包中，你可能有更多选择。购物愉快！

###16张首屏大图Vol. 1（$20）

###食物首屏大图模版#3（$20）

###87张首屏大图素材包（$35）

###扁平风格创意工作台（$11）

###朴实的素材图片（$20）

###艺术器材场景（$12）

##总结

不久的将来，首屏大图会是网页设计中的一种最棒、最富视觉吸引力的趋势。这项技巧的妙处在于，它可以与几乎任何东西搭配。想要设计扁平风格、极简风格，或是复古风格？就用首屏大图。

你在项目中使用了首屏大图吗？可以在评论中与我们分享。我们乐于看到你正在进行的项目。

原文链接

Material Design组件中的学问

hi@victor42.work (Victor42) — Sun, 26 Oct 2014 10:03:41 +0000

[国外设计第61期]

假如你通读了Google的material design文档，就会知道它有多么广博，多么重视细节。通读整篇文档，可以让你学会很多东西。其中最重要的教训之一，是创建综合视觉风格指南是可行的。无论如何这都不容易，但并非不可能，尤其是对于谷歌那些错综复杂的产品阵列而言。

如果想学习视觉设计相关知识，你就应该深入了解material design如何处理个别元素或组件。这份文档列举了18种不同的设计元素，从按钮到菜单再到标签页。那么，通过分析它们，能学到什么？

##接受变化

仅按钮而言就有很多规则。material design有3种不同类型的按钮：漂浮式、浮雕式和扁平式。material design有多种多样的界面，一种单一的按钮难以满足需要。

在所有这些各式界面中，也无法仅凭记忆使它们保持统一。然而，material design包含3种不同类型的按钮，是为了最大限度地利用设计。这些备选方案，是为了应对那些常规设计不好使的情况。

“选择主按钮的类型，取决于按钮的重要性、屏幕中容器的数量、还有整个屏幕的整体布局。”——按钮的使用

有些按钮指的南很明确，还有一些比较模糊。总而言之，这部指南是经过深思熟虑的。它有明确的细节，讲述如何使用或避免使用按钮，有助于设计师的工作。这正是整部指南的美妙之处；设计决策则交给设计师来决断。

##重视经常遭到忽视的元素

你设计界面的时候，会经常考虑弹出窗口或警告组件吗？Material design文档专门有一章节讲的是对话框。设计师可不会经常从这些框框入手。但是，当用到时，它们仍然是设计的一部分，需要处理。

关于对话框部分的指南非常详尽。他们概述了应该使用哪种按钮，还有原因。也清楚地剖析了对话框，讲得广泛且深入。

“当每个标签的文字都不超出按钮的最大宽度，例如常用的确定/取消按钮，这时我们推荐使用并排按钮。”——对话框

“当文字标签超出按钮最大宽度，你可以使用堆叠式按钮来容纳文字。”——对话框

指南中详细介绍了对话框应该包含的内容种类和操作。它所延伸触及的各种细节令人着迷，非常有趣，因为这是经常被忽视的元素。这也证明了要创造一套强大的风格指南和设计语言，没有什么元素是微不足道的。

##一切关乎可见性

这份文档中充分强调了可见性。创造一套全新、统一的设计语言，其目的在于提供跨浏览器/设备的可见性。一部高质量的风格指南能够在设计语言中体现可见性，如此才能创造一套高质量的设计指南。

“标签页提供了显示相关内容分组的可见性。一个标签简明扼要地描述了它的相关内容分组。”——标签页

Material design文档中描述标签页的方式简直精彩绝伦。Material design并没有把标签页当作导航的一种，而是把它们作为一种额外的浏览内容的方式。看到这些特殊元素有所限制，例如标签页，真使人眼前一亮。很高兴能了解到，material design的设计师们除了样式之外，也深入思考了各元素的功能性，确保它不被误用。

如果各不同元素的功能得到了清晰的定义，那么这些元素将只会用于特定的途径。反过来，这一点也有助于塑造可见性。如果一种元素重用于多种场合，它就会使用户困惑；这对用户而言是不清晰明了也是不公平的。

“标签页简化了应用的浏览、切换不同视图或功能、浏览分类数据。”——标签页

##打造属于自己的元素

“点心柜作为一种小型弹出窗口，出现在移动设备屏幕底部和桌面的左下方，为某项操作提供了轻量级的反馈。它们居于所有元素之上，包括悬浮操作按钮。”——点心柜与吐司

“吐司和点心柜很像，但不包含操作性，并且不能被滑出屏幕。”——点心柜与吐司

Metarial design文档有一个章节很有趣，介绍了叫做“点心柜和吐司”的组件。这是种不常听闻的设计术语；点心柜和吐司是我们已知的设计元素。如果你阅读了上面的引述，再看看下面的图片，你就会意识到，点心柜和吐司的概念是一种简单的弹出通知。

不过这里的学问更大。Material design给各种弹出窗口分了类。设计语言需要这么做，于是就这么做了。点心柜与吐司和对话框很像，但有所不同；因此，他们被区分开了。Material design将它们分开，是因为需要他们承担不同的功能。创造新元素没有问题。就像material design的每一种其他元素一样，点心柜和吐司也有特定的指南——使用示例、尺寸标注和配色。

通常我们会忘记，这些元素不能用于各种不同场合或新途径。仅仅是为弹出窗口定义两种功能，如此简单的事情竟也大有作用，真是有趣。别忘了革新我们的设计，包括那些被视作过时的元素、你希望它消失却依然存在的元素。在小细节上进行创新是非常好的，因为它们对后面的设计会产生重大影响。

###你与Material Design

通读material design文档，告诉我们你从中学到了什么。令人惊讶的是，梳理一部如此简明的文档，竟能学到这么多设计知识。

原文链接

蓝草庄园:巧用PS匹配颜色给照片调色

hi@victor42.work (Victor42) — Thu, 23 Oct 2014 23:16:58 +0000

今天心血来潮给以前做过的梦配了一张图。梦中那个叫做蓝草庄园的地方，是未来世界的一处度假圣地，漫山遍野盛开着蓝紫色的草。

不过这样一张图并不好找，直接用普罗旺斯的薰衣草田就太不负责任了。我索性自己PS了一下，顺便在此分享一下PS过程。

##关键词：匹配颜色、替换颜色

这个技巧可以很轻松地把一张图片的色调，印到另一张图片上，产生神奇的效果。下面开始示范：

首先，找到一张草地图片。这张光线昏黄，色彩也很单一。不过构图和层次感很棒。

蓝草庄园是个宁静悠远的地方。这张图片，无论色调还是氛围，都有这个味道。

把两张图片都用PS打开。切换到草地图片，选择菜单中的图像——调整——匹配颜色。

在弹出的窗口中，把源设成雪山图，确定。还可以通过上面的3个滑块进行一些微调。

神奇的事发生了，有没有！雪山图的色调被吸过来了，而且很自然。不过图片右上方的亮光区域看着碍眼，这种冷色的光使得画面有一丝阴森的感觉，还得再调调。

选择菜单中的图像——调整——替换颜色。

弹出一个窗口，同时鼠标指针变成了滴管。接下来的操作很好理解，替换颜色，顾名思义。用滴管吸取图片中的某种颜色，窗口中上方的色块就是你吸取的颜色。

再点下方的色块，选择要换成什么颜色。调整Fuzziness（好像是叫“容差”）可以扩大/缩小替换颜色的影响范围。不过这不是距离范围，而是色阶范围，比较接近的颜色会一起被替换掉。

我们选个黄昏的颜色。

天边已经发出暖光了。不过亮光范围太小，光线太暗。仍然有一大片笼罩在冷光中，而且光源还特别诡异，与黄昏格格不入。

再来一次替换颜色，吸取冷暖交界处的冷色，换成比之前稍暗一点的黄昏色。

很好，夕阳和蓝草，在明暗交界处映出美妙的酒红色。丁达尔中还依稀可见草絮飞舞。不过图片左下方有个白点很碍眼，估计是反光之类的。用修补工具抹掉它。

大功告成！正是梦中的景色。

##总结

匹配颜色+替换颜色，这招的应用范围很广。可以给低端设备拍出的暗淡照片润色，也可以做出一些胶片风格的小清新图，还能把正常的照片处理成奇特的色调，甚至能美白皮肤。当然，我建议，这招最好不要对食物照片使用，结果很可能会帮你省下一顿中饭。

稍等片刻:页面预加载动画

hi@victor42.work (Victor42) — Sun, 19 Oct 2014 01:22:08 +0000

[国外设计第60期]

创造良好的用户体验已成为先决条件，微体验更是位列前茅——本文探讨的是预加载动画。长久以来，只有少数人重视这部分，如今一切都不同了，几乎每个网站都能以一两个赏心悦目、给用户留下深刻印象的效果自居。

微体验通常与经过深思熟虑的小组件有关，它们能架起用户与内容之间的桥梁，把访问网站变为一段愉快难忘的旅程。这个领域包含了各种友好的效果，今天我们要谈的就是加载状态的指示计。

虽然只会维持几秒钟（多数情况），它们应当得到特别的重视。我们习惯于相信，首页肩负着创造显著第一印象的责任，无论如何，假如你是一个非静态网站的站长，第一个页面就是加载页，你得考虑加载的过程。讨人喜欢、吸引眼球、令人愉快的动态计数器是无可替代的；它们会愉悦用户，悄悄地迫使用户停留一小会儿——这正是你希望的。

时髦的计数器，与主体的设计有着同等的独创性，欣赏设计师们想出的那些方案非常有趣，振奋人心。那么，我们来探寻一些有趣的预加载动画吧。

Little Big Room

探秘这家机构的作品集，从这个卡通画风格的加载条开始。它不仅是为了娱乐那些正在等待的网站访客，也奠定了基调，为接下来将要发生的事情做了一点点提示。

Subskill Digital

这个团队通过漂亮的动态logo，来给预加载页面增添活力，巧妙地将品牌标识应用到网站设计中。这效果有种讨人喜欢的数码氛围，与整个主题完美搭配。

The Erasable Wall

尽管这个网站旨在强调非常严肃的话题，由于手绘风的图片、铅笔画和动画元素，它的设计却稍显俏皮。这个预加载页面聪明地表现出同样的风格，与整个项目融合得非常理想。

Dunckelfeld

这个加载动画有着优雅精致的外观，与在线作品集的整体外观完全统一。这个团队巧妙地利用了logo，惊人地将动画运用其中。

Alstercloud

这个加载页面如此富有想象力，这个充斥着生动矢量画的独创设计，清晰无疑地反映了一点，你将获得相当有趣难忘的用户体验。加载页面有着强烈的艺术氛围，与整体设计感觉接近。

Though Brancott Estate

尽管Brancott Estate用了一种相当简单的解决之道——基本的旋转图标，但与背景纹理、粉笔风格的字体和引人注目的措辞聪明地结合起来，就足够迫使你停留一会儿。

SIXZERO

有时要使你的页面迷人，不需要重新造轮子，SIXZERO诠释了如何利用朴素的单色背景，来为加载页面打造一系列连续的纯色布景。

Tu Corte

Tu Corte专门从事肉类领域，所以毫无疑问，加载指示计展示了牛肉、猪肉、禽类的具象图形。

New Jumo Concept

这个预加载页面以一个带有logo形状的小动画结束。通过一种愉快迷人的方式开启了首页。

Letters, Inc

和网站的设计非常像，加载页面也有着精妙优雅的轮廓式外观。动画效果勾勒出首页的中心，缓缓揭开整个构图。

At Work

没有专门的加载页面，一切都在首页上发生。它包含一个神秘的漩涡状动画，以一种汇聚能量的隐喻吸引你进入。

Relio

Relio是个口袋大小的方形专业设备，能够为你提供照明。加载页面包含一个简洁的轮廓式图形，正是代表了这个小玩意。这个团队还让它运动起来，给这个页面增加了一点动态的感觉。

Fulvio Luparia

此处没有什么超自然的东西，带有计数器的标准圆形指示计，构成了这个页面。但是，设计师将简洁化为了优势，在锋利的图形、鲜明的颜色反差和带有淡淡标语的干净背景之间，呈现出杰出的融合。

Scotch and Soda

此处你会看到一个有装饰性的基本加载条，用一种原始的手绘方式来表现。它与首页中四处散布的手绘元素自然地呼应。

Engage

Engage以艺术化的手绘风网站设计著称，从头到尾每个细节都是这么规划的。甚至指示上传状态的一个常规加载条，也有着讨人喜爱的手绘风感染力，它还运用了品牌的配色。

All About Medical Training

这个团队诠释了如何最大限度利用空白。加载页面的特色是一个直观的医学图标，立刻反映出并生动地支撑着设计背后的想法。动态的阴影扮演着状态指示计的角色。

Mikado

Mikado把基于logo的图形作为了简洁扁平风格的旋转图标。访问网站的头几秒钟，就烙上了品牌身份的标记。

Designova

和上一个例子很像，Designova也将它的logo动画化，仅靠跳动的圆形标志装点加载页面。尽管这种解决方案相当优雅，而且易于实施，不过久而久之，它会失去魅力。

Zipper Galeria

这个团队将它的logo转化成基于文字的加载条，逐渐填入品牌色。

Kommigraphics

Kommigraphics用了经典的圆形加载指示计。它呈现一种扁平样式，柔和的双色调配色，与网站的设计主题完美吻合。

###结论

尽管将加载指示计融入网站中绝非新鲜之举，记得那些基于flash的网站吧，它们普遍运用了这些时尚的小指示计。如今它们有着更新、更先进、更时尚且更精美的诠释。设计师开始像对待其他必备元素一样对待它，力求完美无瑕，吻合整体主题并且同时保有自己的风格，那么，我希望在不久的将来，每个动态的设计都具备独创且有趣的加载指示计。

原文链接

设计师在创业团队中的角色

hi@victor42.work (Victor42) — Sun, 12 Oct 2014 10:19:24 +0000

我与小伙伴们出来创业已经有一年多了，真是一段愉快的日子。这份奇妙的经历可以和各位朋友分享一下，给大家讲讲我作为设计师，在创业团队中扮演的角色。

我要说的并不是什么普适规律，设计师在创业团队中的角色取决于一些设计之外的因素。假如你有信心和成熟的想法，能够把控产品的走向，那或许你还会成为产品的主导者，你要操心的事情，有一些会很远大。也可能你没有那么强的大局观，却是一个不折不扣的像素眼细节控，同样能找到自己的位置。总之，创业不是个人能力的简单加法，而是一个在变化中主动寻找自己角色的过程。

起步阶段

我们团队的主要产品是一款停车App，所以我绝大部分的工作都围绕App的产品设计展开。刚开始小伙伴们大多还处于兼职状态，大家利用周末的时间一点点拼凑出了产品的雏形。那时并没有原型、详尽的需求文档，功能实在是简单至极。我的主要职责就是迅速做出简易的UI稿，供大家讨论调整，然后尽快投入开发。对于产品的定位与走向，我们有更专业的同伴深入考虑，而且大家一拍即合。

说迅速，其实也花了不少时间，因为这是我的第一个移动端项目。从前一直都是做PC端的网页设计，偶尔做点平面，唯一一丁点移动端经验，也是来自手机版个人网站的瞎折腾。第一版产品只有区区不到10个界面，也让我焦头烂额。初次接触Android的多分辨率适配，还有iOS6到iOS7的风格巨变，信息量非常大，消化了很久。对我而言，这是一个完全陌生的领域，只能放下从前web端的经验，像个新手一样，从模仿开始。

在起步阶段，每个环节生产力都吃紧的时候，自然是要尽设计师的本分，在自己最擅长的领域发挥作用。做好视觉与交互，配合其他队员把创业构想转化为具体产品。

融合

随着核心产品的问世，团队主要角色也基本到位。这时候才会真正意识到，人力缺口远比想象中大，围绕产品有大量琐碎却必不可少的工作。有的和产品有关，制作宣传品、申请各类第三方服务的接口、维护应用市场等等。有的和产品没有直接关系，注册公司、操心办公场地、面试招人。这一大堆事情其实也没法很清晰地分配。如果其中哪几项能比其他队员做得好，我就会主动扛下来。

开发的工作量总是比我们大，而商业拓展方面则受制于外界因素，不是多花一小时就一定能多做一个小时的事。到了这个阶段，设计师往往时间会相对充裕一些。但我不能闲着，相反，需要变得三头六臂，尽快补上整个团队的短板。这时的创业团队像架好钢筋的地基，我需要扮演注入其中的水泥，填补这些缝隙。

开发对于UI的实现遇到困难，要去主动了解并理解他们的实现原理，权衡重要性，配合他们做出一些无伤大雅的调整。仔仔细细做好详尽的UI标注，为开发节省时间。找到一个好工具，把所有UI稿根据逻辑串起来，加上点击跳转，让开发更直观地理解其中的业务逻辑。同时，推广方面刚刚起步，如果有专业设计人员的加入，效果可以得到大幅提升。推广banner、长微博模版、公司与产品的官网，想到什么就迅速搞定它，让小伙伴们投入使用。产品每个版本的测试都要尽心尽力参与，给BUG附上详尽的说明与截图。还有一些情况，自己并不是解决问题的最佳人选，把它记下来，放在大家都能看到的地方，让队友自己权衡优先级。所有这些，重要是要快。产品问世初期，有没有这些辅助工作，比做得好不好意义重大得多。

这个阶段的事情会很杂，瞬息万变。目标是努力适应队友的节奏，帮助团队融合，尽可能把分散的工作连结成稳固的混凝土。

回顾与沉淀

团队在不断前进，产品进入了一种比较固定的迭代节奏。推广与商业拓展也都有起色，感觉设计方面工作量趋于稳定，而且总是比其他角色少一些。这时候大家的工作内容也脱离了那些基础性工作，专业性很强，设计师帮不上忙。

我认为这是一段相当宝贵的时间，让我停下来回顾自己先前的工作，把方方面面的成果联系起来，站在更高的角度思考。此时，前一个阶段的琐碎工作的意义显露无疑，我们的设计缺少一样东西——灵魂。简单说就是规范，产品与辅助产品、产品内部各个模块之间，都处于各自为战的状态。产品与公司对外的形象也不统一，即兴创作的成分居多。虽然看得过去，但整个就像一段白噪音，没有形成旋律。

于是开始仔细钻研iOS与Android的设计规范，对比各行业产品的设计风格，研究主流产品在这点上做到了什么程度。说实话，学习过后我很有把现有产品推倒重来的冲动。不过任何事都不能过激，改造还得逐步完成。

这段时间内，我制订了公司的整套VI，逐步应用到所有对外形象中。我从之前版本的产品中提炼出了配色方案与视觉风格，调整优化后，产生了一些成文的东西。App中的各种组件也统一了设计，并且在界面与交互上，为Android和iOS两个平台做了相应的差异化，站在巨人肩膀上总是没错的。

一切都可以有规范。不仅是视觉上的，还有界面元素的交互方式、动画效果、声音反馈、数据展现格式与计量单位……想到一个就整理成文，日后持续补充完善，这是一项漫长的工作。

除了这些实实在在的规范，有些相对抽象的东西也需要确立。我们的产品希望给人怎样的印象？激发用户怎样的情绪？直到现在，我都还在思考中。尽管这种感知印象可以在产品初期就确立下来，我认为不够稳定。业务发展和产品方向的变化，势必会对其产生影响。需要有足够长的时间，产品经历过足够多的迭代与沉淀，才会自己浮现出来。那就是设计的灵魂，它就在那里，人为强加并不合适。

精炼与探索

有了这些简易的标准与规范，设计工作得到了简化，效果反而比即兴发挥更好。标准推动设计统一，统一的设计提炼出更细致的标准。这件事情还得尽早做。到团队成长到一定规模，或许有7、8个开发，2、3个设计师的时候，它的惊人作用会加倍体现出来。

于是我再次拥有充裕的时间，解决初期经验不足留下的历史遗留问题，正是时候！那些新手错误、困扰用户认知的特例都需要一一修复。有个很低级的错误，我们早期Android版产品中，多数元素的点击区域小得令人发指，完全不符合Android的48标准。糟糕的是，这些早期问题偏偏集中在产品最基础的功能中，修复刻不容缓。另外早期匆忙中设计的产品官网也彻底改头换面，掌握的各种新技术都尝试运用其中。

这个时期，团队已经磨合得比较默契。队友的能力和成就，都在随着产品或者说推动着产品稳步提升。我更不能落下，不能让队友来帮我注水泥。通过广泛的学习来提升自己的综合能力，并且马上运用到产品当中。我这一年多创业所学，几乎超过前面3年之和。从零开始熟悉了移动端自不必说，还学会了响应式设计与开发、html5动画影片、AE动效设计、浏览器调用部分手机硬件，绘画能力也有提升。当然，还有最重要的，设计水平也能感觉到在进步。

不断尝试探索新事物，跨出设计领域广泛涉猎，为公司与产品注入新鲜的元素与想法。把自己当作一个人的Google X部门，我敢说那是让绝大多数设计师心跳不已的工作。

总结

创业是令人兴奋的，当然也不轻松。如果你做好了心理准备创业或加入创业团队，那你的身份就不再是设计师，而是创业者——发现与解决问题的人。你的职责也不限于设计相关的内容，而是一切你擅长的、对团队有帮助的事情。具体取决于你的专长、性格、行事风格、思维模式。无论如何，你是团队的一份子，你在推动着它前进。

一张图告诉你 iPhone 6 (plus) 多难搞

hi@victor42.work (Victor42) — Wed, 08 Oct 2014 18:08:00 +0000

虽然从屏幕长宽比来看，16:9可以说是手机界的共识，可不要高兴得太早，有个更大的坑在等着我们。

iPhone 6 (plus)的问世让我们不得不重新考虑，iPhone的UI要怎么做？画布设多大？

根据以往Android的经验，尽管屏幕物理尺寸多如牛毛，但是除以相应的倍率，得到的逻辑像素比较统一，不同屏幕上显示的信息量是一样的。少数另类也是即将淘汰的老旧设备，稍稍偏小一点，设计时酌情考虑即可。

现在iPhone的情况似乎有点不妙，物理尺寸除以倍率，真是一种一个样啊！不同的逻辑像素意味着屏幕的信息量不一样，而且可以差很大。对比5s和6+的逻辑像素，真的差很远。这会导致5s上刚刚好的设计，在6+上显得太空旷；6+上刚刚好的设计，5s上一定变老人机。

与此相比，多切一套图真不算什么。真正的挑战，是一套设计已经不够了。当然我们可以为大屏的6+单独设计。但5s和6即使倍率相同，逻辑像素也不一样。这意味着我们要在一套设计中处处考虑大小两种屏幕尺寸。

所以iOS8的更新意义重大，开发若再像以前那样靠绝对坐标来做UI布局，一定是无法兼顾两者的，自适应布局是唯一的出路。我们需要尽快转变观念，像网页设计那样来做App的UI布局。况且6和6+还提倡横屏模式，响应式设计是大势所趋。

新iPhone6与Apple watch给设计师带来的影响

hi@victor42.work (Victor42) — Sun, 28 Sep 2014 19:12:31 +0000

国外设计第59期

九月9日，苹果发布了一些很棒的新产品。但它对设计师而言意味着什么呢？不论发布会主题是否令你影响深刻，我们都能领教它所要表达的东西。

有更多的产品供人选择，于是也有更多的事物给设计师们带来影响。

##屏幕更多样化

显然，作为设计师，我们会担心或欣赏这两种新的iPhone带来的屏幕差异。设计师们总偏向于iPhone——看看Dribbble上有多少Android作品就知道了。iPhone曾经有固定的尺寸，设计起来很容易。如今则不然。随着新增的Retina HD，我们又得多应对一种分辨率。

###屏幕尺寸

更多信息请查看PDF that Lemonat Studio，聚合了4种iPhone的详细信息。

###带动响应式设计

更多种屏幕尺寸给我们机会拥抱响应式设计。响应式设计很灵活，我们应该尽可能利用我们的优势。由于这两种明显增大的iPhone，使我们有机会让响应式网页更富创造性。至少，我们会更擅长使用大屏手机测试响应式网页；这点对所有大屏Android手机也是有利的。谁知道呢，或许我们还会开始考虑平板，就这点而言，iPhone 6 Plus几乎和iPad Mini的尺寸相当了。

###横向App

苹果指出，iPhone 6 Plus的亮点之一是它的横屏尺寸。对横屏设计的强调令人耳目一新。我们要面对现实，不论在app还是响应式网页中，这都不是我们常做的设计。不管怎样，我们是时候也应该这么做了。拥抱更大的屏幕吧，打造支持横竖屏的美丽迷人的app，来挥洒你的创造性。

###重点

不论你喜欢与否，苹果推出的两种新iPhone尺寸会给设计带来深远影响。我们有两种选择，逃避式地将设计适当放大，或是拥抱它的挑战，让我们为那些屏幕打造崭新的、更优秀的设计。

###Android怎么办？

是的，我知道Android很早以前就开始出现大屏幕了。但是，出于某些原因，设计师们都还是偏向于iPhone。通常，客户也优先考虑iPhone app。这或许意味着，随着iPhone的尺寸如今与Android相同或相似，我们终于可以同时包含两种手机的设计了。

##Apple Watch是个新挑战

Apple Watch，苹果推出的新手表产品，和其他苹果设备都不一样。它是可定制的、个性化的，也很迷你。不像同样拥有小屏幕的iPod，Apple Watch可以安装app。这点很重要，因为我们将会设计那些app。Apple Watch有它的局限，比如它只是第一代，屏幕也很小。这意味着两件事。首先，我们要拥抱小屏幕，将它的局限当作一项光荣的创意挑战。或者索性避开这款手表。可穿戴设备才刚刚起步，让人难以拥抱它们，因为它还不是一个完美的设备。所以，第二个选择可能意味着Apple Watch会成为一个迷失的媒介，像iPad一样。

不过看到苹果在尝试探索可穿戴科技，总是件好事情。不论设计圈未来会如何对待Apple Watch，有一点可以肯定，当下Apple Watch是一款热门的激动人心的设备。

###无穷的可能性

这个动作引发了一个巨大的疑问：苹果下一步会做什么？我猜苹果未来会分化出其他产品和技术——包括可穿戴设备。更大的新iPhone使得这点尤其肯定。苹果开始走向多样化。

##苹果不再是从前那个苹果公司了

这次的主题显然令人大开眼界。苹果不再是曾经那个苹果了。指出Tim Cook和Steve Jobs之间的差别再容易不过，但远非这么简单。这家公司在以一种与以往不同的方式做事情，你可以认为更换CEO是件坏事，但如果意识到它已经是另一家公司，其实就是件好事。不论你如何诠释，苹果的变革就发生在我们身边。

###产品设计的多样性

如果你看看最新的iPhone、iPod、ipad，你会注意到他们显然不同。苹果的产品从前遵循着相似的设计信条。早先的Mac OS版本与更早的比较相似，比如iOS6和Maverick。iPad是照着iPhone的模子做的，iPod的设计也被修改以配合iPhone。如今，苹果的产品很多样化，最新一代iPod与时下的iPad完全不同，iPad和Apple Watch也不同，它又不同于……你明白的。这就意味着作为设计师，我们应该期望做出不同的设计和风格。

###可定制的Apple Watch

新苹果的一个显著特征，是推广可定制的、个性化的产品。Apple Watch是第一款能够让你自己定制的苹果产品。在这之前，苹果都在照着它的行事风格，为你打造完美无缺的产品——你要么爱上并购买它，要么不会。（当然，它允许一点点定制化。）

我选择iPhone而非Android手机，那是因为我信任苹果的设计师与工程师能够为我提供最佳的体验。我不需要定制化，我信任产品的体验，毕竟这些设计师都是专家。我知道这样的人不止我一个。这款手表尚不能完全定制，无法选择不同的造型——比如圆形或方形表盘——但它仍然走了一条与先前的苹果产品截然不同的路线。

###重点

作为设计师，摆在我们面前的是苹果式设计的多样化风格。它会改变我们为不同设备开发的方式，也会改变设备本身的设计如何激发我们前进。

你怎么看？你觉得苹果最近的发布会将给设计圈带来怎样的影响？

原文链接

别再自命不凡了，设计师

hi@victor42.work (Victor42) — Sun, 21 Sep 2014 21:37:57 +0000

[国外设计第58期]

设计界存在一个问题。这不是薪酬水平的不平等，或者岗位的差距，也不是童工问题，但它确实是个问题。

设计师当中有一种自命不凡的流行病。有些人只沾染了一点点，体现为一种讽刺的愤世嫉俗。还有些完全是太把自己当回事了，并且对此毫不自知。

不论哪种，是时候结束这样的局面了。没错，我在呼吁这些设计师别再自命不凡

##这不是癌症研究

现在说句题外话。对于99%的网页设计师而言，我们做的东西并不会改变世界。至少不会直接改变世界。

在最基础的层面上，我们的工作就是让东西美观好用。当然，有时它们能产生深远影响。但这并不是在攻克癌症。

即使你为非营利组织工作，而且他们的确致力于治疗癌症，你的设计却不是。那只是个网站而已。

这不是说优秀的网页设计一无是处，或者产生不了任何改变或影响。它肯定是可以的。但到头来，我们还是在屏幕上挪动像素而已。

当然也有例外，不过99%的设计师基本都在此列

##解决这个问题

虽然很有多因素有助于解决这个自命不凡的问题，最重要的因素之一，是我们工作环境中的用语。

10年前，网页设计师就是网页设计师。或许你以前是UI或UX设计师，不过更多情况你是一名网页设计师。或许有些管理团队的角色称为艺术总监、创意总监或项目经理，但这些都是可以精确描绘工作性质的职位头衔。

如今，我们有些这样的头衔：

数字市场的魔法师
社交媒体大盗
品牌战士
数码领主
移动端教官
首席幻想家
数字先知
梦想炼金师
欢乐英雄
创意登峰者
天才

还有些常见的例如宗师、绝地武士、传道者之类的称谓。

你并不是魔法师，你也不是大盗、战士、领主、教官、先知、炼金师、登峰者或是英雄。你或许是个天才，不过把它作为你的职位头衔就太自大了。

魔法师是使用魔法力量的人。战士是指一名士兵或斗士。领主是统治者或者封建领袖。教官是一名教师（通常指战争艺术方面）。先知是宣扬神旨意的人。炼金师将基础金属元素转变为金子。登峰者是只出现在喜马拉雅的登山运动员。宗师是精神上的领袖或导师。绝地武士能够使用原力。传道者总是想把其他人也变成基督徒。很有可能，作为设计师（或其他任何角色）的你不属于以上任何一种。

这就是登峰者。你可不是。

你是名设计师。你或许是艺术指导、设计总监、创意总监、UI设计师、UX设计师、信息架构师、移动设计师或是设计兼开发。但你不是魔法师、战士、大盗、领主、教官、先知、炼金师、绝地武士、传道者或是英雄。实际上，你甚至也不是忍者或摇滚明星。

这也和使用这些头衔的人的专业水准有部分关系。如果你最大的网页设计项目是你亲戚的品牌，他们付给你的只是蝇头小利和免费的家庭啤酒，那你可算不上什么宗师。抱歉打碎了你的美梦。

相反，如果你是像Jeffrey Zeldman、Adelle Charles或Jakob Nielsen这样的人物，你才会想要称自己为宗师，没有人能否认。不过你会发现，这些人中并没有人使用这些古怪的职位头衔。（他们用的分别是创始人、董事长、视觉设计师、标准和用户顾问）

##为何不好

设计师自命不凡会导致他疏远其他人。在很多圈子中，设计已经被看成是一种不复杂、几乎人人能做的工作。

创造这些听起来像笑话的头衔，只是在强调这种观点。除此之外，它使我们听起来狂妄自大，不近人情。

###疏远客户

客户要找的是网页设计师。他们找的不是宗师、教官、战士或是领主。他们只要设计师。他们想要那些不会嘲笑他们不懂韵律和层级区别的人，也不会嘲笑他们不懂托儿所网站为什么不建议用红黑主题。

###疏远公众

除了客户，整个公众对设计师也有负面的认识。这点一直没有得到重视。我们被当成是像素技工，或是一堆和父母住一块儿的技术宅。

这些听起来扭捏作态的人造头衔并不能改善公众的印象。“设计总监”一词至少能引起些许敬意。“梦想炼金师”却不行。甚至都没有真正提过你究竟是干什么的。

###疏远其他设计师

有些设计师喜欢这些花头，并不是每个人都这样。你会让那些使用正常头衔、用易懂的语言描述自己工作的设计师觉得你看不起他们，不把他们当回事。

##不止这些职位头衔

除了职位头衔外，很多设计师的全部用语都透露着自命不凡。在作品集、联系与通信中使用自大难懂的术语，让潜在的客户难以与你建立联系。

只有少数人会积极回应这种自命不凡，多数人不会，这样的代价值得吗？

##8步摆脱这种境地

自命不凡是会上瘾的。下面这些步骤能助你摆脱这种境地。本来这有12个步骤，不过应该没那么复杂，强迫别人做到这12点看起来也很自大。

###1. 承认你很自大

设计师克服自大倾向的第一步，就是意识到并承认这一点。

###2. 关注那些启发你的人

深入了解那些你仰慕的设计师。你可能会发现多数最优秀的设计师不用自大的头衔，而是用那些能够准确描述他们工作的称号。即使有些使用有趣的头衔，也是通过一种挖苦的方式，而且使用很有限。

以那些已经获得成功的设计师为榜样，那是你想要达到的境界。

###3. 用能够描述你具体工作的头衔

如果你是网页设计师，就叫自己网页设计师。如果是艺术总监，就自称艺术总监。创意总监、项目经理、设计总监和其他所有设计相关的岗位都一样。

###4. 重写文案

试想你奶奶在看你的网站，或者是某个认为翻盖手机就是高科技的人，你的文案应该怎么写。任何情况下，目的就是要写出友好易懂的文案。

###5. 为自命不凡道歉

虽然这一点有时并非必须，但意识到自己令人生厌总是件好事。

###6. 密切关注你的自命不凡

当下你已经摆脱自大的境地，并不意味着它不会反弹。所以，永远要保持警惕。

###7. 教育他人

当设计团队中有人想要用“登峰者“或“宗师”这类头衔，你要教育他们。告诉他们为何这些内部称号之外的头衔是不好的。

###8. 嘲笑它

首先，你要嘲笑这类头衔。再说一遍，这可没有攻克癌症那么伟大。如果你实在要用“绝地武士”这样的头衔，那就去用吧。要知道你会疏远他人，切记它听起来让别人觉得多么荒谬，如果这使你开心，你愿意冒这个险，那就用吧。

原文链接

抠脚大汉的内心

hi@victor42.work (Victor42) — Wed, 17 Sep 2014 00:50:00 +0000

farmland

我有天恍然大悟一个故事，原来各门语言之间的近似不是巧合，其背后必有历史原因。

南北朝时期，有名外籍人士参军抵抗北方民族，名叫farmland。入伍当天，福建籍的什长向大伙儿介绍她，然后……然后的事情你都知道了。

安德的游戏

在这部奇葩的电影中，全程没有闪光点，同样也没有笑点。不过电影的末尾，竹子人为制造了一个。

安德摧毁异虫的母星之后，只身寻找虫后。

虫后胚胎的守护者看见安德，疾步上前给了安德一巴掌，我们姑且认为这算是“掌”吧……演到这里，竹子开始解说守护者的内心独白：

“哟！人类耶，活的人类耶！”

一段谁看了都会说无聊的对白

小钢和我没事就拿古文开涮，我们一致认为这种贱贱的特质正是现代汉语所急缺的。

小钢（蓝）我（绿）

奇特的需求

竹子的前公司有一块业务是页游，就是那种目标人群是三线城市屌丝的页游，你懂的。有天，作为UI设计师的她接到一个奇特的需求。公司的游戏没有通过审核，因为人物穿着过于暴露，几乎就是一丝不挂。所以公司要求竹子给她们……

加衣服！！

抠脚大汉的内心

小帅四处旅游啊，好生羡慕。这趟去成都看望PP，或者说假借看望PP之名去湖吃海喝。还要发朋友圈来刺激我们。

就是爱乱入

前阵子QQ群出了个很逆天的功能，某天上线就看到潜水、冒泡、吐槽、活跃。后来发现这功能还更新了，支持自定义，原来从高到低总共有6级。

那615群果断要自定义一下的啊，来，从低到高：喽啰、沙僧、八戒、悟空、师傅……曹操！

嗯，不知道为什么，乱入型笑点总能博得我的欢心。

天将降大任于斯人也

有感而发一则：

天将降大任于斯人也，必先苦其心志，劳其筋骨，涨其房租。

丧尸日记

竹子迷丧尸剧，各种丧尸，做梦梦到被丧尸追，甚至还学会了站在丧尸的角度看待世界。

在《walking dead》第一季中，两个人浑身涂满内脏混入僵尸群中的时候，我们可以这么说：“丧尸日记，第二天。今天看到两个奇怪的家伙，一点都不淡定，他们一定是新来的……”

引起共鸣的歌词

做了一份问卷，里面有道题是这样的：“最能引起你共鸣的是哪句歌词？” 你猜我第一反应是哪句？

“我的头发只剩下从前的一半。” ——《最近比较烦》

投资海外不动产

CC去内蒙出差。不明真相的小钢问CC，你去内蒙投资买房啦？

群里顿时骚动了。

投资海外不动产！从内蒙偷渡去外蒙古，买下一整个寨子的蒙古包！

为网页文字的可读性而设计

hi@victor42.work (Victor42) — Sun, 14 Sep 2014 00:01:53 +0000

[国外设计第57期]

可读性：“阅读的状态或质量，是一种影响印刷品持续阅读难易程度的属性。”——dictionary.com

文字可以是优美的、简单的、狂放的、有趣的、激动人心的，还有很多其他种类。它能激起情绪，帮助用户理解你所要传达的讯息。字体有很多种，但有一点是共通的——它必须具有可读性。

这是一个时常被遗忘的因素。设计师们往太狭小的空间填入太多信息，或是选用了外观胜过可读性的字体。但重点是：如果字体无法阅读，你的设计就无法完全生效。

尽管有些耸人听闻，但它几乎是普适规律。你会问：“作为艺术元素的那些字体怎么说？” 不可阅读的字体在这类设计中确实能发挥作用，但是，仅限于与可读的文字搭配使用。

###在狭窄空间体现可读性

什么使得文字能够阅读呢？它实际上是很多因素共同作用的结果，包括行长度、行距、字体样式、外边距和内边距，还有颜色和对比度。

每一个元素，都影响着屏幕阅读的难易程度。这每一种元素，都是设计师能够操控的。记住，本文中谈论的这些元素，是指网站主体部分的文字，此处文字的可读性可以说是首要考虑因素。（别处文字的标准相对宽松许多，只要主体部分高度可读。）

行长度：每行的字符个数对于整体的可读性起着主要作用。如果文字段落非常宽，那是很吓人的，难以阅读。同理，每行文字太短也不行，会给读者的眼睛带来压力，造成混乱。
行距：每行文字间的间距也同样重要。看看这篇文章，如果每行文字都与上下两行粘在一起，你就无法理解这些句子。
字体样式：字体的样式也会影响可读性。简洁的衬线字体和无衬线字体是最具可读性、最易浏览的，而那些华丽的手书和新奇字体则最难破译。
外边距和内边距：和行距一样，元素周边和之间的空隙也影响着用户阅读文字本身。
颜色与对比度：文字颜色与相应背景也至关重要。如果在绿色背景上写绿色文字，就难以阅读了。设计师选择浅色字深色背景，或是深色字浅色背景，都是有原因的。对比使得字符容易阅读。

###不同屏幕上的可读性

那如何创造最易读的文字？如果是正文文字，有一些基本准则规定每行的字数——每种设备不同—— 有助于打造最佳的可读性。

从何开始呢？最佳行长度有助于帮你确定文字段落的大小。可以这样：确定正文部分的宽度——通常可以假定分成桌面、平板、手机三种尺寸。然后调整文字大小到理想的单行字数。

虽然还有其他因素在起作用，这些准则是很好的入手点。

桌面：每行55到75个英文字符，包括空格；理想状态是每行65个字符
移动设备：每行35到50个字符

将最佳的单行字数与绝佳的行距相结合，可以提升可读性。通常，行距最好是按照正文字体字号的百分比来定义，也可以定义为固定值或是em。

桌面：字号的1.5倍
移动设备：字号的1.75至2倍

如果你想找个工具来简化所有这些工作，试试黄金比例文字计数器。

###可读性的其他提示

要打造可读的排版，正文以外的文字也大有关联。使用标题、无序列表、段落间的额外间距和颜色，也能提升整体可读性（标题则有助于浏览整个网站）。

考虑使用如下元素增进文字层级，创造更完整、更易读的网页设计。记得要把这些元素“设计”成独特的字体、字号和颜色，并要在正文中保持协调。

标题
链接
粗体或斜体字
无序或有序列表
图像元素，例如照片
说明文字
引用文字
在各元素中混合使用衬线字体和无衬线字体

##10种易读的字体

没有一篇讨论可读性的文章不推荐字体的。下面有10种高度可读——并且相当流行——的字体供你选择建立网站。

###无衬线字体

Open Sans

Lato

Exo

Nobile

Droid Sans

###衬线字体

Arvo

Old Standard TT

Abril Fatface

Vollkorn

Josefin Slab

##可读性清单

既然你已经有了好点子，决定下个设计项目中要使用什么字体和样式，你确定能以一种完全可读的方式将它们组合起来吗？下面是一列清单，供你规划字体的设计。

主体部分字号够大吗？在每种设备上，它是否达到最佳的行长度？
每行文字间是否有足够的间距？
文字与页面边界和其他元素之间有没有足够的空间？
正文文字颜色与背景对比反差够强烈吗？
每个新段落之间是否有额外的空隙？
标题和其他元素与正文文字不同吗？
有没有使用其他元素（无序列表、粗体字等）分解大段文字？
正文文字是否使用了易读的字体（建议选用一种衬线或无衬线字体）？

###结论

可读性是设计中至关重要的组成部分。如果无法阅读和理解页面上的内容，对于用户而言，它就完全不相关也不重要。

如何在设计项目中规划可读性？你有没有其他通往成功的技巧？在评论中与我们分享吧。

原文链接

Material Design设计文档的4条训示

hi@victor42.work (Victor42) — Sun, 07 Sep 2014 18:42:02 +0000

[国外设计第56期]

Material Design是Google打造的一套新的视觉语言，用来统一它的多种产品。Google发布material design的概念时，同时发布了一些文档，满足人们对于他们视觉指南的好奇心。

Material Design文档是一套关于如何进行设计的优质资源。

Google的文档，尤其适合那些想要向行业引领者学习创建视觉美学的设计新手。同时也让经验丰富的设计师了解Google的思想。这是一份编排精良、经过深思熟虑的文档，为我们带来了Google的设计师们的领悟。这份文档包含了大量的训示。我已经通读一遍，在此想向你分享一些其中的干货。

##通过动效来建立有意义的关联

Material Design大量强调设计中的动效和动画。重要原因之一，是它可以让用户清楚看到自己的操作如何对界面产生影响。Google举了个向相册添加图片的例子。如果你看看下面的这个例子就会注意到，上方覆盖的层有淡入淡出效果。出于两个目的：清晰与愉悦。首先，它建立了一种视觉层级，用户认为它在界面的上方。尽管这是技术上实现，并非真实的，因为界面并不分层；但它使用户以一种更简单的方法理解界面。这就是清晰。

将它与第二个无过渡、界面突然出现的效果相比。它显得很突兀——这就是建议使用淡入淡出的第二个原因——它也没有建立任何视觉上的认知。新的界面突然出现，用户的操作和界面的视觉变化有何关联，它没有给出任何解释。错失了一个愉悦用户的机会。

With transition

Without transition

“避免生硬的切换。生硬的切换很突兀，让用户花大量精力理解其中的过渡。”视觉的连贯性

##密切关注字体

Material Design指南有大篇幅的字体章节。很明显，其中精髓是要我们注意字体运用，尽可能提供最佳的阅读体验。这可以提升整体的体验。如此众多的设计关注按钮这样的UI细节，但是有多少真正兼顾了字体的？这可是我们很少提及的东西。这字体的这个章节中，你可以看到Google的设计师为其付出了多少努力。

“与背景颜色相同的文字难以阅读，这点很好很理解。不太明显的一点是，反差太大的字体使人眼花缭乱，不易阅读。这点在深色背景上尤为显著。”标准样式

像行高和颜色这类是需要特别定义的，为了尽可能给用户带来最佳体验。Roboto字体甚至也被重新定义了，来跨平台提升它的易读性。而且，一段文字呈现的方式至关重大，因为缺口和隔断使得阅读更困难。注意去除这些隔断文字，这大有帮助。

##运用色彩

多数人对Material Design的第一印象，是它大胆明亮的配色方案。看看色彩章节，你会发现有这么多种颜色。这一点非常棒，有以下几点原因。首先，大胆的用色可以给Google的界面赋予个性化。创建一套非常妙的配色方案没什么不妥。这是一次很好的改变，因为iOS7问世时，它的主色是浅灰色系。而且，Google建立这套色彩指南的方式非常清晰，是使用颜色的极佳参考。

面对现实，当有太多色调可供选择时，颜色的确可以很吓人。虽然Google提供了广阔的颜色选择范围，它也提供了如何使用的指南。Google开篇显而易见地陈述了：限制你的颜色选择，有需要时使用多种深浅变化，并且明智地使用辅助色。

“我们非常鼓励在界面中大面积、大胆地运用色彩。界面中不同元素承担配色的不同部分。工具栏和更大的色块会使用主色。这是APP的主要颜色。状态栏使用更深色调的主色。” UI配色应用

##全部都归结为易用性

Material Design文档的最后章节似乎有着至高的重要性。易用性与可用性章节提及了大量问题，设计师在设计APP或界面时需要全面考虑。这章的作用在于，提醒你设计无论如何都要易用。

“当所有人——不论残疾与否——都能够浏览、理解和使用一个产品来完成他们的目标时，这个产品就是可用的。真正成功的产品，对于尽可能广的用户群体都是可用的。”可用性

这份文档向你提出了几个严肃的问题，你的产品没有声音、色彩或者屏幕时，如何做到可用。一个残疾用户能轻松使用你的产品吗？

文档的这一章探讨了导航、易读性、用户和反馈的一些细节，让你清楚了解你的产品的关注点应该在哪里。如果你通读一遍，你会发现刚才指出的那些问题显而易见，例如确保最小屏幕元素点击区域是48×48像素，不至于太小，使一般的人类手指可以对它进行操作。有一些则更具体，比如确保链接都有恰当且有意义的标题。

*“**让链接有意义。*每个链接的指向是否清晰？类似“点击这里”这样的常见链接文字，并不能解释链接指向何处。把目的地放入链接自身当中。对于“点击这里”有个更好的解决办法，是使用具体的链接，比如“设备选项”。有些无障碍模式让用户只看到链接，忽略其他内容，为了使导航更加有效。”

随着科技产品用户人数的激增，关注易用性至关重要。看到material design文档贡献了一整章来探讨易用性和可用性，真是大快人心，它提醒我们，产品——不论是什么——对所有类型的用户都要是可用的。

###结论

我支持你深入研究Material Design文档，这是免费的在线文档。其中有非常棒的建议和干货。对于设计新手和有兴趣学习界面设计的人来说，它是一件学习工具。对于经验丰富的、想要先睹为快行业引领者设计思维的设计师而言，它也在刷新着他们的理解。

原文链接

室内盆栽模块，打造咖啡馆中的“绿洲”

hi@victor42.work (Victor42) — Sun, 31 Aug 2014 11:04:37 +0000

[国外设计第55期]

设计团队Penda为北京的这家咖啡馆打造了这套设计，木质架子与花盆容纳在金属框架中，安装在咖啡馆的边沿。

Penda最近还刚和Dezeen说到竹制建筑的复兴，他们应北京房地产开发商Hongkun之邀，提出了这种模块式的家居系统，可以应用于它的Home咖啡馆在全中国的分店。

打造“中国重度污染区里一片可供呼吸的净土”，基于这个理念，设计师结合了具有空气净化作用的植物与草药，它们散发的香气与烹煮咖啡的香味相映成趣。

延伸阅读：钢筋货架与隔墙:都柏林的咖啡馆

Penda说：“这家咖啡馆不只靠高品质的咖啡吸引顾客，也让人在这座被污染的城市中有一片绿洲可供享受。”

木制花盆由带螺纹的钢筋结构支撑，它通常用于加固混凝土。

设计师将这些使用过的钢筋稍加改造，将他们焊接成立方体的框架，创造了一些能够重新装配的模块，通过不同的方式分割空间。

最终的构造，将咖啡馆的开放座位区与沙发区分隔开来，并且包含了服务台和餐具回收点。

“方格状的结构提供了一个空间，可供摆放各种立方体元素”，建筑师说：“通过组织这些立方体，模块体系可以灵活多变地装配出不同的绿洲。”

方格中装载着一些养护成本低的植物：包括吊兰、耳蕨和白金葛，同时培养了一些藤蔓植物逐渐覆盖住金属架。

除了长短不一的花盆外，漆成黑色的架子上还包含了立方体形的灯和放书的盒子，根据所需的私密程度，以不同密度分布。

后续的模块还会集成金属花盆、扁平架子，还有直立或悬吊式裸露灯泡等单元。

外围原始的石膏墙被漆成了黑色，与触感良好的皮沙发、盒子的木制表面还有其他独立家居相映成趣。

植物和散落的红色版Jean Prouve经典标准座椅提供唯一的色彩。

Home咖啡在天津也开了一家分店。

Chris Precht和Dayong Sun在2012年创立了Penda。这家公司之前的项目包括由波状拱门分隔的Hongkun艺术空间，还有一位艺术家的甜甜圈形的房子 .

结构概念图

模块概念图

植物概念图

平面图

天花板

###组图

原文链接

网页设计中的彩色滤镜效果

hi@victor42.work (Victor42) — Sun, 24 Aug 2014 12:08:37 +0000

[国外设计第54期]

在当今这个充斥着先进的特效和精妙风格的世界中，谁曾料到，像纯色和渐变这样简单的手法，竟能够催化出创造力，并极大提升网站的美学水准？现代网页设计师们，证明了优雅的插画、精致的图形和壮丽的照片，都能在彩色滤镜效果下很自然地得到强调。气氛焕然一新，网站开始变得光彩夺目。的确，它有助于解决某些问题。

首先，彩色滤镜能给网站耳目一新的外观，却不会增加负担。其次，它通过搭配传递各种情绪的色彩，很好地丰富了设计。第三，作为一层低透明度的遮罩，它不会掩盖主背景的魅力，对于想要轻微淡化轮播图或视频区域，却仍希望其吸引力不减的人，这点尤其有用。最后，它为前面的内容提供了坚实的基础，兼顾了可读性。

参考：最佳实践：一流的品牌与推广网站

这种方案能非常协调地与各种元素协作：提供强烈反差的白色、极受欢迎的扁平风格元素，还有为项目增添精致微妙感的轮廓式图形。

这里有些杰出的网页设计，示范了如何正确地运用这项技巧。

Zimya

着陆页带有一层美妙的半透明渐变，立刻唤起积极温暖的感觉。从紫红色到橙黄色，遮罩层华丽的颜色令人着迷。

Red Collar

平滑的半透明渐变极大地丰富了背景图——这家机构的视觉象征。它增添了几分独特，不仅与整个场景形成互补，也形成了热情洋溢的氛围。

Ingram Cole and Land

这个网站基于一些非常棒的赏心悦目的效果，这不仅指它的动画，还有成功贯穿整个网站设计的照片处理手法。从紫色到粉色，温暖而微妙的渐变，使欢迎页面看起来相当美妙奢华。

Adopt Wales

设计师在视频背景上覆盖了一层迷人的粉色渐变，营造了亲切友好的氛围。颜色与透明度的选择很好地突出了上面的元素。

Snippet App

对于更喜欢创造冷静与便捷的整体感观的人而言，蓝与白的结合是非常有用的。设计师实际上用了三种色调，不过这两者占据主要地位。

Joyce Van Herck

Joyce Van Herck是名高端艺术家，她的在线作品集网站嵌入了优美的几何图形。甜美的半透明渐变使斜线拥有活力，加强了这种愉悦的氛围。

Electric Mainline

和前面提到的Snippet App很像，设计师运用了蓝白混合。不论如何，低透明度的遮罩层，使用户欣赏其背后那张扮演主角的背景图。

Solid Giant

使用粉色是为了解决几个问题。首先，它能有效地突出标语、logo、导航和微妙的白色幽灵按钮；其次，它建立了一种轻松的氛围；最后，它体现了品牌特征。

Invelab

同样，设计师试图在背景与前景之间营造完美的对比，同时也将注意力引向工作室的图片。明亮的紫色有效地与白色形成互补。

M2B

欢快的半透明渐变强化了网站的视觉表现。正由于采用了这种方式，全新的色彩使得背后的图片陡然增色。而白色被用作一种补充色，使内容看起来醒目。

Lovedays

设计师在欢迎页面上运用了扁平风格。极简设计只包含了几个轮廓式元素、简洁的字体、朴素的按钮，还有城市背景图。后者与半透明的蓝色相配合，增加了可读性。

Numero Neuf

首页的特色是大量基于图片的导航，每一项都覆盖了一层黑色半透明滤镜。这种方式很常用：如果你想为文字营造完美的对比，并淡化菜单项，很自然就应该将注意力引向某个选中的项。

Evoluzione Telematica

绿色使人联想到正能量，此处就是这么用的。明亮的色调与白色共同建立了一种积极的形象。

The Place

这位设计师借极简主义的方式重现了优雅。所选的颜色反映了网站的个性，统一了视频样式。

Obbaki Foundation

颜色可以提升感观的协调程度。它丰富了网站的主题，同时轻而易举加入了一些戏剧性效果，对整体氛围有一定贡献。

Studio Up

这个机构通过迷人的效果展现了一个视觉差滚动的介绍页面，向普通用户证明了他们熟稔网页流行趋势。每一页都有其独特的颜色，覆盖在动态的背景上，用以突显其内容。

Hype Agency

设计师在焦点区域挥洒了一整片的橙色，为网站营造了恰当的积极的氛围。另一种颜色则是白色，非常明亮并融入其中。

Louis Currie

Louis Currie不满足于单一颜色；他用了一整套不同的蜡笔色调交替展示。这个网站绝对能体现他敏锐的色彩感与协调感。

Grey Group

华丽的青绿色覆盖了首页，像一层没有重量的轻纱，强化了这个网站井然有序的外观。轮廓式图形和幽灵按钮很好地突出并积极配合主色调。

Papertelevision

薄薄一层明亮多彩的颜色赏心悦目，伴随着每个主要部分。首页的深紫色几乎不容易注意到，但它仍然能使页面活泼有趣。

###结论

彩色滤镜——这种从前在平面设计中的基本技巧，在网页设计中重获新生。虽然色彩轻微地稀释了设计，它也带来了一丝精致和特别的魅力，同时兼具功能性。

原文链接

品牌为何需要设计指南？如何创建？

hi@victor42.work (Victor42) — Sun, 17 Aug 2014 21:21:03 +0000

[国外设计第53期]

很多设计师与创意工作者都忽视了品牌设计指南的作用（有些人也称其为品牌宝典，或其中的一部分）——它给出了一系列清晰的准则，规定了线上线下的市场推广材料应该长什么样。

风格指南可以为你节约时间与金钱，减少遭遇的挫折，使市场推广材料更易于维护和创造。把它当作一套标注详尽的衍生品；它提供了如何实施的相关说明，有时甚至能让你深入了解其中缘由。

果你不怎么确信你服务的每个品牌与公司都需要它，或者不确定如何创建，请往下读……

为何每个品牌都应该有设计指南

对于小公司或只有一个设计师的公司而言，设计指南似乎并无必要。但说真的，每个品牌都应当有风格和品牌指南，来确保他们产品的每种视觉元素统一一致。

先拿只有一个设计师的情况来说。如果你是你们公司项目中唯一的设计师。你设计他们的logo、名片和所需的其他所有市场推广材料。你对所有的元素都心中有数。

现在，一年后，公司规模扩大了两倍，突然他们需要再雇一个设计师来分担你的工作。这下好玩了，你得凭记忆教这个新人品牌的设计指南。其中包括很多过去一年内你根本没有考虑过的事情。

当然，如果什么重要的东西没有传达，他们会指责你没有教好新员工。

如果你可以给出一份设计指南，包含了他们所需的一切：颜色、logo尺寸和放置、字体使用等，事情就相当简单了。

又或者说你是为多个客户服务的自由职业者。一份设计指南可以使你轻松回到数月或数年前完成的作品中，而不必梳理旧文件来了解用了具体哪种字体，或是具体颜色的十六进制色值是什么。相反，你可以拖入一个文件，就能瞬间看到你所需的一切。

设计指南可以确保你的作品不会被一些新的、水平欠佳的设计师糟蹋了，他们并不理解你的设计如何发挥作用。你最不想看到的，是你精心设计的logo被缩得太小，或是与其他元素靠的太近，实际上这损耗了它的影响力（更糟的是，元素间的留白彻底被打乱了）。

为每个你服务的品牌创建设计指南，可以使你的工作更轻松，也让你的作品更加统一（使得所有图片显得更专业）。初入一个项目时，创建一套基础的设计指南并不怎么耗时间，却能省去你大量的工作，使你在这过程中避免无尽的挫败。

##基础元素

每套设计指南都会有细微差别，因为它取决于品牌有多复杂，可能需要多少种市场推广材料。不过有些基本的元素几乎在每套设计指南中都会出现。

字体

每个品牌的市场推广材料中都应该使用统一的字体，无论线上线下。列出这些字体，配上例子和字符集，这点尤为重要。

别忘了除了字体使用之外，你可能还得指定标题、照片说明等文字的字号。指定字体族中禁用的特殊样式和字重也是个好主意，连字或备用字符该不该用，诸如此类。

###颜色

品牌使用的颜色应当尽可能详细。这意味着不仅要提供网页使用的十六进制色值，还要有等价的CMYK甚至Pantone色值用于印刷。不是所有颜色都能完美无缺地在网页和印刷间转换，所以指定优先级是个好主意，这样不会导致最终颜色和你原先的颜色差别太大。

很多十六进制RGB色域直接转换时，若不进行人工调整，会在CMYK模式中发生剧烈的变化（某些蓝色通常会变灰暗，红色会偏橙色或粉色等等）。花时间确认和纠正每个色域，这样可以得到尽可能好的结果。还要确保检查颜色的印刷效果，而不仅仅是屏幕上。

###Logo尺寸与位置

通常，多数logo太小会失去其展示效果。你可以设计一个备用logo（通常是简化版）用于小尺寸，或者就定义一个logo展示的最小尺寸。

还要指定logo周围需要多少留白，以保证不影响它的效果。指定logo能否以其他颜色形式呈现（尤其灰度模式），还有它是否只能用在中性背景色上，还是彩色的背景也可以。还要指定logo能否放在边框中，这种情况周围要有多少留白。

###图标或其他图形

如果还有独有的特殊图标（或图标集），或者通用的特殊图片，那么指南中得指定这些东西。包含一个指向该图标集的链接，因为图标名并不唯一，容易搞混。

你还需要指定是否只能用某种特定的类型或样式的图片。比如，你可能会指定所有图片都需要包含某种特定颜色，或者都要加上复古的滤镜效果，或者都得是黑白的。

###文案写作指南

尽管并非每套设计指南都会需要文案撰写说明，如果你的品牌想努力表现出一种特定的写作风格时，这是个好办法。

可能有些特殊词句会包括在内，同时可能还有些其他词句应该不惜一切避免使用（有时候因为他们与竞争对手有紧密关联）。指明这些非常重要。

可能还有一条，文案应当积极向上，或者要专业，或利用对特定人群有吸引力的语言。

###网页的特有元素

尽管有很多元素通行于印刷品和网页间，还是有些网页特有元素，印刷品上是找不到的，网站中却普遍存在。

这包括按钮样式和层级、表单样式呈现之类。若没有一套清晰的规则可以遵循，要使这些东西在多个页面（甚至多个网站）保持统一，会是一项重大的挑战。 ###还要考虑其他元素

你可能还要考虑为下面这些东西增加指南：

品牌历史、愿景和个性化信息。这些在品牌宝典中很常见，可能在标准的设计指南中不多见。
社交媒体指南，包括应该分享的文章类型，还有各种品牌元素应该如何用于各社交网站。
网站中的设计布局和栅格系统标准，有时印刷广告中也有。
其他材料的指南，比如宣传册或名片。
所有元素的使用样例。

如果你想看一些有启发性的设计风格指南案例，看看我们去年秋季发布的20套启发性的品牌指南。

##设计指南该有多长？

设计指南的长度可以从一个页面到几十页，取决于品牌的复杂度，还有市场推广材料的种类。

如果是极简的网站，只有一个logo设计、明确的字体和用色，没有线下的材料，单页的设计指南勉强是够了。

但是，一个拥有众多部门、涉及诸多市场的巨型跨国企业，广告横跨众多媒体，就需要类似一本书来阐明所有用法。

不论哪种，你的设计指南只需要包含必要元素，但是要精确传达品牌视觉风格等信息。

##一份活文档

你的设计指南不是一块石头。品牌是会进化的。会有新logo出现。网站会进行重设计。市场推广材料会更新。重要的是确保设计指南随着其他更新一并更新。

设计指南也有助于确保品牌以一种无缝的方式升级，尽量不会疏远你的用户。看品牌升级进展到哪里了，可以指出其自然进化的方向，好过鲜明的反差。

虽然设计指南应该具有流动性，会随时间变化，但还是要能查阅旧版本的设计指南。而且要确保你对设计指南做出的任何更改都是经过深思熟虑的，而不是无视现存设计指南的借口。

因为设计指南会随时间变化，确保每个需要的人都能获得最新版本，这非常重要。由于要更改指南的日期与版本，将文件放在云端服务器或其他中心位置是个好主意。

##整合设计指南

设计指南中的元素可以整合进网站中。包括CSS文件开头的注释，大概描述一下颜色和所用字体，可以确保你遵循设计指南。

一套完整的设计指南，对于任何可能使用它的人来说应该要简单易用。让人可以通过公司服务器或云端服务器访问也是个不错的办法。你可以在CSS文件中包含一个链接，或是通过其他方法（除非它有密码保护或是放在内部服务器上，不然实际上都应该允许公众访问）。

##内部还是公开文档？

越来越多公司向公众开放了它们的设计指南。它的意义在于：

让需要它的人（设计师）可以轻松获得这些信息。你可以给他们一个链接，而不用发邮件或是提供密码。
使品牌更加透明。
如果你的品牌有新闻媒体报道时，它会很有用，因为记者可以获得关于如何使用你们logo的信息等等。而不用等你的公关部门（或个人）回复他们。

当然，如果你决定公开你的设计规范，你就得保证它设计精良，和其他任何销售和市场推广材料一样。这会增加创建设计指南的成本和时间，使得修改它也更加困难。

公开的设计指南也让其他品牌抄袭你变的容易。但你做什么都无法阻止别人这么做（除非法律途径），设计指南确实使这一点更容易。它为品牌抄袭者减少了步骤。

不过，一旦你对自己品牌和业务有信心，这一点对是否公开没多大影响。

将它作为内部文件，更新和修改会更方便，对于初创公司非常重要。指南本身也不需要“设计”，让它尽可能保持功能性。当你的设计师工作负担很重，这么做是有巨大好处的。

设计指南的要点，是为所有人简化和加速设计过程。确保它具备这个作用，不论公开与否。

原文链接

界面的过渡效果

hi@victor42.work (Victor42) — Sun, 10 Aug 2014 10:52:20 +0000

[国外设计第52期]

设计师都爱雕琢细节。多数时间都用来折腾像素级的按钮、表单样式、设定字体，还要把图标打磨得像图钉一样锋利。很好，满分，大家请继续保持。

但是，还需要考虑一点，它们除了静态组合之外如何相互结合。按下按钮，表单就……直接出现吗？滑动删除一个项目，它就直接消失？那太奇怪了，也不自然。现实中几乎没有什么会这样突兀地直接切换状态。它给人感觉像是出了毛病。

那好。你写下了一条注释——它是“滑入”的。

如何滑入？速度多快？会不会反弹？有没有缓冲？静态的设计无法提供状态之间的衔接。

提到动画和讨喜的交互时，人们总是用“有趣”一词。对他们来说，这些动态效果很酷。但你猜怎么着？动画还有功能性的作用。它不仅仅是个美化过的细节。

动画利用了一个被忽略的维度——时间！一种将空间缝合在一起的隐形织物。即使不是数学宅，你也能理解这点。

我们来看看一些简单的概念：

##缓动/缓冲

传统动画中，断点决定了一团东西如何从A点移动到B点。它给动画增加了偏移量，决定了其余帧的时间间隔是怎样的。以这25帧补间动画为例，第13帧（中点）的位置有所不同：

瞧瞧！你已经学会了缓冲/缓动。电脑都是混蛋，喜欢线性均匀地填充这些空隙，因为他们就是一团懒惰的电路。优秀的动画/动效设计师多数时间都在与电脑作斗争，确保它们不会把这搞砸。

动画总是关乎时间。你可以尝试各种不同的时间间隔，会得到不同的结果。但这已经足够了。这不是动画教程，关键是让你思考时间与间隔的语言。

##关于界面衔接动画的一些创意

我之前说过，动画有助于创造情境。它帮助大脑理解信息如何流转。

向列表中添加项目

比如说你在看着一列动态列表，你希望用实时数据填充它。如果你把这任务交给电脑，它看起来会是这样：

我去，太挫了……

平滑地将它显示出来，只需要几帧动画。给你的大脑提供一点线索吧，想想这个列表发生了什么？

为了添加一个新项目，列表需要为它让出空间，然后（来自某处的）新项目填充了这片空间。突兀感大大减少了。状态淡入淡出还能使变化更加缓和。感觉更自然，因为我们联想到空间的相关情境——它反映了现实生活中，你往一堆东西里添加东西的过程。

再来几个：

进入列表项

典型的默认方式是滑动进入某一项。这是常用的一种模式，但整体在空间上并不怎么合理：

滑动的方向并没有给你任何有用的线索，除了一系列串成线的界面。

要不考虑一下把这项做成一个容器，点它之后在内部展示更多详情？

如果目的是进入该项，并使它吸引全部的注意力，我们甚至可以在同个界面中把其他所有都隐藏起来：

把>所有>界面>用>面包屑导航>串起来，很容易迷失方向。

内部展开的一个优势，是你不需要解释用户如何到达这个子界面。可以抛弃层级式的导航，因为用户看见了他们是如何进到那里。

我和Kyle Bragger 先生正在致力于打造Thinglist，一款Elepath旗下的产品，它里面加入了一些非常好玩的界面过渡效果。上面的例子演示了这些新特性。

你该看看这些界面过渡效果案例：

Clear：与手势操作紧密相关的动画。

Willcall：它有一套统一的律动节奏。状态之间不会有东西生硬地出现。非常有趣值得把玩。

Elepath的员工可以解释我对于动画的痴迷。毕竟我是一名动效设计师。

@pasql

你还可以参与branch的讨论：http://branch.com/b/transitional-interfaces-design-ux

最新消息：我为这篇文章做了一段50分钟的演说，可以在此观看（译者提醒：需翻墙）

如果动画使你无法自拔，我概不负责。

原文链接

玩家的体验:手游设计

hi@victor42.work (Victor42) — Sun, 03 Aug 2014 15:02:58 +0000

[国外设计第51期]

未来的一切都是移动端的。

移动端技术不仅改变了我们搜索互联网和玩游戏的方式，也改变了我们的生活方式。所以它的发展吸引了投资者，紧接着，他们将移动端平台推向更广阔的人群，也属意料之中。

参考：热门移动端用户输入方式设计

关于如何打造易用的移动APP，使用户体验流畅无缝，已经有很多相关讨论，但很少人谈论手游玩家的体验。

##何为可玩性和玩家体验？

你猜对了，可玩性就是游戏的可用性。

可玩性是反映游戏趣味和可用程度的指标，尤其是游戏的交互方式和画质。它是游戏过程的质量。

正如已成为易用性准则的Norman的10条启示，也有很多可玩性启示作为游戏设计的评判工具。可玩性启示是一系列提升游戏设计的准则，同时玩家体验也关乎游戏的改进。

玩家体验是游戏的整体印象和感觉。它包括玩家游戏交互的所有方面，从下载游戏到为之着迷，或是永远删除它。

##手游用户体验的挑战

手游不像PC游戏和游戏机。在这3个主要的游戏平台间有一些重大区别，需要考虑到玩家的体验。

屏幕尺寸。对手游而言，PC游戏和游戏机是在“巨”屏上玩的。这一点对设计有巨大影响。
人体工程学。可能移动端用户体验的最大挑战，就是玩家实际上是手拿着设备在进行游戏。这就意味着玩家同时拿着游戏控制器和屏幕，增加了设计人体工程学用户界面设计的难度。
触屏操控。触摸屏缺乏触摸反馈，使它更难以提供与PC和游戏机同等的游戏体验，尤其在更加复杂的游戏中。

考虑到所有这些局限与机遇，手游开发者似乎更多主攻休闲游戏，当然手游也不仅限于此。但是我们如何运用移动端平台的力量，并同时尽可能减小小屏幕与奇怪的操控方式所带来的不适呢？

创造简单友好的教程

大家普遍相信玩家讨厌教程。事实并非如此。

玩家厌恶那些沉重的文字教程，太无聊，需要很长时间才能完成。不幸的是，多数手游教程都处于这种状态。一些开发者更喜欢不设置教程，对于一大堆Flappy Bird这类游戏还是管用的。

但是好的教程对于玩家体验是有帮助的。它让人直观地理解游戏的情节和基本操作，提升了游戏玩法和易用性。

有用的教程是简短易懂的，文字尽可能少。它吸引玩家立刻开始玩。确保要给经验丰富的玩家留有“跳过教程”的选项，对于其他玩家，保持教程在1分钟内。

TwoDots的教程非常棒。在玩几个初级关卡的同时，你也在学习玩法。

为小屏幕设计

有限的屏幕尺寸使得每英寸都格外有用，设计师必须明智地使用空间，也要考虑到用户手持设备的姿势。在多数PC游戏中，动作按钮和控制选项被填塞在界面的角落，在桌面端这样的体验很自然，在移动端却没法用。一般手机用户难以触及屏幕的角落。所以，最好将最重要的按钮放置在屏幕正中央。这点主要是对于竖屏而言，但在很多例子中，它也适用于横屏游戏。一些游戏甚至根本不支持横屏模式。如果这样的限制能让你设计出更好的游戏体验，那绝对要遵循。 使用直观的手势操作

手游的触摸操作虽然有着这么多缺点，但它有个特有的至关重要的工具——手势。这就是触屏手游取得如此巨大成功的原因之一。谁不喜欢像操控方向盘那样倾斜屏幕，而非通过按键来玩赛车游戏呢？

手势使得游戏玩起来更加自然有趣。它也提供了良好的创新土壤，孕育出使游戏更有趣的解决方案。不过要保持这些手势操作处于直觉的水平。大家已经熟悉的双指缩放手势，用在完全不同的操作上，就不合理了。你可以深入钻研你的游戏背景故事，试着通过人类行为想出一种新的手势操作，玩家的体验将会获益良多。

常年受人青睐的愤怒的小鸟，就是一个从现实世界取材手势操作的极好案例，在里面你通过滑动来使用弹弓弹射小鸟。

为可玩性与趣味性而设计

游戏一定要有趣。

这条原则凌驾于其他所有可玩性原则之上。事实上，如果游戏有趣，那一切好说。它会使用户上瘾，即使存在重大错误、设计粗糙。就拿Flappy Bird来说——它不具备顺滑易用的设计，也没有直观的手势。只有点击。但它确实冲上了appstore的排行榜，就是因为有趣。

“游戏好玩第一，设计第二，技术第三。”

别怕对用户发出挑战并令他们思考（抱歉，Steve Krug），通过非强制的手段引发好奇心。还有一个让用户一直玩下去的方法，就是持续更新游戏，推出新特性和游戏模式。Subway Surfers是个很好的例子。它是典型的奔跑类游戏，不过酷的是你偶尔能发现新城市。

设计有意义的游戏

手游是个动态的体验，拥有清晰易懂的用户反馈是首要条件。游戏对于玩家来说必须合理。它要有清晰的目标和激励。游戏中发生的一切，都应该有清晰易懂的原因。

更重要的是，要让玩家感觉在操控游戏，并且肯定至少有某种方式可以获得胜利，不然它就没有意义。

##结论

创造令人愉悦的玩家体验，当然做比说困难，幸亏手游非常灵活，即使在发布之后，你也能做出几乎任何界面上的改变。确保追踪玩家与游戏界面交互的方式，可以了解他们在哪里遇到了困难，相应地改善用户体验。

原文链接

如何在网页中使用留白

hi@victor42.work (Victor42) — Sun, 27 Jul 2014 11:09:41 +0000

[国外设计第50期]

所谓留白，有时也称作负空间，两者是同一个概念。尽管这个术语尤其指留“白”，但它所指的区域并不一定要是白色的。它只是网页布局中环绕各元素的空白空间。

这样的空间体现为多种不同形式，例如图片、图表、缝隙、外边距、列甚至一行行文字之间的空间。尽管它似乎“空无一物”，里面没有任何其他设计元素占据一席之地，但我们不应该如此看待它。视之为“无物”，也许打造美感与表现力的机会就流失了。

处理得当的话，留白确实可以为网页设计带来大量的益处。不应减少网页设计中的留白，相反，应该增加网页中的负空间。一些知名的大众品牌已经在朝这个方向前进，更多的设计师们也在追随他们的脚步。

##更多的留白，等同于更奢华的品牌与网站

客户往往要求设计师尽可能用尽网页里的空间，因为网页中的空间是昂贵的，只有有限的屏幕来展示信息。无论如何，反其道而行之——增加留白——促使设计师在更严格约束的空间中，打造更加光鲜的品牌信息。

另外，大家会觉得，留白更多的网站，它的内容比屏幕空间更重要。所以，品牌也显得更尽奢华，因为它牺牲了更多屏幕空间，反而将焦点汇聚在内容信息上。

奢华的品牌了解这层隐喻，通常都使用更多留白来达到这一确切效果。PotteryBarn是个知名的高档家具零售商，它的网站很聪明地使用了留白，恰恰反映了这一点。留白支配了主页，页面旁边大片的留白，更好地将访问者的注意力集中在页面中间的交易与促销信息上。甚至页面顶部的品牌名称本身，也在字符之间慷慨地运用了留白。

##留白提升搜索流畅度

两大搜索引擎Google和Yahoo Search，诠释了留白简洁有效，这个简单的例子再适合不过了。

Google准确地理解了一点，正在搜索某个话题的用户，不想被嘈杂的背景和广告分散注意力。因此，留白支配了整个Google搜索引擎页面，实际搜索框只占据页面中央窄窄一丝空间。类似的，Yahoo搜索也体现了使用留白的妙处。虽然这个页面顶部有长长一条菜单栏，理念还是相同的：大量的留白，使用户专注于搜索，别无他物。

##可读性和易读性得到应有的大幅提升

用好留白，任何网站的可读性与易读性都会得到改善。如果一个页面上的文字过于拥挤，它就会妨碍舒适的阅读体验，从而阻碍整体用户体验。更多的留白使文字更易浏览，从而提升阅读体验，也更易理解。

Information Highwayman是个掌握这项原则的个人站点，是D Bnonn Tennant——一名文案和市场专员的个人网站。擅长夸耀的他，知道什么样的网页内容对任何小本经营管用，令人欣慰的是，Tennant在他自己的网站上实践了他所宣扬的东西。标题的字间距、文字段落和菜单栏间距，有利于确保可读性和易读性。

留白也可以用于不同内容区块之间，不只是为了提升阅读体验，也为了将内容分隔成不同部分，使得信息的吸收更加专注。Andrew Lucas的网站很好地展示了这一点。他是名伦敦的设计师，留白在他个人主页上运用得行之有效。

##它让颜色更鲜明

也许留白最直接，尽管也是最简单的益处，就是突出网页中的其他色彩，使它们更加鲜艳。这点对于吸引访客目光大有帮助，因为颜色深浅、饱和度甚至浓度都更加突出。

I Am Dan背后的设计师处理得非常棒，他在主页上使用稀疏的色彩，成为了这个概念的典范。他的网站简直就是零星几片红色分割开的留白。通过这种手段，红色突显了他作品集的链接，吸引访客浏览他的站点，有效地突出了他的网站，因此提高了访客响应召唤的几率。

Zurb是家网页设计公司，他们网站也体现了留白如何能突出色彩。它的特点是主页顶部单一的纯色和不同页面的彩色图标（就在虚线附近）。除了极少的颜色使用外，首页的整体设计以留白为主。

像绿色、橙色和红色这种简单的颜色，能够创造出令人愉快同时吸引注意的外观。上面提到两个网站，都采用了极简的用色方案，因为有如此大面积的留白。因此，用色非常机智得当，使用户赞赏有加。

##留白不是浪费空间

网页设计师们越来越多抛弃之前的误解，认为设计页面时应该尽可能在屏幕内填塞每个元素、每种颜色。正如上面例子解释过的，留白被用于突出品牌内容、提升可读性与易读性、突显极简色彩时，展现出了强大的影响力。

俗话说“少即是多”，不论你怎么看，它的确适用于关于留白的一切观点。广义上讲，网页设计中的这种极简处理方式，如今正越来越盛行，这项趋势肯定能持续下去。

原文链接

探究栅格系统

hi@victor42.work (Victor42) — Sun, 20 Jul 2014 08:20:03 +0000

[国外设计第49期]

栅格系统是种限制。我几乎从不在设计作品中使用栅格系统，直到我尝试过用多种方法规划元素与内容。于是我使用栅格来收拾整理各种东西。有趣的是，我在设计过程中，无意中建立起了栅格系统。当我来回调整层级、平衡、比例时，一切都自然而然陷入某种栅格之中。若你也像我一样，你或许不怎么推崇栅格系统，但是从假定的栅格系统入手，有助于建立直觉化的流程。如果你最终转变了方向，只要重新定义栅格来适应你的设计就好。假如这套逻辑冒犯到了某些栅格设计的中坚分子，我表示抱歉。对我来说，设计更接近一门艺术，而非科学，或者说事后我才发现它是门科学。

我创建了许多栅格系统，你可以在此下载。我赞成你在下个项目中反复开启关闭每一套栅格系统。下面我们回顾一下这些栅格的逻辑基础。

http://www.w3schools.com/browsers/browsers_display.asp。近乎一半的屏幕分辨率大于1366x768像素，这个比例正在逐年扩大。多数框架和栅格系统都在为1366x768像素或更低的设备做优化，于是我决定创建一套基于1920像素宽的栅格系统。

栅格往往被划分为3部分。我认为这是个好办法，由于三分法则的存在。我基于1920像素宽度和10像素外边距创建了3、6、9、12、15、18、21和24列的栅格。在psd文件中，你可以看到这些分列布局，设计时你可以开启和关闭它们。

在此下载栅格：https://dribbble.com/shots/1587898-Grid-Structures- Free-PSD?list=users&offset=0

我很想知道，设计时开关栅格如何影响你的直觉化设计流程。

原文链接

Material Design的精髓

hi@victor42.work (Victor42) — Sun, 13 Jul 2014 11:42:07 +0000

[国外设计第48期]

简单而言，Google推出了Material Design，来统一Google各平台上的用户体验。另外，通过技术手段，使用户界面更简洁、易懂和直观，这项统一化举措旨在提升整体的用户体验。

##告诉我，何为Google？

Google是家非常大的公司，包含了搜索引擎、浏览器、笔记本电脑、操作系统、眼镜、手表和多种科技。对于一家名下拥有这么多科技产品的公司而言，只有使得各种设备和交互的体验保持同步，才是唯一有意义的事情。Material Design远非一套新UI；它是整个Google的（崭新）体验。

参考: 移动端交互设计的当务之急

Material Design的重要一环，是用户与各种科技产品交互的方式，这种方式使他们以无缝的流程进行交互。比如你正在写一封电子邮件，尚未完成时，你就从电脑旁走开了，它还开在那里。你能在手表、手机或平板上继续写作，无需担心将它存为草稿，同步，找到它，再从你停止的地方继续。再举个例子：你刚刚到家，首先弹出的电子邮件来自你的朋友和家人，而不是工作邮件，因为Google的技术知道，家庭时间中，不该用工作来烦你。这些技术与UI没有关系。Material Design说的是Google如何通过使技术更聪明，来改善你的生活。

Material Design的UI

既然Material Design会成为Google界面的主旋律，很有必要了解他们是如何开始打造它的。打造Material Design的重要部分，就是真实世界。Google搜索部门的设计主管Jon Wiley告诉Fast Company：

“当你创造时，你继承了千百年来的专业知识。但软件设计才刚刚起步。”

单单这条陈述，意味着创造Material Design的UI过程中，他们想要打造非常杰出、令人难以置信的东西。不论如何，他们需要一些严肃的调研，来得出什么能给Material Design带来这样的设计影响力。Wiley又解释道：

“我们退后了一步。我们看着所有的软件，提出疑问，这是由什么做成的？”

卡片式影响设计

Google想要把他们对真实世界的理解，带入到数字世界中。你可能记得，Apple因为试图通过拟物化设计来达成这一点而声名狼藉；在Google眼中，拟物主义在正轨上，但已经无法超越。Material Design中没有花哨的纹理，UI干净而简洁。对于Material Design而言，拟物主义过于浮夸。但是，卡片式设计是怎么融入的呢？

卡片式是成就Material Design的重要部分。希望尽可能使数字世界接近真实世界的Google设计师们，将UI元素一层层堆叠起来——就像卡片纸一样。这没有什么新鲜的，很多设计师都这么干。但是，Google多迈了一步，使用了阴影来使得UI表现得真像卡片纸一样。保留真实世界对于Google设计师非常重要；真实世界与物理规律成了参考要点。

研究真实世界

Google非常关注纸张，将它作为影响设计的基本。Google Android部门的设计主管Matias Duarte向Fast Company解释道，Material Design目的在于改善像素点的形式，使它不只是具有颜色，而是通过响应触摸改变形状和纵深，来影响你的屏幕。为了将最逼真的体验带入数字世界，他们研究真实的纸张。设计师们制作了多层纸质图标，来观察阴影是如何投射的。尽管真实的纸张无法像Material DesignUI中的卡片纸那样变形和操作，总之它有助于研究。毕竟，Material Design在设计社区中有进展。更重要的是，发布时，它会成为Google设计的一个重要部分。即便是Material Design没有取得进展，它仍然对于检验你的设计至关重要，因为它对用户有冲击力。

力求数字化的物理规律

Material Design的一项重要原则，就是在数字王国中打造仿真的物理感受。这是为了给用户创造某种感觉和关联，影响他们观看屏幕、看待各种应用交互与运行的方式。由于物理规律并不作用于数字世界，很有必要展示出某种关联。这么做的理由相当简单：为了打造“直觉”应用设计，不得已为之。一个应用或者网站，或是它们中的某个部件，都不符合自然的直觉，设计师们不得不依靠惯例。否则，应用和网站就难以使用。Material Design旨在于UI中创造一种视觉关联，因此用户可以更轻易地建立直觉感受。关键还在于，意识到他们希望迎合某种关系，这就是为何实际UI会有微妙的动画、阴影和颜色，来使得与Material Design的互动更加有趣。

##Material Design的精髓是什么

总而言之，Google将要通过Material Design，统一它各种产品与科技的体验。Material Design的基本是能够在多设备中支持无缝信息流动，并使得科技更加聪明。想一想与电子邮件打交道是多么烦人，有各种各样单独的电子邮件应用；有些应用无法跨平台。文件分享、拍照、甚至消息也是这样。

如果你的电视、手表、手机或汽车之间实现了同步，于你而言就轻松多了。作为用户，你不需要担心信息或文件是否同步到另一个设备，在家也不会被工作邮件轰炸，反之亦然，昨晚发你的图片也不会在你工作时弹出。

Material Design远不止优雅的UI（不管它实际看起来有多优雅）。Google当下的所作所为，其中的干货就是他们在追求整体体验。最重要的是，他们在试图提升人们使用科技的方式，并使它更简单和优秀。

##结论

Google，伟大的巨人，宣布他们将要在多平台推行Material Design。仔细想想，他们有如此众多的科技产品，只有提供统一的交互体验才有意义。你觉得Material Design如何？你觉得统一和提升Google产品的用户体验是个好举措吗？

原文链接

设计趋势:网页设计中的幽灵按钮

hi@victor42.work (Victor42) — Sun, 06 Jul 2014 13:27:51 +0000

[国外设计第47期]

我不确定我们是否意识到2014年最重大的趋势正在来临。它完全基于所有网站中微小的设计元素——按钮。

幽灵按钮——那些透明的、可点击的物体——忽然间就变得无处不在。以狂风暴雨之势席卷正网页设计领域。谁能想到，像按钮这么简单的事物，能够改变我们看待网页设计的方式？

参考：预测网页设计趋势

##什么是幽灵按钮？

幽灵按钮有着最简单的扁平外形——正方形、矩形、圆形、菱形——没有填充色，只有一条淡淡的轮廓。除了外框和文字，它完完全全（或者说几乎完全）透明。（因此得名“幽灵”）

这些按钮通常比网页上传统的可点击按钮大，也被置于显要位置，例如屏幕的正中央。

各种类型的网站（包括移动APP）中都能发现幽灵按钮的身影，它有着多种设计风格，却几乎都与单页网站有关联，还有那些极简风格或近扁平风格的设计方案。这种风格的按钮在全屏照片背景的网站中也大受欢迎，不像传统按钮那样，这种简洁的样式，是出于不干扰图片的考虑。

你有仔细观察过你的iPhone（运行iOS7）上的圆角按钮吗？每个设计元素都是幽灵按钮。

一位Designmodo设计师这样描绘这项新兴趋势：

“幽灵按钮的出现，从某种程度上来说，与人们热衷于在半透明全屏背景上放置界面与表单有关。于是，时机到来了，它在背景图片、产品形象和幽灵表单元素之间分配了用户的注意力，使得幽灵按钮不靠遮挡背景来体现自己的存在，却依然可见。”

设计元素

幽灵按钮有一系列典型的组成元素。尽管这并非完整的使用准则，但使用幽灵按钮时，其中多数都在发挥作用。

按钮是中空的
它外围有一圈轮廓，通常只有一点点厚度
它包含了简短的文字
颜色通常只有黑白
按钮往往比传统按钮更大
幽灵按钮一般占据页面显要位置
幽灵按钮可以单独或成小组出现
通常使用扁平或近扁平的设计方案
幽灵按钮内部可以使用小的几何形图标，不过很少这么做

幽灵按钮的优势

那么，是什么使得幽灵按钮如此管用？有必要把这项趋势用在你下个项目中吗？

幽灵按钮给人特别干净的外观和感受。简单自然的按钮，能使得页面的主体设计更加突出。（尤其在大幅图片上表现更好）

幽灵按钮几乎可以搭配任何设计方案，因为他们是透明的。这使得按钮可以从根本上承接周遭的设计特征。

幽灵按钮延续了“2013年度趋势——扁平设计”的演化。这样的设计趋势要成为当下主流，唯一的方法就是继续演变，接纳新的概念。

幽灵按钮提供了一种带有视觉惊喜的元素，因为这个按钮和用户预想的可不一样。

设计和创建幽灵按钮很简单。切记保持简约。幽灵按钮应该精细微妙，而非浮华炫目。

幽灵按钮无需过分扎眼，就足以创造出有感召力的视觉焦点。在众多网页设计中，幽灵按钮是屏幕上唯一的大型元素（这就是它如此有效的原因）。正因为如此，它抓住眼球，诱使用户点击按钮。而且这也是优秀用户界面的特征。

幽灵按钮有助于打造高端的设计风格。在设计中，简单往往就是高雅。

幽灵按钮的劣势

虽说幽灵按钮在设计上体现出诸多优势，同时有些劣势也需要考虑。采用任何新趋势之前，都要掂量它的优势与劣势，然后决定是否在项目中使用。

幽灵按钮可能太溶于背景中，使用户产生困惑。并非所有用户都了解设计；有些人对难以识别非传统样式的按钮，也不会知道它是做什么的。

幽灵按钮在高对比度或者颜色丰富的图片上很难处理。这些按钮往往不是黑色就是白色。假如你用的背景图是黑白交替的，幽灵按钮几乎看不到，也无法阅读。

为了便于使用，幽灵按钮依赖特定尺寸与位置。放置按钮时要格外小心，让人容易发现它，并且不能遮盖图片的关键部分。

幽灵按钮有时会明显影响与它搭配的图片

幽灵按钮的文案比“点击此处”要复杂。其中的文字，需要足够清晰的构思与文案，并置于其余部分的上下文语境中。

幽灵按钮如今已无处不在。想要使自己看起来跟得上潮流趋势？选择时兴的事物前，请确保它确实对你的项目有帮助。

##幽灵按钮的案例集

切记，把握任何趋势，关键是要用好它。正如一位Designmodo用户所说：

“我相信设计界诞生的每种趋势，都有它意义深远的用途。最重要的是不要沉迷其中，选择中庸之道。”

就此而言，它正是使用幽灵按钮和其他潮流趋势的关键所在。

接下来给你带来一组幽灵按钮的案例集，希望对你的创造力有所启发。这个案例集是从各种线上网站、进行中的项目、和Dribbble和Behance这类网站的作品集元素中收集而来。（点击每张图片，可以查看来源深入了解）

原文链接

解决汉堡图标问题

hi@victor42.work (Victor42) — Sun, 29 Jun 2014 10:12:41 +0000

[国外设计第46期]

汉堡图标，也就是三条小横线，一直以来被用于表示指向菜单的链接，是当今网页中最具争议的技巧之一。据说设计师们都讨厌它；客户们也恨之入骨。那为什么它却无所不在？

汉堡图标可以轻易缩放，它可以精确吻合像素网格。它原本是表达列表的图标，被强行冠上了如今的角色，但既然菜单就是一列选项，这样使用它从含义上来说是正确的。

在这个课题上，有数不尽的争论、A/B型测试、博客宣泄、用户研究，但这些研究几乎都在关注app设计。当汉堡图标用于网页设计时，它表现出了更大的问题。

##汉堡图标的问题

有很多设计师质疑汉堡图标本身的价值。它频繁作为iOS风格图标出现，虽然在Apple采用它之前，就已经被这么用了。

事实上，关于它是不是可用的菜单图标，有大量相互矛盾的证据。有些设计师主张，年轻人能轻松认出这个图标，其他人则表示年纪大的若有上网经历，也可以辨认出来。这项证据中，我们只能得出唯一一个结论，可用性测试结果是不确定的，相似的测试常常得出相互矛盾的结果。

大家普遍接受一点，用户不会把汉堡图标当作单一链接，很可能是因为它被设计成一组链接，而非单个链接的样子。支撑它的是环绕周围的边框，或是一块背景色，使它看起来更像一个按钮，我敢说，再拟物一些可以增加点击量。

##汉堡图标还有更多问题

除却图标本身不说，使用它的方式也充斥着问题。

首先，可能也是最明显的，汉堡图标给导航增加了额外的操作；原本一次点击就可以到达具体页面，现在需要两次。根据网页设计师的经验，3次点击要能抵达（任何地方），目前为止，导航问题并没有解决，汉堡图标这种技巧，只是把一个问题变成了另一个问题。当然，这不仅仅是汉堡图标的问题，它也是所有这种风格导航的问题。你可以用“菜单”两字代替汉堡图标，阻碍仍然存在，区别只是汉堡图标没法用在其他地方。

汉堡图标同时也隐藏了它的内容。从用户体验的观点来看，用户不应该为了解自己能做什么，而做出任何动作。“分享到Twitter”或“付款”这些操作若不是近在眼前，太容易被用户忽略。用户根本不会去找他们不知道的链接。

最后，汉堡图标隐藏了网站的当前状态，还有用户所在的位置。菜单中的按下状态为用户提供了前后关联信息，而汉堡图标则使它变得隐晦。

##汉堡图标能做好什么？

鉴于汉堡图标被普遍厌恶，还导致一连串问题，为何它还随处可见呢？

以我的经验，原因当然在特定的年龄层里，汉堡图标近年来已经深得辨识度的精髓。驳斥它的研究往往是一年前或更早的，而一年对于互联网来说可是很长时间。

事实上，链接图标远比“链接”或“分享”更易辨识，但决定性的形式尚未显现出来。而汉堡图标却在各种不同设计中都保持了统一。

最重要的是，汉堡图标保持了它的初衷：它为我们节省了大量宝贵的屏幕空间资源。假如客户给你多如牛毛的东西，都要加到菜单中，那么把它们移除屏幕并给出链接，就是简单粗暴却非常有效的办法，可以为客户同样想要的内容腾出空间。

我得说汉堡图标在这个问题上，比其他解决方案都好，但也不尽然。还是应该说，汉堡图标没有其他解决方案那么糟糕。

##问题的根源

汉堡图标得到采用，还是因为设计师（更多时候是客户）没有完全遵循移动优先的设计方法。他们想要一个“常规”站点，却把它硬塞进外孙女的手机中。

汉堡图标的反对者往往用“菜单”二字代替它，他们这么做完全不得要领。不论是否形似，汉堡图标如今已经达到了它的含义，但用户理解这个按钮是干什么的，并没有解决最大的问题，它隐藏了导航，隐藏了用户的选择，这是相当严重的自残。

简单说，汉堡图标是一种象征，象征着我们在一心一意全方位拥抱移动优先的道路上，集体失败了。

##更好的解决办法

为了解决汉堡图标的问题，我们得接受一个现实，我们以往所知的网页已经不再管用了。移动网页的崛起，远非减少几栏、去掉一些沉重的图片文件这么简单。

不同于旧时代的网页，移动网页采用了一种不同的方式。移动网页生在专注于app的环境中，用户希望传统网页也有类似的时尚体验。

很著名的例子，Facebook的app将他们的汉堡图标改成了标签栏，结果显示转化率得到了提升。然而Facebook除了更换菜单设计，还做了意义重大得多的事情。近来他们发布了Messenger，了不起的地方在于，他们已经有了功能完善受人欢迎的app，他们本可以将信息功能整合进去。Facebook却拆分了这些功能，使每个app专注于自己的角色，便得到了两个简单的app，而非一个复杂的app。缩减功能导致了菜单项的减少，就不那么需要汉堡菜单了。

优秀的app都极为专注，他们通过远比网页严苛的用户测试进化。要打造app一样的体验，我们得简化网站，再简化，然后再多简化一点点。如果有必要，将建筑结构打散成可管理的小片，近似于迷你站点。当我们为用户展现一组简单的选择，复杂菜单的问题再也不会出现了。

使用汉堡图标就像在伤口上扎绷带：虽然把它包起来了，下面的伤口仍在。

我们只有完全拥抱移动优先的方式，不仅将它用于设计，也用于我们的内容和信息结构，汉堡菜单才会成为历史。

焦点图/缩略图用了Mononc’ Paul的汉堡图片

原文链接

2014下半年的设计师干货

hi@victor42.work (Victor42) — Sun, 22 Jun 2014 10:40:21 +0000

[国外设计第45期]

6月的设计师与开发者干货，包含了新的网站应用、框架、栅格系统、游戏平台、激发灵感的资源、Photoshop插件、文本编辑器，还有一些非常棒的新字体。

下面多数资源都是免费的，或者价格很低，对很多设计师与开发者而言肯定大有用处。

一如往常，如果你认为我们遗漏了什么，请在评论中告诉我们。如果有什么应用和其他资源，希望在下月刊中看到，可以给@cameron_chapman发tweet建言献策。

##Scribe

Scribe是个富文本编辑器框架，由Guardian公开源码。它弥补了浏览器间的差异，包含了一些实用的默认属性。

##Card

Card只是单单一行代码，可以使你的信用卡表单更容易使用。它由纯CSS、HTML和JS（不带图片）写成，而且4种不同卡片都带有动画效果。

##Simple Sharing Buttons Generator

简易分享按钮生成器，使你可以轻松创建Facebook、Twitter、Google+等HTML分享按钮。有多种样式可供选择，而且它是完全免费的。

##PlayCanvas

PlayCanvas是个很好用的免费开源WebGL游戏引擎，包括支持多人协作的开发工具。

##Kivo

Kivo可以方便地标注PPT或PDF演示文件。拖入文件，上传，就可以开始了。

##The Awesome Free Toolbox

The Awesome Free Toolbox收集了一些非常棒的网页设计工具，包含了图片资源、模板，甚至虚拟主机。

##Griddify

Griddify使得Photoshop自定义垂直栅格线变得快速而简单。它支持Photoshop CS6/CC（不过在CS6里有些bug）。

##Screenshotter

Screenshotter是个管理手机截屏的免费iOS应用。它自动将你的照片与截屏区分开，让分享和归档截屏更加容易，你可以在文件夹中排列它们，它还有一些其他功能。

##Dept. of Design Web Field Manual

Dept. of Design Web Field Manual，2014夏季版，是个精心组织归类的网页设计资源收藏夹。

##The Day’s Color

The Day’s Color是一部色彩摘要，其中经常更新的配色方案，受多方启发产生，包括实物、音乐和其他东西。

##A to Z CSS

A to Z CSS是一本CSS周刊，涵盖了各种CSS相关话题。每则片段都很短（通常在4到7分钟之间），学起来很容易。

##Tumblr Boilerplate

Tumblr Boilerplate是打造Tumblr模板的基础。它支持日志类型，基于HTML5，速度也做了优化。

##30 Weeks

30 Weeks是个实验性的教学项目，旨在为优秀的设计师提供工具、导师、经验和其他资源来创立公司，进而打造改变世界的产品。尽管它是个新项目，却并不廉价：价值10000美元（不过它很有价值，而且有奖学金）

##Get Shit Done

Get Shit Done是个免费设计元素收藏夹，包括按钮、菜单、导航、字体样式、通知、Javascript组件等。它还有付费的高级版，可以获得更多资源。

##Pho Devstack 1.0

Pho Devstack是个前端开发者的自动化管理器。它包括编译、压缩、CSS前缀等工具。

##Filament

Filament是你网站的应用“商店”，你可以通过拖拽界面元素，在自己网站上轻松安装各种免费应用，不需要写代码。

##Cody

Cody是你网站免费的HTML、CSS和Javascript片段集。目前这里有导航、简介和购物车等的代码片段。

##Dimensions Toolkit

Dimensions Toolkit是个测试响应式设计的离线Chrome插件，它刷新很方便，你可以添加自定义断点。同时也由个在线版。

##Framer.js

Framer.js是个原型工具，能将静态模型转化为有动画的交互式原型。

##Tiny PMS Match

Tiny PMS Match是个Tumblr博客，将Pantone色与各种小物体联系起来。所有照片都用iPhone5拍摄，并通过Snapseed处理。

##randomColor

randomColor是个Javascript颜色生成器。但是不像其他生成器，它默认只生成“诱人的颜色”，摈弃了灰色、棕色和墨绿色。

##Famo.us

Famo.us是个免费开源的Javascript应用框架。它包含了开源3D布局引擎、3D物理动画引擎等。

##Flexbox Grid

Flexbox Grid是个基于“flex”显示属性的栅格系统。它集响应式、流式布局于一身，语法简单，还有更多特性。

##Weblox

Weblox是个简单的网页模板生成器，使你轻松搭建基于Bootstrap的全响应式的页面。

##Spritebox

Spritebox是款所见即所得的工具，用于从CSS精灵图片中创建CSS。你可以生成CSS精灵，合并精灵表等。

##Finch

Finch是一款让用户在任何联网设备上访问本地网站的工具。安装这个app，然后获得本地项目的临时公共链接地址，使用SSL加密。

##Respondly

Respondly是个email和Twitter的团队收件箱，特别适于客服支持、团队工作流等。可以免费试用，费用每月9美元。

##Mailparser.io

Mailparser.io通过从邮件中提取数据来自动化你的工作流程。它有30天的免费试用期，费用19美元每月。

##Jeet

Jeet是根据人类阅读方式，而非机器方式建立的栅格系统。它去除了不必要的内嵌元素，还有死板的分栏规则。

##Kickoff

Kickoff是个创建响应式站点的轻量级前端框架。它由Sass和Grunt打造而成，有详尽的文档说明。

##Great Talks

Great Talks收集了来自全球各种研讨会的杰出演说与展示。尽管它们不限于设计，但它们谈论的几乎都是创意。

##Oozled

Oozled精心组织收集了整个互联网的创意资源。类别涵盖字体、图标、CMS系统、灵感、研讨会、色彩等。

##uKeeper

uKeeper可以很方便地保存整个网页。注册，然后给uKeeper发送电子邮件，他们就会自动发送到你的普通邮箱或是应用邮箱（比如Evernote或Instapaper）。

##Source Serif Pro（免费）

Source Serif Pro是Adobe的开源衬线字体，有普通、中粗、粗几种字形。

##Hairvetica（免费）

Hairvetica是种装饰性矢量字体，看起来像是有型的发丝，它是一个Illustrator文件。

##Uni Sans Free（免费）

Uni Sans Free由4种粗细的大写字型组成，它包含一张西里尔字母表。完整的字体族里，还有更多样式和字型粗细。

##Sideshow (10美元)

Sideshow受招牌的启发，用来通告重大事件效果非常理想。它有40种字型。

##ATC Overlook（10美元）

ATC Overlook是种融合了几何与怪异风格的字体，有370种字型、7种字体粗细。

##Lastra（10美元）

Lastra是一款3D的全大写字体，取材于咖啡厅与餐馆的文字。它还包含自定义的花体字和特殊字符。

##Beelzebrush（35美元）

Beelzebrush的灵感来源于重金属，总共有8个字体族。包含普通、斜体、粗体，还有棱角分明的粗斜体，更粗的字型有着更统一的边缘。

##Reverse Gothic JNL（25美元）

Reverse Gothic JNL有着复古的反转样式，用来设计标题非常酷。

##Newark JNL（47.5美元）

Newark JNL是一款风格化的厚重衬线字体，基于复古风格的字母表游戏拼贴。诡异的字型宽度使得它格外引人注目。

##Lugatype（免费）

Lugatype是种字型怪异的字体，非常适用于海报、标识、杂志等。

如果你还了解其他新应用或是资源，觉得它应该出现在此，在评论中告诉我们吧！

原文链接

几则诀窍打造个人作品集网站

hi@victor42.work (Victor42) — Sun, 15 Jun 2014 14:25:31 +0000

[国外设计第44期]

作为设计师，我想大家都体验过个人项目的难处，包括作品集。你在photoshop中投入了无数个小时，尝试了上百种不同方案，两个月后，你才意识到你的个人主页仍然写着“建设中”。

这也许不适用于每个人，但作为自己的客户，是相当有挑战的，所以我想分享一下如何更好地建立个人作品集。

参照：向大幅肖像的网站设计靠拢

##你的作品集用处是什么？

在投入到Photoshop中、迸发美妙创意之前，从“业务”的核心入手。你就是客户。像其他任何项目一样，你首先要设定目标。

你想要售卖作品吗？
还是仅仅展示你的作品？
让人认识自己？
或是教导读者？

这只是一些例子，你未必要从中选择。有个好方法，写下你所想到的目标，并给它们标上数值。比如我：售卖作品（0/5），展示作品（2/5），让人认识自己（2/5），寻求雇主（1/5）。

这也许看起来很奇怪，但我个人作品集的主要目的并非寻求雇主。我90%的询问都来自Dribbble，所以我决定偏重于展示个人喜好。

##画线框图

既然看到这些案例，可能你立刻就想开始重设计。这很好，但先别打开Photoshop。而是要拿起纸笔。

设定一个时限；比如说一小时，然后画出所有你想到的。即使30分钟后，你就觉得大功告成了，继续努力。在这个阶段，无所谓“丑陋”或是“半成品”。力求20种完全不同的布局。

（注意，这些还不是完整的线框图，只是草稿。）

这个头脑风暴的阶段过后，可以筛选手稿并画出线框图了。由于是出于个人喜好选择（很明显），我无法告诉你一套准则，但我有些建议：

**简单明了。**不能让人难以理解你的作品。确保第一印象是清晰友好的。
**有选择性。**作为设计师，你可能是个全才。但这不代表你需要强调过去的一切。强调实力，而非完整经历。
**专注于作品。**除非你真的要体现你的品牌特征，不然我觉得最好还是保持最低限度的设计。就像一间艺术画廊，你总不希望画廊比艺术品吸引更多注意力对吧？

##代码还是设计？

终于要数字化了！我提代码或设计的原因，只是因为并非每个设计师都会代码。如果你懂，那就忘了Photoshop，直接尝试代码。

既然这时候已经有了固定的线框图，可以着手编写代码实现功能。就我个人而言，以前即使我有个人作品集的线框图，我仍然只会在Photoshop里改来改去，最终什么也没发布。

这就是我建议先创建线框图的原因。它不仅让我保持正确的流程，也在我编写代码和在Photoshop中创作时节省大量时间。

##编辑与发布

最后一点也很重要，尽快把你的作品集上线。一旦有了良好的基础，你以后总能对页面进行微调和优化。甚至以后优化还是件好事，这样可以吸引用户回访。

“我添加了完整的项目描述，来此查看更新！”

“你现在可以通过作品集，直接买下我最新设计的图标！”

“我更新了滚动的形式，觉得如何？”

这就像拥有自己的房子。永远没有完成时，但在达到完美之前，你肯定等不及邀请别人登门拜访，对吧？

关于创立自己的作品集，我也乐于倾听你的想法。也许还有更多诀窍，或是个人经验？也请随意在下面评论中附上你的作品集！我时刻都在寻找灵感。

原文链接

如何预测网页设计趋势

hi@victor42.work (Victor42) — Sun, 08 Jun 2014 00:12:58 +0000

[国外设计第43期]

你如何得知未来的大势所趋？扁平化设计曾席卷设计界——由一些简单项目，进化为网页设计（尤其是应用设计）的重要组成。

然而即将来临的下一个是什么？你又如何得知？下面是一些预测网页设计趋势的方式（附少量时髦网页设计案例）……或许你甚至可以自己创造。

参见：2014年将盛行与消逝的趋势

##查看各式各样的作品集

年轻的设计师总在新设计的最前沿。钻研Dribbble_（试试Debuts列表）_和Behance这类网站，看看别人在从事些什么。看看Awwwards或The Best Designs上那些引人注意的网站精选集。

小项目可能会是重要的风向标。为什么？因为那些往往是设计师想要从事的项目。那些不被客户限制所阻碍的项目。

首先仔细观察用色（明亮、大胆、黯淡、极简）和字体。设计师们作出了怎样的选择？

然后观察界面。视觉元素看起来像什么？你和网站如何进行互动？它在其他设备上看起来如何？所有这些都可能是趋势的预言者。

##调查其他领域

看看其他创意领域，汲取灵感。艺术、时尚和建筑是网页设计师们迸发灵感、创造新趋势的领域。

时尚是非常棒的风向标和流行色趋势。时尚周的图片可以帮你发现哪种颜色会是接下来的大事件。预测色彩趋势时，Pantone每年的色彩年报是很有价值的工具。

艺术也很有帮助。当代艺术在表现什么？是怎样的风格？形象还是抽象，纹理还是扁平，宁静或是混乱？这些主题在网页设计中，都可以扮演重要作用。（涂鸦同样能帮你从文字和风格方面观察别人在想什么）。

注意新建筑的外形。将这些概念搬到设计项目中。建筑外表纹理和材料颜色也一样。

思考这些媒介怎样融合。不久前，视频还是电视或YouTube上的东西。如今视频就作为网站背景，成为了一项潮流元素。各种网站里弹出更多动画效果，频繁地融合或替代视觉差滚动效果。

##分析视觉效果

关键是，多数“真正的”设计趋势是可持续的。比如扁平化设计，如今已成为设计的主导势力超过一年了。多数公司（包括Apple）都采用了它。而它只从某一位设计师发源。

有三点组成，使得这项趋势得以延续：

可用性
与旧设计趋势的融合
历史渊源

依据这3点来考量所有成功的设计项目。

好的设计是实用、朴素和简单的。没有用户愿意与违反直觉的设计或界面打交道。用户必须知道在哪里点击什么，而且要理解各元素间的区别。

当今的趋势，往往与一些遗留下来的旧趋势能相互配合。设计的这种进化，使它对于设计师更具实践意义。它也是一种含糊的产物。考虑一下把一个新的或不多见的创意展示给客户；他们会接受一部分，而不是全部概念。这往往就是潮流大融合的来源。（想想从扁平到近扁平的过程）。

最后，很多趋势都植根于历史中。所有旧事物，都重获新生。虽然一种趋势不会以完全相同的形式重现，各种元素会以新的形式显现。

##留心社交媒体

社交媒体上喋喋不休的在谈论着什么？什么被转载分享？

社交媒体中的设计师网络能够帮你预测接下来的事情。（传统形式的人际网络也可以）。

不过你在谈论着什么？你的同辈们又在谈论什么？不要打发掉任何创意，因为它们中的任何一个，都有可能变成6个月后人人谈论的东西。

你关注什么人？看看这篇Designmodo早先列出的Twitter上值得关注的25位设计师。

##用科学的方法

实行非正式的趋势分析。这个过程就是收集信息，以此在信息中发现某种模式。

一周一次，记下所访问过的网站中吸引你注意的东西。看看颜色、字体样式、效果、界面元素、操作，和其他任何影响到你当前项目的外观与运用的事物。

久而久之，你会开始发现某些特定的共性显现出来。这是种简单且非常棒的趋势预测法。

##考虑技术与可用性

思考趋势的时候，不要忽视每天都在做的事情。考虑一下你用的设备类型，还有它们如何与网站相互影响。

比如，不久前，每个按钮都需要点击，如今很多都对触摸反馈友好。想想你玩的线上游戏和手游？它们通过什么操纵？怎样的操作使它们运转？流行的游戏可以稳定地预测出各种设备上，怎样的操作会让人们感觉舒适。

还要跟进科技和趋势。什么设备最流行？什么东西在改变着人们在线互动、购物和聊天的方式？这些在你的设计和开发团队内部，都是重要的交谈内容。

新技术与科技趋势，可能是促成网页设计趋势的首要因素之一，尤其是在新设备上。

##浏览设计博客

留心设计博客，比如Designmodo，跟上网页设计领域的近况。改变几乎每天都在发生，只是读一读正在发生什么，就能帮助你认出下一个趋势。

你可以寻找什么呢？从阅读新技术的教程开始。一旦有一帮设计师明显在学习某种技术，它必定会在一些完成的项目中展露出来。

看看文章和教程提供的案例。（Designmodo每张图都有链接）。访问这些展出的网站。是不是开始注意到一些共同元素？那可能就会是下一个趋势。

##结论

**预测趋势是一门很棒的艺术，而非科学。**今日所流行的，或许明天就会散去。最好（也是最有用）的趋势，是那些长久保持影响力的趋势。

如果你渴望极致的潮流，考虑从颜色或字体这类元素入手，而不是整体美感。那样你能在更大规模的设计变迁发生之前，作出成功的判断。

原文链接

改善文字的层级关系

hi@victor42.work (Victor42) — Sun, 01 Jun 2014 10:12:55 +0000

[国外设计第42期]

文字层级经常在交互设计中被忽视。无论如何，要建立一套成功的用户流程，在项目流程之初就得将文字纳入考虑。

文字层级在沟通中扮演着重要角色，将用户引向期望中的结果，还能改善用户体验。网页应用总有繁复的文字层级，区分不够鲜明。各级文字相互较劲，使用户不知所措、迷失其中。

新闻头条应用Inside.com就是个很好的例子，反映了不清晰的文字层级如何影响用户体验。在“all updates”中，新闻逐条展示。每条包含了7个文字层级（下图）。分类名（1）、标题（2）、标题链接（3）、正文链接（4）、正文（5）、网站链接（6）、发布时间（7），由于没有被清晰地区分开，它们全都在争相吸引用户注意。这种模棱两可的层级，使每则故事都不易阅读，阻滞了用户交互流程。

假如花更多心思在文字层级上，Inside.com会受益良多

为了更好地区分文字的层级，你需要对用户希望如何剖析信息有所了解。在缺乏可用性测试的情况下，我可以假设用户第一眼会看到标题，然后阅读正文，接下来如果他们感兴趣，则会点击网站链接。

很快，我重新设计了第一篇文章，优化了文字的层级。增大了标题的字号，将它剥离出正文，把正文改为中灰色，将网站链接放在正文下方，并加大了行高，增加易读性。

快速重设计

这些改变有助于区分文字层级，随后便提升了用户体验。

前后对比

从结构的角度看，还能使整体层级更加清晰。记住文字只是一种元素（尽管通常是最重要的），对导航条、图片位置、文章排列进行重新设计，也能提升用户体验。我们下次会讲到……

如果喜欢这篇文章，请点击下方绿色的“推荐”按钮，并关注Designed Thought Collection。

欢迎来访，我的Twitter、 Dribbble、Behance

原文链接

我从6位Hike设计导师身上学到什么

hi@victor42.work (Victor42) — Sun, 25 May 2014 01:04:39 +0000

[国外设计第41期]

##Hike是什么？

从左至右：Hike赠品袋、Daniel Burka的开场演说、Github章鱼猫、Adobe大门和会场一隅

Hike是个一日制设计教育研讨会，由两位非常棒的设计师与策展人，Jason Schwartz和Laura Helen Winn创立，行业前辈在此分享见识与启发性故事，借此帮助新晋设计师开启他们的事业。

阵容非常强大，汇集了来自Google Ventures、Facebook、Dropbox、Eventbrite、Pinterest、CNN和Adaptive Path这类公司的演讲者。有些环节是同时进行的，所以我尽可能多地参加。

以下是我从Hike的6位设计导师那里所学的精华。希望他们的故事和建议给你带来的共鸣，也能像我这么多。

##六堂课

发这条Tweet：http://ctt.ec/ubmdj

###1. “设计就像演奏钢琴，需要不断练习。”—— Daniel Burka，Google Ventures设计合伙人

学钢琴时，我们用练习一词来描绘一遍遍弹奏直到熟练掌握的过程。那在设计中，得不到我们渴望的结果时，为何我们却用失败一词？

Ira Glass - 鸿沟中雄辩式地描述过，涉足创意领域的人，当作品达不到自己的标准时，时常会感到失望——但只有不知疲倦地锤炼手艺，他们的作品才能配得上他们的雄心壮志。

Daniel勇敢承认，自己也没有真正跨越那条鸿沟，他自己仍是一件半成品。所以别再把自己的错误当作失败，何不称它为设计练习呢？

行为准则：启动一个项目，并设置严格的截止期限。不论最终成品是否杰作，都是很好的练习！

发这条Tweet：http://ctt.ec/H2gJ4

###2. “每个人都很重要，所以确保自己也不可或缺。”——Christopher Simmons，MINE掌门人/创意总监

Chris从没在网上找过工作，但他的职业生涯已经非常成功了。他的秘密？人际关系。

慷慨大方、助人为乐、从善如流，他从未对任何事和人表现出不屑，Chris一如既往地构建着丰富的朋友、家庭、同事关系网络，大家都依靠Chris，正如他也依靠他们一样。

Chris的第一份工作中，他留到很晚，把书本按字母表顺序排列，并清理了同事键盘上的面包屑（不论是否与自己共事），只是为了使办公室非常整洁。他在公司里得到了拥戴吗？那是当然。

行为准则：如果有人需要帮助，或者有些东西需要改进，无论有没有人明确提出要求，都要怀揣恩施之心去完成它。每次相互作用都有机会提升价值。

发这条Tweet：http://ctt.ec/9cb3s

###3. “不要局限于自己的角色。硬着头皮上。”—— Alice Lee，Dropbox产品设计师/插画师

虽然在宾夕法尼亚大学商业课程主修会计专业，Alice意识到，生活应该更丰富，而不是为无趣的材料制作8×11的备忘单。

于是她第二年转向了市场专业，并以夏季产品经理实训生的身份加入了微软。虽然Alice对营销并无热情，但她询问同事，有没有设计方面的工作可以给她。她必须给经理设计一个大项目。

Alice没有让她的角色局限自己——她硬着头皮接下了令自己兴奋且迎合她设计热情的项目。在Foursquare编程序和在Path做商务实习时，她又故技重施。她没有把自己与其他事业有成的设计师比较，Alice通过创造机会突破自身角色局限，专注于提高自己的技艺，现在她在Dropbox工作！

行为准则：背景并不重要，带着热情接受项目，硬着头皮抓住机会，即使水平还不够格。请求别人，“如果你有任何设计项目，都交给我。假如你不喜欢我的作品，没必要用它。但我想要学习。”

发这条Tweet：http://ctt.ec/Pe9_0

###4. “发现对你有意义的事情。并制造影响。”——Brian SingerFacebook信息设计经理

如何从设计中致富？取决于你如何定义“富有”。Brian将其定义为成就感——一种能使他心智健全并感觉活着的创意的宣泄。咱们接着说这则隐喻，Brian是从哪找到他的“财富”呢？

它始于永不满足的好奇心、持续的观察和对事物方方面面关联的热爱。Brian频繁地启动令人着迷且颇有争议的项目。比如，他他逐字逐句浏览了圣经，并记录了“金子”和“信念”两词的出现频率，结果分别是427和251，令人大开眼界。还有其他很酷的项目，包括将驾车时发短信的人们照片制成广告牌，还有追寻1000本日记的旅程，经由每个人，每段故事，传遍全世界。

通过这些爱心工程，Brian在更大的尺度上实践了共鸣，并对人类行为积累了更深刻的见解。

行为准则：花10分钟观察周围环境，看看有没有被忽略的问题显露出来。记录下来，让创意发酵，然后定期回顾它们。再来一点点争论，灵感就在下一秒涌现。

发这条Tweet：http://ctt.ec/GaLb8

###5. “最后的1%可能关系重大。”——Stewart Scott-Curran，CNN艺术指导

Steward的话与我产生强烈共鸣，因为我们总是听到“从细节看全局”的建议，或者换句话说，不要在细节中迷失，从而失去了大局。但有时候我们忘了，某些情况下，小细节事关重大。

当Steward为2010南非世界的9支Nike队伍设计队服时，他的任务是设计尽可能轻便的衣服。整个项目的大方向已定：品牌形象与造型。唯一剩下的，就是减轻重量——一个对于观众来说无足轻重的细节，但对于运动员却至关重要。

随着最后10分钟的进球得分，运动员都已筋疲力竭，身上的重量真的能拖垮他们。灵光一现的是：在他们队服上打孔写出他们的编号，这样使得材料能够呼吸，提升机动性。Steward早早规划好大局，然后致力于提升这些至关重要的小细节。

行为准则：深入思考产品或服务的用户，来理解他们的需求，然后头脑风暴各种给他们带来重要价值的小细节。

发这条Tweet：http://ctt.ec/Y3o3u

###6. “设计是背负重大责任的能力。不要搞砸了。”—— Mike Monteiro，“设计是种职责”的作者

我们中的大部分进入创意行业，都是因为那种欣喜若狂的感觉，能够将自己的想象变成现实——创造出昨日不存在的事物，并分享给全世界。但是创造，尤其是打造产品，包含了浩瀚银河般的复杂抉择，会因为对抗性的优先级影响到利益相关者。

那什么是抉择？所有一切：行为与无作为、通过与不通过，设计师做与不做的每件事都是一个抉择。不论是推行一项新功能，或是向其他人推行某项决定，这些抉择都会引起各种后果，有些比其他更恶劣。

Mike向我们发出挑战，作为设计师，应该成为把关者。不是那种背水一战时，明断是非作出最终裁决的角色。而是要小心谨慎阻止用户无意中出柜那样的灾难发生。创造出使人们愉悦的设计，是我们的共同目标，那么就坚守下去吧。

行为准则：在你的设计抉择中，考虑所有可能对用户产生负面影响的极端情况。要非常小心地批准那些看似无害的功能——它们将来有可能造成巨大浩劫。

##结语

如果你喜欢其中任何课程，给导师发tweet！他们每天从百忙中抽出时间来社区回复，那么向他们展示出你的诚意吧☺

还有，如果你参加了Hike，你最喜欢的课程是什么？给@norman_tran发送tweet分享你所学吧！时刻保持虚心，向他人学习。

原文链接

为网站和应用创建设计指南与标准

hi@victor42.work (Victor42) — Sun, 18 May 2014 11:36:15 +0000

[国外设计第40期]

尽管做法不尽相同，一组指南总是所有项目最重要的起点之一。

为每个项目创建指南（即使它原本没有）可以优化你的工作流程，也能使你的设计保持统一，并有望采取正确的开发方式。

这的确是设计师的责任。你不能怪开发者没有你那样的像素眼。你得指导他们。

从创建3种主要类型的文档开始。

样式指南
组件文档
页面标注

这套流程不推荐兼任前端开发的设计师采用。如果是这种情况，你需要多做一步，通过代码写出的风格指南和组件，创建一个单独的平台。你甚至会想在第二步就开始编写代码，省去剩余的步骤。

Bootstrap和Purecss就是两个知名的例子。确实，它们是完整的前端框架，或许比你正在进行的项目更庞大，不过你应该理解了吧？

1. 样式指南

样式指南明确了一个设计项目中每个元素的样式。它基本上是开发者最普遍的样式手册。在这个文档中，颜色、字体、表格、列表项、图标使用、分隔线和其他元素都有详尽的定义。一旦你创建好并设立了每种元素的相应规范，就可以拖放使用了。

*提示：为元素命名。尽管开发者最终可能会用不同的class名，当谈论某个元素时也会非常有用。比如说，你给一个有渐变色导航栏的网站设计了不同主题。说#主配色 - #第二配色总比说这些颜色的名字好。

2. 组件文档

在许多方面，这个文档与样式指南完全相同，却是另一个层次的东西。组件是指类似于登录框、轮播图、旋转木马、页头、页尾等等。

这不同于通常意义的样式指南，这个文档有助于在整个设计过程中保持一致性。它能使开发者更轻易地辨认出重复的元素，使流程加速。

从上面可以看出，在设计响应式项目时，将每个元素的“表现”包含进来是有好处的。再说，通常开发们不会关注这些事情（也不该由他们来关注）。

相信我，若你不强调一下CTA文字在移动端要居中显示，他们就不会注意。

一旦完成，拖放这些组件，确保从一开始就定下规范，防止最终样品陷入无休无止的调整：内边距、颜色和字号。

*提示：将组件导出成独立的.psb文件。这么做有个很大优势，你的客户决定改稿时，你只需要更新特定的几个.psb文件。确实很节省时间。

3. 标注文档

最后一步是页面标注。既然已经定好了元素和组件的样式。唯一剩下的就是引用这些组件，定义外边距（名称和间距）。

像下面这样将其分解真的很有帮助，我们之前把这种方法用在adidas网上商城和同等规模的平台上：

分别导出多个页面用到的组件。
导出页面。

两种导出方式中，我都用了3套_图层复合_，可以轻松完成导出：

Popup_Normal.jpg
Popup_Naming.jpg
Popup_Spacing.jpg

我知道这一切看起来很辛苦，但作为交互设计师，它至关重要。

所幸，有些很棒的插件可以帮你节省一些时间。specKing就是其中之一。这个工具可以标注之前提到的所有东西，不过我更爱用它来标注间距和标签。

原文链接

入门:移动APP中的各种导航

hi@victor42.work (Victor42) — Sun, 11 May 2014 13:25:16 +0000

[国外设计第39期]

即使是移动应用界面的原型设计，导航的形式也可以多种多样。尽管尺寸小，又必须紧凑排列大量数据，它们似乎受到了紧密的约束，但依然有着形形色色的选择。

人们曾经一度只会考虑一种形式——流行且广泛使用的垂直导航，即侧边栏。尽管如此，还有其他可以提升用户体验的形式，会让用户浏览你的APP变成小菜一碟。

列表型菜单

让我们从一种基于列表的标准型导航开始论述，它在移动APP作者中得到广泛使用。这种解决方式建议逐一展示链接，让用户遵循从上到下的常规流程。

Sergey Valiukh的GIF动画设计只是一件概念设计，却完美地反映出列表型导航的实用性。结合了多种色彩和精细的线形图标，还有稍显粗重的字体，让用户轻松浏览APP，并且不会感到屏幕局限导致的不适。

Fueled的Elevatr是一个时尚的APP，帮助企业家管理和跟进商业会议。主屏的特点是彩虹色的菜单，清晰地逐行展现出控制面板的各个项目。背景图受到坐标纸的启发，与这种菜单完美搭配。

Kutan URAL 的HabitClock App是个简洁且有视觉感染力的APP，帮助你管理早晨的闹钟。尽管屏幕上的重点是顶部和底部的控制面板，但列表型导航（同时也是非常棒的通知工具）才是吸引注意力的核心。

横条状的布局方式，用来展现简易侧滑菜单上的一系列链接，这是多数设计师的人气选择，也是Davis Yeung设计的iOS版Instagrab主要组成。通常每一项都配有一枚易懂的小图标，很好地区分每个链接。

矩阵或网格型菜单

占据全屏的网格型导航有助于强调导航，使它清晰易懂、显而易见。当你需要展示很多链接时，这种方式也很管用，一系列同样的网格，有效地将每一项与其他区分开来。

Michal Galubinskiand thoke design的Vectra，有着不容忽视的导航。设计师不仅把菜单的6个项目伸展至全屏，还利用了巨大的扁平风格图标，很明显是为了大部分在线用户考虑。

Marco La Mantia & Simone Lippolis的移动APP设计，Arrivo，巧妙地在严格的方形网格中组织大量数据。每个格子都扮演着功能性的作用；因为它不仅仅是显示数据，也让你通过底部滑出的一个小型控制面板调整它。颜色选择也非常明智，因为热烈的背景色调有助于有效地分配内容和区分网格。

Abracadabra，这个APP肯定是依照Sergey Valiukh心中的复古风格来设计的，让这个APP有种明显的年代感。在此，设计师干练地将屏幕划分成6个相等的网格，非常易于浏览。扁平风格图标结合粗重的非正式字体，有助于提升易用性。

手绘风贯穿了Willis设计的T R A V E R S E的每一个界面。这个APP基于明亮的单色背景和线形图标，因此主菜单看不到任何分隔线，却做到了井然有序，使得用户相当轻松顺手地浏览这款APP。

底部菜单

底部菜单主要是作为导航的辅助，用来区分内部的功能区块或独立组件。

Jakub Antalík的Badoo概念设计有着位于屏幕底部的导航。它也包含了一组扩展菜单，每一项都有它自己的控制面板。

Virgil Pana设计的动态滑动标签，为重度信息展示型应用提出了一个完美的解决方法，能够包含大量统计数据，或者通过图表展现数据，并仍然保持简洁。常规大小的菜单从屏幕底部滑出，显示出一个小型控制中心。

顶部菜单

既然我们习惯于从上到下浏览手机屏幕，放在屏幕顶部自然有一定优势。标签页和每个控制中心独有的图标，是这种布局最重要的代表。

Cüneyt ŞEN的Horner包含了可隐藏菜单，不过它能很妙地从顶部出现。由于明亮的颜色和有关联性的巨大图标，它与整个界面内容形成了鲜明对比。

Enes Danış设计的Discovery Channel将所有的基本导航和二级导航放在顶部，通过固定的位置来打消用户的困惑。

HAMZAQUE Designs为Bettertec设计的气流计算APP，巧妙地运用了占据顶部的标签页。此外，它们被设计成黑白对比的色调，和屏幕中其余部分相同。

MING Labs&Pierrick Calvez的Shario APP，透露着简洁的矢量风格概念。整个导航通过顶部的几个按钮运转起来。

展开式菜单

对于处理大信息量APP和喜欢创作简洁紧凑界面的设计师而言，展开式菜单确实是一项至宝。这种方案允许你把菜单图标放在任何地方，不过它通常是在左上角。

Al Powerd的MuSeek是个音乐APP，需要为用户提供大量可视化信息：专辑封面、描述、歌曲名称、曲目列表等等，所以没有空间来放置全屏菜单。在这个例子中，左上角的小图标就是一根救命稻草，平滑地展现出一列相当巨大的菜单。

Mohammed Alyousfi & Àlex Casabò的Univit UI设计，这是一款优雅的扁平风格APP，使用了一个标准的滑出菜单，通过简单的滑动操作触发。菜单采用了易懂且时尚的轮廓型图标，比各自的标题都大许多。这种方式使得菜单可以很自然地在设计中发挥作用，同时也提供更好的用户体验。

Alexandre Efimov设计的SVOY APP基于一套艳丽的配色方案，与深色的背景有效搭配。设计师让菜单从左侧展开。吸引眼球且逼真的折叠动画，也给设计增添了一些趣味。

Attila Szabó的Időkép又是展开式菜单的一个变种设计，利用几乎占据满屏的梦幻般“拉窗帘”效果来显示菜单本身。

结论

每种方案都有自己的优势与劣势，这就是为什么每个项目都提倡它独有的导航类型，可以有效地应对任务，并对用户体验有帮助。

原文链接

5种关键元素让通知变友好

hi@victor42.work (Victor42) — Sun, 04 May 2014 10:16:15 +0000

[国外设计第38期]

你是否注意过，每天各种网页服务和APP的方式，会收到多少通知和警告信息？其中有多少是你真正在乎的？这个问题越来越让人担忧，因为我们使用的服务在增多，但是我们的时间和注意力仍然有限。

我们白天接受这么多“嘀嘀嘀”和“弹出窗口”，我们不仅被分散了注意力，然后还要很辛苦地回到手头的事情上。最终，我们将这些让人分心服务一忘皆空，或者尽可能对通知做出限制。为什么？想想看。当你开始使用一项网页服务，或者安装一个移动APP时，你期望的是某个特定的用途，或是满足你最初的需求，你并不介意各种通知，只要它们有足够多“打断的价值”，意思是它们足够有用或有趣来使你分心。问题是，只有很少的通知遵循这一规则。

作为一个用户，我讨厌这样；但从产品方的观点来看，通知比仅仅告知用户重大错误、APP崩溃或新即时消息具有更大潜力。这是一件强大的营销工具，可以直接与用户沟通，在适当的时间地点传达适当的信息来提升用户粘度。但如何将这种违背用户体验的方式，转变为对产品方和用户都有意义和作用的东西？

1. 重要性

在钻研通知设计之前，问问自己“我确实需要通知吗？”这听起来挺荒唐，但有些通知根本不应该出现在用户屏幕上。有时候，我们遵循“可见的系统状态”的易用性启示，每一条错误提示都做了设计，但用户真的需要知道吗？如果这条消息单纯只是信息，不需要系统对它做出任何反应，那可能就没那么重要。另一方面，假如重大错误出现，这项服务或APP的表现取决于用户操作，可能导致重要数据丢失，此时通知对于用户和产品方都是一种便利。Google Chrome的崩溃页面通知就是个好例子。

2. 关联性与及时性

使通知保持关联的最好方法，是善加利用以前的用户数据分析。没有什么比实际的行为统计更能反映用户信息的了。设计通知时，注意产品的使用率数据，还有所收集到其他任何目标受众的信息。这有助于使通知与用户紧密相关，增加产生对话的机会。关联性也要适时，你得在用户最不容易忽略它时发出通知。显然，夜晚不是发送通知的最佳时间。涉及到采集用户时区数据，和他们更倾向于查看消息的时间时，用户统计大有帮助。

3. 定制化

定制化的产品特征是个好主意，尤其是涉及到通知时。这并不是说让用户关掉所有类型的通知（尽管那样人人都喜欢），而是让用参与内容的定制。当用户选择接收或拒绝哪些通知时，他们看到自己所选时会很高兴。假如你的产品刚问世，设计通知系统时没有足够的用户数据可以依靠，定制化是个很好的选择。一段时间后，你会清楚看见哪些通知对用户有用、有关联、及时，哪些需要重新思考。

4. 简明易懂的消息

无论通知的内容是什么，确保它吻合用户的语言习惯，直接而形象。保持信息简明易懂。避免使用“你赚了！”或“100%免费"这种垃圾邮件般的词汇。试着让信息简练却容易理解。不要让消息提醒的措辞给用户带来挫败感。毕竟，通知也是一个沟通渠道；你得与品牌形象和信息语调保持统一，同时保持友好且富创造力。

5. 有效的传达方式

有一大堆各种类型的通知和传达方式：短信、邮件通知、移动APP推送消息、网页通知、弹窗提示等等。为了管理这些通知，并更好利用它们，我们需要根据交互类型，将它按条件分为两组：”产品对用户的通知“和”用户对用户的通知“。根据服务类型和用户的目标，这两组通知可能有不同的优先级。举个例子，一个Instagram用户可能更有兴趣知道哪些照片里有他/她，或者有哪些新加入的Facebook好友，而不是给这个APP评分。

了解哪种通知类型和传达方式更易被用户察觉，是任何应用提整个体通知体验的关键。

原文链接

一个图标背后的心理暗示

hi@victor42.work (Victor42) — Tue, 29 Apr 2014 14:17:00 +0000

我在做一个推拉式信息栏的设计，向上滑动，可以显示更多信息。这个再寻常不过的动作，怎样准确传达给用户？怎样让用户知道这里是可以拖动的呢？

我第一反应就是画出了这样一个图形，似乎有那么点意思。

放到UI设计中看，它确实表达出了我所要表达的信息，但是为什么呢？为什么我会首先想到这个图形？说实话，它挺抽象的，又是如何表达出这层含义？这个问题，我以前从来没想过。

细想，它与日常生活颇有渊源。这个图形，其实是由实物演变而来的。想想生活中那些带有条纹的物体，这种设计往往是为了增大摩擦力，目的是方便手指推拉滑动。

鼠标、瓶盖、遥控器后盖上都能见到这种设计。

真相大白！有时候，我们需要的是扁平的形，拟物的神。

易停车icon变形记

hi@victor42.work (Victor42) — Sun, 27 Apr 2014 13:53:52 +0000

我是头一回主导移动APP的UI设计，与一伙志同道合的朋友反复讨论打磨，不知不觉，我们的产品就快1岁啦！接下来还会有个大版本更新，带来一项神奇的新功能和诸多细节优化，杭州的车主旁友们请多多捧场昂！

APP的UI博大精深，着手设计易停车之后，接触到了很多从前做网页不曾触及的知识与技巧，一言难尽，本篇我们大致回顾一下APP的门面——易停车icon背后的故事。

一代icon

首先介绍一下项目背景，易停车顾名思义，核心功能一定和停车有关，它是一款查看实时停车位数据的APP，这也是我们想传达给用户的核心信息。之前翻译的一篇LOGO设计终极指南里讲过，LOGO（icon同理）可以大致分为文字、具象图形、抽象图形3类。鉴于是新产品问世，在设计上更多需要考虑的是易于认知，个人觉得icon应该直观一些，所以方向直接锁定具象图形。即使与美观相冲突，也以准确传达信息为重。

参考了一些同类APP，还有主流的地图类APP，发现有3个意象被广泛使用：字母P、汽车、图钉。其中字母P对于车主来说可以和停车场划等号，这是考驾照必须掌握的基本交通标识。汽车就更直接了，这一切的一切，都与车有关。图钉是被无数地图应用普及过的概念，用来表示地图上的具体地点，时至今日，拿掉地图只留下图钉，用户一样能明白其中含义。对于这些深入人心的形象，善加利用是上上策，为不同而不同，为创新而创新，未必能起到好的效果（我会告诉你是我想不出来了么……）。

开始筛选意象，绘制手稿。我的手绘功底，那是有（cǎn）目（bù）共（rěn）睹（dǔ）的，所以这里就不放出来了，放出来你们也像看医生的签字一样。总之，因为汽车这个意象太宽泛，被果断抛弃了。对于停车这个概念，再也没有比字母P更合适的了，够精准，也够简单。毕竟，下面这样东西，我相信没有车主不认识：

另外，我们APP的主界面是地图，能够查询附近和目标地点周边的停车位情况，所以地图这层含义必须表达出来，但强度较弱。

加上边框，处理一下背景色，微调字体笔划，背后叠一层表示道路的交叉虚线。在没有大创新的情况下，进行微整形更需要精雕细琢。背景色的渐变、文字与边框的渐变、边框位置与粗细、虚线的透明度，都是来来回回反复调整才得出的结果。虽然比较挫，不过这就是我们的第一代icon了，用了半年多。至少可以保证看到它的人，第一反应就是停车场标识。

我甚至还专门设计了中文字体，当然……很不到位，再接再厉，字体设计是我需要恶补的一口大坑。

二代icon

随着产品功能迭代，不再只有1.0时期寥寥可数的几个界面了，APP的整体风格和视觉语言也逐渐体现出来。为保持所有界面协调一致，我设计了一套配色方案，用来确定整个产品的形象和基调。不过实际上，这项工作，最好是在一切开始之前进行。虽然它不属于icon的范畴，但对icon的设计有深远影响。

有了用色标准，APP的界面风格是统一了，但之前的icon却显得脱节了。设计一款同时符合iOS7和Android 4.0+视觉风格的icon势在必行。研究两者的官方设计指南，可以发现一些共同点和差异。首先，扁平化在当下是大势所趋，也是工具类APP极为受用的指导方向。不过iOS7与Android 4.0的扁平风格有所差异，iOS7的扁平可以简单归纳为：细字体、微妙渐变、无阴影无线条、模糊背景，而Android的扁平具备以下特点：纯色、无渐变、微妙阴影、广泛使用线条、卡片式设计。

首先，新icon在内容上需要做到简洁，去除了之前一些冗余元素，例如边框、虚线，引入图钉元素，地图的含义还是需要保留的，大致方向就确定了。然后从iOS7与Android的设计指南中吸取各种特征进行排列组合，对字体倒角、图钉形状和位置大小等进行反复调整，产生了4个有细微差异的版本：

第一个是由浅蓝到深蓝的渐
第二个是由海蓝到紫罗兰的渐
第三个由半透明色块相互叠加构成，想表达出类似水晶的质
第四个是向Google致敬的作品，底部有厚度和透视角度，图钉的颜色是纯色

由于某人对blingbling的东西情有独钟，加上我最近又很迷纪念碑谷这款游戏，很难控制向它致敬的冲动。又擅自补充了两款激进风格的，完全去掉了图钉，停车的含义反而更突出了，用色和布局都更加夸张。

最后在朋友中发起了一轮投票，两个激进方案由于出现较晚，没有参与投票过程。前4枚icon朋友们给出的票数竟然非常接近，分别是3、3、2、3，结合团队成员和我自己的选择，最终定稿。

No. 2 就你了！

小结

以前总认为icon设计是美术功底非常扎实的设计师才能做好的事情，尽管那对于设计确实有帮助，却不应成为阻碍自己尝试新领域的借口。这小小的四方天地中，怎样的设计能够出彩，考验的更多是设计师对于所要传达信息的理解与把握，还有反复雕琢的耐心。这一版赶着和APP一块儿上线，暂且告一段落，希望以后自己获得更多提升后，再回头来将它做得更细致，或者设计出更棒的替代方案。

案例研究:wordpress主题设计

hi@victor42.work (Victor42) — Sun, 20 Apr 2014 00:26:26 +0000

[国外设计第37期]

如果你是个网页设计师，并且经常使用wordpress，你可能会喜欢这个案例研究，我将展示我设计wordpress主题的过程。尽情享用吧！

几个月前，我应Slocum Themes之邀接受一项挑战，为博主们设计wordpress主题。理念是运用所有wordpress默认功能，创造一款简洁有效的主题。

我决定从社交媒体汲取灵感。毕竟，社交媒体的升级版可以被看作微型博客。对于像facebook、twitter、google+和pinterest这样的社交媒体平台如何展示文章，我做了一些研究，尤其是带照片的文章，然后Socialize就诞生了。

设计过程

第一步永远是在纸上画线框图，然后在Photoshop中进行设计，再是编码。鉴于是wordpress主题，我能够列出网站所有的组件和元素，所以我决定遵循基本的wordpress博客样式（页头、主体、侧边栏、页尾），不用画太多线框图。

相反，我想创建一套样式指南，所以我将一切分解，一次设计一个组件，保持整体设计的统一。我只在所有组件完成后，才将它们组合起来，而非采用常规方式，首先设计首页再是内页，我想要创造一套能够用在所有页面的可靠的指南。

文章组件

考虑到这一点，我认为我的关注点应该在博客最重要的元素——“文章组件”上，它在首页上要如何展现，才能吸引用户深入阅读。所以这就是一切的起点。我将文章组件分解为更细微的元素，例如：

文章日
文章作
文章标
文章缩略
文章描
操作项

我决定忽略某些其他的常见元素，例如分类、标签、评论数。

画了几稿后，我对于自己想要设计什么有了固定的概念。我不是在重新发明轮子，而是在试图简化它，如今多数博客主题有着数量惊人的选项，我的理念是让它在桌面和移动设备上都保持简单有效。

随着第一个也是最重要的组件完成，我列出其他所有需要设计的组件和元素。

颜
字
栅
图
导航与按
侧边
页
文章翻
文章评论

颜色

由于主题会有各种配色方案，使用多少颜色，用在哪里就显得很重要。我是这样分解它的：

主
辅助
背景
文字颜
链接颜
- 链
- 鼠标悬停状
- 鼠标点击状态

一旦颜色指南创建好了，可以使用Adobe Photoshop轻松将它换成另一套颜色，降低饱和度到黑白，再覆盖一层所选的颜色。

字体

下一步是定义一套字体结构基准，用来指引首页和内页的文章。这个项目中，我所选的字体是Source Sans Pro，由Adobe出品的一款无衬线字体，在用户界面中表现良好。尽管我在photoshop中创建了一套简易指南，还需要编码出一套完整版以供参考（查看字体指南）。

栅格

我创建了一套对于带有侧边栏的博客非常有效的栅格系统，流式布局，完全是响应式的，最大支持1200像素宽

图片

尽管主题是响应式的，某些图片的尺寸会根据屏幕尺寸变化，我还是想根据栅格设定最大和最小尺寸。

导航与按钮

导航保持非常简洁，颜色效果由我所选的色彩决定，为了保持整个主题的一致性。

侧边栏和页尾

页尾和侧边栏用的是相同的组件，所以我将它们设计成一个，唯一不同的是，页尾的背景色使它的组件略感不同。

文章和评论组件

要完成我样式指南中的所有组件，还差文章和文章评论组件。

最终的设计

一旦我的样式指南完成了，我只需要把一切拼凑起来，我编写了HTML和CSS，交给我在Slocum Studio的朋友把它处理成wordpress主题。有些元素在编码过程中有轻微的改动。

这是最终的首页，这套主题完全是响应式的，特色是支持8种不同色彩。

演示和购买

观看演示或购买这套主题，请访问Socialize Pro，在那里有售。还可以看看这套主题在MattReport.com的实际运用效果。

原文链接

iOS系统默认字体对照表

hi@victor42.work (Victor42) — Sat, 19 Apr 2014 20:17:00 +0000

工作中需要对比iOS系统默认字体，于是拖着开发同学写了一段代码逐个输出，再自己稍作调整修饰，在此分享出来。

新的APP演示良方:GIF动画

hi@victor42.work (Victor42) — Sun, 13 Apr 2014 13:24:03 +0000

[国外设计第36期]

每种事物都有回归的本能，长期以来，GIF动画在开发者当中，失去了它的统治地位，不再受欢迎，不再通用，近期它摆出了回击的姿态。尽管还是一如既往展示图像序列，但它不再像当年那些生硬的低画质视频，没有粗糙简陋的过渡效果。如今，GIF动画能够通过抢眼的效果和流畅的过渡，有效地聚集人气，给最终的动画一种柔滑精致的感观。

UI/UX开发者迅速估量了这种动画图片的潜力，它们虽小却非常有效，极具解释性。我们都知道，有时向客户或最终用户解释APP最后看起来将是什么样，会是多么困难、气人且耗时的事情；没有华丽的高质量截屏，精心绘制的用户界面配上一大堆解释和“手势”说明效果，并不怎么管用。只有视频和这些简短的GIF动画，才能轻松展示操作流程，并传达一款“活”APP的所有魅力，在众多功能组件之间，有效地展现交互。

颇具讽刺意味的是，我们的展示工具集中，最近补充了一种新工具，而它实际上一直以来就近在咫尺。

今天，我们汇集了一系列GIF动画作品，愉快地展现了各种移动应用的操作流程。

第一件作品是Dmitriy Chuta的Chapps，你可以欣赏它整个漂亮的动画效果，一组不同职业人员的照片卡。这张GIF图片展示了一种讨人喜爱的方式，通过令人愉快的视觉表现，来在数据库中进行选择和搜索。

Bastien Leprince的APP概念设计，这里，我们的主要注意力，集中在地图组件内嵌的拖拽筛选功能上。所展示的所有功能界面和组件，相互间完美互动，为用户提供了一套流畅的操作流程。

George Frigo的FaceScan APP概念设计，尽管动画只持续了12秒，但它足够清晰地表达了这个APP的主要创意。对于那些想要一睹完整版的人，这位UI设计师也提供了AVI文件。

Alexander van Ravestyn设计的WIP音乐发现APP，就如名字所暗示的，设计师想将用户的注意力引导到多媒体内容的浏览过程上来，不出所料，最终来到一个设计精美的音乐播放器界面。

Jakub Antalík设计的Speedcam APP动画，设计师非常棒地通过动画表现他的APP。GIF漂亮地展示了speedcam的一部分，光彩夺目。

Barthelemy Chalvet的Workflow Payment，这个团队展示了他们新APP的几张GIF。下面这张将关注点固定在支付流程上，看起来相当优雅便捷。其他GIF突出了时间轴、支付/费用、卡片和账户处理。

Barthelemy Chalvet的Dashag Tour，这个团队只是展示了一张小GIF动画，让人想起他们之前的项目。如果你想完全熟悉这个APP，可以访问他们的官方网站，里面包含了一大堆GIF动画，展示几乎所有的功能界面。

Sergey Valiukh的GIF动画设计，这个一流的界面有着令人愉快的精心处理的过渡动画，表现了在基本地图组件与主菜单间切换的简短流程。通过舒服的动画效果，一切相互衔接良好。

Devin Ruppert的Walkthrough动画，这张GIF展现了一个欢迎界面，带有多个动态图的幻灯片和登陆按钮面板。一切都活了，有效地表现了这个APP所带来的功能。

Mihnea Zamfir的交互概览，这是个非常简短却有效的动画，初衷是描绘一个从卡片目录中添加和删除项目的简单流程。

Tobs设计了给队友删除和添加任务的动画，这张GIF动态展现了标准的滑动技巧，有效地支撑了整个审美取向，让APP看起来更鲜活、现代和诱人。

Jan Losert的团队信息工具，这个团队为用户提供了大量解释性资料，不仅用来展示带有描述的静态屏幕截图，还有视频和一张巨大的GIF动画，展现这个APP的真实操作过程。

Ben Dunn的菜单交互GIF，这个动画GIF被当作展示动态美感的工具，表现了菜单优雅地从左侧滑出，并列出所有必要链接的过程。

Ed Sansom的Poppin添加任务效果，这个APP有着讨人喜爱的圆形氛围和优雅的扁平美学取向，集各种柔滑效果于一张GIF，使它得到了恰到好处的强调

Dennis Terrey的第一件UI动画作品，这张GIF试图示范，如何使一个基本的菜单看上去干净、时尚和细腻。

Danny Spitzer-Cohn的Zite新鲜事设计，我希望用这个讨人喜爱的GIF动画来补充这篇作品集，它对高雅和传统的运用，绝对给人带来一丝愉悦的怀旧感。

对于那些想要尝试这种展现方式的人，我们也准备了几样赠品——可以被轻松拆解成组件的GIF动画。

赠品：PixelBuddha的扁平风格预加载动画

Areus Wade预制的触摸手势动画

结论

就APP创造者和客户（或最终用户）间的互动而言，像Adobe After Effects这样的视频编辑软件充满了机会和可能，能够解决很多问题。GIF图片可以用来简短的解释动画效果，有效的展现操作流程，让人更好地理解这是怎么回事。

原文链接

LOGO设计终极指南【下篇】

hi@victor42.work (Victor42) — Sun, 06 Apr 2014 13:05:05 +0000

[国外设计第35期]

LOGO设计终极指南系列：上篇中篇下篇

如何处理最终稿

一旦最终稿已经选定，你得创建可交付的文件给客户。要确保你的设计具有适应性，在大小尺寸中看起来都不错。你的LOGO设计可能以各种尺寸被用在屏幕上，也可能用在印刷品中（这意味着需要至少300dpi）。当然，你是在矢量图形软件中设计的LOGO，你有矢量文件，不过你还需要提供其他更多贴心友好的文件类型，给客户使用。花些时间在非矢量文件中作出适当提示，使它们更加干净优美。当你把矢量文件拖进Photoshop或其他位图程序时，在设计作品的边缘，最终会产生各种像素点，你得清除它们，为了最干净的最终成品。

你还应该为LOGO最终稿创建一套风格指南，并结合品牌，来判断各种应用方式是否合格。创建一张使用守则清单，用来说明如何使用LOGO，包括是否可以将它轮廓化或者放入色块中之类。如果需要一些灵感来创作设计风格指南，看看Creative Blog的10个神奇细腻的设计风格指南。

提几句字体设计

这里有些很棒的提示，帮助你在LOGO设计中更好的运用字体。

不要使用具象LOGO中已经使用过的字体。当然，这条也有例外，比如很多图形LOGO中使用过的字体（像Helvetica）
确保你的字体与品牌基调相吻合。严肃的品牌使用严肃的字体。传统的品牌使用传统的字体。现代的品牌使用现代的字体。你应该有概念的
当心“时髦的”字体。今天是时尚的东西，明天可能就过时了
同样，避免使用花哨的字体。有很多免费的装饰性字体，确实很诱惑人想要使用它们。一句话：不行。第一，它们很可能已经被用在世上某个蹩脚的LOGO里了。第二，它们中的大多数都设计得不太好（这就是它们免费的原因）
在设计中对现有字体进行调整。增加一条曲线、改变长宽比、移除某些元素，或其他任何你需要的手法来使它为你所用，并让它更吻合客户的品牌
看看其他LOGO如何使用字体。尽管不该从其他设计师那里抄袭创意，观察其他设计师如何完成一项特殊的设计挑战，这是明智之举。结合项目背景，采取有用的策略，改造它们来满足你特殊的需求
避免使用多种字体。最好坚持使用一种，如果你一定要的话，最多两种。再多的话，你就冒了很大的风险，不太可能成功，除了在一些最为极端的情况下
试着在LOGO设计中调整字符间距、文字间距、行高，可以看到字体的融合如何增加了吸引力并突出LOGO。这就是个很棒的例子，表现了两行平行的字母如何给LOGO增添了吸引力和一丝奇妙：

客户在（应该）寻找什么

现在你知道怎样设计一枚优秀的LOGO了，你可能还想知道，想要一个新LOGO的潜在客户，会在设计师身上寻找什么（或者至少他们应该寻找什么）。

你有没有久经考验的经验？还有老客户们的满意度？这两者都是关键。推荐和褒奖大有帮助，让潜在客户安心选择与你合作。这一切就是社会的认可与佐证。还有其他能让客户安心的东西，比如你获得过的设计奖项，或者你已经发表的作品。不要羞于在作品集中展现这些。

潜在客户是否选择和你合作，而不是你的竞争者，你的时间安排表和报价也是一项重要因素。尽管以最廉价的设计师自居，对你和客户没有任何帮助，标榜自己为最昂贵的设计师，也需要相应的技能和凭据来支撑。因为老实说，潜在客户在选择你或其他设计师时，如果作品质量都满意，最终几乎肯定取决于价格和工期。要保证你为这个价格提供了相应的价值。

沟通方式和你的专业程度也是关键。确保你及时响应任何客户发来的沟通请求，这样你就会使自己一直表现得很专业。不论这是的第一个收费LOGO项目，还是第一万个，对客户而言，你如何与他们交流是唯一要紧的事。

LOGO设计案例研究

观察一些清楚描述LOGO设计过程的案例，对于LOGO设计新手是莫大的帮助。它让你更清楚的见识到，在实际运用中这些步骤是如何作用的。看看下面这些：

Just Creative获奖LOGO的设计过程，包含了这家公司的图形化LOGO是如何创作出来的，旁边一直有图片展示。

Dache的LOGO设计过程包含了Dache的瑞士著名LOGO设计师——David Pache如何着手创作这枚LOGO。

Spoon Graphics的这篇Vivid Ways的LOGO设计过程与解说，展示了他们如何创作这个色彩丰富的LOGO，还有客户的反馈。

Duoh!博客上的这篇文章，Social Signal的LOGO设计，从设计提纲开始，详细描述了创作这款LOGO的过程。

看看Just Creative’s里这篇A-List Blogging Bootcamps VI设计的过程，它还包含了他们最初如何赢得这项工作。

Bounty Bev的Logo设计过程给出了一个核心提纲，展现Centresource如何在一周内创作了一枚不可思议的LOGO。

LOGO设计过程——Apple & Eve（无装饰版）VI设计进化是篇引人入胜的概览，展现了怎样的LOGO富有挑战性和潜在的灾难性。

FITUCC I的LOGO设计过程，JUST Creative的另一个很棒的学习案例。

用Illustrator打造光彩夺目的品牌、LOGO和风格指南是一篇更加偏向于教程的概览，来自VectorTuts+，通过Rockable Press案例来阐述如何创作LOGO和相关的品牌资料。

Abduzeedo的Mentaway LOGO设计案例研究展现了Mentaway的LOGO的设计过程，从最初的灵感和概念，到最终的设计。

资源和工具

尽管很多设计师可能想摆脱Adobe Illustrator或其他矢量绘图软件来绘制LOGO，你可能还是想知道有没有免费的应用或其他工具来创作LOGO。好消息是，有非常多；坏消息是，不是所有都能做出优秀（甚至只是好的）设计。不过关于这一点，此处列出一些较好的在线LOGO设计应用。

Graphic Springs通过简单5步，让设计LOGO变得简单。他们提供相当广泛的图片库给你选择。

Squarespace Logo是个新工具，来自一家受欢迎的网站提供商。和此处其他多数相比，这绝对是个更现代和合理的设计工具。

DesignMantic提供了大量图片让你包含进LOGO设计。输入你公司名称，他们会生成一堆可以自定义的模版，或者将各种设计根据行业排列。

LogoGenie使你可以通过3步创建LOGO：选择你的行业图标，选择字体，还有效果，然后就完成了。

Logaster是个很好用的LOGO设计应用。输入你的公司名称和类型，选择LOGO理念，编辑，然后下载最终设计。

LogoYes有一大堆图片可供选择，让创作LOGO更加快速和简单。

LogoMaker是个简单快速的LOGO生成器。你可以最多获得6张免费GIF图，或者付费购买高分辨率图片。

结论

LOGO的创作对于初学者来说，可能看上去像是一道非常简单的题目，但创作一枚经得起时间考验的非常杰出的LOGO，就是一个复杂得多的过程。关键是花费必要的时间来正确地创作LOGO，不论是为自己还是客户。

不这么做的话，可能其结果是一个设计拙劣的LOGO，无法恰当地代表品牌，也无法向公众传达出正面的信息。这会损害你的声望，并且迅速导致客户流失。

遵循上文的提议会帮助你避免它，并且帮助你创作出杰出的LOGO，巩固你的声望，改进客户的业务。

【全文完】

原文链接

开始犯傻了吧？

hi@victor42.work (Victor42) — Sun, 30 Mar 2014 00:29:00 +0000

芒果雪梅娘

和竹子去避风塘湖吃海喝，我实在不会点菜，一顿吃下来只有一道糕点印象深刻。

就是这个，雪白的糯米糍里包着芒果，名曰芒果雪梅娘，真是拗口的名字。后来和竹子再去那一带，她点名要吃这个，却半天喊不出名字：“我们去吃那个芒果……芒果白雪没你娘！”

注定失败的战争

记得有那么一阵子全国大部分地区网络瘫痪了几十分钟，当时还在吐槽互联网公司怎么又断网了，天南海北求证一番才知道是粗大事了。

果然，远在苏州的前魔兽世界公会会长Q我了。想当年……我们那个公会名扬立万，靠的就是一个潜心烹饪法师会长，和一个潜心钓鱼的牧师副会长，其实副会长就是在下我了 - -||| 【回忆完了没啊！你丫动不动就回忆啊！！螺旋丸都搓了3集还没搓出来啊！！！】

“冰淇淋，你的网页能打开不？中国的互联网被攻击了？我们公司网刚刚挂了，所有图片都显示不出来，QQ可以。”我当时的ID叫哥本哈根达斯，这是个带有选择性暗示的ID，显然会长大人对于旅游和美食，选择了后者。

“还有一种可能……我们在同一家公司！”其实我觉得这种可能性还更大点。

“我苏州不可以，南京也不可以。”

“杭州也挂了。上海可以。不过上海危险了。看来这股阴暗势力正在对上海形成包围之势。”

“这肯定是一股拥有高端技术以及装备精良的非法分子，他们是什么时候渗透到中国来的？他们的目的又是什么？但不管他们想做什么，我敢肯定，这只是个开始。”

“小心，可能网再恢复的时候，我们平时熟悉的网站，打开都会变成看起来一模一样的伪装站点，其背后藏着什么样的惊天秘密，我们是不可能想到的。”

“我隐隐感觉这其中有地球文明之外的势力，否则怎么能伪装得这么天衣无缝。就目前而言，全球还没有哪个国家拥有这样的技术，我断定，这一定是外星文明像地球发起的一次攻击。”

“这太糟糕了，这场战场才刚刚开始，我们就已经输了。如果说外星文明选择攻击人类的网络，那他们肯定已经掌握了人类文明的发展史，也知道人类对网络的依赖程度。网络被截断，人类社会就会变成高位截瘫的病人。但正如你所说，这才是刚刚开始。截断后再接上，谁知道他们接上的是什么。攻击我们的文明一定已经经历了人类的信息化发展历程，甚至可能已经发展到我们无法理解的高度了，这场战争我们注定是失败的！”

N多寿衣

过年回家和众小伙伴一路逛吃逛吃，兴冲冲来到一家寿司店。

“这以前不是家寿司店么？”

“对对，我记得叫N多寿司来着。”

“怎么变卖衣服的了？”

“N多寿衣。”

拜访愚蠢的人类

愚蠢的人类有望移民澳洲，我第一时间把这个喜大普奔的消息告诉了竹子，说我们以后去投奔他吧。

竹子说好啊好啊，我们去吃他的饭，睡他的床，顺便打他的娃。

五四运动的导火索

615群里说起五一计划，当然，对于天马行空的小伙伴们来说，话题一不注意就会跑偏的。sos就已经开始提五四运动的导火索了，是什么大家都知道，五一只放三天。BB问，真正的导火索是什么。学究小钢开始科普，国土被日寇强占，北洋政府无动于衷。然后我觉得还是少了些什么，于是补上一句：

然后敌占区的政府五一放了4天，北洋政府只放了3天。

全职太太pizza

pizza说她今年想当全职太太，我表示不可思议，你这是要造人的节奏么？然后开始独自YY她当上全职太太以后的生活。

大pizza小pizza

国家开放二胎政策，然后越来越多

oh, no! 超生了

反差还能再大点么！

上班时逛设计博客，滚动条滚到一半，看到一张貌似很屌的图，自动脑补下半张造型，总觉得很牛逼的样子。

结果他喵的是这样……

红玫瑰白玫瑰

615齐聚玩谁是卧底，有道题平民和卧底词分别是白玫瑰和红玫瑰，游戏本身很平常，不过一局结束后大家对两个词展开了热烈的讨论。

红玫瑰见的比较多，白玫瑰很少见，象征什么？纯净的爱情。那红玫瑰象征什么？不纯洁的爱情……

开始犯傻了吧？

在虾米听音乐闲逛，胡乱点进入了自己的个人主页，鼠标指在头像上，下面滑出了操作菜单。自恋的我本能地在“关注”上点了一下，下场如下：

问路

有人来公司面试找不着路，在天目山路上打电话给我们求助，咱们给他支招说从第七人民医院穿过来（7院在很多城市都是非常特殊的医院，你懂的），到了西溪路上就能找到了。

克超恍然大悟，原来7院可以穿过来的啊，为什么我上回从那里走，里面的人跟我说过不去的？

我想了想，问他：“你当时问的是正常人吗？”

LOGO设计终极指南【中篇】

hi@victor42.work (Victor42) — Sun, 30 Mar 2014 00:25:32 +0000

[国外设计第34期]

LOGO设计终极指南系列：上篇中篇下篇

纸，还是屏幕？

绘制你的设计时，你可能想知道，是在纸上画好，还是在电脑或平板上画好。

尽管作为设计师，在哪里画确实取决于你的喜好，不过你会发现，从纸开始更加有效。在纸上创作时，你不太会去擦除和修改。

在纸上创作的另一个好处就是，它创造了一个断点，让你潜意识认为这不是最终作品，所以凌乱与快速是可以接受的。因为多数人习惯于在电脑上打磨自己的设计，创造最终成品，相对于纸上，在屏幕上创作时，我们就会有完美主义倾向。

当然，如果你觉得用数位板在屏幕上画更有效，那请务必这么做。在平板上的绘图app里创作是个很棒的折衷方案。好处是当你进入精细化的阶段时，能以更先进的方式，将手绘稿导入图形处理软件

反思与精细化

一旦你有了一大堆手绘稿，你可能立刻一心想要将它们中的一个或多个精细打磨，展示给客户。又或者，你可能发现自己完全被自己的创意淹没了，不知道要推动哪些继续深入。

这就是为何从设计中抽出时间反思它们如此重要。如果有几天时间思考和回溯，那非常棒。如果没有，至少试着忽略它们，你就能从新的角度看待它们。假如这也做不到（如果是急活或是有其他时间约束，这是有可能的），那么至少去喝杯咖啡，吃顿午饭，或者散散步。

时间能够让你与自己的设计保持距离。这层距离，让你不容易选择自己的“最爱”、最花时间的方案、或是“灵光一现”的创意。反而，你会更容易客观地对待各个LOGO手绘稿，看出哪个对客户最有意义，不管自己的个人喜好。

一旦你回到电脑前，看着自己的手绘稿，在决定哪个LOGO概念最适合深入，并向客户与其他决策者展示之前，你得考虑一些事情。

首先，确保自己清楚了解相关的文化差异。如今有那么多全球范围的公司，至关重要的是，他们要了解自己LOGO在业务所覆盖的其他国家与文化中，有什么潜在的象征和含义。即使仅仅是本地企业，也需要清楚这些事情，尤其在有大量移民人口或多种族的情况下。

例如，在大多数国家，“竖起拇指”被认为是积极的象征，一切正常。但在撒丁岛、希腊和一些伊斯兰国家，这是个粗鲁的带有性意味手势。换句话说，别想在一家希腊餐馆的LOGO里展现竖起拇指的形象。

一旦你缩小范围，确定了想要在哪些LOGO手绘稿上继续深入下去，是时候做些优化了。手绘阶段的重点，就是让你的创意以它最粗糙的形式展现在纸上（或以像素点的形式）

确保你选择的LOGO概念稿在深色与浅色背景上表现同样良好。你永远不会知道它的结局是什么，一段时间后，这家公司的网站或其他品牌宣传材料会发生什么变化，这些都不应该令LOGO过时。多数情况下，LOGO应该超越其他品牌设计的变化，除非一场全新的品牌重塑正在进行（即使那样，有时LOGO也会延续）。这就意味着你得把LOGO做得尽可能灵活。

你的LOGO要越简单越好。一直做减法，移除各种元素，直至剩下最低限度来传达信息。实际上，有个很管用的策略：坚持移除各种元素，直到信息丢失，然后再添加回来，使含义再次清晰。多数情况下，简单就等同于一定程度的永恒品质，能够在年复一年的潮流涌动中生存下来。

绘制初稿时，你可能没考虑过通常与公司LOGO毗邻的标语或其他词句。不过，LOGO和标语合并与分开时都要表现良好，这点很重要。多尝试不同方式使两者结合，为两者设计不同样式，让它们在各种情况下都表现良好。

你在设计中使用的颜色，与最终LOGO给人的认知有着重大关联。也许你会用到一套客户提供的严格设定的配色方案，或者你可以随心所欲使用自己喜欢的颜色。无论哪种可能性，客户至少会提供一个色系，希望在LOGO中使用（或者必须使用）。

在之前两种情况下，你需要仔细考虑使用不同色调会如何影响最终认知。例如，使用明亮高饱和的颜色，和使用柔和色调，就给人非常不同的印象。当LOGO设计不怎么合适，却找不出原因时，首先考虑一下调整配色方案，看看是否能解决问题。

确定配色方案应该属于LOGO设计过程中最后的步骤之一。确保你的设计能在单色中运用，也要能运用在丰富的色彩中。

你还需要对你所选择或特别为LOGO设计的字体进行精细化处理。对字体进行一些小调整，例如改变笔划粗细、去除个别字母或元素的某方面特征，或其他类似变化，能够对整个设计产生深远影响，使它从优秀走向伟大。

选择一个LOGO

此时此刻，你可能已经有两三个接近终稿的LOGO了。在所有可能性中，你想把这几个展现给客户和其他决策者，带入最终的讨论来决定使用哪一个。

不过，正因为你有3个设计方案，不代表你就得立即全部展示出来。相反，一开始你可以只选一个展示，观察客户的反应。假如客户没有全程关注设计过程，你担心他们对你所展示的不太满意，这是个特别有用的策略。用一个设计方案获取反馈，然后你可以对它进行调整，或者了解到其他哪个方案会令客户满意，这是个很棒的策略。

另外，给客户太多选择会让他们难以做决定。甚至更糟的是，他们可能会让你废弃掉这3个，设计第4个（然后是第5个、第6个……）。毕竟，如果你能轻轻松松设计出3个LOGO，再设计几个也没什么大不了。

确保你对每个LOGO都有一套组织好的理念，并且解释它为什么适合客户。最好的客户会请你指导，哪个LOGO真正是最适合他们的，要能够给他们一套周全的见解，来逐一阐述为什么它们合适，巩固你身为设计师的专业技能。

你可能还想在各种环境中展现LOGO，这样客户能形象地看到它在实际运用中的效果。将新LOGO放在客户的网站、名片或其他材料上。这对客户是个巨大的帮助，他们可不像身为设计师的你，没法轻易想象出最终效果。

最终，哪个LOGO最适合客户的公司，由他们决定。之后再要提出任何修改和调整，参照设计合同。

【未完待续……】

原文链接

主流Android分辨率简报

hi@victor42.work (Victor42) — Sat, 29 Mar 2014 23:23:00 +0000

Android设备的碎片化众所周知，分辨率、长宽比千变万化，让设计师与开发者头疼不已。由于工作需要，我对其简略分析了一下，希望对自己与广大设计师和开发者们的工作有帮助。

LOGO设计终极指南【上篇】

hi@victor42.work (Victor42) — Sun, 23 Mar 2014 10:58:35 +0000

[国外设计第33期]

我注：文章是好文章，弃之不舍，不过实在太太太长，所以我决定拆成3篇

LOGO设计终极指南系列：上篇中篇下篇

市面上有些公司会让你相信，设计LOGO不过是把一些文字和一两个图形拼凑一下而已。但不论别人怎么说，设计一个好LOGO绝非这么简单。

很多都成为了伟大的LOGO设计。尽管一个LOGO看起来像是微不足道的小东西，它代表着整个公司或品牌，必须展现出辨识度、价值和更多信息。不能把它当作一件“微小”的设计工作。它可以成为一个公司最重要的设计，也会引导未来的设计和品牌决策。这篇指南中，你可以学到所有必要的步骤，来为自己的项目或潜在客户打造极为出色的LOGO。

是什么成就了一个优秀的LOGO？

好的LOGO是有力的。无论它包含了图形或者只是纯文字，一枚好的LOGO有它特定的力量，使它引人注目。

关于这一点，优秀的LOGO是独特的。不会与其他公司的LOGO混淆，尤其是商业竞争对手。

同理，好的LOGO是易辨识的。它可以迅速轻易地和某项业务关联起来。

好的LOGO也是经久不衰的。在10年、20年甚至50年后，它仍然应该是杰出的，并且看上去通行于世。说起来可比做起来容易。

好的LOGO也能强化你的品牌。它应该为公司传达出适当的情绪、基调和感觉。是否使LOGO在字面上体现你的公司，这取决于你，每种方式都有它的优势与劣势。但无论哪种方式，它都需要成为你品牌的支撑。

真正优秀的LOGO还能传达出公司的核心信息。它能传播公司所信仰的质量、技术与价值观。

LOGO的分类

LOGO主要有三种形式：字体LOGO，基于文字的LOGO；具象LOGO，使用直接与公司类型相关的图形（比如服装店使用衣服作为LOGO）；还有抽象LOGO，图形与公司类型并无明显联系，可能更多基于一种感觉或情绪。

字体LOGO

字体LOGO非常普遍，通常是在某种现有字体上进行扭曲与变化。字体LOGO尤其适于那些投入不止一个行业的多元化企业（例如GE或DuPont）。

The Sky Production的LOGO是个很棒的字体LOGO案例，将图形融入字母。字母“S”的造型来源于云彩的形状，而两侧的边框看起来像胶片的边缘。这个绝佳案例提升了字体LOGO所能达到的境界。

在SiO Athletica的LOGO中，代替A的简单三角形厚实而现代。足以贯穿整个标志和其他带有A的品牌宣传材料，强化品牌形象。创作你自己的LOGO时，可以考虑类似的处理方式。

尽管这个不会立刻让人察觉是字体LOGO，LOGO的形状是由4个字母B构成的。很有创意，令人印象深刻，却不复杂。

Cube的LOGO简单直接，用一根线将矩形转变为风格独特的字母C。

Folkdeer的LOGO将鹿角融入了字体中，模糊了字体LOGO与具象图形LOGO间的界限。

具象图形

具象LOGO也非常普遍，能够直接提供公司名称的含义，如果它不够清晰明确的话。通常，本地与小型企业似乎特别喜欢这类LOGO。部分原因可能是这些LOGO容易辨认，只留给大家很少的开放性解释空间（尽管有些公司也很聪明地运用了双关含义和隐藏图形）。

对于自行车店与相关企业来说，自行车链条是个非常形象的图形，如图所示，这是The Ride的LOGO。

Herschel Supply公司的Winter Club Collection LOGO又是一个具象图形的优秀案例，这回是以山峰和树木的形式出现。

带有心形三明治图形的Meatlovers Gourmet Burger & Cie的LOGO很形象，同时也保持了极简主义和现代感。这说明即使是具象图形，也可以很有趣，出人意料。

Greenly在LOGO中使用了叶子，完美地表达了环保型企业的意味。

Brooklyn & Co的LOGO中的摇椅，完美地诠释了家具企业。

Plumbline Media的LOGO看起来几乎是抽象的，直到你看出那其实只是一本书（代表媒体），书脊处有一条垂线。

抽象图形

抽象图形LOGO同样很适用于多元化企业，因为它们传达出的是情绪和基调，而非具体的公司类型。一个LOGO未必需要直接反映出公司是做什么的。想想Nike旋风，McDonald’s金色拱门，或是Apple的LOGO。

Ease的LOGO是个好例子，抽象图形传达出了恰当的情绪。

Austariff的LOGO，这是一家澳大利亚的太阳能能源企业，LOGO令人想起太阳，同时也结合了叶子形状（体现可再生能源产业）。在他们的品牌宣传材料中，用了一种很有趣的方式来运用这个图形。

Stylish Eve的LOGO起于一个苹果的形状，却走向了一个抽象的结果。这是个选取与名称相关事物作为LOGO（Eve和苹果有着强烈的关联）并将它风格化的好例子，打造一枚令人浮想联翩的LOGO。

Warped Vision的LOGO使用了让人想到某些事物的抽象图形，并未给出任何关于公司具体业务的迹象。

Futural的LOGO完完全全是抽象的，却给人一种现代和未来的感觉，使它成为基于这家公司名称的一个绝佳选择。

研究，研究，再研究

为客户设计优秀LOGO的第一步，是得到一份好的设计提纲。客户应当给你他们公司的背景资料，包括他们之前用过的LOGO。不过，重要的是收集那些客户提供的之外的信息，包括直接获得和自己发掘的。

就提纲中任何你不能100%确定的事情，向客户提出特定的问题，以获得阐释说明。刚开始时，你最好得提问题，确保自己清楚客户希望和需要的是什么，总好过一段时间后无尽的改稿，或是冒着客户流失的危险，只因他们认为你没有听从意见（即使他们才是搞不清楚状况的那个）。

你得在受众中展开调查。这个LOGO会被谁看见？换句话说，谁是你客户的顾客？你还会想知道这个LOGO会被用在哪里，以何种形式。这很重要，因为它决定了你设计的局限有多大，例如LOGO是否有必要以黑白色形式良好呈现（以防你的客户仍然在使用报纸或类似的媒体做广告）。

做到什么程度不算过分？

很多从没做过LOGO的设计师可能想知道，他们需要做多少调查。怎样才算对客户公司过分了解？设计一个LOGO所必要的研究需要做到什么程度？

答案是，就设计LOGO而言，你对客户了解再多都不为过。这是他们品牌的主要部分，是他们对世界的门面。想想某些LOGO是多么的易辨识。没人需要看到“Nike”字样才能把它与Nike旋风联系起来；他们立马认出了Nike旋风，并与品牌联系起来。当你看到Starbucks美人鱼，你知道它代表着什么公司。当你看到一只被咬过的苹果，你知道那就是Apple。

你觉得，这些LOGO背后的设计师是否想过，仅凭公司手册和关于页面，就能让他们的LOGO腾飞？诚然，有时一个伟大LOGO的诞生，背后并没有大量的企业故事。不过在这些例子中增加一些额外信息，当然不会影响到整个流程。

花些时间了解你所服务的公司。了解他们的价值观。了解他们在市场中的位置。了解他们的顾客如何看待他们。如果是家新公司，那么了解他们希望顾客如何看待自己，还有他们想在市场中占据什么位置。

尽管只有两三段设计提纲，肯定也能设计出LOGO，但如果你深入钻研，就能产出更好的作品。留出适量的时间来研究和规划你的LOGO设计流程，就会得到更好的结果，让客户更开心。

激发灵感

一旦你完成了你能做到的所有研究工作，彻底了解了你的客户公司，是时候去寻找灵感了。当然，在极少数情况下，你可能会在研究阶段就想出完美的LOGO创意，不过更可能的情况是想不出。你需要去别处寻找一些灵感和创意。

当你寻找参考创意的LOGO时，来自相似企业和完全不同企业的公司LOGO都要找。花些时间浏览灵感库、博客中的LOGO集，甚至只是在Google Images里搜索LOGO。

观察所有这些LOGO时，要抵住模仿其中任何一款的诱惑。模仿或许是最诚挚的致敬，但模仿另一家公司的LOGO，对你自己和客户完全没有帮助。

记得我说过优秀的LOGO是独一无二的吗？这是浏览他人作品时，需要牢记的一项重要品质。这个观念所寻找的，实际上是激发你自己原创设计的创意，而不是让你改良从而抄袭的创意。

当你观察这些LOGO寻找灵感时，考虑LOGO的不同类型，哪种在客户的行业中看上去最普遍。大部分LOGO都是抽象的吗？具象的？还是字体式的？

因为，即使一个行业中80%的公司使用具象LOGO，不代表你的客户也得这么做。不过重要的是，要考虑打破既定标准是否符合客户的价值观。如果他们是非常传统的企业，坚持已经确定的或许是明智之举。其次，如果他们试图以另一种概念介入，又或者他们是开拓者，那么考虑偏离那些既定途径。

LOGO灵感来源

网上有很多很棒的灵感库，可以给你的LOGO设计提供灵感。下面是我们最喜欢的10个：

除了灵感库，还有大量LOGO集提供额外的启发。而且可以肯定的是，我们日常生活中被LOGO包围了，产品中、广告里、网上，还有更多。

绘制最初的设计

到目前为止，你应该已经完全沉浸在品牌中。你应该像了解自己公司一样了解它们。这能让你更容易创作出适当的手绘稿，形成最初的设计。

根据LOGO的不同类型和适合客户的不同象征，可以考虑画张表格来容纳可能的设计方案。例如，你可以划一列作为字体LOGO创意，一列用于与公司名相关的具象创意，一列容纳与他们从事行业相关的创意。在表格形式中创作快速手稿，让你一眼就看到全部方案，能让你发现以有趣的方式组合不同创意的新方法。

开始时，记住一件事，你必须得保留所有的手绘稿。在第一轮或初稿中看起来很糟的创意，可能后来成为某些绝妙方案的出发点。如果你抛弃掉早期的手绘，认为它们是垃圾，你也许以后就不能再找回那些创意了。

这也是你需要为LOGO与所有相应标语选用字体的一步。如果你想创造出完全独特的作品，可以考虑为LOGO创造一款纯原创的字体，而非使用现有字体。

如果设计纯原创字体不属于项目的一部分，那么考虑在现存字体上做些变化和个性化。这是个得到定制样式的好办法，却不用花时间和必要资源去做纯原创的字体设计。

在某些情况下，你的客户可能已经有确定的字体，你是否能够脱离它取决于具体项目。如果你选择脱离它，慎重考虑公司和他们顾客的反应是什么。

在这种情况下，在现有字体上做调整会是非常棒的解决方案。它能保持现有LOGO与公司特征既定关联，同时仍可以表现出一些更新和校正。

考虑LOGO中可能出现的双关含义或图片的隐藏意义很重要。这是个使你的LOGO好记且易辨识的聪明法子。思考带有双重含义或隐藏图形的LOGO。这就是个LOGO中“隐藏”副图形的绝佳案例。

尽管你可能选择在你的LOGO设计中有目的性地包含（或不包含）副图形和含义，你需要意识到潜在的隐藏含义、文字或图形。在设计过程中，完全可能有些词避开了你的注意，只有LOGO完成面向公众时，才被客户和他们的顾客发觉。这些负面内容充其量引人发笑，最糟糕的情况下，则可能成为你客户的一场实实在在的公关噩梦。

LOGO设计中创造的负形空间，也可以用作副图形，或者在设计中更进一步简化主图形。思考如何使用负形空间来更好地定义LOGO，或者在设计中更强调客户的形象和价值观。看看下面这个LOGO是如何使用负形拼出文字“one”的，它同时也用了数字。

设计师会掉进一个常见的陷阱，使用静态的图形多过动态图形。比如，一个设计师可能会选择一头熊的形象作为LOGO。他的第一反应可能是直接用一幅熊头的轮廓。这是静态图形；它只是在那儿待着。相比之下，一只正在做着什么的熊的轮廓（比如从溪流中抓鱼，或是后肢站立着）就是动态的，而且也更突出，令人印象深刻。它给人感觉LOGO所代表的公司在进行着什么，而不是干坐着。看看下面这个LOGO中奔跑的狐狸，是多么动态和有趣。

别怕在手绘稿上做实验。尝试一些意料之外的东西。尝试那些你确定无用却止不住思绪的疯狂创意。这是迎合每一个创意的时候。当然，你会驳回它们中的大部分，但你可能在这个过程中偶然发现一个非常棒的创意。一个糟糕的点子或许会将你引向好创意，甚至是伟大的创意。所以别着急，在最初的手绘阶段，尽情玩闹和实验。

【未完待续……】

原文链接

网页设计新趋势:更少文字，更多的富媒体

hi@victor42.work (Victor42) — Sun, 16 Mar 2014 13:47:32 +0000

[国外设计第32期]

更少的文字，更多的富媒体——在网页设计中运用视频来达到特定效果，这算是2014年的一项新兴网页设计趋势。有些人坚持认为，这是一种有争议且冒失的展现方式，因为内容（文字）为王。其他人则打破这种共识，拥护更为激进的观点，他们的依据是人类好奇心的力量，和对更加炫酷的信息获取方式的喜爱。

不管怎样，你一定会注意到近的几个月来，包含视频等富媒体，并扔掉文字内容的网站，出现得越来越频繁。毫无疑问，这种做法有它的支持者与反对者，而且也难以断言，它是否是一种合理而有益的方式，能让网站看起来更现代、精美和创新。然而它当然也别具风味。只有时间能够展现它所有的“缺陷”，最终得出积极的结论。

在此我们收集了一些网页设计案例，它们更多依靠视频与图片制造视觉冲击，而非常规文字所构成的大量信息。

带有视频的网页设计案例

Manaz Productions，正如之前例子一样，这个网站只包含了视觉信息，几乎没有文字。使用这种方式并不令人感到惊奇，因为这个网站代表着一家视频制作公司。因此，设计师仅仅使用了能够展现这家公司能力与经验的视频，来构成这个着陆页。

Designmodo的Startup Framework，这个网站同它所展示的产品宗旨一样，散发着专业与老练的形象。这个页面包含很多解释与描述性的视觉信息，包括视频与图片，自然比单纯的文字更加引人瞩目。

The Barstow，网站被优雅地切分为两半，每一半都有一段豪放的视频。它们起着显著的引导作用，也有助于将用户带入恰当的氛围。

Winshape Camps有着梦幻般欢乐有趣的网页设计。主页包含了一段全屏视频介绍，也有效地与炫丽的半透明渐变背景融合，成为功能的一部分。

Apple 30 Years，这家公司献给它的忠实用户一个干净、现代、精致的页面，作为它30周年纪念。这个页面主要包含很多有趣迷人的视频，有力地展现了它的精髓。

Garmin，这是一个促销网站，用最佳位置巧妙地展现了它的广告商品。这个网站的文字与图片相互支撑，结合地非常好，值得夸耀。

Happy，乍看之下，这就是一个普通的单页网站，推销着它的设计者。然而，它利用一种相当创新的方式吸引用户的注意，通过播放一段24小时不间断的音乐视频，展示着这件精心设计的产品的全部力量。

eCards Strasbourg，这个网站让用户有机会发送特殊的电子卡片。相当讨人喜爱的别致背景是电影的风格，不仅强调了文字，也积极地鼓励着用户填写表单。

Sonia，适用于所有时尚主题的网站，它也利用了大量以图片、视频、甚至电影短片为代表的促销元素。

Joost Huver的网页设计靓丽而匀称，主要运用了大量图片。设计师通过最简练的方式，巧妙地创造一个相当精简却内容丰富的单页网站。

TSC，这个网站强烈依赖绝妙的图片来创造视觉冲击。网站团队使用很多不可思议的图片与照片来构建网站，不仅仅是首页，还有其他内页。

Sirai Horses，这个网站很聪明地使用了华丽的专业摄影图片作为背景，伴随着它所有的内页。它们担任着主要的视觉引导力量，将用户的注意力聚焦在宠物身上。

Story and Heart，这个网站的着陆页包含了一段令人吃惊的视频作为背景，有效地补足了内容，与此同时也抓住了用户的注意力。很像第2个例子，选择四两拨千斤的视频作为背景，可以让人轻易预知网站内容，因为它代表着一个电影制作社区。

Helio Sequence，设计师运用了暗色调，它以突出亮色元素著称。在这个例子中，干净的深色背景不仅强调了内容，也令视频更加突出。

Curiosity Amsterdam，欢迎页面部分包含了一组令人难以置信的短视频，还有令人印象深刻的背景，主要用于支撑标语“Curiousity. Creating Interest”。通过它强势的视觉内容，这个网站绝对能够激起用户的兴趣。

Zione Ceramica有一个工艺精良基于图片的单页网站，以大量专业摄影图片为主。设计师巧妙地将多种视觉信息组合起，但整体界面组织良好，便于快速浏览。

Kids Love Jetlag，这个网站属于一家创意数字机构，使用了迷人的全屏轮播图和颇具争议的视频。

Geox是个完美无瑕的促销网站，背后有着新颖绝妙的创意。为了展示使用Geox产品的所有优势，这家公司没有一条条列出它的好处，而是创作了一段原创视频。

Inner City又是一个基于图片的一流网站，设计师巧妙地运用迷人的图片，作为常规内容的补充。

Google Glass Experiment是个先进的交互式网站，通过变化的视频，传达出了充满活力与能量的形象。这些视频则成为了新产品中潜藏的巨大可能的有力证明。

We are Taiga，网站首页只包含了一组全屏视频，和简单的介绍。这家公司主要强调他们的作品，正力图避免所有杂乱的文字。

结论

基于视频的网站方案，正在飞快地聚齐人气，那些久经考验、大家习以为常的文字布局却没有。这种方式不仅在创意机构或视频相关公司间盛行，也受到一些设计师与艺术家们的追捧，他们信奉“我的作品自己会说话”。

原文链接

8个优秀的移动APP字体运用案例

hi@victor42.work (Victor42) — Sun, 09 Mar 2014 16:35:38 +0000

[国外设计第31期]

我有个小小的心得可以分享给你——好的字体等于成熟的设计。直至几年前，网页设计师们都还没有对字体表现出足够的关注。如今这个领域已日趋成熟——字体繁荣发展，成为一股巨大的设计潮流。

好的字体在文本的易读性上起了决定作用，却不止于此，它也传递出设计师分享的意图。它是整个用户体验的重要部分。从另一方面讲，缺乏好的字体，是整个产品不专业的表现。文字是主要界面的基础元素——如果它设计得很糟，为何还要深入下去？

本地应用第一年在iOS和Android平台上的发展，简直惨不忍睹。似乎大多设计师和开发者根本没有考虑过字体问题。它不受重视，显得很突兀。所用的那些令人生厌的字体毫无品味。真是一场设计的噩梦。

如今，移动端设计已经远远超越早期的水平，这个领域成熟的迹象已经显露。字体是它最形象的例子。主流应用中的大多字体可以用“得体”来形容。无论是Facebook、Mailbox或是Twitter——文字清晰，字体看上去至少还不错。更有趣的是——2013年，我们看到越来越多移动应用在字体的使用上，表现出了震撼的效果。Ultravisual、WillCall、Hotel tonight就是几个很棒的案例。

可以肯定的是，在2014年，这股趋势将会形成更加强大的力量。

不能再忽视APP中的字体了。移动端的设计已经成熟。

Citroen Lifestyle, iOS

Fancred, iOS

Fifa, iOS, Android

Foodie Recipes, iOS

Hotel Tonight, iOS, Android

National Geographic City Guide, iOS

Ultravisual, iOS

Willcall, iOS, Android

原文链接

2014盛行与即将消逝的网页设计趋势

hi@victor42.work (Victor42) — Sun, 02 Mar 2014 01:03:32 +0000

[国外设计第30期]

过去两年来，我们见证了网页设计不可思议的变化，继而预测下一股可能出现的热潮。不管怎样，关于今年哪些趋势将会盛行，哪些将会消逝，我已经有些自己的预感了。看看你是否与我不谋而合！

（这是2013年网页设计趋势回顾）

即将盛行的趋势

有几种趋势即将到来，每一种都令我兴奋不已。今年的设计圈将大有看点，因为我觉得有一大堆变化即将发生，导致激动人心的走向。

模糊背景

多亏去年夏天的iOS7发布，设计师们像发疯般地将它作为灵感来源。其中诞生了一种出色的趋势，模糊背景被更多地使用。这个概念是指你当前所在的界面盖在前一个的上面。想想水雾弥漫的浴室门，它的背景就是模糊的。它确实是种非常酷的趋势，因为很多这类背景创造出了相当美观的非线性渐变。

Emotions of sound

Trippeo

简单的动画

从iOS7中诞生的另一个趋势，就是简单的动画效果。在网站和app中随处可见，它们是一些精妙的动画，为设计增添释义和个性。你可以在手势操作中发现它的身影，比如当你在信息中上下移动聊天气泡时，它们会相互碰撞。点击事件中也有，当你点击导航，它不是直接出现，而是向下滚动出现。CSS动画和变换的广泛使用，造就了诸多此类效果。

Theme kingdom

Big Cartel

简单的配色

过去一年里，大胆明亮的颜色已经为自己正名了。不过，使用亮色的微妙浅色搭配也一样。我说这个趋势时，基本上是指Google。很多他们的UI广泛使用了浅灰色和少量微妙的颜色，让网站看上去轻巧干净。

Ora ito

更棒的用户体验

还有一种由来已久的趋势，在网页设计中提升用户体验。我觉得这一点只会日趋重要。有一场重大的运动正在进行，旨在将用户体验与商业战略相结合，在网站和app上提供更好的整体体验。这确实是商业中相当重大和明智的转变，当然，它们两者是相辅相成的。

Exposure

Trail spring

大字体

网页字体也获得了高度关注。随着SVG图标字体的崛起，它们也变得越来越受欢迎。当我思考网页字体时，我所想的是将大字体整合进设计当中。它们圆滑、浑厚，也很美观，但不只限于此。目前，Iconic的奇才正在掀起一场图标字体的革命，他们在尝试创作响应式图标。

Time Brack

Happy

私人化内容

人们不喜欢没有人情味的东西，尤其在网上。一想到与机器甚至另一个企业打交道，他们就没有好感。因此，你会看到一些创业公司去除了他们网站上那些优雅的内容，却凭公司背后活生生的人物脱颖而出。内容为王，这是你和你的在线读者联系的唯一方式。你得将它个性化。让你的文章和图片显得友好、厚脸皮或是古怪，这样便能让用户与你建立联系。

Wondersuance

Create pilates

糟糕的趋势

另一方面，今年有一些东西会变得越来越罕见。见证设计和行业趋势变化确实是件了不起的事情。你不觉得吗？无论怎样，对于这点你不必太难过。

低画质的照片与视频

作为设计师，囤积照片一直是个坏主意。不管怎样，你是否注意到近一两年来，照片的画质总体在上升？它绝对与更大尺寸的图片作为设计元素来使用有关，比如图片放大充满整个页头的宽度与高度。想到画质糟糕的图片正在淡出历史舞台，真是让人心情愉悦。整个行业把照片画质的标准定得非常高——它也应该如此——因为图片也是内容的一部分，画质会成就或破坏一件设计与公司品牌。无需多说，我觉得这一段陈述对于视频的画质也是一样。

FiftyThree Pencil

Agst

扁平与拟物

扁平与拟物设计之争已经逐渐被淡忘。我坚定地相信这两个极端都将被淘汰，取而代之，我们会看到更多介于两者之间的界面，它们有着微妙的渐变和讨喜的阴影。我觉得扁平与拟物这两者的粉丝，不得不将它们吸收融合，它们都只是一种趋势，两者都会走到尽头。如果你愿意的话，为两者找到某种妥协吧。

Bright Media

Elegant Seagulls

冗长的表单

随着极简主义的兴起，我注意到表单的填写正在变得更简单。这是因为公司最终听取了用户调研的意见，人们不喜欢在网上填写表单。表单越大越长，用户就越难顺利填完。你多久一次能见到不需要重复确认email和密码的表单？无论是多久，你会看到更多这样的设计。而那些询问你生活中的每个细节，还有你生的第一个小孩，就仅仅为了注册一个免费email的笨拙讨厌的表单，会逐渐减少。

Treehouse

General Assembly

原文链接

没读过设计院校，如何成为设计师

hi@victor42.work (Victor42) — Sun, 23 Feb 2014 01:09:16 +0000

[国外设计第29期]

我没有读过设计院校，却成为了设计师。我曾经想要改变职业生涯，当一名设计师，但我没有4年时间和10W美元重回学校去读。所以我决定自学。首先，我很怀疑一个人是否可以通过自学，达到足够胜任工作的水平。

如果你也有相同怀疑，答案是肯定的。

我在6个月时间内完成了自己的设计学业，同时还做着一份全职工作。那时我没觉得自己做好了准备，但还是开始应聘了——并且在一家很棒的创业公司得到了一份工作， Exec。

我承认，我还远不及许多从精英院校学习4年出来的设计奇才。但肯定足够我做好自己工作了。我的设计范围很广——网站、iPhone app、email、社交媒体，还有印刷品。

或许你想改变人生，成为一名全职设计师。或者你只是想学一点基础，支持你的创业公司或副业。

那么这是一份设计自学指南。

第1步：学着观察

最大的错误是过早陷身Photoshop。学习Photoshop没法让你成为设计师，就像买了笔刷也不会让你成为艺术家一样。从基础开始。

首先，学习如何绘画。

不必和一伙艺术家坐在屋子里尝试画一名裸女
甚至不用那么精于绘画。学一些基础，能够舒服地用钢笔绘图就行
学习绘画只需要做一件事：买一本书《You Can Draw in 30 days》，每天练习半小时，坚持一个月。我看了很多绘画书籍，这本是最好的之一。

学习平面设计理论

从这本书《Picture This》开始。它是一本小红帽的故事书，但同时也会教你平面设计的基础
学习色彩，字体，和使用网格设计。如果当地有平面设计的基础学习班，去参加
每天参加这些课程。

学习基本的用户体验

有很多关于用户体验的书籍。从这两本快速读物开始，它们会帮你树立正确的观念：

[The Design of Everyday Things](http://www.amazon.com/Design-Everyday-Things-Donald-Norman/dp/0465067107/ref=sr_1_1?s=books&ie=UTF8&qid=1371607869&sr=1-1&keywords=the+design+of+everyday+things
Don’t Make Me Think!

学着写作

别用Lorem Ipsum之类的占位符填充你的设计稿。作为一名设计师，你的工作不只是做出漂亮的图片——你得是个优秀的沟通者。思考整个体验，仔细斟酌每个词。东西是写给人看的。不要用校刊上那些让自己显得聪明的学术调调
读Made to Stick，我有史以来最喜欢的书之一。它会教你如何抓住你的读者
Voice and Tone是个很不错的网站，里面都是如何与用户沟通的案例。

学会否定自己的作品

这是整个指南中最困难的一
准备好否定每件自己的作品。准备好粗暴地毙掉你先前的宝贝设计。越快拥抱这一点，你的作品会越好。当你意识到自己的作品不够好，消灭它。再来一次
要有另一双眼睛。拿着你的作品去找那些关心设计的人，获得反馈。一个也不认识？结交一些设计师朋友——参加设计师聚会和活动
还有那些不关心设计的人。向一些潜在用户展示你的作品，请他们试用你的网站或者APP。别怕找陌生人——我有一回利用飞机延误，让航站楼里的每个人试用了我正在设计的app。他们中的很多人都正无聊着，很乐意帮忙，然后我得到了一些很棒的可用性反馈
听。真正的聆听。不要去争论。如果你想从某人那里得到反馈，他们付出了时间与注意力来帮你的忙。不要用争论来报复他们的帮助。感谢他们并提问，而不是与之理论。以后再决定是否采纳他们的反馈。

第2步：学习使用Photoshop和Illustrator

万岁！现在你有相当牢固的基础了——视觉与用户体验。可以开始学习Photoshop了。实际上，我建议从Illustrator开始学，然后再转移至Photoshop。Illustrator是设计师用来制作LOGO与图标的工具。InDesign擅长制作印刷品设计，比如传单与名片。

学习Illustrator

可以通过大量的书籍、在线教程和当面课程学习Illustrator。选择最适合你的方式。下面这几本书对于学习Illustrator基础尤其有帮助
Adobe Illustrator Classroom in a Book——它挺枯燥的，但如果你学习了至少一半，你的Illustrator将掌握得非常好
Vector Basic Training——这本书教你如何在Illustrator里绘制美观的东西
接下来是有趣的部分！关注在线教程，你能做的东西会让你印象深刻。其中我最喜欢这两个——一个logo和一副风景画。

学习Photoshop

有成千上万的的教程。大部分都一文不值。还好有一些确实质量很高的教程网站。TutsPlus的PSDTuts就是其中之一
这是一个很棒的制作iPhone应用的photoshop教程
这是一个很棒的制作网站效果图的photoshop教程
每天挤出一两个小时来学习这些教程，你的进步速度绝对令人难忘。

第3步：学一些专长

你是想设计移动app？网站？还是信息图表？多多探索，然后选择你最感兴趣的，让自己更加熟练。

学习Logo设计

学会做出还过得去的logo：Logo Design Love
不过你还会希望在logo上更进一步。学习创作统一的品牌形象——从网站到名片。看看这本书，Designing Brand Identity。

学习移动app设计

从这个教程入手，开始你的移动app视觉设计历程
读一读这本全面且深思熟虑的iPhone设计书：Tapworthy。它会教你如何设计出不仅美观而且易用的app
认真研究你手机上的app。评价它们。哪些好用哪些不好用？

学习网页设计

阅读Don’t Make Me Think来学习如何制作让人容易使用和浏览的网站
如果你希望让网站看起来更棒，读一读The Principles of Beautiful Web Design
将你觉得漂亮的网页设计列一份清单。注意他们的共同点。SiteInspire上有一些经典案例。

接下来要面对一个令人纠结的问题，作为一名设计师你是否需要掌握HTML/CSS：这取决于你的工作。掌握它肯定能让你在职场上拥有优势。即使你不想成为网页开发者，它也能帮你了解一些基础。你就能知道什么是可实现的，什么不行。

这里有些不错的HTML与CSS学习资源。

Web Design Tuts是免费教程中我的最爱
我最爱的付费教程是Treehouse（真的很实惠，每个月25美元）。如果你从零起步，需要有人给你清楚全面地解释，为Treehouse的教程大手笔支付吧。

第4步：创建作品集

你用不着去精英设计院校来成为一个设计师。但你需要一个可靠的作品集。

第一次着手时，要如何建立作品集呢？幸好你未必需要参与真正的项目、接触真正的客户来建立作品集。虚构一些自己的副业。这里有些点子：

在T恤上设计一些简单的创意
寻找一些设计很糟糕的网站，重新设计它们
想到一个iPhone app点子？做出它的效果图
在Startup Weekend上加入一个团队，在周末项目中担任设计师
加入99 designs contest来练习设计，作为一份简历
通过Creative Workshop这本书来做平面设计练习
找到当地的非营利组织，免费提供设计服务。

要抵制住把每件作品放进作品集的诱惑。这是仅仅展示你最优秀作品的地方。

最开始就是借鉴，借鉴，再借鉴。不用担心原创性——以后会有的，当你对自己的手艺更满意时。学一门乐器的时候，你总是先学着演奏别人去曲子，然后才谱写自己的。在设计中也一样。像艺术家那样抄袭。

去Dribbble从一些顶尖设计师那里寻找灵感。从pttrns获取iOS设计灵感，从siteinspire寻找网页的。

第5步：找到一份设计工作

当我第一次开始学习设计，我去了一个设计师招聘会。走进一间房间，里面坐满了经验比我丰富的设计师——5年、10年、15年工作经验。所有人都在找工作。情形很吓人。自学上路的我就在那里，很清楚地知道，自己是要与这些经验丰富的设计师竞争。

仅仅一年之后，我得到了一份设计师工作。与很多其他设计师相比，我的关键优势在于：我知道如何与开发者协作。

增进你就业能力的最重要因素，是能够和开发者一起工作。学习一些交互设计。学一些基础的HTML与CSS。科技行业的设计师（交互设计师、网页设计师、app设计师）都是稀缺人才，而且薪资可观。那正是我现在从事的工作。

如果你没有与开发者共同工作的经验，去体验。去Startup Weekend，参加黑客马拉松，或者在合作项目网站找到一名开发者。

做一个个人网站，把你的作品集作为核心内容展示。

出去创造一些奇遇——告诉每个人你在寻找设计工作。你永远不会知道，谁会认识什么人能帮上忙。

研究你感兴趣的公司与机构。在LinkedIn上搜寻那些公司的人，与他们建立深入联系，询问信息。得到工作的最好方式是关系。如果你没什么人际关系，还有很多其他方式为自己建立优势。

找到了工作之后，继续学习

我在Exec待了一年，现在在工作上已经学了很多。我寻找那些比我有天赋的设计师，向他们学习。寻找设计课程（好的在线课程有Skillshare、General Assembly、Treehouse和TutsPlus）。做一些副业项目。在书店的设计专区认真钻研。还有那么多可以学习和进步的空间。

时刻打磨你的技能，而且学无止境。

有疑问？和@karenxcheng打个招呼吧。如果你很认真的想学习设计，并希望每天练习，你或许会对我运营的一项激励实验感兴趣：100。

“没有人告诉新手这些事情，我希望当时有人能告诉我。所有我们这些从事创意工作的人，选择它是因为我们有好的品味。但也有条鸿沟，你在头两年做出的东西，可能没那么好。你觉得它会更好的，它有潜力，结果却没有如你所愿。但是你的品味，你在设计领域中的成绩，仍然起着至关重要的作用。你的品味导致你的作品让自己失望。很多人没有熬过这阶段，就放弃了。我认识的大多数从事有趣、有创意工作的人，花了很多年才度过这个阶段。我们知道，在自己的作品中，并没有我们所希望赋予的那些特质。这些我们都经历过。而如果你才刚入门，或是仍然处在这一阶段，你得知道这很正常，你能做的最重要的事情，就是创作大量的作品。这需要时间。需要时间也很正常。你得杀出一条自己的路。”——Ira Glass

作者注：本文最初发布在Karen的博客。经过修订和校正后，发布到Medium上。

原文链接

设计师的自我提升

hi@victor42.work (Victor42) — Sun, 09 Feb 2014 13:45:47 +0000

过去一年感触良多，深深体会到作为设计师的不易，一度觉得自己的水平没多大长进，有些低落。同时也收获了一些至关重要的情报，都是关于自我提升的。今年将是付诸实施的一年，争取通过努力打破瓶颈。当然，我很乐意将它们与所有热爱设计的朋友分享：

1. 分享精神

分享本身就是自我提升的第一步，阐述自己所学是整理与回顾的过程。虽然无法从中直接获得新技能与水平的提升，却能让一味赶路的自己停下脚步，慢慢吸收其中精华。这时候，我们需要化身为一头牛，默默的反刍。

有朋友在博客上问我如何培养色彩感觉，提升自己的配色能力。我一时间也不知道如何回答，色彩这种东西最玄乎。最后还是憋出了一个回答，我建议她多留意生活中的颜色，食品化妆品包装、菜谱-Food、路人的衣服、平面广告，下意识地去回想自己见过的这些事物，这时候所有细节都变得模糊，只记得几种主色，配色的精髓就显现出来了。另外也要多看摄影作品和单色系设计，道理也一样。回答完后我感到很意外，这些方法我自己用过吗？仔细想想还是用过的，只是刚刚才意识到。

于是，在回答别人问题的同时，也为自己总结出了一则重要的设计师技巧。分享所得的收获，往往是些很抽象或者细枝末节的东西，这都是在书本与教程中不会出现的，万万不可错过。

2. 低头做设计，抬头交朋友

我话不多，但不是内向的入。这说明我有结交朋友的能力，却缺乏扩大朋友圈的意愿。现有的朋友和我关系都很好，我也热衷于继续维持，并不怎么愿意主动认识新朋友，但这对设计师是相当不利的。设计师的能力，不是闭门造车，而是要走进别人的生活。设计师需要交流，尤其是与同行。

自从之前那篇《我如何成为了一名设计师》反响强烈，我的博客再也不是互联网中的一座信息孤岛。很多素未谋面的设计师与设计爱好者通过各种途经找到我，与我交流心得，咨询专业问题，探讨职业规划，找我做项目，拉我入伙创业，还有只为寻求鼓励的毕业生。手足无措之余，我心里暖洋洋的。工作三年了，一直都在小团队里孤军奋战，第一次找到了设计大家庭，找到了组织。不同于某个社区或论坛，这是一群活生生的人。持续接触下来，发现每个人有不凡的经历和满腔热忱。最重要都是，大家都是很好的人，值得交朋友。

好好经营自己的设计同行圈子，且不说交流获得的海量信息，光是这相互鼓励的氛围，就足以催人继续奋进了。

3. 隔行如隔山，但别怕爬山

我做过半年的平面，然后一直做网站到现在，我可以很自信地说出各类网站的标准结构、主流显示器分辨率、浏览器内核、各种常用灰色的色值，可脚步就止于此吗？

当然不能困死在这里，如今轰轰烈烈的移动互联网大潮怎能少得了我。很早就给自己博客做了个手机版，虽然当时还没摆脱PC的思维，却让我了解到移动互联网完全是另一片天地。千变万化的屏幕尺寸，与web端截然不同的度量单位，以触摸为核心的交互方式，里面都大有学问。为了适配苹果设备的Retina屏，甚至需要将背景图做成两倍大小，再用CSS压缩回一倍。这些细节，不深入研究是不会知道的。

而设计一词的含义也在变得更广，APP中无处不在的动画效果成为设计的必要元素之一，按下按钮的震动反馈与音效，也是设计师需要考虑的，设计已经完全超越了视觉的局限。

接触的媒介越多，设计的含义就变得越广泛。没有色彩的电纸书界面该怎么设计？智能电视操作界面与PC软件有什么不同？盲人手机又该怎么操作？擦亮眼睛，设计的冰山在水面以下的部分，轰然出现在眼前。

4. 训练毅力，培养习惯

我大学里也一度沉迷游戏，没日没夜地玩魔兽世界，将近两年时间花在那上面。虽然玩游戏也有很多收获，对于优秀游戏的理解之类，不过要取得那些收获，昏天暗地玩三个月足矣。客户端装装删删好几回，最后终于和魔兽世界say goodbye了，尽管那也是一段美好时光。

如果改掉一个习惯都如此艰难，养成习惯就更像天方夜谭了，为此需要一些下意识的行为来训练自己的毅力。

从学生时代到现在，我唯一一件坚持下来的事情就是写东西，生活琐事、影评，也记录一些光怪陆离的梦境。或许它让我了解了培养习惯的重要性，不论这个习惯对自己有没有实际帮助，养成习惯本身就能强化人的毅力。

我决定要做点有意义的事情，长期性的，什么都好。无意间想到一个绝妙的主意，我开始每周翻译一篇国外的设计文章，还为此专门开了微信公众号“我”，用来集中记录和传播。我热爱英文，正苦于没有途径让我长期接触。我从事设计，国外的设计文章对提升自己很有帮助。我喜欢码字，翻译的过程本身就是二次创作，顺便还能充实我的博客内容。于是，这一石三鸟的习惯，我已经坚持7个月了。如果还有什么其他长期的事情要做，我已经自信满满了。

5. 快乐至上

以上都只能间接提升设计师的水平，而这一条，则直接关系到作品质量。不快乐的设计师，很难在作品中感染其他人，自身水平也鲜有突破。这点我深有体会，因为我经历过几份非常不快乐的工作。

由于我掌握了一点点的前端技术，工作过的也基本都是创业型团队，很自然就一个顶两个用了。不过专业的前端远比设计难招，工作中代码的成份越来越多，后来发展到公司另招了设计师，让我专门负责切页面了。前端技术倒是突飞猛进，但这不是我的目的。这也怪我不懂拒绝，不过已经这样了，我的心态严重受到影响。疯狂加班导致的身体酸痛，还有想尽快摆脱这种状态的烦躁，让我身心俱疲，没有心思再专心学习设计。最后全都以闪电辞职收场，从头开始。

心情好的时候，设计师的大脑都是极品飞车，神奇的点子甚至会惊艳到自己，有点闲工夫就能折腾出各种有趣的玩意。聚会海报、简单的手工活、概念设计，多多练习才是提升自我的关键。

结语

可见，要当好设计师是多不容易的事情。不过它的魅力就在于，力克艰难险阻后看见的那道破晓光芒。这很像骇客帝国里的一幕，救世主尼欧驾着飞船飞向机械帝国，在机械章鱼的围攻下，他冲破云层，看见温暖光明的天际线。

所以为了各自心中的阳光，2014，设计师们，火力全开吧！

标注文案:设定用户的期望

hi@victor42.work (Victor42) — Sun, 19 Jan 2014 02:10:52 +0000

[国外设计第27期]

用户其实有他们的期望，我知道这很令人惊讶。一个按钮在用户看来就代表着执行一项操作：提交一份表单、打开新页面或是编辑内容。显而易见，这都是些非常基础的用户期望，而且不仅限于数码世界。作为一名设计师，设定这种用户期望轻而易举。想要用户执行某项操作？加个按钮就行。几乎每个用户界面（UI）元素都自带了某种用户期望，多数时候我们都能很好地运用整体UI元素，并与用户目标期望相结合。

尽管如此，按钮本身并非创造或破坏用户期望的唯一事物。文案标注不当的按钮不仅会产生它是做什么的疑问（用户可能根本不会去用它），也会改变用户按下按钮时的期望。

标注文案关系重大

标注文案在所有用户体验设计中都至关重要。文案恰当的UI元素，让用户更容易理解和预测某处设计和交互的作用。糟糕的标注文案不只是妨碍用户理解和浏览内容，也会破坏用户对你设计的信任，用户的信任可是很难挽回的。按钮上的文字不仅是一带而过的东西，它是整个用户体验中决定性的部分。我们往往在为按钮的整体设计操心：

它看上去足够像按钮吗
用户知道它是个按钮吗
用户知道它有链接吗
应该用扁平配色还是渐变
要把这个按钮摆在哪里？

然后，我们就会忘记按钮上的文字，还有它如何正确设定用户的期望。并且，一个糟糕的按钮文案会毁了你的设计。

设定用户期望

标注文案也能创造或破坏至关重要的第一印象。当用户首次看到你的设计，他们会迅速扫视和打量内容，并建立他们自己的预期。用个不太雅观的比喻，想想厕所的门。用户第一次遇到厕所门的时候，门本身（类似于按钮）就设定了一个期望，用户可以穿过它到达另一个房间。标签描述了门后的房间，它设定了用户期望在其中看到什么、做什么。如果一幢建筑的女厕所上标着“男士”，当一个男士走进去时，用户的期望和信任将会被打破。

这类错误造成的代价巨大。不仅仅破坏了信任，也陷入了令用户觉得愚蠢的尴尬境地。设定用户期望、建立用户信任、不让用户觉得愚蠢，这些都可以通过恰当的标注文案来达成，但是文案中究竟应该写些什么？它应该这么写：

表述某个操作的反
提供将要展示的内容的预
简单、清晰、直
建立信任，不要打破信任

描述某个操作的反应

恰当的标注文案的属性之一，就是确保精确地描述用户即将经历的操作和反应——比如按钮就是点击。表单中“保存”和“提交”的区别，就是一个简单又经典的案例。例如在表单中，“提交”意味着用户录入的数据会被提交到某处。用户会希望按下提交按钮时会被带到别处，或许是一个展示他们提交内容的视图，或者是类似完成页面的东西。然而“保存”的意思是，这些信息会被储存下来，视图不会改变，它只是更新了。

让用户知道他们点下去会发生什么，从来都不是坏事。富有描述性不代表展示过多细节。无需展示出下一个视图或交互是什么。就像下拉菜单项或选择组件。下拉菜单只有一个“选择”字样，设定了此处需要用户操作的期望，但它也同时描述了交互效果——用户将从一个列表中选择某项——而没有描述得太具体。在这个例子中，没必要说“从一列选项中选择”或“选择选项”。

NYGenome.org 整站的操作与反应都描述得非常棒。

提供将要展示的内容的预览

回到厕所的例子，当一个人穿过那扇门（上面写着“洗手间”），他通常会看到一些让他意识到自己身处厕所的事物，水槽、烘手机、马桶等等。这就确认了门上标签给用户设定的期望，现在这个人会很自信他来对了地方。就像是标签“洗手间”，提供了用户进入后所见到事物的预览，你的标注文案应当提供一些信息，表达出用户点击按钮或开始某操作时，将会看到什么。

例如，网站上的一个用户想要联络你提建议。他们会期望网站某处能找到电话号码、email地址或类似于表单的东西来向你发送讯息。你的菜单中有一项写着“联系”，用户期望就变成下个视图中应该包含电话号码、email地址或某些表单，用来联系网站主或企业。如果不写“联系”，而是写类似于“预约”的文案，用户就会期望看到一个专为预约而设计的表单，不只是一张联系单或是产品常见问题的反馈邮箱。

PureFixCycles.com 是个绝佳案例，为内容提供了清晰的刺激引导。

简单直接

像联系的例子那样，保持标注文案的简单清晰。让用户困惑、孤立并感觉愚蠢的一个好办法，就是使用俚语术语、涉及文化差异的表述，或是一些哗众取宠的花哨词句。假如你在设计一个模型火车的电子商务网站，你可能会觉得把联系页面叫做“连接枢纽”很好玩，但它得应用到整个网站的体验中，它很可能让人很难找迅速找到联系页面，因为除非用户点击了，否则根本不知道这是什么意思。如果你觉得“联系”太无趣，宁可就用这个文案来提升用户体验，换以其他的设计手段来增加网站的生机。

保持简洁同时也意味着避免使用过长的文案。尽管“与我取得联系”、“这间是男厕所”、“你确定要这么做吗？”清晰设定了用户的期望，它们写在按钮或小小门牌上却不是那么美观。长文案不仅难看，如果它们太长，就会令人困惑，而且大多数人不会完整读完。不去阅读和理解文案是危险的。如果用户不读文案，他们可能意外删除东西，或无意识地向某人发送信息。要避免造成糟糕或意外后果的长文案。

YogurtLabs.com 做得很好，简化了标注文案，也保持着创造力。

建立信任，不要破坏信任

恰当的标注文案会建立信任。用我们之前厕所的例子，如果用户因为标注文案不清晰而“走”错了门，他们就不太愿意再去探索你应用中的其他地方了。你总不希望用户觉得自己在不太理解的东西面前被耍了或是上当了。用户能舒服地探索这个应用时，信任就会培养起来，所以精确的文案描述是建立信任的制胜法宝。

你的应用应该表里如一言行一致。错误的表述不只令人困惑，也会给你的应用造成负面的感知。尽管你的应用可能非常棒，被设计成能够达到所有用户的目标，但如果标注文案设定了错误的期望，用户就会认为你的应用无法帮助他们达成目标。标注文案设定了用户期望和心里模型，不要产生错误的期望，那只会让用户失望。

MostlySerious.io 是一个建立和保持信任与舒适体验的好例子。

不易挽回

使用正确的标注文案来描述特点、交互与内容并不难——嗯，至少刚开时是这样。不出问题比解决问题更容易。既然花时间设计了一个很好的工具来达成用户目标，别着急，确保按钮文案、链接、和其他标签设定了正确的期望，别让错误文案这样的小“失误”破坏用户对你的信任，并损害了苦心经营的用户体验。

下面还有些例子，它们都通过正确、清晰、简单的标注文案，创造了独特的体验：

原文链接

通过留白打造简洁有效的设计

hi@victor42.work (Victor42) — Sun, 12 Jan 2014 14:16:57 +0000

[国外设计第26期]

有时最有效的设计技巧，就是什么也没有。

而且它的目的性非常强。

留白是最有力的设计素材之一。它使得文字清晰易读，将注意力吸引至某部分，并且有助于打造整体氛围。

本文中，我们来看看一些优秀的留白使用案例，看看它们如何创造简洁的同时，有效地为不同网站定义了设计风格。

留白的基本要素

留白和负空间的术语近年来被交替使用，它们指画布（或数码设备屏幕）上不包含任何内容的空间。简而言之，留白就是空白。

但是留白空间不一定要是白色的。这个术语指的是任何与背景相同的空间。所以它可以是白色、黑色，甚至包含微妙的纹理。

空间是所有设计的重要组成。字间距和行间距决定了文字的易读性。如果文字靠的太近或太松散，就很难阅读。关键是找到平衡点。

留白也能把图片和其他元素区分开。回想一下你见到过的杂乱无章的网站。通常问题就在于元素间没有足够的空间。记得在元素和文字间留下足够的边距，为了更加专业的外观，应该进一步使用统一的边距。在设计多列网站时也是同样的道理（即使只有主栏和边栏），在垂直元素间加入适当的空隙，就创造出了明显的划分。

留白还有助于引导视线，为设计建立层次，区分什么是重点和关键点。视线会立即移动到被留白包围的元素上。留白为其中的元素增添了冲击力。

留白是创造平衡、协调的工具，也是组织网站内容的基础。没有留白，如何为元素分组？如何找到导航？你又怎么知道滚动有更多内容，或是应该从左上往右下浏览？所有这些视觉线索，都来自于设计中留白的合理运用。

重点使用留白的地方

虽然有效使用留白是任何设计的重要部分，还是有些地方值得注意。

请看以下清单：

logo周
每个导航按钮或图标周围，并围绕这些元素的“容器
在两列文字间，在主体部分与边栏之
当你使用视觉差效果时，在每页“滚屏”之
在所有不同的元素之间，比如照片和文字之间，或是主体内容与页尾之间

12例留白的有效运用

Adhara：看看左侧的边栏和主体内容的距离。此处的留白确实在元素之间创造了很棒的区分，并使彼此通过自己独有的方式突出展示。

BeoPlay A9：背景与中央物体形成简洁的对比，创造了独特的视觉焦点。与优秀的对齐排布结合时，留白还有助于将注意力从图片引导至文字段落。

Fixate：在一个像这样丰富的设计中，留白告诉你的眼睛应该看哪里（还有点击哪里）。

Google：这个搜索引擎已经使用留白很长时间了，白色的海洋中，它只有一个简单的数据入口和一个logo在。

Jac in a Box：留白在此处的运用是如此抢眼，因为它真的很大面积。将的视线从logo（本身的留白就运用非常完美）吸引到另一个角落的主体文字上。

Lapka：这家公司用了一种独具创意的方式，通过阴阳式的留白，将视线吸引到这些小物件上。

Leah Haggar：白色字体在黑色空间上很突出。精妙的底纹为整体效果增色不少。

Medium：这是一个使用非白色留白的绝佳案例。

Metta Skincare：通过对图片进行设计，留白为文字提供了绝佳的展现位置。

PandaWeb：留白直接将注意力转移至这家公司的业务上。

Square：这个网站将元素间的留白运用得很棒，作为图片和按钮的视觉焦点，也作为分栏的间隙。每个细节处的留白都精心处理过，创造了视觉冲击。

The Mealings：简洁、美观、舒适。留白——在设计与logo中——成就了这些特点，看起来简洁得不可思议

原文链接

其实，我是超人

hi@victor42.work (Victor42) — Sun, 05 Jan 2014 17:15:00 +0000

小米营销的内幕

小米新品发布了，群里讨论得火热。有人发现一个现象，似乎可以解释饥渴营销背后的秘密。

“这订购人数明显是假的，我都拔了网线，数字还在涨。”

然后某位大神出来解释了：“你拔了网线，别人没拔啊！”

条件反射

和竹子经过小区门口，前面开来车大灯特别晃眼，像岗哨上的探照灯，于是我们条件反射地……举起双手。

张力

公司outing去千岛湖，在蛇岛上从一伙游客旁边走过，听到一个大叔正在进行科普，唾沫星子横飞：“你们知道蛇为什么能吞下比自己大的东西吗？张力大啊。张力是什么？你张嘴试试，啊——”

理想与现实

来了个新需求，大伙在QQ上讨论，问开发要多长时间实现。

开发一针见血，说东西都不麻烦，只是实现一般是这样的：

既美观又实用

又是一年毕业季，竹子隔壁班的开题答辩堪称精彩绝伦。老师把所有学生的选题都喷了一遍，终于有个学生按耐不住和老师互喷起来。你来我往拉锯了好一阵子，最后这位天才向老师抛出了绝杀，完美获胜。

“我就是要做一款既美观又实用的产品。”

“哼！怎么可能既美观又实用？”

只见这位同学不紧不慢地从口袋中掏出一样东西：“你看我的iPhone，就既美观又实用啊！”

老头的手速

和小钢在畅想我们老了之后的娱乐活动。是周游世界，还是围坐一圈打dota。或者还是带上本本，周游世界打dota。我说这要看情况，有积蓄和没积蓄。有的话当然去旅游，没有的话也不能天天DOTA，不然这是什么节奏啊……70多岁的老头子，APM还有200多。

最高效的离职

偶然聊到大家换工作的经历，基本都大同小异，除了soso，他有次离职堪称神速。他说在离职这点上，这家算是杭州做得最出色的。除了当天提当天滚蛋，主管还会特地和园区保安打个招呼，说这个人以后不要让他进来。

定盘的心

在公交车上碰到soso，他说现在人心散了聚不起来了。他偶尔会去一趟滨江，YMQ忙着做生意，BB和小宝在DOTA，除此之外就没别人了。至于我，每天也忙得要死，偶尔在公交车上能和soso打个照面。远在上海的小钢说，没有我，你们就是一盘散沙。

小钢这话不假，他要是一来杭州，615少不了要沸腾起来。我脑海中立马就浮现了一句歌词来形容他：“秤杆子啊挑江山，你就是那定盘的心！”

KT的真实身份

我又在教坏小朋友了，我跟KT说撒谎是一定要学会的，只要控制好，别对自己重视的人用就行了。

他马上良心发现：“其实，我有一件事情一直欺骗着你，但是听到你这句话我决定告诉你真相。”

“我知道了，肯定是你偷偷把我的那个萨满号给删了。”

“其实，我是超人。”

千千万万个站起来

阿福生日那天，马老师生病了没来。后来说起这事唏嘘不已：

“阿福生日那天我倒下了。”

“又有千千万万个你站起来。”

“……谢谢啊”

结果他死了

黄鱼QQ被盗，识破骗子后想通知他，发现竟然没有他其他的联系方式。于是问KT能不能联系到他

“没办法，他只和植物昆虫做朋友。”

“那你能通过认识他的植物联系到他么？”

“我认识昆虫认识他的，但是昆虫不会用电话。”

“但是昆虫会发短信，有认识他的蜜蜂么，bee…bee…bee…”

“不行，上次我看到一只虫子就把电话丢了过去，结果他死了。”

公交车上的RAP

挤公交时想到一个问题，后门不是有个红色按钮么？用来告诉司机有人要下车的。如果每按一下就会发出一声“我要下车”，那就可以用来唱RAP了，想想就很欢乐：

我要下车，我要下车，我我我我我要下车！

网页设计中的方块元素

hi@victor42.work (Victor42) — Sun, 05 Jan 2014 14:44:39 +0000

[国外设计第25期]

当你欣赏下面这些案例时，留意一下他们如何以及为何使用矩形或正方形元素，会使得你思路大开。此处列举的方块元素，被用来对齐、组织、装饰、排列页面上的方与圆。在设计中使用方块元素有很多方法和原因。我们来详细了解一下。

使用方块布局的目的是什么？

或许这对你而言有点哲学和理论化，我们来看看别人选择方块布局的原因。（顺便提一句，我所指的方块也包括矩形，有些案例也使用矩形。）使用这种元素有两大原因。首先也是最重要的，它有助于组织内容。其次，它也能打造特殊的样式。它们是展现内心渴望和需求的完美元素。

看看Dennis Adelmann的作品集，显而易见，方块元素被用来组织排列他的作品。这是组织排列任意数量内容的简单途径，让事物保持简洁。

不过再看看We Love Noise这个网站，它就完全不同！是的，到处都是方块，移动鼠标时还有个有趣的动画效果。不过除了组织内容之外，你会发现方块元素也成为了设计风格的一部分。它是这种风格关键的决定性元素。

怎样用好它们？

我不觉得使用方块元素是什么难事。尤其是网页，自从诞生之初就开始使用方块形状来设计界面。但是你若想更有效地使用它，请遵循以下几个步骤。

制定希望达成的目标

根据你所要达成的目标，页面和区块会有很大的不同。一旦你确定了，方块元素就能帮助你完成目标。你是用它来组织内容？还是想为页面增添一点乐趣？

看看Paper and Paint。他们使用方块元素保持页面井井有条，并且突出了页面特有的流动性。随着鼠标向下滚动，每个方块中的不同内容都在进行着视觉差滚动——这是个非常酷的效果——每个方块都向你讲述独特的故事，汇聚成整个页面。这些方块元素的作用，就是保持各部分对齐，形成一种整洁的时尚，同时也为各个页面营造不同的故事氛围。

Anthony John Group使用方块来展示他们创作的各个项目，还有关键的公司信息，比如“幕后团队”。主页的规划与构建很棒，但也结合紧密。很明显，他们致力于创造像这个页面一样优雅的高端建筑设计，如果没有这些方块，可达不到这样的效果。

使用方块来组织内容

既然了解了你所追求的目标——尽管那几乎就是整合现有的信息——你会接触到内容组织的。你得把内容编成目录。要如何在各个方块中组织信息——某些方块内容会比其他的更多吗？这对组织内容很有帮助，你会来回摆弄，看看哪些有用哪些没用，发现哪些内容太多，哪些内容太少。我保证这不是什么高超技巧，实际上它不太需要凭直觉，大多时候都很简单——坐下来去完成它就是了。

注意到上面这个网站没有，Block Level，方块和方块中的图标就是全部了，只有图标。这就是我所指的组织内容，Block Level的设计者故意在每个方块中只留下一个图标。下一步就是要考虑如何将调整过的内容放在令人愉悦的设计中，这正是我们下面要讲的。

调整这些方块，或者干脆不动它！

既然组织内容的工作让你了解一组组信息看起来是什么样，你就要思考应该怎么处理这些方块。这是让你打磨内容块大小的一步，可能你希望它们都保持一致——又或者你决定让它们错落杂乱排布。这还是得取决于你的具体目标。

从Nedd中可以看出，方块元素都非常巨大，它们有着近似的宽度和相等的高度，让网站看起来井井有条。我希望你注意的是，虽然这是偏向于内容组织的用法，网站的样式仍然非常有趣轻快，这主要得益于它的颜色、矢量元素、圆形的应用、字体等等。

另一方面，我们还有像Banana Café这样元素散乱的网站——如果你想，也可以这样优美地乱序排列。这个网站看起来也很好玩，得益于它的字体、颜色的选用等等。方块的这种特殊用法其实没什么，只是一种特定的设计手段。

点缀样式

有千万种设计方法，可以为你下个项目中的方块元素打造特殊风格。你可以将它们与其他元素自由组合，比如圆形，或者采用贯穿始终的矩形或正方形来营造网站的视觉焦点。最后两个例子中，你会再次见识如何将方块良好地应用于设计中，希望对你有所启发，并能在你下个项目中发挥作用。

Jan Finnesand用了全屏的宽度与高度来放置方块，每一块都有特殊作用，大多展示了他以往的项目案例。充满整个浏览器窗口的方块造就了一件非常酷的设计。

这家公司无处不用方块！主页上可以看到，他们也展示不同的案例。通过不同尺寸的正方形引导用户视线。我最喜欢的一点是，他们用两个正方形来组成一张更大的图片，但每一张都指向一个独特的项目——我觉得这很酷。

原文链接

网页与APP中那些优美的登录表单

hi@victor42.work (Victor42) — Sun, 29 Dec 2013 10:34:45 +0000

[国外设计第24期]

我从Dribbble收集了20个漂亮的登录表单案例。希望你看后能从中受益，并对你以后的登录表单设计有帮助。设计一个登录表单是非常容易，但大多设计都很糟糕、毫无亮点。无论如何，这篇Dribbble案例集锦绝对走的是另一个极端。希望这20多个都能赢得你的青睐，废话不多说，直入正题！

网站与APP中的登录表单

继承了iOS7的精髓，这件登录界面作品将iOS7微妙的动画背景上升到一个新的层面。此处的背景完全是一张动画图片——甚至可能是GIF。尽管这背景事实上没有那么精致，但这一定是你平时不常见的设计。你几乎很难见到这样的APP，还有如此卖弄的首屏设计。

同样秉承着iOS7的精神，这个登录界面和它的附属界面采用了彩色模糊背景，令一切都保持绝对简洁。我得说这两个界面都相当极简化，实际的输入框被细线所取代。不过美妙的多彩背景增添了个性化色彩，令作品亲切美观。

如果说有令人愉悦的设计，那这一件就是了。蓝色背景图与明快的白色LOGO、文字和输入框形成强烈对比。绿色按钮看起来像个真实的按钮——尽管界面的其余部分都是扁平的——色调也与蓝色搭配地非常好。

真是醒目的配色！当然，它是从另一个角度思考登录框的产物。这不是一个通常意义上的登录窗，因为它在易用性方面仍存在瑕疵。但是在设计方面，我们尽可以跳出条条框框来思考登录界面。

与之前那些相比，这件相当平静和简洁。颜色选得非常棒。页面也很切中要害，它没有任何不必要（甚至扰乱注意力）的小把戏，任何一个登录界面都不应该有。

这又是一款大胆的登录界面设计。深色的登录界面、深色模糊背景、明亮柔滑的纤细字体，营造出了神秘气息与魔力。有了迷人的登录界面，就别无他求了。

现在呈现的是一款深色登录界面，还有非比寻常的红色文字与按钮。我不确定这么多红色是否合适，不过我们暂且继续——这是非比寻常的大胆设计，值得喝彩。我觉得自己对于红色的忌惮是没道理的，因为决定用户反应的，是红色按钮所处的环境，而非红色本身。我可以肯定，没有人会在按下这个登录按钮时感到崩溃。

这件作品绝对是本文中我的最爱之一，因为它够简洁，却不单调。它的配色相当惊艳，几种颜色完美结合。而且，它看上去真的很赞！确实是个打造简洁美观登录界面的好办法。

这是个稍微复杂些的登录界面。像如今大部分平台一样，你可以已有账号来登录，比如Google、Twitter或者Facebook，而不必在每个新网站上创建新的账号。不过如果你想的话，你也可以注册自己的账号。

这个界面很有创意——手写风格的注释与箭头，给界面增添了一些个性，配色也很棒，与常见的蓝色和银灰色有所区别。同时，不像时下大多数登录页面，它的背景图并不是视觉焦点，它就是一个轻巧的登录/注册页面。

我非常欣赏这件自由散漫的设计。没有分散注意力的导航，也没有烦人的其他内容。用户的操作与目标同样简单：选择Platform或Opentag，然后登录。如果是首次打开，你可以试试底部的“注册账号”链接。我觉得这真是个组织良好且执行到位的登录界面。

这也是我最爱之一，我着迷于它的扁平设计。它也没有多少分散注意力的东西，重点就是登录。简明的logo效果非凡，如果你没有账号，也能在这注册一个。除此之外，所选的颜色也紧密结合，表现良好。

我非常喜欢这件设计，因为东西都足够大，登录按钮很大，按钮上的文字很大，图标也很大。现在你应该有所体会了。另外，登录按钮是明亮的橙红色，你不会忽略它。它不会与周遭环境混为一谈，所有需要强调的操作都该如此。

我不确定自己是否赞同输入框背景和文字的颜色，不过除此之外，这仍然是件优秀的单色表单设计。我喜欢这两个输入框彼此结合的方式，因为他们显然就是一体的。我也喜欢那个醒目的登录按钮。

在你注销登录前，网站会记住你是谁，这点太赞了。从外观来看，它想营造安全登录的感觉，事实也确实如此，这得益于下面的两个logo——McAfee和VeriSign。我还喜欢它滑稽的头像，使得整个界面体验如此愉悦，虽然它其实很严肃。

这是我第三喜爱的作品，因为它好玩的配色。是的，这是扁平设计。如此基本的样式，本应该很单调，它却没有。我发现精心挑选过颜色的扁平设计常常能成功，因为充满了亲切感和个人色彩，这件登录界面就是如此！我很希望在自己经常使用的app和网站中见到更多这类设计。

啊，又是一个蓝色的界面！我对此处使用的绿色持怀疑态度，不过本作品中微妙变化的蓝色，与白色文字结合地很好——确实非常好。非正式的小写字体也给整个界面增添了几分个性。

我相当喜欢这个表单，因为它显然是页面的视觉中心，再没有其他东西分散我的注意力。当然，还有logo和邀请注册链接，不过它们在哪里都无法盖过巨大的登录界面。与暗调处理的背景图相对比，明亮的输入框吸引力注意力，让你立马就去登录。

这是一件拟物化与扁平结合的UI作品。你怎么想？我觉得它处理的非常好。不用嘲笑拟物元素的阴影效果，它们并没有影响整个设计，此处的设计相当聪明，节制地使用拟物化元素，字体的选择和色彩搭配铸就了这件作品。

又是一件迷人的登录界面。它内容比本文中很多设计都更丰富，不过配色选得很好，让界面漂亮地结合成一个整体。

原文链接

钢筋货架与隔墙:都柏林的咖啡馆

hi@victor42.work (Victor42) — Sun, 22 Dec 2013 12:23:46 +0000

[国外设计第23期]

VAV 建筑在都柏林建造的这家咖啡馆采用了钢筋作为货架与隔墙。

VAV 通过一系列垂直的钢条，打造了这家Bear Market咖啡店的货架空间，而这些钢筋通常用于在建筑中加固混凝土。钢条在咖啡馆的中央区域从地面延伸至天花板，围起一张低矮的木桌。

“我们的目的是将整个空间用垂直的线条填充，从而对空间进行轻微的分割，阻挡视线，滤出其中的顾客，”建筑师说，“我们希望这座钢铁森林能够创造一个蛮荒而直白的空间。”

钢筋来源是本地的一家钢材制造商，吧台区域后方竖立起嵌入墙体的网格展柜，其中插入了一些厚木板来陈列货品。

上方悬挂着的青铜色吊灯，照亮着由橡树枕木打造的柜台。

厚木板也被用来制成桌面，地板则是由回收木料制成。

天花板保持裸露，砖墙漆成白色。

以下是设计师提供的更多信息：

Bear Market咖啡馆

咖啡馆坐落于都柏林郡、Blackrock村的Main大街。受紧张的预算所限，我们的目地在于提供与咖啡馆相关的各种功能，在已知的最小空间中，完成最少的装修与更改。

设计的概念是探索和对材料提出质疑，尝试可用的日常建材和技巧，同时打造独一无二的特色。

作为一种尝试，我们选择用钢筋来装修。我们的目的是将整个空间用垂直的线条填充，从而对空间进行轻微的分割，阻挡视线和其中的顾客。我们希望这座钢铁森林能够创造一个蛮荒而直白的空间。

最终完成的咖啡馆将给人这样的印象：钢条营造出垂直的线条，货架和长凳藏在其后提供映衬。由于钢筋主导着整个室内设计的风格，其他元素都扮演着背景的角色。从而将原先的室内设计隐藏于最核心的条纹之后。

天花板完全裸露，墙面也只做了最少的装饰，现有的粗糙墙面正在剥落，留下了网格状的表面。地板就用了粗糙的回收木料，钢条置于夹层中，那是垂直线与地面相连接的地方。

平面图

回收木料地板柔化了整个空间，并且隐藏了货架的支撑部件，钢筋穿过它与下方隐藏的支架相连。

室内区域

这两种新元素——回收木料构成的水平线、钢筋构成的垂直线，相互交叉，划分了室内空间。

原文链接

活力四射的APP日历组件设计

hi@victor42.work (Victor42) — Sun, 15 Dec 2013 09:51:17 +0000

[国外设计第22期]

日历不仅仅是很多应用的一部分，也可作为占据主屏的独立组件。有一连串APP以精心绘制的历程表著称。尽管日历只是一个小小的单向功能，却起着处理日常事务的重大作用。

今天我们来谈谈设计在这方面的作为。尽管安装一个日历组件之后，得到的似乎只有一张特定的表格，包含了一组中性颜色装饰的数值，不过你还是会惊异于这些现代日历的时尚、精致与优美，有效地将自身完美呈现，并能与其他先进组件相媲美。

下面列举了一系列清新独特的日历组件设计。

移动APP中的日历设计

Crab的日历设计外观干净整洁。设计师同时利用了扁平与拟物风格，增加了几分多样性、层次感，当然也有写实主义。

Kenny Sing的移动APP Slider设计。这位设计师也诉诸于三维效果，适当的阴影和光照使得底部看起来非常写实。木纹的标题栏、精细抛光的背景，是这个创意的有力支撑。

Ethan Leon的预约日历：Month着重强调了扁平化风格，促进了设计元素的整体统一。这个APP一行行地展示数据，每行都被独特鲜活的颜色点亮。这些颜色用来给不同事件标注提醒。

Handsome依据iOS7风格设计的Date & Time Picker。日历组件看上去绝对梦幻、精致和优雅。最先映入眼帘的，是深色模糊背景、整洁的非正式字体和雪白常规图标，它们之间形成了恰到好处的平衡和强烈的对比。

Marcos Paulo Pagano的日历设计。黑白红打造了一种有力度的组合，设计师以扁平风格将三者混合效果更甚。因而这个日历拥有了讨喜的商业化外观，传达了强烈的情感。

Chris Rowe设计的日程规划APP特点是其端庄的葡萄酒色主题，界面独特令人难忘。巨大的图标和小字体，配上柔和的绿色和红色，完美地吻合主题风格。

Day View——Veera Watchara设计的一款日历。这又是一款基于时尚模糊背景的现代风格日历组件。背景艳丽的粉色令人着迷，与前景的白色元素形成了非常理想的互补。使得半透明的区块和圆形部件看上去简单而惊艳。

Vimal Patel设计的iOS Hotel Check-In APP。它基于明亮的配色，简洁干净。洁白背景与灰色边框、常规字体很好地互补。蓝色与绿色有效地建立起视觉焦点。

Jakub Antalík设计的日历APP。与之前几个不同，设计师基于深色配色方案创作了一款精致整齐的日历组件。并通过扁平风格来强调主题。

Maxim Sorokin设计的Calendar Matches Hc Kuban又是一件精彩的作品，利用巧夺天工的渐变和模糊效果，来令作品独树一帜。照惯例，白色被选作辅助色来创造清晰的对比，对于强调和突出内容有不可替代的作用。

NIMIUS设计的Your trip APP。设计师很成功的运用了深色系，令日历界面看起来迷人而抢眼。其中，黑和红扮演着主要角色，相反，白色用于突出强调。

Roman Nurik设计的日历组件。处理得当的半透明层是这件设计的关键，给日历营造了一流的外观。尽管日历占据了几乎整个屏幕，设计师仍然给用户保留了额外的空间。

Mani Baskar的日历设计。这件设计作品灵感来源于iOS7本身浓艳的色彩。设计师运用了不同的蓝色明暗变化来增加界面的复杂度。霓虹灯式的粉色与绿色在背景中非常突出。

Brian MIller设计的简单日历APP，令人立刻感到极简主义气息。界面看起来干净、空旷、宽敞。屏幕中央的巨大数字瞬间就吸引了注意了。

Michael Sambora的Date Select APP还是件半成品。蓝与黑完美地相互作用。厚实的黑色背景让界面显得严肃，蓝色元素（尤其是带透明背景和边框的那个）营造了一种精致的感觉。

Kyle Craven对iOS7的日历APP进行了再设计。简单、舒适和绝对干净几个词，很适合用来描述这件整洁的日历UI作品。柔和的红色支撑着明亮的界面，不经意间将视线吸引至选中区域。

Samuel Nudds的日历设计。打造惊人优雅设计的另一个方法，就是使用最少的颜色，它能友好地展示出日历的特征。两种色调构成的界面，有效地激活了内容，不会使用户分神。

Bobby Ghoshal 设计的Stealth医疗保健APP有着圆润的外观。柔滑的线条和明亮的辅助色是这件设计的标志性特征。

Sergey Skidan设计的My Day。这件UI作品证明了metro风格如何能轻松点亮设计。轻微失焦的背景，为亮色的方形与圆形元素树立了可靠的基础。

这件是Aaron Buckley对Zipcar APP的再设计。这款概念设计看起来有机而和谐。没有复杂的装饰和混合渐变，只有单色的扁平背景，极大地突出了内容，增加了可读性。

Tobias Negele设计的CalendarApp。这个界面采用了通用的详细页面布局，这是日历组件与生俱来的样式。巧克力色调与其余的颜色搭配良好，使界面看起来温和而文雅。

反思

这些我们习以为常的日历组件，常常受到表格结构的束缚，有时辅以水平线条，这样的布局似乎难以令我们感到惊奇。所幸，我们错了。现代设计师们，轻易就将这些平淡无奇的日期序列，转化为精致和时尚的作品。

原文链接

自由职业者与外界接触联系的6个方法

hi@victor42.work (Victor42) — Sun, 08 Dec 2013 10:10:25 +0000

[国外设计第21期]

如果你是一个自由职业者，或者在家工作，那你一定很清楚地了解，在自己的小世界中是什么滋味。把自己困在工作室里，直到工作完成。也许你像我一样，直到自己的胃提出抗议，才想起要出门转转。

可能你还没到那个程度，但你有时还是会想要找人聊聊天，而不是一边读着信息一边想象着那个人的声音，这再正常不过了。有时候你需要面对面和真实的人交流。这能解放你的大脑，帮助你产生创意，让你意识到自己并非孤身一人。

这并不容易，尤其当你进入一个陌生的城市或行业，与外界没有联系。感到艰难的另一个原因，是你觉得没有志趣相投的人。走出家门、认识新朋友对于在家办公的设计师非常重要。若你还不清楚如何做到这点，给你几条建议，帮助你与他人建立联络与交流。

偶遇、抱团

我是那种不喜欢为了谈话而谈话的人。快速建立人脉、精于交际对我而言不是什么好兆头。从另一方面说，如果大家有共同的热情和兴趣，我才乐于成为小组的一员。这使得交流更容易，因为我已经有可以起头的话题。

大多数在家办公的人也一样。因为如此，我建议你加入一个大家都志趣相投的小组来交流沟通。小组成员都热衷于帮助其他成员找到归属感。找到对的小组，并不意味着以局外人的身份窥探，而是与其他富有热情的人连接起来。

从多个团体与小组中的获益会是非常可观的。你可以收集免费和折价的外单，甚至以学徒身份参与项目，从中学习。Meetup.com是一个寻找小组的好地方。搜索某些特定分类，来了解这些小组何时聚会，有什么活动。另一些地方也可以作为入手点，比如家喻户晓的设计小组或其他相关团体（例如广告、科技等等）。

搜寻活动与展会

可能你对于快速建立人脉、精于交际并不介意。全世界有大量的活动，这类活动近期内都不会结束。你也许想参加一个与自己关系更加密切的活动。幸好，总有很多方法来找到它。

Meetup.com 是寻找小组和活动的好地方，不过 Eventbrite.com 在寻找本地活动方面更加擅长。通过Eventbrite，你可以搜索所在地区，找到讲座、有益的聚会和更多其他类型的活动。我在Eventbrite上发现很多没有参加过的活动，其中很多都闻所未闻。

每年都有各种大型设计盛会在进行。很多博客与企业都有参与，探讨设计领域中的新鲜事。尽管在这些展会中，与人交谈并不是必须的，你还是能有很多机会与有趣的人物交谈和沟通。好好利用这些是明智之举。

认识一个有趣的人

比起数量，如果你更注重质量，那么你应该在你的所在地认识一个有趣的人。或许你已经在新闻和社区中听说过他们。也可能在网上偶然发现了他们的作品。很多人都容易亲近，也欢迎其他自由职业者和设计师来聊聊老本行。

自从我开始写作，当地的人（也有其他遥远地区）常常发消息给我想要聊聊。最近，我被邀请共进午餐，同时讨论商业创意和自由职业。正常人怎么会拒绝免费午餐？与有趣的人建立联系是很棒的事情，因为你肯定清楚这个人身上有什么吸引你——或者说你已经知道聊什么了。

如果一切顺利，那个人就很难忘记你了。后续的email往来也就顺理成章了。一对一，是建立联系的最佳方式。

上课

作为一个设计师，就几乎等同于学无止境。我们每年经历那么多必须掌握的设计趋势，我们还得越来越多地了解下一个需要掌握的技能。作为一个平面设计师，你总会被问及网页和移动端。作为网页设计师，你可能总是被问及编程和数据库。

就像自学和整天观看大量教学视频一样有趣，没有什么能和身处真正的课堂相提并论。呆在一间房里，那里有一个比你聪明、能回答你所以问题的人，这些问题教学视频上甚至提都没提过。然后，还有一些人，你可以尝试着教他们，来检验自己是否真正掌握。

教室是与外界建立联系的好地方。你也许会想去参加附近大学的课程。可能当地的图书馆或其他组织能提供快速简短的课程。无论哪种，上课是认识新朋友和提升自己技能的好方法。

参与到社区中

对于这点我坚信不疑：如果人们一起工作，他们就不得不相互联系和交谈。在一起工作却不沟通是不可能的！市民组织总会在某方面需要帮助。加入社区，你有机会提升自己的技能，并创作出广为人知的作品，与公众建立联系。

有些小组就是致力于为社区服务的，这是个不错的出发点。不过也有很多其他志愿工作的途径，与邻里交流交流就知道了。为他们创作，凭作品建立信任，最终可能带来有偿工作，或者被人引荐。

随身带着作品

几个月前，我购买了数码单反相机。当时我相当兴奋，去哪儿都随身带着，拍下我看到的一切。于是产生一个副产品，人们不是来请我帮他们照相，就是问我有多喜爱我的相机，还有一些摄影相关的问题。

作为设计师，我理解这种事并不容易，但坐在附近的咖啡馆，打开笔记本工作是完全没问题的。甚至在平板电脑上画画，也能引起一些人的兴趣。我甚至见过设计师和程序员穿着醒目有趣的小衬衫，尽情施展他们的技能。这里你得展示出创造性的一面，不过有时候你所需要的，只是让自己显得富有魅力，吸引别人来谈论你的工作。

结论

想想你今日拥有的稳固人脉。可能你不仅仅是发给他们一封邮件，或者往他们手中塞一张名片，然后期盼最好的结果。而是花时间与这些人建立真正的联系。他们可能是同学、同事或某个偶然认识并保持联系的人。交流和认识朋友，并不会因为我们是自由职业者而成为陌生的概念，也无需神化它。时刻记住，这些事情都需要时间，那么出门去认识一些新朋友吧。

原文链接

用草图来规划网站

hi@victor42.work (Victor42) — Sun, 01 Dec 2013 19:14:52 +0000

[国外设计第20期]

设计院校中有大量的基本课程。大企业与创业公司都在采取回归本源的设计方式，这一点也不稀奇。

无论你是个终身的涂鸦艺术家，还是一位严肃的商标设计师，通过纸张探索灵感都是一项重要的设计技能。

别怕！铅笔这类工具的力量不会消亡。在这个专注设备的时代，简单、久经考验的设计方式仍然大有可为。

实际上，我已经听到一种日渐强烈的声音，反对将工时浪费在高保真photoshop效果图上。手绘稿让你以一种灵活巧妙的方式，创作迭代式的渐进设计，不必为了高保真设计图和电子稿而超支时间。

不论你是大公司还是自由设计师，通过快速手绘与客户交流想法，是一项相当重要的手段。

为什么手绘？

手绘稿在某些方面对线框图甚至电子稿有所优势。它便携、亲切、富有创造力，并且久经考验。再没什么比纸和铅笔（或者钢笔）更简单的了。

我也发现，手绘稿对客户而言足够通俗，使他们能够提出意见并且做出修改。高保真效果图看起来就像是“成品”或者即将完成，那会束缚客户提出改进建议的意愿（我在这里真的忍不住要插一句，这完全不符合国情啊，不科学啊！）。手绘稿相对散漫、友好、非正式……你可以擦掉进行修改。

线框图总是充斥大量文字，极少反映出美术趋向和设计基调。特别是对于照片和视觉元素。你可曾见过一个大叉叉传达出了照片内容？

通过手绘稿，你可以快速、近乎思维练习式地迅速记录下你的创意。它能飞快见效，让你在屏幕前花更少工时，从而拥有更多时间来产生创意。卷起袖管然后寻找答案吧。

它最终会转化为photoshop的视觉稿给客户。你会发现它与传统线框图相近，却能更接近地反映出设计稿的美术趋向。

通过手绘，能够消灭那些仅仅为了占位的图片。要知道，你放在原型图和效果图中的一个大叉叉，代表着这里将放入一张真实的图片。你就会省着用你那些昂贵的版权图片了。

这就是网站的效果图。你能看出草图到线框图再到效果图的变化吗？

从哪入手

有一点可以肯定，多加练习才能精通。随身携带笔记本来涂鸦、迭代、速写，保持这项技能处在最佳状态。

我发现，练习的最好办法，就是在任何排队的时候拿出来画一画——比如买咖啡、杂货店购物、等待火车……只要是等待时间，都可以用来手绘。

画下你的所见，这个技巧会对以后有帮助，当你需要向客户展示的时候。画下每个给你带来灵感的东西，随身携带笔记本就意味着你可以随时记录灵感，留待以后使用。

随着手绘量的增加，你会开始学着精炼你的手绘稿，并将它们转化为更加正式的插图或绘画。

为网页设计而手绘

规划一个网站时，手绘可以成为非常重要的一环。你可以把它用于设计、用户体验测试、界面元素，甚至尝试字体设计方面的创意。

我曾经在多个网站中用它来想象一些创意元素，比如照片和图标。我也在关键界面问题上使用过这个办法，例如怎样使一个按钮或图标更加直观友好。

交流设计元素的推演变化时，手绘也是最好的方法。客户喜欢这个有创造性的环节。他们会深陷于此，并也喜欢上手绘。

我有个客户说过：“哇，好像我想什么你就能马上画出来。太不可思议了！”这就是和客户面谈时，飞快手绘的魔力。

注意！多加练习

Doodlers Anonymous是个不错的地方，可以作为学习的起点，看看别人如何手绘、涂鸦并思考他们的创意。它也是一个很棒的分享社区和同行交流场所。

注意，现实是残酷的。钻研手绘会很艰苦。如果你不够老练，或者没有将你的绘图稿打磨好……那么找些工作之外的时间专门来画。

可以在Worldwide Sketchcrawl,Doodlers Anonymous和Urban Sketchers这样的网站找到灵感。

订阅一些手绘博客，钻研那些日志和手绘稿。然后问问自己，准备好在客户面前绘画了吗？

Urban Sketchers是一个致力于观察研究手绘的国际非营利组织。他们在Flickr和Facebook上有着完善的社区。他们博客的重要组成，是一个由手绘选稿记者构成的核心小组，他们在全世界范围内收集别人分享的作品。在他们的网站和Flickr、Facebook社区里，你可以找到很多颇具启发性的方式来素描你身边的世界。

记住，简笔画没法给人留下什么印象。具备手绘的能力是非常重要的开端。在投入到客户的项目中之前，你可能得花些时间“练习”和理解如何用手绘来表达想法。

这是一件早期的电子手绘作品。当时我在实验混合型的电子线框图，用Wacom数位板草草画成的。从这些早期手绘作品中，我学到了对客户而言，简笔画是远远不够的。

手绘时应该提出的问题

首先问问自己，是否了解所设计页面中的所有元素？如果是个改版项目，我会检查现有内容，思考用户希望看到什么。

如果是个新站点，我会浏览同行网站，做一些竞争分析，然后看看那些最“典型”的用户需要什么，将这些内容加入列表中。

接下来，我会询问客户是否有某些设计偏好。很多情况下，客户都有他们自己喜欢和推崇的网站。了解这些，并领会他们偏好的设计语言是非常有帮助的。配色方案、字体、语言/文案风格、视觉元素，还有那些会影响到市场专员的设计趋势。Pinterest、氛围图片库和“寻宝游戏”，有助于掌握一个客户的个人喜好。

手绘表达设计

以此为例，这是我给一所私立学校设计网站时画的。目的就是避免花大量时间在高保真photoshop效果图上，也能把主页的线框图具象化。

首先，我用便签条或者写一份文档，来收集这个页面的最关键信息。当然，最开始都是在纸上写字，但文字是具有代表性的灵感源头，而且能为我整理出一份所需的导航、内容、支持信息的综合列表。

然后，我会将文字项的列表转化为缩略图。画出导航、内容区块、广告、栏目、支持信息区块、页头、页尾等等。如果纸张不够用，就在下方再粘一张。

接着，我会选出最终优胜的创意，用于最后的手绘稿。一旦我形成一系列有用的创意，就决定朝着它的方向继续进行。在这个阶段我总能从客户和设计师同行那里获得大量的反馈。手绘看起来非常通俗，客户在选出最佳创意时也感觉更轻松，此时，距离正式的PSD效果图还早。

典型的项目流程

这是从手绘线框图演化来的高保真Photoshop视觉稿。能从中看出手绘对于照片的美术趋向产生的帮助。

在大多数项目中，我从简单的矩形入手，画出一系列缩略图。这个过程相当简单，但它能帮助我产生一系列确定的方案，供客户、项目经理、和设计师同行选择。

当我们谈及缩略图和其背后的创意时，我会根据选定的缩略图进一步画出草图。这些粗糙的草图主要为了确定内容优先级，推动页面布局的定稿。我也会画出照片和创意元素，比如该布局中的按钮或其他图标图形元素。

在草图阶段，我希望回答诸如“用户要的是什么”和“如何体现内容优先级”这类问题。这个阶段非常需要合作讨论。我会将草图与客户、经理、项目同僚和其他设计师分享。如果有必要，我们会暂停一会儿，画出一两个草图摆到用户面前以供测试。然后重复这一阶段，对草图进行精炼、迭代和推演。

一旦草图的方向明确了，我会画出正式的手绘稿。像传统线框图一样，手绘线框图的页面上有确定内容……文字、图标和照片。于是，我对于照片的美术趋向在手绘稿中得到了检验和探讨。我也通过手绘线框图来将最终的UI元素具象化，确保它们有用。我们通常会对这些进行测试，甚至对于某些非常复杂的界面，还要画出那些用户会遇到的过渡界面的线框图。

很多次，进行到正式陈述的阶段时，我会用墨水代替石墨来画图。墨水能为手绘稿增加一点正式感，如果再加入颜色，我就不必担心遗漏页面上某些实际UI元素。

最终，你总会形成自己的流程。手绘最神奇的地方在于，它能达到完全的自由。你能在任何时候捕捉灵感。

画好会议手绘稿所需的“插件”

找到合适的工具来为客户手绘很重要。我是Uni-Bal Vision的忠实粉丝，它是防水的。一支顺手的笔刷，可以很好地大面积填充深色墨水。

所以，总而言之，下面介绍一些画好互动手绘稿所需的“会议”用品。

钢笔——我爱用钢笔绘图。当然，用墨水挥洒创意需要一定的自信，不过你可以随时重画那些线条。客户也喜欢墨水的清晰。我最爱的钢笔是Uni-Ball Vision。它是防水的，可以放心用水彩笔画上颜色。

“便携式”白板——找一块旧白板，将它切成更小更易携带的“移动”白板。移动白板可以跟着你穿梭于办公室之间，还能通过Evernote来记录迭代修改和手绘稿。

大素描本——别在客户项目中用小素描本，不要怕，找些14英寸宽的东西来用。尽可能在大的东西上呈现创意。

活动挂图——它和便携白板类似……是件不可思议的工具，能让你的客户紧密围绕某个创意或概念。而有粘性的那种能粘在墙上，用来应对长时间设计会议和整个下午的团队工作。

结论

作为一名设计师，最贵重的财产就是你的头脑。快速即兴表达视觉信息的能力，让你区别于网页开发流程中的其他角色。而手绘能将你从鼠标和显示器中解放出来，现场展现客户所需的答案。

具备了可靠的手绘技巧，设计师可以即兴表达创意，将交谈转化为实实在在的创新。手绘可以很通俗闲散，能让整个项目保持亲切。

那么，拿起一只钢笔或铅笔、一本素描本，然后将你的涂鸦转化雇主和客户的销售额吧。

原文链接

愉快地说再见

hi@victor42.work (Victor42) — Thu, 28 Nov 2013 22:39:14 +0000

和朋友一次小聚，收获似乎比近两个月的忙碌工作所得更多。这么说毫不夸张，在彻底被变成一台机器前，它唤醒了我心底某些沉睡已久的东西。

从朋友的婚礼说起，聊过了宗教信仰导致的家庭问题、中国人的宗族意识、两代人的婚姻观差异，也顺便展望了一下朋友们未来可能的去向，顿感人生艰难困苦。平日里那些鸡毛蒜皮的不舒心，简直无法相提并论。不过这不是愤青的批斗大会，一言一语都在触动每个人心底那个最洒脱自由的自己，或许这是我们独有的相互鼓励的方式。

接到电话的那会儿，我应该正对着屏幕在忙些什么，就像这几个月来的每一天。聚会地点在一个半小时车程之外，活动只是吃顿饭而已。不知道为什么，我当下决定扔下一切，即刻启程。心里有场不温不火不痛不痒的小雨，被一道闪电瞬间点燃，划亮了整个夜空。

我有多久没联络过朋友？615的那个纯灌水扯淡群沉寂了多久？愚蠢的人类和小白过得怎么样？远在荷兰的黄鱼还为理想发愁吗？我不知道，我真的不知道。除了每天那些无技术含量的重复劳动，我什么都不知道。幸好，只差一点。

聚会结束乘车回家，公车上一双双倦怠的眼神，每只眼睛里似乎都有自己倒影。路面不平整，车速又忽快忽慢，这条线上晕车是常有的事。走廊对面就有人吐了一地，也弄脏了前面一个妹纸的裤脚。我下意识地掏出纸巾递给晕车者，胳膊没那么长，举了半天却没有人帮我递一下。大家都保持着居高临下的姿态俯视，一部分向那人投去厌恶的眼神，另一部分向我投来疑惑的眼神。倒是那个妹纸接过了纸巾，抽了一张，将其余递给晕车的人，整个过程面部却没有丝毫表情。

这场景太熟悉了，和我在深圳生活那两个月的见闻如出一辙，地铁上、写字楼电梯里，随处可见这样的眼神。我很好奇，他们变得麻木的原因，也和我一样吗？因为机械地工作导致的疲惫，以至于工作与各种琐事在脑海中挥之不去。可是，一张设计稿、一个浏览器兼容性Bug，真的会比咫尺之内一个活生生的人更重要吗？触手可及的距离，反倒成了最远的鸿沟。

我也不知道有多久没有注意过身边的事物，直到竹子提醒，我才看到小区草坪落了厚厚一层银杏叶，像心里积了厚厚一层灰尘。甚至我好半天都没反应过来，小区里一直都有银杏树的吗？这对于设计师来说，是很要命的。它意味着我已经脱离了生活，脱离了最神秘的灵感源泉，失去了上帝之眼。

而我的工作内容也有将近60%被前端代码占去，更加无暇顾自己的初衷。这很奇怪，我的前端水平不咋地，仅仅因为团队里只有我会，我就要花一半以上的时间去做自己并不擅长的事情，至少这不符合我的逻辑。时间紧、项目急，我已经开始学会让设计稿缩水了，否则会给我的切图工作带来难题。那么，我究竟在干什么呢？

我不算挑剔，但对于生活还是讲究的。从前的那么多好习惯，像濒危物种一个个消失。每天坚持吃水果，骑车出门去探索城市的未知角落，看展览，专门花时间收集好音乐，读纸质书，写博客，写小说，锻炼厨艺，早睡……努力回想，竟一个也没剩下。这种程度的失去，已经不是什么东西能够弥补的了。而我需要失去更多，才能把它们一一寻回，不过这确实是我打算做的。

所以，为了朋友、为了设计、也为了生活，是时候愉快地说再见了。

轻松打造iOS7风格图标

hi@victor42.work (Victor42) — Sun, 24 Nov 2013 10:29:38 +0000

[国外设计第19期]

随着近年来iOS7的发布，很多网站和APP都忙于改头换面，来适配这套全新的扁平纤细的iOS设计风格。设计好图标是件棘手的事情，尤其当你要设计一整套时，而设计线条式图标本身又是另一项挑战。

下面，我为你准备了一系列指南，能帮你通过简单的步骤打造iOS7风格的图标。

目标是什么？

凡事分轻重缓急，你设计的图标或图标集是用于你的APP吗（这里的APP也指网站）？对于这部指南来说，都无所谓。因为无论如何你都应当遵循下面这些步骤。既然对这一点明确无疑，我们来关注首要任务——研究。

研究别人是怎么做的

研究是一项需要预先完成的基本任务。这很明显，也相对沉闷，你的每项工作都应该从研究开始。不过，在图标设计中，还有些特别的东西需要了解。

首先，看看别人怎么做。有助于了解当下潮流趋势，还有相关的设计守则。最重要的是，这能给你灵感！观察各种神奇的图标作品能助你发现其中的创意闪光，当你准备画手稿时，就能产生好点子。

既然这个指南是针对iOS7的，研究苹果的做法也不失为一个好主意。观察它的图标，无论是主屏图标（比如信息），还是app中的图标（比如时钟应用中的）。看看苹果的iOS7设计准则，你就知道他们建议你怎么做。

着手画点什么

既然你已经充分了解别人的做法，也深受启发，是时候将你的想法付诸于纸上了。在创作过程中，手稿也是一项基本步骤，因为它让你仔细思考各个创意，使大脑快速进行头脑风暴产生新想法。当你画了一些简单的手稿，并将它们都罗列在眼前，正确的方向立刻就显现出来。

手绘草稿最关键的一点，不求数量多，而是要多样化。你画了上百个相同的东西一点用也没有。如果你有三个不同概念，那就有用和深刻得多。只要你保持手绘稿千变万化，就会有好结果。广泛收集灵感有助于找到合适类型的图标，并确定应该朝哪个方向前进。除此之外，看看这些各式各样的草稿，能帮你更容易找出残次品。当你无法确定正确方向，却能肯定其中哪些不会再深入下去时，这个办法相当于管用。

绘制实际图标

我可以肯定，在完成了这些手绘稿之后，你或你的团队已经有所偏好了。无论你选出了其中具体某一个，还是几个不同方案来竞争，该把它们绘制出来了。首先要建立你的栅格系统。如果是创建主屏图标，那你应该遵循苹果提供的新iOS7设计准则。这类PSD模版网上随处可见。

我的建议是尽你所能把这些不同图标都应用于栅格系统，不过先用常规做法来绘制图标。以后再回来修改细节和做统一化处理，反正你收工前还得再做调整。对我而言这很有效。全部绘制完成后，回头来确保它们都吻合栅格，并具有统一的风格——比如它们采用尖角还是圆角？同时，你也希望确认这个图标是否符合整体设计的风格，图标与app搭配吗？主屏图标能体现app的设计吗？

修饰图标

对于iOS7风格图标设计，我有几句话说。我知道iOS7提倡纤细线条的图标设计。但这也不是必须的，尤其对于主屏图标来说。不采用细线条，而采用饱满图形的大有人在，但它们和iOS7的整体风格也相当吻合。我不觉得细线条是唯一准则，你不用也没问题，尤其当你的产品设计不适合甚至根本就不采用它们时。别管它就好。

结论

创作iOS7图标不是什么难事。就此而言，我设计它们时，就像做其他类型的设计和图标一样。关于iOS7最重要的一方面就是风格，循着苹果的脚步，你也能轻松做到。关于这套新设计风格，有一点值得一提：为iOS7设计比拟物化设计要容易多了。

原文链接

优秀的界面是隐形的

hi@victor42.work (Victor42) — Sun, 17 Nov 2013 10:39:48 +0000

[国外设计第18期]

真正优秀的用户界面会被无视，而糟糕的设计则迫使用户注意界面，而非内容。用户都是带着目的来访问网站的：买本新书、学习JQuery、与朋友分享一篇文章、发现新音乐、写小说或者仅仅是寻找最近的目的地。他们不会只为把玩界面而来。实际上，用户根本不在意界面设计。多年来，台式机系统树立的典范和交互式工具的缺失，都使人们开始思考用户界面，它如何发挥作用？如何让设计增色或减分？但用户真的需要关心这些吗？

用户已经熟知界面的模式和组成元素，但他们根本不在意。多年来，网页设计师们已经在按钮颜色、投影、边框和渐变上花了成百上千个小时，只为了让界面更易用和美观。但事实上，优秀用户界面的终极形态不是易用，而是隐形。

或许你已了解，移动设备是近年来的重头戏。多点触控设备的问世引出了一个轰动性概念——用户界面就是一系列对内容进行的点击操作和事件，移动设备的崛起令人机界面更加自然。这一现象有诸多原因，但对直接对内容进行操作，和摒弃过时的具象化事物（像台式机里的那些）赋予了这些设备极高的易用性，因为它们的界面几乎消失了。

不过我们仍然需要用台式机和笔记本来工作，我们也需要浏览网站、使用web应用程序。那些神奇有趣的多点触控技术，和它创造出的更加自然的新式用户界面，却未必能派上用场。那么，既然还不能为我们所用，我们要继续创作那些过时且“碍事”的UI元素吗？当然不行，隐形界面应该是每位UI设计师与开发者的目标。

界面，而非障碍

界面不该成为用户浏览内容或达成目的的障碍。达成目的之前，用户根本没必要经历那些UI陷阱和胡乱编排的导航。多年来，我们都在使用和发明各种UI障碍。表面上它们似乎能解决某些问题，却给用户增加了更多负担。面包屑就是个极好的例子。通常认为，要让用户了解自己在应用中所处的位置，面包屑是个不错选择。但它更多时候只是平添了不必要的UI元素，影响正常的用户体验。

尽管面包屑并没有直接给用户带来负担，但它占据了屏幕宝贵的空间资源，而这本该用来引导用户达成目的和展示内容。增加面包屑来应对导航问题，不如直接设法解决它。为“修复”某些UI问题，经常会引入新的元素。然而，太多不必要的元素积少成多，最终界面成了一个障碍重重的迷宫。若是一味增加UI元素，界面还如何隐形？

解决界面问题

这与我们前面所讲的息息相关，但是要打造隐形的界面，意味着要解决更深层次的问题，你得真正解决那些问题所在。我的背有点小毛病，当然，敲一敲和服用镇痛药都能止痛，只是治标不治本。我缺乏运动，经常无精打采，像石头一样僵直。我们对待界面问题也是一样。创作网站和APP时，我们总会发现各种千奇百怪的问题。多数时候我们只是做些表面文章来解决问题，界面下却隐藏着更深层次的问题。此举只是头痛医头，脚痛医脚。

不过这已经成为惯例了，因为我们总得学着与项目经理、网站主、股东、项目进度或仅仅是懒惰抗争。我们总以此为理由进行用户测试和AB测试。“我知道有些不对劲，不过还是通过用户来验证一下这是否真的是个问题。”若想要实现隐形设计，这可不是什么好方法。完全透明的界面意味着解决设计中最深层的问题，它们才不会出来作乱，成为用户的绊脚石。

宽容的设计

宽容，往往是隐形用户界面的一个特征。自然的界面并不限制各种探索性的点击。当用户进入死胡同，它不会轻易显示错误信息，而是将用户引向别处。

宽容用户意味着他们犯错时不要惩罚他们。用户错误操作，往往因为他们无法预料结果。我们总将问题归咎于用户，并弹出大大的警告和错误提示来惩罚他们。当用户踏入陷阱时，隐形的界面会避免责罚他们。相比弹出错误提示，优秀的界面设计能预测应用中出错率较高的地方，并提供解决方法，甚至引导跳转。

宽容也意味着网站或APP的规则可以被用户打破。这是下策，不过假设你打破了妈妈的古董花瓶，想要把它粘回去，却因为手指粘在一起被抓住，这肯定是最深刻的教训。用户弥补他们犯下的错误时，他们将更了解你的APP，别出现那些大红错误图标和晦涩难懂的文案。

首要任务，达成目标

这是个交互设计的绝佳案例，是Cooper正在进行的项目，鉴于它尚未上线，我应该只被允许小小提示一下——以目标为导向的设计。你的界面设计也应该围绕用户的目的展开。不是用户要什么或喜欢什么，去他的，根本不是这么回事。而是挖掘用户的需求，然后指引他们达成目标。这很滑稽，用户对于他们想用什么样的产品总能夸夸其谈，却对自己的目的一无所知。你的职责就是挖掘他们的需求，而非要求。“要求”会导致界面臃肿、障碍重重，令用户厌烦。

找出目标并让用户尽快完成它，他们不在乎其他事情，尽快到达目的地才是对他们最大的回报。不需要为此设计漂亮的界面，避免用过度设计来补偿糟糕的目标引导。

一致性

不错，在用户体验的世界中，我们一直在谈论一致性原则。界面设计中，一致性是重点。如果你的界面元素都放在相同的位置，有着相同的颜色和功能，那么你的界面会逐渐消失……像Marty McFly一样。不过，如果只是把所有按钮放在每页的同一个位置，或用某个特殊操作执行相同的功能，并不能解决一致性问题。

在用户体验设计中，我们还经常借鉴APP或网站中那些一致或相似的东西。我之前写过文章，解释了相似的环境如何使得界面更舒服。然而我们要创造真正的隐形界面，不是为了一致而一致，光有这些还不够。隐形界面有着“真正的一致性”，不仅元素、数值、链接和其他数据展现形式统一，场景和含义也是一致的。

例如，你应该注意到了，其他很多APP把登陆按钮或链接放在右上角，所以你会觉得，既然其他APP都这么做，放那里肯定错不了。但在你的APP中，放在那个位置或许就毫无意义。与其继续创造有瑕疵的界面，不如将界面元素放在最合适的位置，然后在整个产品中延续其一致性。

结论：鼓舞用户

最后，优秀的隐形设计还需要鼓舞用户。当界面脱离了用户的操作步骤，直接将他们引向最终目标，用户会集中精神在他们的目标上。

界面应当通过数据和内容的无缝切换，来鼓励用户与它建立良好的关系。用户有时喜欢探索一个界面巧妙的产品，甚至玩得很开心。但更多时候，对他们而言不存在的界面更有鼓舞作用

原文链接

网页设计的10个灵感来源

hi@victor42.work (Victor42) — Sun, 10 Nov 2013 10:54:31 +0000

[国外设计第17期]

这一期有意外收获，我在译言网上发布的原文竟然被人抢先翻译了。通读一遍，发现译者的文字功底相当深厚，而自己的翻译太拘泥于原文，收益良多。有兴趣的朋友也可以看看本文的另一个翻译版本

能够激发我们创作优秀网站的，不仅仅是网页设计

这世上几乎每一样你身边的事物都能对你有所启发

你总是无法预料什么东西会点燃你创意的火花，我时常发现，一些最常见的事物能让我从新的或不同的角度来思考项目。这里我们介绍10种我最爱的网页以外的设计灵感来源

大自然

思考设计的最佳地点之一就是户外。看看自然界这些伟大的图形和色彩搭配。就我个人而言，我喜欢从花卉中汲取配色灵感

这株秋天的三色堇，可以作为新项目配色方案的出发点，伴以明亮且对比鲜明的颜色所营造出怦然效果【作者这里似乎忘记配图了，说好的三色堇呢~】

音乐

虽然很多设计师都会赞同，听听小曲是激发设计灵感的绝佳方法，然而音乐也能给人其他收获。想想你听不同风格音乐时，所感受到的形形色色的情感。收听吻合你项目基调的音乐，可以额外激发一些灵感。听音乐时随思维跳跃，将大脑在听音乐时创作出的画面，用作项目雏形的基础

我也喜爱音乐作品背后的创意和思想。专辑封面（甚至包括电子版）是个有趣的启迪思维、迸发创意的方式。我最喜欢的一张是极简风格的Jay-Z的The Hits Collection Volume One（它有着扁平风格的设计，并且在当前趋势流行很久以前就发行了）

艺术

设计是艺术或创意表达的另一种形式，参考其他艺术形式能够充分帮助你推动项目进行。不过别拘泥于最浅显的那层含义——参考美术作品。雕塑也是一个极好的灵感来源。细致观察它们的形状、物体的连接和相互作用，然后头脑风暴出规划网站的新途径

包装

包装设计可能是最容易被忽略的设计领域之一。回想一下，你有多少回拆封一条口香糖或丢弃一个饮料瓶时，却根本没注意过它的外观。在狭小空间中使用时，这些物件往往都是非常好的例子（从可读性角度回想一下食品标签上拥挤的信息）

观察这类东西，能极大帮助你处理好狭小空间。包装也有很多种形状和形式，能帮助我思考不同的内容展现方式（不是什么东西都得是四四方方的！）

照片

[译者注：创意机构Artsy也为Jill greenberg制作了个人主页，应对方要求，在此添加了上面的地址]

尽管摄影是网页设计一个显而易见的灵感来源，但它可能并不像你想象中的那样，只发挥常规的作用

如果一张漂亮的图片对你的项目有帮助，别仅限于从中汲取灵感，直接使用它。大胆设计，聚焦于这张漂亮图片。另一方面，如果你没有合适的图片，搜罗全世界的照片来寻找灵感。当你感到艰难、设计卡住时，National Geographic、Jill Greenberg和Levon Biss，就是寻求帮助的绝佳地方（而且这些网站围绕图片的设计都做得不错）

时尚

T台、时尚秀和杂志是参考新兴潮流的绝佳途径，从颜色到尺寸再到纹理。然后你可以将其中一些概念同样运用在网页设计中

时尚设计师在秀场用到的尺寸，或许有助于你思考从大（或小）方面来着手构建事物，但颜色选择和纹理才是最值得一看的时尚元素（想想时下的雪弗兰热潮就知道）。我们在网站上看到的很多背景纹理也取材于纤维制品或服装图案

提到从时尚中汲取灵感时，有一点需要注意：有时候网页设计师们需要好一阵子才能捕捉到最前卫的潮流。但这是一个站在时尚前沿来思考未来趋势的好办法

室内设计

若说获取颜色与纹理设计灵感，室内设计是世上最棒的途径之一

逛家具店，触碰和观察布艺品，有助于把你的网站所需背景视觉化。你也可以在现实中混合搭配颜色和纹理，从而你可以在创作电子版本前，挨个尝试哪些适用

观察室内设计动向，也能帮助你在颜色方面掌握流行趋势。斑驳脱落的油漆和设计博客是不错的地方，能让你思考时下盛行的颜色，以及如何运用于自己的项目中

食物

虽然有大量的反对者非常厌恶Instagram上那些食物图片，但这些简单的照片也能带来灵感

颜色和形状的组合有时非常棒。处于某种原因，寿司图片给我非常多启迪（可能是因为颜色和它圆形的轮廓）。观察食物能帮助你创作一个与食物相关的网站……或者是某些完全无关的东西

旧物

提到创造意象，旧物能很好地帮助你入手。硬币、电影海报和旧书中包含了很棒的颜色与字体案例

你所看到的样式大多都不常见，能帮助你完成一个外观感觉不要求太前卫而是与众不同的项目

这些灵感来源的妙处是，它们会让你从不同方面思考意象。比如很多旧书，包含了素描样式的图画，而不是照片或全彩色绘画。看着这些样式，能帮你考虑各种不同途径，来在项目中创建和使用图片

建筑

建筑及它的轮廓（特别是大城市中的那些）对我来说是相当惊艳的灵感来源。这些创造物的外观和“生命”简直让我有种冲动亲手设计些东西

在数字领域运用你从建筑中观察到的形状，来创作一些有趣的东西。当你需要一幕背景或框架来排列布局各元素时，想想建筑轮廓与地平线是如何交汇的。也回忆一下夜晚的天际线，明暗（颜色对比的基准）如何共同作用来创造视觉特效，然后将它复制到设计项目中

原文链接

我如何成为了一名设计师

hi@victor42.work (Victor42) — Fri, 01 Nov 2013 14:59:42 +0000

由于电子专业出身，经常会被问到为何以及如何成为了设计师。面试时被问到，总有千万种合理答案，因为他们问的是why。被朋友问到时，却瞬间词穷，因为他们想知道的是how。近日优设小编也问了我这个问题，一时间答不上来，于是有了这半正式的约稿，至少能给自己一个交代

不过我要先提示一下，本文不是教程，没法教你如何成为设计师，它仅仅代表我的个人经历与感受

相信大多数同龄人和我一样，自己的人生到了大学才真正开启。小时候被问及长大想做什么，十多年后才有时间来认真回答这个问题。然而理想是一回事，上大学却是另一回事。选择电子专业的理由颇有戏剧性，因为我不爱自己生活的城市。逃离它有个最直接的途径——外地二流大学的三流专业。于是，填志愿问题变成选择定居城市，顿时好选多了

电子专业比我想像中枯燥，至少第一年我有过认真学习的念头。种种迹象表明，这个成天与电容电阻电路板打交道的专业，不适合我这种右半脑生物。在转英语专业失败后，我决定无论如何要做点什么

图书馆里什么书都有，在看完几本小说后，人生的第一个转折点来了——我拿起了一本广告学杂志。现在回想起来，广告营销绝对是相当一部分懵懂青年的救命稻草，因为它听起来够励志、够鸡血、够个人英雄主义。可是我却走偏了，渐渐对那些巧妙的营销策划产生反感，注意力都集中在漂亮的广告图片上，这或许是我第一次注意到“设计”一词的存在

所以photoshop成了必经之路，好在我以前自学过，上手容易些。可是我还是掉坑里了，我花了大半年的时间看视频、找教程、学各种photoshop特效，却连个书籍封面都设计不好

大二开始找了家平面设计公司学习，就是在这里，我才真正上道儿了。简单学了几种软件之后，我被要求设计一张名片。结果可想而知，但部分细节得到了认可，那些无关ps特效，而是来自对优秀设计案例的模仿。设计的入门阶段，模仿至关重要，老板后来的指导也印证了这一点。很长一段时间，我都在翻阅和模仿各种传单、画册、楼书，这也直接导致配色与构图成为我的强项。毕业那年，老板说我已经有平面专业大四的水平了，现在回想起来，确实没有夸大

所以我勉强算是平面出身了，而且和设计专业的同学们拉平了起跑线。但这些转眼就都成为浮云，第一份正式工作让我意识到，一般的科班毕业生水平，根本无法胜任大部分设计岗位。一本8页的企业宣传册，我来回折腾了一个月，最终还是靠有经验的设计师同事帮忙搞定的。同时，企业网站的开发工作量很大，于是我被派去给公司的前端打下手，前端技术的入门也由此开始

在工作中学东西是非常高效的，边做边学，两个月时间熟悉了html和css，能做出不带动画效果的页面。之后的经历证明，前端技术相当实用，建议设计师同行们偷偷学起来，至少了解其原理。为什么是偷偷，我们稍候再讲。自此，公司终于找到了留下我的用处，我开始负责日常新闻专题页面的制作，起初是设计师前辈设计，我来制作。渐渐自己也能做出合格的专题页了，工作终于趋于稳定

有段时间比较闲，被派去广告部做宣传册，第一回给客户做设计，而且是政府部门，你懂的。我无法直接与需求方沟通，加班、改稿数不胜数。接口人是个说话非常难听的急性子，不巧的是他竟然以前还学过设计，所以我整整被指手画脚冷嘲热讽了两个月，自己都不知道是怎么熬过来的。虽然最终注定不会和这家伙成为朋友，不过还是从他那里学到了一些设计技巧。还有一点：别发没必要的火

辗转换过多份工作，却一直没离开过互联网，中间还穿插着好几次个人网站的建设与改版，能够额外提升设计与前端开发水平，也有机会从更高角度来看待产品。到目前为止，工作都以网页设计为主，有时还兼任前端。然而身兼两职并非什么光荣的事情，反而是恶性循环的开始，这点我很久以后才明白，想要扭转已经阻力重重了

术业有专攻，设计与开发本就是两种不同的思维方式，频繁在两种模式间切换，会影响工作效率。而有限的时间精力分散到这两部分中，产出也相应减少了，每次换工作看着干瘪的作品集就能体会到。所以前端技术要学，但千万要偷偷地学，不要在工作中展露出来，除非你在自己创业初期。这话肯定有人不爱听，但是设计师朋友们，作为技术型工种，个人的成长绝对比公司业务更重要

有这些就是优秀的设计师了吗？在进入一家pc软件公司前我都不曾怀疑过。第一次接触软件产品，其功能逻辑的复杂程度非一般网站可比，功能性的东西远远多过于内容展示，4个界面竟然衍生出了几十个PSD文件。幸运的是我从头到尾主导了整个产品的设计，不幸的是它最终由于公司大裁员，无力开发上线了

这段经历让我重新思考了设计师的定义，或者说分类。按我的理解，设计也能分化出两种思维方式：内容思维与产品思维。笼统的说，印刷品、banner、活动专题页和一部分企业网站属于前者，社交产品、电商平台、管理系统、大部分APP等属于后者。两者有重叠，但前者偏重视觉效果，后者偏重易用性。优秀的设计师当然应该两者兼备，但对于我这个已经被前端技术“扭曲”的人来说，后者无非是比较好的切入点。这不意味着路要越走越窄，广泛涉猎是必须的，掌握各领域的设计动向，平面、网页、UI，来者不拒

发展方向开始变得清晰明确，随着科技深入人们生活，产品思维的重要性会直线上升。作为一名设计师，用户体验已经变成必修课，它在产品中发挥的作用是贯穿始终的。这方面的学习渠道并不系统，重要的是保持对于科技与生活的热爱，还有不将就的态度

本文结束前，还有一个最根本的问题没有回答，我究竟喜欢设计吗？嗯……我敢说，至少是我了解的职业中最喜欢的。发散思维、寻找灵感的阶段最为有趣，确定方向、一气呵成时最有成就感。尽管工作越久，越难察觉自己的进步，但有时回头看自己的作品，又会忽然惊喜自己当时就能做出那样的设计

一朝为设计师，便是终身的选择，即使哪天我不再从事设计，也无法置身事外

因为，它已变成我的世界观

设计师VS开发者

hi@victor42.work (Victor42) — Sun, 27 Oct 2013 14:30:11 +0000

[国外设计第16期]

几乎在每个角落你都会看到有人谈论或自称网页设计师、网页开发者。那具体是指什么呢？

谁是真正的设计师或开发者？可以同时成为这两者吗？

这会是个引来热议的话题，让我们来分解这些术语，挖掘它们的含义和相互间联系

设计师的职责

首先，我们来站在每个职业各自的角度审视这个问题

设计师使用图形和图形设计软件（例如Adobe Photoshop,Illustrator和InDesign）来打造网页的外观。然后将设计稿配合代码来实现

设计师不一定是那个写代码的角色，不过有时也能在团队中独立工作来实现一个网站

多数设计师的工作是运用直觉与想象力输出创意，一般都是典型的右半脑生物。这个领域的人会向多领域发展，不过通常大多都会偏向于图形设计与艺术。设计师会收集设计作品集来向潜在的雇主展示他们的项目作品

最优秀的设计师们对颜色、字体、空间关系、用户与用户体验等多种概念有着深刻的见解

开发者的职责

开发者的职责可以在某些方面和设计师相似，也可以完全不同

一个网页开发者要搭起网站的骨架，往往是从零开始，而且他们懂得网页开发的各种语言。HTML, Javascript, JQuery和CSS都是他们装备。长久以来，开发者并不关注实现某件东西的视觉表现，而是创建一个代码干净整洁、技术可靠的网站

网页开发者通常是左半脑生物。技术实力和逻辑思维是他们能力的重要组成部分。网页开发者可能具有多领域的学历，比如计算机科学或编程。多数雇主在招聘过程中都会要求他们提供作品文件夹

最优秀的开发者往往都注重细节

不同的职业，相同的目标

说到底，网页设计师和网页开发者都是为了一个目标——创建一个吸引用户的网站

为达到这个目标，设计与开发都必须有效而可靠。网站需要美观的界面并且运转良好。颜色和形象要能反映出品牌，界面得激励用户完成你所需的操作

设计师与开发者之间明确的界限已经开始变得模糊，越来越多设计师开始学习代码，更多开发者也开始注重设计理论（这就是为什么设计与开发的文章和教程如此盛行）。可以预见未来这个领域将产生一个新头衔——网页设计/开发

两者协作

关于设计与开发最困难的一件事，是两者协作并找到一种大家都理解的沟通方式。双方都有太多的术语，若不斟酌词句，协作就难以进行

这里有几则小技巧来打破鸿沟：

避免使用术
展示出来，不要光说，让别人明白某件东西看起来应该如何或如何运转。如果不知道怎样解释某件东西，准备一张草图或一个样品来参与讨
集思广益。设计师要接受开发者的设计理念，开发者也要听取设计师在用户体验方面的建
多多学习网站建设中那另一部分工作。钻研你不熟悉的东西，多提问

有可能成为设计师兼开发者吗？

所有的这些区别似乎都意味着设计师与开发者是两个相当不同的职位和角色

但是也不尽然

你也可以同时是设计师与开发者。越来越多人开始这么定位自己，而且这也成为一种非常受欢迎的技能组合。设计师与开发者的角色，正在相当一部分人身上被合并，甚至包括从没考虑过学习开发的设计师，反之亦然

我也是这其中之一。来讲讲我个人的故事：

我以一个平面印刷设计师身份起家。我曾经根本不了解网站如何运转，为何如此，也不曾考虑过创建网站

几年前一切都改变了，我意识到网站可以也应该像印刷品一样漂亮。如果我学习这两项技能，我会成为一个更有价值的员工，也会对自己的工作更加满意

于是我开始学习代码。我不敢说自己非常了解代码。但我所掌握的，已经让自己足够具有竞争力了

我可以和开发者沟通并理解他们的语言。这使我更容易与开发者协同完成项目，但愿开发者会喜欢与能够理解他们的设计师一起工作

现在想想，假如当初我同时学了设计与开发，就像许多职业生涯刚起步的人，会是怎样？

所以，答案必然是肯定的。你可以同时成为设计师与开发者。也许你只擅长其中之一，但始终都应该以全面发展为目标

原文链接

清爽的极简商城设计指南

hi@victor42.work (Victor42) — Sun, 20 Oct 2013 11:09:08 +0000

[国外设计第15期]

若要展示你的商品，还有什么比为它们打造一个舞台更好的吗？

这是电子商务网站设计近来的趋势——极简化

在过去，很多线上商城都采用了相反的方式来设计。这些网站通常都充斥着各种信息，字体和颜色都咄咄逼人，并且网站严重“过度设计”

现在很多网站弃用模特、夸张的颜色和字体、花哨的图片，只为营造极简风格来展示他们的商品。自响应式设计形式出现以来，它便成为影响众多网站的一种趋势（不仅仅是电子商务）。更多设计师开始拥抱这种趋势——简单才是更好的，并且注重可读性和易用性

这就导致了更好的网上购物体验和更干净的界面，文字更易读、界面更简单、快速和友好。这种趋势不仅仅关乎设计，还创造了更佳的整体体验

想想苹果和它线上商店所取得的成功。简单和直接可以等同于销量。现在，我们来看看这种趋势和将它运用得当的公司，还有能使它为你所用的诀窍

趋势

越来越多公司开始在他们网站中舍弃丰富颜色、模特和动画，有助于实现更加简化的设计方案

背景纹理都变得更加微妙——或完全去除了，为了使用纯白或纯黑的背景来突出商品图片。但为什么呢？

用简单的设计方案，有助于一个品牌宣扬它的商品。不需要猜测卖的是什么，因为一切都清晰明了。这么做可以消除一个品牌以往的战略所塑造的生活方式和形象，它们往往会盖过实际产品

这种方案成本很低。不需要雇佣模特，简单的背景也可以减少设计前的工作量。上手所需的，只需要工作室的一点灯光和优质照片就行了

在非常复杂的设计上少花心思，可以让企业有更多时间聚焦于用户体验。毕竟一个电子商务网站首先考虑的还是销量。一个站点必须运转正常、加载迅速，并且确保用户很容易找到他们所要的，来促成购买

电子商务设计指南

为了展现出活力。不要照抄另一个网站。是什么使得你的商品与众不同？将它在展柜中宣扬出来

网站要便于阅读。字体应该干净简洁。商品数量、尺寸、颜色和价格需要清晰可辨。别忘了商品注释和购买按钮——分类是首要任务

照片应该直接使用商品图片。不要用奇怪的角标或者非同寻常的光照效果。顾客想尽可能清楚地看到商品。确保你的照片能表达这一点。每张照片得是真实商品最精确的写照

确保你的网站易于浏览和导航。如果它加载很慢或者太复杂，顾客会逐渐减少。要包含促销和你们公司的信息。让顾客知道为何你与众不同，值得他们花钱

所有元素都要清晰并规划有序。如果一张图片质量较低或很模糊，不要使用它。如果一个设计元素与你的产品不协调，换一种手法

让购物简单有趣。顾客可能会被网站的惊艳之处所吸引，但你还需要一些好玩的花招来留住他们，要确保随后的页面都容易浏览和使用

8个优秀案例

Le Coq Sportif：焦点在商品列表上，你不用来回点击就能看见各种商品。这对没有明确目标的顾客和冲动型消费者非常有意义

Visual Supply：极度简单的布局相当醒目，每个商品都清晰地标识出来。鼠标滑过每个商品时展现的红色边框是很棒的设计

Ditto：眼镜陈列很有趣。因为它的商品展示简单纯粹（也包括网站设计），让人感觉就像在一个个对比实物

Neve/Hawk：简单未必代表无趣。这家公司用了大量中性颜色和简单的照片来展示每个商品（他们有个非常有活力的欢迎页面）

Narwhal Co.：图片立刻能抓住眼球。它们都清晰、色彩丰富。醒目的好照片总能吸引人进来

Callaway Golf：氛围图片很棒，确定了商品的整体基调，不过每个商品也能独立出来。商品间以相同格式排布的图片很容易形成对比

MANKINGdog：图片很棒，相当抢镜。每个商品看起来都很华丽，使得品牌故事与众不同

Incase：这家公司的促销手段很好，网站脱离了杂乱臃肿的感觉。带按钮的简单的照片告诉顾客还有其他选择

结论

这种趋势值得坚守

干净的设计总是好的。如果各公司真正将这种理念用于展示产品，那就更好了

有千万种理由说明商品放在简单的背景上效果好，它能给产品一个空间来为自己代言，并且让顾客在购买前对商品留下好印象

原文链接