打字猴:1.700424212e+09
1700424212
1700424213 研究人员有时使用精密的眼球追踪(eyetracking)仪器来确定被测人倒底正在看什么,以及他们的视线是如何在这个屏幕上移动的。无论如何,如果只是想略微调整一下某个页面的视觉设计,那么一般你只需要简单地询问一下人们就可以了—甚至你自己也可以。有时这种方法不能提供最准确的结果,并且它也永远无法捕捉眼球追踪仪器能提供的细微差别。但是大多数时候,简单地询问是非常适合的。另一种找出主要设计元素的方法是眯着眼睛或斜着去看这个页面,直到你不能认出任何细节—或者走到房间的另一头从那个地方来看这个页面。
1700424214
1700424215 然后试着确定视线所停留的地方。如果你本人是被测者,那么一定要注意你的眼睛在页面周围的、无意识的移动。对于你正在看的东西,不要想得太多,只要让你的视线自然地落在页面上。如果另外还有一些被测者,让他们按被吸引的顺序来指出页面中的那些元素。
1700424216
1700424217 一般情况下,你会发现,人们视线的移动方式遵循着相当一致的模式—毕竟,这些大多数是无意识的、本能的移动。如果测试的报告显示,某些人的视线移动和别人的模式不一样,那么他们有可能是没有真正察觉到自己眼睛的自然移动,或者他们只是把他们认为你想听到的事情告诉你了(或者两者都有)。
1700424218
1700424219 如果你的设计是成功的,用户眼睛的移动轨迹的模式应该有以下两个重要的特点:
1700424220
1700424221 ▼首先,它们遵循的是一条流畅的路径。如果人们评论一个设计是“忙碌”或“拥挤”时,这表示这个设计确实没能顺利地引导他们在页面上移动。他们的眼睛在各种各样的元素之间跳来跳去,所有的元素都在试图引起他们的注意。
1700424222
1700424223 ▼其次,在不需要用太多细节来吓倒用户的前提下,它为用户提供有效选择的、某种可能的“引导”。就像我们一直在说的那样,这些引导应该支持用户试图在此刻通过与产品交互去完成的某个目标和任务。也许更重要的是,这些引导不应该分散用户对那些“能完成目标的信息或功能”的注意力。
1700424224
1700424225 用户在页面上的视线移动并不是随机的。它是一种所有人类共有的、对于视觉刺激而产生的、一系列复杂的原始本能反应。对于我们设计师而言,非常幸运的是,这些反应并不是完全无法控制的—数百年以来,我们已经发展出了各种各样的有效的视觉手段,来吸引或分散注意力。
1700424226
1700424227
1700424228
1700424229
1700424230 用户体验要素:以用户为中心的产品设计(原书第2版) [:1700422508]
1700424231 用户体验要素:以用户为中心的产品设计(原书第2版) 对比和一致性
1700424232
1700424233 在视觉设计中,我们用于吸引用户注意的一个主要工具就是对比(contrast)。一个没有对比的设计,会被看成一个灰色的、平凡的东西,导致用户的视线四处游离,而无法解决任何特别的事情。把用户的注意力吸引到界面中的关键部分,对比是一个重要手段,能帮助用户理解页面导航元素之间的关系。同时,对比还是传达信息设计中的概念群组的主要手段。
1700424234
1700424235 当一个元素在设计中的显得与众不同时,用户就会注意到。这是他们不能控制的。你可以利用这个本能的行为,来使用户注意到那些“真正需要从这个页面的其他元素中突出的东西”。在网页界面上的错误提示通常会被融进页面的其他元素中;通过给文本一些不同的颜色(比如说,红色)或用一个醒目的图形将它们凸显出来,就能让整个界面完全不同了。
1700424236
1700424237
1700424238
1700424239
1700424240 一个视觉上的中性布局(左上),没有任何一个元素突出。对比可以用来引导用户在页面上的视线(右上)或将他们的注意力吸引到几个关键要素上(左下)。过度的对比导致了混乱的视觉(右下)。
1700424241
1700424242 不管怎样,这些工作的总体策略是,让“差异”必须足够清晰,用户要足够分辨出某个设计选择是特意要传达一些信息的。当两个设计元素的处理相似又不太一样的时候,用户会就会困惑。“为什么这些会不一样?它们本来是一样的吗?也许只是弄错了。还是我应该在这里注意到什么东西吗?”而事实是,我们希望这两者都能抓住用户的目光,并且让他们认为这是有意而为之的。
1700424243
1700424244 在你的设计中保持一致性(uniformity)是另一个重要的组成部分,它能使你的设计有效地传达信息,而不会导致用户迷惑或焦虑。“一致性”在视觉设计的许多不同方面都会起到作用。
1700424245
1700424246 将视觉元素的大小保持一致的尺寸,这可以使你在需要的时候把它们更容易地重新组合成一个新的设计。举个例子来说,如果你在导航中使用的所有图形按钮都是同一个高度,那么它们就可以在需要的时候被混合并匹配,而不会形成一个布局杂乱或要求重新设计的图形。
1700424247
1700424248 基于栅格线(grid-based layout)的布局是来自平面设计的一种技术,是一种对网页也同样有效的技术。这个方法通过使用“母版”来确保设计的一致性,各种布局都是根据这个模板来创建的。不是每一个布局都要使用栅格的每一个部分(事实上,大多数的布局可能只会用到很少的一部分)但是每一个元素在网格上的位置应该统一和一致的。
1700424249
1700424250
1700424251
1700424252
1700424253 创建一个栅格来指导布局工作可以保证一致性而不会牺牲统一。
1700424254
1700424255 不管怎样,由于设备、屏幕尺寸和屏幕分辨率千差万别,把栅格应用到屏幕交互式产品上不会像平面设计一样简单。你很容易就掉到“坚持使用栅格系统”的漩涡之中(或者任何一种可以保证一致的标准)甚至在它们根本就行不通的时候。在没有设计标准的情况下进行工作是不好的,但是教条地遵守设计标准,而不顾你适当的需求就可能会更糟。
1700424256
1700424257 也许产品采取了一个在栅格被开发出来的时候没有人能想像出来的新功能;也许这个栅格从一开始就不怎么行得通。不管原因是什么,重要的是,你要能认识到什么时候应该重新考虑设计系统的基础是什么。
1700424258
1700424259
1700424260
1700424261
[ 上一页 ]  [ :1.700424212e+09 ]  [ 下一页 ]