UI on Victor42

移动应用弹窗设计指南

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, 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, 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/

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

我花了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

作者信息：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.

混合型界面：对话式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

全新的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, 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) — 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.

看得见的才是有用的

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

功能性动画设计：优秀的转场效果

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, 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, 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) — 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.

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, 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, 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.

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

有目的地为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/

作者信息： 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+.

使网站显得业余的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!

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

数据驱动的界面设计

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.

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

Basic Knowledge of Mobile Dimensions

hi@victor42.work (Victor42) — Sun, 19 Apr 2015 19:55:00 +0000

If you’re new to mobile design and development, you’ve likely struggled with dimensions. This guide breaks down the basics for beginners.

The Situation

Mobile screens come in many sizes. Fragmentation, especially on Android, is a challenge. You’ll encounter resolutions like 480x800, 480x854, 540x960, 720x1280, 1080x1920, and even 2K screens. iPhones have joined the fragmentation party: 640x960, 640x1136, 750x1334, 1242x2208.

Don’t panic. Most apps and sites display well across screens. There’s a method to the madness.

Pixel Density

Screens are made of tiny pixels. The resolutions mentioned above are the screen’s actual pixel dimensions. A 480x800 screen has 800 rows and 480 columns of pixels. Each pixel emits colored light to create images. However, a phone’s physical size doesn’t scale proportionally with its pixel dimensions. For example, the iPhone 3GS (320x480 pixels) and iPhone 4S (640x960 pixels) are both 3.5 inches, but the 4S has double the pixels.

This is where pixel density (PPI, or pixels per inch) comes in. It bridges the digital and physical worlds.

PPI is the number of pixels in one inch. An inch is a fixed length (2.54 cm). Higher PPI means a sharper display. Retina screens are clearer because their PPI is doubled.

Scaling and Logical Pixels

Consider the iPhone 3GS and 4S again. Imagine an email list. If designed like a PC webpage, the 3GS might show 4-5 rows, the 4S 9-10, with each row being very wide. But the phones are the same size! If displayed this way, content legible on the 3GS would be tiny on the 4S.

In reality, they look similar. Retina screens use 2x2 pixels to represent 1 pixel. A 44-pixel-high top bar on a regular screen uses 88 pixels on a Retina screen, making it appear twice as large, matching the 3GS’s appearance but with greater clarity.

Older iOS apps often had “@2x” and non-"@2x" versions of images. iOS automatically chose the correct one; Android works similarly.

Apple used the regular screen as a baseline, with a 2x scaling factor for Retina screens (3x for iPhone 6 Plus). Dividing actual pixels by the scaling factor gives you logical pixel dimensions. Screens with the same logical pixels display content similarly.

Android’s approach is similar but more involved. Due to the wide range of Android screen sizes, Android groups devices by pixel density, assigning scaling factors to each group for visual consistency. iOS and Android handle PPI calculations for us.

Screens around 120 PPI are classified as ldpi, around 160 as mdpi, and so on. Scaling factors are:

ldpi [0.75x]
mdpi [1x]
hdpi [1.5x]
xhdpi [2x]
xxhdpi [3x]
xxxhdpi [4x]

iPhone scaling factors are simpler. But with many Android phones, how do we categorize them? Here’s a table (Umeng data, Oct 2014 - Mar 2015):

Based on the market then, we can categorize phone resolutions (this isn’t exhaustive, but was relevant for about a year):

ldpi: Nearly extinct.
mdpi [320x480]: (Under 5% market share; new phones won’t use this; screens are usually tiny).
hdpi [480x800, 480x854, 540x960]: (Older/current low-end phones, screens around 3.5/4.7-5.0 inches).
xhdpi [720x1280]: (Older mid-range/current low-to-mid-range phones, screens around 4.7-5.0/5.0-5.5 inches).
xxhdpi [1080x1920]: (Older high-end/current mid-to-high-end phones, screens usually above 5.0 inches).
xxxhdpi [1440x2560]: (A few 2K phones, e.g., Google Nexus 6).

mdpi (1x) is the baseline. Devices with different densities are multiplied by their scaling factor to achieve a similar visual effect.

However, Android logical pixel dimensions aren’t uniform. For example, 480x800 (hdpi) and 1080x1920 (xxhdpi) have logical dimensions of 320x533 and 360x640, respectively. The latter is wider and taller, displaying more. So, even with scaling, displays on various Android devices aren’t perfectly identical.

Units

Logical pixel dimensions determine how things look. iOS and Android use units for these: “pt” (points) for iOS, and “dp” (density-independent pixels) for Android. They’re essentially the same.

Conversion between units depends on the scaling factor:

1x: 1pt = 1dp = 1px (mdpi, iPhone 3GS)
1.5x: 1pt = 1dp = 1.5px (hdpi)
2x: 1pt = 1dp = 2px (xhdpi, iPhone 4S/5/6)
3x: 1pt = 1dp = 3px (xxhdpi, iPhone 6 Plus)
4x: 1pt = 1dp = 4px (xxxhdpi)

We should think in logical pixels. Some Android designers use 1080x1920 canvases, others 720x1280, leading to inconsistent UI element sizes. The minimum tappable area on Android is 48x48dp. On xhdpi, a button should be at least 96x96px; on xxhdpi, 144x144px.

Regardless of canvas size, design for the baseline, and developers need logical pixel dimensions. For clarity, use logical pixels in specs and discussions. Avoid saying, “The tab bar is 96 pixels high, designed for xhdpi.”

What about Web?

The absolute unit for mobile web is still “px” in code, but the principle is the same. Pixel density affects all apps, including browsers. Front-end tech can leverage this. One line of code lets the browser render the page using the app’s scaling method.

Use this test page http://greenzorro.github.io/demo/basic/响应式断点.html to check your device’s logical width.

The iPhone 5S (640x1136, scaling factor 2) is seen by the browser as 320x568 (baseline). Design and develop using logical pixels. You’ll need to prepare 2x images and scale them down to 1x in code for sharpness.

Practical Application

Here’s how to set up your canvas for iOS, Android, and Web. First, a Photoshop tip:

Think in logical pixels. In Photoshop, set “Units & Rulers” to “Points” (“pt”). Use this for iOS, Android, or Web. Remember platform-specific unit names (pt, dp).

Adjust scaling with DPI (actually PPI) in Image Size. Screen designs use 72 DPI; print uses 300. Why?

300 DPI relates to the human eye’s resolving power. More pixels per inch (DPI) means greater clarity. 300 DPI creates realism; 10 DPI would look like a mosaic.

72 DPI has historical roots. Early Macs had 72 DPI displays. Setting Photoshop to 72 DPI matched on-screen and print sizes. 72 DPI became a standard.

To adjust scaling: 72 DPI is 1x. 144 DPI (72 x 2) is a 2x scaling factor.

Canvas settings:

iPhone

iPhone sizes vary (in logical pixels). For one design covering all iPhones, choose a moderate size.

iPhone 5/5S (2x scaling, 320x568 logical pixels) is common. iPhone 6 (2x, 375x667) is gaining popularity.

Designing for either accommodates the 4S and doesn’t look too empty on the 6 Plus.

For the 6 Plus, 3x images are scaled from 2x, so ensure bitmaps stay sharp.

Android

Android fragmentation is manageable. Logical dimensions are more unified: 360x640. Choose a scaling factor. For xhdpi, DPI is 144 (72 x 2). For xxhdpi, it’s 216 (72 x 3).

Older 480px-width devices will show less content. Keep important content near the top/middle.

These devices are fading. Those in use are likely feature phones; user experience is less critical. It’s okay to disregard them.

Web

There’s no single standard. A common approach is designing for the iPhone 5 (2x, 320x568).

This is practical: 2x screens are common on iOS and Android, and it’s the smallest 2x size, leading to smaller images and faster loading. The downside: images might not be perfectly sharp on 3x devices.

For image quality over speed, design for the iPhone 6 Plus (3x, 414x736).

Conclusion

Mobile dimensions are more complex than PC, with scaling being key. But scaling brings different sizes to a common level, allowing one design to adapt. This makes it easier to understand.

移动端尺寸基础知识

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端复杂，关键就在倍率。但也正因为倍率的存在，把大大小小的屏幕拉回到同一水平线，得以保证一套设计适应各种屏幕。站在这条水平线的角度看，会发现它很好理解。

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) — Thu, 29 Jan 2015 10:04:00 +0000

[国外设计第74期]

统一的力量是强大的。作为人类，在日常活动中，我们潜意识期望某种协调和秩序。世上每个禁行标记看起来都很像，这是有原因的。我在澳大利亚时，学着在道路另一侧驾驶就已经很艰难了。想象一下，如果每个城市都有自己特定的禁行标志——紫色霓虹灯禁行标志——那会是什么情况！某种程度上来说，我们靠一致性来使自己感到平常和舒适。

我们会注意到相互迥异的事物，这可能让人沮丧和迷惑。但有时又会让人耳目一新、为之着迷。我爱星巴克，我会本能地购买咖啡，动作一气呵成。领取我的白色超大杯咖啡时，也没有丝毫畏缩。忽然，在十一月的某天，我手捧着一杯迷人的红色假日杯，上面有一些令人感到安逸的冬季图案。白色的杯子星巴克已经使用多年，没有什么打破过这一传统，但有时制造点混乱也不错。它能通过人们不熟悉的方式，吸引和迷住顾客。

所有这些，也发生在我们与科技的关系中。作为设计师，我们应该拥抱统一的力量。了解何时应该严格遵循风格指南，何时运用创意打破陈规，这是非常有益的。

我们会注意到相互迥异的事物，这可能让人沮丧和迷惑。但有时又会让人耳目一新、为之着迷。

构建一致性

设计是有难度的，尤其在项目的起步阶段。有这么多点子，要筛选如此多种字体组合、配色方案、图标和按钮样式、排版趋势、图片处理方式。理想情况下，所有这些元素相互配合，向你的用户传达出清晰的讯息。但是要把它们恰当地相互关联起来，其中困难重重。

虽然这很明显，我们还是迅速回顾一下统一的基本要点。要构建一致性，我们要牢记以下元素：

色彩：主色、辅助色、次要颜色，配色方案
字体：标题、正文、手书字体，还有它们之间的层次与位置
视觉元素：图标集、按钮、照片的处理、插画
排版：导航/菜单的位置、栅格结构，还有响应式变换
交互：表单元素、对话框、动画、过渡效果、菜单等

下面这些案例中，样式库和风格指南都执行得很到位：

