UI设计师面试 · 一日速成专家备战报告

面试高频问："这是什么控件？什么时候用？"

设计交付与无障碍

技术名词（必懂）

原型/交互工具

平面/图像工具

动效/视频工具

AI 工具（你的核心优势，不是弱项）

协作/交付工具

视觉层级（Visual Hierarchy）

• 大小对比：重要元素更大。标题 > 正文，主按钮 > 次按钮
• 色彩对比：高饱和/高对比吸引视线。CTA 用品牌主色
• 间距分组：相关元素靠近，无关元素远离（格式塔接近性）
• 字体权重：Bold > Regular，建立信息优先级

七大设计心理学定律

• 菲茨定律 Fitts's Law：到达目标时间 = 距离/大小。按钮越大越近越好点击。手机底部导航比顶部更易触达
• 希克定律 Hick's Law：选项越多决策越慢。导航项控制在 5-7 个，复杂操作拆步骤
• 米勒定律 Miller's Law：人脑同时记忆 7±2 个信息块。信息分组（如电话号码分段）
• 格式塔原理：接近性（相邻=相关）、相似性（相似=同类）、连续性、闭合性、图底关系、共同命运
• 雅各布定律 Jakob's Law：用户期待你的产品和其他产品一样工作。别发明反直觉交互
• 泰斯勒定律 Tesler's Law：复杂性守恒——每个过程都有固有复杂性，只能转移不能消除
• 波斯塔尔定律 Postel's Law：对用户宽容，对自己严格。输入容错，输出精确

对齐与栅格

• 8-point 间距系统：所有间距是 8 的倍数（8/16/24/32），4 用于微调。保证视觉节奏
• 12 列网格：桌面端标准，平板 8 列，移动 4 列
• 对齐一致性：左对齐最易读，居中用于强调，右对齐用于数字

色彩三要素

• 色相 Hue：颜色的"身份"（红/蓝/绿），色环 0-360°
• 饱和度 Saturation：颜色鲜艳程度，0%=灰色，100%=纯色
• 明度 Lightness：颜色亮暗，0%=黑，100%=白

常见配色方案

• 单色 Monochromatic：同一色相不同明度，和谐统一，适合品牌
• 类比色 Analogous：色环相邻 3 色（如蓝-青-绿），自然舒适
• 互补色 Complementary：色环对立 2 色（如红-绿），高对比强调
• 三分色 Triadic：色环等距 3 色，活泼平衡
• 60-30-10 法则：主色 60%、辅色 30%、强调色 10%

品牌色应用

• 主色定义品牌识别，用于 CTA、Logo、关键交互
• 建立色阶（100-900），500 为基准，100 浅背景、900 深文字
• 语义色独立：success #10b981 / warning #f59e0b / error #ef4444 / info #3b82f6

暗色模式设计要点

• 避免纯黑 #000：用 #1a1d29 等深灰，减少眼疲劳
• 避免纯白 #fff：用 #fafafa 等米白
• 降低饱和度：暗色背景下高饱和色会产生"光晕"（vibration）
• 层级用表面色：背景 #1a1d29 → 卡片 #252836 → 悬浮 #2f3343
• 阴影改用光：暗色模式阴影不可见，用边框 + 微光区分层级

WCAG 对比度标准

字体分类

• 衬线 Serif：如 Times、宋体。传统、正式、可读性强（印刷）
• 无衬线 Sans-serif：如 Inter、思源黑体。现代、简洁、屏幕可读性好（UI 首选）
• 等宽 Monospace：如 JetBrains Mono。代码、数据
• 展示字体 Display：标题专用，个性强，不适合正文

字号阶梯（Type Scale）

• 采用 1.25 模数比：12 → 14 → 16 → 18 → 24 → 30 → 36 → 48px
• 正文 16px（1rem）是可读性基准，小于 12px 难读
• 标题：H1 36-48px / H2 24-30px / H3 18-20px
• 辅助文字：12-14px（标签、说明）

行高与字距

