交互设计 on Victor42

交互设计的5个常见错误

hi@victor42.work (Victor42) — Sun, 23 Aug 2015 12:53:00 +0000

[国外设计第100期]

交互设计从来都不容易。它包括了用户行为的深度分析，和一丝不苟的规划。随着新技术和交互设计模式的出现，事情并不会变容易。

艳丽的图片、顺畅的鼠标悬停效果和意外的动画，不再那么容易引起用户注意了。但难题却没有解决——如何创造令人愉快的用户体验，让用户面带笑容完成转化？如果你对常见的设计陷阱有所警觉，就能更少犯错。

为了方便——可能也为了让你知道你不是独自一人——以下总结了最常见的交互设计误区。

1. 铺天盖地的创新

网页设计师都非常有创造力。我们希望通过作品来表达自我。我们总是在寻求创新的设计方法来脱颖而出。但是，当涉及到交互设计时，创新并不总是好事。甚至会给你的网站带来坏的影响。用户渴望熟悉的事物，他们总是会遵循一些特定的操作方式。

Randy J. Hunt，Etsy的创意总监和Product Design for the Web作者，清晰地陈述过：“嘿，设计师：别再TM自作聪明了。”在文章中，他详细解释了为什么别在网页设计上过分热衷创新。

以Iotorama网站为例。它挺漂亮，音乐深情，但是看着满屏幕移动的球，用户不知所措。不要误解我的意思，这个项目非常出色，超级有创造力！我喜欢这个大胆的创意，但它一点也不直观。

还有一个例子。Safety on the Slopes项目背后的创作者想到一个巧妙的交互式图形，用来警告用户冬季运动的危险。非常创新，同时也很直观、有趣、令人印象深刻。

2. 令人困惑的导航

“不要自作聪明”的准则也可以沿用到导航上。有些设计师试图使用折衷的名称来寻求新颖。比如Chijoff网站就让用户不知道他们究竟提供什么，如何聘请他们。需要看上好一阵子，才能理解“共同创造”页面实际上就等同于“服务”。甚至还有，通读整页后用户仍然不知道该怎么做……页面末尾只有个小注册表单用来获取最新的行业新闻和提示！在“联系”页面也没有表单，只有邮编和邮箱地址。使人们联络或聘用他们非常困难。

你能猜出“Universe”在Maison Margiela网站中是什么意思吗？实际上它链接到他们的Facebook主页。谁能想到？

相反，看看legworkstudio的网站。它的创意与超凡令人震撼。导航非常清晰不含糊。用户绝对不会迷路。

3. 杂乱无章

有一段时期，网站都试图把一切可能的东西摆上台面。那些日子已经一去不复返，但是很多网站仍然在犯这个错误。看看这个在线商城：

设计师试图坚持一种单色配色，但是大量颜色不同的色块、logo和字体，在这个页面上就足够让用户步履蹒跚。搜索框有着醒目的文案：“那么，今天你想要什么？”，但整个布局的外观和感觉非常过时。

EBay是主要在在线零售商之一，在这点上做得不错。没有用产品图片、促销和各种行动召唤塞满整个页面，而是保持它干净简洁，强调他们确实希望用户首先关注的东西，并附上清晰的提示，接下来该怎么做。

4. 注意对比，大哥！

对比是创造视觉层级、吸引用户注意特定元素的最重要的方式之一。在网页设计中，对比不仅仅意味着颜色使用，也包括尺寸、形状和位置。

这个网站是最简单生动的例子。他们做到了统一一致，但整体背景和按钮并不够吸引人，尤其是在订购按钮上。

相比来看这个。颜色选用很接近，但结果却完全不同。而且，创新的滚动效果，流畅地介绍了产品的新功能——反光材料。很酷，对吧？

5. 忽视表单样式

表单设计是用户体验最基本的部分。每个网站都有一个目标——无论是树立榜样、直接售卖产品或是提供信息。不幸的是，许多网站有着光鲜的首页，却宁可用长表单和复杂的验证码来使用户厌烦致死。除非用户有强烈的先导动机，否则他们就会离开。