在设计中构建统一，有助于强化品牌，并使品牌信息保持清晰。在颜色、照片、字体、插画、图标等元素间规定统一关系，决定了用户如何与品牌建立联系、感受如何，还有如何使用。

这些框架和模式一旦成熟，确立下来了，怀着一致性进行设计应该相当简单。这会取悦用户。统一的界面学习成本更低，因为用户可以将他们的理解转移至其他界面，让整个体验更加流畅。易于理解促成了信任和舒适，会使用户更加投入（并转化为顾客）。

在设计中构建统一，有助于强化品牌，并让品牌信息保持清晰。

别忽略了用户

在设计中也有反对统一的声音。其中之一，是很多设计师过于注重新设计与旧设计是否一致，而忽略了新设计是否符合目标用户当下的理解（Spool, 2005）。

每个按钮都要是蓝色的吗？每个页面都需要搜索框吗？各处的页尾都要保持一致吗？正文字号永远是14像素吗？这些取决于具体情况。用户所处的环境通常应该先于一致性。

我们创建的风格指南和样式库，并非不容置疑。除了统一外，还有界面设计的原则，有时候这些原则应该优先于一致性。底线是：我们应该努力为用户提供最好的体验，有时这就意味着，要为其他某方面牺牲一致性。

少关心“我的设计与其他地方是否统一？”，多关心“我的设计是否吻合我们之前提供的用户体验？”。统一的设计让用户自信——用户会期望它的表现与之前体验过的一致。

除了统一外，还有界面设计的原则，有时候这些原则应该优先于一致性。

打破规则

还有一股邪恶势力在与一致性抗争，这就是设计创新的自然动力。任何时候我们都希望表现出创造力。在确定的风格指南或样式结构框架内设计，真的很令人沮丧。别担心，我们可以利用这一点。

在使整个界面变得一板一眼之前，牢记矛盾性的利用价值。迥异的元素和表现会吸引注意力——你若想让特殊元素被注意到，这就很管用。使用一种新的颜色，或是特殊的布局，能让用户从潜意识中惊醒。我爱把这种策略称作矛盾。

迥异的元素，在销售或追求顾客转化方面极其有效。我们可以做些小动作来扰乱常规体验：

增加新的说明元素
改变排版和焦点区域
显著改变标题字号
引入新的照片处理方式
大胆配色

Classy的登录注册页面，排版和样式看上去和主页、探索和公司介绍页面完全不同。在这些页面上，我们可以推测出用户的意图，也不希望有不必要的元素混杂其中。如果为了与其他页面保持统一，在此完完整整加入顶部导航、搜索和页尾，那就太愚蠢了。

其他一些重大的迥异之处：

比如Campaign Monitor，只在Customers页面的焦点区域用了动画效果。

Mailchimp’s SNAP的app页面，交互和动画有别于其他页面。

最后的思考

优秀的设计师会明智地运用统一。大多时候，设计师必须努力实现一致和统一，来尽可能创造最易用的界面。但是，一致性原则不能盲从。熟练的设计师不仅学着遵循这些原则，还会彻底地检验它们，并且学会何时以有意义的、目的导向的方式打破原则。

良师益友Ralph Waldo Emerson说得很好——“头脑简单者才需要傻傻地保持统一。”

原文链接

单页网站设计指南

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创意，会趋于稳健，还是更加颠覆呢？

原文链接

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。

另：想找一个能写代码的产品经理？联系我吧。

原文链接

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文档，告诉我们你从中学到了什么。令人惊讶的是，梳理一部如此简明的文档，竟能学到这么多设计知识。

原文链接

稍等片刻:页面预加载动画

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的网站吧，它们普遍运用了这些时尚的小指示计。如今它们有着更新、更先进、更时尚且更精美的诠释。设计师开始像对待其他必备元素一样对待它，力求完美无瑕，吻合整体主题并且同时保有自己的风格，那么，我希望在不久的将来，每个动态的设计都具备独创且有趣的加载指示计。

原文链接

一张图告诉你 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手机，那是因为我信任苹果的设计师与工程师能够为我提供最佳的体验。我不需要定制化，我信任产品的体验，毕竟这些设计师都是专家。我知道这样的人不止我一个。这款手表尚不能完全定制，无法选择不同的造型——比如圆形或方形表盘——但它仍然走了一条与先前的苹果产品截然不同的路线。

###重点

作为设计师，摆在我们面前的是苹果式设计的多样化风格。它会改变我们为不同设备开发的方式，也会改变设备本身的设计如何激发我们前进。

你怎么看？你觉得苹果最近的发布会将给设计圈带来怎样的影响？

原文链接

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, 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, 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分钟的演说，可以在此观看（译者提醒：需翻墙）

如果动画使你无法自拔，我概不负责。

原文链接

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的汉堡图片

原文链接

为网站和应用创建设计指南与标准

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又是展开式菜单的一个变种设计，利用几乎占据满屏的梦幻般“拉窗帘”效果来显示菜单本身。

结论

每种方案都有自己的优势与劣势，这就是为什么每个项目都提倡它独有的导航类型，可以有效地应对任务，并对用户体验有帮助。

原文链接

The Psychology Behind an Icon

hi@victor42.work (Victor42) — Tue, 29 Apr 2014 14:17:00 +0000

I was designing a pull-up info panel – the kind you slide up for more details. How do you make it clear to the user? How do you show it’s draggable?

My first thought was this icon. Makes sense, right?

It works in the UI. But why this shape? It’s abstract. How does it convey “drag”? I’d never considered it before.

Then it hit me: it’s based on real-world objects. Think ridges or stripes – they increase friction, making things easier to grip and slide.

Mice, bottle caps, remote control backs… they all use it.

It clicked! Sometimes, you need the flat form, but the skeuomorphic spirit.

一个图标背后的心理暗示

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一块儿上线，暂且告一段落，希望以后自己获得更多提升后，再回头来将它做得更细致，或者设计出更棒的替代方案。

新的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, 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中奔跑的狐狸，是多么动态和有趣。

别怕在手绘稿上做实验。尝试一些意料之外的东西。尝试那些你确定无用却止不住思绪的疯狂创意。这是迎合每一个创意的时候。当然，你会驳回它们中的大部分，但你可能在这个过程中偶然发现一个非常棒的创意。一个糟糕的点子或许会将你引向好创意，甚至是伟大的创意。所以别着急，在最初的手绘阶段，尽情玩闹和实验。

【未完待续……】

原文链接

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, 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 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作品。你怎么想？我觉得它处理的非常好。不用嘲笑拟物元素的阴影效果，它们并没有影响整个设计，此处的设计相当聪明，节制地使用拟物化元素，字体的选择和色彩搭配铸就了这件作品。

又是一件迷人的登录界面。它内容比本文中很多设计都更丰富，不过配色选得很好，让界面漂亮地结合成一个整体。

原文链接

活力四射的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。这个界面采用了通用的详细页面布局，这是日历组件与生俱来的样式。巧克力色调与其余的颜色搭配良好，使界面看起来温和而文雅。

反思

这些我们习以为常的日历组件，常常受到表格结构的束缚，有时辅以水平线条，这样的布局似乎难以令我们感到惊奇。所幸，我们错了。现代设计师们，轻易就将这些平淡无奇的日期序列，转化为精致和时尚的作品。

原文链接

优秀的界面是隐形的

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中，放在那个位置或许就毫无意义。与其继续创造有瑕疵的界面，不如将界面元素放在最合适的位置，然后在整个产品中延续其一致性。

结论：鼓舞用户

最后，优秀的隐形设计还需要鼓舞用户。当界面脱离了用户的操作步骤，直接将他们引向最终目标，用户会集中精神在他们的目标上。

界面应当通过数据和内容的无缝切换，来鼓励用户与它建立良好的关系。用户有时喜欢探索一个界面巧妙的产品，甚至玩得很开心。但更多时候，对他们而言不存在的界面更有鼓舞作用

原文链接

清爽的极简商城设计指南

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：这家公司的促销手段很好，网站脱离了杂乱臃肿的感觉。带按钮的简单的照片告诉顾客还有其他选择

结论

这种趋势值得坚守

干净的设计总是好的。如果各公司真正将这种理念用于展示产品，那就更好了

有千万种理由说明商品放在简单的背景上效果好，它能给产品一个空间来为自己代言，并且让顾客在购买前对商品留下好印象

原文链接

iOS7设计指南:轻松上手

hi@victor42.work (Victor42) — Sun, 13 Oct 2013 02:11:00 +0000

[国外设计第14期]

苹果的新iOS我们已经上手好几周了，准备好为它而设计吗？

如果你已经有一个运行于此平台的APP，你可能打算为新iOS而设计，或者在旧版上做一些必要调整

不论哪种，你都希望为新界面而设计，确保你的APP与用户在苹果设备上的体验相吻合

那么如何做到这点？

扁平，更加扁平

苹果的iOS7秉承着扁平的设计理念，尽管它不是完全的扁平化

那么就秉着“较扁平”来规划设计你APP或移动站点

所有的那些曾经辉煌的拟物化风格图标与效果，一去不复返了。如今的潮流是单色块、多色文字和大量留白

苹果为iOS7制订的设计准则鼓励简洁设计与易用性。但是设计准则并没有着重介绍我们即将讨论的关于扁平化设计的规范。我们能在这些新设计的APP（包括苹果自身样式）中看出一些与扁平设计特征相违背的东西

比如说颜色，iOS7包含了相当一部分柔和色调和半透明效果。扁平设计通常使用明亮、高对比度的颜色

你所见到的按键和按钮也没有设计成扁平样式。例如键盘，每个字母都包含在一个带阴影效果的按钮中。这些微妙的效果是新界面的显著特征

重视字体

字体是iOS7设计的关键

大多操作都是点击文字，而非按钮（有时是图标）

苹果的默认字体是Helvetica Nenu，一种纤细简单的文字。但那不是你的唯一选择

iOS7中的字号稍微加大了，主要由于它的用途。而且文字间的层级至关重要。利用颜色和不同粗细，来保持文字布局和UI元素清晰易懂

可是从哪入手？

选好并获得字体的使用许可后，将苹果的默认字体规格说明作为设计准则着手开始

导航栏标题：Medium, 34像
按钮和表头：Light, 34像
表格标签：Regular, 28像
Tab页图标标签：Regular, 20像素

无边界

关于iOS7中文字作为按钮，我们已经讨论了不少。不过还能再深入。多数界面设计是无边界的

看看日历——日期没有网格线。看看Safari中的可点击区域——没有明确的按钮。再看看时钟和内置天气app——网格线也消失了

取而代之的是留白。但不要误解。网格也仍然存在（并且很明确），只是划分“格子”的分隔线被去除了

