这一批是 NNGroup「视觉设计 Visual Design」主题里关于设计系统、图标、视觉风格、动效、视觉测试的子集。一句话串起来:设计系统是"把视觉规则工程化、可复用",图标/示能是"用图形让用户一眼看懂能干什么",视觉风格(拟物→扁平→玻璃拟态)是"皮肤的流行周期",动效是"让界面用运动说话但要克制",视觉测试是"别拍脑袋,用方法验证好不好看、好不好用"。
几个反复出现的核心术语,先讲清:
- 示能 / 标识符 Signifier:界面上"告诉你这里能做什么"的视觉线索(下划线=可点、下拉箭头=可展开)。不是装饰,是"操作说明书"。
- 识别度 Recognition vs 解释性 Interpretation:图标的两道关——你能不能认出这是个"星星"(识别度),以及在这个界面里星星到底代表"收藏"还是"评分"(解释性)。两关都过才算可用。
- 点击成本 Interaction Cost:用户把每次点击当"货币",不愿浪费。让该点的东西看起来能点、不该点的别装能点。
- 态度数据 vs 行为数据:用户"说"喜欢(态度) ≠ 用户"做"得顺(行为)。视觉测试两种都要,但别只信嘴。
全文六簇 + 一个 misfit 区:① 设计系统与风格指南 → ② 图标与示能 → ③ 视觉风格演变 → ④ 可点击元素识别 + 横幅盲视 → ⑤ 动画与动效 → ⑥ 视觉测试 → ⑦ 不属于视觉设计的 4 篇(研究/团队方法,简述并标注)。每节带心法 / Why / 反例。
一、设计系统与风格指南(Design System & Style Guide)
来源 2 篇:Design Systems 101 / Design Systems vs. Style Guides
心法:设计系统是"父",风格指南是"子"。设计系统 = 一整套可复用的标准(组件 + 模式 + 风格 + 代码 + 设计文件),让大公司多个团队不必从零造轮子还能保持一致;风格指南只管"某一种风格的规矩"(怎么写文案 / 用什么色字体 / 前端怎么实现)。
包含关系一图:设计系统 ⊃ { 风格指南 + 组件库 + 模式库 + 附加资源(Figma 文件/Logo/字体/图标) }。
| 要素 | 英文 | 是什么 | 例子 |
|---|---|---|---|
| 组件库 | Component Library / Design Library | 标准化、可复用的单个 UI 元素(按钮、输入框、导航栏),每个含设计规范(色/尺寸/状态:默认·悬停 hover·禁用·点击)+ 代码(HTML/CSS/JS) | GitHub Primer、Google Material Design(按钮含色/状态/代码) |
| 模式库 | Pattern Library | 由多个组件组合成的高层模式(页面头部、表单布局、搜索),解决"怎么排"而非"用哪个零件" | Atlassian 页面头部(标题+面包屑+搜索+按钮)、Mailchimp 表单/导航模式 |
| 风格指南 | Style Guide | 聚焦"某一类风格"的文档(见下表三类) | IBM Carbon(用法/风格/代码+无障碍+代码沙箱)、USWDS(美国政府,统一各机构) |
组件库 vs 模式库别混:组件库 = 零件清单(一个按钮);模式库 = 零件的组合方式(一个完整的页面头部)。
风格指南三类(各自归属不同团队):
| 类型 | 管什么 | 谁维护 | 变动频率 |
|---|---|---|---|
| 内容风格指南 Content | 写作语气、语法、格式,保证全产品口吻一致 | 内容团队 / 内容策略师 | 中(Wise 用它统一内容语气) |
| 品牌风格指南 Brand | 色彩、字体、Logo、图像等品牌基础元素 | 内部设计团队或代理 | 低(变化少) |
| 前端风格指南 Frontend | UI 元素的设计理念 + 代码片段,给设计师和开发共用 | UX 团队 + 开发协助 | 中高 |
怎么选:设计系统的三种落地法(成本-定制化-品牌一致性三档权衡):
| 方法 | 成本 | 定制化 | 品牌一致性 | 何时用 |
|---|---|---|---|---|
| 采用现有 Adopt | 低 | 低 | 较低 | 预算紧、时间急——直接套 Material Design / Bootstrap 起步 |
| 调整现有 Adapt | 中 | 中 | 中 | 对品牌有一定要求但资源有限——在现成系统上改 |
| 自建 Create | 高 | 高 | 高 | 品牌调性严格、资源充足的大公司——从头造完全贴品牌的系统 |
Why:大公司多团队并行设计开发,没有系统就会出现"同一个按钮十种样子"。系统的收益是跨团队协作降沟通成本、效率提升(设计师不重复画通用件、开发复用现成代码省测试)、品牌一致(NASA 1976《图形标准手册》NHB 1430.2 是经典范例,连"标志应被当作大尺度标题、语言要简洁好让车辆驾驶员快速读到"这种原则都写进去)。
反例 / 注意:设计系统不是"建一次就完事"——必须有专门团队或资深个人贡献者持续维护(产品设计师+UI/UX+前端+研究员),否则会过时拖累体验;还需要高层管理支持拿预算,得向上传达其长期价值。
二、图标与示能(Icons & Signifiers)
来源 6 篇:Icon Usability / Usability Testing of Icons / Accordion Icons / The Floppy Disk Icon / The Proliferation of Sparkles / (示能贯穿)
2.1 图标可用性的两道关 + 四标准
心法:图标好不好用,先看两关——识别度 Recognition(能不能认出画的是什么形状,星星看着像不像星星)和解释性 Interpretation(在这个上下文里它代表什么功能,星星=收藏还是评分)。形状都认不出,含义更无从谈起。
反例(识别度):同一个简单形状常被认歪——丝带 Ribbon 被当钥匙孔 Keyhole;购物袋被当公文包;YouTube 的购物袋图标被当锁或剪贴板;Saks Fifth Avenue 的菜单图标被当文档。 反例(解释性):多个 App 用同款"店面 storefront"图标,用户解读五花八门——Nordstrom/Sephora 当"找实体店"、Ramp 当"查供应商"、DSW 当"购物分类菜单"。同一图标因用户背景/经验/文化不同而理解迥异。
Why:别假设用户天生懂你的图标——设计初期就要测识别度和解释性。
图标可用性的四个质量标准(《Usability Testing of Icons》提出,需分开测才知改哪):
| 标准 | 英文 | 问什么 | 怎么测 |
|---|---|---|---|
| 可发现性 | Findability | 用户能在页面上快速找到图标吗? | 上下文内·时间定位测试 Time-to-Locate(记录找到耗时 + 首次点击正确率) |
| 识别度 | Recognition | 用户懂图标代表什么含义吗? | 上下文外·单独展示图标问"这是什么意思"(别让用户从标签反推) |
| 信息气味 | Information Scent | 用户能猜对"点了之后会发生什么"吗? | 情境化测试(给基本上下文如"这在电商网站上")+ A/B 测试看交互率与"快速返回"(快速返回=点进去失望) |
| 吸引力 | Attractiveness | 图标好看吗? | 评分(1–7 分)或选最喜欢/最不喜欢并说原因 |
评估方法矩阵(《Icon Usability》——离散 vs 上下文 + 评估时机):
| 研究问题 | 测什么属性 | 方法 | 时机 |
|---|---|---|---|
| 这图标看着像计时器吗? | 识别度 | 离散环境识别调查(无标签单独展示)/ 上下文截图测试 | 设计初期 |
| 用户会把计时器图标和"新品"关联吗? | 解释性 | 离散环境调查 / 界面上下文测试 | 设计初期或有模型时 |
| 用户喜欢图标外观吗? | 吸引力 | 离散评分(语义差异/李克特量表)/ 偏好测试 | 设计初期或重设计 |
| 图标适合"找新品"这个任务吗? | 相关性 Relevance | 上下文可用性测试 / 上下文 A/B 测试 | 有原型或上线后 |
| 用户注意到/找得到图标吗? | 可发现性·可找到性 | 上下文可用性测试或点击测试 | 有原型或上线后 |
| 用户能轻松准确点中图标吗? | 目标获取 Target Acquisition | 上下文可用性测试(遵循触控目标大小指南) | 有原型或上线后 |
测试三阶段:策略阶段 Strategize 用上下文外方法(识别度/信息气味)探索多方案;执行阶段 Execute 先离散测吸引力定方案,再随界面完善转上下文内(时间定位);评估阶段 Assess 上线后基准测试 + A/B 持续优化。 避免测试偏差:任务措辞别暗示图标含义;用同义词/省略品牌术语多种问法。标准可用性测试不够——它能暴露图标有问题,但分不清是"没被发现"还是"含义模糊"(某重设计中用户没碰"最近浏览"的时钟图标,但说不清是没注意还是没看懂),所以不能拿它当唯一图标评估法。
2.2 手风琴图标:哪个示能最好(Accordion Icons 实验)
心法:手风琴 Accordion(可折叠内容块)的图标要传达"展开内容、留在本页",而非"跳新页面"。结论:下拉符 Caret(∨)最优,加号 Plus 次之,右箭头 → 几乎等于没图标。
实验设计:11 个不同行业(电商/新闻/教育等)的移动网站原型 × 5 种图标变体(下拉符 Caret / 加号 Plus / 右箭头 / 无图标 / 干扰图标 Foil——控制变量),记录两类数据:点击位置(文本标签/图标/中间空白/其他)+ 用户期望结果(展开 or 跳页)。
| 图标 | 用户期望"留在本页/展开"的效果 | 点击行为 |
|---|---|---|
| 下拉符 Caret ∨ | 最强,显著优于干扰图标和无图标 | 统计显著地更倾向点图标而非文本标签 |
| 加号 Plus + | 较强,略逊 Caret 但优于干扰图标 | —— |
| 右箭头 → | 无明显改善,效果接近干扰图标(右箭头还暗示"跳新页") | —— |
| 无图标 / 干扰图标 Foil | 用户显著倾向认为"会跳到新页面" | 无图标时用户点文本标签,而非图标位置的空白 |
Why:强视觉示能对用户操作至关重要——没图标或用无关图标会增加困惑。标准图标(Caret/Plus/右箭头)的"留页比率"都没显著偏离 50%,说明它们本身不强烈暗示去留;但 Foil 和无图标会显著让用户以为要离开页面。
反例 / 设计建议:① 别给标签和图标分配不同功能(如"点标签跳页、点图标展开")——用户点哪个都有可能;② 别用右箭头当手风琴示能;③ 菜单项要么全展开子菜单、要么全跳页,别混用,尤其右对齐图标最让人困惑。
2.3 软盘=保存:熟悉 ≠ 合适(The Floppy Disk Icon)
心法:图标的认知靠"界面接触经验"而非"对实物的熟悉"。软盘早淘汰,但因长期界面惯例,83% 受访者仍认它=保存(另 13% 认作"磁盘/储存设备",研究图标为简单黑色软盘轮廓)。它已从"相似图标 Similar Icon"演变为"引用图标 Reference Icon"(像电话用老听筒、纸飞机=发送一样的视觉惯例)。
Now:软盘图标在企业级/专业系统(TreeAge Pro Healthcare 2025、ArcGIS Pro)仍广泛保留,因为这些系统重稳定/效率/熟悉度,密集工具栏里改图标反而降低专家效率。
但"熟悉 ≠ 合适":"保存"行为已演变——同步云端/导出本地/生成新版本/下载/自动保存记录当前状态,早超出"点保存写盘"的旧概念。三种保存相关图标的用户联想:
| 图标 | 用户主要联想 | 建议情境 |
|---|---|---|
| 软盘 | 保存:83% | 当前工作保存,适合传统桌面工具 |
| 圆形箭头(回环) | 同步/刷新:73% | 数据同步或更新 |
| 向下箭头+容器 | 下载:78% | 文件保存到本地 |
反例 / 设计建议:① 配文字标签("保存/下载/同步");② 别用软盘表示非传统保存(导出/云同步/版本管理另选贴切图标);③ 即使有自动保存也保留显式"保存"给用户心理保障;④ 界面内图标风格一致,别混隐喻冲突的;⑤ 再熟悉的图标也要在具体语境测;⑥ 顾及依赖图标形状而非文字的老用户,一味去除反降易用。对从没见过软盘的新群体(青少年/科技初学者),这套认知可能失效。
2.4 闪光图标的滥用:✨ 含义不统一(Sparkles Icon)
心法:闪光 Sparkles 图标近年泛滥(常表 AI 功能),但含义完全没标准化,是典型"新兴图标过早大规模使用"的反面教材。
起源与问题:起于图像/视频编辑软件的特效表示,后演变为"特别/新内容"象征(受闪光 emoji 影响)。一项 107 人研究里,用户对它的联想极度发散:
| 关联理解 | 百分比(n=107,带 95% 置信区间) |
|---|---|
| 收藏或保存物品 | 16.82%(10.82%–25.12%) |
| 视觉效果或优化选项 | 16.82%(10.82%–25.12%) |
| 重要/特殊信息(如新内容) | 11.22%(6.39%–18.73%) |
| 奖励或成功肯定 | 6.54%(2.98%–13.12%) |
| 想法/提示/帮助信息 | 4.67%(1.74%–10.75%) |
反例(各 App 解读冲突):Plane Finder 用它表"新功能"但被误读为"添加内容/折扣";Lyft 用它表促销但被当"当前位置/收藏";Ulta 用它表"探索"但被当"推荐商品/新产品";星巴克双星表优惠但不明确。它在视觉上还跟"收藏/书签"的星形图标过于相似,加重困惑。
与 AI 的反直觉发现:闪光图标暗示"幕后魔法、问题轻松解决",但研究中没有一个人把它和"AI"联系起来——因为它同时被用于特效/奖励/广告/新内容等太多场景。这种"魔法比喻"还可能掩盖 AI 的风险(偏见、局限)。
Why / 当前怎么用:闪光图标暂无全球统一含义,只在三种场景较适用——① 图像/视频编辑(沿用特效语义);② 亮点 Highlights(标特别内容,必须配标签如"新!");③ AI 功能(目前可表 AI 驱动,但随 AI 普及象征性会淡化,重点是功能满足需求而非标榜 AI)。新兴图标通用原则:必须测试 + 迭代,并辅以标签/提示降低学习成本。
三、视觉风格的演变周期(Skeuomorphism → Flat → Neumorphism / Glassmorphism)
来源 2 篇:Skeuomorphism / Glassmorphism。视觉风格像时尚,循环往复。
3.1 拟物化 Skeuomorphism:两种用法 + 退潮
心法:拟物化 = 用现实物理元素做数字界面,降低用户学习成本。它有两种截然不同的用法,别混:
- 功能性学习辅助(好):图标模仿现实物体借用用户已有心智模型——垃圾桶=删除、文件夹=存储、软盘=保存。这种至今有效(macOS 仍用文件夹/带折角纸张图标)。
- 视觉设计趋势(易过度):过度强调物理真实感的美学风格——木质/皮革纹理、书架、纸张折角、阴影渐变做 3D 立体感。2010 年代初达顶峰后饱受批评。
反例(视觉趋势的代价):早期 iBooks/Kindle 模仿实体书架、记事本 App 做皮革封面——亲和但带来三问题:① 加载慢(复杂纹理耗算力);② 界面冗杂(过度装饰干扰核心功能);③ 不直观交互(Pizza Hut "倾斜设备选配料"过分强调物理操作反而难懂)。
风格循环:拟物 → 扁平 Flat(简约功能优先,但极简过头导致按钮可点性等交互线索不明显)→ 新拟态 Neumorphism(想结合扁平简洁+拟物 3D,用细腻阴影/凸起做层次,但低对比度伤无障碍、交互不明确难判断哪能点)。Why:好设计要在创新与熟悉感之间平衡——拟物提醒我们可把用户熟悉的元素融进创新体验。
3.2 玻璃拟态 Glassmorphism:磨砂玻璃风(自 2020)
心法:玻璃拟态 = 模拟磨砂玻璃,在复杂背景(渐变/图片)上放半透明元素,营造层次与深度。自 2020 年在 Apple、Microsoft 设计系统广泛应用。
三个核心特征:① 透明度 Opacity(越低越能看到背景);② 背景模糊 Background Blur(越模糊越难辨背后元素);③ 描边与渐变 Strokes and Gradients(低不透明度描边营造"厚度"错觉,渐变描边+渐变填充在单色背景上造深度)。
设计系统中的应用:Apple SwiftUI(iPadOS/macOS)、Microsoft Fluent Design System 的"Acrylic 亚克力"材质、Apple Vision Pro 界面。
反例 / 最佳实践(核心风险=半透明导致对比度不足、文字读不清):
- 确保对比度达 WCAG:用工具(Figma 的 Contrast 插件、WillowTree Contrast)从渐变/复杂背景采样检对比;
- 加大背景模糊:复杂背景(视频/图片)用高模糊减干扰让用户专注内容,简单背景可低模糊——低透明度+低模糊会让背景过分分散注意;
- 给用户透明度调整选项:如 Apple 无障碍设置可"减少透明度/提高对比度",把玻璃组件替换为纯色;
- 预算有限时的底线:默认就满足 WCAG 对比度,别坑低视力用户。
Why:玻璃拟态能提升层次和视觉吸引力,但必须谨慎用以避免无障碍问题——适量用于需强调的元素、遵循成熟设计系统降风险、兼顾可用性与无障碍。(对比 Apple 最新的"液态玻璃 Liquid Glass"见 Apple HIG:Liquid Glass 新设计语言 + SF Symbols + 字体(iOS 26 视觉体系)。)
四、可点击元素识别 + 横幅盲视(Clickability & Banner Blindness)
来源 2 篇:Beyond Blue Links / Banner Blindness Revisited。一正一反:前者讲"怎么让该点的看起来能点",后者讲"内容长得像广告就会被无视"。
4.1 让可点击元素被认出来(Beyond Blue Links)
心法:无论扁平不扁平,交互组件必须保留足够的可点击线索。点击成本 Interaction Cost——用户把点击当货币,讨厌反复找点击项,更不能忍点了没反应。让"静态内容"和"可点击区域"泾渭分明。
| 元素 | Do | Don't / 反例 |
|---|---|---|
| 减少点击不确定性 | 链接外观清晰可辨;静态元素别用链接色;全站超链接外观统一 | 别逼用户"擦屏"(鼠标反复扫)试哪能点——Tom's of Maine 大量区域看着能点实只少量绿色可点 |
| 文本链接 Text Links | 蓝色最安全,其他色也行只要明显区别于正文;导航/外围列表可不加下划线(位置已提示);测色盲可辨 | Patient Safety 站蓝标题看着能点实不能、图片能点却无提示;Starbucks 全站统一绿链接=正例 |
| 按钮 Buttons | 至少有按钮特征(矩形/最好圆角),即使无 3D 也直观像按钮;TaskRabbit 清晰边框=正例 | 别让标题等非按钮长得像按钮;别堆太多大小不一的彩色框;Menagerie Climb 橙框像按钮却不可点;GNC 类目标题做成按钮样 |
| 图片与图形 | 小图点击应放大;图片+图标+文字关联元素整体可点(扩大目标区);Trader Joe's 公告列表图标有效 | 别在一张图里塞多个不同行动选项(除非用列表/按钮清晰展示) |
| 符号与图标 | 图标作链接要易识别,不够明确就配文本标签 | 箭头图标能略提示可点但别滥用(不直观易被忽略);CNN 箭头增强黑框可点性但仍不如传统 |
Why:偏离传统链接设计来增强可点性是可行的,但过度偏离会引发困惑、适得其反。
4.2 横幅盲视:内容像广告就被无视(Banner Blindness)
心法:横幅盲视 Banner Blindness = 用户为提效自动忽略"像广告的内容或广告位置的内容"(一种选择性注意 Selective Attention)。自 1997 年持续存在,且随设计/广告演变,用户的忽视能力还在增强。
四种触发机制:
| 机制 | 含义 | 实证 / 反例 |
|---|---|---|
| 广告位置 | 顶部、右侧栏等惯常广告位的内容被忽略 | 眼动研究:Google SERP 顶部广告(即使脱离传统横幅样式)用户根本没看 |
| 视觉效果"像广告" | 颜色背景、矩形、特殊格式、图嵌文字等特征触发忽略 | bacnyc.org 文中蓝色矩形广告因风格不同被完全忽略 |
| 邻近毒化 | 广告附近的真内容被连坐误判为广告(格式塔"接近性"法则) | apartmenttherapy.com 用户瞄一眼右栏判定是广告,忽略了里面的手工教学视频 |
| 烫手山芋效应 | 一旦在某区域看到无关内容,就快速移开目光、甚至在别的网页也回避该区域 | cascada.travel 右栏既有相关内容也有广告,用户一眼定性"广告区"再不看 |
移动端:小屏广告常内嵌内容区难避开(三星 Galaxy 广告突然出现吸引多次注视);伪广告 Faux Ads——大图/图形因风格不同被误判为广告(generac.com 含安装信息的区域因像广告被无视)。
反例 / 怎么防"内容被毒化":① 选合适色/字体/背景/风格,别让真内容呈"广告外观";② 做可用性测试,看顶部横幅/右栏的关键内容会不会被忽略;③ 别把广告和内容混在同一视觉区域。Why:广告是互联网商业模式必需、不可能全去除,但设计师要优化内容呈现,确保用户不因广告外观漏掉重要信息。
五、动画与动效(Animation & Motion in UX)
来源 1 篇:The Role of Animation and Motion in UX
心法:UI 动画必须低调、简短、细微。它的最大优点也是缺点——能迅速抓注意(周边视野对运动敏感,本是察觉危险的本能),所以任何不相关的动效都是干扰。动画应作"平滑且易察觉的视觉反馈工具",而非过渡填充。它帮用户建立对系统的心智模型。
动效的六大用途:
| # | 用途 | 怎么用 / 正例 | 反例 |
|---|---|---|---|
| 1 | 反馈 Feedback | 让用户察觉操作已被接收;解决变化盲视(用户漏看静态反馈)。Epicurious 购物清单输入后词由灰变黑示已接受;Airtable 拖放列序动画预览新顺序 | Cuisinart 加购物车后徽章无动画+离按钮远,易漏看导致重复加购 |
| 2 | 状态切换 State Change | 直观提示界面切到不同状态。Material Design 铅笔图标变"+"表"编辑→添加"模式切换;加载指示器/骨架屏光泽动画表加载中 | Hipmunk 加载时同时放飞行花栗鼠+数字 0→754+占位+进度条+省略号,动画过多相互削弱 |
| 3 | 空间隐喻与导航 | 帮用户理解信息空间的位置和路径,防方向感丧失(尤其移动端)。iOS 照片"年/月/日"切换缩放动画;Amtrak 购票页间滑动表流程推进;WebMD 手风琴加滚动+展开动画让用户知道没跳新页;大都会博物馆锚点链接平滑滚动 | WebMD 反例:手风琴内容无动画直接顶到屏幕顶,用户误以为到了新页面 |
| 4 | 示能 Signifier | 用运动指引交互方式。Apple Music"正在播放"卡片上滑入位,暗示可下拉关闭;Car2Go 列表项滑动短暂弹跳,提示滑动可揭示更多选项 | —— |
| 5 | 吸引注意 Attention Grabbing | 有限使用相对良性。Refinery29 文中民意调查滑块旋钮辐射光环增强指示 | Outline 内容页移动曲线毫无益处,把注意力从内容上引开 |
| 6 | 注意力劫持 Attention Hijacking(暗黑模式) | (这是反面)用动效误导用户、激发恐惧/损失感 | warmlydecor.com 闪烁倒计时钟"销售即将结束"(无论何时访问每件商品都恰好剩不到 1 小时),激活损失厌恶逼冲动购买 |
Why / 反例总纲:适度动效提升体验(传反馈、状态变化、防迷失、增示能),但过度使用引反感、分散注意、最终损害体验。判断标准:这个动画是在"帮用户理解",还是只在"博眼球/操纵"?
六、视觉测试(Testing Visual Design)
来源 3 篇:Testing Visual Design / Using the Microsoft Desirability Toolkit / Mood Boards
6.1 视觉测试两大类:态度 vs 行为
心法:视觉设计测试分两类——态度性 Attitudinal(收集主观感受/意见,适合评美学与品牌一致性)和行为性 Behavioral(观察实际互动,适合评视觉设计对任务完成与可用性的影响)。"用户说好看" ≠ "用户用得顺",两类都要。
态度性方法(通常用静态图、不需真互动):
| 方法 | 目的 | 怎么做 / 注意 |
|---|---|---|
| 5 秒测试 5-Second Test | 评第一印象 | 展示设计 5 秒后隐藏,记"直觉反应";别提前告诉用户时长 |
| 首次点击测试 First-Click | 评能否准确找到内容 | 给任务,记首次点击;适合用户有明确目标的界面 |
| 偏好测试 Preference Testing | 比 2–3 种设计的偏好 | 确保差异显著、控制变化元素、随机展示顺序避免顺序偏差 |
| 可用性测试后加视觉问题 | 评整体印象 | 先做行为任务,再做态度评估,避免影响行为测试 |
评估反应的四种问法:开放式偏好解释(细节丰富但可能模糊跑题,适合监督+非监督)/ 开放式词语选择(具体不受限,但分析费时需归主题,适合监督)/ 封闭式词语选择(便于分析+验证品牌属性,但少发现新观点,适合监督;随机排词序)/ 数值评分表(量化快,但限制新观点,适合非监督)。
行为性方法:① 眼动追踪 Eyetracking(分析视觉关注点/停留,评布局有效性、优化 CTA 可见性,出视线图+热力图);② A/B 测试(比两版在点击率/转化率上的表现,评色/排版/布局对行为的影响)。
6.2 微软吸引力工具包(Microsoft Desirability Toolkit)
心法:用控制词汇 Controlled Vocabulary(预设词表让用户选)测用户对界面的态度。由 Joey Benedek 与 Trish Miner 于 2002 年开发,原始版 118 张产品反应词卡评情感反应。
Why 用控制词汇而非自由描述:减少分析时的词义不确定性(自由说"吸引人"各人理解不同)。但不能完全消除问题(有人对"复杂"有负面偏差)。
怎么调词表(用于视觉吸引力测试):
- 含可能用来描述界面的相关词 + 按研究目标增补特定词;
- 删掉只关功能/内容/性能的词(如"可控的""太技术化");
- 缩短到 25 个词以内减阅读疲劳;随机排序减选择偏差;
- 必含正面/负面/中性词全面反映态度。示例:积极=友好 Friendly·令人鼓舞 Empowering;消极=无关紧要 Irrelevant·居高临下 Patronizing;中立=稳定 Stable·易接近 Approachable。无需用户真互动,展示截图/模型即可。
数据分析五招(带实证数字):
- 词频排名(如 71% 选"新鲜 Fresh"描述设计);
- 比用户群差异(54% 经验用户选"令人兴奋" vs 仅 13% 新手选同词);
- 比设计版本(83% 用户形容新版"专业" vs 仅 20% 形容旧版);
- 评品牌特质一致性(预先定哪些词符品牌定位,统计选中比例);
- 维恩图可视化分组——例:年轻(18–25)选"创新 Innovative/新鲜 Fresh",年长(35+)选"可信赖 Trustworthy/专业 Professional",重叠区两组都选"简洁 Calm"(取每组前 5 描述词作图)。
适用:测多版本视觉吸引力差异、比不同用户群感知、评设计是否传达品牌特质。
6.3 情绪板(Mood Boards)
心法:情绪板 Mood Board = 用图像/视频/文字拼贴传递"特定感受"的视觉工具。它把抽象情感词翻译成可看的视觉方向,适合无设计经验者理解,统一团队方向、减少误解。
为什么用 / 例子:仅有情感词("鼓舞人心/充满活力/明亮")建立了语调但不能直接指导视觉;通过情绪板(年轻工人努力工作场景+城市能量景观+蓝黄配色),团队才明确风格。用途:定 UI 主色调与视觉特性、放语调关键词/营销理念/交互模式当后续风格指南参考、团队协作收集灵感。
何时创建:早期设计阶段(新产品或重大改版,设计思维的"定义/创意"阶段);团队协作(UI/视觉设计师领导,产品负责人/设计领导/内容管理参与)。建议做多版本探索不同视觉主题(同一旅行 App 两个情绪板可传完全不同主题,帮团队缩小差距)。也可用于人物角色 Persona(可视化兴趣/居住地/职业)。
怎么做(6 步):① 审查现有品牌身份/风格指南确保一致;② 选工具(实体白板适合动手但不便远程/难保存共享;数字工具 Miro/Mural/FigJam 便于实时协作);③ 选情绪——讨论目标用户感受,定 4–5 个关键词,用字典/思维导图找近义词分析细微差异、分组;④ 收集视觉资源(Google 图片/社媒/Pinterest/Behance/实体杂志);⑤ 排列(最重要资源放大或居中,同类分组,留白保层次);⑥ 共享收反馈(便签标注,绿=保留/红=避免)。
反例:别堆大量截图/示例——会让情绪板偏向"功能"而非"特定情绪",那更适合叫"竞争分析板/参考板"而非情绪板;别把相互矛盾的图放进同一情绪板,多概念就分开做。
七、不属于视觉设计的 4 篇(misfit,简述并标注)
这 4 篇被归到「视觉设计」目录,但主题其实属于用户研究方法或团队/分析领域,这里只做指针式简述,不展开。
| 文章 | 真实归属 | 一句话要点 |
|---|---|---|
| 亲和图法 Affinity Diagramming | 研究方法 / 协作整理 | 用便签把零散观察/创意按主题聚类的协作映射法。3 步:独立写便签(5–10 分钟、可颜色编码区分引语 vs 观察)→ 归类成主题并贴标签 → 优先排序+点投票定行动项。别名亲和映射/雪球法,易与卡片分类混(后者主要做信息架构)。Dos:大量数据先筛/鼓励多样视角(发散-收敛)/清晰定义主题;Don'ts:别过度分类(允许一条便签复制进多组)、别忽略小组别。 |
| UX 映射方法·视觉设计指南 | 研究方法 / 可视化制图(沾视觉设计但本体是 map) | 给 UX 地图(情绪图/旅程图/服务蓝图/路线图)做视觉美化的流程。何时讲究视觉:受众广/公开展示/影响大时。6 步:选工具(PPT/Excel/Figma)→ 建视觉系统(标题 60–80 点、主文本 12–18 点黑、3–6 色调色板)→ 建基础结构(矩阵 or 泳道,结构线更粗用灰/黑)→ 加内容(先放主标签)→ 优化(对齐/均匀分布/图例)。地图几乎总从粗糙稿起步再完善;别为美而美,靠测试和反馈完善。 |
| 群体思维 Groupthink in UX Work | 团队流程 / 决策心理 | 为追求一致和谐而压制个人观点导致次优决策(高凝聚力团队尤甚)。Irving Janis 八症状中 UX 常见四个:集体合理化/一致性假象(沉默误当共识)/自我审查/对异议者直接施压。五场景防法:头脑风暴(定规则"没有愚蠢想法"+先独立思考)、工作坊(澄清主持人只引导不决策+发散收敛+点投票)、焦点小组(多样化招募+暖场)、追趋势(竞品测+权衡成本)、远程(轮流主持+匿名反馈+明确沟通规则)。 |
| NPS 的缺点 Downsides of NPS | 分析 / 度量指标 | 净推荐值 NPS(Fred Reichheld 提出)问"多大可能推荐给朋友"(0–10):贬低者 0–6 / 中立者 7–8 / 推荐者 9–10。缺点:推荐受限(没人可推不代表产品差)、易被操控(诱导高分/只发给满意客户)、信息损失(忽略 7–8 中立者;0 分和 6 分都算贬低者无法区分)、需更大样本(要 15% 误差范围需约 88 人 vs 普通评分仅 40 人)。改进:记每个用户实际评分算平均值+误差分析、配合任务完成率/时间等其他指标,别单用。 |
源自 NNGroup Topics / Visual Design - 视觉设计(设计系统与图标子集,19 篇)。可用性测试方法/启发式/态度 vs 行为数据的母篇见 NNGroup 可用性测试与十大可用性启发式(10 条启发式完整表 · 复杂应用应用 · 用户愉悦层级 · 测试方法 5 人法则/招募/远程/任务场景/分步任务/态度vs行为/4步分析/小样本误差/竞争性评估);组件级图标/控件用法见 Apple HIG 组件决策手册(63 个组件 · 何时用哪个);Apple 最新玻璃风格见 Apple HIG:Liquid Glass 新设计语言 + SF Symbols + 字体(iOS 26 视觉体系)。图片/视频/原档(手风琴实验图、横幅盲视眼动视频、动效 mov/mp4、Desirability 维恩图等)保留在 sources。