有了JCF这样的有效的跨浏览器的解决方案，是时候忘记那些丑陋的默认表单元素了，转向一种更加沉浸的用户体验吧。

另一件气人的事，是表单要求太多信息，或者没通过完善测试。例如sketchybusiness.io的表单高亮显示了所有的空白框，甚至包括非必填项。

如果你看了mostlyserious.io的表单，你绝对会喜欢它的鼠标悬停和按钮按下状态。而且，“别害羞”的提示文案增加了一丝亲切幽默的感觉。

最后……

不要懒于测试！对你重要的对于顾客未必重要。他们在哪里遇到问题卡住？是导航、奇特的视觉差滚动效果、还是长时间加载的视频？用户测试的最大好处之一，是你可以通过用户的视角来观察，关注他们的需求、做出改进。不要抑制你的创造力。要牢记网站访客可能会感到困惑和沮丧。

你见过最糟的交互设计错误是什么？可以在评论中分享你的想法和故事。

原文链接：http://designmodo.com/5-interaction-design-mistakes/

作者信息： Anna Lisnyak Anna Lisnyak is the Art Director at PSD2HTML.com, the leading PSD to HTML and web development company. With over 8 years of graphic design experience, Anna is an avid reader and blogger. She has an exceptional eye for details and enjoys everything related to typography, web and UI/UX design.

时间感知对交互设计的影响

hi@victor42.work (Victor42) — Sun, 31 May 2015 15:48:00 +0000

[国外设计第88期]

在交互设计中如何加以利用时间？它是可控的吗？

元素的时间控制难以描述，但我们都能感觉得到，从令人厌烦的等待加载，到令人愉快的轻松穿梭于页面间。时间控制的范围很广，大到可感受到的时间增量，小到区区毫秒。单独看似乎没有意义，但无论如何，它积累起来就能影响用户的看法。

本文中我们讨论的内容涵盖一切随时间变化的元素：视频、音频、动画等等。我们会从时间为何重要讲起，然后讨论时间控制的要素，还有如何改善它们，之后我们会探索快速和简洁如何发挥作用。

时间为何重要

时间是个难以掌控的概念，因为它的范围如此广阔。就像一个电子的大小，相对于我们银河系几乎无法察觉。一毫秒的跨度也一样，相比一个千年，根本感受不到。

但是数字世界的时间与人类的时间不同。几秒的差距，就决定了体验是令人沮丧还是令人愉悦。我们可以把它归为基本的人类心理学：

**记忆与注意力是有限的——**正如我们在交互设计最佳实践中描述的，设计师应当评估界面的认知负荷。否则，用户会苦于短暂记忆导致的信息丢失，使他们沮丧。
**人们必须感到一切尽在掌控——**没有人愿意受科技的支配。正如我们最新的博文中陈述的，有些人仍然把计算机作为黑盒子对待。让人等待的电子产品，会给人一种不够格的傲慢印象。

用户的操作是有节奏的。在用户体验领域，时间的度是以10的量级来丈量的。用户判断是否值得在一个网站花费时间，只需要0.05秒。如果它们决定留下，通常会在2-4分之内离开。

无论目标是更新你的Facebook信息流，或是在Amazon上对比购买产品，每项体验都可以分解为一系列的交互，交互操作之间的耗时对用户体验会产生复合影响。

交互设计中的时间要素

那时间和交互设计具体有什么关系？设计顾问David Malouf相信，时间把交互设计与其他用户体验学科区分开来。时间远非线性的过程，因为随时间流逝所有交互都会发生。Malouf建议，我们可以具体从3个不同角度来检验时间：步调、响应和环境。

1. 步调

在设计方面，步调与固定时间内完成的事情息息相关。你马上就会想到，“那么用户完成的事情当然越多越好”，但这未必正确。

来源：席克定律

根据经验，操作流程远比可用的操作数量重要。席克定律说到，过多的界面元素实际上阻碍决策（因此也影响目标的完成）。

想一想，比如有一组庞大的注册表单，和另一组分成多页面的小表单，两者信息相同，会有怎样的区别。长表单会花费更少的时间，但一系列小表单似乎更容易掌控，对用户也不那么复杂。

