关于 wireframing
wireframing 是面向产品设计与开发团队的线框图技能，介绍从低保真草图到交互原型的设计方法，并涵盖信息架构、用户流程和标注规范。
主要功能
- 01区分不同保真度的线框图
- 02规划信息架构与内容层级
- 03绘制任务流程和用户旅程
- 04标注交互、状态与边界情况
- 05介绍线框图迭代与评审实践
适用场景
- 01在产品早期探索页面布局方案
- 02与利益相关者验证内容结构和用户流程
- 03为开发交接记录交互规格
- 04使用低成本原型开展可用性测试
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/wireframing确认已加载。
附带文件EXAMPLES.mdREADME.md
详细介绍
线框图技能
目录
何时使用此技能
在产品开发和设计的各个阶段，线框图都至关重要：
早期产品探索
- 需求收集：将利益相关者的想法和需求可视化
- 概念探索：快速测试多种设计方向
- 可行性评估：及早发现技术限制
- 范围定义：定义功能集和功能边界
设计流程
- 信息架构：构建内容和导航层级
- 布局探索：测试 UI 元素的不同排列方式
- 用户流程映射：可视化用户在产品中的旅程
- 交互设计：定义用户如何与界面元素交互
协作与沟通
- 利益相关者达成共识：在详细设计工作开始前获得认可
- 开发交接：传达功能和结构
- 用户测试：无需投入高成本的高保真设计即可验证概念
- 设计文档：为团队创建参考资料
迭代与优化
- 设计评审会议：让反馈聚焦于结构，而非美观
- 快速原型制作：以最少投入快速测试想法
- A/B 测试概念：高效比较不同方案
- 设计系统基础：在视觉设计前建立模式
核心概念
低保真与高保真
低保真线框图
特点：
- 基本形状和占位符（方框、线条、简单文本）
- 灰度或单色配色方案
- 细节和视觉润色极少
- 侧重结构和布局
- 创建和修改速度快
- 通常手绘或使用基础数字工具制作
适用场景：
- 早期概念阶段
- 快速迭代与探索
- 利益相关者研讨会和头脑风暴
- 需要快速获取结构反馈时
- 预算或时间受限时
优点：
- 创建和迭代速度快
- 投入成本低，不易对想法产生执念
- 鼓励关注功能
- 非设计人员也能轻松使用
- 降低评审时的认知负担
高保真线框图
特点：
- 详细的 UI 元素和组件
- 精细的间距和对齐
- 实际内容或具有代表性的内容
- 清晰定义交互元素
- 可能包含真实图片和文案
- 更接近最终设计
适用场景：
- 概念验证后
- 准备与开发人员交接
- 详细的用户测试
- 需要精确规范时
- 需要精致呈现的利益相关者演示
优点：
- 清晰传达设计意图
- 更适用于可用性测试
- 可作为开发参考
- 能发现边缘情况和细节
- 减少实现过程中的歧义
线框图保真度范围
Sketches → Low-Fi → Mid-Fi → High-Fi → Mockups → Prototypes
↓ ↓ ↓ ↓ ↓ ↓
Paper Boxes & Details Refined Visual Interactive
notes labels added content design behavior
保真度维度
线框图在多个维度上的保真度可以有所不同：
- 视觉保真度：视觉细节和润色程度
- 内容保真度：真实内容与占位内容
- 功能保真度：交互式与静态
- 布局保真度：精确与近似的间距
线框图类型
1. 纸上草图
描述：在纸张或白板上手绘线框图
适用场景：
- 头脑风暴会议
- 快速构思
- 早期概念探索
- 协作研讨会
- 个人思考过程
工具：
- 笔和纸
- 白板
- 便利贴
- 点阵笔记本
- 模板和范本
技巧：
- 使用基本形状快速绘制草图
- Crazy 8 方法（8 分钟内提出 8 个想法）
- 用缩略图草图呈现多个概念
- 用箭头和注释进行标注
- 拍照以便数字化存档
优点：
- 零学习门槛
- 不受工具限制
- 激发创造力
- 自然适用于协作
- 便于携带且容易使用
局限性：
- 不易远程共享
- 难以通过数字方式迭代
- 缺乏精确度
- 难以维护版本控制
- 不适合交接给开发人员
2. 低保真数字线框图
描述：使用基本形状和极简样式制作的简单数字线框图
视觉特征：
- 方框、线条和简单的几何形状
- 灰度配色
- 占位文本（Lorem ipsum 或 FPO）
- 通用图标（用带 X 的方框表示图像）
- 主要通过大小和字重体现层级
内容：
- 用于视觉内容的“主视觉图”或灰色方框
- Lorem ipsum 或重复文本
- 通用标签和标题
- 简化的导航结构
常见元素：
- 页眉占位元素
- 导航栏（简单的线条或方框）
- 内容块（矩形）
- 按钮占位元素（带边框的方框）
- 表单字段（线条或简单的输入框）
- 页脚区域
适用于：
- 探索多种布局方案
- 测试信息层级
- 快速获取利益相关者的反馈
- 验证用户流程
- 设计团队讨论
3. 中保真线框图
描述：细节适中的精细线框图
视觉特征：
- 实际 UI 组件的呈现形式
- 精细的间距和对齐
- 排版层级（不同的字重和字号）
- 部分真实内容与占位内容混合
- 基本图标
- 基于网格的布局
内容：
- 真实文本与占位文本混合
- 实际标题和关键文案
- 有代表性的内容长度
- 真实的表单标签
- 实际导航项
交互元素：
- 清晰的按钮状态
- 已定义表单字段类型
- 下拉菜单指示符
- 链接样式
- 标明活动状态
适用于：
- 测试用户流程和结构
- 详细的利益相关者评审
- 验证信息架构
- 确保与内容策略一致
- 开发前规划
4. 高保真线框图
描述：细节丰富、经过润色，且与最终设计十分接近的线框图
视觉特征：
- 精确的间距和尺寸
- 精细的排版系统
- 真实内容或高质量占位内容
- 详细的组件状态
- 考虑无障碍性
- 展示响应式断点
内容：
- 实际文案或接近最终版本的内容
- 真实图像或高质量图库照片
- 准确的数据呈现
- 适当的内容层级
- 考虑字符数限制
注释：
- 交互规范
- 状态说明
- 条件逻辑
- 错误处理
- 加载状态
- 记录边缘情况
适用于：
- 交接给开发人员
- 详细的可用性测试
- 利益相关者签字确认
- 设计系统文档
- 无障碍性评审
5. 交互式原型
描述：可点击的线框图，用于模拟用户交互
功能：
- 页面导航
- 表单交互
- 模态框和叠加层行为
- 动画和过渡效果
- 条件逻辑
- 用户输入处理
保真度级别：
- 低保真交互原型：基本的点击跳转
- 中保真交互原型：包含部分条件流程
- 高保真交互原型：复杂行为和微交互
适用场景：
- 可用性测试
- 向利益相关者演示
- 验证用户流程
- 测试交互模式
- 向高管演示
工具：
- Figma 原型设计
- Axure RP
- Proto.io
- InVision
- Adobe XD
信息架构
站点地图
目的：以可视化方式呈现网站／应用的结构和层级
组成部分：
- 以节点表示页面／屏幕
- 层级关系
- 导航路径
- 内容分组
- 用户访问级别
站点地图类型：
- 层级式站点地图：
Home
├── Products
│ ├── Category A
│ │ ├── Product 1
│ │ └── Product 2
│ └── Category B
│ ├── Product 3
│ └── Product 4
├── About
│ ├── Team
│ └── History
└── Contact
- 顺序式站点地图：线性流程（例如，新手引导、结账）
- 矩阵式站点地图：通往同一目的地的多条路径
- 有机式站点地图：用户生成或动态内容结构
最佳实践：
- 使用一致的标注和符号
- 区分页面模板与独特页面
- 展示导航类型（全局、实用、情境）
- 记录用户权限和访问权限
- 包含站外链接和集成
- 为站点地图标注版本和日期
内容层级
定义：按照重要性和关系组织内容
原则：
- 视觉层级：
- 大小：较大的元素更容易吸引注意
- 字重：粗体文字可突出重点
- 颜色：对比可强调重要性
- 位置：顶部和左侧最先受到关注
- 留白：充足的空间更能凸显内容
- 信息层级：
- 主要信息：用户的主要目标
- 次要信息：辅助细节
- 第三级信息：可选信息或情境信息
- 元数据：系统级信息
F 型和 Z 型模式：
-
F 型模式：文字密集型内容常见的阅读模式
- 用户先横向浏览顶部内容
- 再向下进行第二次横向浏览
- 最后沿左侧向下纵向浏览
-
Z 型模式：适用于文字较少、视觉元素较多的内容
- 从左上到右上
- 斜向移动至左下
- 从左下到右下
创建清晰的层级：
- 明确内容类型（H1、H2、H3、正文、说明文字）
- 使用一致的间距尺度
- 将相关信息分组
- 运用邻近性原则
- 限制层级数量（通常最多 3–4 层）
- 眯眼检查层级是否清晰（模糊测试）
卡片分类
目的：了解用户对内容组织方式的心理模型
类型：
- 开放式卡片分类：
- 参与者自行创建类别
- 有助于发现自然分组
- 适用于新产品或重新设计
- 封闭式卡片分类：
- 参与者将卡片归入预定义类别
- 用于验证现有结构
- 用于测试类别标签
- 混合式卡片分类：
- 提供预定义类别，同时允许创建新类别
- 兼顾结构与探索
流程：
- 确定要分类的内容项
- 创建卡片（实体或数字形式）
- 招募有代表性的用户
- 开展分类环节
- 分析结果，找出规律
- 迭代优化信息架构
工具：
- OptimalSort
- UserZoom
- Miro（虚拟卡片分类）
- 实体索引卡
用户流程
任务流程
定义：用户为完成特定任务所采取的逐步路径
组成部分：
- 入口点
- 决策点
- 操作／步骤
- 系统响应
- 成功标准
- 错误状态
流程图元素：
- 矩形：屏幕或页面
- 菱形：决策点
- 椭圆形：入口／出口点
- 箭头：流程方向
- 注释：补充背景信息
任务流程结构示例：
[Start] → [Login Page] → {Valid Credentials?}
↓ Yes ↓ No
[Dashboard] [Error Message]
↓ ↓
[Success] [Retry Login]
创建有效的任务流程：
- 清晰定义用户目标
- 绘制所有可能的路径（顺利路径和边缘情况）
- 找出决策点
- 记录系统响应
- 纳入错误处理
- 记录所有假设
- 使用实际用户场景进行测试
用户旅程
定义：从整体视角审视用户体验随时间在各个触点上的变化
与任务流的区别：
- 范围更广（涵盖多个任务／会话）
- 包含情感旅程
- 考虑所有触点
- 描绘用户的想法和感受
- 识别痛点和机会
旅程地图的组成部分：
- 用户画像：用户是谁？
- 场景：他们想要完成什么？
- 阶段：旅程的主要阶段
- 行动：用户会做什么
- 触点：交互发生在哪里
- 想法：用户的心智模型
- 情绪：用户的感受（通常以图表形式呈现）
- 痛点：挫折和障碍
- 机会：可改进之处
旅程阶段示例（电子商务）：
- 认知：发现对产品的需求
- 调研：比较不同选项
- 购买：完成交易
- 配送：收到产品
- 使用：体验产品
- 支持：有需要时获得帮助
- 忠诚：再次购买或推荐
流程图
用途：将逻辑、流程和系统行为可视化
标准流程图符号：
- 终止符（椭圆）：开始／结束
- 流程（矩形）：操作或步骤
- 决策（菱形）：是／否问题
- 输入／输出（平行四边形）：数据输入或显示
- 连接符（圆形）：连接到流程的另一部分
- 文档（底边波浪形矩形）：文档或报告
适用于 UX 的流程图类型：
- 用户流程图：用户在界面中的路径
- 系统流程图：后端逻辑和流程
- 泳道流程图：多个参与者或系统
- 状态图：对象状态及其转换
最佳实践：
- 始终一致地使用标准符号
- 按从上到下、从左到右的方向绘制流程
- 尽量减少线条交叉
- 清晰标注所有决策分支
- 尽可能将流程控制在一页内
- 复杂流程使用连接符
- 必要时添加图例
线框流程图
定义：线框图与用户流程的结合
格式：
- 用箭头连接实际的线框界面
- 同时展示界面设计和流程逻辑
- 标注转换和交互
适用场景：
- 复杂的交互模式
- 多步骤流程
- 条件导航
- 为流程进行开发交接
- 记录交互式原型
创建线框流程图：
- 为每个步骤创建关键线框图
- 按逻辑顺序排列
- 用箭头连接，展示转换关系
- 标注触发条件和条件
- 纳入替代路径
- 标注错误状态和边缘情况
线框图元素
布局组件
网格系统：
- 12 列网格（响应式布局中最常见）
- 8 列网格（更简单的布局）
- 16 列网格（复杂、细节丰富的布局）
- 基线网格（垂直韵律）
容器类型：
- 固定宽度容器
- 流式容器（全宽）
- 受限容器（最大宽度）
间距系统：
- 以 4px 或 8px 为基本单位
- 统一设置内边距和外边距
- 通过垂直韵律提升可读性
导航元素
主导航：
- 顶部水平导航栏
- 汉堡菜单／移动端菜单
- 大型菜单
- 侧边栏导航
- 标签页导航
次级导航：
- 面包屑
- 分页
- 筛选和排序
- 页面内导航（锚点链接）
- 相关链接
实用导航：
- 用户账户菜单
- 购物车／购物袋
- 搜索
- 语言／地区选择器
- 设置和偏好
内容元素
排版占位内容：
- 标题（H1、H2、H3 等）
- 正文（段落）
- 列表（项目符号、编号）
- 说明文字和标签
- 链接和行动号召（CTA）
媒体占位内容：
- 图片（带 X 或对角线的方框）
- 视频播放器（带播放图标的方框）
- 图标（简单形状或实际图标）
- 地图（标注为“地图”的方框）
- 图表
表单元素：
- 文本输入框
- 多行文本框
- 复选框
- 单选按钮
- 下拉菜单／选择菜单
- 日期选择器
- 文件上传
- 提交按钮
交互元素
按钮：
- 主要按钮（填充样式）
- 次要按钮（描边样式）
- 三级按钮（纯文本）
- 图标按钮
- 按钮组
- 切换按钮
链接：
- 行内文本链接
- 独立链接
- 导航链接
- 页脚链接
切换控件和开关：
- 开/关切换控件
- 复选框切换控件
- 分段控件
卡片：
- 内容卡片
- 产品卡片
- 个人资料卡片
- 交互式卡片
反馈元素
状态指示器：
- 加载动画
- 进度条
- 成功消息
- 错误消息
- 警告消息
- 信息提示
模态框和覆盖层：
- 模态对话框
- 灯箱
- 工具提示
- 弹出框
- 抽屉/侧边面板
注释和规范
注释类型
1. 功能注释：
- 用户点击/轻触时会发生什么
- 表单验证规则
- 动态内容更新
- 条件逻辑
示例：
[Button: "Add to Cart"]
→ On click: Add item to cart
→ Update cart count in header
→ Show success message
→ Animate button (scale feedback)
2. 内容注释：
- 字符数限制
- 内容来源
- 占位内容与最终内容
- 内容规则和逻辑
示例：
[Product Title]
→ Max 60 characters
→ Source: Product database, title field
→ Truncate with ellipsis if exceeds limit
3. 行为注释：
- 悬停状态
- 激活状态
- 禁用状态
- 加载状态
- 错误状态
4. 技术注释：
- API 端点
- 数据要求
- 性能考量
- 第三方集成
5. 无障碍注释：
- 替代文本要求
- ARIA 标签
- 焦点顺序
- 键盘交互
- 屏幕阅读器行为
注释方法
编号标注：
Wireframe with numbered markers:
1. Logo links to homepage
2. Search expands on click
3. Cart shows item count
4. User menu drops down on hover
行内注释：
- 直接标注在元素上或其附近
- 使用引导线以确保清晰
- 按注释类型使用不同颜色
独立的规范文档：
- 将详细规范与线框图分开
- 按屏幕名称/编号引用线框图
- 包含用户故事和验收标准
交互式注释（用于原型工具）：
- 悬停以显示注释
- 点击以展开详细信息
- 链接的规范文档
编写清晰的注释
最佳实践：
- 具体明确，避免歧义
- 使用一致的术语
- 关注行为，而非实现方式
- 包含边缘情况
- 引用设计模式或示例
- 说明要做什么，而非怎么做（除非至关重要）
不佳的注释： “点击按钮时会执行某项操作”
良好的注释： “点击后：提交表单数据。如果验证通过，则导航到确认页面。如果验证失败，则在无效字段旁显示行内错误消息，并滚动到第一个错误处。”
面向开发者的规范
应包含的内容：
- 布局规范：
- 间距值（内边距、外边距）
- 网格列数和间距
- 断点行为
- 对齐规则
- 组件规范：
- 状态（默认、悬停、激活、禁用、错误）
- 尺寸变化
- 内容规则
- 无障碍要求
- 交互规范：
- 用户触发操作（点击、轻触、悬停、滑动）
- 系统响应
- 动画时长和缓动
- 转场行为
- 数据规范：
- 必需数据与可选数据
- 数据格式
- 默认值
- 验证规则
- 条件逻辑：
- 如果/那么场景
- 用户权限级别
- 功能标志
- 个性化规则
工具和技术
纸笔和实体工具
纸笔：
- 适用于：快速构思、头脑风暴
- 优点：即时、触感真实、易于使用
- 缺点：难以远程分享，迭代受限
白板：
- 适用于：协作会议、工作坊
- 优点：易于擦除和修改，非常适合团队协作
- 缺点：不便携，存档时需要拍照
便利贴：
- 适用于：卡片分类、亲和图整理、流程创建
- 优点：灵活、触感真实、易于重新组织
- 缺点：不耐久，需要实体空间
线框图笔记本和模板：
- 点阵笔记本
- 预印设备模板
- UI 绘图模板
- 优点：结构清晰、外观专业
- 缺点：灵活性有限
低保真数字工具
Balsamiq：
- 描述：手绘风格的线框图工具
- 最适合：低保真线框图、快速原型设计
- 主要功能：
- 刻意营造“手绘”风格
- 大型组件库
- 快速创建模型
- 内置 UI 组件
- 定价：订阅制
- 学习曲线：低
Whimsical：
- 描述：轻量级图表绘制和线框图工具
- 最适合：流程图、线框图、思维导图
- 主要功能：
- 性能出色
- 界面简洁、极简
- 实时协作
- 集成流程图和线框图
- 定价：免费增值
- 学习曲线：极低
Miro：
- 描述：数字白板平台
- 最适合：研讨会、头脑风暴、协作式线框图设计
- 主要功能：
- 无限画布
- 线框图模板
- 实时协作
- 与其他工具集成
- 定价：免费增值
- 学习曲线：低
专业线框图工具
Figma：
- 描述：协作式界面设计工具
- 最适合：所有保真度级别、设计系统、原型设计
- 主要功能：
- 基于浏览器，跨平台
- 实时协作
- 组件库
- 高级原型设计
- 支持设计系统
- 开发者交接
- 版本历史记录
- 定价：免费增值（个人使用免费）
- 学习曲线：中等
- 线框图设计方法：
- 使用 Auto Layout 创建响应式设计
- 创建组件库
- 利用社区线框图套件
- 使用变体表示组件状态
Sketch：
- 描述：基于矢量的设计工具（仅限 macOS）
- 最适合：高保真线框图、UI 设计
- 主要功能：
- 符号和库
- 插件生态系统
- 原型设计功能
- 开发者交接
- 定价：订阅制
- 学习曲线：中等
- 限制：仅限 macOS，协作功能有限
Adobe XD：
- 描述：UI/UX 设计和原型设计工具
- 最适合：高保真线框图、交互式原型
- 主要功能：
- 组件和状态
- 高级原型设计
- 自动动画
- 语音原型设计
- 设计系统
- 定价：包含在 Creative Cloud 中
- 学习曲线：中等
Axure RP：
- 描述：专业原型设计和规范编写工具
- 最适合：复杂交互、详细规范
- 主要功能：
- 高级条件逻辑
- 动态内容
- 变量和表达式
- 生成详细文档
- 团队协作
- 定价：按许可证收费（价格高）
- 学习曲线：高
- 最适合：企业级和复杂应用
专用工具
OmniGraffle（macOS/iOS）：
- 最适合：图表、站点地图、用户流程
- 优势：强大的图表绘制功能，输出效果精美
- 限制：仅限 macOS/iOS
Lucidchart：
- 最适合：流程图、站点地图、系统图表
- 优势：协作、集成
- 使用场景：信息架构文档
FlowMapp：
- 最适合：站点地图和用户流程
- 优势：专为信息架构工作打造
- 功能：可视化站点地图、创建用户流程
Overflow：
- 最适合：根据设计创建用户流程图
- 优势：可从设计工具导入，生成美观的流程图
- 使用场景：文档编写和演示
基于代码的线框图设计
HTML/CSS 线框图：
- 适用场景：需要让线框图具备交互功能时
- 优点：真正响应式、可测试，并可转为生产代码
- 缺点：速度较慢，需要具备编码技能
用于线框图设计的框架：
- Tailwind CSS：实用优先的 CSS 框架
- Bootstrap：组件库
- Material UI：Google 的设计系统
- Semantic UI：易于人类使用的 HTML
示例工具：
- CodePen：快速原型设计
- JSFiddle：交互式编码
- StackBlitz：完整开发环境
选择合适的工具
决策因素：
- 项目保真度需求：
- 低保真：Balsamiq、Whimsical、纸张
- 中保真：Figma、Sketch、Adobe XD
- 高保真：Figma、Sketch、Adobe XD、Axure
- 协作需求：
- 个人：任意工具
- 小型团队：Figma、Miro、Whimsical
- 大型团队：Figma、Adobe XD、Axure
- 预算：
- 免费：Figma（免费套餐）、Miro（免费套餐）、纸张
- 适中：Whimsical、Balsamiq
- 企业级：Axure、Sketch
- 平台：
- 跨平台：Figma、Adobe XD、基于 Web 的工具
- 仅限 macOS：Sketch、OmniGraffle
- 学习曲线：
- 简单：Balsamiq、Whimsical、纸张
- 适中：Figma、Adobe XD
- 高级：Axure、基于代码的工具
迭代流程
设计迭代周期
1. 创建初始线框图：
- 从低保真草图开始
- 聚焦于核心用户流程
- 探索多个概念
- 不要拘泥于最初的想法
2. 内部评审：
- 与设计团队分享
- 征求对结构和流程的反馈
- 找出假设和不足
- 根据团队意见进行改进
3. 利益相关者评审：
- 向产品负责人和业务利益相关者展示
- 根据业务需求进行验证
- 确认范围和优先级
- 记录决策及其理由
4. 用户测试：
- 邀请具有代表性的用户参与测试
- 观察用户行为，而不只是听取意见
- 找出痛点和困惑之处
- 验证假设
5. 分析与综合：
- 审查反馈和数据
- 找出规律和主题
- 确定变更的优先级
- 制定行动项
6. 优化：
- 纳入已验证的变更
- 视情况提高保真度
- 在需要的地方补充细节
- 为下一轮迭代做好准备
7. 重复：
- 多轮迭代是正常的
- 每个周期都应回答具体问题
- 明确何时继续推进
反馈循环
反馈类型：
- 设计评审：
- 定期与设计团队开展评审
- 聚焦于具体方面
- 采用结构化的反馈形式
- 记录决策
- 利益相关者反馈：
- 检查与业务的契合度
- 评估技术可行性
- 评估对资源和时间安排的影响
- 评估战略契合度
- 用户反馈：
- 可用性测试
- 调查和访谈
- 分析数据和行为数据
- A/B 测试结果
反馈最佳实践：
- 为每次评审设定明确目标
- 提出具体问题
- 关注用户需求，而非个人偏好
- 记录所有反馈和决策
- 形成闭环（展示如何处理反馈）
使用线框图进行可用性测试
何时测试：
- 初步验证概念后
- 开始高保真设计前
- 探索新模式时
- 验证重大变更时
测试方法：
- 主持式可用性测试：
- 一对一进行
- 采用出声思考法
- 基于任务的场景
- 观察者做笔记
- 非主持式测试：
- 远程、异步进行
- 用户独立完成任务
- 屏幕录制
- 调查问卷回复
- 街头测试：
- 快速、非正式地测试
- 在咖啡馆或公共场所进行
- 每次时长较短（5-10 分钟）
- 适合低保真原型
测试内容：
- 用户能否完成关键任务？
- 用户是否理解信息层级？
- 导航是否直观？
- 交互是否清晰？
- 流程是否符合用户的心智模型？
- 是否存在令人困惑或造成阻碍的环节？
测试线框图与高保真原型：
- 线框图：测试结构和流程
- 高保真原型：测试视觉层级和细节
- 两者均可：测试可用性和用户理解情况
渐进式完善
从低保真到高保真的历程：
阶段 1：草图（小时）：
- 绘制多个粗略方案
- 探索不同方法
- 快速与团队达成共识
- 发现明显问题
阶段 2：低保真线框图（天）：
- 将最佳方案数字化
- 创建基本用户流程
- 测试核心结构
- 供利益相关者评审
阶段 3：中保真线框图（数天至数周）：
- 增加细节并完善
- 尽可能加入实际内容
- 确保组件一致
- 进行用户测试
阶段 4：高保真线框图（数周）：
- 提供精确的规格说明
- 记录所有状态
- 处理边缘情况
- 做好交付开发的准备
阶段 5：交互式原型（数周）：
- 实现功能性交互
- 加入动画和过渡效果
- 进行高级用户测试
- 向利益相关者演示
何时提高保真度：
- 核心结构已通过验证
- 重大改动的可能性较低
- 需要测试具体细节
- 即将交接给开发人员
- 需要获得利益相关者的批准
何时保持低保真度：
- 仍在探索方案
- 还有重大问题尚未解答
- 仍处于流程早期
- 时间或预算有限
- 正在测试基本概念
最佳实践
清晰表达与沟通
1. 使用一致的视觉语言：
- 始终使用相同的占位符样式
- 使用一致的注释格式
- 使用标准符号和标记
- 统一组件的呈现方式
2. 建立清晰的层级：
- 用尺寸表示重要性
- 用间距体现关联
- 用粗细加强强调
- 用位置引导注意力
3. 为所有内容添加标签：
- 页面／屏幕名称
- 区块标题
- 交互元素
- 导航项
- 表单字段
4. 提供上下文：
- 显示用户在流程中的位置
- 添加面包屑导航或进度指示器
- 引用相关屏幕
- 注明用户状态或上下文
5. 记录假设：
- 注明对用户知识水平的假设
- 记录技术假设
- 明确内容假设
- 指定用户权限或角色
注重结构而非样式
1. 抵制视觉设计的诱惑：
- 暂不选择最终颜色
- 避免过早确定具体字体
- 不添加不必要的装饰
- 专注于布局和功能
2. 使用灰度：
- 让注意力集中于结构
- 避免过早做出样式决策
- 减少对利益相关者的干扰
- 让层级测试更容易
3. 统一元素样式：
- 所有按钮样式一致
- 所有表单字段保持一致
- 所有标题样式统一
- 仅在功能不同时采用不同样式
4. 将内容与容器分开：
- 适当使用占位符
- 不要让内容决定布局
- 考虑各种内容场景
- 为边缘情况做好规划（内容过长或过短）
协作与交接
1. 尽早让利益相关者参与：
- 尽快分享低保真方案
- 在处理细节前达成共识
- 定期沟通
- 记录决策
2. 与开发人员协作：
- 了解技术限制
- 询问方案是否可行
- 提供清晰的规格说明
- 随时解答问题
3. 版本控制：
- 为所有线框图标注日期
- 跟踪重大变更
- 维护变更日志
- 归档旧版本
4. 创建设计系统：
- 可复用组件
- 一致的模式
- 共享库
- 文档
5. 交接检查清单：
- 已记录所有屏幕
- 已说明交互
- 已定义各类状态
- 已处理边缘情况
- 已准备好资源文件
- 规格说明清晰
无障碍设计注意事项
1. 考虑屏幕阅读器：
- 标题层级清晰合理
- 链接文本有意义
- 表单标签关联正确
- 注明替代文本要求
2. 键盘导航：
- 焦点顺序合理
- 所有交互元素均可访问
- 记录键盘快捷键
- 为长页面提供跳转链接
3. 颜色与对比度：
- 不要仅依赖颜色传达信息
- 标明对比度至关重要的位置
- 考虑色盲用户
- 为高对比度模式做好准备
4. 触控目标：
- 移动设备上的尺寸至少为 44x44px
- 目标之间留有足够间距
- 考虑拇指操作区域
- 为各种输入方式做好准备
5. 内容无障碍性：
- 语言清晰
- 结构合理
- 为复杂内容提供替代方案
- 为媒体添加字幕
应避免的常见问题
1. 过早添加过多细节：
- 风险：在错误的方向上浪费精力
- 解决方案：验证之前保持低保真
2. 闭门设计：
- 风险：与用户需求或业务目标不一致
- 解决方案：定期征求反馈并进行测试
3. 忽略边缘情况：
- 风险：规格不完整，开发时出现意外
- 解决方案：考虑错误状态、空状态、加载状态等
4. 模式不一致：
- 风险：让用户困惑，降低开发效率
- 解决方案：建立并遵循统一模式
5. 忽略移动端和响应式设计：
- 风险：设计无法在所有设备上正常显示
- 解决方案：针对多个断点进行设计
6. 注释不足：
- 风险：需求被误解，需要返工
- 解决方案：提供清晰、全面的规格说明
7. 跳过用户测试：
- 风险：做出错误的产品
- 解决方案：尽早并频繁地进行测试
8. 未考虑内容：
- 风险：设计遇到真实内容时出现问题
- 解决方案：使用真实内容，并考虑内容变化
线框图示例
示例 1：电商产品列表页
目的：展示多个产品，并提供筛选和排序功能
低保真方案：
[Header]
+------------------------------------------+
| Logo Search Cart Account |
+------------------------------------------+
[Breadcrumbs]
Home > Category > Subcategory
[Main Content Area]
+------------+ +------------------------+
| Filters | | [Sort: Dropdown] |
| | | [Grid View] [List View]|
| Category | | |
| [ ] Option | | +----+ +----+ +----+ |
| [ ] Option | | |Img | |Img | |Img | |
| | | | | | | | | |
| Price | | |Name| |Name| |Name| |
| [Slider] | | |$XXX| |$XXX| |$XXX| |
| | | +----+ +----+ +----+ |
| Brand | | |
| [ ] Option | | +----+ +----+ +----+ |
| [ ] Option | | |Img | |Img | |Img | |
| | | +----+ +----+ +----+ |
| [Apply] | | |
+------------+ | [Load More] |
+------------------------+
注释：
- 筛选侧边栏：在移动端可折叠
- 产品网格：桌面端 3 列、平板端 2 列、移动端 1 列
- 排序下拉菜单：选项包括价格、评分、最新
- 每张产品卡片都链接到产品详情页
- “加载更多”在移动端使用无限滚动
高保真设计注意事项：
- 产品图片宽高比：1:1
- 使用货币格式显示价格
- 特价价格的显示方式
- 快速查看功能
- 愿望清单／收藏图标
- 缺货提示
- 评分星级显示
示例 2：用户注册流程
流程概述：
[Landing Page] → [Sign Up Form] → [Email Verification] → [Profile Setup] → [Dashboard]
↓
[Login Instead]
注册表单线框图：
+------------------------------------------+
| Create Account |
+------------------------------------------+
| |
| Full Name |
| [________________________] |
| |
| Email Address |
| [________________________] |
| |
| Password |
| [________________________] [👁] |
| • Must be 8+ characters |
| • Include number and special character |
| |
| [ ] I agree to Terms and Privacy Policy |
| |
| [ Create Account ] |
| |
| Already have an account? [Log In] |
| |
| -------- Or sign up with -------- |
| |
| [Google] [Apple] [Facebook] |
+------------------------------------------+
注释：
- 电子邮件字段：失去焦点时验证格式
- 密码字段：通过眼睛图标切换可见状态
- 密码强度指示器：随用户输入实时更新
- 条款复选框：必选，并链接到完整条款
- 社交账号注册：使用 OAuth 流程，以最少信息创建账户
- 错误处理：内联验证，在字段上方显示错误
需考虑的状态：
- 空状态（初始）
- 已填写状态（有效）
- 错误状态（电子邮件无效、密码强度不足）
- 加载状态（正在提交）
- 成功状态（账户已创建）
示例 3：带数据可视化的仪表盘
目的：展示关键指标和性能数据
布局结构：
+----------------------------------------------------+
| Logo Dashboard Reports Settings [Profile▼] |
+----------------------------------------------------+
| Welcome back, [User Name] [Date Range ▼] |
| |
| +---------------+ +---------------+ +---------+ |
| | Total Sales | | Orders | | Growth | |
| | $XXX,XXX | | XXX | | +XX% | |
| | +XX% vs LM | | +XX% vs LM | | ↑ | |
| +---------------+ +---------------+ +---------+ |
| |
| +------------------------------------------------+ |
| | Revenue Over Time [Month▼] | |
| | [Line Chart] | |
| | | |
| | | |
| +------------------------------------------------+ |
| |
| +-----------------------+ +---------------------+ |
| | Top Products | | Recent Orders | |
| | 1. Product A $XXX | | #1234 [Status] | |
| | 2. Product B $XXX | | #1235 [Status] | |
| | 3. Product C $XXX | | #1236 [Status] | |
| | [View All] | | [View All] | |
| +-----------------------+ +---------------------+ |
+----------------------------------------------------+
交互元素：
- 日期范围选择器：更新所有数据
- 指标卡片：点击可查看详细信息
- 图表：悬停可查看数据点，点击可查看详情
- 表格：列可排序，点击行可查看详情
响应式行为：
- 桌面端：3 列指标卡片，表格并排显示
- 平板端：2 列指标，表格纵向排列
- 移动端：单列纵向排列，简化图表
示例 4：移动应用引导
屏幕流程：
[Splash] → [Welcome] → [Feature 1] → [Feature 2] → [Feature 3] → [Sign Up/Login]
↓
[Skip]
欢迎屏幕：
+-------------------+
| |
| [Illustration] |
| |
| Welcome to App |
| |
| Discover amazing |
| features that |
| make life easier |
| |
| ● ○ ○ ○ |
| |
| [ Next ] |
| |
| [Skip] |
+-------------------+
注释：
- 滑动手势：向左/向右导航
- 进度圆点：指示当前屏幕（共 4 个）
- 下一步按钮：前往下一屏幕
- 跳过链接：直接跳转到注册/登录
- 自动切换：可选择通过计时器自动播放
设计注意事项：
- 信息简洁、重点明确
- 每个屏幕只展示一个概念
- 视觉内容 > 文字
- 提供便捷的退出选项
- 记住用户（不再显示）
示例 5：搜索结果页
布局：
+--------------------------------------------------+
| Logo [Search: "keyword" ] [Search] |
+--------------------------------------------------+
| About X,XXX results (0.XX seconds) |
| |
| Filters: [All] [Images] [Videos] [News] [More▼] |
| |
| +---------+ |
| | [Image] | Result Title - Linked |
| +---------+ www.example.com › path |
| Brief description of the content |
| showing search term highlighted... |
| Additional context line. |
| |
| +---------+ |
| | [Image] | Result Title - Linked |
| +---------+ www.example.com › path |
| Brief description... |
| |
| [People also ask] |
| ▼ Question related to search? |
| ▼ Another question? |
| |
| ... more results ... |
| |
| [Previous] [1] [2] [3] [4] [5] [Next] |
+--------------------------------------------------+
注释：
- 搜索框：保留查询内容，建议优化搜索词
- 筛选器：更改结果类型并更新页面
- 结果图片：有可用图片时显示预览
- 面包屑 URL：显示页面层级
- 描述：突出显示关键词
- “其他人还问了”：可展开的 FAQ 折叠面板
- 分页：标准页面导航
示例 6：博客文章页
结构：
+--------------------------------------------------+
| Logo Home Articles About Contact [Search] |
+--------------------------------------------------+
| |
| Home > Category > Article Title |
| |
| Article Title Here |
| A compelling subtitle or summary |
| |
| By [Author Name] | [Date] | X min read |
| |
| [Featured Image - Full Width] |
| |
| +--------------------------------------------+ |
| | Article content begins here. Lorem ipsum | |
| | dolor sit amet, consectetur adipiscing | |
| | elit. Paragraphs of main content... | |
| | | |
| | ## Subheading | |
| | | |
| | More content with proper hierarchy and | |
| | formatting. Lists, quotes, images, etc. | |
| | | |
| | [Inline Image with Caption] | |
| | | |
| +--------------------------------------------+ |
| |
| Tags: [Design] [UX] [Wireframing] |
| |
| Share: [Twitter] [Facebook] [LinkedIn] |
| |
| +--------------------------------------------+ |
| | About the Author | |
| | [Avatar] Name | |
| | Brief bio and social links | |
| +--------------------------------------------+ |
| |
| Related Articles |
| +-------+ +-------+ +-------+ |
| |[Image]| |[Image]| |[Image]| |
| |Title | |Title | |Title | |
| +-------+ +-------+ +-------+ |
+--------------------------------------------------+
响应式注意事项：
- 桌面端：最大宽度容器（680-720px），便于阅读
- 移动端：全宽布局并留有内边距，采用堆叠布局
- 图片：采用响应式布局，保持纵横比
- 相关文章：3 列 → 1 列
示例 7：设置/偏好设置页
基于标签页的布局：
+--------------------------------------------------+
| [Account] [Privacy] [Notifications] [Billing] |
+--------------------------------------------------+
| |
| Account Settings |
| |
| Profile Photo |
| [ Avatar ] [Change Photo] [Remove] |
| |
| Display Name |
| [_____________________________] |
| |
| Email Address |
| [email protected] [Verified ✓] |
| [Change Email] |
| |
| Password |
| •••••••• |
| [Change Password] |
| |
| Two-Factor Authentication |
| [ Enabled ] |
| Add an extra layer of security |
| [Manage 2FA] |
| |
| Timezone |
| [America/New_York ▼] |
| |
| Language |
| [English ▼] |
| |
| Danger Zone |
| [Delete Account] This action cannot be undone |
| |
| [Cancel] [Save Changes] |
+--------------------------------------------------+
注释：
- 标签页：加载不同的设置区块
- 更改操作：使用模态框或行内编辑
- 2FA 开关：需要确认
- 保存按钮：仅在有更改时启用
- 危险操作区域：使用密码确认的模态框
- 自动保存选项：可考虑启用以提升用户体验
示例 8：日历/日程安排界面
月视图：
+--------------------------------------------------+
| [<] October 2024 [>] [Today] [+ Event] |
+--------------------------------------------------+
| Sun | Mon | Tue | Wed | Thu | Fri | Sat | |
+--------------------------------------------------+
| | | 1 | 2 | 3 | 4 | 5 | |
| | | | | | | | |
+--------------------------------------------------+
| 6 | 7 | 8 | 9 | 10 | 11 | 12 | |
| | ● | | ●● | | | | |
+--------------------------------------------------+
| 13 | 14 | 15 | 16 | 17 | 18 | 19 | |
| | | ● | | ● | ●●● | | |
+--------------------------------------------------+
| 20 | 21 | 22 | 23 | 24 | 25 | 26 | |
| | ● | | | | ● | | |
+--------------------------------------------------+
| 27 | 28 | 29 | 30 | 31 | | | |
| | | | ●● | | | | |
+--------------------------------------------------+
| |
| Upcoming Events |
| Oct 9, 9:00 AM - Team Meeting |
| Oct 15, 2:00 PM - Client Call |
| Oct 17, 10:00 AM - Design Review |
| [View All] |
+--------------------------------------------------+
其他视图：
- 周视图：带有事件区块的小时网格
- 日视图：显示冲突的详细时间线
- 日程视图：所有事件的列表
交互操作：
- 点击日期：查看当日详情或创建事件
- 圆点：指示事件（按类型以颜色区分）
- 拖动事件：重新安排时间
- 点击事件：查看/编辑详情
- 月份导航：切换到上个月/下个月，或使用日期选择器
示例 9：社交媒体信息流
信息流结构：
+--------------------------------------------------+
| [Home] [Discover] [Messages] [Profile] [@user] |
+--------------------------------------------------+
| What's on your mind? |
| [____________________________] [Photo] [Post] |
+--------------------------------------------------+
| |
| +----------------------------------------------+ |
| | [Avatar] User Name [•••] | |
| | @username · 2h ago | |
| | | |
| | Post content here. This could be text, | |
| | images, links, or other media. #hashtag | |
| | | |
| | [Preview Image if link/media] | |
| | | |
| | [💬 12] [🔄 5] [❤️ 24] [🔖] [📤] | |
| +----------------------------------------------+ |
| |
| +----------------------------------------------+ |
| | [Avatar] Another User [•••] | |
| | @user2 · 5h ago | |
| | | |
| | Another post with different content... | |
| | | |
| | [💬 3] [🔄 1] [❤️ 8] [🔖] [📤] | |
| +----------------------------------------------+ |
| |
| [Load More Posts] |
+--------------------------------------------------+
帖子交互：
- 头像/名称：链接到用户个人主页
- 三点菜单：举报、静音、屏蔽等
- 回复图标：打开评论串
- 转发图标：分享到自己的信息流
- 点赞图标：切换点赞状态
- 书签：保存以供日后查看
- 分享：分享到外部平台
功能：
- 无限滚动或“加载更多”
- 在移动设备上支持下拉刷新
- 新帖子实时更新
- 实时更新互动次数
示例 10：视频播放器界面
播放器线框图：
+--------------------------------------------------+
| |
| [Video Content] |
| |
| [Play/Pause Overlay] |
| |
+--------------------------------------------------+
| [▶/⏸] [⏮] [⏭] ——●———————————————— [🔊] [⚙] [⛶]|
| 0:45 12:34 |
+--------------------------------------------------+
| |
| Video Title Goes Here |
| 1.2M views · 2 days ago |
| |
| [Avatar] Channel Name [Subscribe] |
| 125K subscribers |
| |
| [👍 12K] [👎] [Share] [Download] [Save] [•••] |
| |
| [Show Description ▼] |
+--------------------------------------------------+
播放器控件：
- 播放/暂停：切换播放状态
- 跳转按钮：向后/向前跳转 10 秒
- 进度条：拖动到任意位置，并显示缓冲进度
- 音量：滑块控制、静音开关
- 设置：画质、速度、字幕
- 全屏：切换全屏模式
其他功能：
- 一段时间无操作后自动隐藏控件
- 键盘快捷键
- 画中画模式
- 字幕开关
- 播放列表导航
示例 11：结账流程
多步骤流程：
Step 1: Cart → Step 2: Shipping → Step 3: Payment → Step 4: Review → Confirmation
支付步骤线框图：
+--------------------------------------------------+
| [Logo] [Help] |
+--------------------------------------------------+
| [✓] Cart [✓] Shipping [●] Payment [ ] Review |
+--------------------------------------------------+
| |
| Payment Method |
| (•) Credit Card |
| ( ) PayPal |
| ( ) Apple Pay |
| |
| Card Number |
| [____-____-____-____] [VISA] |
| |
| Expiry Date CVV |
| [MM/YY] [___] [?] |
| |
| Cardholder Name |
| [_____________________________] |
| |
| Billing Address |
| [ ] Same as shipping address |
| |
| [Apply Promo Code ▼] |
| |
| +--------------------------------------------+ |
| | Order Summary | |
| | Subtotal: $XX.XX | |
| | Shipping: $X.XX | |
| | Tax: $X.XX | |
| | ---------------------------------------- | |
| | Total: $XX.XX | |
| +--------------------------------------------+ |
| |
| [< Back to Shipping] [Continue to Review >] |
+--------------------------------------------------+
安全与信任元素：
- SSL 徽章/锁形图标
- 显示可接受的支付方式
- 安全说明/保障
- 保存支付信息选项（如果已登录）
示例 12：常见问题/帮助中心
布局：
+--------------------------------------------------+
| Logo Products Resources Support [Sign In] |
+--------------------------------------------------+
| |
| How can we help you? |
| [Search for help topics... ] [Search] |
| |
| Popular Topics |
| +-------------+ +-------------+ +-------------+|
| | [Icon] | | [Icon] | | [Icon] ||
| | Getting | | Billing & | | Technical ||
| | Started | | Account | | Support ||
| +-------------+ +-------------+ +-------------+|
| |
| Frequently Asked Questions |
| |
| [▼] How do I reset my password? |
| To reset your password, click on... |
| |
| [>] How do I update my billing information? |
| |
| [>] What payment methods do you accept? |
| |
| [>] How do I cancel my subscription? |
| |
| [>] How do I contact customer support? |
| |
| [Browse All Articles] |
| |
| Still need help? |
| [Contact Support] or [Community Forum] |
+--------------------------------------------------+
交互元素：
- 搜索：自动建议相关文章
- 类别卡片：链接到筛选后的视图
- FAQ 折叠面板：展开/收起答案
- 相关文章：查看 FAQ 后显示
- 有用性投票：“这有帮助吗？是/否”
示例 13：带操作的数据表格
复杂表格界面：
+--------------------------------------------------+
| [+ New Item] [Search: _____] [Filter▼]|
+--------------------------------------------------+
| [ ] | Name | Status | Date | Actions |
+--------------------------------------------------+
| [✓] | Item Alpha | Active | 01/15/24 | [•••] |
| [ ] | Item Beta | Pending | 01/16/24 | [•••] |
| [✓] | Item Gamma | Active | 01/17/24 | [•••] |
| [ ] | Item Delta | Inactive| 01/18/24 | [•••] |
| [ ] | Item Echo | Active | 01/19/24 | [•••] |
+--------------------------------------------------+
| Bulk Actions: [Delete] [Export] [Change Status] |
| |
| Showing 5 of 127 items [< 1 2 3 4 5 >] |
+--------------------------------------------------+
注释：
- 复选框：用于批量操作的多选
- 列标题：可点击排序
- 状态：使用颜色编码的徽章
- 操作菜单：编辑、复制、删除、查看详情
- 搜索：实时筛选表格
- 筛选器：包含多个条件的下拉菜单
- 分页：标准分页控件
响应式策略：
- 桌面端：完整表格视图
- 平板端：横向滚动，或隐藏不太重要的列
- 移动端：基于卡片的视图，展示关键信息
示例 14：模态对话框
确认模态框：
+------------------------------+
| [X]|
| Delete Item? |
| |
| Are you sure you want to |
| delete "Item Name"? This |
| action cannot be undone. |
| |
| [Cancel] [Delete] |
+------------------------------+
表单模态框：
+------------------------------+
| Add New Item [X]|
+------------------------------+
| |
| Item Name |
| [_______________________] |
| |
| Category |
| [Select category ▼] |
| |
| Description |
| [_______________________] |
| [_______________________] |
| [_______________________] |
| |
| [ ] Mark as featured |
| |
| [Cancel] [Add Item] |
+------------------------------+
模态框最佳实践：
- 使用遮罩层／背景遮罩来集中注意力
- 提供明确的关闭方式（X 按钮、“取消”、点击外部）
- 合理放置操作按钮
- 支持键盘操作（按 ESC 关闭，使用 Tab 导航）
- 限制焦点范围（使焦点保持在模态框内）
- 避免在模态框中嵌套模态框
示例 15：移动端导航模式
汉堡菜单：
+-------------------+
| [☰] Logo [🔍] |
+-------------------+
| |
| Main Content |
| |
+-------------------+
[Menu Open State]
+-------------------+
| [✕] Menu |
+-------------------+
| Home |
| Products |
| About |
| Contact |
| Account |
+-------------------+
标签栏导航（底部）：
+-------------------+
| |
| Content Area |
| |
+-------------------+
| [🏠] [🔍] [+] |
| Home Search Add |
| |
| [♥] [👤] |
| Saved Profile |
+-------------------+
标签栏最佳实践：
- 设置 3-5 个主要目的地
- 使用图标和标签以便识别
- 明确显示当前选中状态
- 不要隐藏主要操作
- 固定在底部
结论
线框图是 UX 设计流程中的一项关键技能。它能帮助快速探索创意，以最小投入验证概念，促进利益相关者之间的清晰沟通，并为视觉设计和开发打下坚实基础。
要点：
- 根据设计流程所处阶段选择合适的保真度
- 优先关注结构和功能，再考虑美观
- 根据反馈和测试进行迭代
- 根据自身需求和团队情况选择合适的工具
- 清晰记录交互和规范
- 从一开始就考虑无障碍性
- 在整个过程中让利益相关者和用户参与进来
掌握线框图技巧并遵循最佳实践，能帮助你打造更有效的设计、减少高成本的修改，并提供更出色的用户体验。
评论
支持 Markdown