前端设计，本质上是为了人。它的优劣直接反映在用户的感知上。我们的用户拥有视觉和认知两大工具：眼睛辨识美感与布局，大脑处理逻辑与互动。前端的艺术就在于如何让这两者在界面上和谐共舞，创造出既赏心悦目又能自然而然地引导用户完成任务的体验。这是前端设计的魅力所在，也是我们努力追求的目标。

眼睛

1.我们的视觉经过优化更容易看到结构

人类的视觉系统经过长期的自然选择，优化了对环境中结构性信息（如形状、边缘、纹理和对比度）的识别和处理能力，因为这有助于食物寻找、威胁识别、社会互动和空间导航等多个方面，从而提高了生存和成功的几率。（对结构不敏感的原始人，因为认不出大老虎，被吃掉了。）

这种对结构性信息的优化处理在心理学中被称为格式塔（Gestalt）原理。格式塔心理学强调整体性、连续性和有意义的模式，认为人们倾向于将视觉元素组织成有意义的群组或整体，而不仅仅是一堆独立的部分。因此，在前端设计中，了解和应用格式塔原理可以帮助开发者和设计师优化布局和视觉元素，引导用户的注意力，使他们更容易找到所需的信息或完成特定任务。

格式塔原理主要包括以下原则：

接近性：在视觉中靠得近的对象被认为是一组，有助于组织界面元素。下图（A）中的星星看起来是成行的，而（B）看起来就是成列的。

相似性：相似的对象会被视为一组，常用于按钮、链接或其他交互元素的设计。下图中，空心的星星看起来更像是一组，同时受它们的影响，使我们将星星的排列感知为横向排列。

闭合性：人们倾向于看到完整的形状，即使这个形状实际上是不完整的，这有助于图标或其他视觉元素的设计。你看到一个三角了吗？恭喜你！

连续性：人们倾向于按照一条路径或方向看到或解释对象，常用于布局和导航。如下图，我们看到的是一条被遮住了一半的🐍，而不是三段毫不相干的东西。

对称性 ：人们倾向于将复杂的视觉信息降低为更为简单的，更有对称性，更容易理解，更有意义的东西。对于下面的图形，你更倾向于感知为两个菱形，而不是右边的其他几种形式。
主体/背景 人们在感知事物的时候，总是自动的将视觉区域分为主体和背景。手机应用中常常使用的Confirm组件，通过将当前的内容变暗，将之转换成为背景，之后弹出确认框，使用户的视觉焦点转移。

共同运动：一起移动的对象会被认为是一组，这在动画和过渡效果设计中尤其重要。在mac电脑上，当我们同时选中多个文件夹，之后拖动的时候，它们会一起移动，这就是共同运动原则很好的利用。

2.色觉是有限的

人类视网膜上有三种分别对红、绿、蓝相对敏感的视锥细胞，所有的颜色就是对这三种细胞不同强度刺激的组合结果。所以我们看到的五彩缤纷的世界，本质上都是这三种视锥细胞传递给视网膜的信号合成得到的，详见：人眼视觉系统与颜色

基于人类色觉特点，在设计中有以下注意点：

视觉是为边缘反差而非为亮度优化的。下图内部色块看上去，左边比右边颜色更浅，但实际上颜色是一样。

区别颜色的能力取决于颜色是如何呈现的。越浅、越小、间隔越远，越难区分。

色盲世界上大约5%的人是色盲，

使用色彩的准则：包括用饱和度、亮度以及色相来区分颜色、避免色盲无法区分的颜色对、在颜色之外使用其他提示、将强烈的对抗色分开等

3.我们的边界视觉很糟糕

相比相机，人眼在视角、分辨率、细节、灵敏度和动态范围上有很大的不同。详见这篇文章：摄像机与人眼的对比。基于上述特点，我们在设计中需要注意以下几点：

让信息可见的常用办法包括：放在用户正在关注的位置上，使用错误符号，保留红色以呈现错误。比如知乎的登录页面，如果没有填手机号，它会标红提醒。
请小心使用强注意力工具。例如弹出式对话框、声音、闪烁或震动。例如iCloud的闪烁，如果经常使用，会引起用户的不适。
视觉搜索是线性的，除非目标"跳入"边界视野内。请找出图中的字母G，你是怎么找到的呢？一个一个找到的，还是它"跳入"了你的眼中？

现在我们已经对视觉有了基本了解，接下来我们再来看看大脑。

大脑

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

人类的语言是我们认知进化中的一个杰作，历经数十万年的发展，它成为我们思维和交流的核心。相较于语言的悠久历史，阅读则是后起之秀，仅有数千年的历史。这一差异对设计的启示显而易见：尽可能地简化文字信息。拿苹果官网与一个仿制的版本作对比，你会立刻感受到区别------我们的大脑倾向于避免大量阅读。设计应顺应这一本能，通过简洁的视觉元素而非文字堆砌，减少用户阅读。