像这样去掉线条，创造了更开阔的空间。极简风格和额外的留白能让用户看见并感觉到按钮和网格的存在，却不会让他们拘泥于其中

所以如果用到方块、按钮、边框，并决定何时使用它们——举棋不定时，去掉就好

考虑使用视差效果

iOS7设计中的一项重要的新特征就是动画。这个系统中使用到的动画效果，比苹果以往发布的任何系统都来得复杂

好好利用它

考虑新颖且与众不同的方式来让你APP中的物体移动，并与其他物体互动。视觉差滚动（垂直方向甚至水平方向）是一个你以前从未使用过的方案

记住，苹果这次发布所兜售的理念，大多都关乎用户体验。牢记它并将其贯穿整个项目

分层创造层次感

苹果给设计师们的最后一项工具，是一种在iOS7中创建和操纵层次感的方式。早期版本中，层次感通过拟物化效果来实现。iOS7中，层次感是分层的产物

以主屏幕作为例子。打开一个文件夹。它停留在屏幕中央，并没有占据全部空间

这层也包含了半透明效果。从你设备的底部滑出菜单。你的视线能够穿透它。你屏幕上的颜色和主风格就在那里，只不过带上了半透明的模糊效果（除非你在设置中选择了“增加对比度”选项）。通知中心、Siri、甚至主界面上的通话按钮处都一样

想想如何将这些效果用在你的APP设计中。对你选择的配色方案和基调有影响吗？制作按钮、图标和提示时它能起到作用吗？

如何创造出适当的模糊效果？在Adobe Photoshop中，10像素的高斯模糊大致可行

精心处理你的图标

设计APP图标和APP本身一样重要。它同样需要遵循苹果的iOS7设计准则

外形都很相似，但它有些新的特征，包括一套为图标本身的设计制订的特殊栅格系统

Pixelresort的Michael Flarup制作了一个非常棒的图标模板，迅速创建苹果标准图标变得信手拈来

谨记

为iOS7而设计时（全新设计或重新设计），苹果也有三条准则需要牢记

新APP需要遵循Appstore的这些规则

记得为现有APP更新图标以匹配新界面。规格：iPhone版120×120像素，iPad版152像
启动图要包含状态栏区
所有设计都要支持视网膜屏和iPhone5

结论

现在我们已经看过了为iOS7设计所需要准备的东西，可以着手开始了

如果你需要更多设计准则的说明，苹果为设计师和开发者提供了过渡指南和文档，来解释他们团队的设计理念

原文链接

光彩夺目的柔滑渐变APP界面

hi@victor42.work (Victor42) — Sun, 06 Oct 2013 16:25:34 +0000

[国外设计第13期]

iOS7让我们重新认识了渐变效果，老实说，渐变是设计师手法中最简单的装饰之一。它有许多变化，既可以让设计出彩，反过来也可以毁了设计，关键就取决于色彩的选用和整体风格。除此之外，和大多装饰手段一样，它也会随着当前潮流趋势变化

近日的主流，是平滑温和的霓虹色渐变，配合近乎发光的浅色文字和简单易懂的字体，并通常伴随着低透明度的半透明层。如此细腻的结合很自然地能给任何UI增加一分精致和微妙

我们这里不仅仅讨论这种渐变样式，它毫无疑问非常流行，我们也讨论其他基础且广为流传的渐变实现方法。其中包含的方法更多被用作一种差异化的手段，它的主要目标是在某种特定视觉风格中承载内容

首先，我们来欣赏一些超凡脱俗、基于当红流行渐变风格的APP界面

移动APP中的渐变效果

我们开篇选用Michael Shanks华丽柔和、基于渐变的iOS7锁屏界面设计。极简的屏幕元素只包含必须的信息，通过优雅的浅色文字实现，精妙的阴影和半透明条作为强调

Tommy Borgen的Sense。设计师也采用了极简的UI设计。界面看起来简单却相当精美。中央轻微模糊的圆形轮廓漂亮地和其中微妙的细字体组合，与平滑的背景也搭配良好

Ross Popoff-Walker的个人站点Idea v1.1。设计师借鉴了破晓天空的渐变色，用非凡的泼溅手法来展现。背景为白色的图形和文字提供了坚实的底色，很好地突出强调了它们。大量的留白和浅灰纯色页头页尾（主要包含导航项）漂亮地与主题结合

Yasser Achachi的界面设计看起来绝对惊艳且引人注目。奇妙的万花筒色用在背景上，配合浅色文字、像素级优化的小图标、半透明条和彩色色块，巧妙地打造了一款相当激动人心的界面

Kyung Min Kim的Coloring Clock依靠炽热的火焰色渐变背景，结合粗笔划的文字组合和大量留白。精美天然的配色方案很自然地点缀了整个界面。你也可以定制自己喜欢的渐变主题，来给界面赋予一些个人色彩

chirag dave的iPhone App Instasave中，界面切换处用了一张精彩的放射状渐变图片，来作为侧滑菜单的固定背景。设计师用背景图中相对较浅的区域来强调导航，以精美小号字和纤细字体来表现

Vladimir的Beam Day概念时钟设计。其中背景旨在清晰凸显少数几个图形构成元素。轮廓极细的圆环和纤细字体相互完美配合

Alex Patrascu的Aero Weather设计。其中干净明亮的渐变，很自然地将视线吸引至包含大量信息的天气预报上。浅色的非正式字体与背景完美结合，并使数据清晰易读

Gaétan Pautler的iOS 7 快捷菜单设计。尽管设计师用的事实上不是传统渐变，因为那是一张有着颜色过渡的高度模糊的背景图，即便如此，快捷菜单的背景有着难以察觉的垂直渐变，从蓝色渐变至淡粉的奶油色

渐变效果作为强化的手段

作品集的这部分，是致力于将渐变效果用作强化手段的APP界面

Keyuri Bosmia的IndiaNIC App有着令人喜爱的彩虹格调。设计师巧妙地把菜单上色成鲜艳的色调来将每个菜单项清晰区分开。整体来看，这个概念设计看上去愉快、充满活力

Andrus Valulis的SunFun App设计。相反地，这件UI作品基于更加平滑自然的渐变效果。鉴于这个app致力于展示日出日落相关数据，设计师使用暖色来支撑整个主题风格就不奇怪了

Frantisek Krivada的扁平样式色轮设计。不同于之前的案例，这件UI作品采用了最终过渡至中性白的冷色调。所以这个界面看起来更加犀利、有力和严肃。带曲线的功能圆环富有活力，增加了一分圆滑

Franz (Taptanium)的Haze Rays界面主题又是一件强烈依赖生脆清冷配色方案的概念设计。放射状渐变很自然地将用户注意力锁定在屏幕中央，无疑使关键数据生动鲜活起来

Carrie Philips的Waygo App V2设计。设计师使用了清新的橙色明暗变化，来构成温暖鲜活的渐变主题，提亮了菜单部分。颜色的选用与主色调完美搭配，并且很好地强化了主题风格

Rustem Ramadanov的Bird app GIF中，组织良好、清晰易读的磁贴布局，起了重要作用，它们通过柔滑的颜色差异来精确指向各分类。设计师使用了久经考验的端庄蓝白色组合

Eddie Lobanovskiy的Brisk设计。界面中展示了一套渐变色大融合，主要由多种明暗变化的热带橙过渡至极地蓝。其中背景色扮演着更加功能性的角色，而非纯粹装饰，每种颜色都为温度计增加了图形化的表现

Nick Murph的Goo App基于绝妙的柔和配色。柔和渐变漂亮地与内容融合，给界面营造一种文雅怡人的氛围

Maria Bratchikova的"Giftboard"设计。设计师通过多种色调的红色巧妙地区分类别，为界面营造一种亲切、略微伤感的格调。此处小小的渐变效果，在强调和融合类别上起到了一定作用

Amine Mounazil的天气app界面又是一件利用色彩的力量来视觉化数据展示的作品。照惯例，温度越高，颜色越深、越暖、越饱和

反思

设计师们精明地利用各种渐变效果，从无间断的柔滑光亮背景，到割裂成一条条相互区别的奔放背景。他们不仅将这种活力十足的效果用于纯装饰作用，也作为一种强调既有主题风格的手段

原文链接

网页设计中的半透明运用准则

hi@victor42.work (Victor42) — Sun, 15 Sep 2013 00:32:56 +0000

[国外设计第10期]

使用半透明元素来设计网页很美观也很需要技巧。半透明效果是指色块、文字或图片被“稀释”或者冲淡，使得颜色减淡，并且透出后方内容

执行到位的话，这种效果会非常震撼，能划出一块绝佳的文字展示区域，或者作为吸引注意力至图像某部分的手段

但是使用半透明时，设计师必须小心谨慎。这种效果很难处理得当，因为事关可读性。透明度使用错误的半透明块和文字也，会能散注意力，并且破坏整体设计效果

接下来看一套行为准则，附带一些半透明效果在网站上的优秀执行案例

通过半透明来形成对比

选用半透明设计技巧的最大好处，是创造对比。这种效果可以让设计师通过色块、图片上的大字体或多种颜色层次来创造视觉焦点

半透明也可以在背景图不能很好展现上方文字时，将文字分离开来

使用半透明设计时尤其需要考虑对比。只有图片（或背景）和文字都可读时，半透明效果才是有意义的。当你考虑使用半透明效果时，问问自己：这是否有助于用户对图文的理解？

避免遮挡图片的重要部分

半透明效果不应该遮挡其下方背景或图片的重要部分。决定半透明层位置的时候，要清楚你“牺牲”了什么内容

用不同的透明度

没有完美的透明度值。对于某些项目，80%透明度比较理想；对于其他的也许15%才是最佳选择。对每个项目采用不同的透明度

不要觉得半透明就能让文字更易读

使用半透明色块来衬托文字并不意味着文字会自动变得易读。要考虑对比——半透明色块与文字、背景图与半透明色块两方面都要考虑

半透明效果用在图片、色块或文字上时，考虑文字的可读性至关重要。切记，如果设计效果致使文字难以辨认，你的信息将无从传达

在细节处使用半透明效果

半透明并非只适用于网站的主体部分。这种效果在细节处也能大放异彩

可以考虑用半透明来展示导航工具栏，或者作为按钮和可点击元素的鼠标悬停效果。多种透明度不要使用过度。选定一种元素和透明度样式，然后使它贯穿整个网站的设计

不要在对比强烈的图片上放置半透明元素

处于可读性考虑，最好避免在已经包含强烈对比的元素上使用半透明效果——比如黑白对比或色盘上的互补色

