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

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

来自UXPin的JerryCao，通过本文向我们解释了如何保持视觉与交互的协调。

我不想贬低文字的重要性，但也不想忽视视觉。两者是同等重要的交互设计元素。文字就是交互，但那些视觉元素（比如图标、菜单、图像等）才是用户实际上操作的东西。虽然有些可用性专家会提及Craigslist甚至

Amazon，作为丑陋但可用（而且受欢迎）的网站案例。但毫无疑问，美感总会有所帮助。

情感是用户体验的关键：视觉设计优秀的网站能使用户放松，提升可信度和易用性。考虑到多数用户注意力短暂，认知往往成为事实：如果视觉做得很糟糕，用户不会费神去深入研究你的交互设计。

让我们来细说视觉的重要性，因为它关系到交互，保证了清晰的方向指引和一致性。

01.尊重视觉的主导地位

我们从案例展示开始。看看下面的文字：

很显然，我们都知道“黄色”一词所指的颜色。但当多数人看到它时，他们理解到的可能只有红色。文字的外观取代了它的真正含义。

信息图专家DavidMcCandless表明，我们大部分的脑力资源都花在了视觉上。

作为人类，视觉是我们的主要感观。但是其他动物更多依赖听觉与嗅觉，我们是视觉主导的生物。正如数据记者兼信息图专家DavidMcCandless

在一场引人入胜的TED演讲中提到的，我们会调动全部感观，但多数的脑

力都花在了视觉上——虽然我们很难察觉。他用计算机进行了类比……

“视觉是感观中最迅速的。它和计算机网络的速度相同。之后是触觉，相当于一个U盘的速度。然后才是听觉与嗅觉，约等于硬盘的速度。

“后面才是可怜的味觉，运算速度几乎近似便携式计算器。角落里那个小方块，百分之0.7，那就是我们实际了解的量。所以你的很多感观——绝大多数感观都是视觉上的，它蜂拥而来——你却浑然不觉。”

视觉影响行为，也影响体验，StephenPAnderson说。

但是对于交互设计这意味着什么？它意味着你对产品做出的每一项视觉上的决策，都对交互有极大的影响，即使是在不知不觉间。

产品设计顾问StephenPAnderson指出，视觉影响的不只是体验，

也会影响用户的行为。

这就是说好的视觉设计可以提升销量，提高注册量和转化率，激发某些特定的用户行为。看看下面这两个表单：

表单A

表单B

记住，交互设计的目标之一就是让用户尽可能少地思考。你认为哪个更有利于销售？哪个视觉上看更舒服？

第一例中，那密集恐惧症般的间距和过量的文字，让用户望而却步。第

二例则色彩丰富、优美，看起来更简洁（尽管用户都得输入这些信息）。

由于交互设计就是要创造人们想用的东西，有吸引力的事物更激发人的渴求，因此更能发挥作用。

图片和导航在这个在线香料商店中相互协调。

不过除了吸引人的交互，优美的设计也提供了一层额外的理解。看看上

面这个OldTownSpiceShop案例，你会发现这个网站的橱柜式布局立刻

暗示了这家公司的意图和香料产品。

尽管你可能会质疑，用户先看到橱柜还是“Spices”和“Extracts”这些文字。毫无疑问的是，两者相互协调。

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

用户不会漫无目的浏览网站。人们通常都有个大体概念他们要去哪，但还需要一些指引和线索。他们会在脑海中创建地图，既然我们刚刚提到人是视觉生物，那么就需要一些视觉路标来指路。

某种程度而言，你的导航要像GPS那样。用户需要了解他们当前位置，哪些路线是可行的，下一步该怎么做。

面包屑导航是满足上述3项需求的最直接的方式。就像下面的

Newegg这种常见的UI模式，这种方式给用户留下了清晰的视觉踪迹，来

追踪他们的访问过程。

但面包屑导航应该作为备选方式，因为对于页面间的点击跳转，它们在视觉上并不直观。它们多用于层级复杂的网站，比如电商网站，简单的网站不需要它。如果对此持疑，回顾你的网站地图，看看加入面包屑导航能不能提升易用性，或者只是添乱。

面包屑导航、链接——还有菜单、搜索框和可点击的图标——都是基于视觉的手段，让你建立方向和指引。谈到主导航时，你需要让它给人留下强烈的视觉印象。

03.确保视觉统一

一致性在交互设计的所有方面都非常重要，不只是视觉。无论如何，视

觉上的不一致是非常醒目的（看看世上最糟糕的网站），见证一下设计的地

狱。

有些事是不该做的。

一致性展现了网站在设计和排列方面的逻辑，创造更加令人愉悦的体验（我们都知道，开心的用户是会回头的）。

我们之前提过，人们更喜欢统一是因为它增加了可预知性（降低学习成本）。如果你的界面容易学习，它也会更容易使用