Apple官网	我仿制的版本

2.我们的注意力有限，记忆力也不完美

我们的短期记忆很有限，且不稳定，对设计的启示便是：我们应帮助用户从一个时刻到下一时刻记住核心的信息。不要要求用户记住系统状态，或者他已经做了什么，因为他们的注意力专注于朝向目标的进度。基于这一事实，设计中有六种重要的模式：

模式一：我们专注于目标而很少注意使用的工具。假如家里的暖气突然漏水了，你会立马停止手头事情去修理暖气，但在其他时间你会关注暖气吗？工具也是一样，互联网早期大家都会使用信息门户，后来出现了搜索引擎，大家纷纷抛弃门户，而现在有了ChatGPT，它的主界面就一个输入框！所以好的工具让我们可以专心关注目标，而不必去学习这个工具。

模式二：我们能注意到更多与目标相关的东西。中午饿了，打开美团，大概率只会通过上面的搜索框，点一个外卖，然后等着取餐。你大概率不会注意到下方的「看视频」按钮吗？
模式三：我们使用外部帮助来记录正在做的事。比如ChatGPT左边的历史记录，可以帮助我们快速找到之前的聊天内容，我不用回忆之前和它聊过什么，只用判断，这个是不是我想找的。

模式四：我们偏好熟悉的路径 。有一篇很有意思的文章叫《我赶时间，所以我走了远路》。用户更倾向于熟悉的操作，而非"高效的"操作。
模式五：我们的思考周期：目标，执行，评估。比如使用ChatGPT，我们会带着一个问题，问gpt，得到回复后，思考它对不对，然后带着新问题提问、思考，如此往复。
模式六：完成任务的主要目标之后，我们经常忘记做收尾工作。比如，我们在写代码的时候，很容易忘记加上右括号，所以目前主流的IED，写左括号的时候都会自动生成右括号。

3. 识别容易，回忆困难

经过上百年的进化，人脑已经被"设计"得能很快地识别出物体。相反，在没有感觉的支持下找回记忆，对生存来说一定是不重要的，因为我们的大脑一点也不善于回忆。对于设计的启发如下：

看到和选择比回忆和输入要容易
尽可能使用图像来表达功能
使用缩略图来紧凑地描绘全尺寸图像
越多人使用的功能，应该越被看见
认证信息自动存储，不要让用户去想自己的密码是什么

4.在使用工具的时候，我们讨厌思考

人之所以能在这纷繁世界中存活，得益于其独特的"双脑"系统。一方面，我们拥有一颗"本能脑"，它不需费力便能完成那些日常琐事------呼吸、行走以及品尝食物。它的高效源自于无需我们意识介入。另一方，我们的理性脑则如同精密的仪器，能够解决复杂的数学难题等高阶任务，然而，它的运作需要消耗相当的精力和能量。正是这种为了生存而本能地寻求能量效率的身体机制，让我们往往对复杂任务望而却步。

生活本就很多事情要思考了，所以好的工具应该尽可能避免用户额外的思考，用就完事了。对设计的启示如下：

显著地标示系统状态和用户当前进度
引导用户完成他们的任务
明确无误地告知用户需要了解的信息
不要让用户诊断系统的问题
尽可能减少设置的数量和复杂度
让系统令人感到熟悉
让电脑去计算，而不是用户去计算

5.时间感

人是有时间要求的，交互系统应该设计得满足用户的时间要求。要让用户觉得响应度高，交互系统应遵循下面这些准则。

立刻告知收到用户的动作，即使回应用户需要时间。保持用户对因果关系的感知。
让用户知道软件是否在忙。
在等待一个功能完成的同时允许用户做别的事情。
动画要做到平滑和清晰。
让用户能够终止 (取消)他们不想要的长时间的操作。
让用户知道长时间的操作需要多长时间。
尽可能让用户来掌控自己的工作节奏。

我们可以对上述的准则中的"立刻"、"需要时间"、"平稳地" 以及"长时间" 这些词进行定量 (见下表) 。

节语

在设计前端界面时，我们的目标是减少用户在使用过程中的认知负担。界面应该直观，易于理解，减少用户阅读和记忆的需求，同时利用人类视觉和认知的特性来引导用户高效地完成任务。设计时，我们应当以用户为中心，让界面自然而然地与用户的直觉对话。这样，当用户与我们的产品互动时，他们将会感到自在和愉悦，而不是感到困惑和挫败。一句话总结：好的设计让用户避免思考。

参考：

本文由ChatGPT辅助完成。

前端也要学点设计

眼睛