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

交互设计中的5项视觉指导原则 来自UX Pin的Jerry Cao ，通过本文向我们解释了如何保持视觉与交互的协调。 我不想贬低文字的重要性 ，但也不想忽视视觉。两者是 等重要的交互设计元素。文字就是交互 ， 但那些视觉元素 （比如图标、菜单、图像等 ）才是用户实际上操作的东西。虽然有些可用性专家会 提及Craigslist 甚至A mazo n ，作为丑陋但可用 （而且受欢迎 ）的网站案例。但毫无疑问 ，美感总会 有所帮助。 情感是用户体验的关键 ：视觉设计优秀的网站能使用户放松 ，提升可信度和易用性。考虑到多数用 户注意力短暂 ，认知往往成为事实 ：如果视觉做得很糟糕 ，用户不会费神去深入研究你的交互设计 。 让我们来细说视觉的重要性 ，因为它关系到交互 ，保证了清晰的方向指引和一致性。 01. 尊重视觉的主导地位 我们从案例展示开始。看看下面的文字 ： 很显然 ，我们都知道“黄色”一词所指的颜色。但当多数人看到它时 ，他们理解到的可能只有红色。文 字的外观取代了它的真正含义。 信息图专家David McCandless表明 ，我们大部分的脑力资源都花在了视觉上。 作为人类 ，视觉是我们的主要感观。但是其他动物更多依赖听觉与嗅觉 ，我们是视觉主导的生物。 正如数据记者兼信息图专家David McCandless在一场引人入胜的 ED演讲中提到的 ，我们会调动全 部感观 ，但多数的脑力都花在了视觉上——虽然我们很难察觉。他用计算机进行了类比…… “视觉是感观中最迅速的。它和计算机网络的速度相 。之后是触觉 ，相当于一个U盘的速度。然后 才是听觉与嗅觉 ，约等于硬盘的速度。 “后面才是可怜的味觉 ，运算速度几乎近似便携式计算器。角落里那个小方块 ，百分之0.7 ，那就是 我们实际了解的量。所以你的很多感观——绝大多数感观都是视觉上的 ，它蜂拥而来——你却浑然 不觉。” 视觉影响行为 ，也影响体验 ，St ephen P. A nderso n说。 但是对于交互设计这意味着什么 ？它意味着你对产品做出的每一项视觉上的决策 ，都对交互有极大 的影响 ，即使是在不知不觉间。 产品设计顾问St ephen P. A nderso n指出 ，视觉影响的不只是体验 ，也会影响用户的行为。 这就是说好的视觉设计可以提升销量 ，提高注册量和转化率 ，激发某些特定的用户行为。看看下面 这两个表单 ： 表单A 表单B 记住 ，交互设计的目标之一就是让用户尽可能少地思考。你认为哪个更有利于销售 ？哪个视觉上看 更舒服 ？ 第一例中 ，那密集恐惧症般的间距和过量的文字 ，让用户望而却步。第二例则色彩丰富、优美 ，看 起来更简洁 （尽管用户都得输入这些信息 ）。 由于交互设计就是要创造人们想用的东西 ，有吸引力的事物更激发人的渴求 ，因此更能发挥作用。 图片和导航在这个在线香料商店中相互协调。 不过除了吸引人的交互 ，优美的设计也提供了一层额外的理解。看看上面这个 O ld ow n Spice Sho p案例 ，你会发现这个网站的橱柜式布局立刻暗示了这家公司的意图和香料产品。 尽管你可能会质疑 ，用户先看到橱柜还是“Spices”和“Ext ract s”这些文字。毫无疑问的是 ，两者相互 协调。 02. 提供清晰的方向与指引 用户不会漫无目的浏览网站。人们通常都有个大体概念他们要去哪 ，但还需要一些指引和线索。他 们会在脑海中创建地图 ，既然我们刚刚提到人是视觉生物 ，那么就需要一些视觉路标来指路。 某种程度而言 ，你的导航要像GPS那样。用户需要了解他们当前位置 ，哪些路线是可行的 ，下一步 该怎么做。 面包屑导航是满足上述3项需求的最直接的方式。就像下面的 Newegg 这种常见的UI模式 ，这种方 式给用户留下了清晰的视觉踪迹 ，来追踪他们的访问过程。 但面包屑导航应该作为备选方式 ，因为对于页面间的点击跳转 ，它们在视觉上并不直观。它们多用 于层级复杂的网站 ，比如电商网站 ，简单的网站不需要它。如果对此持疑 ，回顾你的网站地图 ，看 看加入面包屑导航能不能提升易用性 ，或者只是添乱。 面包屑导航、链接——还有菜单、搜索框和可点击的图标——都是基于视觉的手段 ，让你建立方向 和指引。谈到主导航时 ，你需要让它给人留下强烈的视觉印象。 如果要学习更多导航的最佳实践 ，请看我们的免费电子书Web UI Design Best Pract ices ，还有这 本5-part series ，讲的是交互设计中对导航的简化。 03. 确保视觉统一 一致性在交互设计的所有方面都非常