因为要在背景的各个部分都达到正确的效果很难，想在这类元素上使用半透明效果，除非强烈对比在你的设计中真的只起到负面作用。考虑用浅色块代替吧

将半透明作为一种艺术手法

半透明不只是次要效果。可以考虑用这个效果为你的网站设计主画面

大尺寸半透明创造的对比、强调和视觉吸引令人震撼

不要将半透明作为装饰物使用

半透明效果并非为了打破设计中的单调。把这种效果作为装饰物使用，注定会导致糟糕的设计

半透明效果的使用应该事先考虑和规划好。半透明不是加粗这类简单效果，处理不当看起来会很草率且不专业

在背景中使用半透明

不只是设计前景元素时可用半透明效果，它也能用在背景图上。有些非常棒的半透明元素精细微妙

还有些半透明效果夹在图像层之间。例如Tony Chester的网站，就用了绝妙的半透明分层技巧打造了一件多维度的设计

不要同时运用过多半透明效果

在每个项目中有节制地使用不同类型的半透明效果。透明度要能制造反差对比，产生视觉吸引力。这样使用过多的差异化效果，会分散用户注意力

在轮播图片上使用半透明元素

半透明的使用不限于单页网站或静止网站。它在变化的图片和背景上也起作用。两种方式都可以用上半透明效果

在轮播图片上使用半透明，是该效果最棘手的用法之一。却也最令人印象深刻。慎重考虑多张背景图的情况。选用颜色和对比搭配相近的图片，这样只需一种半透明效果即可应对后方移动变换的背景

格外注意半透明效果与每张图的匹配程度，才能保证每张图的整体性，并创作出易辨认的照片或其他背景与文字，保持视觉统一

小结

尝试半透明效果，是拓展设计技巧的一个绝妙方法。像很多其他效果一样，要有节制地使用这个技巧，并且在多种环境下实验这种设计，来确保它按你的意图运作和展现

半透明设计的最大挑战，是在轮播图片上使用时确保文字清晰可读，和避免半透明元素错误地遮挡下方图片

尝试多种透明度和使用方式——用于图片、背景、遮罩效果——来决定那种效果最适合某个项目

原文链接

iPhone6的创意概念设计

hi@victor42.work (Victor42) — Sun, 08 Sep 2013 21:49:36 +0000

[国外设计第9期]

随着几个月前iOS7的亮相和iMac的全新产品设计问世，我们可以瞥见今年秋季苹果新产品线的冰山一角。尽管很多设计师对于新iOS设计表示愤怒，实际上我也是，有些设计师已经开始拥抱它并将它推向一个新的高度。我的意思是，他们已经接受了新的iOS设计风格并且进行了改进。不管怎么说，这还不是所有，他们也创造了iPhone 6的概念设计，让整个概念设计走得更远

我们都焦急期待着苹果将在9月发布会上展示什么，就像一直以来，设计师们都会创造他们期望看到的产品原型。这些iPhone 6概念是其中一部分。不管怎么说，这些特别的设计都值得一谈

简而言之，我觉得它们都是漂亮的界面设计，囊括了新的苹果设计风格来打造惊人的外观。它们有着欢乐且丰富的配色、纤细的字体和新iPhone界面下有趣的使用体验

新iPhone

那么新iPhone的概念设计有什么不同？嗯……最重要的一点，是你会注意到它看起来很像iPhone 5但是屏幕边缘包裹手机。个人感觉这看起来相当优雅，但从可用性角度来看，在实际设备上可能没那么好用，不过那只是我自己的用户体验主张

接下来这些例子中可以看出，一些设计师把这部分空间用作社交媒体的小按钮，其他人就只是把漂亮的界面背景延伸到上面。这种边缘延伸相当唯美，虽然这个细长尴尬的空间看起来难以加入更多实用功能

案例集锦

第一个界面非常高雅，这得益于它温暖的红色调配色。上层界面的背景图非常有趣，充分利用了不同色彩间的戏剧性效果。视线事实上直接被吸引过去了。总体上这个界面没有太多内容，因为它除了一个简单的三角形图标、一行标题和一个确认按钮之外就没什么了

这个Twitter界面看起来是多么不同！不过它确实遵从了iOS 7的设计风格。因为虽然可以看出Twitter app的功能还是一样，新的皮肤让它看起来像是苹果设计的原生app。但它不是个糟糕的设计，我喜欢那些小说明箭头，附加了一种强烈的设计感，你觉得呢？

这是新iOS7锁屏界面在iPhone 6概念版中的精彩演绎。尽管这回界面与新iOS的设计非常接近，让人看到了华丽纤细的字体。但这个星空背景和以此著称的苹果设计主题实在太贴切了

这是我个人最喜欢的一个，因为这彩色的背景。它简直可以用辉煌灿烂形容。这也是个锁屏界面，可以看到当前天气。事实上图标设计和字体极其相称。但鲜艳的背景色才是引人注目的焦点。这些颜色令人欲罢不能

我不得不说，我欣赏这个消息界面设计，因为它是那么直白切题，真了不起。虽然和iOS7中展现的有少许不同，它仍然遵从了新的扁平iOS7设计。这件作品和影响了新iOS设计风格的扁平设计大潮结合地恰到好处

这有另一款极简却美妙的锁屏界面。当然，又是一张令我们神魂颠倒的精彩背景图。但如果你整个看下来，你会发现它巨大的字体，还有新的iPhone解锁方式——上滑，而非右滑。这个创意来自通知中心的下滑动作，解锁功能于是颠倒过来

与这系列中其他大部分锁屏界面不同，这款用了扁平的背景，非常棒。这件作品实际上是前一个的回应，能看到同样华丽的上滑解锁功能。不管怎么说，我都觉得这件设计非常赞，因为蓝色调显得如此高贵，也因为它包含了iOS7亮相以来在Dribbble上盛行的长阴影设计趋势。这个结合干净利索

又是长阴影和天气。这个app扁平地很迷人。没有iOS7典型的纤细字体和图标，这件设计使用细温度字体，其他所有地方却都用了厚实的图标。这个对比非常有趣，因为这两者间的平衡恰到好处。实际上这个天气app设计还有很多内容，但它执行良好，一点也不显得杂乱

Square的产品设计和界面设计都相当漂亮。这件Square App的概念设计iOS7风格执行地很到位。这其实就是个想象中的计算器应用，但它看起来很棒。你觉得吗？它看起来集明亮、现代、简洁和优雅于一身

这是个相当优雅的旅行app概念设计，可以让你分享旅行地点给朋友。我喜欢这件设计的地方，是在大部分iOS7设计都使用亮色时，它大胆地采用了深色配色，令人耳目一新。木炭灰与红色的强烈对比让人爱不释手。而且白色的小小高亮元素简直是神来之笔

最后一件作品展示了讨喜的模糊背景——沿袭iOS7的作风，自从它拥抱模糊背景的界面设计之后。它主体部分有一堆看似单一的白色图表，用了不同的透明度来展现。它们灰白混搭，看上去组织良好，一点也不显得杂乱

原文链接

扁平设计之争

hi@victor42.work (Victor42) — Sat, 31 Aug 2013 23:23:33 +0000

[国外设计第8期]

不可否认，扁平设计目前是设计界的宠儿

它无处不在。不仅仅是扁平设计，现在也包括类扁平设计

关于这种风格的有效性与用途的争论如火如荼。这种极度时髦的设计风格在激发着每个人的观念。让我们回退一步，看看辩题双方和扁平设计的利弊

支持者：扁平设计很时髦

扁平设计非常时髦，但是它会持续多久？

如果你是追赶潮流的设计师，却没尝试过扁平设计，现在正是时候搭上扁平设计这班车。采用这种风格的项目（并且用得恰到好处），在各种博客中随处可见，包括我们这个，有助于提升你的设计

而且，跟随潮流而设计，乐趣无穷

反对者：它只是种潮流

时髦的另一面，是你永远不知道它能流行多久

我们已经能看到，趋势正在从纯扁平设计向类扁平设计或长影扁平设计转变

如果你频繁改版你的网站或APP，时尚的设计也许适合你。如果你要一个网站经久不衰，请考虑不那么“潮”的东西

支持者：简单的移动界面

简洁的移动端设计，是扁平设计应用中的绝佳例子

一些令人印象深刻的扁平界面设计被应用在功能简单的APP上。巨大的按钮在移动设备上容易点击，不需要再放大来寻找链接

反对者：可用性值得商榷

当涉及到某些复杂的用户体验时，扁平设计就会变得单调

并非所有用户都喜欢这种界面风格，他们有时会不知道该点击哪里

Norman Nielsen Group的一项分析指出，扁平设计风格会干扰可用性，因为用户有时不知道什么是可点击的。而且，扁平设计的项目总倾向于更低的“信息密度”来保持简洁

支持者：明亮的用色可以烘托氛围

也许只是我个人感觉，但扁平设计看起来让人愉快。所有这些明亮鲜艳的颜色都令人爱不释手，创造了一种积极、迷人的氛围

Flat UI Colors，一个展示和帮助设计师使用扁平配色的网站，是个非常好的氛围提升工具

看看这些色调，它们都温暖而友好。即使深色也是基于暖色设计

由于扁平设计通常包含很多颜色，引发更多积极的联想。谁会说彩虹是阴郁的呢？

反对者：配色困难

在一个项目中你用的颜色越多，就越难将它们恰当地搭配起来

创造一个协调的配色方案本身就是一个挑战，如果你再加4、5种甚至更多颜色，它会变得更加棘手。成功运用扁平配色的设计师，都倾向于坚持统一饱和度和亮度，来设计一致的外观，使得颜色的选择有迹可循

支持者：聚焦精美的字体

扁平设计的一个优势，是漂亮字体的聚焦作用

除去了装饰，字体确实在扁平设计项目中蓬勃发展。从精美装饰性字体，到简洁的非衬线字体，漂亮的字体是优秀的扁平设计的关键组成之一

在我个人看来，投影效果有点糟蹋字体。有趣的字体与大胆的配色之间形成的强烈对比，令人印象深刻、精神振奋

反对者：糟糕的字体变得更明显

正因为扁平设计有助于聚焦优秀的字体，它也能放大糟糕的字体。（看看苹果预发布iOS7时遭受的所有诟病，比如那极细的主字体，现在这个设计决策已经被修正了）

扁平设计冒失起来简直无法饶恕。选用什么都会有某种程度的戏剧性，难以掩盖字体的不完美

如果你对于字体的组合和选择不在行，那么扁平设计可能不是你的最佳选择

支持者：视觉表达简洁鲜明

扁平设计的本质是简洁和鲜明。这是使它美观的重要特征之一

