NNGroup 设计系统·图标·视觉风格·动效·视觉测试(19 篇 · 设计系统vs风格指南 · 图标可用性4标准/识别度vs解释性 · 拟物/玻璃拟态/扁平/新拟态 · 可点击元素识别+横幅盲视 · 动画动效6用途 · 视觉测试态度vs行为/Desirability Toolkit/情绪板)
Nielsen Norman Group「视觉设计」主题下设计系统与图标子集 19 篇精华。六大簇:①设计系统与风格指南(Design System=父,含组件库 Component Library/模式库 Pattern Library/风格指南;Style Guide=子,分内容/品牌/前端三类;三种落地法采用 adopt/调整 adapt/自建 create 的成本-定制-品牌一致性三档权衡;NASA 1976/Material/Carbon/USWDS 范例)。②图标与示能 Signifier(图标可用性=识别度 Recognition 是否认出形状 + 解释性 Interpretation 是否懂含义;4 质量标准 可发现性 Findability/识别度/信息气味 Information Scent/吸引力 Attractiveness;离散 vs 上下文测试矩阵;手风琴 Accordion 标识符实验 11 原型 5 变体→Caret 下拉符最优·右箭头≈无图标;软盘=保存 83%/圆箭头=同步刷新 73%/下箭头+容器=下载 78%;闪光 Sparkles 图标 AI 滥用·107 人无一人联想 AI·16.82% 误读收藏)。③视觉风格演变(拟物 Skeuomorphism 学习辅助 vs 视觉趋势→扁平 Flat→新拟态 Neumorphism 低对比痛点;玻璃拟态 Glassmorphism 自 2020 透明度+背景模糊+描边渐变·Apple SwiftUI/Microsoft Fluent Acrylic/Vision Pro·WCAG 对比度风险)。④可点击元素识别(Beyond Blue Links 5 类提示·点击成本 Interaction Cost)+横幅盲视 Banner Blindness(选择性注意·邻近毒化·烫手山芋效应·伪广告·自 1997 持续)。⑤动画与动效(6 用途:反馈/状态切换/空间隐喻导航/示能/吸引注意/注意力劫持暗黑模式;克制原则)。⑥视觉测试(态度 Attitudinal vs 行为 Behavioral;5 秒测试/首次点击/偏好测试/开放闭合词选;Microsoft Desirability Toolkit 118 词卡 2002 控制词汇·删减至 25 词内·维恩图分组;情绪板 Mood Board 4-5 关键词→视觉拼贴)。另含 3 篇研究/团队方法 misfit(亲和图法/UX 映射视觉/群体思维/NPS 缺点)简述并标注归属。读者=产品经理,术语行内解释,决策导向(何时用/怎么选/反例),保留全部数字。