数字产品设计与心理学17 - 美感

数字界面的视觉语言数字产品设计与心理学12 - 视觉通道数字产品设计与心理学13 - 颜色和深色模式数字产品设计与心理学14 - 界面的词汇和语法数字产品设计与心理学15 - 提供视觉结构数字产品设计与心理学16 - 视觉隐喻美感也是一种视觉语法吗？如果说语法是一种规则的话，那么美感确实是处理视觉要素的重要准则，它强调精炼、统一、和谐、平衡。苹果的人机交互设计准则有六条设计原则：统一的美感 Aesthetic Integrity一致性 Consistency直接操作 Direct Manipulation反馈 Feedback隐喻 Metaphors用户控制 User Control第一条便强调了美感：统一的美感代表了应用的外观和行为，与其功能的整合程度。 美感是一种整体的体验和感受，不仅来自视觉的平衡和愉悦，而且来自人与数字产品互动的整个过程。诺曼在《情感化设计》一书中提出的观点是：有吸引力的东西更好用。有美感的事物更容易吸引人，使人感觉愉悦，人们在愉悦状态下也更容易克服所碰到的问题（诺曼，2015）。美感体验的模型感受到美，究竟是一个怎样的过程？研究美学心理过程的学者，曾经提出过一个美感体验模型（Model...

1d

数字产品设计与心理学16 - 视觉隐喻

隐喻是借助过去已经熟悉的事物，来认识和理解新事物的方法。人类的概念系统是通过隐喻性来构成和界定的。隐喻允许我们依据一个经验领域去理解另一个经验领域。（莱考夫 & 约翰逊，2015）我们的概念系统建立于真实世界中的各种经验。在计算机问世的早期，人并没有与计算机对话的经验。为了跨越机器与人的沟通鸿沟，数字产品一直都有使用隐喻的传统。桌面就是最经典的人机交互界面隐喻。早在 1970 年，施乐帕洛阿尔托研究中心的 Alan Kay 就在计算机系统中引入桌面隐喻。苹果公司在 1984 年推出图形用户界面 Macintosh 系统，这是计算机系统首次提供了一整套桌面办公的隐喻，包含现实生活中的物品图标（例如垃圾箱）。这让那些熟悉日常办公室环境的用户，能够直观地理解如何操作电脑。图片来源：https://en.wikipedia.org/wiki/Macintosh50...

4d

数字产品设计与心理学15 - 提供视觉结构

视觉依赖结构来简化信息。格式塔原理告诉我们，视觉甚至会主动「创造」结构以减轻信息加工的负担。如果想高效地传递信息，就必需为视觉提供一个清晰、符合直觉的视觉结构。结构是不同对象之间的关系。比如说，一篇文章采用总-分结构，意味着段落之间形成了总体-组成部分的关系，作者先给出总的结论，然后用多个段落说明分论点。让我们来复习一下 DP10 讲过的视觉搜索。我们知道，视网膜的分辨率从中心向边缘递减。视觉边缘只能识别较大的目标，无法看清细微的物体。如果一个细小的目标不在视网膜中央的探测域内，那要怎样才能把它找出来呢？秘诀在于快速眼动。眼球多次移动，如果一次聚焦没有找到目标，就在探测域附近继续搜索，直到确定目标。如上图所示，眼球在查找目标的过程中，一共移动并聚焦了 5 次。在第 4 次注视时，发现目标在探测域边缘，下一次眼动就可以把目标对准到视网膜中心。这种方法也可以应用在数字产品的界面布局上面。层级设计良好的页面层级结构，不只是因为「好看」，这些结构其实在为视觉搜索提供线索，暗示眼睛可以先看哪里、再看哪里，而不必茫然扫视。如果信息较多，则需要提供不同的层级结构，引导用户先搜索大的结构，找到感兴趣的模块，再进一步寻找位于细节层次中的信息。如果用户对...

6d

作家之眼，治疗师之诚