这种风格使用很多高对比特征，包括颜色、字体，和大胆的总体设计，保持段落简洁易读。按钮和其他UI元素通常设计成基本的几何图形，尽管边角也会用到圆形

反对者：它会看起来太简陋

取决于使用者的不同，扁平设计也被部分人评价为“过于简陋”

用扁平设计传达复杂的视觉信息会很困难

扁平设计的另一项反对声音，是用户界面工具太朴素。拟物化设计的支持者表示，增加一些具象的装饰可以让工具更易用。坦白说，这得看内容

在极度简洁的界面设计中，视觉层级也是一项需要重点考虑的内容。什么是最重要的？你如何通过视觉强调它？

支持者：扁平设计摒弃令人厌烦的装饰

没有什么比一眼就看出设计者对项目充满厌倦更糟的了

这些本末倒置的花哨装饰包含了太多阴影效果、古怪的动画，或者根本就是显得多余的随机效果

正因为扁平设计简洁的本质，这些约束可以促使设计者忠于这种风格的本质完成项目

反对者：有些装饰还是不错的

并非所有装饰都不好

在设计纯扁平项目的时候，它确实极大地限制了能够为你所用的技巧

结论

没有一种设计风格是完美的。为你的每个项目量身定制地设计，才能使得外观和所要传达信息的感觉风格相吻合

设计不仅仅是某样东西看起来如何。它也关乎易用性和功能。优秀的设计总是易用的

原文链接

打造精彩的单页网站

hi@victor42.work (Victor42) — Sun, 25 Aug 2013 01:25:52 +0000

[国外设计第7期]

不是每个网站都要很复杂或包含很多页内容信息

有时候一个页面就足够了

不过你打算用一个页面来创建网站，并不意味着它会很轻松

开发一个单页网站布局所需要的思考与规划，不比某些更加复杂的网站少。它需要将所有相同的基础元素整合成一个更大的站点，还要让人看起来印象深刻，你得照着预期进行并且怀揣明确的目标

本文中我们来看一些精彩的单页网站设计，它远比你想象要流行。在你欣赏这些网站的外观的同时，不妨点击访问，体验一下网站中这些非常棒的用户界面细节

什么是单页设计？

单页网站建立在单个窗口中

单页网站的概念更多基于滚动而非点击（尽管点击也没有被禁止）来浏览和通读网站与它的内容

一个单页网站可以简单到像一页纸，恰好吻合浏览器窗口且不需要滚动。但它并非总是如此。单页网站可以滚动（当然也别把网页设计得太长，这非常重要，用户会受不了）

简单来说，单页网站是不包含域名内的链接并且所有内容都在主界面的网站

为什么选择单页设计？

单页网站设计有很多注意事项，它并不适合每个项目

它流行的使用场合：上线前的APP预告、带有email注册表单的网站、作品集展示工具、引导用户跳转的网站、简单展示产品和信息的公司网站

单页网站通常设计得很赞，因为它们只有一次机会——第一印象——来从杂乱的视觉景观中吸引用户注意力

这类页面通常都适用于不具备丰富内容的网站：售卖单个产品的网站，用来推销另一个网站、APP或商品的网站，小型作品集或简单的信息

既然这类网页的设计通常都高度视觉化，文字就得尽可能保持精简。单页网站同时也需要一个清晰易懂的用户界面，用户才能准确知道他们可以用这个网站来做什么

怀揣目标

开始设计单页网站时要有清晰的目标。你想让用户在你的网站上做什么？他们浏览时候应该接收到什么信息？

比如说，如果你在预告你一个APP，你可能想要用户提供email地址，这样你可以在发布时告知他们。如果你在出售一套UI工具，你的目标就是将访问量转化为销量

其他行为可能包括：填写表单、观看视频、转到其他站点，或以上都有

在开始设计之前，了解你想要用户做什么，并且自始至终反复强调

通往成功的设计秘诀

既然你已经了解自己想让网站干什么，遵从下面的几条秘诀，然后踏上发布之路吧

创造第一印象。你只有唯一的机会来增加新用户。你的网站得通过视觉吸引来迅速告诉用户他们为何来这

保持专注。记住你的目标，去除所有碍事的小花样、设计元素和文案

使用鲜明的视觉风格。无论纯色、图片或漂亮的照片，选择一种很棒的视觉表现，并且大张旗鼓地使用它

开发一个清晰的导航。尽管你可能会怀疑你需要导航干什么——它毕竟只是个单页网站——任何一个包含许多目录、表单和各种形式链接的网站都需要清晰的导航。用来告诉用户不同按钮的用途（尤其他打算下载或购买你的产品）。即便是拥有少量内容的网站，也需要包含一个清晰易懂的指引来发挥作用

精心组织。你绝对没法在单页设计的版面（或空间）中说清楚你的全部所想。信守什么是重要的，并将所有东西根据重要性层级排个序。撰写简单清晰的文案，不断编辑直到措辞简洁明了、切中要害

设计时玩得开心！

酷炫的花样和效果

有数不清的酷炫花样和选项可以帮助你充分利用单页设计。有些甚至是从移动端概念中“偷窃”而来，那是个单页设计随处可见的领域

视觉差滚动：滚动特效是单页设计中最盛行“花招”中的一个。轻弹鼠标，用户无需点击或从欢迎页跳转就能来到一个新页面。这种效果可以激励用户继续滚动、阅读、与网站互动，看看接下来会出现什么（你可以在之前的文章中学习更多关于视觉差滚动的知识）

移动APP欢迎页：创建一个特别的欢迎页面，在用户通过移动设备和平板电脑访问你网站的时候，鼓励他们下载APP。这个“广告页面”可以帮助你将网站用户转化为正式的APP用户

隐藏式导航：鼠标接近时会出现和隐藏的菜单可以在整个设计中节省空间，并且始终在熟悉的位置提供导航（通常是页面顶部）。你也可以试试其他导航特效，比如Jamie Oliver’s Fifteen页面中那样，导航刚开始在屏幕中央，随着鼠标向下滚动移至顶端（并且固定位置）

动画：如果视觉差滚动不是你的菜，考虑一下用动画或视频背景来增加视觉吸引力。移动物体会诱使用户逗留，看看接下来发生什么

结论

和其他类型的设计“花招”或趋势相比，单页网站只有在你内容专为它定制时才有效

这种风格最适合内容有限且视觉鲜明的网站

原文链接

选择你自己的配色方案

hi@victor42.work (Victor42) — Sun, 11 Aug 2013 00:19:18 +0000

[国外设计第5期]

目前为止，你应该已经很熟悉颜色是什么、每种颜色代表什么，对于不同配色方案也有很好的理解。但是不管怎样，你知道这些也没什么作用，假如你不知从何下手或如何运用

色彩对你项目的影响

颜色是种看起来相当简单，却非常难处理好的东西。而且，由于它是任何设计中极度视觉化、焦点化的部分（它确实是），当它没处理好时会如此引人注意。如果你的设计中这么重要的部分给人感觉不好，或者没有很好的表现你的公司、服务或品牌，那么它就能让停留访问的用户消失不见

正因为如此，选择配色方案时，你需要非常清楚颜色在你设计中可以造成的影响——好的与坏的

摒弃这些默认样式（例如互补色），使用你自己的配色方案，绝对是件好事，但是当你着手开始创建自己的配色方案时，可能你最好还是沿袭主流的配色方案。这样一来，走错路创造出糟糕的配色方案就不容易了，虽然也难以杜绝

选择适当的配色方案

首先，我们来看看如何为你的项目选择一个适当的配色方案

这里你需要全局考虑，什么配色方案适合你的品牌、公司或者行业。有篇文章fantastic infographic over at Column Five Media介绍了世界百强品牌的颜色使用

这个非常有趣，不仅让我们一睹世界顶尖品牌与企业的用色倾向，还让我们洞悉具体行业中，哪些颜色效果更好，或使用更广泛

从信息图表中可以看出，所有能为你所用的主色都适用于各种不同行业，这些可能适用的颜色都能解读出常用的含义，之前有文章讨论过

我所喜爱的方式，是为项目创建思维导图来探索我能想到的各种不同色调和创意，并且上网寻找这类符合品牌战略的信息。然后，把这些思维导图的创意转换为颜色的含义来确定哪个最符合，这可以帮助你找到哪种配色最适合这个项目或品牌

我该用多少种颜色

有时候，这个问题真的只是个人喜好问题。不管怎样，这个问题在Column Five Media的信息图表中不值一提，因为百强品牌中，只有5%选择在配色方案中使用两种以上的颜色

注：近年来，印刷品的预算比在线曝光更重要，品牌印刷品中使用的颜色数量确实值得慎重考虑

即便如此，用多少种颜色随你感觉就好，在一些情况下，你可以用颜色来在网页的不同区块中制造差异化。在这种情况下，你可能会有4、5种不同颜色加入到配色方案中，使网页每部分协调

尽管最终选择权在你，我还是会建议你在主要配色方案中使用至少两到三种颜色，这其中不包含文字或背景的明暗中性色。比起用单色配上渐变和阴影，使用两到三种颜色的配色方案，能够给你机会尝试在各个区块间创造更丰富的对比

从照片中选择配色方案

你是否观察过一张照片，并思考它的颜色表现多么奇妙和惊人？有时候，这些漂亮颜色可以被转换成可用的配色方案，并为你所用。从照片中提取一套非常棒的配色方案，只需要稍加训练和充足的耐心，如果你和我一样是个完美主义者，那么你会花相当一段时间微调颜色，直到它们刚刚好为止

选择你的照片

选择一张好照片上手的关键，是多样化而且最好能让你震撼。无论你的图片比较复古或单色系（即整张图片都贯穿着相近的色调和色彩），或者更加鲜活色彩丰富，你总能在其中某处找到有用的配色方案

一旦你有了一张或几张照片，假如你立马就想试着创造几种配色方案，那么用你最喜欢的图像处理软件打开它，然后开始疯狂吧。我在Photoshop中有个自己爱用的模板（包含几个小矩形）作为切入点，来放置我所选择颜色

从照片中选取配色方案时，我试着只坚持一种（比如单色或互补色），然后在照片中尝试选取相配的颜色。所以举个例子，我会观察照片并试着发现什么颜色对我而言最突出，这不是指它们要明亮鲜艳，它们可能很柔和或只占照片的一小部分，但我会试着选出成就这张照片的那些少数色彩

在这张照片中，由于这些相近的紫色调，我们能够很容易选出一套单色系配色方案

这张照片非常饱满，因此我们可以花些时间创造一个更加个性化的配色方案，它受制于一些规则，搭配起来却也同样合适

