如何保持交互与视觉的协调性

转自微信号: 作者:小云子  我是UE / woshiue

如何保持交互与视觉的协调性

我不想贬低文字的重要性,但也不想忽视视觉。两者是同等重要的交互设计元素。文字就是交互,但那些视觉元素(比如图标、菜单、图像等)才是用户实际上操作的东西。虽然有些可用性专家会提及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设计最佳实践中充分讨论了风格指南,包括如何制定、需要包含什么。要了解关于风格指南的更多案例,请看以下几项绝佳资源:

  • Starbucks
  • MailChimp
  • Yelp
  • BBC Gel

要深入学习交互设计中的一致性,请看这篇全领域创建用户体验一致性,还有这篇系统、平台和现实世界的统一。

精华总结

人们上网时,他们说自己在“看”网站,而不是与它“互动”,尽管后者更准确。我们严重依赖视觉,视觉引导我们建立观念、解决问题,我们所相信的会引导我们的行为。由于交互设计如此贴近用户体验,通过视觉打造最佳的用户体验,虽然间接,但确信无疑促成了更好的交互。

要深入学习,可以下载这本电子书Interaction Design Best Practices: Words, Visuals, Space。视觉案例研究包含了30多家公司,其中有Google、AirBnB、Facebook、Yahoo。还有一些专家的建议,比如Stephen P. Anderson、Jared Spool等等。

---------------------------------------------------------------

我是UE网,成立于2014年,为广大交互设计师提供免费服务

专注交互原型和用户体验

长按下方的二维码加关注哦,获取更多交互设计文章干货。

如何保持交互与视觉的协调性

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/4511/

(0)
iouedioued
上一篇 2015-03-25
下一篇 2015-03-31

相关推荐

  • 关于“下一步 ”的设计思考

    用户在使用 App的过程中,总会进入各种页面,并且对于页面之间的跳转, “<” 返回或者物理键均可回溯到上一级页面。但是进入下一级页面的入口,可以是各种操作按钮、缩略图、 tab或者导航切换,在工具性产品中,…

    2016-03-14
  • 计算机交互设计简史,从穿孔纸带到人工智能

    点击上方“想当然”,选择“置顶公众号优质文章,第一时间送达不管是有意识的还是无意识的,谈到交互设计,人人心中都有一个或清晰或模糊的理解。这些形形色色的理解都各有各的道理,但往往又有不尽然的地方。何为交互?交互(inter-action),从字面上理解,就是交流和互动。说得学术一点,就是两个对象之间的一系列响应。举个简单的例子,早上你出门遛狗时,隔壁老王正在跑步,你冲他一笑,说句:“早上好呀。”老王点头、微笑,说“早啊” —— 这就是一个...

    2018-04-07
  • 交互设计在商业中的价值

    转载自“创设空间”:chuangshe_space简书链接:http://www.jianshu.com/p/d0b5baa600d2作者:Mr汤进er一、前话问题:一句话概括你理解的交互设计是什么?部分回复摘录:@哎呀,我擦~:大概就是通过使用者的某些动作才能激发出的产品或包装的第二功能吧。@捉急的小慢~~O~~:界面设计,形式和功能相融而令人愉悦的互动。@lcy:信息的输入,输出的过程。从大家对于这个问题的回复,不难看出,不同人对于...

    2018-03-05
  • 大屏时代,如何做好电视端交互设计?

    在过去一年多的时间里,笔者有幸参与了电视端大屏幕的项目,在不断的尝试、探索和设计中,也收获了一些关于电视端的设计经验,因此将这些“电视交互设计的一些事”分享出来,共同探讨电视端的设计。-硬件+远距离操控——基本交互-基于桌面资料研究以及设计经验,总结了基本交互主要包含以下几个关键内容:遥控器输入、导航和菜单、信息展现、控件摆放和焦点状态。一 、遥控器输入当我们用手指快速便捷地在手机屏幕上点击或滑动时,主流电视大屏及应用的操作还是:使用遥...

    2018-04-01
  • 从产品需求角度,看设计的5层需求金字塔

    举例来说:人们在满足基本的温饱后,才会追求身体健康、安全的住所,接着要求社会地位等等,文艺一点来讲,人如果连追求高尚的权利都没有又何谈高尚呢?举例来说:我刚加入团队的时候,由于需要做大量整改设计,有一些小需求设计到产品设计,会立马询问程序员的开发难易度,并且选择最简单快速的方案,但事后却发现功能点没有想全,更重要的是频繁的打扰降低了开发组程序员的工作的节奏。

    2017-05-16
  • 借助动效取悦用户的7种方法

    沿着这7个思路,你可以正确地使用动效取悦用户。“在体验设计的过程中,为用户提供满足感已经是一种常态,而愉悦感则是我们所追求的目标。”“个性和情感是我们被一部分人吸引,而没有被另外一部分人吸引的原因。”人们会忘记你所说的话,忘记你所做的事,但是不会忘记你给他们所带来的感受。 —— Maya Angelou

    2017-05-03
  • Axure RP 8.0 软件激活 安装教程 激活码 序列号

    点击上方蓝字关注免费领取百度网盘超级会员等部分软件没有贴详细教程和网盘链接,可以给公众号留言发信息,也可加微信:qihai-77当你需要的软件我们没有发布时,可以给我们留言或者加微信:qihai-77反馈哦链接:https://pan.baidu.com/s/1VjyU1Ok307Go4VaV54LhcA密码:3nf7有任何需要安装的软件或问题可咨询微信客服:qihai-77链接失效可在公众号留言某某链接失效 或联系微信客服:qihai...

    2018-03-29
  • 提示信息的情感化设计,做一个有故事的淘宝

    未来的故事还可能会将情感化设计延伸到不仅仅是异常的场景中去,从而覆盖整个淘宝,真正地实现做到一个“有故事的淘宝”。

    2017-05-05
  • 移动视觉与交互设计10项法则自查表

    转自:设计夹(ID:sezign)英文:medium译者:孙怡娜Photo by Medium近年来,移动手机风靡全球。用户们也已经习惯依照一定的法则在移动端获取信息。在这个微渺的事物就可以定胜负的世里,开发者们需要去了解并迎合…

    2017-08-01
  • 什么是用户体验文案设计?【UXRen译#164】

    作者: Kristina Bjoran  |  翻译:陈馥丹,校审:小四   有一种新的职业出现了,嗯,也许不是“新”的,但可以肯定的是这种职业出现次数会逐渐增加,像谷歌、亚马逊、Dropbox、Paypal……许多大型科技公司正在寻找UX文…

    交互专题 2017-08-07