构建信号SIGNAL TO BUILDEnglish站主登录 ↗按主题浏览已经整理的知识、课程笔记与方法。保留原有正文和出处。
Apple 设计的视觉'原子层'决策手册。颜色(系统语义色·宽色域·Liquid Glass 配色)/ 字体排版(SF·NY·Dynamic Type·各平台最小字号)/ 布局(分组·层级·安全区·渐进披露)/ 空间布局(visionOS 视野·深度·比例)/ 材质(Liquid Glass vs 标准材质·厚薄选择)/ 动效(目的性·可选·visionOS 防晕)/ 暗黑模式(非反转·对比度 4.5:1/7:1)/ 图片(@1x/2x/3x·格式选型)/ 应用图标(分层·跨平台形状·Icon Composer)/ 界面图标 ICON(光学居中·矢量)/ SF Symbols(4 渲染模式·9 权重·变体·动画·自定义)/ 品牌(让位于内容)。每条带最佳实践 + 反例 + 平台差异。
iOS 26 起 Apple 的新视觉语言 Liquid Glass(液态玻璃)全套 + SF Symbols 深化 + 字体光学尺寸 + 色板体系。Liquid Glass:是什么(数字'元材料'·透镜效应 Lensing·凝胶柔性)/ 材质层(高光/阴影/内部发光反馈/聚焦变化)/ 两变体(Regular vs Clear+Clear 三前提)/ 自适应(小控件切浅深·大面板只边缘变灰·滚动边缘 soft/hard)/ 结构(描绘关系·反映导航焦点·提升控件·延伸到边缘)/ 几何同心(固定/胶囊/同心三形状)/ 可读性·染色 Tinting·无障碍 / Icon Composer 图标工作流(单图稿→全平台·六外观模式·分层导出)。SF Symbols:4 渲染模式(单色/分层/调色板/多色)·可变颜色·9 权重 3 比例·变体·绘制动画(Draw On/Off·Magic Replace·摇摆/旋转/呼吸/脉冲/弹跳/缩放)·插值原理·自定义符号。字体:SF/NY/Compact/Mono·光学尺寸 SF Text/Display·可变字体·Dynamic Type 11 文本样式·字距行距·选字(结构/对比/显示vs文本字体)。色板:tint 双模式·灰度 fill/separator/system gray·语义色。
Google Material 3 (M3) 设计系统的核心主张与基础维度提炼,从 Will 的 Notion 设计笔记区(123 篇 .md,12 个分类)综合而成。覆盖:① M3 的灵魂——动态色彩 Dynamic Color(从壁纸/内容提取源色→算法生成 5 关键色→色调调色板 0-100→26 个语义颜色角色 Color Role,实现'个性化+自动深色模式+用户可控对比度'四件事)与底层 HCT 色彩模型(Hue 色相/Chroma 色度/Tone 色调,比 HSL 更贴近人眼);② 颜色角色体系(Primary/Secondary/Tertiary/Error/Surface + Container + On + Variant 命名法,3 档对比度 标准/中/高 对应 3:1 与 7:1);③ Type Scale 字号比例(15 样式 5 大类 Display/Headline/Title/Body/Label,Major Second 1.125 比例,可变字体 4 轴 字重/字级 grade/宽度/光学尺寸);④ Shape 形状(7 级圆角 None→Full + 圆角/切角家族);⑤ Tonal Elevation 色调高度(0-5 级 dp,M3 用色调差异+遮罩替代阴影);⑥ Layout 布局(Window Size Class 窗口尺寸类 Compact<600/Medium600-840/Expanded840-1200/Large/XL,信息密度,48dp 触控目标);⑦ Adaptive 自适应(3 策略 隐藏显示/浮动/重排);⑧ Motion 动效(缓动 emphasized/standard × duration 200-500ms);⑨ Interaction States 交互状态层(hover+8%/focus+10%/press+10%/drag+16% 不透明度叠加);⑩ Accessible 无障碍(WCAG 对比度 3:1/4.5:1)与 ⑪ Content 内容设计(20 条英文 UI 文案规则)。对 PM 的价值:审设计稿时拿它当 checklist(对比度够不够/触控目标够不够大/颜色角色用对没/文案是否句首大写),理解'设计令牌 design token'与'语义化颜色'为何能省协作成本,以及 M3 哪些是可照搬的硬约束(无障碍/触控尺寸)、哪些是可偏离的风格选择(动态色彩/圆角/字号)。与 [[nngroup-visual-design-systems]] 分工:那篇讲'设计系统是什么'的通论(Design System vs Style Guide,采用/调整/自建),本篇讲 Material 3 这一个具体设计系统的内部主张与数值规则。读者=产品经理,术语行内解释,每节带 Why。
Google UX 证书 Course 5(视觉设计/Mockup/设计系统)+ 响应式网站。视觉 4 元素(字体/颜色/图标/线条尺寸形状图片)+ 颜色(60-30-10 法则 + 色彩心理 + WCAG 对比 4.5:1 + 色盲/低对比/光敏无障碍)+ 字体层级/易读性 + 图标(操作 vs 补充 + 文字标签 + 品牌)+ 布局(网格/容器/留白)+ 视觉原则(强调/层级/比例/统一与变化 + 格式塔)+ Mockup(静态高保真)+ 设计系统(4 组成 + UI 模式 4 层级 + 5 好处 + Sticker Sheet + Figma 组件/实例 + Material/Polaris/Apple HIG/Fluent/USWDS)+ 响应式(原生 App vs 响应式 Web 优劣 + 汉堡菜单/卡片/轮播/CTA)+ 设计伦理(注意力经济/暗黑模式/边缘群体)。面向 PM
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·掩盖小问题但救不了大缺陷·干扰可用性测试)。读者=产品经理,术语行内解释,决策导向(何时用/怎么选/反例),所有数字保留。