• 行高 line-height：正文 1.5-1.6 倍字号最佳；标题 1.2-1.3 倍（更紧凑）
• 字间距 letter-spacing：正文 0；大标题 -0.02em（收紧更精致）；全大写文字 +0.05em（松开更易读）
• 段落间距：≥ 字号本身

中英文混排

• 中文字体回退：'PingFang SC','Hiragino Sans GB','Microsoft YaHei'
• 中英文之间留 1/4 空格（或用 CSS 调整）
• 中文正文建议 14-16px，比英文略大
• 数字与单位用等宽字体对齐

Atomic Design 原子设计

• Atoms 原子：按钮、输入框、标签、图标——不可再分的最小单元
• Molecules 分子：搜索栏（输入框+按钮）、表单项（标签+输入+校验）
• Organisms 组织：导航栏、卡片列表、表单组
• Templates 模板：页面骨架，定义布局结构
• Pages 页面：填入真实内容的最终呈现

组件状态（必背）

• Default：默认态
• Hover：悬停（鼠标）
• Active/Pressed：按下
• Focus：聚焦（键盘导航，必须可见！）
• Disabled：禁用（opacity 0.6 + not-allowed）
• Loading：加载中
• Error：错误
• Selected：选中

组件变体 Variants（Figma/Pixso）

• 用属性（Property）管理变体：Type(primary/secondary) × Size(sm/md/lg) × State(default/hover/disabled)
• 命名规范：Type/Primary, Size/MD, State/Default
• 一个组件覆盖所有组合，避免文件爆炸

设计系统的价值

• 一致性：95%+ 视觉一致，品牌识别统一
• 效率：组件复用，新页面拼装而非重画
• 协作：设计师/开发/PM 共同语言
• 可维护：改一处 Token，全站同步
• 规模化：团队扩张时质量不降

什么是 Design Token

设计令牌是设计决策的命名存储单元——用语义化名称代替硬编码值，让颜色、间距、字号等可在设计与代码间单一来源同步。

Token 分类

• Color：primary-500、text-primary、surface-background
• Spacing：space-1(4px) / space-2(8px) / space-4(16px) / space-8(32px)
• Typography：font-size-base、font-weight-bold、line-height-loose
• Radius：radius-sm(4px) / radius-md(8px) / radius-lg(16px) / radius-full
• Shadow / Elevation：shadow-sm / shadow-md / shadow-lg
• Motion：transition-fast(150ms) / transition-normal(300ms) / ease-out-quart
• Z-index：z-dropdown / z-modal / z-toast

命名规范（三级语义）

• Global Token：color-blue-500（具体值）
• Semantic Token：color-primary（语义化，引用 global）
• Component Token：button-bg-primary（组件级，引用 semantic）

Token 落地到前端

/* Global Token - 具体值 */
--color-blue-500: #3b82f6;

/* Semantic Token - 语义引用 */
--color-primary: var(--color-blue-500);

/* Component Token - 组件引用 */
--button-bg-primary: var(--color-primary);

/* 暗色模式覆盖 */
[data-theme="dark"] {
  --color-primary: #60a5fa;
}

WCAG 2.1 / 2.2 标准（AA 是行业基准）

• 可感知 Perceivable：所有内容可被感知。对比度、文字替代、不依赖单一感官
• 可操作 Operable：所有功能可操作。键盘导航、焦点可见、无时间限制、无闪烁（癫痫）
• 可理解 Understandable：内容和操作可理解。清晰文案、可预测导航、错误提示
• 健壮 Robust：可被各种工具解析。语义化 HTML、ARIA、屏幕阅读器兼容

关键数值（必背）

• 正文对比度 ≥ 4.5:1（AA），≥ 7:1（AAA）
• 大文字（18px+/14px Bold）对比度 ≥ 3:1
• UI 组件边界 ≥ 3:1
• 触摸目标 ≥ 44×44px（iOS）/ 48×48dp（Android）
• 焦点态必须可见：outline 2px + offset 2px
• 文字可缩放至 200%不破坏布局

色彩独立性

• 不只用颜色传达信息（色盲用户）——颜色+图标+文字
• 错误状态：红色 + 警告图标 + "错误"文字
• 链接：颜色 + 下划线

