理解UI设计准则:《认知与设计》读书笔记 1

其它优秀文章推荐:

如何利用好模糊设计?

字体与设计:摆脱字体选择困难症

留白设计和UI设计准则

视觉设计:15条科学上的设计法则讲解

中文、西文字体基础应用方式讲解

快速避免【视觉无障碍设计】中的雷

非科班设计师的出路:抛弃切尔诺贝利式思维

文字编排、排版中那些实用的小技巧!

第一章:我们感知自己的期望

我们对周围世界的感知不是对其真实的描述。我们感知到的很大程度上是我们期望感知到的。以下几个因素影响我们的预期,也因此影响我们的感知。

经验影响感知

计算机软件和网站的用户经常不认真看屏幕就点击按钮或者链接。他们更多是靠以往的经验来引导他们对界面的感知,而不是看清屏幕上的实际内容。有时这会让那个软件设计者感到挫败,他们总以为用户会去看屏幕上有什么。但感知并非如此运作。

环境影响感知

视觉感知,尤其是阅读,不完全是一个自下而上的过程,其中也有自下而上的作用。

对于识别一个字母、一个单词、一张脸或者其他任何物体的神经活动,都包含了环境刺激产生的神经信号的输入。这个环境包括感知到的其他临近对象和事件,甚至由环境激活的对以往感知到的对象和事件的记忆。

目标影响感知

我们的目标会过滤我们的感知:与目标无关的东西会被提前过滤掉,而不会进入到意识层面。

当人们在软件里或者网站上寻找信息或者某个功能时,他们并不会认真阅读,只是快速而粗略地扫描屏幕上与目标相关的东西。他们不是仅仅忽略掉与目标无关的东西,而是经常根本注意不到他们。

目标对感知的过滤在成年人身上特别可靠,他们比儿童对目标更专注。儿童更容易被刺激驱使,目标较少地过滤他们的感知。这种特点使得他们比成年人更容易分心,但也使得他们观察时更不容易被影响。

当前的目标影响我们的感知的机理是什么?

1、影响我们注意什么?

感知是主动的,不是被动的。我们始终移动眼睛、耳朵、手等去寻找周围与我们正在做或者正要做的事最相关的东西。

2、使我们的感知系统对某些特性敏感

当我们在寻找某件物品时,大脑能预先启动我们的感官,使得他们对要寻找的东西变得非常敏感。

对设计意味着什么

1、避免歧义

避免显示有歧义的信息,并通过测试确认所有用户对信息的理解是一致的。当无法消除歧义时,要么依靠标准或者惯性,要么告知用户用你期望的方式去理解歧义之处。

2、保持一致

在一致的位置摆放信息和控件。不同页面上提供的相同功能的控件和数据显示应该摆放在每一页相同的位置,而且他们还应该有相同的颜色、字体和阴影等。这样的一致性能让用户很快地找到和识别他们。

3、理解目标

用户去用一个系统是有目标的。设计者应该了解这些目标,要认识到不同用户的目标可能不同,而且他们的目标强烈左右他们能感知到什么。在一次交互的每个点上,确保提供了用户需要的信息,并非常清晰地对应到一个可能的用户目标,使用户能到注意到并使用这些信息。

理解UI设计准则:《认知与设计》读书笔记 1

第二章:为观察结构优化我们的视觉

20世纪早期,一个由德国心理学家组成的研究小组试图解释人类视觉的工作原理。他们观察了许多重要的视觉现象并对它们编订了目录。其中最基础的发现是人类视觉是整体的:我们的视觉系统自动对视觉输入构建结构,并且在神经系统层面上感知形状、图形和物体,而不是只看到互不相连的边、线和区域。“形状”和“图形”在德语中是Gestalt,因此这些理论也就叫做视觉感知的格式塔(Gestalt)原理。

格式塔原理为图形和用户界面设计准则提供了有用的基础。

格式塔原理:接近性

原理:

接近性原理说的是物体之间的相对距离会影响我们感知他们是否以及如何组织在一起。互相靠近(相对于其他物体)的物体看起来属于一组,而哪些距离较远的就不是。
接近性原理与软件、网站和电器设备中的控件面板和数据表单的布局明显相关。设计者们经常使用分组框或分割线将屏幕上的控件和数据显示分隔开。

