理解交互设计

阅读前,思考以下三个问题:1,什么是交互设计?2,互联网APP的交互设计如何做?3,WEB软件交互设计如何做?

设计前思考以下十二个问题:1,我的用户是哪些人?2,我的用户在试图实现什么?3,我的用户如何看待他们要使用的产品?4,我的用户会发现哪些体验是吸引人并且是有收获的?5,我的产品应该如何工作?6,用户如何同产品交互?7,我的产品功能如何能最有效地组织在一起?8,我的产品以何种方式面向首次使用的用户?9,我的产品如何从技术上体现易于理解、让人喜欢、易于控制?10,我的产品如何处理产品遇到的问题?11,我的产品如何帮助偶尔使用的用户或者生手用户变得更熟练?12,我的产品如何为专家级用户提供足够的深度和力度?

第 1 章 我们的感知存在偏差

我们对周围世界的感知并不是对其真实的描述。我们感知到的很大程度上是我们期望感知到的。影响我们感知的因素有三个:经验【过去】,环境【现在】,目标【未来】

这三个影响感知的因素对于用户界面设计有什么启发?

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

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

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

实现模型--心理模型--表现模型

以微信为例,工程师设计出算法,接口,协议规则,利用代码将功能实现出来,这个过程叫实现模型。用户方看到的微信是一款方便的社交软件,这个感知就叫心理模型。微信为用户提供了功能:即时通讯,分享,阅读等,产品的这一属性就叫表现模型。

第 2 章 我们的视觉经过优化更容易看到结构

格式塔7个原理:接近性,相似性,连续性,封闭性,对称性,主体/背景,共同命运

在现实世界的视觉场景中,各种格式塔原理不是孤立的,而是共同起作用的。例如,一个典型的Mac os 桌面通常可以示范之前提到的7个原理中的6个(除了共同命运原理)。在典型的桌面中,当用户一次选取多个文件或者目录并拖拽到新的位置时,就用到了共同命运原理(与相似性原理一起)。

同时用上所有的格式塔原理时,设计可能导致无意产生的视觉关系。推荐的办法是,在设计一个显示之后,使用每个格式塔原理来考量各个设计元素是否符合设计的初衷。

第 3 章 我们探索和利用视觉结构

信息呈现方式结构化和精炼,遵从图形设计的原则,人们就能更快和更容易地扫描和理解。

结构提高了用户浏览长数字的能力。即使是少量的信息也能通过结构化使其更容易被浏览。电话号码和信用卡号码就是两个例子,为了容易浏览和记忆,习惯上这两类号码会被分割为多个部分。一个长串的数字可以用两种方式分隔:用户界面明确地为不同部分提供独立字段(日期的输入界面),或者界面提供一个字段,但允许用户输入时将号码用空格或者其他符号分隔开(信号卡号码)。这两种方式不仅提高了可读性,还能防止输入错误。

数据专用控件提供了更多的结构。结构从分割字段再往前一步就是数据专用控件,设计者可以用控件而不是简单的文本输入框来显示某个具体类型的数据的值和接收输入。例如:日期可以用菜单与弹出日历控件合并的形式来显示和接收。将分段的文本字段和数据专用控件合并起来也可以提供可视化结构,就像电子邮件地址输入字段所展示的。

视觉层次让人专注于相关的信息。可视化信息显示的最重要目标之一是提供一个视觉层次,即信息的布置安排能够:1)将信息分段,把大块整段的信息分割为各个小段;2)显著标记每个信息段和子段,以便清晰地确认各自的内容;3)以一个层次结构来展示各段及其子段,使得上层的段能够比下层更重点地被展示。

第 4 章 阅读不是自然的

(1)我们的大脑时为语言而不是为阅读设计的。

说话和理解口头语言是一个自然的人类活动,人类大脑逐渐进化出了口头语言所需的神经结构。但阅读不是,人的大脑没有设计成能够天生学习阅读,阅读其实是一种人造的,通过系统的指导和训练获得的能力。学习阅读就是训练我们的大脑(包括视觉系统)的识别模式,大脑要学习识别的这些模式有一个从低到高的层次。

想知道没学过阅读的人看文字是什么样的,只要用你没学过的语言和文字打印出来一段话看看就够了。

(2)阅读是特征驱动还是语境驱动

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