屏幕阅读器与 ARIA

• 语义化 HTML 优先：<button> > <div onclick>
• ARIA 角色补充：role="navigation"、aria-label="主导航"
• alt 文本描述图片用途，装饰图 alt=""
• 表单 label 关联：<label for>

断点策略（Breakpoints）

• 移动：320-639px（手机）
• 平板：640-1023px
• 桌面：1024-1279px
• 大屏：1280px+
• Tailwind 断点：sm(640) / md(768) / lg(1024) / xl(1280) / 2xl(1536)

移动优先（Mobile First）

• 从小屏开始设计，逐步增强到大屏
• 移动端约束最严（空间小、网络弱），逼出核心功能
• CSS 用 min-width 媒体查询向上增强

流式布局

• 百分比宽度：width: 100%
• clamp() 流式尺寸：font-size: clamp(1rem, 2vw, 1.5rem)——随视口缩放但有上下限
• 容器查询 @container：2026 主流，基于父容器宽度响应（比媒体查询更精准）

栅格系统

• 12 列弹性网格 + 居中对齐容器
• 列间距 gutter：移动 16px / 桌面 24-32px
• 边距 padding：移动 16px / 桌面 32-48px

设备适配要点

• 触摸 vs 鼠标：触摸目标更大，悬停态不可依赖
• 横竖屏：平板需考虑横竖屏切换
• 安全区域：iPhone 刘海/底部用 safe-area-inset
• 折叠屏：2026 新增考量，铰链区域避免关键交互

页面四态（必背）

• Default 默认态：正常使用
• Loading 加载态：骨架屏 > 菊花 > 进度条。给预期
• Empty 空状态：不是"暂无数据"，而是引导（插画+说明+CTA）
• Error 错误态：明确原因+解决方案，不指责用户

微交互原则

• 触发 Trigger：用户操作或系统状态变化
• 规则 Rules：什么条件下发生什么
• 反馈 Feedback：视觉/听觉/触觉反馈
• 循环 Loop：是否重复

动效原则

• 用 transform + opacity：性能好，不触发重排
• 避免动画化布局属性：width/height/top/left 性能差
• 缓动函数：ease-out（快进慢出，进入）/ ease-in（慢进快出，退出）/ 避免线性
• 时长：微交互 150-300ms，页面转场 300-500ms
• will-change：手动管理，用完移除

Material Motion vs iOS HIG

• Material：物理隐喻，墨水流动，elevation 表层级，emphasized easing
• iOS HIG：弹簧物理（spring），自然流畅，模糊+缩放转场，避免突兀

设计规范文档应包含

• 设计基础：颜色/排版/间距/圆角/阴影 Token
• 组件库：基础组件+状态+变体+使用说明
• 响应式：断点+栅格+各端布局
• 无障碍：对比度+焦点+触摸目标
• 图标系统：风格统一+网格+命名规范

切图与标注

• Figma/Pixso Dev Mode 自动生成标注（尺寸/间距/颜色/字体）
• 切图导出：SVG（图标）/ PNG@2x@3x（位图）/ WebP（照片）
• 命名规范：ic_home_24.svg（类型_名称_尺寸）

设计走查 Design QA

• 开发实现后逐屏对比设计稿
• 检查：间距/颜色/字体/圆角/阴影/状态/响应式
• 用 Figma 评论功能标记问题，开发修复
• 目标：返工率 <10%

协作流程

• 与 PM：需求评审 → 信息架构 → 低保真 → 高保真 → 评审
• 与开发：设计评审 → Dev Mode 交付 → 走查 → 上线
• 与测试：设计走查清单 → 测试用例对齐

Figma/Pixso 协作要点

• Auto Layout：响应式组件必备
• Components + Variants：组件管理
• Styles：颜色/字体/效果样式
• Variables：Design Token 管理（2026 核心）
• Branching：团队分支协作（Figma）
• 评论与版本：协作沟通

设计系统能力

前端协同能力

AI 工作流能力

垂直领域能力（按你的行业填）