参考卡 · 设计 · 贯穿 / 进阶 · 可反复回看 / 可打印
视觉设计调研
这是一张调研合集，把视觉设计里被反复验证过的研究结论、真实产品做法和工具，整理成你能直接抄给 Agent 的话 。其它设计卡讲"怎么做"，这张卡讲为什么这么做、谁这么做、研究怎么说。你不用懂代码，对照示例就能指挥 Agent，也能听懂别人聊设计时用的那些词。内容偏多，当字典查即可，不必一次读完。
这张卡讲十一件事
视觉设计的根本：清晰、层级、意图
五大核心原则（比例、层级、平衡、对比、格式塔）
研究支撑的结论（美学可用性、拟物等）
设计系统 vs 风格指南
图标的设计与可用性
UX 协作模式
玻璃拟态（Glassmorphism）实战
动效与动画
网格系统
值得一看的案例
UX 工具与资源
1. 视觉设计的根本（Visual Design Fundamentals）
什么是好的视觉设计
好的视觉设计不只是"好看" ，它关乎清晰（clarity）、层级（hierarchy）、意图（intention） 。每个视觉选择都要服务于"用户能更快看懂"和产品目标。具体要做到几件事：
把用户的注意力引到最重要的东西 上
把复杂信息变得好消化
建立情感共鸣与信任
跨场景保持一致
对所有人都可访问（accessibility）
列表项的视觉标识：颜色 + 图标
给列表项做标识时，颜色和图标一起用 效果最好：颜色一眼传达类别或状态，图标补上语义。两者合用能降低认知负担，也更好扫读。用真实用户测一下，避免文化误读。
已完成 ：iPhone 14 换屏
维修中 ：联想笔记本进水
待确认 ：主板报价待客户回复
把照片当作网页内容
高质量摄影对网页有几个用处：
照片比插画更快建立信任与情感连接
用真实、多元 、能代表真实用户的图片
为网页优化 但不牺牲质量（懒加载 lazy-load、响应式）
避免通用素材图（stock photo） ，用户一眼就能认出是假的文字说不清时，照片能传达基调与个性
给 Steve's Repair 配图，宁可让 Steve 自己拍店里、拍维修台，也别用一搜一大把的"通用维修工握手"素材图。
测试视觉吸引力：微软"满意度词卡"工具
用 Microsoft Desirability Toolkit （微软满意度工具）在用户测试里评估"好不好看"：给用户看一版设计，让他们从一张褒贬都有的词表 里选 4 到 5 个词描述第一印象，再统计词频找出强弱项。比让人开放式吐槽更容易得出结论。
折叠图标：选对"信号物"
测试哪种图标用户一看就懂"展开/收起"：
箭头（chevron，形如向右 / 向下的小尖角）最被普遍认得 加号/减号也行，但没那么直觉
配合 90° 旋转动画更清楚
箭头方向要符合预期：向下是展开，向右是收起
好例：chevron 箭头，最易懂
常见问题 （向右，收起） （向下，展开）
反例：全用加号/减号，略不直觉
常见问题 （加号，收起） （减号，展开）
横幅盲视（Banner Blindness）
用户会自动忽略长得像横幅广告的内容 ：
桌面 ：顶部/侧边的"横幅"被当成广告无视移动端 ：因为屏幕更小、广告更密，更严重解法 ：用融入内容流的内联提示 （inline alert）代替横幅位置比样式更重要：把重要信息搬进内容流里
非用横幅不可时，做出变化、并确保里面是关键信息
2. 五大核心原则（Core Design Principles）
原则 1 · 比例 / 尺度（Scale）
用相对大小 表达重要性、建立层级，但别把用户压垮。
同一屏里，不要超过 3 种明显不同的尺寸 。
真实产品：Medium （内容平台）把热门文章放得明显比次要内容大，让"先读这篇"一目了然；Krakow 停车 App 把热门 H 区用超大字号配最大图标突出；Dropbox 文件管理用大号文件类型图标配可读文件名，靠尺寸层级减少界面杂乱。
落地参考：
主尺寸用 16px / 24px / 32px（或按你的栅格基准调整）
正文层级激进点拉开：12px < 16px < 20px < 28px
交互元素按重要性定大小：主按钮 48px > 次按钮 40px > 三级 32px
12 元数据 · 16 正文 · 20 小标题 · 28 标题
原则 2 · 视觉层级（Visual Hierarchy）
用大小、颜色、间距、位置 引导眼睛按重要性走。
真实产品：Medium 文章 的层级是标题（最大最粗）> 副标题（略小、灰）> 正文（常规、深色），眼睛自然按这个顺序读；Uber 下单页 把地图放视觉中心，下单表单在下，用一个灰色"去哪儿？"占位提示引导输入，又不抢主体；Dropbox 早期文件层级混乱，找文件费劲，改版后把搜索放前面，再放大缩略图配清晰标签。
主操作最突出（颜色、大小、位置）
次操作弱一些（更浅、更小、位置靠下）
三级操作最低调（纯文字、低对比）
用空间分组 强化层级
预约你的维修
营业时间 9:00 至 21:00 · 30 分钟响应
立即预约 查看价格
原则 3 · 平衡（Balance）
把视觉"分量"分布到整个版面。三种做法：
类型 感觉 适合 例子 对称（Symmetric） 沉稳、正式、有秩序 信息密集的后台、商务应用、仪表盘 左右导航对等的管理面板 非对称（Asymmetric） 动感、现代、有活力 营销页、产品叙事、落地页（Nike、Apple） 右大图 + 左小文案的 hero 放射（Radial） 聚焦感强 表盘、徽章/图标系统、数据可视化 环形进度、放射菜单
原则 4 · 对比（Contrast）
用明确的差异 让重要元素跳出来。
真实产品：iOS 提醒事项 的红色删除键在柔灰界面里很显眼，传达"这是破坏性操作"；黑字白底（对比 21:1）一眼可读，灰字灰底（2:1）则看得很累。
满足 WCAG 对比下限：常规文字至少 4.5:1，大字（18px 以上）至少 3:1。别只靠"深浅"，要配合颜色、字重或大小；用 WebAIM 之类工具检测。
原则 5 · 格式塔原理（Gestalt Principles）
人脑会按"分组与组织"的规律去感知画面。五条常用：
原理 含义 怎么用 相似（Similarity） 长得像的被看成一类 同类项用一致的颜色/大小/形状（如 Uber 表单所有输入框样式统一） 连续（Continuity） 眼睛偏爱顺滑连续的线 元素对齐成行；用流畅曲线代替急折（如时间轴串起的圆点） 闭合（Closure） 人脑会自动补全不完整的形状 暗示性的轮廓也能秒认（如播放键的三角轮廓） 邻近（Proximity） 靠得近的被看成相关 减小相关项间距、增大组间距（如标签紧贴在输入框上方） 共同区域（Common Region） 同一容器内的被看成一组 用边框、底色或留白圈出"这些是一伙的"（如卡片容器）
3. 研究支撑的结论（Research-Backed Findings）
美学可用性效应（Aesthetic-Usability Effect）
研究发现：同样的功能，看起来更美的设计会被用户觉得"更好用" 。所以打磨视觉是值得的；用户对漂亮设计里的小瑕疵也更宽容。但别为美牺牲可用性 ，也别忽视美，它会影响用户怎么用你的产品。
拟物设计（Skeuomorphism）
模仿真实物体的设计（皮革钱包、木纹桌面、纸质笔记本）：
优点 ：直觉、用户立刻懂"能干嘛"（affordance）缺点 ：容易过时、视觉沉重、跨设备难统一现代做法 ：用"轻拟物"（淡阴影、微斜面），而不是生硬照搬何时用 ：引入新概念时、面向不太懂技术的用户时
4. 设计系统 vs 风格指南（Design Systems vs Style Guides）
设计系统（Design System） 风格指南（Style Guide） 是什么 组件 + 模式 + 原则的完整工具箱 视觉标准的文档 （字体/颜色/Logo/用法） 包含 组件、间距刻度、字号刻度、配色、交互模式 主要是美学层面：东西"该长什么样" 演进 随产品需求持续演化 偏静态，适应性较弱 维护 需要治理与持续维护 维护成本更低 谁用 做多个产品的团队 单一产品 / 对外品牌规范
产品会成长、要跨团队共享模式，就选设计系统 ；只为单一产品或对外品牌做规范，风格指南 足矣。
设计系统由什么组成（Design Systems 101）
一套持续维护的设计系统通常包含：
按钮样式（主 / 次 / 危险 / 禁用）
表单输入（文本、下拉、单选、复选、日期）
导航模式（顶栏、侧栏、面包屑、标签页）
卡片与容器、弹窗与遮罩、通知/提示
排版系统（字号刻度、字重、行高）
带语义的配色（主/次/成功/警告/错误）
间距与栅格、海拔/阴影刻度、风格统一的图标库
治理（Governance）：记录组件用法与状态、维护版本历史、把变更同步给团队、系统性下线废弃组件。
对你意味着什么： 你不必懂这些实现，但可以告诉 Agent："给 Steve's Repair 建一套简单的设计系统，3 档字号、一条灰阶、一个主色、统一 8px 圆角，之后所有页面都从里面挑。"详见隔壁卡《设计系统：用系统限制选择》。
5. 图标的设计与可用性（Icon Design & Usability）
NN Group 大规模图标研究
一项大规模研究：测了 663 个图标 、107 名 不同技术水平的用户、50 个真实界面 （100 个孤立测试、563 个在上下文中测试，人工编码 10,700 条 解读）。关键结论：
上下文很关键 ：有标签或系统语境时，识别率远高于孤立图标越简单越好 ：过于复杂的图标误读率更高存在文化差异 ：不同地区的人解读不同标签要有 ：图标加标签的成功率比"只有图标"高一倍一致性要守住 ：用户靠反复见到来学会图标含义
好例：图标 + 标签，成功率翻倍
图标识别的心理因素 & 命名约定
影响识别 ：熟悉度（隐喻强弱）、简洁度、对比、一致性、在小尺寸下的可区分度命名按类别加前缀 ：icon-arrow-*、icon-social-*、icon-status-*按功能命名而非外观 ：icon-close（不是 icon-x）、icon-menu（不是 icon-hamburger）带尺寸/状态变体：icon-16/24/32、icon-check-default/disabled/active
图标用来澄清 ，不要替代 文字标签；同一动作始终用同一图标；状态色统一（红色报错、绿色成功、黄色警告），并满足 4.5:1 对比。
6. UX 协作模式（UX Collaboration Patterns）
群体思维（Groupthink）
当团队变得封闭、不再质疑假设，就会陷入群体思维。预防：引入多元视角（用户、其他部门、利益相关者）；评审时指定一个人当"唱反调的人"（devil's advocate）；建设性的分歧往往比一团和气更能产出好点子；把"提想法"和"批评"分开，让人敢于不同意。
亲和图（Affinity Diagramming）
把调研发现归纳成主题，不预设分类 ：每条发现写一张便签，按相似性自由分组，浮现出意外的模式与自然主题。产出可以是用户旅程图、人物画像组、问题簇或机会点。建议拉上多元成员一起分类。
NPS 的局限
净推荐值（NPS）流行但有限：优点是简单、可长期追踪；缺点是解释不了用户为什么推荐或贬低 ，还受季节波动。更好的做法是结合开放式反馈、定性研究和行为指标。客户费力度（CES）常常比 NPS 更能预测留存。
7. 玻璃拟态（Glassmorphism）实战
玻璃拟态就是在半透明元素上做模糊加磨砂玻璃 效果，做出分层的观感，靠三个属性：
透明度（Opacity） ：半透明背景，让底下内容隐约透出（通常 10% 到 40%）背景模糊（Background Blur） ：对元素背后的内容做高斯/动态模糊描边与渐变（Strokes & Gradients） ：细边框 + 渐变叠加，强化"玻璃感"
Steve's Repair
谁在用
Apple SwiftUI（iOS 15 及以上） ：锁屏小组件以玻璃拟态为主要语言，模糊半径约 20 到 30px、透明度 0.3 到 0.4，配动态壁纸很顺微软 Fluent Design ：Windows 11 原生"亚克力（Acrylic）"材质，按背景复杂度自动调模糊；在"减弱动态效果"系统下会关闭模糊Apple Vision Pro ：空间计算大量使用玻璃拟态做信息分层，是空间界面里常见的做法
实施最佳实践
保证 WCAG 对比 ：拿真实背景图测文字对比，常规文字至少 4.5:1、大字至少 3:1；不够就给文字加阴影 0 2px 8px rgba(0,0,0,.4)，或在文字后加深背景。背景越复杂，模糊越强 ：纯色或渐变 4 到 10px 即可；照片 15 到 20px；图表、仪表盘 25 到 30px；移动端可酌减 5 到 10px。判断法则：如果还能看清玻璃后面的字，就把模糊加大。 提供透明度调节 ：尊重 prefers-reduced-motion 与高对比模式；允许用户关模糊（出于性能或偏好）；不支持时回退为"纯色半透明"；在 2 到 3 台老设备上验证。参数手感 ：透明度 0.2 到 0.4 最稳；轻微斜向动态模糊比纯高斯更现代；1 到 2px 的白色或主色描边（透明度 0.3 到 0.5）；顶部白(0.3)到底部透明的渐变增加纵深。
常见坑（避雷）
坑 后果 解法 模糊背景上文字对比太低 无障碍失败、不合 WCAG 加大模糊或给文字加阴影 移动端重度模糊 性能差、耗电 减小模糊或用纯色回退 在小而密的文字上用玻璃 读不清、体验差 只在标题/大块区域用玻璃 没有无障碍开关 对动效敏感者很难受 尊重 prefers-reduced-motion
提醒： 玻璃拟态最适合分层界面、弹窗、悬浮控件（偏桌面） 。让 Agent 加这种效果时，务必让它一并处理对比和"减弱动态效果"的回退，否则容易做出"好看但看不清"的页面。
8. 动效与动画（Animation & Motion）
动效的作用：反馈 （确认操作）、身份 （强化品牌个性）、空间隐喻 （表达页面/内容关系）、引导注意 、愉悦 （克制使用）。
UI 动效的六大类
类型 用来做什么 真实例子 1 反馈（Feedback） 即时确认操作完成 Epicurious：加入清单的项从灰色变粗黑；Airtable：拖拽行时预览落点、高亮放置区 2 状态变化（State Change） 展示界面状态间的过渡 Material：铅笔图标旋转变成加号；骨架屏（skeleton）微光闪动表示"内容在路上" 3 空间隐喻（Spatial） 建立屏幕/空间之间的连接 iOS 照片从缩略图放大到全屏；Amtrak 订票每屏从右滑入、返回向左滑出；WebMD 手风琴下滑展开 4 作为信号物（Signifier） 暗示可交互、无需明说 Apple Music 卡片底部轻微弹动暗示"上滑看更多"；Car2Go 按钮每 3 到 5 秒轻弹一次 5 良性吸引注意 突出重要信息但不操纵 Refinery29 投票项出现时高亮一下，用户参与后即停。只播一次就停 ，反复播显得"急切/操纵" 6 劫持注意（暗黑模式，禁用） 操纵行为、令人反感 非必要元素持续动来分散注意；Warmlydecor 倒计时狂闪制造虚假紧迫感，是侵蚀信任的暗黑模式
避免暗黑模式：别用动效制造虚假稀缺或紧迫；别每次加载都自动重播；别闪烁或急速变色。动效用来增强体验，不要用来操纵行为。
时长与缓动速查
动效类型 时长 缓动 用在 避免 反馈 Feedback 200 到 300ms ease-out 按钮点击、表单提交 长延迟、复杂序列 状态变化 State 300 到 500ms ease-in-out 图标变形、模式切换 生硬跳变、多步连锁 空间过渡 Spatial 400 到 600ms ease-in-out 页面导航、手风琴 方向迷乱、过快 信号物 Signifier 200 到 400ms ease-out 弹动提示、吸引注意 无限重复 页面加载 Page Load 400 到 800ms ease-in 骨架屏、渐进显示 阻塞交互
经验法则：桌面 300 到 500ms 为常规，再长就显迟钝；移动端 200 到 400ms 更跟手；永远在真机上测帧率；尊重 prefers-reduced-motion；别什么都做动画，为"目的"做动画。
9. 网格系统（Grid Systems）
网格是一套看不见的框架，用来组织布局、对齐与间距，带来：结构、可预测性（用户形成"信息在哪"的心智模型）、响应式缩放，以及更好的可扫读性。
三种网格
类型 是什么 适合 列网格（Column） 纵向分列组织横向内容流。组成：列（column）/ 间隔槽（gutter）/ 外边距（margin）。移动 4 列、平板 8 列、桌面 12 列 大多数响应式页面（NYT 文章、Ritual.com 产品卡） 模块网格（Modular） 列 + 行的二维网格，最小重复单元叫"模块" 仪表盘、图库、统一尺寸的产品网格（Behance 项目卡 2 行 3 列模块） 层级网格（Hierarchical） 不对称分区强调内容，但仍对齐到统一基准（如 12 列） 编辑型布局、营销页、作品集（NYT 首页大稿 8 列、次稿 4 列）
8px 网格（强烈推荐）
为什么是 8px：能整除进常见尺寸（8、16、24、32、40、48、56、64 等）；所有间距都用 8 的倍数，因而一致；从移动到桌面无需算数即可缩放；48px（也就是 6 乘 8）的触控目标满足 WCAG。
放内容的规矩
内容放在列里，不要放进间隔槽（gutter） ：间隔槽是"空间"不是"容器"，放进去会破坏对齐断点处调整：移动端 4 列、16px 槽、16px 边距；平板 8 列、20px、24px；桌面 12 列、24px、32px
有策略地"破格" ：hero 大图铺满、居中的特色区块、全宽 CTA。每页破格 1 到 3 次即可，太频繁会显乱（如 Shrine 电商用全宽特色品打破 12 列网格再回归对齐）
"网格被高估"的另一面
注意两种声音： 本调研推崇 12 列网格做响应式；而《层级·布局·留白》那张卡提醒，做 UI 时硬套 12 列常是"杀鸡用牛刀"，更稳的是用一个基准单位（8px）做所有间距、让内容决定宽度、侧栏用固定宽度 。两者不矛盾：编辑或营销型页面适合列网格，功能型 UI 更适合"基准单位加内容定宽"。先听内容的，再决定要不要上正式网格。
10. 值得一看的案例（Notable Case Studies）
软盘"保存"图标 ：3.5 寸软盘 2005 年后就没人用了，却仍是保存图标，靠 30 年的熟悉度延续至今。但新用户没见过软盘，它对他们已是"死隐喻"。可考虑改用"保存"文字，或测试替代隐喻。教训：图标隐喻有保质期。 字体搭配 ：要的是刻意拉开的反差 ，而不是两款相近。衬线标题配无衬线正文（或反过来）；选不同家族、不同性格（几何 vs 人文）；别配两款装饰字，也别配几乎一样的两款；最多 2 个家族。Google Fonts 的 "Pairings" 有测过的组合。在线阅读最佳字体 ：没有唯一赢家。屏幕上无衬线更稳（Inter、Source Sans Pro、Open Sans，16 到 18px）；长文衬线也行（Merriweather、Lora，18px 以上配 1.6 以上行高）；字号比字体更重要 ，16px 的普通字胜过 12px 的美字。用颜色增强设计 ：颜色能传递信息，可以表示状态（红色报错、黄色警告、绿色成功、蓝色信息）、类别（别只靠深浅）、层级（亮色抢眼、暗色后退）、无障碍（对比至少 4.5:1，别只靠颜色传信息）、情绪（暖色有活力、冷色更冷静）。别再只靠"蓝色就是可点" ：这观念已过时。用下划线、图标、底色、悬停效果一起表达可点；按钮要有"分量"（内边距加底色），链接是文字加颜色加下划线；光靠鼠标变手型不够。情绪板（Mood Board） ：在细化设计前确定美学方向。收集 20 到 40 张参考图（照片、插画、配色、字体、纹理）按主题分组，提炼色彩与风格。避免收一堆通用图，用能反映你真实用户与场景的照片。"闪光（Sparkles）图标"泛滥 ：星星、闪光图标被滥用来表示"高级、Pro、特别"，用多了就失去意义，没人再注意。改用配色、徽章或你产品独有的图标；只在真正高级或庆祝时刻克制使用。
11. UX 工具与资源（UX Tools & Resources）
全球产品参考库
一个收录 4,000 多个产品、横跨 265 个类别的精选库。每个产品按统一框架分析：名称与网址、目标用户与场景、核心功能、商业模式、创始人或公司、值得参考的地方（设计模式、功能创新、UX 思路）。用于设计对标、找模式灵感、了解市场上的现有方案、发现自己产品的缺口。
工具类别
类别 工具举例 图标 Font Awesome、Feather、Material Icons，或自建图标系统 线框图（低保真） Balsamiq、Miro、Excalidraw 原型 Figma、Framer、Webflow 高保真界面 Figma、Adobe XD、Sketch 3D 与动画 Spline、Cinema 4D、Lottie 用户研究 UserTesting、Maze、Lookback 产品引导 Pendo、Appcues
Sajid Code 的 UI 心得
选间距 ：用 8px 基准（8、16、24、32、40、48、56、64 等）；常用 8 是小、16 是标准、24 是区块、32 是大；密集布局可破例用 12px，想透气用 20px；最后目测微调。做动画 ：简单状态用 CSS 过渡（0.2 到 0.3s）；关键帧用 CSS 动画；复杂交互用 JS 库（Framer Motion、GSAP）；保持简单，避免动效疲劳。救活无聊 UI ：加纵深（阴影、分层、海拔）、改层级（更大字号、更清晰用色）、加对比（更深背景、更亮 CTA）、收尾打磨（间距、去掉多余边框、优化排版）。"原创被高估" ：多参考，别重造。设计前先研究 10 个现有方案，有取舍地"混搭"模式；多数场景下用户偏好熟悉的东西，胜过新奇。选 UI 配色 ：从一个主品牌色起步，派生 8 到 10 个深浅，加一个 CTA 强调色，再用带一点冷暖倾向的中性灰（别用纯灰），最后测对比至少 4.5:1。追求"有效"而不是"好看" ：衡量任务完成率、耗时、错误率；打磨重要，但不能牺牲清晰；按用户反馈迭代，而不是个人口味。
这一节的思路和整张卡一致：先抄成熟经验，再求原创；先做到有效，再做到漂亮。你作为指挥者，最大的杠杆是知道该让 Agent 参考谁、按哪条研究结论来做。
怎么用这张卡： 把它当一本设计研究词典。做 Steve's Repair 时，遇到具体问题就来查对应小节，把里面的结论原话抄给 Agent ，例如："按 NN Group 研究，导航图标都配上文字标签""玻璃卡片记得加文字阴影并做减弱动态效果的回退""动效控制在 300ms 以内、只播一次"。它照做，你对照示例与研究结论判断对不对。
卡住或拿不准，就把页面截图发给你的 AI 老师（Agent），引用这张卡里的某条研究结论问它"按这条该怎么改？"
来源：Abel's UX Design Skill（abel-ux）· Abel's Design Note，综合 Refactoring UI、Laws of UX、Apple HIG、Material Design、NNGroup 等研究与案例。本卡是源调研《Visual Design Research》的中文整理版，配上可视示例，贯穿全程可反复回看（进阶话题如玻璃拟态、动效可后续再深入）。