应用于设计:

然而,根据接近性原理,可以通过拉近某些对象之间的距离,拉开与其他对象的距离使他们在视觉上成为一组,而不需要分组框或者可见的边界。许多图形设计专家推荐这一方式来减少用户界面上的视觉凌乱感和代码数量。

格式塔原理:相似性

如果其他因素相同,那么相似的物体看起来归属于一组。

格式塔原理:连续性

人类视觉倾向于看到连续的形式,必要时甚至会填充遗漏。

格式塔原理:封闭性

我们的视觉系统自动尝试将敞开的图形关闭起来,从而将其感知为完整的物体而不是分散的碎片。

格式塔原理:对称性

原理:

我们倾向于分解复杂的场景来降低复杂度。我们的视觉区域中的信息不止一个可能的解析,但我们的视觉会自动组织并解析数据,从而简化这些数据并赋予他们对称性。

应用于设计:

在印刷和电脑屏幕上,可以利用视觉系统对称性原理的依赖,用平面显示来表现三维物体。

格式塔原理:主体/背景

原理:
大脑将视觉区域分为主体和背景,主体包括一个场景中占据我们主要注意的所有元素,其余则是背景。主体/背景原理也说明场景的特点会影响视觉系统对场景中的主体和背景的解析。例如:当一个小物体或者色块与更大的物体或者色块重叠时,我们倾向于认为小的物体是主体而大的物体是背景。
然而,我们对主体与背景的差别的感知并不全部由场景的特点决定,也依赖于观者的注意力的焦点。

应用于设计:

在用户界面设计和网页设计中,主体/背景原理经常用来显示内容“之后”放置印象诱导的背景。背景可以传递信息(用户当前所在位置),或者暗示一个主题、品牌或者内容所表达的情绪。
主体/背景原理也经常用来在其他内容之上弹出信息。作为用户注意力焦点的内容临时成为了新信息的背景,新的信息短暂地作为新的主体。这种方式通常比将旧信息临时替换称新信息更好,因为这能够帮助用户理解他们在交互中所处的环境。

格式塔原理:共同命运

原理:

共同命运原理于接近性原理和相似性原理相关,都影响我们所感知的物体是否成组。共同命运原理指出一起运动的物体被感知为属于一组或者是彼此相关的。

应用于设计:

共同的运动暗示共同的历程,在一些动态模拟中可用以展示不同实体的关系。例如:GapMinder的图像中代表国家的点模拟经济发展的多个因素随着时间变化而变化,一同运动的国家具有相同的发展历史。

将格式塔综合起来

在显示世界的视觉场景中,各种格式塔原理不是孤立的,而是共同起作用的。
同时用上所有的格式塔原理时,设计可能会导致无意产生的视觉关系。推荐的办法是,在设计一个显示之后,使用每个格式塔原理——接近性原理、相似性原理、连续性原理、封闭性原理、对称性原理、主体/背景原理以及共同命运原理,来考量各个设计元素之间的关系是都符合设计的初衷。

理解UI设计准则:《认知与设计》读书笔记 1

第三章:我们寻找和使用视觉结构

信息呈现方式越是结构化和精炼,人们就越能更快和更容易地扫描和理解。当然,要让信息能够被快速地浏览,仅仅把他们们变得精炼、结构化和不重复是不够的,他们还必须遵从图形设计的规则,第二章已经介绍了其中一些。

结构提高了用户浏览长数字的能力

即使是少量的信息也能通过结构化使其更容易被浏览。

比如:电话号码和信用卡号码就是两个例子
easy:(415)123-4567
hard:4151234567

easy:123456789012 3456
hard:1234567890123456

数据专用控件提供了更多的结构

结构从分割字段再往前一步就是数据专用控件。设计者可以用控件而不是简单的(不论分割还是不分割的)文本输入框来显示某个具体的数据的值和接收输入。
例如:日期可以用菜单与弹出日历控件的合并的形式来显示和接受。

理解UI设计准则:《认知与设计》读书笔记 1

例如:将分段的文本字段和数据专用空间合并起来也可以提供可视化结构。

理解UI设计准则:《认知与设计》读书笔记 1

