Google UX 证书 / 视觉设计·设计系统·响应式

线框图把"骨架"搭好后,这门课给骨架"穿衣服"——颜色、字体、图标、布局,做成 Mockup(静态高保真设计图) 和 高保真原型,再用 设计系统 保证一致性,最后扩展到 响应式网站。还包含一块 PM 常忽视的 设计伦理。

对 PM 的意义:① 设计系统(design system)和你做产品的"组件库 / 设计规范"是一回事,知道它的结构(元素→组件→模块→模板)能帮你判断团队该不该建、怎么维护。② 60-30-10 配色法则 + WCAG 对比度 4.5:1 是评审 UI 稿时能直接拿来用的硬标准。③ 注意力经济 + 暗黑模式那节,正好对应你做增长时"留存 vs 操纵"的伦理边界。

一、视觉设计的基础元素

四大基础 + 补充元素:

元素	作用	要点
字体 Typography	建立层级、提升可读性、赋予风格	字体/字号/粗细/行距
颜色 Color	传信息、唤情绪、引导注意力	用色轮找和谐搭配,注意文化差异 + 无障碍
图标 Iconography	省空间、引导操作	简洁、易识别、符合预期
线条 Lines	分隔/连接/强调	标题下加横线增强关注
尺寸 Size	视觉权重、互动效果	按钮太小会误触(尤其手机)
形状 Shape	功能语言	带"+"圆形=展开,带"X"圆形=关闭
图片 Image	传情绪、讲故事	与内容高度相关 + 加 alt text

二、颜色 Color

三大作用 + 60-30-10 法则

强调 Emphasis:用色突出关键操作(按钮)。60-30-10 法则——60% 主色(白/浅灰,背景)、30% 次色(灰,辅助信息)、10% 强调色(橙/亮色,操作按钮)。
传达品牌 Branding:品牌色是识别的一部分(Google 红黄蓝绿),全产品保持一致,遵循品牌指南。
提升无障碍 Accessibility:对比度直接影响低视力用户。

色彩心理:红=警示/食欲(麦当劳、可口可乐)、蓝=平静/信任/专业、绿=确认/成功。注意文化差异——同一颜色在不同地区含义不同。

颜色无障碍(WCAG)

W3C 的 WCAG(Web 内容可访问性指南)是硬标准:

对比度 4.5:1 是文字最低标准(亮度对比比率)。2:1 难读、4.5:1 浅色仍可读、16:1 醒目、21:1 黑底白字极致。工具:WebAIM Contrast Checker、Color Safe、Figma 的 Stark 插件。
色盲(红绿/蓝黄/全色盲):颜色 + 图标/图案双编码(错误项不只红字,加红色感叹号图标;图表用条纹/点状区分);避免难辨配色并排(红绿、绿棕、蓝紫等)。
低对比敏感 / 光敏:提供浅色 + 深色版本。

三、字体 Typography 与图标 Iconography

字体 3 价值:① 字体层级 Typographic Hierarchy(用字号/粗细区分内容结构、引导注意) ② 易读性 Legibility(单字母清晰) + 可读性 Readability(整段好读)——常选清晰 sans-serif(如 Oswald/Roboto) ③ 符合品牌指南。

图标 Iconography = 图形符号系统。两类用途:传达操作(箭头=方向、太阳=亮度)、提供补充信息(电池=电量)。要点:

通用图标(房子=首页)可跨语言,但注意文化(美式橄榄球图标不通用,国际化用足球)。
每个图标加文字标签——屏幕阅读器读不了图标本身,加 "Home" 字样既助识别又无障碍。
图标样式/配色承载品牌;入职后通常有公司 Iconography Guidelines。

四、布局 Layout 与视觉原则

布局 = 元素在页面的位置分布,作用:强调关键信息、引导视线、提升可读可操作。布局可复用(首页/登录页/结账页核心逻辑相通)。三大组成:网格 Grids(隐性骨架,整齐对齐)、容器 Containment(把相关信息收进视觉区块)、留白 Space(提层次、减负担、引注意)。

视觉设计原则(评审 Mockup 时的检查项):

原则	含义
强调 Emphasis	让最重要的元素最突出(对比色/大小)
层级 Hierarchy	用视觉权重表达信息重要性顺序
比例 Scale & Proportion	用大小关系组织内容、引导视线
统一与变化 Unity & Variety	整体协调(统一)又有重点变化(避免单调)
格式塔 Gestalt	相似/接近/共同区域/闭合/连续/对称(详见 Google UX 证书 / 构思·线框图·低保真原型)

UI 元素细节:超链接(蓝色带下划线是用户预期,文字要写清"查看预订"而非"点击这里")、按钮(形状/颜色/大小一眼可认,样式统一,周围留空防误点)、输入框(给提示文字,超 6 个按内容分组)。

五、Mockup 与高保真原型

Mockup = 静态的高保真设计图,表现最终产品的视觉样貌(颜色/图像/图标/阴影/字体/真实内容),但不可交互。从低保真转高保真时:填真实内容(不用占位符)、可重排布局(不拘泥线框图)、用网格/容器/留白。

高保真原型 Hi-Fi Prototype = Mockup + 交互连接(像低保真原型那样在 Figma 里连页面,但视觉是成品级)。讲师 Chikezie 的提醒:高保真不只是好看,更是沟通工具——告诉工程团队具体开发什么、帮产品团队确认这是不是要的方案。

六、设计系统 Design System

一套可复用的元素 + 设计准则,让团队一致、标准化地设计开发。把品牌规范、组件、配色整合在一个平台。

