Learning objectives

• 了解视觉元素的使用规范与好设计的特质。
• 掌握视觉感知与认知原则（尤其是 Gestalt）。
• 理解无障碍可视化内容的基本指南。
• 熟悉主流视觉设计风格与平台（Apple HIG、Material、Fluent）。

Visual Design Elements

视觉设计作用：提升美感与情绪、突出重点、改进可发现性与沟通效率，优化整体体验。

六类基础元素：线（分隔/连接/强调）、形（二维区域，用描边/填充与背景区分）、色（色相/饱和度/明度；用于吸引注意、传达约定意义、帮助记忆与营造情绪）、字体排印（少字体、少级别、左对齐、舒适行距与字号、熟悉字体更易读）、纹理（多与拟物相关，用于借用真实材料或触感暗示）、留白（结构化信息、降低负荷、营造开放感）。

色彩与体系：颜色需要“适量与有目的地使用”；强调对比以可读与主次；UI 中颜色常被赋予角色（如“主色/成功/警示”等），但需注意跨文化差异与一致性。

拟物到扁平：早期借助拟物外观与行为迁移知识；随着用户熟悉度提高与性能/一致性考虑，转向更克制的纹理与更平滑/扁平的表现（也可用渐变、照片、半透明等丰富表面）。

可达性实现：默认考虑无障碍——清晰字距与字号、可变字体大小/颜色模式、有限色彩数、不仅用颜色传达信息、与系统无障碍特性兼容。

Visual Design Principles

什么是“好”的视觉设计：与可用性并不矛盾，通过可验证的心理学原则解释我们如何解读元素。

五大核心原则（+Gestalt 单讲）：

1. 尺度（Scale）：以相对大小表明重要性；通常控制在不超过三档大小来兼顾层次与负荷；通过尺度引导首要关注与信息发现。
2. 层级（Visual Hierarchy）：用大小、明度/颜色、对齐/间距变化引导阅读顺序；缺乏层级会增加解析成本。
3. 平衡（Balance）：围绕“想象中轴”的视觉信号分布可为对称、非对称、放射；适当的非对称可制造动感与视觉流，但过度会不适。
4. 对比（Contrast）：并置差异以强调元素；既包括颜色/明暗对比（影响可读性），也包括风格/粗细等；过度弱化对比会伤害可达性。
5. 重复（Repetition）：一致地复用元素、风格与规则，建立熟悉感与跨界面的一致体验。
6. Gestalt

Visual Perception & Cognition (Gestalt)

• 相似性（Similarity）：外观相似的元素被感知为同组，可用颜色/形状/大小等建立类型认知。
• 延续性（Continuation）：视觉倾向沿最平滑路径“连看”为一体，可用进度条/时间轴/菜单轨迹组织视觉流。
• 接近性（Proximity）：彼此接近被视为一组；复杂表单应通过间距分块，避免“信息糊成一团”。
• 图地关系（Figure–Ground）：我们能区分前景与背景；需要通过明暗/模糊/叠加等清晰界定层次。
• 共同区域（Common Region）：被同一边界包围的对象被视为一组；常与接近性、图地关系协同工作以形成“卡片/容器”级对象。

Icons and Graphics

图标：用小图形简化对象与动作的表达，通常基于隐喻或与任务相关的熟悉物体；“真正通用”的图标很少——配文字标签可提升可用性与学习效果，并避免同一图标跨产品语义漂移。

图标设计要点：清晰（细节易察觉）、有意义（传达明确概念）、可记忆（减少再学习）、灵活（多尺寸）、情境化（契合场景）、悦目（避免不适）。

图形/图片使用：有目的地使用；确保可理解、一致、情境合适；用视觉原则避免杂乱；确认对用户有实际收益。视觉注意依情境而变——相似呈现下，不同类目（如书柜 vs 电视）用户可能关注文本或缩略图的侧重完全不同。

Visual Design Systems

设计系统的构成：颜色体系、排版系统、图标与图像、布局与导航、动效与声音、可复用模式与成文规则——以统一原则支撑可意图性的设计与规模化复用。

平台指南：

• Apple HIG：提供基础概念、最佳实践、界面元素/模式与平台差异指导。
• Google Material：以“材质隐喻、醒目图形化、以动效传意”为核心，Android 端主流；各厂定制样式需关注差异。
• Microsoft Fluent：Windows 11 的跨平台设计系统，强调 Effortless、Calm、Personal、Familiar、Complete & Coherent。

  专项与行业系统：

• Neurodiversity Design System（NDS）：融合神经多样性与 UX 的 LMS 设计原则集合。
• GOV.UK Design System：政府数字服务的样式、组件与模式库，强关注 WCAG 实施与可复用代码组件。

  原型 UI 套件：社区提供的 Figma UI Kits 可作为高保真原型“加速器”，在此基础上定制以体现自有品牌。