视觉层次让人专注于相关的信息

可视化信息显示的最重要目标之一是提供一个视觉层次,即信息的布置安排能够:
当用户查看信息时,视觉层次能够让人从其目标不相关的内容中立刻区分出与其目标更相关的内容,并将注意力放在他们所关心的信息上,因为他们能够轻松地跳过不相关的信息,所以能更快地找到要找的东西。

在交互控制面板和表单中,可视化层次也同样重要,甚至更重要。

理解UI设计准则:《认知与设计》读书笔记 1

第四章:阅读不是自然的

我们的大脑是为语言而不是为阅读设计的

说话和理解口头语言是一个自然的人类活动,但阅读不是。在数十万年或许百万年里,人类大脑逐步进化出了口头语言所需的神经结构,其结果是普通人在幼童时期,不需要任何系统的训练就能够学会他所在环境下的语言。过了孩童时期,我们天生的口头语言学习能力明显下降。到了青春期,学习一门新语言对我们来说就像学习另外一项能力一样,需要指导和练习,而且负责语言学习和处理的脑区与孩童早期也不同。

相反,写作与阅读直到公元前几千年前才出现,而且到了四五百年前才普及起来,远远迟于人脑达到现代进化水平。在孩童时期,我们的大脑没有显示出任何特殊的天生的阅读能力。阅读其实是一种人造的、通过系统的指导和训练获得的能力。因此,抚养人若不为儿童朗读,或者儿童在学校里没能获得适当的阅读指导,他们可能永远无法学会阅读。

由于种种原因,学会了阅读的人们未必善于阅读。最后,有知觉或者感觉障碍的人可能永远无法成为良好的阅读者。

学习阅读就是训练我们的大脑(包括视觉系统)去识别模式。大脑要识别的这些模式有一个从低到高的层次。

1、线条、轮廓和形状是大脑先天能够识别的基本视觉特征。我们不必学习去识别他们。
2、基本的视觉特征结合形成模式,即我们认识的字符:字母、数字和其他标准符号。在如中文一类的表意文字里,符号代表了整个字或者概念。
3、在拼音文字里,字符形成的模式成为词素,我们把它们识别为一些小块的含义。例如:farm、tax、-ed和-ing都是英语的词素。
4、词素合并形成我们所说的单词,例如:farm、tax、-ed和-ing能被组成单词farm、farmec、farming、tax、taxed和taxing。甚至在表意文字里也有作为词素或者起修饰作用的符号,他们不代表任何词或者概念。
5、单词组成我们所学的词组、成语和语句。
6、语句组成段落。

阅读是特征驱动还是语境驱动

阅读涉及识别特征和模式。模式识别可以是自下而上、特征驱动的过程,也可以是自上而下、上下午驱动的过程,因此阅读也是如此。

在进行特征驱动的阅读时,视觉系统从辨别简单特征开始。从线条、轮廓和形状——字母、数字或者在表意文字里的词一—词素和单词一—词组、句子和段落。特征驱动的阅读有时被称为“自下而上的”或者“无语境的”,大脑天生具有识别线、边和角等基本特征的能力,相反,对次数、单词和短语的识别能力就需要学习。

语境驱动或者自上而下的阅读与特征驱动阅读时并行的,但运作的方式却相反预警驱动的阅读从完整的句子或者段落的主旨,到单词和字符。语境驱动阅读不可能完全称为无意识的,因为大部分短语层和语句层的模式和语境不可能出现得频繁到能够形成特定的神经触发的模式。但还是会有些例外,比如习惯用语。

最有效的阅读方式是无语境的、自下而上特征驱动的方式,这需要熟练掌握到无意识的程度。尽管与特征阅读是两个并行的阅读方式,但语境驱动阅读在如今主要被视为一种候补的方法,只有在特征驱动阅读存在困难或者不能达到足够无意识的时候才起作用。

有些人在儿童期没能获得足够的阅读经验,让特征驱动的识别过程变成无意识的,他们长大后就觉得阅读在精神上是费劲和压力重重的,因此也就避免阅读,这持续加剧了他们在阅读能力上的不足。

熟练阅读和不熟练阅读使用大脑的不同部位