一旦我开始深入观察照片，我就对我想要的风格有更深的了解，我会继续胡乱尝试（就用吸管工具）来看看什么颜色搭配最好。比如只选择一种颜色作为主体，再选两种其他颜色来作为陪衬

然后，开始将这些颜色放入模版，将它们来回移动，直到你对颜色的位置与层级满意为止。我通常也会试着在我所选的主色旁边各放置一个暗色（接近或几乎纯黑）和亮色（接近白色）。这可以帮助页面达到色彩与结构上的平衡，也可以在配色方案中没有适合的文字颜色时提供一种可能

老实说，这里的主要目的就是随手试试，有时候你得到的颜色并不合适，也有时候你在照片中根本找不到一个得体的配色方案，但是要确保你尝试过各种颜色，直到你为自己的设计找到了一套感觉更加统一协调的配色方案

iPhone App Adobe Kuler

如果从照片中创建自己的配色方案令你纠结不已，Adobe最近也发布一款iPhone app Adobe Kuler，带来了一种非常便捷的从照片中创建配色方案的方法。你可以切换到相机模式从现有照片中选择一张，或者直接在所在地拍点什么

Adobe Kuler app的妙处，是它提供了一种极为创新的颜色选择方式。如果你用Kuler app的“现场”视图直接拍照，你就会看见照片上四处移动的小圆圈。眼前所发生的，是这个app在不断寻找和选出照片中它认为最有价值的配色，就在它停下的位置，然后帮你将它们组合成一个小配色板

如果你对于从照片中选取自己的配色方案没有信心，那么使用Kuler app是个好办法，可以帮助你理解什么造就了照片中的优秀配色。随意拍下大量照片（单调、朴素色调和丰富、明亮鲜艳色调都有），然后用Kuler app认真分析为什么这些配色方案起作用，为什么这个app选择了它们

然后，你可以适时开始着手从照片中创建自己的配色方案了，并对于自己的选择更加自信

原文链接

现代极简风格:纯文字+背景图式欢迎页面

hi@victor42.work (Victor42) — Sun, 28 Jul 2013 00:47:57 +0000

[国外设计第3期]

文字与背景图片是每个现代网站都具有的重要元素。这两项首先映入用户眼帘，使他们熟悉网站标志、简介和导航。搭配合适的照片或图画，创造所需氛围。文字与图片在网站的视觉和内容方面同时发挥作用，它们的组合极为有效，甚至只用这两种元素就足以建立一个与众不同魅力十足的欢迎页。它们在一起可以打破任何限制，巧妙地相互结合与补充，脑海中的任何想法，都可以通过它们实现

今天我考虑尝试一种更为极简主义的方式，让页面除了这两项基本元素之外再别无他物。我深入了解收集了一些网站案例，它们的首页都只包含背景图和精巧的文字

极简风格欢迎页：文字与图片

少年派的奇幻漂流冒险氛围十足。欢迎页面华丽的朦胧风格，和粗边框中的朴素白色文字都令人着迷

Levante用优雅的女性化字体来装饰轮播大图。顶部细长的深色导航条，用整齐的浅色字与主页相互映衬

蒙着白色轻纱的城市风景图，是Allamar Design的重要元素，让网站看起来干净整洁。深色的圆形LOGO和标题优雅结合，立刻吸引观众的注意力，尽管相对整个页面它其实很小

Clouds over Cuba与上个例子刚好形成鲜明对比。这个网站也用深色的城镇风景图作为背景，白色细字体标语看起来非常显眼

Beta Takaki的动态效果让人印象深刻，几张办公场所的特写交替切换，使得前景元素跃然屏幕上（这条的意思纠结了好久，打开网站一看才明白，原来背景图是会动的，用了近年流行的滚动视差效果）

EDIT OpenDay 2013采用了极度锐利的字体和平面构成风格，简单原始的风格吸引用户

Iuqo用的不单单是背景图片，而是一段让用户在云中飞行的迷人视频。紧凑排布的扁长标题、轮廓式LOGO和底部两个菜单项，使主页看起来极为通透

KIN HR展现了一副团队工作过程中的场景，配上相当大的标题，厚实的标准字体使页面看起来非常棒

柔和、光线明亮的背景照片，还有标题上那醒目的半透明圆圈，造就了Borgo 27温暖的氛围

Deleting Borders的显著特征，是无出其右的纤细标语，占据着整个设计的中央部分。暗淡、带点杂色的背景图与微微透明的高调字体完美相配

House有着格调迷人的清新夏日风格。白色朴素的字体设计LOGO和lomo风格全屏背景图极好地搭配

Basader又是个非常棒的全屏视频背景案例。硕大的黑色倾斜文字，与力量十足的愤怒海洋景象完美匹配

Epok Design基于各种视差效果，很好地在欢迎页表现了公司信息，还有与之相配的照片和有趣的介绍

Le Rockwood被设计成常用的黑白色调，它非常依赖这张情感强烈的照片，照片刻意加深处理过，还有厚实夺目的字体

Sebanado选用了一张时尚精美的图片。这张时尚主题照片和极小的标题增加了网站的神秘感

Web Akademie使用了非常朦胧的背景照片和与众不同的圆润字形，为网站营造出精致时尚的外观

Samaritaine的手法是使用引人入胜的视频简介，以迷人的屏幕保护结束。后者依赖柔和的颜色组合，和轮廓圆润的巨大粗字体，来增加额外的冲击力

Wearegoat把屏幕分为两部分，并且将用户注意力集中在主要方面。第一部分用于自我介绍（通过一小段描述文字呈现），第二部分直观展现日常工作场景

Thomas Loizeau使用一张惊险的高空照片和优雅适度的浅色文字欢迎潜在客户

Digital Park以与众不同的三维多边形为亮点，这必然为中央部分的设计增加了一点纵深。除此之外，巨大的黑色非正式字体和单调的灰色背景看起来很协调

Papercutart. 灰色与黑白照片、大量留白，还有一小段有活泼手写体的文字，给网站一种高雅的感觉

温暖的图片、极度突出的标题，Demi Creative漂亮地将两者结合起来，为网站注入象征主义

在复古导航和颇具创意的LOGO支持下，Mountain Standard Vail展示出令人印象极为深刻的风格

Swedish Seasons展现一副华丽的风景图，覆盖着的深色半透明三角形上，排列着菜单与网站标题。总体来看，这个网站有着精致高雅的外观

My life in 20 years真是个与众不同概念独特的网站。首页上包含了抽象线条背景和巨大简单的字体，直接将作者的想法摆在最显要位置

Loft City Church包含一个全屏图片轮播，向用户展示教堂活动信息。一组完美排列的巨大标题，清晰明了阐述这个网站的设计美学

Moio用了令人惊奇的单色矢量LOGO和粗犷字体，为网站注入运动风格的调调

Aguru Digital Agency给人艺术性的印象。深色的绘画背景、微妙精致的菜单，还有优雅却有些许欢快的字体设计LOGO，传递出很棒的平衡感

反思

通常设计师更喜欢用激动人心的背景图片，再稍稍加暗处理，可以避免对比不够明显。近乎纯白的亮色在任何此类背景上都华美清晰可辨，所以你有机会一箭双雕。首先，你不用浪费时间制作非凡的字体——常规字体就可以了，你要做的只是选择正确的粗细和尺寸；第二，你也能在不降低可读性的情况下，用一张别致的背景图迷倒用户

原文链接

活力四射的状态指示器:移动APP界面的加载动画与进度条

hi@victor42.work (Victor42) — Sun, 14 Jul 2013 20:42:18 +0000

[国外设计第1期]

调查显示，人们总是希望看到进度条的，尤其是在各种数据化APP中。充分理解当前状态或进度，对用户来说至关重要。另外，在需要耐心等待的时候，进度条是极为强大的工具。活力四射、有趣且漂亮令人愉快的进度条，绝对会让我们短短数秒的等待时间兴致盎然。

而且，进度条是各种多媒体播放器的基本组成，提供了退后和前进的功能。让用户不只是跟随播放，更能控制它。进度状态的图形表达对于增加用户好感起着至关重要的作用，同时也建立了优秀的人机交互界面。

带有载入动画与进度条的移动界面

妙的背景。轻微半透明的部件、白色风格和淡粉色的注入，为APP增添几分暖意和女性化意味

Miguel Pires 的dB-METER在中央绘制了一个明亮的仪表盘，巧妙地打破了深色硬朗背景的单调。微妙的凹槽和精准的绘制使得界面看起来非常精致

Corey Lui 的充电动画设计看上去优雅醒目，有着令人喜爱的现实主义感染力。用绿意盎然的动画表达充电过程，吸引了所有的注意力

Muhammad Farhan 的iOS7设计练习利用扁平的图形、柔和的色彩和纤细字体，清晰无疑表达了扁平风格的哲学。巨大的环形进度条占据整个界面的主要部分，使得数据看起来跃然纸上。

Breezy 的TICKER通过明快乐观的色系创造出温暖亲切的感觉。纯白色背景和扁平元素相互协调，为APP打造干净轻快的形象。

Andrew Fuller 的音乐APP使用带噪点的灰色背景、明亮的控制按钮，橙色作为主色起强调作用，都使之区别于通常音乐播放器。精细的阴影和渐变使按钮微微凸起。

Leigh Taylor 的Lift概念图基于深色系设计，配上炫目耀眼的亮色点缀。环形进度条很优雅，使用了间断和点状的线条来表达状态。

Miguel Pires 的AudioRec界面设计是拟物派的一款清新之作。两侧设计有冷光指示器，漂亮的光点给音量旋钮增添了几分趣味。

Maximilian 的音乐播放APP概念图有着相当扁平的风格。中央的巨大的环状进度条，同时也是唱片封面图的边框。

MVBen 的计时器。作者设计了一款非常棒的现实主义风格作品，中间的控制按钮与现实中的几乎无差。精致的渐变蓝进度条，在深色背景上非常醒目。

Karol Ortyl 的Statistics Screen用了仿仪表盘的进度条设计，还有附加文字来表示状态。干净的浅灰色背景与扁平图形巧妙地融合。

Patrick N. Lewis 的Dash iOS App。全屏背景图、非正式字体和普通的白色装饰，作者很好地处理了它们之间的平衡。半透明部件构成的环形加载动画，看起来优雅简练。

Corey Lui 的另一款iPhone APP主要采用双色设计（浅灰色与鲜艳的绿色），令界面外观干净且井然有序。

Dario, Morning设计。作者很巧妙地处理了黑色调、微妙的渐变和精细纹理之间的平衡。有光泽、极大的绿色环形进度条被放置在屏幕中心，用户一眼就能看见所需信息。

