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

1、交互设计中的5项视觉指导原则关于交互设计，除了交互性z外，美感也是必耍的存在。今天火星时代就为你总结交互 设计中的5项视觉指导原则，帮助各位同学协调视觉美感和交互设计。下血我们就來逐一介 绍：我不想贬低文字的重要性，但也不想忽视视觉。两者是同等重要的交互设计元素。文字 就是交互，但那些视觉元索（比如图标、菜单、图像等）才是用户实际上操作的东西。虽然 有些可用性专家会提及craigslist甚至amazon,作为陋但可用（ifutl受欢迎）的网站案例。 但毫无疑问，美感总会有所帮助。情感是用户体验的关键：视觉设计优秀的网站能使用户放松，提升可信度和易用性。考 虑到多数用八注意力短暂，认知往往成为

2、事实：如果视觉做得很糟糕，用八不会费神去深入 研究你的交互设计。让我们来细说视觉的匝要性，因为它关系到交互，保证了清晰的方向指 引和一致性。一、尊重视觉的主导地位我们从案例展不开始。看看下而的文字：yellow很显然，我们都知道“黄色”一词所指的颜色。但当多数人看到它吋，他们理解到的可 能只冇红色。文字的外观取代了它的真止含义。信息图专家david mccandless表明，我们 大部分的脑力资源都花在了视觉上。作为人类，视觉是我们的主要感观。但是其他动物更多依赖听觉与嗅觉，我们是视觉主 导的生物。正如数据记者兼信息图专家david mccandless在一场引人入胜的ted演讲中提 到的，我

3、们会调动全部感观，但多数的脑力都花在了视觉上虽然我们很难察觉。他用计 算机进行了类比“视觉是感观中最迅速的。它和计算机网络的速度相同。之后是触觉，相当于一个u 盘的速度。然后才是听觉与嗅觉，约等于硬盘的速度。“后面才是可怜的味觉，运算速度儿乎近似便携式计算器。介落里那个小方块，百分z 0.7,那就是我们实际了解的量。所以你的很多感观绝大多数感观都是视觉上的，它蜂 拥而來你却浑然不觉。”"视觉影响行为，也影响体验”，stephen p. anderson说。但是对于交互设计这意味着什么？它意味着你对产品做出的每一项视觉上的决策，都对 交互有极人的影响，即使是在不知不觉间。产品设计顾问s

