以用户为中心的产品设计35:对比和一致性

发布于 2021-05-14 08:01

2021年5月14日  Day232 对比和一致性

带你一起学习《用户体验要素-以用户为中心的产品设计》

以用户为中心的产品设计35对比和一致性


 

在这个五层模型的顶端,我们把注意力转移到产品用户会首先注意到的地方:感知设计。

这里,内容、功能和美学汇集到一起来产生一个最终的设计,完成其他四个层面的所有目标,并同时满足用户的感官感受。

对比和一致性

在视觉设计中,我们用于吸引用户注意的一个主要工具就是对比。一个没有对比的设计,会被看成一个灰色的、平凡的东西,导致用户的视线四处游离,而无法解决任何特别的事情。把用户的注意力吸引到界面中的关键部分,对比是一个重要手段,能帮助用户理解页面导航元素之间的关系。同时,对比还是传达设计中的概念群的主要手段。

当一个元素在设计中显得与众不同时,用户就会注意到。这是他们不能控制的。你可以利用这个本能的行为来使用户注意到那些【真正需要从这个页面的其他元素中突出的东西】。在网页界面上的错误提示通常会被融进页面的其他元素中;通过给文本一些不同的颜色(比如说,红色)或用一个醒目的图形来将它们凸显出来,就能让这个界面完全不同了。

个视觉上的中性布局(左上),没有任何一个元素突出。

比可以用来引导用户在页面上的视线(右下)或将它们的注意力吸引到几个关键要素上(左下)。

过度的对比导致了混乱的视觉(右下)。

不管怎样,这些工作的总体策略是,“差异”必须足够清晰,用户要足够分辨出某个设计选择时特意要传达一些信息的。当两个设计元素的处理相似又不太一样的时候,用户就会困惑。“为什么这些会不一样?他们本来是一样的吗?也许只是弄错了。还是我应该在这里注意到什么东西吗?”而事实上是,我们希望这两者都能抓住用户的目光,并且让他们认为这是有意而为之的。

在你的设计中保持一致性是另一个重要的组成部分,它能使你的设计有效地传达信息,而不会导致用户迷惑或焦虑。“一致性”在视觉设计的许多不同方面都会起到作用。

将视觉元素的大小保持一样的尺寸,这可以使你在需要的时候把它们更容易地重新组合在一个新的设计。举个例子来说,如果你在导航中使用的所有图形按钮都是同一个高度,那么它们就可以在需要的时候被混合并匹配,而不会形成一个布局杂乱或要求重新设计的图形。

基于栅格线

基于栅格线的布局是来自平面设计的一种技术,是一种对网页也同样有效的技术。这个方法通过使用“母版”来确保设计的一致性,各种布局都是根据这个模板来创建的。不是每一个布局都要使用栅格的每一部分(事实上,大多数的布局可能只会用到很少的一部分)但是每一个元素在网格上的位置应该是统一和一致的。创建一个栅格来指导布局工作可以保证一致性而不会牺牲统一性。

不管怎样,由于设备、屏幕尺寸和屏幕分辨率千差万别,把栅格应用到屏幕交互式产品上不会像平面设计一样简单。你很容易就掉到“坚持使用栅格系统”的漩涡之中(或任何一种可以保证一致的标准)甚至在它们根本就行不通的时候。在没有设计标准的情况下进行工作是不好的,但是教条式地遵守设计标准,而不顾你适当的需求就可能会更糟。

也许产品采取了一个在栅格被开发出来的时候没有人能想象出来的新功能,也许这个栅格从一开始就不怎么行得通。不管原因是什么,重要的是,你要能认识到什么时候应该重新考虑设计系统的基础。

本文来自网络或网友投稿,如有侵犯您的权益请联系邮箱:wyl860211@qq.com,我们将第一时间删除。

相关素材