下面的例子来自LinkedIn，结合表单引导和进度条是个很不错的策略，改善了体验的步调。创建一套专业档案所需的冗长过程被分为4个可掌控的步骤。用户也能看到它们的进度到了什么地步，这会激励他们继续进行。步调与效率关系不大，更多是用户是否对体验感到舒适——不会使他们负担过重，也不会减慢它们的速度。

来源：LinkedIn表单引导

2. 响应

产品的反应时间与用户的掌控程度直接相关。Jakob Nielsen说过，电子产品最重要的3个响应时间范围是：

**1秒——直接控制——**用户感觉他们在直接操纵这个系统，就像使用真实的工具一样。除了结果的视觉呈现外，不需要任何反馈。
**1秒——间接控制——**用户会注意到延迟，但在网站的体验中仍然感觉尽在掌握。比如对于加载新页面，这个延迟是可以接受的。
**10秒——部分控制——**用户的注意力已经转移，操作流程中断。反馈对于减少半途而废至关重要，这就是加载界面如此流行的原因。

响应时间中的延迟必须与任务的重要性相称。例如，加载云端面板，5秒是可以接受的。但是触发一个下拉菜单就不可忍受了。延迟越长，用户与界面之间的关系就越趋于分裂。

来源：UXPin

3. 环境

如何、何时、何地，甚至为何使用一个应用，都对时间感知有所影响。

比如，网站的平均停留为2-4分钟，尽管电商销售流程的平均要持续28分钟（这甚至都没有考虑销售的品类——买一辆车可得花上几个月）。同样的，那些在商场购物会通过移动设备比价的人，比坐在家中沙发里购物的人更重视速度。

来源：理解企业中移动运算的时间、地点与环境

如果你发现用户过早离开你的网站，你就得修改链接文案了。你还可以检查页面的视觉层级（颜色、对比、字体），确保重要的信息得到了强调。

但是，这些吸引眼球的方法，在单独一页沉浸式内容中或许有违直觉，例如博客。这种情况下，你最好善加利用留白来强调内容（就像Medium那样）。同一个获取注意力的策略，依据网站类型的不同，会产生两种不同的效果——这都取决于环境。

越快越好……在某种程度上

讨论一个界面的步调时，我们提到过并非总是越快越好。

坦言之，绝大多数时间相关的可用性问题，都由于系统反应太慢。但是，也有些情况速度太快反而不好。通常，速度太快的界面会导致两个问题：错过信息，或是用户跟不上。

来源：FourSquare_

1. 用户错过信息

信息变化太快时，用户只要看一眼屏幕的其他地方，就会错过它。这些通常适用于并非由用户触发的意外操作，而且通常这个变化离相关操作越远，越容易被忽略。有简单的补救方法可以将注意力引向这些变化，通过恰当处理的动画效果（我们稍后会讨论）。

我们可以把西门子作为界面速度过快的例子。此例中，向用户展示了如下页面，然后询问他们是否发现了西门子有洗衣机的特别促销。

来源：Auto Forwarding

正如Jakob Nielsen，Nielsen-Norman Group的联合创始人所描述的，即使页面顶部以巨大文字展示了促销信息，用户还是没看到。为什么会发生这种事情？因为轮播图（其实更像手风琴效果）每5秒自动切换一张。每次屏幕切换，唯一的指示器就是右侧的边栏——它通常都被忽略了，因为这两个行动召唤看起来像是banner（从而引发了banner盲区）。

2. 用户跟不上

即使用户注意到屏幕上快速切换的动画，也未必能理解。这通常发生在轮播图、旋转体和其他自动切换功能中——用户被图片激起了好奇心，当他们把鼠标移上去，它已经变成了另一张不怎么有吸引力的图。

可以发现，先前西门子的案例就是糟糕的用户体验决策的综合体。无论如何，5秒的轮播图是其中最糟糕的。因为它占屏幕主导地位，轮播图立刻就能吸引用户注意。但是这个轮播图每5秒改变一次，使用户迷失方向，并没有清晰表达出促销信息。用户并没有触发这个操作，于是为了努力赢回用户体验的控制权，他们对用户体验的其他不足更加敏感（比如糟糕的文案）。