大脑扫描技术带来的发现无法指出使用了哪种处理方式,但的确支持了高级阅读者和初级阅读者使用不同处理方式的理论。(初级阅读者和高级阅读者在这里就不做解释了)

糟糕的信息设计会影响阅读

不常见和不熟悉的词汇

一类不熟悉的词汇是计算机术语,有时被称为“电脑玩家用语”。即使不是纯计算机技术术语,阅读也可能被不常见的词汇干扰。

难以辨认的书写和字型

即使使用了熟悉的词汇,阅读还会被难以辨认的书写和字型干扰,自下而上、无语境、无意识的阅读是对字母和单词基于视觉特征的识别。

微小的字体

另一种在应用软件、网站和电子产品中使文字难以阅读的情况是,使用对目标用户的视觉系统来说小到难以识别的字体。软件开发者有时会使用非常小的字体,因为他们需要在很小的空间里显示很多文字。

但如果系统的目标用户无法阅读这些文字,或者阅读起来非常费劲,文字还不如不要。

嘈杂背景下的文字

文字中和周围的视觉噪声能够干扰对特征、字符和单词的识别,使我们退出基于特征的无意识阅读模式,而进入有意识的基于语境的阅读模式。在软件的用户界面和网站中,视觉噪声经常来自于设计师将文字放在有图案的背景上,或者正文和背景的反差太小。

有些情况下,设计者有意让文字难以阅读。使用难识别的文字来测试一个用户是否是人的手段叫做captcha。

当然,在用户界面上显示的大部分文字应该是容易阅读的。带图案的背景即使不是非常抢眼,也能干扰人们阅读置于其上的文字。

信息被重复的内容淹没

视觉噪声也能来自文字本身。如果连续多行文字里有许多重复内容,读者接收到的相关反馈就太少,不知道自己正在读哪一行。另外,这也让人很难从中提取出重要的信息。
另一个说明重复内容制作噪声的例子是Apple.com的电脑商店。订购笔记本电脑的页面上用非常重复的方式列出了不同的键盘选项,使人很难发觉键盘之间的核心差别其实是它们所支持的语言。

居中对齐的文字

在大部分熟练阅读者的阅读过程中,高度无意识的一方面就是眼动。当自动(快速)阅读时,我们的视线被训练称回到同样的水平位置,同时向下移一行。如果文字是居中或者右对齐,每行的水平起始位置就不一样了。自动眼动因此会将我们的视线带到错误的位置,我们就必须有意识地去调整视线到每行的实际起始位置。

妨碍阅读的设计缺陷的组合

前景和背景反差太小,而有些地方反差又太大;大段文字居中对齐,而且将文字放在有图案的背景上。

对设计的启示:支持,而不是干扰阅读

保证用户界面里的文字允许基于特征的无意识处理有效地进行,可以通过避免之前描述的破坏性缺陷做到。这些缺陷包括难辨认的或太小的字体、带图案的背景和居中对齐等。
使用有限的、高度一致的词汇,在业界这又是被称为“更直白的语言”或者“简单的语言”。

将文字格式设计出视觉层次,以便使浏览更轻松,如使用标题、列表、表格和视觉上加强了单词。

软件里要求的阅读很多都是不必要的

软件设计者经常如此为冗长的指令文字辩护:“我们需要所有那些文字来清楚地向用户解释做什么。”然而,指令经常可以短小精悍且保持清晰明确。
甚至当文字的内容不是指令而是产品描述时,将厂家想要说的全部洋洋洒洒地写出来,让人从头到尾看一遍的做法也只会起反作用。大部分潜在客户不可能也不愿意去读这些文字。

对设计的启示:尽量少让人阅读

将用户界面里的文字量尽可能减少,不要让用户看一大版面的文字。在用户指导手册里,使用最少的文字让用户完成目标。

对真实用户的测试

设计者应该在目标用户群中测试,从而确信用户能够快速轻松地阅读所有重要信息。

理解UI设计准则:《认知与设计》读书笔记 1



属性标签: , ,

欢迎留言

页面生成消耗的时间 0.420 秒,此页面一共查询了 109 次数据库!缓存时间:2020-09-27 15:33:13你的IP为:203.208.60.42