Ryan Littrell 设计的CLOCKWORK Timer App有很不错的metro格调。干净纯白的巨大矩形、浅蓝色的运用、细字体和整齐排布的数据，都给它创造一种井井有条的形象。

Kiran 的iPhone音乐播放器APP概念图的界面风格以深色、重纹理为主。深色的音量滑块、金属质感按钮和控制按钮的霓虹灯背景光，给界面增添一点粗犷的感觉。

这张播放器界面概念图有着让人惊叹的音乐氛围。紫色与蓝色，和深至纯黑的图形与背景完美结合。柔滑高光和微妙渐变使得按钮看起来非常漂亮。

Lucas Ramos 的Recife FM是个充满正能量的设计。明亮的橙色帆布质地、清晰明确的网格和圆形音乐控制中心，给界面创造了欢乐愉快的氛围。

App Vital Watcher作为一款整洁美观的监控软件，它采用了高识别度的图标与形象符号，所用的绿色明亮鲜活。

Suhaila Baheyeldin 的Study Timer设计表现了时尚和精致的扁平风格。主体采用灰色调，搭配珊瑚色和大号窄字体，使APP界面工整朴素。

BLASTAROCKS 创作的 MeloMe音乐播放软件看起来轻快、干净、非常令人愉悦。浅色背景、浅色按钮、浅灰色字体为界面创造了一种独特的优美。平顺光滑的进度条很容易抓住眼球。

Nikita Abramenkov 的减肥APP设计强调功能与设计上干净协调地结合。粉色与白色优美地互补，深色字体使得内容容易辨认且易于阅读。

Jeff Rauch 的睡眠APP的扁平风格统计数据十分讨喜，还有优雅的粗圆弧，向用户展示他的睡眠质量信息。

Artua 设计的Gym Genius APP界面有着很重的风格，大量使用光泽与渐变。圆形进度条能瞬间吸引注意力。

Oktafian Angga Nugraha 的短跑计时 App有着精妙的传统金属质感界面，运用了大量有光泽的控制按钮和深蓝色元素。电子样式的字体，很好辨认，也使界面元素浑然一体

Martin Oberhäuser 的公交指引APP Nextr中设计了一个封闭的环形搜索图标，采用鲜活的渐变样式和动画效果

Zahir Ramos 的Laundry Master iOS版采用非常规设计来表现进度条。结合了现实主义和动画效果，使它看起来像洗衣机的一部分

反思

作为一种完美的方式来表达正在发生的事情，进度条与载入动画是大量APP中最重要且不可或缺的部件。在界面看起来没什么变化时，它可以鼓励用户继续等待，也能展现更多额外功能。

阅读原文

三款Android手机地图界面对比

hi@victor42.work (Victor42) — Tue, 09 Jul 2013 18:46:00 +0000

由于工作需要，涉及到手机地图类的产品UI设计。凭经验设计的同时，也需要学习现有成熟产品，并进行研究对比。今天就把Android平台上的三款较主流的地图软件拿来对比，主要为研究它们界面优劣。三款地图产品分别为：高德地图 v5.1.2 、百度地图 v5.1.0 、谷歌地图 v6.14.4 ，图片默认按照高德-百度-谷歌的顺序排列

1. 启动界面

这里的启动界面不是使用提示，而是每次打开的欢迎页

只有高德地图有欢迎页，百度和谷歌打开直接进入地图界面。欢迎页能够强调品牌，并且能概括产品设计语言。在这个作用上，高德的欢迎图片还是有效的，能够概括高德地图界面清新明亮的设计风格。但是每次打开地图的这个等待过程，也在考验用户耐心，有利有弊

2. 地图界面

可以看到高德与百度的界面布局比较类似，高德更加轻便，用色也基于白色，框体与按钮都更大，显得更加清新。百度的地图底部多了一条功能栏，后面我们会发现，这条功能栏确实能够体现百度地图的色彩语言，浅灰色、微妙的渐变，使得百度的界面风格比高德偏重一些

谷歌的风格就大相径庭，半透明元素，大量使用深黑色背景。相比之下，谷歌的渐变与阴影效果使用最少，界面最为扁平

打开图层界面时，高德会有个黑色蒙层，这是我个人比较倾向的做法，可以把用户注意力集中在他操作的区域。百度的这几个选项，布局上应该有更合理的方式。这5个项虽然三个是单选项，两个是勾选框，逻辑不同，展现形式未尝不可统一

谷歌把图层功能列入底部菜单中了，打开是个挺干净的列表，图标表义也比较准确

3. 更多菜单

高德的菜单从右侧滑出，这部分的设计和整体风格相去甚远，却也很有效地将它独立出来

这个界面中，百度底部菜单的渐变就显得很碍事了，菜单部分出现好几种深浅不一的灰色，有明显的杂乱感

谷歌的更多菜单只能通过手机的硬件menu键调出，功能较少，使用频率又低，文字列表足矣

4. 搜索页

高德的搜索页，把周边信息与历史记录一起列出来，采用白色背景的卡片式设计。这种灰色背景加白色卡片的设计，是高德重要的视觉语言

百度搜索界面相比就沉重一些，大片的灰色。为了给输入法腾出半个屏幕，百度把周边信息与历史记录分开成了3个tab页，左右滑动切换。值得称赞的是周边信息的图标，简单却非常具象，事物的关键特点抓得很准

谷歌的做法则完全不同，没有新开一个页面，而是直接显示了搜索历史列表，周边信息这里没有显示。这点很符合谷歌产品一贯的设计理念，较少的界面层级，减少分散注意力的内容

接下来我们在搜索框里输入点什么

高德和百度相同，会在新页面显示推荐的搜索结果，高德只显示标题，百度还多显示一行地址。界面设计方面，高德用色明亮，内容少，显得更加大方。百度边框和线条使用更多，有点拥挤，重复出现的关键词都淡化了，这点值得学习

谷歌还是保持了界面的一致性，和刚才的界面几乎一样，没有时钟标记的项目是推荐结果，与搜索历史区分开了

5. 搜索结果

高德的地点信息采用底部信息栏的方式展现，并且切换地点时，信息栏内容会有个左右滑动的效果，体验不错。地点的标记有轻微的立体感，比较Q。列表界面再次体现了卡片式设计的优势，视觉上有宽敞的感觉。按钮样式全都纯白背景，仅靠一条浅灰色边框与背景区分，识别度相应降低了，但也更加耐看，尤其在列表界面中，不会夺去文字标题的视觉焦点

百度由于底部有菜单栏，地点信息只能悬浮在地点上方，无论从视线移动或是点击操作上，都更加便捷，当然，也牺牲了内容的扩展性。地点标记是扁平样式，可以看到几个标叠在一起的时候，就看不出彼此界限了。界面整体颜色基调偏灰，百度在按钮的设计上，都一致采用了轻微的灰色渐变，按钮尺寸小。在列表页面中，地点图片与评分功能的加入，使得列表页的构图难度加大，通栏+分隔线的设计较为紧凑，美观度有所下降

谷歌的底部菜单内容是可变的，在初始界面点搜索，搜索便会从菜单上消失。在这个界面中，整个变成了列表按钮。这就是谷歌的逻辑，只给用户他们目前需要的东西，其他的都藏起来。谷歌的地点标记是我个人最喜欢的，比较修长，标记点挤在一起也清晰可辨。列表页中保留了搜索框，其实更多是充当了标题栏的作用，让用户知道搜的是什么。列表页也给每个地点配了图，只是由于天知地知的原因，清一色都是默认图片。其实谷歌的列表页布局和百度基本相同，但是背景色比较明亮，分隔线很淡，没有明显的按钮，都使得它阅读起来更轻松

6. 地点详情

高德的地点详情页，内容很多，却清晰严谨。只是展现方式比较单一，给人感觉是个纯信息展示页面，缺少互动元素

百度的详情页用了一张图片作为背景，也开放了上传图片的入口，内容丰富多了，展现形式也比较多样化。用户在这个页面不仅是个信息接收者，也可以制造大量信息：照片、点评、印象、分享，都表现出了百度地图占据互联网入口的雄心。“大家印象”一栏的设计也很合理，把内容语义直观地体现在了颜色上。在信息结构复杂、信息量大的地方，处理好信息的层级与主次是头等大事，再加入一些图形化表达，能够起到事半功倍的作用。不过百度的这个页面仍然略显沉重，在空间狭小的手机屏幕上，同时使用色块与线框，很容易造成繁复的效果

谷歌的这个页面信息就很少了，还把照片单独放了一个tab页，内容处理起来可以更加灵活。单色的设计很巧妙，异于大家常用的1像素宽分隔线，这种厚重带颜色的分隔线很醒目，通过亮色与留白来划分内容区域，使得界面非常宽敞

上面这些是通过搜索得到的特殊地点，我们长按地图空白处，能够得到普通地点信息

高德的优势在这里体现出来了，卡片式设计同时也体现了一种模块化的思维，在不同的界面中可以创造出统一的视觉效果。反观百度，任意产生的地点无法提供图片，而且风格与之前的完全不同，令人困惑。谷歌的也挺不错，去掉了图标与蓝色分隔线，却仍然保留了统一的风格，这其中功劳得益于谷歌界面对于留白的使用，使得留白也成为风格的一部分

7. 交通路线

高德的这个界面设计得挺有实验精神，摆脱了传统输入框样式，红蓝两条细线用得很妙，非常抓眼球。输入框的尺寸也是最大的，通栏设计很宽敞。相比之下，百度的这个界面一眼望去，各种尺寸的按钮遍布输入框区域，线框一层包一层，臃肿不堪

谷歌把交通工具选择放到下面来了，非常值得赞许，要知道4.3英寸的屏幕上，把手伸到屏幕顶端去点一个小小的按钮是多么痛苦。界面很简单，中规中矩

然后我们看看搜索的结果

关于出行偏好的设置，个人认为高德的做法比较合适。打开新页面，用户的注意力会回页面的上半部分，应该让用户先注意到偏好选项，而不是浏览完了列表才发现可以按偏好筛选。百度的起点终点在这里有些多此一举，我自己亲手选的地点，我还会不知道吗？而且用户也不会注意这个提示，他注意力都到列表上去了。视觉上仍然是卡片式与列表式的对比，高德的序号使用了倾斜的字体，有画龙点睛的效果，页面因此活络起来