特征驱动阅读。特征驱动阅读时,视觉系统从辨别简单特征开始,比如纸张或者屏幕上某个方向的线段或者某个圆角的弧线,然后组合成更复杂的特征,比如夹角/多个弧线/形状和图案等。接着大脑再将某些性状识别为字符或者符号,它们代表了字母/数字或者在表意文字里的词。在拼音文字里,不同字母组被感知为词素和单词。所有文字里,单词序列都被理解成带有含义的词组/句子和段落。

特征驱动的阅读有时被称为“自下而上的”或者“无语境的”。大脑天生具有识别线/边和角等基本特征的能力。相反,对词素/单词和短语的识别能力就需要学习。从对字母/词素和单词进行非主动的/有意识的分析开始,经过足够的训练,这个过程就能够变成无意识的。显然,词素/单词或者短语越常见,对它的识别也就越可能无意识。

语境驱动阅读。语境驱动与特征驱动阅读时并行的,但运作的方式却相反,语境驱动的阅读从完整的句子或者段落的主旨,到单词和字符。视觉系统从识别高层的模式或者事先知晓文字的含义开始,接着利用对文字内容的事先了解去弄清楚或者猜测出高层模式的各个组成部分应该是什么。语境驱动阅读不可能完全成为无意识的,因为大部分短语层和语句层的模式和语境不可能出现得频繁到能够形成特定的神经出发的模式。但还是有些例外,比如习惯用语。

几十年来,阅读被认为使用了特征驱动(自下而上)和语境驱动(自上而下)两种处理方式。除了能够通过分析字和词来搞清楚一句话的含义,人们还能够从知晓一句话的含义去判断其中的词,或者知道一个单词而判断其中的字母。熟练的阅读是自下而上还是自上而下呢?

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

熟练的读者也许会在基于特征阅读被糟糕的信息展示方式干扰时转向基于语境的阅读。还有,在使用这两种阅读方式去解读看到的文字时,语境中的暗示有时比特征更有优势。作为一个基于语境阅读的例子,到英国旅游的美国人有时会将“to let”标志看成“toilet”,因为在美国他们更容易看到“toilet”,但几乎从来没有见过“to let”这个短语,他们平时使用对应的短语是“for rent”。

对于较不熟练的阅读者,基于特征阅读不是无意识的,而是有意识的/费劲的。因此,他们大部分的阅读使用基于语境的方式。这种不得已的基于语境的阅读和非无意识的基于特征的阅读消耗了短期感知能力,导致对内容缺少理解。他们不得不把注意力放在解读一串串单词上,导致没有更多精力构建语句和段落的含义。这就是为什么差的阅读者可以大声读完一段文字,却不清楚究竟读了什么。

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

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

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

糟糕的书写或者显示会将熟练阅读者无意识的无语境的阅读降低为有意识的基于语境的阅读,增加记忆负担,从而降低阅读速度和理解能力。对于非熟练阅读者,糟糕的文字显示可能会完全阻碍阅读。

不常见和不熟悉的词汇。软件中阻碍阅读的常见方式之一是使用用户不熟悉的词汇,即使是熟练的阅读者在遇到不常见的词汇时,大脑也需要使用非无意识的处理方式。

难以辨认的书写和字型。自下而上/无语境/无意识的阅读是对字母和单词基于视觉特征的识别。因此,一种具有难以辨认的特征和形状的字型就很难阅读。

微小的字体。对目标用户的视觉系统来说小到难以识别的字体,阅读起来非常费劲,文字还不如不要。

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

信息被重复的内容淹没。视觉噪声也能来自文字本身。如果连续多行文字里有许多重复内容,读者接收到的相关反馈就太少,不知道自己正在读哪一行。另外,这也让人很难从中提取出重要的信息。

居中对齐的文字。在大部分熟练阅读者的阅读过程中,高度无意识的一方面就是眼动。当自动阅读时,我们的视线被训练成回到同样的水平位置,同时向下移一行,如果文字时剧中或者右对齐,每行的水平起始位置就不一样了。自动眼动因此会将我们的视线带到错误的位置,我们就必须有意识地去调整视线到每行的实际起始位置。这使得我们不得不退出无意识状态,阅读速度一下就慢下来。诗歌和婚礼请柬上的文字剧中对齐或许是可以的,但对于任何其他类型的文字,居中就是缺点了。

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