已经很久没有写过读书笔记了，我想这大概与自己的读书状态有关。长久以来，阅读对我来说都是一种压力，甚至一种负担，但相比面对现实世界的复杂所产生的惶惑和疲倦，我还是时不时会遁逃到书本中寻求安慰。对读书笔记的态度就更矛盾了。要写点正儿八经的东西绝对是焦虑的来源：期待自己写出一些其实在阅读当下并没有理解到、体会到的东西——读后的二次思考，或者说让那些阅读时闪现的火星、漂荡在空气中的只言片语都落下脚、现出形，变成一段又一段蔚为可观的文字，在我想象中，这是一件无从下手的事情。可是每当经历过从无到有的历程，不相信的事情就会成为脚踏实地的经验。现在回看好些笔记，我不确定自己真的能写出来： GEB —— 一次关于有序与无序的探寻之旅，讲述设计本身就是另外一种设计。就算有这些经验，每一次「要写点什么」的想法依然让我害怕。大概有三年时间，我又回到了贪图阅读快感的状态：只管看，囫囵吞枣地看，不负责任地看，雁过无痕地看。直到最近，好像才感觉到自己和阅读的关系有所改善，既不必贪婪地逼迫自己榨取，也不沉湎于消费式的猎奇、已读数字的增加。允许自己不必读完一本书，也可以一读再读；可以毫无收获，也可以只对一句话有片刻共鸣；愿意面对书写时自曝其短的不安，也可以继续写一些漂...

2w

数字产品设计与心理学14 - 界面的词汇和语法

语言是思想的载体，是沟通的主要工具，在人类社会交往过程中逐渐发展起来。我们使用与他人共享的词汇、语法来表达含义，以语音、文字或符号向他人传递信息。视觉也可以类比为一门语言。作为传递信息的重要方式，视觉也有独特的内在属性和工作机制，并且可以拆分为一系列可识别、可处理的元素——也就是视觉的「词汇」。跟语言不同，视觉思维的基础是图案感知，而不是具有共识的表征符号。图案感知能力部分是天生的，部分靠后天习得。构成视觉系统的逻辑，主要是空间结构和关系，这跟语言的逻辑差异很大（维尔，2009）。计算机至今还没有学会人类的自然语言，于是需要预先设定一组双方都能理解的语言来辅助沟通。数字产品中几乎所有的图形设计，都包含视觉表达和语言表达的部分。如果要表达的内容语义清晰，可以用特定的词汇或语句准确描述，那么文字表达就比较合适，例如用户的兴趣标签。如果内容涉及到复杂的关系，尤其是空间的、情境相关的、整体的、结构的，则用图像或图表更加适合，例如地图，又比如描述金融系统资金流关系的图表。视觉词汇和语法在自然语言中，词汇是承载含义的基本单位。那么在数字产品中，视觉语言中的词汇又代表什么呢？第一类是属性词汇：描述对象的属性——这是什么。包括形式（文字/图形/图片/...

2w

数字产品设计与心理学13 - 颜色和深色模式

颜色是最重要的视觉通道和视觉语言之一。设计师可以用颜色来强化或突出一个想法，引起情绪反应，或者吸引用户注意一些信息。iOS 用醒目的红色标记某些重要或危险的操作颜色感知颜色是描述光的颜色类别的视觉感知特征，它由眼睛、大脑和生活经验共同作用产生。没有光，就没有颜色。不过，可见光是一种电磁波，本身并不带颜色，颜色只是人的一种感知。那么人是怎么「看见」颜色的呢？这首先要归功于眼睛视网膜里的视椎细胞，它们对不同频率的光很敏感。当人眼识别可见光，并在大脑中加工光源中编码的信息，便产生了颜色感知。大部分时间里，视觉完全依靠视椎细胞提供信息。图片来源：https://en.wikipedia.org/wiki/Color关于颜色视觉，有两个主流的理论：三原色视觉理论（trichromatic theory）与补色过程理论（opponent-process...

3w

数字产品设计与心理学12 - 视觉通道

人的视觉感知系统，是迄今为止人类所知的处理带宽最高的生物系统（陈为，2019）。视觉接收的原始数据量，高达 109 比特/秒。人类视觉的模式识别能力很强，从可视符号中获取信息的效率远高于文本和数字。有时候只要基于某些视觉特征，就能启动下意识的快速眼动搜索。从上一小节我们知道，想让某个物体「鹤立鸡群」，就要突出它的一些初级视觉通道特征，例如使用不一样的颜色。那么，如果要让多个物体都易于识别，该怎么办呢？初级视觉皮层中的各层，又分为许多小的区域，分别处理形状、颜色和运动等，如果想要在众多目标中快速识别，最有效的方法就是使用不同的视觉通道。视觉通道是可视化中的重要概念。可视化编码由标记和视觉通道组成。标记通常是一些抽象的几何图形元素，如点、线、面、体。视觉通道为标记提供视觉特征，包括位置、大小、形状、颜色、运动方向、色调、亮度等。感知系统接收视觉信号时，有两种基本的识别模式：类别模式：获得关于对象本身特征和位置等信息，描述对象是什么或在哪里次序模式：获得关于对象某一属性在数值上的程度信息，描述对象具体有多少对应这两种识别模式，可以划分视觉通道为定性（类别）和定量（连续、有序）两种。例如，用不同色调表现定性的类别数据，用同一颜色的不同亮度表示...

