这一批笔记回答一个问题:为什么有的界面一眼就"对",有的乱得让人想关掉? 答案不是玄学。视觉设计有一套可解释的原理,核心一句话:视觉设计不只是为了好看,它直接决定好不好用——比例引导注意力、格式塔决定哪些东西被看成"一组"、对比让该跳出来的跳出来。
全文八块,从"总纲 → 分组 → 层次落地 → 字体 → 色彩 → 图像 → 心理效应 → 术语表": 一、五大视觉原则总纲(比例/层次/平衡/对比/格式塔)——所有后面内容的骨架。 二、格式塔分组四原则(接近 / 相似 / 闭合 / 共同区域)——人脑怎么自动"分组",设计师怎么借力。 三、视觉层次怎么落地(颜色对比 / 比例 / 分组 / 眯眼测试 / 网格 / 黄金比例)——把"重要的先看到"做出来。 四、字体与排版(术语表 / 字体搭配 / 阅读字体)。 五、色彩(色轮 / 和谐 / 60-30-10 / 颜色意义)。 六、图像与意象(图片优势效应 / 照片 / 意象类型 / 列表视觉标识)。 七、美学-可用性效应(好看的为什么"显得"更好用,以及它的坑)。 八、两份术语表索引(视觉设计 / 排版)。
与 NNGroup 可用性测试与十大可用性启发式(10 条启发式完整表 · 复杂应用应用 · 用户愉悦层级 · 测试方法 5 人法则/招募/远程/任务场景/分步任务/态度vs行为/4步分析/小样本误差/竞争性评估) 互补:那篇讲"易用"(交互逻辑),这篇讲"好看且好用"(视觉表层)。第 8 条启发式"美学与简约设计"就是两篇的接缝。
一、五大视觉原则总纲(5 Principles of Visual Design)
我们常能一眼判断一个设计"好看不好看",却说不出为什么。这五条原则就是把那种直觉拆成可操作的语言。它们不是孤立的——后面所有章节(层次、网格、色彩、图像)都是这五条的展开。
| 原则(EN / 中) | 一句话心法 | 怎么做 / 关键数字 | 反例 |
|---|---|---|---|
| Scale 比例 | 用元素的相对大小表示重要性,最大的最先被看到 | 同一设计里尺寸不超过 3 档(保持一致与层次);最重要的做最大 | —— |
| Visual Hierarchy 视觉层次 | 引导视线按重要性依次浏览,靠大小/色彩/间距/位置实现 | 标题→副标题→正文字号递减,让用户秒懂信息架构 | Dropbox App:文件之间区别不明显,用户得逐行解析找文件 |
| Balance 平衡 | 元素在页面合理分布、整体有稳定感(以中轴线两侧的"视觉重量"衡量) | 三类:对称(Hub Style,稳定)/ 非对称(Nike,活力动感,左侧文字多但右侧大字补足视觉重量)/ 放射(Brathwait 手表,重量绕中心均布) | 社论式版面:中轴两侧元素分布不均、失衡 |
| Contrast 对比 | 用视觉上截然不同的元素传达"这俩不一样" | 通常靠颜色;iOS 提醒事项里"删除"用高对比红色 | Greenhouse Juice:瓶身文字颜色随果汁变,浅色果汁的标签几乎读不出(对比不足) |
| Gestalt Principles 格式塔原则 | 人脑会把多个元素自动组织成"一个整体",而非孤立的个体 | 含相似/连续/闭合/接近/共同区域等子原则;接近性对 UX 尤为关键(详见第二节) | 2017 美国税表:字段间距不足,用户分不清哪些字段属本人、哪些属配偶 |
为什么这些原则重要(不只是好看):
- 提高可用性:好的布局更易用——例如黄金比例能优化字号、行高、行宽的关系,让文本更好读。
- 激发情感与愉悦:好看会引发积极情绪,用户对小可用性缺陷更宽容(这就是第七节的"美学-可用性效应")。
- 强化品牌认知:强视觉系统建立信任和兴趣,有效传达品牌形象。
格式塔(Gestalt)= 德语"整体"。核心洞察:整体不等于部分之和——你看 NBC 标志里的留白会"看到"一只孔雀,虽然那里根本没画孔雀;看毕加索的残缺线条会"看到"两个接吻的人,因为大脑会主动补全。设计师借这个本能,用更少的元素传达更多。
二、格式塔分组四原则(接近 · 相似 · 闭合 · 共同区域)
这四条都在回答同一件事:用户怎么判断"哪些东西是一组的"? 这是界面可读性的地基——分组对了,用户扫一眼就懂结构;分组错了,再漂亮也乱。四条之间有强弱:共同区域 ≳ 接近 ≳ 相似(下面有实证反例)。
2.1 接近性 Proximity——最强、最常用的分组线索
心法:靠得近的元素被看成一组,离得远的被看成不同组。 接近性常常能压过颜色、形状等其他线索,是最重要的分组原则之一。Why:省下用户的解析成本——不用读字,光看间距就能看出结构。
| 场景 | 怎么用 | 正例 / 反例 |
|---|---|---|
| 相关元素放一起 | 把相关的聚拢、不相关的拉开 | 正:Wellington City Council 在搜索按钮与导航条之间加空白,表明两者功能不同;小屏时把搜索移到导航条上方避免误认 |
| 文本分组 | 段落上下留白把句子分组;标题贴近其内容 | 正:即使不读字,光看留白也能看出段落和章节的分组、利于扫描 |
| 表单分块 | 把大表单拆成小组;标签贴近其输入框 | 正:12 个字段的大表单拆成 3 组×4 个字段,看起来更容易填完;缩小"标签↔输入框"间距表明它们相关 |
| 别把不相关的凑近 | 功能不同的按钮要拉开 | 反:California EDD 把"添加雇主"按钮和"下一步/保存草稿/取消"挤在一起,用户分不清功能 |
| 别把关键元素孤立太远 | 重要操作别甩到角落 | 反:Kayak 把"跳过"放屏幕左上角、远离主操作,易被忽略;Hulu(Apple TV)把"查看详情"放右下角,用户以为没操作 |
响应式挑战:屏幕变小会改变元素的接近关系。反例:伦敦交通网站桌面版把"超低排放区"和"低排放区"放得近便于比较,移动版拆开后用户可能漏看其一。对策:换断点时重新检查分组是否还成立。
2.2 相似性 Similarity——靠"长得像"分组
心法:共享视觉特征(颜色/形状/大小/字体/方向/动画)的元素被看成一组。 Why:这是"可点击 = 蓝色"这类约定能成立的底层机制。
| 特征 | 怎么用 | 反例(误导性相似) |
|---|---|---|
| 颜色(最显眼) | 链接统一颜色,用户一眼认出可点 | 图标和按钮同色但图标不可点 → 用户误以为图标也能点;信合银行"提交"和"取消/添加附件"同色 → 主操作淹没在次要操作里 |
| 形状 | Asos 用圆角矩形标导航按钮、方形标过滤器,区分用途 | 不同类别图标形状过近 → 用户误以为相关;Etsy"免费送货"和"畅销书"用不同色圆角矩形+特殊图标区分,若同色则会因共同形状显得太像而拖慢用户 |
| 大小 | 产品卡片统一大小表示同类;促销品做更大表示是不同类内容 | Martha Stewart 右栏视频因大小形状和周围广告相似 → 被误认成广告而忽略 |
| 其他 | 一致的字重/斜体表示文本相关;一致的排列方向、一致的动画传达功能相似 | —— |
注意:不同功能的元素若视觉特征太像会引发混淆;善用大小/颜色/形状建清晰层级;务必用户测试验证理解。
2.3 闭合性 Closure——脑补缺失部分
心法:当刺激只匹配某对象的一部分时,人会自动补全空白、感知出完整对象(看残缺的圆会"看到"完整的圆)。这个过程是自动的。Why:能用更少视觉简化设计,还能暗示"屏幕外还有内容"。
| 应用 | 怎么用 | 正例 / 反例 |
|---|---|---|
| 标志设计 | 省略细节让大脑补全 | PBS 用正负空间表现三个头像;MLB 用简洁图形暗示挥棒球员 |
| 界面图标 | 用不完整形状传功能 | Google Slides 形状图标虽不完整仍可识别——但图标必须测试,看不懂时再美也没用 |
| 暗示"还有更多" | 只显示部分,暗示滑动后可见 | 正:Lucid 显示部分未展开的元素鼓励横滑 |
| 避免"完整性幻觉" | 别让页面看起来"已经完整" | 反:Headspace 睡眠页看似完整,用户错过下方选项 |
| 给足上下文 | 截断的元素要露够多 | 反:HelloFresh 轮播截断部分太小、被忽略;正:Target App 把第三个按钮截掉约 40%,成功传达"还有更多"且仍易懂 |
2.4 共同区域 Common Region——容器/边框/底色
心法:处于同一边界(框/底色/容器)内的元素被看成一组。 Why:这是四原则里最强的分组手段——能压过接近性和相似性。
| 用法 | 怎么用 | 正例 / 反例 |
|---|---|---|
| 构建结构 | 用底色/边框圈出区域 | Windows 打印对话框用边框分 3 组;Slack 用暗背景把 UI 控件分组,再用线条分出搜索/工作区/频道;同步银行用有色区域分隔页眉页脚与主内容 |
| 容器传达关系 | 图+说明文字放同一边界;标签/手风琴菜单同区域显示 | Athleta App 手风琴把子分类和顶级标题放同容器,层次清晰 |
| 压过其他原则 | 空白不够分组时,容器来补 | 正:Food Network 早期版本配方信息间距过大、难分组,后改卡片式(图+标题+详情同边界)解决 |
| 别过度用边框 | 仅靠空白能分组时,边框是多余的 | 反:Backcountry 移动筛选给每类都加边框,其实靠接近性就够、可省掉;对比表用"斑马线"(交替底色)分行即可 |
| 当心"假底" | 全宽边框/背景色可能让用户以为到页尾、停止滚动 | 反:Better Homes and Garden 首页全宽背景色分隔,被误认为内容结束 |
四原则速记口诀:框 > 近 > 像(共同区域 > 接近 > 相似)。但"强"不等于"该用"——能用空白就别加框,边框和底色用多了 = 视觉杂乱。
三、视觉层次怎么落地(层次 · 网格 · 黄金比例)
第一节说了"视觉层次"是什么,这一节说怎么做出来。视觉层次 = 引导用户按设计意图的优先级顺序浏览。缺了它,用户不知道从哪看起。反例:Williams-Sonoma 移动版——元素大小颜色都差不多、全大写、缺留白,除了栗色"网络星期一"块没有焦点,用户不愿在视觉混乱中解析。
3.1 建立层次的三把工具
| 工具 | 怎么用 | 最佳实践(关键数字) |
|---|---|---|
| 颜色与对比 Color & Contrast | 用鲜艳/高饱和突出重点,低饱和压低次要 | 2 种主色 + 2 种辅色;复杂设计里对比变化不超过 3 种;不要只靠颜色(色盲用户分不出,要配其他线索) |
| 比例 Scale | 用大小区分标题/副标题/正文 | 3 档尺寸(小/中/大);最重要的最大;大元素不超过 2 个以保持层次清晰 |
| 分组 Grouping | 隐式靠接近(间距留白)+ 显式靠共同区域(边框/底色) | 让重点"呼吸"(加周围空白),但控制组内间距保持连贯;空白不够时才加容器,别过度 |
正例:MoMA 用绿色链接对比黑色文本突出;The Noun Project 白搜索框在黑背景上跳出;Hipcamp 用大号加粗标题抓注意;Spotify 用组间大间距+组内小间距分组;Shopify 结账表单缩小"字段↔标题"间距、放大表单块间距。
3.2 眯眼测试 Squint Test——验证层次是否成立
心法:眯眼(或模糊页面)降低细节分辨力,只看整体构图和层次。Why:能快速暴露"层次有没有真的传达出来"。正例:Spotify 模糊后文字虽不可读,但"最近播放"区因强颜色对比仍跳出,证明分组有效。附带提醒:别只测模板,还要注意真实填充内容的影响——色彩过艳的新闻图可能意外主导页面,需在编辑时处理。
3.3 网格 Grids——结构化布局
心法:网格 = 由列 Columns + 间隙 Gutters + 边距 Margins 组成的视觉结构,给页面定布局。Why:对设计师=快速做出对齐界面;对用户=可预测、易扫描;对响应式=靠断点适配不同屏。
三要素:
- 列 Columns:主内容区,宽度常用百分比以适配。移动 4 列 / 桌面 12 列。
- 间隙 Gutters:列与列之间,固定值,按断点调(小屏小间隙、大屏大间隙)。
- 边距 Margins:屏幕左右外部空间,内容不放在边距内。
三种网格类型:
| 类型 | 是什么 | 适合场景 | 实例 |
|---|---|---|---|
| Column Grid 列网格 | 页面分垂直列,元素对齐列 | 通用 | Ritual.com 四列网格,产品对齐列、间隙清晰 |
| Modular Grid 模块网格 | 列网格+横行=模块 | 电商/列表/图库等高度可变的重复内容 | Behance 每行 4 模块,横纵间隙大小不同 |
| Hierarchical Grid 层级网格 | 按重要性分配空间,重要内容占更大区域 | 在线新闻等强调单一重点 | 纽约时报两列层级网格,头条占左侧最大区 |
实操规范:
- 标准 Web 网格:1128px 宽度,12 列,列宽 72px,栏距 24px(72 column width / 24 gutter / 12 columns)。
- 商品/卡片型:用 3–4 列宽列网格更稳定。
- 内容型(博客/文章):12 列,中间窄、两侧留边,保证主阅读区。
- 内容放在列内、不要放在间隙里(避免视觉混乱)。
- 考虑 8px 网格系统:多数设备屏幕像素是 8 的倍数,用 8px 倍数当组件值可简化缩放和实现。
- 对齐是第一准则:设计不对齐,人眼一眼就看出来。适度"打破网格"(如 Shrine)能引起注意,但要有明确理由,否则只是视觉混乱。
3.4 黄金比例 φ ≈ 1.618(Golden Ratio)
心法:黄金比例(φ,又名黄金均值/黄金分割/神圣比例)是个无理数 ≈ 1.618033...(1/0.618 ≈ 1.618)。两个量 a>b 满足 a:b = (a+b):a 时即为黄金比例。Why:历史上(吉萨金字塔、帕台农神庙、《蒙娜丽莎》)被认为能创造有机、平衡、悦目的构图;有研究(Rizzolatti & Di Dio)发现符合黄金比例的人体雕像会激活特定脑细胞、扭曲版不会,暗示美感可能部分先天。最早可追溯公元前 500 年(Phidias / Plato / Euclid),达·芬奇称其"神圣比例"。
黄金矩形与螺旋:边长比为 φ 的矩形,切掉一个正方形后剩下的小矩形仍是黄金矩形——可无限切分,连接各正方形对角点得黄金螺旋(自然界的植物生长、飓风都有它)。
在 UI 设计的四种应用:
| 应用 | 怎么用 |
|---|---|
| 字号 Text Sizes | 正文 16px 时,标题取黄金比例倍数;字号按 φ 递进建层级 |
| 行高 Line-height | 行高(字高+行间空白)也按 φ 调;增大行高让阅读更容易;行长增加时需相应增大行高维持可读性 |
| 图片裁剪 | 把黄金螺旋放在图片焦点上、据此裁剪,快速得到有张力的构图 |
| 网页布局 | 黄金矩形的分割天然形成"主内容区+侧边栏"双列布局,给界面平衡感 |
务实提醒:黄金比例是"参考"不是"铁律"——完全适配所有视口尺寸很难,在部分屏幕尺寸上用它优化即可。它和上面的 12 列网格、8px 系统是并行的工具,不必教条混用。
四、字体与排版(术语 · 字体搭配 · 阅读字体)
4.1 字体搭配 6 分类 + 搭配原则(Pairing Typefaces)
选字体先认分类,能快速缩小范围、少试错。字体决定整站的语气和个性,也直接影响可读性。
| 分类(EN / 中) | 特征 | 典型用途 |
|---|---|---|
| Serif 衬线 | 笔画末端带"脚",粗细变化明显 | 传统、正式场合 |
| Sans-serif 无衬线 | 没"脚",笔画较细,X 高度较大 | 数字屏幕,现代简洁 |
| Slab-serif 平板衬线 | 厚实块状衬线,与笔画粗细一致 | —— |
| Script 手写 | 带花体装饰,类手写 | 标题/装饰 |
| Display 装饰 | 独特装饰性 | 大尺寸显示标题 |
| Monospaced 等宽 | 所有字符等宽 | 代码、表格 |
搭配原则(Dos & Don'ts):
- 多语言支持:即使只做一种语言,用户可能用第三方翻译——选兼容多语言的字体,提升品牌认可;翻译成日语/尼泊尔语等检查是否乱码或布局错乱。
- 评估字符相似性:某些无衬线字体里数字"1"、大写"I"、小写"l"太像。金融/政府/医疗等需精确数据(验证码、账号)的场景,选字符区分清晰的字体。
- 装饰字配中性字:装饰字只用于标题/插图等次要元素,正文配中性的无衬线或衬线。反例:所有标题都用装饰字更难读,正文用衬线+标题用装饰字的组合最难浏览。
- 用对比字重区分组件:用单一字体的多种字重(Light/Regular/Bold/Italic/Bold Italic) 比只靠字号更能引导视线。正例:Proxima Nova 用特粗主标题+粗体评论标题+浅色标签+常规正文,字重差异引导视线;只靠字号则层次扁平、定义模糊。
- 给每种字体分配明确角色:一种字体配标题、另一种配正文;别在正文混用多种字体;用设计系统/前端样式指南规范字体。
4.2 最适在线阅读的字体:没有单一答案(Best Font for Online Reading)
心法:不存在适合所有用户的"最佳字体"——不同字体对阅读速度影响显著,但因人而异。Why:这推翻了"找一个完美字体一劳永逸"的幻想,逼设计师按目标受众优化。
研究规模与数据:
- 352 名参与者,测试 16 种字体;每篇 300–500 字,8 年级阅读难度;含经典(Times/Helvetica)、数字化(Calibri/Arial)、高可读性(Noto Sans/Montserrat)字体。
- 采集:用户偏好(主观)、阅读速度(WPM 每分钟单词数)、阅读理解(正确率近 90%,差异不显著)。
- 最快字体平均 314 WPM,比最慢字体快 35%。
三大结论:
- 无普适最佳:Garamond 整体平均速度最佳,但仅适合 48% 的用户;Franklin Gothic 对更多用户(59%)更好,但平均速度低于 Garamond。可能因 Garamond 对阅读能力强者更突出、Franklin Gothic 对普通读者更友好。
- 用户无法自选最佳:用户很少改默认设置;且主观偏好不一定最优——最快字体比用户偏好字体快 14%。
- 年龄影响显著:阅读速度每年降 1.5 WPM;20 年降约 11%。Garamond/Montserrat/Poynter Gothic 对年长用户更友好;设计师通常较年轻(<35 岁),其偏好可能不适合年长用户。
设计建议:重视字体选择(高可读性字体之间差异仍显著);避免低可读性字体(保证高对比+合适字号,别用过小文本);针对 50 岁以上用户应多减少 11% 的内容长度(因阅读速度随年龄下降);先理解目标受众年龄。理论上系统可按用户实际阅读速度自动优化字体(随机起步→测速→选最优→定期重测),但动态换字体会引起不适,目前更像"愚人节的想法"。
4.3 排版术语表(Typography Terms)——30+ 术语速查
按主题分组,实际是字母表词条。用法:跟设计师/前端沟通排版时对齐黑话。
| 主题 | 术语(EN / 中) | 含义 |
|---|---|---|
| 字形结构 | Baseline 基线 | 字母底部所在的假想水平线(下伸部会穿过它) |
| 字形结构 | X-Height X 高度 | 小写字母"x"的高度,不含上伸/下伸部;描述字体比例和可读性 |
| 字形结构 | Cap Height 大写高度 | 大写字母从基线到顶部的高度 |
| 字形结构 | Ascender 上伸部 | 高出 x 高度的部分(如 b/d/k/t) |
| 字形结构 | Descender 下伸部 | 低于 x 高度的部分(如 g/p/y) |
| 字形结构 | Aperture 开口 | 字母内部未完全封闭的负空间(如 C 内侧、e 底部);大开口比窄开口更易读 |
| 字形结构 | Stroke 笔画 | 组成字母的一条直线或曲线 |
| 字形结构 | Foot 字脚 | 字母在基线上接触的部分(常见于衬线字体) |
| 字形结构 | Serif 衬线 | 笔画末端的小钩状部分 |
| 间距 | Kerning 字距调整 | 连续字符间的水平负间距,针对特定字母组合做视觉平衡 |
| 间距 | Letter Spacing 字符间距 | 字符最宽点之间的间距(适用整词/行/段,区别于 kerning) |
| 间距 | Leading 行距 | 连续文本行之间的垂直负间距,从基线到基线测 |
| 字体概念 | Typeface 字体家族 | 设计为一组的字母字符集合 |
| 字体概念 | Font 字体 | 字体家族下特定的样式集合(含大小/样式/粗细) |
| 字体概念 | Font Weight 字体粗细 | 笔画的粗细(超薄/轻/常规/中/半粗/加粗/特粗) |
| 字体概念 | Font Style 字体样式 | 字体家族里外观的具体变体 |
| 字体概念 | Font Decoration 字体装饰 | 上划线/下划线/删除线 |
| 样式 | Bold 加粗 | 笔画更粗更暗,吸引注意 |
| 样式 | Italic 斜体 | 字符向右倾斜,吸引注意或表专有名词 |
| 样式 | Small Caps 小型大写 | 大写字符设计成与小写同高,用于副标题/强调 |
| 样式 | Ligature 连字 | 两个或多个字母连成一个字符 |
| 样式 | Text Shadow 文本阴影 | 给文本加 3D 效果 |
| 段落 | Paragraph Alignment 段落对齐 | 左/右/居中/两端对齐;左对齐通常更易读 |
| 段落 | Hanging Indent 悬挂缩进 | 首行左边距更靠左,利于扫描列表 |
| 段落 | Line Break 换行 | 一行结束、下一行开始(软回车) |
| 段落 | Paragraph Break 段落换行 | 段落结束、下一段开始,段间垂直空间大于行距 |
| 段落 | Orphan 孤行 | 段落最后一行仅一个单词,显得孤立 |
| 单位 | Em 字宽单位 | 相对单位,等于当前字号(12pt 时 1em=12pt),随字号自动缩放 |
| 单位 | Point 点 | 字号单位,= 1/12 派卡 |
| 单位 | Pica 派卡 | 字号单位,= 1/6 英寸 |
| 单位 | Point Size 字体大小 | 字符占据的空间(含字符本身及周围空间) |
| 标点 | Em-Dash 长破折号 | "—",宽如字母 m,表中断/思路跳跃 |
| 标点 | En-Dash 短破折号 | "–",宽如字母 n,表范围/连接 |
| 格式 | OpenType (OT) | 跨 Mac/Windows 的灵活字体格式,数字字体新标准 |
| 字体类 | Serif / Sans-Serif Font | 见 4.1 分类表 |
| 字体类 | Monospaced 等宽字体 | 每字符等宽(如 Courier New),用于编程/表格 |
实操参数补充(来自"优秀视觉设计"一文,中英对照,中文笔画密度高故行长更短、行距更大):
| 项目 | 英文 | 中文 | UX 解释 |
|---|---|---|---|
| 最佳行长 Characters per Line | 45–75 字符 | 35–45 字 | 最舒适阅读区间,避免跳行/过度换行 |
| 可接受行长 | 40–90 字符 | 25–50 字 | 超出后阅读压力明显上升 |
| 正文行距 Line-height | 1.4–1.6 | 1.5–1.75 | 中文需更大行距 |
| 小字行距 | 1.3–1.4 | 1.4–1.6 | 小字行距不够会"糊在一起" |
| 大标题行距 | 1.1–1.25 | 1.2–1.35 | 大字保持紧凑稳重 |
| 标准栏宽 | 72–96px | 72–96px | 多数 12 列系统采用;常用 72/80/96 |
| 推荐 Gutter | 16–24px | 20–32px | 中文密度高,gutter 稍大 |
| 内容区宽度 | 1100–1200px | 1100–1200px | 最佳阅读宽度 |
| 文字层级 | H1 32–40px / Body 16–18px / Caption 12–14px;最多 3 级 | 同 | 靠字号建层级,不靠颜色/粗细硬撑;别用 5/6/7 个字号 |
| 正文最大宽度 | 600–720px | 同 | 配合行长 |
五、色彩(Using Color)
颜色能设定品牌基调、影响形象、抓注意、调情绪、提可用性,但合理搭配需要基础知识。
色轮 Color Wheel(牛顿 1666 年提出三类色组):
- 原色 Primary:黄、红、蓝(色轮最内圈)。
- 间色 Secondary:橙、紫、绿(原色相混,中间环)。
- 三次色 Tertiary:黄橙、红橙、红紫等(原色与间色相混,最外圈)。
颜色和谐 5 式(Color Harmony)——一组颜色搭得好看的规律:
| 和谐方式 | 是什么 | 对比 |
|---|---|---|
| 相邻色 Analogous | 色轮上相邻的色 | 低对比 |
| 互补色 Complementary | 色轮上相对的色 | 高对比 |
| 分裂互补 Split-Complementary | 一色配其互补色两侧的色 | 较柔和对比 |
| 三元色 Triadic | 色轮上等距(间隔 120°)的三色 | —— |
| 单色系 Monochromatic | 同一色调的不同明暗 | —— |
颜色的意义不是全球通用:研究表明颜色对情感的影响并非普世——红色在中国象征好运,在美国可能意味警告。要传达特定意义时:① 它可能无法全球适用;② 必须用户测试确保解读符合预期。文化差异和色盲都会改变解读。
创建与应用配色方案:
- 创建:选一种和谐方式并迭代(初学者从单色系起步);限制颜色数量——建议用 3 种色简化层次;优先遵循品牌色规范。正例:Nike 用黑/白/灰单色方案,让注意力集中在产品和图片。
- 应用——60-30-10 规则:60% 主色用于主要区域,30% 次色用于辅助区域,10% 强调色用于最重要的吸睛元素。保持一致性(蓝色当主按钮就贯穿全程;红色若表警告就别在别处表别的意思)。正例:Apple News 用白+浅灰为主次色、粉色为强调,遵循 60-30-10。
- 测试:灰色按钮可能被误解为不可用;测文本/背景对比度和色盲友好度(工具如 accessible-colors.com)。反例:UberEats 虽遵循 60-30-10,但绿色 Logo 在橙色背景上难辨认;反例:Greenhouse Juice 浅色果汁标签读不出(见第一节对比原则)。
和"美学-可用性效应"的接口:颜色越少,设计越显高级、内容越突出(第四节"策略性色彩"也印证:主色 1–2 个+辅助色极少+4–6 级灰即可覆盖所有 UI;主色=CTA、灰=内容层级,别用主色"刷墙"做大量背景)。
六、图像与意象(图片优势效应 · 照片 · 意象类型 · 列表视觉标识)
6.1 图片优势效应 Picture-Superiority Effect
心法:人更容易记住图像而非文字。 Why(Allan Paivio 的双重编码理论):图像在记忆里有两份存储(图像本身 + 描述它的文字),文字只有一份;大脑虽能为文字生成图像但需额外认知努力。
图像为什么对 UX 重要:概念说明(直观传达复杂概念)、品牌展示(帮记住产品/品牌)、用户选择(用户因图像直观而选某品牌——有研究参与者说"简单的图像让我更容易记住你们,而不是靠文字")。
影响效应强弱的 4 个因素:① 可发现性 Discoverability(用户要有足够时间看到);② 清晰度 Clarity(具体直观的图比抽象的更好记);③ 熟悉度 Familiarity;④ 独特性 Uniqueness(越独特越好记)。
3 种利用方法:
- 把视觉放在用户停留的区域:重要图像放主页和页面上部;避免快速轮播——反例:Garmin 主页轮播约 4 秒/张,有些用户来不及处理。
- 选具体而非抽象的图像:反例:Adobe Podcast AI 的"麦克风检查"图示太抽象、难理解记忆;正例:ChatGPT 主页用两张产品截图,写实直观、辅助理解。
- 用独特的图像:独特才吸睛且好记,但要与整体设计一致。反例:Google 云服务图标因形状和颜色布置太像而辨识度低;反例:Notably.ai 和 Dovetail.com 视觉元素极像,降低了双方的可记忆性。
该用图像替代文字吗?——不,文字仍不可或缺:文本标签为图像提供冗余、增强理解和记忆;文本确保图标被正确理解、并增大点击目标面积。
6.2 照片作为网页内容(Photos as Web Content)
心法:用户只关注承载信息、与任务相关的图片,忽略纯装饰图。 即使网速快、加载快,用户仍偏好内容直接有用的网站。
| 图片类型 | 用户反应 | 实例 |
|---|---|---|
| 真实人物照 | 吸引关注;关联公司与真人提升在线形象 | 正:FreshBooks 展示全体员工照,用户时间主要花在看团队照而非人物简介(即使简介占更大空间)——通过照片获取团队整体印象 |
| 通用图库照 | 被忽略,被视为"填充物" | 反:耶鲁招生页即使是"真实学生"照,但与内容无明确关联,难吸引注意 |
| 产品细节照 | 关键,直接影响决策 | 正:Pottery Barn 书架页提供详细产品细节,吸引大量关注;反:Amazon 电视页展示与产品无关内容(足球/划船场景),用户只看文字说明 |
| 大尺寸放大图 | 主动请求时关注度极高 | 用户常点链接看放大图;放大图应至少比原图大 2 倍;ExtremeTech 的面板特写吸引了 12 次注视(以原始 714×868 像素的 50% 显示) |
结论:专业摄影提升照片质量能极大增加商业价值;为装饰而设计的图片不仅难吸引、还分散精力。
6.3 在设计中运用意象(Using Imagery)
4 类常见图像:① Photographs 照片(展示产品/环境/人物,增加维度质感现实感);② Illustrations 插图(数字创建,艺术化/简化表示流程/概念,常配文字用于信息图);③ Iconography 图标(简化可识别符号,导航/交互提示);④ Data Visualizations 数据可视化(把复杂数据转成易懂视觉)。
7 条使用 Tips:
- 选特征相似的图像:多图时保证曝光/亮度/对比一致;插图保持相似调色板/细节/风格。正例:Todoist 模板插图都是圆形、大地色调、同草图风格。
- 图标笔画匹配文本字重:图标集统一笔画粗细/高/宽/边角/填充;图标笔画粗细应与字体笔画粗细匹配。
- 平衡文件大小与图像质量:优化大小不牺牲质量,多设备测试。
- 信息承载图优先于装饰图:产品照/信息图帮决策学习应优先;装饰图(普通库存照)价值有限、可能被忽略。
- 平衡图像与文本:文字多时配细节丰富的图,强调空白时配简约图;考虑图像情感与整体风格一致。正例:Mint.com 图像的阴影/多色/纹理给它质感,与左侧复杂内容搭配显得对称平衡。
- 信息图/数据可视化避免不必要的图形元素:突出数据、避免装饰(网格线/纹理背景/3D),提高数据-墨水比 data-ink ratio。反例:同一数据加网格线+轮廓条+纹理背景后,所有装饰都削弱了数据影响力。
- 提供替代文本 Alt Text:描述图像内容而非复制标题,增强无障碍,别只为 SEO。
6.4 列表项的视觉标识:颜色 + 图标(Visual Indicators)
心法:在列表里找项目时,同时用颜色+图标的视觉标识比纯文本快约 37%;只能选一种时,有明确信息意义的图标 > 仅颜色。Why:移动屏幕空间有限、用户注意力分散,这类标识是"有用的冗余",别为省空间随意删。
研究方法:4 个移动页面(电商列表+股票数据表),每页两类需标识的项目(如股票"上涨/下跌");4 种标识设计(仅文本/仅颜色/仅图标/颜色+图标);96 位用户,每人看一种、完成查找任务;指标=首次点击时间/首次正确点击时间/完成时间/成功率。
结果:
- 仅文本最差:完成时间比"颜色+图标"慢 57%;首次正确点击慢 56%;成功率最低仅 76%(对比"颜色+图标"85%)。
- 图标 vs 颜色:部分测试(股票表)里仅图标略优于仅颜色——因为图标(如上下箭头)更符合预期,而颜色需用户推断(红=跌、绿=涨)耗时更多。
- 颜色+图标最佳:时间和成功率指标全面最优,增强了被注意到的可能、提升速度和准确性。
设计建议:① 优先颜色+图标;② 图标优先于颜色;③ 避免仅文本;④ 确保标识信息明确(涨=绿箭头、跌=红箭头)。移动端实测快 37%,桌面预计类似甚至更明显。
三条图像章节的共识:信息承载 > 装饰。无论图片优势效应、照片、意象还是列表标识,用户都关注"对当前任务有用、承载信息"的视觉,忽略纯装饰。这与第八条可用性启发式"美学与简约"完全一致——视觉元素要传信息、不只装饰。
七、美学-可用性效应(Aesthetic-Usability Effect)
心法:用户倾向于认为外观美观的产品更易用,即使它实际上未必更高效——"好看的东西会用得更好"。Why:视觉设计的积极情感响应让用户对小可用性问题更宽容。Apple 是美学+功能结合的典范。
起源(关键数字):1995 年,日立设计中心的 Masaaki Kurosu 和 Kaori Kashimura 测试了 26 个 ATM 界面设计,发现用户对美观设计的"易用性"评分显著高于其实际功能性评分。Don Norman 在 2004 年《情感化设计 Emotional Design》中进一步探讨,表明用户评价不仅基于实际功能。
局限——美观救不了严重缺陷:它能掩盖小问题,但补不了大可用性缺陷。反例:Arcadis 网站——用户初访时被大幅彩色背景图惊艳,但多次任务中找不到信息后开始觉得大图妨碍使用。教训:形式与功能必须相辅相成,牺牲功能性最终耗尽用户耐心。
对可用性测试的干扰(双刃剑):
- 问题:美学-可用性效应会让研究里更难发现问题——用户遇到困难,但最终反馈集中在界面美观上,积极情绪掩盖了可用性问题。反例:FitBit 网站——用户购物任务中遇导航问题,却仍大赞色彩和图片、不提实际困难,研究者难识别核心问题。
- 正面评论为什么多:评论压力(用户觉得得说点什么,视觉最容易评)+ 取悦倾向(想讨好研究员,尤其以为研究员参与了设计时)。
- 应对策略:
- 降低评论压力:营造轻松氛围;经常鼓励用户(说明即使没详细评论、行为也有价值);提供开放式提问但不强迫表达。
- 减少取悦倾向:明确研究者与产品的距离(可能时声明自己不是设计者);若是设计者则强调负面评论的重要性,避免用面部/肢体语言影响用户。
- 引导超越视觉层面:问"寻找信息时有多容易/困难?""阅读时遇到哪些问题?""如果能改这个应用你会改什么?";回顾用户在特定页面的行为,让他们描述挑战。
八、两份术语表索引(Glossaries)
本子集含两份字母表词条术语表,作为速查,不在正文展开但保留核心定义。
视觉设计术语表(Visual Design Glossary) 关键词条:
- 美学-可用性效应(见第七节)、变化盲视 Change Blindness(忽略注意力区外的场景变化)、视觉杂乱 Clutter(过多元素让人难以聚焦)、信噪比 Signal-to-Noise Ratio、密度 Density(单位区域元素数,高=拥挤、低=极简)。
- 格式塔全家桶:闭合 Closure / 共同区域 Common Region / 共同命运 Common Fate(同步移动的被看成一组)/ 连接性 Connectedness(被线条连接的被看成相关)/ 延续性 Continuation(视线自动沿线/曲线移动)/ 图形与背景 Figure-Ground(分前景背景、关注前景)/ 接近 Proximity / 相似 Similarity。
- 色彩相关:亮度 Brightness / 饱和度 Saturation / 单色调 Monochrome / 配色方案 Color Palette / 对比度 Contrast / 暗模式 Dark Mode(浅字深底,又名负对比极性)。
- 布局/原则:比例 Scale / 视觉平衡 Visual Balance(对称/非对称/放射)/ 视觉权重 Visual Weight(感知重要性)/ 视觉层级 Visual Hierarchy / 网格 Grid / 黄金比例 Golden Ratio / 空白 Whitespace。
- 一致性:一致性 Consistency / 内部一致 Internal / 外部一致 External(行业惯例)/ 设计原则 Design Principles(指导权衡的价值声明)/ 设计系统 Design System。
- 风格/方法:极简 Minimalism / 扁平化 Flat Design / 拟物化 Skeuomorphism(引入现实元素增强熟悉感)/ 眯眼测试 Squint Test / 费茨定律 Fitts's Law(指针到目标的时间取决于目标大小和距离)。
- 图像/原型:数据可视化 Data Visualization / 信息图 Infographic / 图标设计 Iconography / 栅格图 Raster Image(像素组成,放大失真)/ 矢量图 Vector Image(数学计算,可缩放)/ 响应式设计 Responsive Design / 原型 Prototype / 线框图 Wireframe。
排版术语表(Typography Terms Glossary):30+ 词条已在第 4.3 节完整收录。
源自 NNGroup Topics / Visual Design - 视觉设计(视觉原理子集,19 篇)。与 NNGroup 可用性测试与十大可用性启发式(10 条启发式完整表 · 复杂应用应用 · 用户愉悦层级 · 测试方法 5 人法则/招募/远程/任务场景/分步任务/态度vs行为/4步分析/小样本误差/竞争性评估) 的"美学与简约设计"启发式互为接缝;视觉风格落地参考 Apple HIG 交互模式 Patterns(25 个流程模式 · 上手/输入/反馈/媒体/系统协作)。图片/原档(含 Medium/Nike/Uber/Slack/纽约时报/Spotify 等截图、Garmin 轮播视频)保留在 sources。