熟练的阅读大部分基于对特征/字母和单词的无意识识别,识别越容易,阅读也就是越快越容易。相反,非熟练的阅读需要语境提示的帮助。交互系统的设计者可以遵循一下准则来为阅读提供支持:

1)保证用户界面里的文字允许基于特征的无意识处理有效地进行,可以通过避免之前描述的破坏性缺陷做到。这些缺陷包括难以辨认的活太小的字体,带图案的背景和居中对齐。

2)使用有效的,高度一致的词汇。

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

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

除了会影响阅读的设计错误外,很多软件的用户界面还显示了太多的文字,用户要读的远远超过实际所需要的。

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

(6)对真实用户的测试

设计者应该将设计在目标用户群中测试,从而确信用户能够快速轻松地阅读所有要重要信息,利用原型和部分实现的功能,一些测试可以在早期就做,但在发布之前仍需测试。

第 5 章 色觉是有限的

我们的视觉系统对颜色对比度更敏感,而不是对绝对亮度敏感。

区别颜色的能力取决于颜色是如何呈现的。(1)深浅度。两个颜色越浅(不饱和),就越男将它们分开。(2)色块的大小。对象越小或者越细,就越难辨别它们的颜色。(3)分隔的距离。两个色块之间离的越远就越男区分它们的颜色,尤其是当它们之间的距离大到眼球需要运动时。

色盲。在颜色呈现上影响交互系统设计准则的第四个因素是,使用的颜色是否能够被常见类型的色盲用户区分开。最常见的色盲是红绿色盲。

影响色彩区分能力的外部因素。(1)彩色显示屏的差异。(2)灰度显示器。(3)显示器角度。(4)环境光线。这四种外部因素通常都不是软件设计者能控制的。因此,设计者们应记住他们并不对用户的观看体验具有完全的控制。

使用色彩的准则。在依赖颜色来传递信息的交互软件系统中,遵循以下5条准则,以保证用户能够获取信息。

(1)用饱和度、光度以及色相来区分颜色。比main采用轻微的差别,确保色彩之间有较高的反差。一个测试颜色差异的办法是在灰度模式下观察。如果你不能在灰度模式下区分出不同的颜色,那么这些颜色之间的差别就不够。

(2)使用独特的颜色。例如黑白红绿黄蓝。

(3)避免使用色盲的人无法区分的颜色对。这样的颜色对有深红和黑、深红和深绿、蓝色和紫色以及浅绿和白色。不要在任何深色背景上使用深红色、蓝色或者紫色。相反,在浅黄色和浅绿色背景上应该使用深红、蓝色和紫色。用在线色觉障碍模拟器检查网页和图像,看它们在有不同色觉障碍的人看起来是什么样子的。

(5)将强烈的对抗色分开。将对抗色放在一起会产生令人难受的闪烁的感觉,因此也必须避免。

第 6 章 我们的边界视力很糟糕

处于人们边界中的暗色静止物体经常不被注意到;边界视野中物体的运动通常会被察觉。

中央凹的分辨率与边界视野的分辨率比较

边界视觉有什么用

电脑用户界面中的例子

让信息可见的常用方法

(1)放在用户所看的位置上。当与图形用户界面交互时,人们的注意力在可预期的地方。在西方社会,人们倾向从左上角向右下角扫描表单和控件。当移动屏幕上的指针时,人们通常看着它所在的位置或者将要移动到的地方。当人们点击一个按钮或者链接时,通常可以假设他们正看着它,至少在点击之后的一小段时间里再看。设计者可以利用这个可可预计性将出错消息摆放在期待用户可能看到的地方。

(2)标记出错误。用某种方式显著地标记出错误并清晰地指明出错了。这通常只要将出错消息摆放在它所指的地方即可,除非这会将出错消息放到离用户可能看到的位置非常远的地方。

(3)使用错误符号来明显地标记出错误或者错误消息。

(4)保留红色以呈现错误(信息)。习惯上,在交互的计算机系统里,红色暗示警告、危险、问题、错误等。使用红色来标记其他信息会到hi误解。但假设你在为斯坦福大学设计网站,它的学校颜色是红色,或者你为中国市场设计,在哪里红色被认为是吉祥、积极的颜色。你该怎么办?那就使用另一种颜色代表错误,用错误符号标记或者使用其他更强大的方法。

让用户注意到信息的重武器:请小心使用。例如,弹出对话框中的信息,声音,闪烁或者短暂的晃动。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269

推荐阅读更多精彩内容