来源：应该使用轮播图吗？

实际上，最好是摈弃自动切换的轮播图，因为它们最擅长分散注意力，最让人沮丧。目标与轮播图内容无关的用户，会发现它令人分心。真正需要了解其内容的用户，又无法及时反应。

对于非母语用户，响应问题更严重。年纪越大，或越不熟悉科技产品，越难以使用。要确保你的界面反应不至于太快，这些建议很有帮助：

让用户手动控制——屏幕上的快速变化，必须限制为由用户的操作触发。否则，这就违反了最少意外原则，这是指用户通常都不喜欢突发事件。
用动画来减慢速度——用800毫秒到1秒之间的动画来表现屏幕上的变化。
给每个轮播图留出足够的时间——如果你必须用自动切换的轮播图，要大声朗读其中文案，然后所花时间再乘以2.5。这就是每张轮播图应该停留的时间。还有当鼠标指在轮播图上，要确保切换暂停。

记住，交互设计中，感知到的就是真实的。令人愉快的等待，远比推着用户列队前进要好。

点击要简单，而非快速

既然提到速度，很有必要纠正另一个普遍的设计误区，3次点击原则——这个原则指出，用户通过3次及以内的点击，应该要能查看网站的任何内容。对于这个3次点击原则的最佳描述，可以说“意图是好的，但造成了误导”。

来源：你仍在信守的5个用户体验谎言

Hubspot的前用户体验总监，Joshua Porter创作的这张图表表明，点击次数与用户的满意程度并不存在确切的关联。其中的教训是，设计师应当少考虑让用户尽快完成任务，多考虑让用户尽可能容易地完成任务——目的不同，是界面设计存在差异的依据。

为了进一步印证我们的观点，看看这张图表。它遵循了3次点击原则，因为任何页面确实可以通过3次点击到达，但这种模式真的提升了可用性吗？它其实损害了可用性，因为用户得从过多的导航中过滤出他们的选择。而且，当他们到达新页面，他们需要再次从众多选项中过滤。

来源：Oracle

看看上面的Oracle网站。当然，你可以在3次点击内进入任何产品类目（例如数据库或Java），但你真的想这么做吗？

相反，我们建议遵循1次点击原则：每一项交互都让用户离目标更接近一步。这种策略有助于缩减顶级导航的项目数量，而不会使用户迷惑。它有助于让人关注探索的体验，而非探索路径本身。

来源：Chase

打开了我的帐号页面。我看见一个行动召唤，Ultimate Rewards，我点击了。

来源：Chase

进入了奖励页面。我看见选项_Use Points_和_Earn Points_。我点了_Use Points_。

来源：Chase

当来到点数兑换页面，我能看到有多少点数可用，有多数可以兑换。我选定了数量，兑换现金，然后达成了目标。

来源：Chase

这需要3次以上的点击，但每次点击都只花很少的精力。而且每次点击都让用户在通向目标的道路上更进一步。现在，如果你仍然坚持3次点击原则，你可能会把顶级导航其中一项设为“使用奖励”。点击次数当然减少了，但这种扁平式的策略实际上会展现过多的项目，难以同时筛选过滤。因此为了更短的点击路径，牺牲了可用性。

我们想要强调3次点击原则背后的精神：点击应该尽可能简单和直观。并非确保用户在网站上所花的时间最少，而是值得的。

总结

提到交互设计，一秒的延迟就能左右成功与失败。如果用户体验太慢，人们会感到沮丧。如果太快，人们会错过重要信息（或者不明白它的意思）。理解人类对于时间的认知、速度（和轮播图）的限制，还有直接点击的重要性。

如果有疑问，记住这条简单的可用性原则：清晰就会顺畅，顺畅就会快。

原文链接

交互设计三大法则

hi@victor42.work (Victor42) — Sun, 24 May 2015 00:03:00 +0000

[国外设计第87期]

