12781 字
35 分钟
UI设计术语总结(AI生成)
UI 设计术语主要归为几类：
-
设计对象：页面、组件、图标、表单、导航
-
视觉规则：颜色、字体、间距、对齐、层级
-
交互行为：点击、滑动、反馈、状态、动效
-
适配规则：响应式、断点、单位、安全区
-
协作规则：设计系统、Token、交付、标注、组件库
-
体验评估：可用性、转化率、留存、任务完成率
1. 基础概念术语
这一部分是 UI 学习最基础的词。先把这些分清楚，后面的组件、交互、视觉才容易理解。
| 术语 | 英文 | 含义 | 使用场景 | 新手注意 |
|---|---|---|---|---|
| UI | User Interface | 用户界面，用户和产品发生交互的界面 | App、网页、小程序、后台系统 | UI 不是单纯美化，而是让用户能看懂、能操作 |
| UX | User Experience | 用户体验，用户使用产品全过程的感受 | 注册、下单、搜索、支付等完整流程 | UX 比 UI 范围更大，包含流程、心理、效率 |
| GUI | Graphical User Interface | 图形用户界面 | 手机 App、桌面软件、网页 | 现在多数 UI 都是 GUI |
| HCI | Human-Computer Interaction | 人机交互，研究人和计算机如何交互 | 交互设计、可用性研究 | 比 UI 更偏学科和研究 |
| Product Design | 产品设计 | 关注需求、功能、业务、用户目标和体验 | 产品规划、功能设计 | 产品设计不等于视觉设计 |
| Visual Design | 视觉设计 | 关注画面表现、品牌感、色彩、图形 | 官网、营销页、品牌视觉 | 视觉好看但不好用，也不是好 UI |
| Interaction Design | 交互设计 | 关注用户操作和系统响应 | 点击、滑动、拖拽、跳转、弹窗 | 交互设计重点是行为，不只是画页面 |
| Web Design | 网页设计 | 面向浏览器的页面设计 | 官网、博客、Web App | 要考虑响应式、浏览器、SEO |
| App Design | 应用设计 | 移动端或桌面应用界面设计 | iOS、Android、桌面软件 | 要遵守平台习惯 |
| Interface | 界面 | 用户看到并操作的表面 | 页面、弹窗、控件、菜单 | 界面是用户接触产品的入口 |
| Screen | 屏幕 / 页面 | App 中一个完整页面 | 首页、详情页、设置页 | 移动端常说 Screen |
| Page | 页面 | Web 中一个页面，也可指设计文件分页 | 首页、列表页、详情页 | 在 Figma 中 Page 也指文件内分页 |
| View | 视图 | 某个界面状态或展示区域 | 列表视图、详情视图 | View 有时不等于完整页面 |
| Canvas | 画布 | 设计工具中放置内容的无限区域 | Figma、Sketch | 画布不是实际页面 |
| Artboard | 画板 | 设计稿中的页面容器 | Sketch、PS、AI | Figma 中更常用 Frame |
| Frame | 框架 / 画板 | Figma 中最重要的容器 | 页面、组件、模块 | UI 设计中优先用 Frame，不要全用 Group |
2. 用户体验与产品术语
UI 设计不是孤立的视觉工作，很多决策都来自用户目标和产品目标。
| 术语 | 英文 | 含义 | 使用场景 | 新手注意 |
|---|---|---|---|---|
| 用户 | User | 使用产品的人 | 所有产品设计 | 不要只按自己的喜好设计 |
| 目标用户 | Target User | 产品主要服务的人群 | 需求分析、产品定位 | 不同用户会导致完全不同的界面重点 |
| 用户画像 | Persona | 对典型用户的描述模型 | 用户研究、需求讨论 | 画像应基于调研，不是凭空编故事 |
| 用户场景 | User Scenario | 用户在什么情况下使用产品 | 设计前分析 | 场景决定功能优先级 |
| 用户旅程 | User Journey | 用户完成目标的完整路径 | 体验优化、流程分析 | 关注使用前、中、后 |
| 用户旅程图 | Journey Map | 可视化展示用户路径、行为、情绪和痛点 | UX 研究 | 不是流程图，包含用户感受 |
| 痛点 | Pain Point | 用户遇到的问题或不便 | 需求分析 | 痛点要具体，不能只说“不好用” |
| 需求 | Requirement | 用户或业务需要解决的问题 | 产品设计、项目沟通 | 需求不等于功能 |
| 用户需求 | User Need | 用户真实想完成的目标 | 用户研究 | 用户说的需求不一定是真需求 |
| 业务需求 | Business Requirement | 公司或业务侧的目标 | 商业产品、后台系统 | 要和用户体验平衡 |
| 核心任务 | Primary Task | 页面最重要的用户操作 | 页面设计 | 一个页面最好有明确主任务 |
| 用户流程 | User Flow | 用户完成任务的步骤路径 | 注册、下单、发布内容 | 先画流程再画高保真 |
| 任务流 | Task Flow | 完成某个具体任务的流程 | 表单提交、支付 | 更聚焦单个任务 |
| 使用路径 | Path | 用户在产品中的访问路线 | 数据分析、体验优化 | 路径太长会降低转化 |
| 转化 | Conversion | 用户完成目标动作 | 注册、购买、提交 | 转化不是只靠按钮颜色决定 |
| 触点 | Touchpoint | 用户和产品接触的点 | App、短信、邮件、客服 | 体验不只发生在页面里 |
| 可用性测试 | Usability Testing | 观察用户完成任务，发现问题 | 原型验证、上线前测试 | 不要只问用户喜不喜欢，要看能不能完成任务 |
| 迭代 | Iteration | 根据反馈持续修改 | 产品开发、设计优化 | 设计不是一次完成 |
3. 信息架构术语
信息架构决定页面内容怎么组织、怎么分类、怎么让用户找到。
| 术语 | 英文 | 含义 | 使用场景 | 新手注意 |
|---|---|---|---|---|
| 信息架构 | Information Architecture / IA | 信息的组织、分类、层级和导航方式 | 网站、后台、内容平台 | IA 乱，页面再漂亮也难用 |
| 信息层级 | Information Hierarchy | 信息的重要性排序 | 页面排版、详情页 | 重要信息要更明显 |
| 内容结构 | Content Structure | 页面内容之间的组织关系 | 文章页、商品页 | 先整理内容，再做视觉 |
| 分类 | Category | 把信息按规则分组 | 商品分类、文章分类 | 分类名称要符合用户理解 |
| 标签 | Tag | 用关键词给内容打标 | 博客、商品、筛选 | 标签比分类更灵活 |
| 层级 | Hierarchy | 从上到下或从大到小的等级关系 | 导航、标题、菜单 | 层级过深会让用户迷路 |
| 优先级 | Priority | 内容或功能的重要程度 | 页面布局 | 不能所有东西都强调 |
| 分组 | Grouping | 把相关内容放在一起 | 表单、卡片、设置页 | 相关近，不相关远 |
| 导航结构 | Navigation Structure | 页面之间如何连接 | 网站、App | 决定用户能否找到内容 |
| 站点地图 | Sitemap | 网站页面结构图 | Web 设计 | 适合复杂网站前期规划 |
| 面包屑路径 | Breadcrumb | 显示当前位置层级的导航 | 后台、文档、电商 | 层级深时很有用 |
| 内容优先 | Content First | 先确定内容，再设计界面 | 博客、文档、课程 | 不要先画空壳再硬塞内容 |
| 信息密度 | Information Density | 单位面积内承载的信息量 | 后台、表格、仪表盘 | 信息密度高不等于混乱 |
| 视觉层级 | Visual Hierarchy | 用视觉手段表达信息主次 | 字号、颜色、位置 | UI 中最核心的基础能力 |
4. 视觉设计术语
视觉设计决定界面看起来是否统一、清楚、有品质。
| 术语 | 英文 | 含义 | 使用场景 | 新手注意 |
|---|---|---|---|---|
| 视觉风格 | Visual Style | 产品整体视觉气质 | 品牌官网、App、后台 | 风格要符合产品和用户 |
| 品牌感 | Brand Feeling | 用户通过视觉感受到的品牌特征 | 品牌产品、官网 | 不只是放 Logo |
| 一致性 | Consistency | 相同元素和行为保持一致 | 全产品 | 一致性是专业感的基础 |
| 对比 | Contrast | 元素之间的差异 | 文字、按钮、背景 | 对比帮助建立重点 |
| 重复 | Repetition | 重复使用同类样式 | 列表、组件库 | 重复产生统一 |
| 亲密性 | Proximity | 相关内容距离更近 | 表单、卡片 | 亲密性决定分组感 |
| 平衡 | Balance | 页面视觉重量的稳定关系 | 页面布局 | 不一定左右完全对称 |
| 留白 | White Space / Negative Space | 元素之间的空白区域 | 所有界面 | 留白不是浪费空间 |
| 焦点 | Focal Point | 用户首先注意到的位置 | 首页、详情页 | 一个区域不要有太多焦点 |
| 视觉重心 | Visual Weight | 元素吸引注意力的程度 | 排版、布局 | 大、深、鲜艳、靠前都会更重 |
| 装饰元素 | Decorative Element | 不直接承载信息的视觉元素 | 营销页、活动页 | 不要让装饰干扰操作 |
| 扁平化 | Flat Design | 减少拟物阴影和纹理的设计风格 | 现代 UI | 扁平不等于没有层级 |
| 拟物化 | Skeuomorphism | 模拟真实物体的视觉风格 | 早期 iOS、特殊产品 | 现在较少大面积使用 |
| 极简主义 | Minimalism | 去除不必要元素，突出核心 | 高端官网、工具产品 | 极简不等于信息缺失 |
| 毛玻璃 | Glassmorphism | 半透明、模糊背景的视觉效果 | iOS、卡片、浮层 | 需要注意文字可读性 |
| 新拟态 | Neumorphism | 柔和阴影模拟浮雕效果 | 概念设计 | 实际可用性常有问题 |
5. 色彩术语
颜色既影响审美，也传递状态和功能。
| 术语 | 英文 | 含义 | 使用场景 | 新手注意 |
|---|---|---|---|---|
| 色相 | Hue | 颜色类别，如红、蓝、绿 | 配色 | 色相决定颜色基本倾向 |
| 饱和度 | Saturation | 颜色鲜艳程度 | 品牌色、按钮 | 饱和度太高容易刺眼 |
| 明度 | Brightness / Value | 颜色明暗程度 | 背景、文字 | 明度影响可读性 |
| 色调 | Tone | 色彩整体倾向 | 品牌风格 | 冷暖、明暗会影响情绪 |
| 主色 | Primary Color | 品牌和主要操作颜色 | 主按钮、选中状态 | 一个产品主色要稳定 |
| 辅助色 | Secondary Color | 配合主色的颜色 | 图表、标签、装饰 | 不要抢主色 |
| 中性色 | Neutral Color | 黑白灰等低饱和颜色 | 文本、背景、边框 | UI 中中性色使用最多 |
| 背景色 | Background Color | 页面底色 | 页面、区域 | 背景要衬托内容 |
| 表面色 | Surface Color | 卡片、弹窗等表层颜色 | 卡片、Modal | 常和背景形成轻微层级 |
| 文本色 | Text Color | 文字颜色 | 标题、正文、辅助文字 | 重要文字不要太浅 |
| 边框色 | Border Color | 轮廓和分割颜色 | 输入框、表格 | 边框通常要克制 |
| 成功色 | Success Color | 表示成功、通过 | 保存成功、审核通过 | 常用绿色 |
| 警告色 | Warning Color | 表示提醒、风险 | 库存不足、即将过期 | 常用黄或橙 |
| 错误色 | Error / Danger Color | 表示错误、失败、危险 | 删除、校验失败 | 常用红色 |
| 信息色 | Info Color | 表示普通提示 | 通知、说明 | 常用蓝色 |
| 渐变 | Gradient | 颜色渐变过渡 | 品牌视觉、按钮、背景 | 不要滥用，注意可读性 |
| 透明度 | Opacity | 元素不透明程度 | 遮罩、禁用态、浮层 | 透明度会影响对比度 |
| 遮罩 | Overlay | 覆盖在内容上的半透明层 | 弹窗背景、图片文字 | 遮罩用于压暗或隔离背景 |
| 对比度 | Contrast Ratio | 文字和背景的可读性对比 | 可访问性 | 重要文字必须有足够对比 |
| 调色板 | Palette | 一组配套颜色 | 设计系统 | 配色要有角色，不是随便选色 |
常见颜色角色总结
| 颜色角色 | 主要用途 | 常见位置 | 注意点 |
|---|---|---|---|
| 主色 | 强调品牌和主操作 | 主按钮、链接、选中状态 | 不要满屏使用主色 |
| 中性色 | 承载大部分界面 | 文字、背景、边框 | 决定界面是否耐看 |
| 成功色 | 正向结果 | 成功提示、通过状态 | 不要和普通强调色混用 |
| 警告色 | 中等风险 | 提醒、预警 | 文案要说明具体原因 |
| 错误色 | 高风险或失败 | 删除、报错 | 不要只靠红色，配文字提示 |
6. 字体与排版术语
文字是 UI 中最重要的信息载体。排版不好，用户会直接读不懂。
| 术语 | 英文 | 含义 | 使用场景 | 新手注意 |
|---|---|---|---|---|
| 字体 | Font / Typeface | 字形风格 | 全局文字 | 新手先用系统字体 |
| 字号 | Font Size | 文字大小 | 标题、正文、说明 | 字号不要太多 |
| 字重 | Font Weight | 文字粗细 | 标题、强调、按钮 | 粗体不是越多越好 |
| 行高 | Line Height | 两行文字基线之间的距离 | 正文、标题 | 行高太小会拥挤 |
| 字距 | Letter Spacing | 字母之间的距离 | 英文标题、标签 | 中文 UI 一般少调字距 |
| 段间距 | Paragraph Spacing | 段落之间的距离 | 长文、说明 | 比手动空行更规范 |
| 对齐方式 | Text Alignment | 文字左、中、右对齐 | 标题、正文、表格 | 大段文字优先左对齐 |
| 文本层级 | Type Hierarchy | 用字号、字重、颜色区分文字层级 | 页面标题、正文、说明 | 层级要少而清楚 |
| 标题 | Heading | 页面或模块标题 | H1、H2、H3 | 标题要表达内容主题 |
| 正文 | Body Text | 主要阅读内容 | 文章、说明、列表 | 保证可读性 |
| 辅助文字 | Caption / Helper Text | 次要说明 | 表单说明、时间、备注 | 不能太浅到看不清 |
| 标签文字 | Label | 字段或控件名称 | 表单、设置项 | 要简洁明确 |
| 占位符 | Placeholder | 输入前的提示文字 | 输入框 | 不应替代标签 |
| 截断 | Truncation | 文本过长时省略 | 卡片、列表、表格 | 要考虑鼠标悬停或详情查看 |
| 换行 | Text Wrap | 文本自动换到下一行 | 正文、卡片标题 | 移动端必须考虑 |
| 文本溢出 | Text Overflow | 文本超出容器 | 表格、按钮、卡片 | 设计稿要测试长文本 |
| 可读性 | Readability | 长文本阅读舒适度 | 文章、说明 | 受字号、行高、行宽影响 |
| 易读性 | Legibility | 单个字符是否容易辨认 | 小字号、按钮 | 字太小、太细都会降低易读性 |
常见字号总结
| 字号 | 常见用途 | 注意点 |
|---|---|---|
| 12px | 辅助信息、标签、表格次要信息 | 不适合承载重要正文 |
| 14px | Web 正文、后台系统常用文字 | 后台产品很常用 |
| 16px | 移动端正文、重要信息 | 移动端阅读更舒适 |
| 18px | 小标题 | 适合模块标题 |
| 20px | 强模块标题 | 不要在密集后台滥用 |
| 24px | 页面标题 | 适合详情页、设置页 |
| 32px+ | 营销页大标题 | 工具型产品中要克制 |
7. 布局与空间术语
布局决定页面骨架，空间决定信息关系。
| 术语 | 英文 | 含义 | 使用场景 | 新手注意 |
|---|---|---|---|---|
| 布局 | Layout | 页面元素的组织方式 | 所有 UI | 先布局，再美化 |
| 栅格 | Grid | 用列和间距组织页面的系统 | Web、后台、响应式 | 栅格帮助页面统一 |
| 列 | Column | 栅格中的竖向区域 | 12 栏布局 | Web 常用 12 栏 |
| 行 | Row | 横向排列的一组内容 | 表格、列表、网格 | 行高要稳定 |
| 间距 | Spacing | 元素之间的距离 | 所有页面 | 用 4 或 8 的倍数更稳定 |
| 内边距 | Padding | 元素内部内容到边界的距离 | 按钮、卡片、输入框 | 决定组件是否透气 |
| 外边距 | Margin | 元素外部和其他元素的距离 | 模块之间 | 决定元素关系 |
| 留白 | White Space | 空白空间 | 页面、卡片、标题 | 留白表达层级和分组 |
| 对齐 | Alignment | 元素边缘或中心线保持一致 | 表单、列表、卡片 | 对齐是专业感基础 |
| 分布 | Distribution | 多个元素按规则分散 | 图标、卡片、按钮组 | 间距要一致 |
| 容器 | Container | 包裹内容的区域 | 卡片、页面、模块 | 容器不是越多越好 |
| 断点 | Breakpoint | 响应式布局变化的宽度 | Web 适配 | 根据内容决定，不是死记尺寸 |
| 固定布局 | Fixed Layout | 尺寸固定，不随屏幕变化 | 管理后台局部区域 | 小屏可能溢出 |
| 流式布局 | Fluid Layout | 宽度随容器变化 | 响应式页面 | 要设置最大宽度 |
| 弹性布局 | Flexible Layout | 元素按规则伸缩 | CSS Flex、Auto Layout | 适合一维排列 |
| 网格布局 | Grid Layout | 行列二维布局 | 卡片、仪表盘 | 适合复杂布局 |
| 单列布局 | Single Column | 内容纵向排列 | 移动端、文章页 | 阅读路径简单 |
| 多列布局 | Multi-column | 内容分成多列 | Web、后台 | 小屏要重组 |
| 卡片布局 | Card Layout | 用卡片承载信息块 | 商品、课程、仪表盘 | 不要把所有区域都做成卡片 |
| 固定定位 | Fixed Position | 元素固定在视口某位置 | 底部按钮、顶部栏 | 注意遮挡内容 |
| 粘性定位 | Sticky | 滚动到某位置后吸附 | 表头、导航 | 提高长页面操作效率 |
常见间距总结
| 间距 | 使用场景 | 说明 |
|---|---|---|
| 4px | 图标和文字、小标签内部 | 极近关系 |
| 8px | 小元素之间 | 常见基础间距 |
| 12px | 紧凑组件内部 | 适合后台和卡片内部 |
| 16px | 常规内边距 | 移动端和卡片常用 |
| 24px | 模块之间 | 区分内容分组 |
| 32px | 大模块之间 | 页面区块分隔 |
| 48px | 大区块之间 | 营销页、长页面 |
8. 尺寸与单位术语
这部分和网页、移动端开发关系很近。UI 设计师不一定要写代码，但要看懂单位。
8.1 常见长度单位
8.1.1、绝对单位
这类单位是固定值，不会因为屏幕或父元素的变化而改变。通常用于打印样式或需要精确控制物理尺寸的场景。
| 单位 | 英文全称 | 含义/来源 | 换算关系 | 使用场景 |
|---|---|---|---|---|
px | Pixel | 图像显示的基本单位，源自”picture element” | 屏幕最小单位，CSS绝对长度基准 | 屏幕显示（边框、阴影、小图标） |
pt | Point | 印刷业传统单位 | 1/72 英寸 | 传统印刷、Word排版；网页中一般不用 |
pc | Pica | 印刷业传统单位 | 1/6 英寸 (12pt) | 印刷排版，Web基本不用 |
cm | Centimeter | 厘米，公制长度单位 | 1in = 2.54cm | 屏幕显示不准，偶尔用于打印样式 |
mm | Millimeter | 毫米，公制长度单位 | 10mm = 1cm | 屏幕显示不准，偶尔用于打印样式 |
in | Inch | 英寸，英制长度单位 | 1in = 2.54cm | 屏幕显示不准，偶尔用于打印样式 |
8.1.2、相对单位
这类单位是相对的，会根据某个基准值（父元素、视口、根元素）动态变化，是实现响应式设计和无障碍访问的核心。
| 单位 | 英文全称 | 含义/来源 | 换算关系 | 使用场景 |
|---|---|---|---|---|
rem | Root EM | 相对于根元素字体大小（EM指字母M宽度） | 根元素(<html>)的字体大小 | 全局字体、间距、宽度；支持浏览器字号缩放 |
em | EM（排版术语） | 相对于当前元素字体大小 | 当前元素的字体大小 | 相对于自身字体缩进的边距(margin/padding) |
% | Percent | 百分比 | 父元素的同属性值 | 流式布局、栅格系统、弹性图片 |
vw | Viewport Width | 视口宽度百分比 | 视口宽度的1% | 全屏容器、大标题、视口适配 |
vh | Viewport Height | 视口高度百分比 | 视口高度的1% | 全屏滚动、首屏页脚、移动端全屏弹窗 |
vmin | Viewport Minimum | 视口宽度和高度中较小者的百分比 | vw和vh中较小者 | 确保元素在横竖屏切换时都能完整显示 |
vmax | Viewport Maximum | 视口宽度和高度中较大者的百分比 | vw和vh中较大者 | 超大背景装饰元素 |
ex | x-height | 当前字体中字母”x”的高度 | 当前字体中字母x的高度 | 特殊垂直对齐，使用较少 |
ch | Character width | 当前字体中数字”0”的宽度 | 当前字体中数字0的宽度 | 限制文本行宽（如max-width: 60ch） |
8.1.3、移动端/跨平台专用单位
这类单位更多出现在移动端开发、React Native、Flutter 或 微信小程序中。
| 单位 | 英文全称 | 含义/原理 | 所属框架/平台 | 使用场景 |
|---|---|---|---|---|
dp / dip | Density-Independent Pixel | 密度无关像素。160dpi屏幕上1dp=1px，高密度屏幕自动放大 | Android 原生 / React Native | 所有尺寸（宽高、边距、圆角） |
sp | Scale-independent Pixel | 缩放无关像素。类似dp，但额外缩放用户字体偏好 | Android 原生 | 文字大小（保证视障用户可读） |
rpx | Responsive Pixel | 响应式像素。屏幕宽固定为750rpx，自动换算 | 微信小程序 | 所有尺寸（手机端完美适配） |
pt (iOS) | Point | 逻辑点单位。1pt = 1/72英寸（非Retina屏1pt=1px） | iOS (UIKit/SwiftUI) | iOS界面设计稿标注和开发 |
8.1.4、特殊功能单位
| 单位/函数 | 英文全称 | 含义 | 作用 | 使用场景 |
|---|---|---|---|---|
fr | Fraction | 分数单位 | CSS Grid中的剩余空间分数 | grid-template-columns: 1fr 2fr（比例分配宽度） |
min() | Minimum function | 取最小值函数 | 取两个值中的较小值 | 让容器响应式缩小但有上限：width: min(100%, 600px) |
max() | Maximum function | 取最大值函数 | 取两个值中的较大值 | 让容器响应式放大但有下限：width: max(50%, 300px) |
clamp() | Clamp function | 钳位函数 | 限制在一个区间内 | 响应式字体：font-size: clamp(12px, 4vw, 24px) |
calc() | Calculate function | 计算函数 | 混合单位计算 | width: calc(100% - 20px)（混合百分比和绝对单位） |
记忆口诀：
屏幕细节用
px，全局缩放找rem，父级参照用%，视口比例vw/vh，安卓尺寸用dp，iOS 布局靠pt，比例布局上fr，文本行宽可用ch。
8.2 屏幕相关术语
| 术语 | 英文 | 含义 | 使用场景 | 新手注意 |
|---|---|---|---|---|
| 分辨率 | Resolution | 屏幕物理像素数量 | 设备参数 | 如 1920 x 1080 |
| 物理像素 | Physical Pixel | 屏幕真实发光点 | 硬件显示 | 设计中不直接按它布局 |
| 逻辑像素 | Logical Pixel | 系统和设计使用的抽象像素 | Web、iOS、Android | Figma 中多按逻辑尺寸设计 |
| DPR | Device Pixel Ratio | 设备像素比 | Web 适配、图片导出 | DPR=2 表示 1 逻辑像素对应更多物理像素 |
| PPI | Pixels Per Inch | 每英寸像素数 | 屏幕清晰度 | PPI 越高越细腻 |
| DPI | Dots Per Inch | 每英寸点数 | 打印、Android 密度 | 屏幕和打印语境不同 |
| 视口 | Viewport | 浏览器可视区域 | Web 响应式 | 不一定等于屏幕尺寸 |
| 安全区 | Safe Area | 不被刘海、圆角、手势条遮挡的区域 | iOS、全面屏手机 | 底部按钮要避开手势条 |
| 断点 | Breakpoint | 响应式变化点 | Web | 常见 375、768、1024、1440 等 |
9. 图标、图片与图形术语
图标和图片是 UI 视觉表达的重要组成部分。
| 术语 | 英文 | 含义 | 使用场景 | 新手注意 |
|---|---|---|---|---|
| 图标 | Icon | 用简单图形表达功能或状态 | 导航、按钮、操作栏 | 图标含义要清楚 |
| 线性图标 | Outline Icon | 由线条构成的图标 | 工具栏、导航 | 线宽要统一 |
| 面性图标 | Filled Icon | 实心填充图标 | 选中状态、强调入口 | 不要和线性图标乱混 |
| 图标网格 | Icon Grid | 绘制图标的参考网格 | 图标设计 | 保证尺寸和视觉重心统一 |
| 插画 | Illustration | 更复杂的图形叙事 | 空状态、引导页 | 不要影响主要内容 |
| 位图 | Bitmap / Raster | 由像素组成的图片 | 照片、截图 | 放大可能模糊 |
| 矢量图 | Vector | 用路径描述的图形 | 图标、Logo | 放大不失真 |
| SVG | Scalable Vector Graphics | Web 常用矢量格式 | 图标、Logo | 适合导出图标 |
| PNG | Portable Network Graphics | 支持透明的位图格式 | 透明图片、截图 | 文件可能较大 |
| JPG / JPEG | Joint Photographic Experts Group | 有损压缩图片格式 | 照片 | 不支持透明 |
| WebP | Web Picture | 现代图片格式 | Web 图片优化 | 兼顾体积和质量 |
| 裁剪 | Crop | 截取图片某部分 | 卡片封面、头像 | 不要裁掉主体 |
| 蒙版 | Mask | 用形状限制显示区域 | 圆形头像、特殊裁剪 | 注意图层结构 |
| 占位图 | Placeholder Image | 图片未加载或临时图片 | 原型、加载状态 | 不要交付时忘记替换 |
| 纵横比 | Aspect Ratio | 宽高比例 | 图片、视频、卡片 | 同类图片比例要统一 |
| 图像压缩 | Image Compression | 减小图片体积 | Web 性能 | 压缩过度会影响质量 |
| Retina 图 | Retina Asset | 高清屏适配图片 | iOS、Web | 常见 2x、3x 导出 |
10. 组件术语
组件是 UI 中可复用的基础单元。现代 UI 设计离不开组件思维。
| 术语 | 英文 | 含义 | 使用场景 | 新手注意 |
|---|---|---|---|---|
| 组件 | Component | 可复用 UI 单元 | 按钮、输入框、卡片 | 重复出现的元素应组件化 |
| 主组件 | Main Component | 组件源头 | Figma 组件库 | 修改主组件会影响实例 |
| 实例 | Instance | 主组件的副本 | 页面中使用组件 | 可覆盖内容但保持关联 |
| 变体 | Variant | 同一组件的不同状态或类型 | 按钮状态、输入框状态 | 不要把无关组件塞成变体 |
| 属性 | Property | 控制组件可变内容的设置 | 图标显示、文本替换 | 属性要清楚，不要过多 |
| 状态 | State | 组件在不同交互下的表现 | Hover、Disabled | 组件必须补状态 |
| 主按钮 | Primary Button | 页面最重要操作按钮 | 提交、保存、购买 | 一个区域不要太多主按钮 |
| 次按钮 | Secondary Button | 辅助操作按钮 | 取消、返回 | 视觉弱于主按钮 |
| 文本按钮 | Text Button | 无明显容器的轻量按钮 | 查看详情、编辑 | 点击区域仍要足够 |
| 危险按钮 | Danger Button | 高风险操作按钮 | 删除、清空 | 需要确认或明显提示 |
| 输入框 | Input | 文本输入控件 | 登录、搜索、表单 | 要有标签和错误提示 |
| 下拉选择 | Select | 从选项中选择一个 | 城市、分类、状态 | 选项过多时考虑搜索 |
| 复选框 | Checkbox | 多选控件 | 批量选择、协议 | 可多选 |
| 单选框 | Radio | 单选控件 | 性别、支付方式 | 一组中只能选一个 |
| 开关 | Switch | 即时启用或关闭设置 | 通知开关、深色模式 | 不适合需要提交确认的表单项 |
| 标签 | Tag | 表达分类、状态或属性 | 商品标签、状态标签 | 不要把标签当按钮乱用 |
| 徽标 | Badge | 小型数字或状态提示 | 未读数、通知 | 数字过大要处理 |
| 卡片 | Card | 承载一组相关内容的容器 | 商品、文章、数据概览 | 卡片不是万能装饰 |
| 弹窗 | Modal / Dialog | 打断当前流程的浮层 | 确认、编辑、提示 | 不要滥用弹窗 |
| 抽屉 | Drawer | 从边缘滑出的面板 | 详情、筛选、编辑 | 适合保留上下文 |
| 气泡提示 | Tooltip | 鼠标悬停显示轻量说明 | 图标解释、字段说明 | 不适合放重要信息 |
| Toast | Toast | 短暂轻提示 | 保存成功、复制成功 | 不应承载复杂操作 |
| 分页 | Pagination | 分页浏览数据 | 表格、列表 | 大数据列表常用 |
| 步骤条 | Steps | 显示多步骤进度 | 注册、下单、审批 | 告诉用户当前在哪一步 |
| 进度条 | Progress | 显示任务完成程度 | 上传、下载 | 长任务必须有反馈 |
记忆口诀：
重复出现做组件，不同状态做变体，可变内容做属性。
11. 表单术语
表单是 UI 中最容易影响体验的部分。
| 术语 | 英文 | 含义 | 使用场景 | 新手注意 |
|---|---|---|---|---|
| 表单 | Form | 收集用户输入的一组控件 | 注册、登录、编辑资料 | 字段越多，用户成本越高 |
| 字段 | Field | 一个输入项 | 姓名、手机号、邮箱 | 字段名称要明确 |
| 标签 | Label | 字段名称 | 表单输入框上方或左侧 | 不要只用占位符代替标签 |
| 占位符 | Placeholder | 输入前的示例或提示 | 输入框内部 | 输入后会消失 |
| 帮助文本 | Helper Text | 辅助解释填写规则 | 密码规则、格式说明 | 放在字段附近 |
| 错误提示 | Error Message | 告诉用户哪里错了 | 表单校验失败 | 要说明怎么改 |
| 必填项 | Required Field | 必须填写的字段 | 注册、提交 | 标记要清楚 |
| 可选项 | Optional Field | 不一定要填写的字段 | 个人简介、备注 | 可标“选填” |
| 表单校验 | Validation | 检查输入是否符合规则 | 邮箱、手机号、密码 | 最好给实时或失焦反馈 |
| 实时校验 | Inline Validation | 用户输入过程中或失焦时校验 | 注册表单 | 不要过早打断输入 |
| 提交校验 | Submit Validation | 点击提交后统一校验 | 长表单 | 错误要定位到字段 |
| 输入格式 | Input Format | 要求输入的格式 | 日期、金额、手机号 | 可以用示例降低错误 |
| 输入掩码 | Input Mask | 自动格式化输入 | 银行卡、手机号 | 要避免妨碍复制粘贴 |
| 默认值 | Default Value | 字段初始值 | 设置项、筛选器 | 默认值会影响用户选择 |
| 禁用字段 | Disabled Field | 不可编辑字段 | 权限不足、系统生成 | 样式要明显但仍可理解 |
| 只读字段 | Readonly Field | 可查看但不能编辑 | 订单号、ID | 和禁用含义不同 |
| 字段分组 | Field Grouping | 将相关字段归类 | 地址信息、账号信息 | 长表单必须分组 |
| 分步表单 | Multi-step Form | 把长表单拆成多步 | 注册、申请流程 | 显示进度和返回方式 |
12. 导航术语
导航帮助用户知道自己在哪里、还能去哪里。
| 术语 | 英文 | 含义 | 使用场景 | 新手注意 |
|---|---|---|---|---|
| 导航 | Navigation | 页面或功能入口系统 | App、网站、后台 | 导航不是越多越好 |
| 顶部导航 | Top Navigation | 位于页面顶部的导航 | 官网、Web 应用 | 适合一级栏目较少 |
| 侧边导航 | Sidebar Navigation | 位于左侧或右侧的导航 | 后台、工具产品 | 当前选中状态要明显 |
| 底部标签栏 | Tab Bar | 移动端底部一级导航 | App、小程序 | 通常 3 到 5 个入口 |
| 标签页 | Tabs | 同一区域内切换内容 | 设置页、详情页 | 适合同层级内容切换 |
| 面包屑 | Breadcrumb | 显示当前位置层级 | 后台、文档、电商 | 层级深时使用 |
| 菜单 | Menu | 操作或页面入口列表 | 更多操作、下拉菜单 | 文案要清楚 |
| 下拉菜单 | Dropdown Menu | 点击后展开的菜单 | 用户菜单、更多操作 | 不要藏核心功能 |
| 汉堡菜单 | Hamburger Menu | 三横线菜单按钮 | 移动端导航 | 会降低入口可见性 |
| 返回 | Back | 回到上一级或上一页 | 移动端、详情页 | 返回逻辑要符合用户预期 |
| 当前状态 | Active State | 当前所在导航项 | 侧边栏、Tab | 必须明显 |
| 悬停状态 | Hover State | 鼠标移上去的状态 | Web 导航 | 移动端没有 Hover |
| 深层链接 | Deep Link | 直接进入具体页面或状态的链接 | App、Web | 便于分享和跳转 |
13. 交互术语
交互描述用户如何操作，系统如何响应。
| 术语 | 英文 | 含义 | 使用场景 | 新手注意 |
|---|---|---|---|---|
| 交互 | Interaction | 用户动作和系统响应 | 点击、输入、滑动 | 交互要可预期 |
| 触发器 | Trigger | 引发交互的动作 | 点击、悬停、拖拽 | 原型设计常用 |
| 动作 | Action | 系统执行的行为 | 跳转、打开弹窗、提交 | 动作要有反馈 |
| 点击 | Click / Tap | 鼠标点击或手指轻触 | 按钮、链接 | 移动端更常说 Tap |
| 双击 | Double Click | 连续点击两次 | 桌面工具 | 移动端少用 |
| 长按 | Long Press | 按住一段时间 | 移动端菜单 | 可发现性较弱 |
| 滑动 | Swipe | 手指横向或纵向滑动 | 轮播、返回、删除 | 需要有视觉提示 |
| 拖拽 | Drag and Drop | 拖动物体到目标位置 | 排序、上传、编辑器 | 要有拖拽反馈 |
| 悬停 | Hover | 鼠标停留在元素上 | Web 工具、按钮 | 触屏设备没有 Hover |
| 聚焦 | Focus | 元素获得键盘或输入焦点 | 输入框、按钮 | 对键盘用户很重要 |
| 手势 | Gesture | 触屏操作方式 | 捏合、滑动、长按 | 不要只依赖隐藏手势 |
| 跳转 | Navigation Action | 从一个页面到另一个页面 | 链接、按钮 | 跳转目标要明确 |
| 展开 | Expand | 显示更多内容 | 折叠面板、菜单 | 展开后状态要清楚 |
| 折叠 | Collapse | 收起内容 | FAQ、侧边栏 | 不要隐藏关键信息 |
| 确认 | Confirm | 高风险操作前二次确认 | 删除、支付 | 避免误操作 |
| 撤销 | Undo | 回退上一步操作 | 删除、编辑 | 比频繁确认更顺畅 |
| 重做 | Redo | 恢复撤销的操作 | 编辑器、设计工具 | 和 Undo 搭配 |
| 微交互 | Microinteraction | 小范围交互反馈 | 点赞、开关、加载 | 提升可理解性 |
| 动效 | Motion / Animation | 运动效果 | 页面切换、按钮反馈 | 动效要服务理解，不是炫技 |
| 过渡 | Transition | 两个状态之间的变化 | Hover、弹窗、页面切换 | 过渡应自然快速 |
14. 状态与反馈术语
状态设计是新手最容易漏掉的部分。
| 术语 | 英文 | 含义 | 使用场景 | 新手注意 |
|---|---|---|---|---|
| 默认状态 | Default State | 元素正常状态 | 所有组件 | 设计组件时最基础 |
| 悬停状态 | Hover State | 鼠标移上时状态 | Web 按钮、菜单 | 移动端不依赖 Hover |
| 按下状态 | Pressed State | 点击按下瞬间状态 | 按钮、卡片 | 让用户知道点到了 |
| 聚焦状态 | Focus State | 键盘或输入焦点状态 | 表单、按钮 | 可访问性必须考虑 |
| 选中状态 | Selected State | 当前被选中 | Tab、Checkbox、列表项 | 要和 Hover 区分 |
| 禁用状态 | Disabled State | 不可操作 | 按钮、输入框 | 要说明为什么不可用 |
| 加载状态 | Loading State | 数据或操作处理中 | 页面、按钮、列表 | 防止用户重复操作 |
| 空状态 | Empty State | 没有数据 | 列表、项目页 | 要告诉用户下一步 |
| 错误状态 | Error State | 操作或请求失败 | 表单、页面 | 错误提示要具体 |
| 成功状态 | Success State | 操作完成 | 保存、提交 | 不一定都需要弹窗 |
| 警告状态 | Warning State | 有风险但未失败 | 余额不足、即将过期 | 要提前提醒 |
| 离线状态 | Offline State | 网络不可用 | 移动 App、Web | 提供重试或缓存说明 |
| 骨架屏 | Skeleton Screen | 用占位结构表示加载中 | 列表、详情页 | 比空白加载更稳定 |
| Spinner | 加载转圈 | 表示短时间等待 | 按钮、局部加载 | 长任务不适合只用转圈 |
| Toast | 轻提示 | 短暂消息反馈 | 复制成功、保存成功 | 不要放复杂内容 |
| Alert | 警告提示 | 强提醒信息 | 错误、风险 | 不要滥用 |
| Notification | 通知 | 系统或业务消息 | 消息中心、提醒 | 注意优先级 |
| Modal Feedback | 弹窗反馈 | 打断式反馈 | 删除确认、重要结果 | 会打断流程 |
15. 响应式与移动端术语
这一部分和网页、移动端适配关系密切。
| 术语 | 英文 | 含义 | 使用场景 | 新手注意 |
|---|---|---|---|---|
| 响应式设计 | Responsive Design | 页面适配不同屏幕尺寸 | Web、H5 | 不是简单缩放 |
| 自适应设计 | Adaptive Design | 为不同设备设计不同布局 | Web、App | 通常有几个固定断点 |
| 移动优先 | Mobile First | 先设计小屏，再扩展大屏 | 电商、内容站 | 先处理核心内容 |
| 桌面优先 | Desktop First | 先设计桌面，再压缩到移动端 | 后台、复杂工具 | 小屏可能需要重组 |
| 断点 | Breakpoint | 布局变化的屏幕宽度 | CSS、设计稿 | 根据内容而非只按设备 |
| 媒体查询 | Media Query | CSS 中根据条件应用样式 | 前端响应式 | 设计师知道概念即可 |
| 流体网格 | Fluid Grid | 宽度按比例变化的栅格 | 响应式页面 | 要有最大宽度 |
| 弹性图片 | Flexible Image | 图片随容器缩放 | Web 图片 | 保持比例，避免变形 |
| 安全区 | Safe Area | 避开系统遮挡的区域 | iPhone、全面屏 | 底部操作栏要留安全距离 |
| 状态栏 | Status Bar | 手机顶部系统信息区域 | 移动端设计 | 设计稿要考虑高度 |
| 导航栏 | Navigation Bar | 移动端顶部标题和操作区 | App | 和系统规范有关 |
| 手势条 | Home Indicator | iPhone 底部手势区域 | iOS | 底部按钮不要贴太近 |
| 拇指热区 | Thumb Zone | 单手操作容易触达区域 | 移动端 | 重要操作尽量易触达 |
| 横屏 | Landscape | 设备横向使用 | 平板、视频 | 布局可能重排 |
| 竖屏 | Portrait | 设备竖向使用 | 手机 | 最常见移动端场景 |
| 触控目标 | Touch Target | 可点击区域大小 | 移动端按钮、图标 | 不应只看图标视觉尺寸 |
16. 可用性与无障碍术语
可用性让产品好用，无障碍让更多人能用。
| 术语 | 英文 | 含义 | 使用场景 | 新手注意 |
|---|---|---|---|---|
| 可用性 | Usability | 用户能否高效完成任务 | 产品体验评估 | 好看不等于可用 |
| 易学性 | Learnability | 新用户是否容易学会 | 工具产品、复杂系统 | 新手引导要适度 |
| 效率 | Efficiency | 熟练用户完成任务的速度 | 后台、工具 | 减少重复操作 |
| 容错性 | Error Tolerance | 用户犯错后能否恢复 | 表单、删除、支付 | 提供撤销和确认 |
| 可发现性 | Discoverability | 功能是否容易被发现 | 导航、工具栏 | 隐藏手势可发现性低 |
| 可访问性 | Accessibility / A11y | 让不同能力用户都能使用 | 公共服务、商业产品 | 不只是残障用户才需要 |
| 屏幕阅读器 | Screen Reader | 朗读界面内容的软件 | 视障用户 | 需要语义和替代文本 |
| 键盘导航 | Keyboard Navigation | 只用键盘操作界面 | Web、后台 | Focus 状态很重要 |
| 替代文本 | Alt Text | 图片的文字描述 | 图片、图标 | 重要图片要有说明 |
| 语义化 | Semantic | 用正确结构表达含义 | HTML、可访问性 | 设计交付也应说明语义 |
| 对比度 | Contrast Ratio | 前景和背景的对比程度 | 文本、按钮 | 影响阅读 |
| 色盲友好 | Color Blind Friendly | 色觉障碍用户也能理解 | 图表、状态 | 不只靠颜色区分 |
| WCAG | Web Content Accessibility Guidelines | Web 无障碍指南 | Web 产品 | 常用于规范参考 |
| ARIA | Accessible Rich Internet Applications | Web 辅助语义属性 | 前端开发 | 设计师了解即可 |
17. 设计系统术语
设计系统是现代 UI 协作中的重点。
| 术语 | 英文 | 含义 | 使用场景 | 新手注意 |
|---|---|---|---|---|
| 设计系统 | Design System | 设计语言、组件、规范和文档的整体体系 | 中大型产品 | 不只是组件库 |
| 设计规范 | Design Guidelines | 设计规则说明 | 团队协作 | 说明怎么用、何时用 |
| 组件库 | Component Library | 可复用组件集合 | Figma、前端代码 | 设计和代码最好一致 |
| 样式库 | Style Library | 颜色、文字、效果等样式集合 | Figma | 用于保持视觉统一 |
| 设计令牌 | Design Tokens | 可被设计和代码共用的设计变量 | 主题、跨端 | 如颜色、字号、间距 |
| Token | Token | 设计变量的抽象名称和值 | color.primary | 不要直接只写“蓝色” |
| Foundation | 基础层 | 色彩、字体、间距、圆角等基础规范 | 设计系统 | 是组件的基础 |
| Pattern | 设计模式 | 可复用的问题解决方案 | 表单、搜索、筛选 | 比组件更偏场景 |
| Guideline | 指南 | 使用原则和规则 | 组件说明 | 说明正确和错误用法 |
| Variant | 变体 | 组件不同类型和状态 | 按钮、输入框 | 适合同类组件 |
| Theme | 主题 | 一套视觉变量组合 | 暗色模式、多品牌 | 主题切换靠 Token 更稳定 |
| Dark Mode | 深色模式 | 深色背景界面主题 | App、系统、工具 | 不是简单反色 |
| Light Mode | 浅色模式 | 浅色背景界面主题 | 默认 UI | 注意对比度 |
| Brand Guidelines | 品牌规范 | 品牌视觉使用规则 | Logo、颜色、字体 | UI 要符合品牌但不能牺牲可用性 |
| Single Source of Truth | 单一可信源 | 团队共用的唯一规范源 | 设计系统协作 | 避免多个版本冲突 |
18. 原型与交付术语
原型帮助验证流程，交付帮助开发落地。
| 术语 | 英文 | 含义 | 使用场景 | 新手注意 |
|---|---|---|---|---|
| 原型 | Prototype | 可模拟交互的设计稿 | 评审、测试 | 原型不是最终产品 |
| 低保真 | Low Fidelity / Lo-fi | 粗略结构稿 | 早期需求讨论 | 重点是结构和流程 |
| 中保真 | Mid Fidelity | 有基本布局和部分视觉 | 流程确认 | 介于线框和高保真之间 |
| 高保真 | High Fidelity / Hi-fi | 接近最终视觉的设计稿 | 开发交付 | 要包含真实内容和状态 |
| 线框图 | Wireframe | 页面结构草图 | 前期设计 | 不关注精细视觉 |
| 用户流程图 | User Flow Diagram | 用户操作路径图 | 原型前规划 | 帮助发现流程问题 |
| 交互说明 | Interaction Spec | 说明点击、状态、跳转规则 | 开发交付 | 复杂交互必须写 |
| 标注 | Spec / Annotation | 尺寸、颜色、间距说明 | 开发还原 | Figma 可自动查看很多标注 |
| 切图 | Asset Export | 导出图片、图标资源 | 开发实现 | 图标优先 SVG |
| 设计交付 | Handoff | 设计稿移交给开发 | Figma Dev Mode、蓝湖 | 交付不是发截图 |
| 版本历史 | Version History | 文件历史版本 | 协作、回滚 | 重要节点可命名版本 |
| 评审 | Review | 团队检查设计方案 | 设计评审、产品评审 | 要围绕目标和问题讨论 |
| 走查 | Design QA | 检查开发实现是否符合设计 | 上线前 | 关注还原和状态完整性 |
| 可点击原型 | Clickable Prototype | 可以点击跳转的原型 | 演示、测试 | 适合验证流程 |
| 热区 | Hotspot | 原型中可点击区域 | Figma、Axure | 点击范围要符合真实控件 |
19. 前端协作术语
UI 设计最终通常需要前端开发实现。了解这些词能减少沟通障碍。
| 术语 | 英文 | 含义 | 使用场景 | 新手注意 |
|---|---|---|---|---|
| 前端 | Frontend | 用户直接看到和操作的界面实现 | Web、App H5 | UI 设计主要和前端协作 |
| 后端 | Backend | 服务端逻辑、数据和接口 | 登录、订单、权限 | 很多状态来自后端数据 |
| API | Application Programming Interface | 前后端数据接口 | 获取列表、提交表单 | 设计要考虑接口失败状态 |
| HTML | HyperText Markup Language | Web 页面结构语言 | 前端开发 | 决定内容语义 |
| CSS | Cascading Style Sheets | Web 样式语言 | 布局、颜色、字体 | UI 样式主要靠 CSS |
| JavaScript | JS | Web 交互逻辑语言 | 动态效果、数据请求 | 原型交互最终常由 JS 实现 |
| 组件化 | Componentization | 把 UI 拆成可复用组件 | React、Vue | 和设计组件对应 |
| 响应式 | Responsive | 适配不同屏幕 | Web 开发 | 设计稿要说明断点 |
| Flexbox | Flexible Box Layout | CSS 一维弹性布局 | 横向、纵向排列 | 类似 Figma Auto Layout 的部分思路 |
| Grid | CSS Grid | CSS 二维网格布局 | 卡片、仪表盘 | 适合复杂页面 |
| 变量 | CSS Variables | CSS 中可复用变量 | 主题、Token | 如 --color-primary |
| 断点 | Breakpoint | CSS 媒体查询变化点 | 响应式开发 | 设计和开发要统一 |
| 还原度 | Implementation Fidelity | 开发实现和设计稿的匹配程度 | 设计走查 | 不只看像不像，也看交互和状态 |
| 组件文档 | Component Docs | 组件使用说明 | Storybook | 设计系统落地重要 |
| Storybook | Storybook | 前端组件展示和测试工具 | 组件库 | 可展示组件所有状态 |
| CI/CD | Continuous Integration / Deployment | 持续集成和部署 | 工程协作 | 设计师了解即可 |
| SEO | Search Engine Optimization | 搜索引擎优化 | 官网、博客、电商 | Web 设计要考虑内容结构 |
| 性能 | Performance | 页面加载和运行速度 | Web、App | 图片和动效会影响性能 |
20. 数据与增长术语
设计上线后可以通过数据判断效果，但数据需要正确理解。
| 术语 | 英文 | 含义 | 使用场景 | 新手注意 |
|---|---|---|---|---|
| PV | Page View | 页面浏览次数 | 网站数据 | 同一用户多次访问会重复计算 |
| UV | Unique Visitor | 独立访客数 | 网站数据 | 更接近访问人数 |
| DAU | Daily Active Users | 日活跃用户数 | App、平台 | 衡量每日活跃 |
| MAU | Monthly Active Users | 月活跃用户数 | App、平台 | 衡量长期规模 |
| 留存率 | Retention Rate | 用户过一段时间后仍回来使用的比例 | 产品增长 | 体验差会影响留存 |
| 跳出率 | Bounce Rate | 只访问一个页面就离开的比例 | 网站分析 | 需结合页面类型看 |
| 转化率 | Conversion Rate | 完成目标行为的比例 | 注册、购买 | UI 只是影响因素之一 |
| 点击率 | CTR | Click Through Rate，点击比例 | 按钮、广告、入口 | 点击高不代表最终转化高 |
| 漏斗 | Funnel | 用户从开始到完成的分步转化 | 注册、下单 | 找出流失最多的步骤 |
| A/B 测试 | A/B Testing | 同时测试多个版本 | 按钮文案、页面布局 | 需要足够样本量 |
| 埋点 | Tracking Event | 记录用户行为的数据点 | 数据分析 | 设计可参与定义关键行为 |
| 热力图 | Heatmap | 可视化用户点击或浏览集中区域 | 页面优化 | 只能辅助判断 |
| 任务完成率 | Task Success Rate | 用户完成指定任务的比例 | 可用性测试 | 比“喜不喜欢”更重要 |
| 平均完成时间 | Time on Task | 完成任务所需时间 | 可用性评估 | 后台工具常关注效率 |
21. Figma 常见术语
这些术语在使用 Figma 时经常出现。
| 术语 | 英文 | 含义 | 使用场景 | 新手注意 |
|---|---|---|---|---|
| Frame | Frame | Figma 中的容器 | 页面、组件、模块 | 最重要基础概念 |
| Group | Group | 简单编组 | 临时组织对象 | 不适合复杂 UI 布局 |
| Section | Section | 画布上的区域分组 | 管理流程、版本 | 适合整理大型文件 |
| Layer | Layer | 图层 | 所有设计对象 | 图层命名要清楚 |
| Auto Layout | Auto Layout | 自动布局 | 按钮、列表、卡片 | Figma 核心能力 |
| Hug Contents | Hug Contents | 容器尺寸包裹内容 | 按钮、标签 | 文本变长时自动撑开 |
| Fill Container | Fill Container | 填满父容器剩余空间 | 输入框、主内容区 | 响应式很常用 |
| Fixed Size | Fixed Size | 固定尺寸 | 图标、头像、侧边栏 | 过多 Fixed 会降低适配 |
| Constraints | Constraints | 约束 | 父 Frame 尺寸变化时的位置规则 | 和 Auto Layout 不同 |
| Component | Component | 组件 | 复用 UI 元素 | 紫色图标 |
| Instance | Instance | 组件实例 | 页面中使用组件 | 修改主组件会影响实例 |
| Variant | Variant | 组件变体 | 状态、尺寸、类型 | 适合同类组件 |
| Component Property | Component Property | 组件属性 | 控制文字、图标、显示隐藏 | 让实例更好用 |
| Style | Style | 样式 | 颜色、文字、效果 | 保持视觉统一 |
| Variable | Variable | 变量 | Token、主题、原型逻辑 | 比 Style 更灵活 |
| Library | Library | 共享库 | 团队组件和样式 | 团队协作常用 |
| Prototype | Prototype | 原型模式 | 连接页面和交互 | 用于演示流程 |
| Overlay | Overlay | 浮层 | 弹窗、下拉、Toast | 可设置遮罩和关闭方式 |
| Smart Animate | Smart Animate | 智能动画 | 状态切换、页面过渡 | 对应图层命名要一致 |
| Dev Mode | Dev Mode | 开发模式 | 查看标注和代码 | 用于设计交付 |
| Comment | Comment | 评论 | 协作评审 | 评论要指向具体问题 |
| Branch | Branch | 分支 | 团队文件修改 | 类似设计文件版本分支 |
| Publish | Publish | 发布库更新 | 组件库更新 | 更新前要确认影响 |
22. 常见缩写速查表
| 缩写 | 全称 | 中文含义 | 常见场景 |
|---|---|---|---|
| UI | User Interface | 用户界面 | 界面设计 |
| UX | User Experience | 用户体验 | 产品体验 |
| GUI | Graphical User Interface | 图形用户界面 | 软件界面 |
| HCI | Human-Computer Interaction | 人机交互 | 交互研究 |
| IA | Information Architecture | 信息架构 | 网站结构 |
| UCD | User-Centered Design | 用户中心设计 | 设计方法 |
| HIG | Human Interface Guidelines | 人机界面指南 | Apple 设计规范 |
| A11y | Accessibility | 无障碍 | 可访问性设计 |
| WCAG | Web Content Accessibility Guidelines | Web 内容无障碍指南 | Web 可访问性 |
| CTA | Call To Action | 行动号召 | 主按钮、营销页 |
| MVP | Minimum Viable Product | 最小可行产品 | 产品开发 |
| MPA | Multi-Page Application | 多页应用 | 传统网站 |
| SPA | Single-Page Application | 单页应用 | Web App |
| SSR | Server-Side Rendering | 服务端渲染 | 前端架构 |
| SSG | Static Site Generation | 静态站点生成 | 博客、文档 |
| API | Application Programming Interface | 应用程序接口 | 前后端协作 |
| SEO | Search Engine Optimization | 搜索引擎优化 | 官网、博客 |
| KPI | Key Performance Indicator | 关键绩效指标 | 数据评估 |
| CTR | Click Through Rate | 点击率 | 数据分析 |
| DAU | Daily Active Users | 日活 | 产品数据 |
| MAU | Monthly Active Users | 月活 | 产品数据 |
| PV | Page View | 页面浏览量 | 网站数据 |
| UV | Unique Visitor | 独立访客 | 网站数据 |
| DPR | Device Pixel Ratio | 设备像素比 | 屏幕适配 |
| PPI | Pixels Per Inch | 每英寸像素 | 屏幕清晰度 |
| DPI | Dots Per Inch | 每英寸点数 | 打印、屏幕密度 |
分享
如果这篇文章对你有帮助，欢迎分享给更多人！
UI设计术语总结(AI生成)
https://niushaoxiong.top/posts/ui设计术语总结/ 部分信息可能已经过时
相关文章 智能推荐
1
UI设计了解(AI生成)
UI设计 UI 设计入门笔记，整理界面概念、常见场景、设计目标、可用性和基础工作流程。
2
利用 AI 完成 UI 设计
UI设计 AI UI 设计工具笔记，整理 Claude Design、Open Design、Google Stitch 的能力、费用和使用场景。
3
Figma简单学习(AI生成)
UI设计 Figma 学习笔记，整理云端协作、界面设计、原型制作、组件库和设计交付基础。
4
DESIGN.md 文档学习（AI总结整理）
UI设计 DESIGN.md 学习笔记，整理设计规范文档的作用、结构、写法、约束内容和 AI 协作方式。
5
Google Stitch 和 Figma 对比
UI设计 Google Stitch 与 Figma 对比笔记，整理 AI 生成、协作、设计系统、原型和代码导出的差异。