3、交互设计原则：尼尔森可用性原则、格式塔原理在搜索中的应用、一致性设计

交互设计原则这东西，听起来挺玄乎的。但说白了，就是让用户用得顺手、用得舒服。

我做搜索框设计这些年，踩过不少坑。有些坑现在想起来还脸红。嗯，今天就把这些经验掰开揉碎了讲给你听。

3.1 尼尔森可用性原则在搜索中的应用

雅各布·尼尔森提出的10条可用性原则，我每次做设计评审都会拿出来对照一遍。尤其是搜索场景，这几条特别关键：

3.1.1 系统状态的可见性

用户搜索时最怕什么？最怕点完搜索按钮后，页面一动不动。我见过一个项目，搜索后要等3秒才有反应，用户以为系统坏了，疯狂点按钮。

正确的做法是什么？

• 搜索中显示加载动画或进度条
• 搜索结果为空时，给出明确提示
• 搜索建议实时展示，让用户知道系统在工作

3.1.2 系统与现实世界的匹配

搜索框的标签要用用户能理解的语言。别用「查询」「检索」这种词，用「搜索」「找商品」「搜问题」。

我见过一个医疗类网站，搜索框标签写的是「病症检索」。用户根本不知道这是什么意思。改成「搜症状」后，使用率翻了一倍。

3.1.3 用户控制和自由

用户搜错了怎么办？得有退路。

• 搜索框旁边放「清除」按钮
• 搜索结果页提供「返回」或「重新搜索」
• 支持撤销操作（比如误删搜索历史）

3.1.4 一致性和标准

这个后面会详细讲。简单说就是：搜索框在网站每个页面长得都一样，行为也一样。

3.1.5 错误预防

与其等用户犯错再提示，不如提前预防。

• 输入时自动纠错（比如「微薄」自动提示「微博」）
• 拼音输入时自动匹配中文
• 特殊字符自动过滤

3.2 格式塔原理在搜索中的应用

格式塔心理学，说白了就是研究人眼怎么「看」东西的。做搜索设计时，这几条原理特别实用：

3.2.1 接近性原则

距离近的元素，用户会认为它们是一组的。

搜索建议列表里，每个建议项之间间距要一致。我习惯用8px的间距，这样看起来整齐，用户扫一眼就能看清。

3.2.2 相似性原则

长得像的元素，用户会认为功能也像。

搜索结果的标题、摘要、链接，样式要统一。标题用蓝色加粗，摘要用灰色小字，链接用绿色。用户一看就知道哪个是标题、哪个是链接。

3.2.3 闭合性原则

人脑会自动补全不完整的图形。

搜索框的圆角设计就利用了这一点。圆角框比直角框看起来更「完整」，用户会觉得更友好。

3.2.4 连续性原则

用户的眼睛会沿着一条线看下去。

搜索结果列表的排列，要符合用户的阅读习惯。中文用户习惯从上到下、从左到右。所以搜索结果按垂直排列，比水平排列更容易阅读。

3.3 一致性设计

一致性设计，是搜索体验的基石。你想想看，用户在不同页面看到不一样的搜索框，会不会觉得这个网站很乱？

3.3.1 视觉一致性

元素	保持一致的内容
搜索框	大小、颜色、圆角、边框样式
搜索按钮	图标、颜色、大小、悬停效果
搜索建议	字体、间距、背景色、高亮样式
搜索结果	标题样式、摘要样式、分页样式

3.3.2 行为一致性

• 回车键触发搜索，在所有页面都一样
• 搜索建议的展示方式一致（比如都是输入2个字符后显示）
• 清除按钮的位置一致（我习惯放在搜索框右侧）
• 搜索结果的排序方式一致（默认按相关性排序）

3.3.3 交互一致性

用户在一个页面学会的操作，到了另一个页面也能用。

• 快捷键一致（比如Ctrl+F在搜索框内聚焦）
• 手势操作一致（比如左滑删除搜索历史）
• 反馈方式一致（比如搜索失败时都显示红色提示）

3.4 避坑指南

说了这么多原则，最后分享几个我踩过的坑：

• 别过度设计：我曾经给搜索框加了太多动效，结果用户觉得卡顿。后来全删了，只保留最基本的加载动画。
• 别忽略移动端：PC端和移动端的搜索交互差异很大。移动端搜索框要更大、按钮要更明显、建议列表要更精简。
• 别忘记无障碍：搜索框要支持键盘操作，颜色对比度要达标，屏幕阅读器要能读出来。

好了，这一章的内容就这些。交互设计原则不是死规矩，而是帮你做决策的工具。下次设计搜索框时，不妨拿这些原则对照一下，看看有没有可以优化的地方。