科幻作家艾萨克·阿西莫夫在他的机器人系列故事中创造了“机器人学三大法则”。这些法则被永久性地植入每个机器人，作为防止灾难、保护人类的最后一道保险。我很好奇，我们最后一道保险是什么？对于交互设计师而言，三大法则又是什么？

用户对于界面的感知，离不开它的形式、内容和行为。就像工业与平面设计师专注于形式那样，交互设计师将行为作为最重要的元素来考虑。要通过设计来左右用户的体验，首先要考虑我们的三大法则，界面的行为如何表现，它对用户的行为产生什么影响。它们必须得作为稳固的基础，在它之上构建其他交互设计原则。幸运的是，我将要运用的三大法则早已有人提出——三大法则的主人，Mac电脑项目背后的大脑，Jef Raskin。他在他的著作The Humane Interface的某一页中写下了这三条铁律，本书在交互设计中的地位接近圣经。细细品读，你会发现现代最流行的用户界面，都采用了这本里程碑式的著作中的概念与技巧，其中也包括微软和苹果的设备。

第一法则

善加利用阿西莫夫的三大法则本身，Raskin写道“交互设计第一法则应该是：电脑不应该妨碍你的工作，或由于不作为而使你的工作受到损害”[1]。我们都应该牢记，电脑是一件用来完成任务的工具；最终目标不可能或极少情况下是使用软件本身。因此，我们可以一致同意，在电脑上最恶劣的体验就是让工作蒙受损失。唯一一件比丢失已完成的工作更糟的，是丢失无法精确还原的数据，比如创意类的工作。

当你键入时，应用应当如实反映数据，并尽可能防止你丢失工作。可能你会觉得这只是工程师该考虑的。开发者应该确保他们的软件有防护措施和冗余，来防止数据丢失（还有一些潜在bug），不是吗？实际上，数据保护与工作保存也是界面设计的任务，作为设计师必须预先行动——通过用户研究——发现用户会如何损失工作，或是不得不重复工作。这就意味着要加入一些保护，比如强大的撤销功能和破坏性操作保护，来防止无意的数据丢失。很棒的一个例子就是GitHub仓库的删除对话框，它确实发挥作用，不同于其他确认对话框，它强迫你输入仓库名称才能继续。这个技巧很聪明，在删除过程中迫使用户的注意力集中到仓库名上。安全措施防止用户习惯性的操作导致损失。

GitHub删除确认对话框。

第一法则也适用于保存用户的工作相关与内容本身。比如，要选择一系列项目进行操作（比如说文件），需要大量的精力。因此，建议在工作流程中保留选中状态，将它们保存在一个可以撤销的操作列表中。类似的，如果界面允许用户对元素进行自定义或排序，这些排序或自定义都应该保存下来。

为什么Apple的Time Machine和自动保存，还有Dropbox的历史版本这么棒，就因为遵守了第一“法则”。它们承认人类会犯错这个事实，尽管用户可能会触发一个破坏工作或数据的操作，那并非他们的意图。

Apple的“浏览所有版本”功能非常棒。

第二法则

Raskin继续写道，好的第二法则应该是“电脑不该浪费时间，或要求你做非必要的工作”[2]。很常见的情况，用户肩负众多任务，因为人工执行一项任务比编写一个系统让它自动执行简单的多。这些情况下，如果技术允许，电脑应该承担起这些工作。比如迫使用户选择信用卡的类型，虽然从卡号就可以推断出来。

Stripe就做对了，自动检测信用卡的类型。

用户学习一套新的界面或系统数据模型，所花的时间与精力也要纳入考虑，要与总工作量取得平衡。用效率较低的方式执行一项操作，或许比学习一种高效的新方式再操作工作量少。用户只原意与少量界面进行交互。至于其他，稍加牺牲效率，换取更加直观的操作或许是值得的。