这回谷歌的界面算是三个中最糟糕的。起点终点占了那么大一片区域，而这往往是用户直接忽略的信息。方案列表有点意思，把时间放这么大，车次却缩小放第二排。虽说用户关心的最本质是时间，最直接因素却是车次，这里替用户思考得有些过了。毕竟除时间外，公交车还有路况、舒适度等很多隐性因素，这些只有熟悉线路的用户才知道，却往往是比时间还重要的选择依据。不过整个换乘过程表达地很直观，步行、公交、地铁，一看图标便知

方案的详情页，各家都严格保持着列表的风格，需要着重一提的是高德与谷歌的时间轴（我暂时这么称呼）。有先后顺序的列表内容，尽管也可以像百度这样来展示，如果用竖线“串”起来，就能更直观地表达出时间这一抽象概念。高德的做法是最常见的思路，时间轴上的点，同时也是很好的内容划分标记，每出现一个点，意味着开始一个新步骤。谷歌的这个设计则更胜一筹，让时间轴本身具有意义。用户在习惯了实线虚线、红色蓝色的意义之后，从形状、颜色中获知信息的时间明显短于图标

路线图页面，都大同小异，更多是地图界面的比较。谷歌的时间轴中的色彩语言，可以在这里发挥余热，看颜色便知是什么交通工具，高德与百度只能把图标放置在各个节点上

8. 周边信息

高德地图的周边功能入口较深，要从更多菜单中进入。不知道是否只有我这么感觉，左边的图标部分，很像缺少图片的默认头像

百度对O2O入口的野心在这里就能看出来，周边信息的入口，竟然有3个。左图是菜单中的入口，布局与高德相同，不过与高德一比较，说实话阴沉死板不止一点点。右图是通过点击地图上当前所在地点进入，这个界面与百度整体风格差异很大，有点活动专题的感觉，吸引力强于纯粹的信息列表

这是百度周边雷达，一个APP级的功能，可以直接在桌面生成快捷方式，并且越过地图界面直接启动。界面简洁直观，不过数字偏小，绿色的背景光让图标与文字难以辨认

谷歌在周边信息上没有下多少功夫，应该说在功夫网内没下多少功夫。尽管信息少得可怜，这个页面在视觉上仍可圈可点。从之前一系列的界面可以看出，谷歌地图大量应用了半透明元素，顶部那一小块地图背景算是个投机取巧的例子。多试几次才发现，这其实只是张固定图片，却给用户产生一种地图就在背后的错觉，用户知道自己没有离开刚才的界面，对这个新开页面的敌意必然要降低不少

9. 设置和关于

文字列表类的界面其实没什么可说，不需要承担让产品形象出彩的任务，延续既有视觉风格就好

百度特喜欢在大标题下面加小字，这种形式的目的不是为了美观，只是为了多展示信息。在这个界面，既然标题就能说清楚，相同的意思何必再重复写一行？

至于谷歌，这个就是原生Android的holo风格啦

10. 导航

谷歌的导航在墙内似乎不可用，这里就不参与比较了。之前对比过公交路线的界面，这两个也差不多。高德可以直接在这里添加途经点，还能设置驾车偏好，百度只有导航开始才能设置

这两个界面也和公交的类似，两者也都在路线上标注了路况。这里顺带提一下高德这种底部信息栏的设计，扩展性很强，信息栏往上滑，又能开辟一块巨大的信息展示空间

进入导航之后，高德左侧的这个路况还是很实用的，只是我没明白灰色代表什么，没有数据？这里仍然要吐槽一下百度，同样是行程公里数与所需时间，像高德这样简单列出来不行么？字够大够清晰就好了。百度的字那么小，中文字还要特意再缩小，又放在那么狭窄的地方，旁边两个图标也并没有让它更好辨认，这不是故意找茬么？

地图APP属于随手打开完成任务即关闭的产品，讲究简单高效。如何在匆匆几眼与寥寥几次点击中胜过对手产品，自然是莫大的挑战。反复研究现有产品，总能为手头的工作找到灵感 →_→

商业站升级小记 - UI篇

hi@victor42.work (Victor42) — Thu, 20 Sep 2012 19:36:00 +0000

公司的视频聊天交友软件升级项目，视觉部分已经告一段落，很长一段时间都在配合开发做一些功能上的细微调整，才终于有时间来好好整理一下整个项目的经过。从最初的概念稿，到概念稿发布评审，产品制定需求与交互，再交到我手中开始全面的设计工作，直至最终完成通过评审，将近两个月过去了。一套完全不同的视觉风格，从无到有，再逐渐完善成熟，历数整个过程，受益良多

这次升级主要目的在于提升视频交友软件的视觉体验，对产品功能的改动不大。现有的客户端界面仍然是典型的传统框架式布局，区块划分鲜明，旧式的重纹理，白底黑字配以彩色的小尺寸像素图标，俨然一副table时代网页的模样

观察竞争对手的产品，其界面也不外乎如此。如何从外观与操作上使我们的产品脱颖而出？我们需要引入一种新的视觉概念：一体化设计。打破区块束缚，拓宽用户的视野，以引导的方式帮助用户完成各项操作，而非罗列全部功能供其选择

为此，我以聊天室大厅界面为例，设计了如下的概念图

第一次从网页转做UI，貌似有那么点味道，不过细节仍有待提升。灵感有部分来源于微软的metro风格，内容即全部。直到后来office 2013发布，才发现自己的设计理念果然和微软在某些方面不谋而合

但这毕竟不是一款严肃的办公软件，过分追求简洁与清爽会丧失产品的活力。而我们的视频交友软件首先要体现的，便是娱乐性

最大限度的保持原有的功能与用户习惯，在表现方式上体现时尚与趣味。于是对之前方案进行改进，产生了如下设计

继续弱化区块，使整个界面浑然一体。加大房间图片，将房间信息紧凑排列。去除各种表意不清却扰乱视线的小图标，用文字与纯色图案代替。单从内容的表现与吸引程度来看，已大大胜过现有界面

概念版界面评审通过，产品定下需求与部分交互界面，正式的设计工作开始了。在一次完整的产品使用流程中，除去各种提示框与弹出窗口，用户会遇到4个主要的界面：站点导航、登陆、大厅、房间

1. 站点导航

一体化设计的概念，从这个站点导航界面便开始刺激用户的眼球，这是用户见到的第一个界面，立刻带来耳目一新的感觉。在这种简洁的风格下，整齐的布局尤为重要，保持无边界的内容区域完整不散乱

2. 登录

在这次的改版中，登陆窗口仍然采用主流的客户端软件布局方式。因为以表单为主的界面对用户来说极其敏感，轻微的困惑也足以让用户放弃一个产品

登录界面除了表单，还有广告与活动推广图片。这些运营层面的内容，在这个朴素的界面上极其抢眼。尽管我本人喜欢清爽的东西，但如果结合得恰到好处，这些内容反倒能为产品增色

比起以往边界清晰棱角分明的广告图，以背景图的方式展现推广信息自然是更好的选择。对于这个不大的登录窗口，空间的利用方式也更加合理，富有层次感

3. 大厅

功能区块都融合为一个整体，释放出更多的空间。留出的空间用于放大主要内容区域，或仅仅是留白。主次分明能为产品增添活力

房间的内容区域采用了横向滚动的设计，类似于windows 8的应用商店。原先挤在一起的内容平铺开来，展现形式可以更加丰富。水平移动符合人眼的活动规律，给人一种视野宽广的感觉，也符合这次改版的视觉概念

4. 房间

房间是变化最小的，这个界面功能最为复杂，且没有一项可以被删减甚至隐藏，布局也无法改变。体现在这个界面上的，更多是扁平化的色块设计与图标的统一规整

5. 辅助元素

软件界面的各种辅助元素也进行了升级设计，提示框系统随之平面化。通过不同颜色的顶部线条，来区分正确、警告、错误、进度条等场合

另外，站点的LOGO也全部设计了相应的配套风格。单色的LOGO比彩色更贴合一体化的设计风格

这一版UI较以往变化很大，为帮助用户尽快熟悉新界面的使用，提示引导系统不可或缺

结语

尽管这次更新的主要目的是视觉提升，所有界面从头到尾设计下来，我对这款软件本身以及它背后的需求与定位都有了更深入的了解。视觉提升固然能够吸引用户，留住用户却要靠一些其他的东西。其实需要改进的并不仅仅是外观，交互流程不够简明，不少功能易使用户混淆，产品背后的逻辑也存在更合理的可能。当然，这些都只是我个人抛开了实际情况的理解。无论如何，这款视频交友软件要成为优秀的产品，还有很长的路要走。希望本次更新能为这个目标铺平道路，期待下回重大版本更新时，这款产品能够从里到外焕发耀眼的光芒

- - - - 吐槽的分割线 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

以下内容我就不便发在设计团队博客上了，决定在自己博客里咆哮一下

一家开发人员懒得生蛆的公司是木有前途滴！木有前途滴！！！！

以上所有效果图，都是和开发协商过后的修改版，已经比最初的纯视觉稿难看了不少，开发还在不停提要求，“这几种窗口能不能做成一样大小？我这里不好做”、“这个进度条就不要了吧，用文字来表现”、“这个你看看腾讯是怎么做的，他们都有这个按钮”、“这里改一下吧，弹出一个层盖在上面，我就好做多了”、“这张图切给我一下”、“这图给我切一下”、“这张图切一下”……

你以前的公司切图是切一张给一张的么？我TMD整个软件的图全都切好了按文件夹分类命名好给你，还一张张问我要！同类按钮拼在一张图上又要我切开，就为了你少写十几行代码，我就要多切几十张图么？看看腾讯？你就只认识腾讯吧？截个图给我叫我参考QQ的卸载界面，拜托您老先搞清楚QQ和QQ旋风是两个软件！截图敢不敢好好截，那么大个界面，你就截个按钮，上面写着确定两个字，然后告诉我这个界面不对，我TM是神仙啊！？功能你实现不了，我们没意见，保证产品质量的前提下，修改设计给你提供折衷方案，你麻烦事还特么这么多，尼玛开会的时候怎么就不吭声了？产品经理都没有意见的效果图，你给老子来那么一大堆有的没的，敢情你才是产品经理啊！

铁打的程序员，流水的产品经理。最近产品部貌似换人挺勤，前几天又有个来接手这项目，问我要全套效果图。我终于明白了，因为咱压根儿就不缺产品经理，咱的开发就是产品经理！

好了……喷完了，心情舒畅。对事不对人，这个开发尽管很难沟通，但我目前还没看出他的品行有什么问题。我不会因为工作能力和工作方式的原因和同事吵起来，不过这样的工作方式继续下去，任何美好的蓝图最终都会成为泡影。等着瞧吧，这次产品升级的结果一定面目全非