4、tephen p. anderson指出，视觉影响的不只是体验，也会影响用户的行为。 这就是说好的视觉设计可以捉升销量，提高注册量和转化率，激发某些特定的用户行为。看 看下面这两个表单： 表单ap»oas« enrof your ema/fix 牝fw updares on yo(xcktfgfothershipping addrmbnamoselect state :card or account numbor:cart numberexpiration menth exptton yeor | 一 :zvcodo：phor>of1 phorto numlunite

5、d statescard vonsc«ior numberpkwwo now our crod<t card sowr ums an enhaxod address vofif«cb：»oc : us w procci$ your ortlef ” a bmo ba$«. gae proviso tho corroa bimxf® i than your btknq you wil bo oor(acted for venficabon.衣单brevolverkview confirmdeliviry optionspayment opt

6、ionssmippimc aoorfssordcp summarycovtuf usytfzhq wsmqu.zl, !3zcloo>a 尺 jcq kuukjm&um如3oe“iwy xbrkof gwwf oiu matrec ,5 accvt 7 up lor wtvnmrsavb and corrinub记住，交互设计的fl标z就是让用户尽可能少地思考。你认为哪个更有利于销售？哪 个视觉上看更舒服？第一例中，那密集恐惧症般的间距和过量的文字，让用户望而却步。笫 二例则色彩丰富、优美，看起來更简洁（尽管用户都得输入这些信息）。由于交互设计就是要创造人们想用的东西，冇吸引力的

7、事物更激发人的渴求，因此更能 发挥作用。spicessign upmwturtitkicuspiceshopb“nds. uhumn11mm uikuk& twkl kpeppersa ojciz-xr图片和导航在这个在线香料商店中相互协调。不过除了吸引人的交互，优美的设计也提 供了i层额外的理解。看看上血这个old town spice shop案例，你会发现这个网站的橱柜 式布局立刻暗示了这家公司的意图和香料产品。尽管你可能会质疑，用户先看到橱柜还是“spices”和“exmcts”这些文字。毫无疑问 的是，两者相互协调。二、提供清晰的方向与指引用户不会漫无冃的浏览网站。人们通常都

8、有个大体概念他们耍去哪，但述需要一些指引 和线索。他们会在脑海屮创建地图，既然我们刚刚提到人是视觉生物，那么就需要一些视觉 路标來指路。某种程度而言，伤的导航要像gps那样。用户需耍了解他们当前位置，哪些路线是可 行的，下一步该怎么做。面包屑导航是满足上述3项需求的最直接的方式。就像f面的newegg这种常见的ui 模式，这种方式给用户留下了清晰的视觉踪迹，来追踪他们的访问过程。1 home > computer hardware > computer cases但面包屑导航应该作为备选方式，因为对于页面间的点击跳转，它们在视觉上并不直观。 它们多用于层级复杂的网站，比如电商网站，

9、简单的网站不需要它。如果对此持疑，冋顾你 的网站地图，看看加入面包屑导航能不能提升易用性，或者只是添乱。面包屑导航、链接还有菜单、搜索框和可点击的图标都是基于视觉的手段，让 你建立方向和指引。谈到主导航时，你需要让它给人留下强烈的视觉印象。三、确保视觉统一一致性在交互设计的所有方面都非常重要，不只是视觉。无论如何，视觉上的不i致是 非常醒目的（看看世上最糟糕的网站），见证一下设计的地狱。h*上 a”前方高能预警！% elabqlla e1 皿 coming soon: an even worse site! look for rt somotime later, ovcmualtyl we p

10、romiseltraffic sutsself sctvte world*sel el el 5 usr wti>kji lo4mt lhrw|烁 48 worstendx rwww:wonrr*4$9.88/yr hosting + dorna get freedomainwith pery new movingdesignmrrgimjnk火xxmws ofvmpik gwgumacsmmjjt f wi 、xv lan kik 仃 11、! w2watch exm tbwd有些事是不该做的。一致性展现了网站在设计和排列方面的逻辑，创造更加令人愉悦的体验（我们都知道, 开心的用户是会

11、回头的）。我们之前提过，人们更喜欢统一是因为它增加了可预知性（降低学习成本）。如果你的 界面容易学习，它也会更容易使用。人们不喜欢令人不快的惊喜，正如惊讶最小化原则中所 说：不一致引发的问题，是它增加了 “认知负荷”。nielson norman group的用户体验专家, kathryn whitenton,在热议博文中解释过，认知负荷是用户在使用产品时需要思考的量。一致性展现了网站在设计和排列方面的逻辑。每项不一致都迫使用户停下脚步，來处理此处不同所表达的含义，它为何不同，又是如 何影响他们的行为。因此，不一致的地方越少，交互越顺畅，体验越好。例如，单选按钮在界而某部分只允许单选，那么它在

12、其他部分就不应该多选。文案也该 如此，既然在某个部分用了 “保存”作为名称，在英他部分里就不该称作“储存”。如果某 张图片触发了一个弹窗，那它在別处就不该打开新窗口。时刻要问口己，“我希望用户如何 操作？ ”四、将ui设计模式作为基准ui设计模式，可以理解为特定情况的最佳设计实践。既然用户已经熟悉各种设计模式, 使用它们降低了界面的学习曲线。常见的ui模式包括旋转木马、相关链接、幻灯片还 有更多（可以从这个网站看到，它致力于给它们分门别类）。netflix用了相关内容模式，来帮你找到其他町能感兴趣的节冃。比如，netflix使用了 “相关内容” u1模式，帮助用八找到英他可能感兴趣的电影或节

13、目。由于内容是智能牛成的，川户交互感觉更像是有人在推荐有用的内容。这并不是一项开 创性的设计，但它是个快速有效的解决方案，让你的界面鲜活起来。当然，ui模式并非即插即用的模块，你还是得基于网站的外观与感觉为它们特殊定制。 耍为产品寻找正确的模式，你可以查看各种模式库，通过它们的分类来浏览各种模式, 比如“导航”或“输入框”。今年，我们发布了两个单独的ui模式系列（还冇财富榜500 强金业的使用案例分析）：2014网页ui设计模式和2014移动ui设计模式。五、通过风格指南创建一致性虽然ui模式有助于提升熟悉感，风格指南才能确保全站统一。风格指南是一部手册，列岀了产品的特殊偏好，这些部分很难记忆

14、一一比如全站内容的 尺寸和字体、主导航的主色与辅助色的颜色梯度、按钮点击状态的表现等等。add action links and statuses to pnoto box thumbnails with the »photo-boxinteractaction linksadd action links to the top left of a photo box.photo-box.actions photo-box_action-linkminor actions should appear on the right. photo-box_actionsright來这里www.yelp.co.uk/styleguide看看yelp的风格指南。在uxpin,更新网站时我们会创建风格指南。这能帮助我们估计出额外的丄作量，因为 我们可以把带冇技术细节的截图添加到公司内部wiki中。正如我们在从风格指南到效果图 屮描述的，这种