3w

数字产品设计与心理学11 - 视觉的偏好

1. 视觉讨厌杂乱在日本的设计教育纪录片《啊！设计》中，有一个十分吸引人目光的小栏目，叫做「拆解」。节目组以定格动画的方式，把日常物品完全拆开并且整理好，过程引起极度舒适（尤其是对设计师而言）。比如，拆解零食：有序的环境让视觉更加放松，这种放松一部分来自于时刻知道「该往哪里去」。视觉焦点好比是个执行侦查任务的跳伞兵，每次执行任务时，他从飞机上跳出，张开降落伞着陆。偏差不可避免，这位侦查员无法精确地落在预定目标点，他甚至有可能完全不清楚自己降落在了哪里。这跟我们第一次打开某个网站/ App 页面时的状况很相像，终极问题三联会在这个时候冒出来：我是谁，我在哪，我要去哪里？如果侦察兵着陆后，发现周围是荒无人烟的海滩，一边是海，一边是沙滩，抬头就能通过日月星辰判断方向，那么他很快就知道该往哪里走。如果侦察兵落在了一片热带丛林中，藤蔓密布，大树参天，不见天日，四下是乱窜的奇珍异兽，眼前飞过各种叫不出名字的昆虫，他怎么知道自己下一步要朝哪里迈呢？无论视觉焦点最初降落在哪里，要让它很快找到出路。杂乱的视觉环境就像让眼睛深处热带丛林，不利于信息识别和提取，更容易看不见就在眼前的事物。视觉不喜欢杂乱，这是人人都有的直观感受。但什么是杂乱，哪些因素造成了...

4w

数字产品设计与心理学10 - 解密视觉搜索

地图是我最喜爱的视觉工具。不仅因为我曾经学习相关的专业，而且在生活中我还是一个路痴——查看地图是日常功课（也是爱好）。这天，我跟一位朋友约在名叫小北的片区见面，我需要从琶洲地铁站出发，找到去小北站的路线。要在日益复杂的广州地铁线路网中完成这个任务，可不简单。这是一个复杂的视觉搜索问题。然而它发生在瞬时之间，我们基本意识不到。下面我试着借助视觉搜索研究中的三层嵌套循环来展开讲讲（Ware，2010）。在外层循环中，大脑构建一系列解决问题的步骤，然后执行。例如我们进房间找眼镜，大脑给出的搜索策略大概是确定头部的方向、获得最佳视角，开始连续的特征搜索。如果没有找到目标，就转移到新的位置继续搜索。在查找地铁线路的任务中，我的初步的策略则是：圈定区域，寻找终点车站，对比路线，确定换乘站。外层循环：圈定大致的区域，找到起点和终点车站。中间循环是视觉搜索。这个阶段眼睛会寻找视觉查询的目标图案，以每秒...

5w

数字产品设计与心理学09 - 所见即所得，还是先入为主？

前面几篇文章反复提到，看并不总等于看见，一览无遗是日常体验带来的错觉。如果忘记这一点，在设计数字产品时，可能就不会仔细考虑用户如何阅读、扫视、是否容易遗漏重要的信息。学习心理学相关原理，能让我们更精细而准确地理解信息获取/处理机制，分离「看」和「看见」这两个过程。在设计时，应该为这两个过程搭建桥梁，让信息传达更为顺畅。「看」和「看见」都是人类知觉处理的过程。「看」是视觉从周边环境获取信息，它是感觉（sensation）的一部分。而「看见」是信息处理的环节，它是知觉（perception）的一部分。感觉：眼睛、耳朵等器官，把物理能量转换成大脑能够识别的神经编码的过程。知觉：一系列组织并解释外界产生的感觉信息的加工过程。举个例子：你肯定一眼就认出了这个标志。在那一瞬间，如果用低倍速回放，我们首先在「看」的阶段，从白色背景中识别出黄色曲线围合的形状，这是感觉的输入；然后我们判断出这两段黄色曲线是对称的，而且曾经见过这个形状，这是知觉加工的结果。现在，这个图形激活了存储在记忆中的模式——「看见」了金拱门的标识。两种加工方式影响视觉信息加工的因素，既包括客观外界条件的刺激，也包括主观经验的影响。当知觉去处理来自感觉的信息时，就发生自下而上的加工...

Dec 2020