4 大组成 + UI 模式 4 层级

4 组成:① 视觉样式(字体/颜色/图标) ② 使用准则(设计原则/编辑规则) ③ UI 模式 ④ 开发代码支持(组件代码片段)。

UI 模式按层级递进(重要,理解组件复用的关键):

graph LR
  E["元素 Elements<br/>文字/颜色/图标"] --> C["组件 Components<br/>按钮/表单标签"] --> M["模块 Modules<br/>导航栏/页眉"] --> T["模板 Templates<br/>完整页面结构"]

5 大好处 + Sticker Sheet + Figma 组件

5 好处:提高一致性、强化品牌、可扩展(团队/功能增长直接复用)、省时省成本、促进设计-开发协作(带代码规范)。

Sticker Sheet(设计套件):把常用元素 + 组件(含不同状态,如图标选中/未选中)放一起,像贴纸一样复制粘贴。配合 Figma 组件/实例机制——改主组件,所有实例自动更新(按钮橙改蓝,全产品自动变)。

主流设计系统(可参考复用):

系统	厂商	特点
Material Design	Google	开源,跨 Android/iOS/Web,栅格+排版+组件+动效,Material 3 动态主题
Polaris	Shopify	电商/后台,4 部分(内容/设计/组件/体验),表格/筛选/分页丰富
Human Interface Guidelines	Apple	iOS/macOS,简洁一致、关注内容与用户掌控
Fluent	Microsoft	跨平台,光影/深度/动效,复杂桌面系统层级
USWDS	美国政府	严守 WCAG、移动优先,学无障碍标准化的范本

讲师 Shabi(Google 设计系统设计师)强调:无障碍要从设计一开始就考虑,不是上线前补救——很多团队为满足规定才匆忙加,这不是真为用户。

七、响应式网站 Responsive Web

响应式设计:页面随设备屏幕自动调整布局。响应式 Web App vs 专属移动应用(原生 App):

	原生 App	响应式 Web
访问	应用商店下载、本地安装	浏览器访问、无需安装
优	离线可用、调用摄像头/定位等原生功能、交互自由度高	开发快成本低、不占空间、一套适配所有设备
缺	开发贵、需多平台适配、商店审核、占空间	需联网、不易被发现(不能上架)、兼容性维护复杂

响应式常用元素(同一内容跨设备变形):

元素	桌面	移动
汉堡菜单 Hamburger	顶部水平导航栏	三横线图标,点开折叠导航
卡片 Cards	4–5 列	1–2 列
轮播 Carousel	多图/占屏	每次 1 张,更紧凑
CTA 按钮	紧凑但醒目	更大,便于手指点

决策提示:要隐藏导航→汉堡菜单;多主题内容→卡片;视觉重点/图片推荐→轮播;引导点击→CTA。响应式网站的规划同样从站点地图 Sitemap + 信息架构开始(见 Google UX 证书 / 构思·线框图·低保真原型 §五),网站常见结构有单列、多列、网格等。

八、设计伦理(PM 必读)

注意力经济 Attention Economy

诺奖得主 Herbert Simon 提出:"信息越多,注意力越稀缺"。各产品争夺有限注意力,过度设计"抓注意力"会让用户抑郁/焦虑/FOMO/强迫刷。负责任的设计反例:Google 数字健康(管理使用时间)、Apple 驾驶勿扰(开车屏蔽通知)——技术应让生活更好而非控制生活。

UX 设计师的责任:① 不欺骗用户(诚实透明) ② 理解公司目标但判断是否对用户有利 ③ 用影响力推好的设计决策。暗黑模式 Dark Pattern(利用心理弱点误导)是红线。

伦理设计:照顾边缘与弱势

主流文化陷阱:只为多数人设计会排除其他群体。
边缘群体 Marginalized(残障、缺网络/设备、非主流语言)→ 移动优先、低带宽可用。
弱势代表群体 Underrepresented(非主流性别/性取向、少数族裔、非典型家庭)→ 别默认"家庭=两位父母"。
边缘案例 Edge Cases:产品没预料的使用情境,主动预判 + 给"回到正轨"的路径。
落实:建包容性用户画像(别只针对"普通"用户)、扩大"利益相关者"范围(所有受影响的人)、多与不同群体合作。通用设计(一个设计人人能用)vs 多元设计(不同人用不同方式平等使用)。

关键术语速查(Glossary)

英文	中文	一句话
60-30-10 Rule	60-30-10 法则	主色/次色/强调色配比
WCAG / Contrast Ratio	无障碍指南/对比度	文字最低对比 4.5:1
Typographic Hierarchy	字体层级	字号粗细区分内容结构
Legibility / Readability	易读性/可读性	单字清晰 / 整段好读
Mockup	高保真设计图	静态、视觉成品级、不可交互
Hi-Fi Prototype	高保真原型	Mockup + 交互连接
Design System	设计系统	可复用元素+准则
Sticker Sheet	设计套件	元素/组件贴纸表
Component / Instance	组件/实例	改主组件,实例自动更新
Elements→Components→Modules→Templates	UI 模式 4 层级	复用的递进结构
Responsive Web vs Native App	响应式 Web / 原生 App	浏览器适配 / 商店下载
Hamburger Menu / Card / Carousel / CTA	汉堡菜单/卡片/轮播/行动按钮	响应式常用元素
Attention Economy / Dark Pattern	注意力经济/暗黑模式	注意力稀缺 / 操纵性设计(红线)
Edge Case	边缘案例	没预料的使用情境