假设某种状况下你需要迫使用户改变他们自己的思维模式，这时需要谨慎。因为这项设计抉择会影响用户的内容结构（通常出于技术要求），而非让他们自己决定如何组织信息，或是使用他们熟悉的结构。优秀的界面以用户最想要最易懂的形式展现信息系统。以多数银行希望你存钱的方式为例。通常，你需要把钱分几个账户存，或是存在一个账户上，然后自己判断哪些不该花。Simple用了另一个方案。相比强迫用户思考存款的运转方式（比如在银行账户中），Simple让你简单通过“目的”设置任意数量的钱，这些数目与之后的交易一起，都在“可使用”余额的追踪下。

Simple的“可使用”能辨认出人们确切的用钱方式。

第三法则

我相信，Raskin的书余下的所有部分，讲的就是第三法则。他说界面应该是人道主义的；它应当“响应人类的需要，并且体谅人类的弱点”[3]。这是整部以用户为中心的设计的核心定律，由此得到其他的交互设计原则。好的交互设计永远都会尊重人脑和身体的局限。它有必要对我们的本能物理反应和文化价值保持敏感。

让界面变得人道主义的一个例子，是围绕人们同时只能注意一件事情进行设计。比如，键盘大写锁定键上的指示灯。它本身并不是个好的解决方法，无法避免误触开启大写锁定模式，因为用户按下时，关注点通常不在按键上。Mac的密码输入就处理得很好，它在输入框内提供了视觉指示，表明大写锁定被开启了，用户此时就在看输入框。

大写锁定的信息就在你需要的地方。

“响应用户需求”的一个例子，是在他们进行操作或执行工作流程时，持续展示用户关心的内容（注意：他们关心的是目的，而不是你的应用）。看看Amazon，它自动显示你查看的镜头是否匹配你近期购买的相机。

Amazon的相机镜头匹配组件。

最后一条“定律”是交互设计定律的精髓。在今天的世界，要知道设计界面非常重要的一点就是人道主义，从认知的格式塔原则和平面设计原则，到相关的文化心理学。我们的工作永无止境。随着时间流逝，技术前景和我们的文化环境在缓慢改变，我们将颠簸前行，继续演进我们的设计与设计流程。

无论如何，这三条定律是我不断回溯的基本准则，它们再三成为成功的界面的试金石。在你决策界面的外观和行为时，牢记它们很有帮助，不论你最终设计的美学样式如何。

总结

电脑不应该妨碍你的工作，或由于不作为而使你的工作受到损害。
电脑不该浪费时间，或要求你做非必要的工作。
界面应该是人道主义的；它应当响应人类的需要，并且体谅人类的弱点。

另：可以关注我的Twitter@uxdiogenes，我的Medium文章，或者订阅我的博客RSS。

原文链接

作者信息： Diogenes Brito A craftsman of order and clarity. Product Designer @SlackHQ (slack.com). Formerly a designer and engineer @Squarespace, UX @LinkedIn. http://uxdiogenes.com

交互设计中的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.

交互设计 on Victor42

交互设计的5个常见错误

1. 铺天盖地的创新

2. 令人困惑的导航

3. 杂乱无章

4. 注意对比，大哥！

5. 忽视表单样式

最后……

热门移动端输入交互

深入了解时下最热门应用的设计模式

用户输入设计的6项目标

模式总览

1. 智能键盘

问题

解决方案

2. 默认值和自动补全

问题

解决方案

直接进入（或者说“快速登录”）

问题

解决方案

4. 操作栏

问题

解决方案

5. 社交账号登录

问题

解决方案

6. 大按钮

问题

解决方案

7. 滑动操作

问题

解决方案

8. 通知

问题

解决方案

9. 隐藏式控件

问题

解决方案

10. 扩展式输入框

问题

解决方案

11. 撤销

问题

解决方案

获取用户的输入

时间感知对交互设计的影响

时间为何重要

交互设计中的时间要素

1. 步调

2. 响应

3. 环境

越快越好……在某种程度上

1. 用户错过信息

2. 用户跟不上

点击要简单，而非快速

总结

交互设计三大法则

第一法则

第二法则

第三法则

总结

交互设计中的5项视觉指导原则

01. 尊重视觉的主导地位

02. 提供清晰的方向与指引

03. 确保视觉统一

04. 将UI设计模式作为基准

05. 通过风格指南创建一致性

精华总结