NNGroup 视觉设计原理·格式塔分组·视觉层次·排版·色彩·图像(19 篇 · 五大视觉原则/格式塔接近-相似-闭合-共同区域/视觉层次-网格-黄金比例/字体术语-搭配-阅读字体/色彩60-30-10/图片优势效应-照片-意象/美学-可用性效应/术语表)
Nielsen Norman Group 视觉设计原理子集 19 篇精华。一条主线把'好看'拆成'好用':①五大视觉原则(比例 Scale 最多 3 档·视觉层次 Visual Hierarchy·平衡 Balance 对称/非对称/放射·对比 Contrast·格式塔 Gestalt)是总纲。②格式塔分组四原则:接近 Proximity(最强分组线索·12 字段表单拆 3 组×4)、相似 Similarity(颜色>形状>大小传分组·误导性相似反例)、闭合 Closure(脑补缺失·轮播截 40% 暗示更多·完整性幻觉)、共同区域 Common Region(容器/边框/底色>接近+相似·假底陷阱)。③视觉层次落地:颜色对比(2 主 2 辅·对比变化 ≤3 种)、比例(3 档·大元素 ≤2 个)、分组(接近+共同区域)、眯眼测试 Squint Test;网格(列 Columns 桌面 12/移动 4·间隙 Gutters·边距 Margins·8px 网格·列网格/模块网格/层级网格·1128px 12 栏 72 列宽 24 栏距);黄金比例 φ≈1.618(字号/行高/裁图/双列布局)。④排版:30+ 术语表(基线/X 高度/字距 kerning/行距 leading/连字/孤行)、字体搭配 6 分类(衬线/无衬线/平板衬线/手写/装饰/等宽)+ 装饰字配中性字+单字体多字重、最适阅读字体(352 人测 16 字体·最快比最慢快 35%·每年降 1.5 WPM·20 年降 11%·Garamond 仅适 48%·无普适最佳)。⑤色彩(色轮原/间/三次色·和谐 5 式·60-30-10·限 3 色·颜色意义非全球通用)。⑥图像(图片优势效应 Picture-Superiority·照片要承载信息非装饰·4 类图像·列表用颜色+图标比纯文本快 37%·视觉标识).⑦美学-可用性效应(好看=以为好用·1995 Kurosu 26 台 ATM·掩盖小问题但救不了大缺陷·干扰可用性测试)。读者=产品经理,术语行内解释,决策导向(何时用/怎么选/反例),所有数字保留。