wireframing
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseWireframing Skill
线框图设计技能
Table of Contents
目录
When to Use This Skill
何时使用该技能
Wireframing is essential during various phases of product development and design:
线框图在产品开发与设计的多个阶段都至关重要：
Early Product Discovery
早期产品探索阶段
- Requirements gathering: Visualize stakeholder ideas and requirements
- Concept exploration: Quickly test multiple design directions
- Feasibility assessment: Identify technical constraints early
- Scope definition: Define feature sets and functionality boundaries
- 需求收集：将利益相关者的想法和需求可视化
- 概念探索：快速测试多种设计方向
- 可行性评估：尽早识别技术约束
- 范围定义：确定功能集与功能边界
Design Process
设计流程阶段
- Information architecture: Structure content and navigation hierarchies
- Layout exploration: Test different arrangements of UI elements
- User flow mapping: Visualize user journeys through the product
- Interaction design: Define how users interact with interface elements
- 信息架构：构建内容与导航层级
- 布局探索：测试UI元素的不同排列方式
- 用户流程映射：可视化用户在产品中的旅程
- 交互设计：定义用户与界面元素的交互方式
Collaboration and Communication
协作与沟通阶段
- Stakeholder alignment: Get buy-in before detailed design work
- Developer handoff: Communicate functionality and structure
- User testing: Validate concepts without expensive high-fidelity work
- Design documentation: Create reference materials for the team
- 利益相关者对齐：在开展详细设计工作前获得认可
- 开发交接：传达功能与结构信息
- 用户测试：无需高成本高保真工作即可验证概念
- 设计文档：为团队创建参考资料
Iteration and Refinement
迭代与优化阶段
- Design critique sessions: Focus feedback on structure not aesthetics
- Rapid prototyping: Test ideas quickly with minimal investment
- A/B testing concepts: Compare different approaches efficiently
- Design system foundation: Establish patterns before visual design
- 设计评审会议：将反馈聚焦于结构而非美学
- 快速原型制作：以最小投入快速测试想法
- A/B测试概念：高效对比不同方案
- 设计系统基础：在视觉设计前建立模式
Core Concepts
核心概念
Low Fidelity vs High Fidelity
低保真 vs 高保真
Low Fidelity Wireframes
Characteristics:
- Basic shapes and placeholders (boxes, lines, simple text)
- Grayscale or monochromatic color schemes
- Minimal detail and visual polish
- Focus on structure and layout
- Quick to create and modify
- Often hand-drawn or using basic digital tools
When to use:
- Early conceptual phases
- Rapid iteration and exploration
- Stakeholder workshops and brainstorming
- When you need quick feedback on structure
- Budget or time constraints
Advantages:
- Fast creation and iteration
- Low investment reduces attachment to ideas
- Encourages focus on functionality
- Accessible to non-designers
- Reduces cognitive load during review
High Fidelity Wireframes
Characteristics:
- Detailed UI elements and components
- Refined spacing and alignment
- Actual or representative content
- Interactive elements clearly defined
- May include real images and copy
- Closer to final design
When to use:
- After concept validation
- Developer handoff preparation
- Detailed user testing
- When precise specifications are needed
- Stakeholder presentations requiring polish
Advantages:
- Clear communication of intent
- Better for usability testing
- Serves as development reference
- Identifies edge cases and details
- Reduces ambiguity in implementation
低保真线框图
特征：
- 基础形状与占位符（方框、线条、简单文本）
- 灰度或单色配色方案
- 细节与视觉润色极少
- 聚焦于结构与布局
- 创建与修改速度快
- 通常为手绘或使用基础数字工具制作
适用场景：
- 早期概念阶段
- 快速迭代与探索
- 利益相关者研讨会与头脑风暴
- 需要快速获取结构反馈时
- 预算或时间有限时
优势：
- 创建与迭代速度快
- 低投入降低对想法的执念
- 鼓励聚焦于功能
- 非设计师也能轻松上手
- 减少评审时的认知负担
高保真线框图
特征：
- 详细的UI元素与组件
- 经过优化的间距与对齐方式
- 真实或代表性内容
- 交互元素定义清晰
- 可能包含真实图片与文案
- 更接近最终设计
适用场景：
- 概念验证后
- 准备开发交接时
- 详细用户测试
- 需要精确规范时
- 需展示给利益相关者的 polished 演示
优势：
- 清晰传达设计意图
- 更适合可用性测试
- 可作为开发参考
- 识别边缘情况与细节
- 减少实现中的歧义
The Wireframing Spectrum
线框图光谱
Sketches → Low-Fi → Mid-Fi → High-Fi → Mockups → Prototypes
↓ ↓ ↓ ↓ ↓ ↓
Paper Boxes & Details Refined Visual Interactive
notes labels added content design behavior草图 → 低保真 → 中保真 → 高保真 → 视觉稿 → 原型
↓ ↓ ↓ ↓ ↓ ↓
纸质 方框与 添加细 优化内 视觉设 交互式
笔记 标签 节 容 计 行为Fidelity Dimensions
保真度维度
Wireframes can vary in fidelity across multiple dimensions:
- Visual Fidelity: Level of visual detail and polish
- Content Fidelity: Real vs placeholder content
- Functional Fidelity: Interactive vs static
- Layout Fidelity: Precise vs approximate spacing
线框图可在多个维度上呈现不同的保真度：
- 视觉保真度：视觉细节与润色的程度
- 内容保真度：真实内容 vs 占位符内容
- 功能保真度：交互式 vs 静态
- 布局保真度：精确间距 vs 近似间距
Wireframe Types
线框图类型
1. Paper Sketches
1. 纸质草图
Description: Hand-drawn wireframes on paper or whiteboards
Use Cases:
- Brainstorming sessions
- Quick ideation
- Early concept exploration
- Collaborative workshops
- Personal thinking process
Tools:
- Pen and paper
- Whiteboards
- Sticky notes
- Dot grid notebooks
- Stencils and templates
Techniques:
- Quick sketching with basic shapes
- Crazy 8's method (8 ideas in 8 minutes)
- Thumbnail sketches for multiple concepts
- Annotation with arrows and notes
- Photograph for digital archiving
Advantages:
- Zero learning curve
- No tool barriers
- Encourages creativity
- Natural for collaboration
- Portable and accessible
Limitations:
- Not easily shared remotely
- Difficult to iterate digitally
- Lacks precision
- Hard to maintain version control
- Not suitable for developer handoff
描述：在纸张或白板上手绘的线框图
适用场景：
- 头脑风暴会议
- 快速构思
- 早期概念探索
- 协作研讨会
- 个人思考过程
工具：
- 笔和纸
- 白板
- 便利贴
- 点阵笔记本
- 模板与模具
技巧：
- 用基础形状快速草图
- Crazy 8's 方法（8分钟内生成8个想法）
- 缩略图草图呈现多个概念
- 用箭头与注释标注
- 拍照进行数字存档
优势：
- 无学习曲线
- 无工具壁垒
- 鼓励创造力
- 适合自然协作
- 便携且易获取
局限性：
- 远程分享不便
- 难以进行数字迭代
- 缺乏精度
- 版本控制困难
- 不适合开发交接
2. Low-Fidelity Digital Wireframes
2. 低保真数字线框图
Description: Simple digital wireframes using basic shapes and minimal styling
Visual Characteristics:
- Boxes, lines, and simple geometric shapes
- Grayscale color palette
- Placeholder text (Lorem ipsum or FPO)
- Generic icons (squares with X's for images)
- Minimal hierarchy through size and weight
Content:
- "Hero Image" or gray boxes for visuals
- Lorem ipsum or repeated text
- Generic labels and headings
- Simplified navigation structures
Common Elements:
- Header placeholders
- Navigation bars (simple lines/boxes)
- Content blocks (rectangles)
- Button placeholders (outlined boxes)
- Form fields (lines or simple inputs)
- Footer areas
Best For:
- Exploring multiple layout options
- Testing information hierarchy
- Getting quick stakeholder feedback
- Validating user flows
- Design team discussions
描述：使用基础形状与极简样式制作的简单数字线框图
视觉特征：
- 方框、线条与简单几何形状
- 灰度调色板
- 占位符文本（Lorem ipsum 或 FPO）
- 通用图标（带X的方框代表图片）
- 通过大小与权重体现极简层级
内容：
- "Hero Image" 或灰色方框代表视觉元素
- Lorem ipsum 或重复文本
- 通用标签与标题
- 简化的导航结构
常见元素：
- 页眉占位符
- 导航栏（简单线条/方框）
- 内容块（矩形）
- 按钮占位符（轮廓方框）
- 表单字段（线条或简单输入框）
- 页脚区域
最佳适用场景：
- 探索多种布局选项
- 测试信息层级
- 快速获取利益相关者反馈
- 验证用户流程
- 设计团队讨论
3. Mid-Fidelity Wireframes
3. 中保真线框图
Description: More refined wireframes with moderate detail
Visual Characteristics:
- Actual UI component representations
- Refined spacing and alignment
- Typography hierarchy (different weights/sizes)
- Some real content mixed with placeholders
- Basic iconography
- Grid-based layouts
Content:
- Mix of real and placeholder text
- Actual headings and key copy
- Representative content length
- Realistic form labels
- Actual navigation items
Interactive Elements:
- Clear button states
- Form field types defined
- Dropdown indicators
- Link styling
- Active states indicated
Best For:
- User testing structure and flow
- Detailed stakeholder reviews
- Information architecture validation
- Content strategy alignment
- Pre-development planning
描述：经过更多优化、具备中等细节的线框图
视觉特征：
- 真实UI组件的呈现
- 优化的间距与对齐方式
- 排版层级（不同字重/字号）
- 真实内容与占位符混合
- 基础图标
- 基于网格的布局
内容：
- 真实文本与占位符文本混合
- 真实标题与关键文案
- 代表性内容长度
- 真实的表单标签
- 真实的导航项
交互元素：
- 清晰的按钮状态
- 表单字段类型已定义
- 下拉指示器
- 链接样式
- 已标注激活状态
最佳适用场景：
- 用户测试结构与流程
- 详细的利益相关者评审
- 信息架构验证
- 内容策略对齐
- 开发前规划
4. High-Fidelity Wireframes
4. 高保真线框图
Description: Detailed, polished wireframes that closely represent final design
Visual Characteristics:
- Precise spacing and measurements
- Refined typography system
- Real or high-quality placeholder content
- Detailed component states
- Accessibility considerations
- Responsive breakpoints shown
Content:
- Actual copy or near-final content
- Real images or high-quality stock photos
- Accurate data representations
- Proper content hierarchy
- Character count considerations
Annotations:
- Interaction specifications
- State descriptions
- Conditional logic
- Error handling
- Loading states
- Edge cases documented
Best For:
- Developer handoff
- Detailed usability testing
- Stakeholder sign-off
- Design system documentation
- Accessibility review
描述：详细、经过润色的线框图，与最终设计高度接近
视觉特征：
- 精确的间距与尺寸
- 优化的排版系统
- 真实或高质量的占位符内容
- 详细的组件状态
- 无障碍设计考量
- 响应式断点已展示
内容：
- 真实文案或接近最终的内容
- 真实图片或高质量库存照片
- 准确的数据呈现
- 合理的内容层级
- 字符数考量
标注：
- 交互规范
- 状态描述
- 条件逻辑
- 错误处理
- 加载状态
- 边缘情况已记录
最佳适用场景：
- 开发交接
- 详细可用性测试
- 利益相关者签字确认
- 设计系统文档
- 无障碍设计评审
5. Interactive Prototypes
5. 交互式原型
Description: Clickable wireframes that simulate user interactions
Capabilities:
- Page navigation
- Form interactions
- Modal and overlay behaviors
- Animations and transitions
- Conditional logic
- User input handling
Fidelity Levels:
- Low-fi interactive: Basic click-through
- Mid-fi interactive: Some conditional flows
- High-fi interactive: Complex behaviors and micro-interactions
Use Cases:
- Usability testing
- Stakeholder demonstrations
- User flow validation
- Interaction pattern testing
- Presentation to executives
Tools:
- Figma prototyping
- Axure RP
- Proto.io
- InVision
- Adobe XD
描述：可点击的线框图，模拟用户交互
功能：
- 页面导航
- 表单交互
- 模态框与浮层行为
- 动画与过渡效果
- 条件逻辑
- 用户输入处理
保真度层级：
- 低保真交互式：基础点击跳转
- 中保真交互式：部分条件流程
- 高保真交互式：复杂行为与微交互
适用场景：
- 可用性测试
- 利益相关者演示
- 用户流程验证
- 交互模式测试
- 向高管展示
工具：
- Figma 原型制作
- Axure RP
- Proto.io
- InVision
- Adobe XD
Information Architecture
信息架构
Sitemaps
站点地图
Purpose: Visual representation of website/app structure and hierarchy
Components:
- Pages/screens represented as nodes
- Hierarchical relationships
- Navigation pathways
- Content groupings
- User access levels
Types of Sitemaps:
- Hierarchical Sitemap:
Home
├── Products
│ ├── Category A
│ │ ├── Product 1
│ │ └── Product 2
│ └── Category B
│ ├── Product 3
│ └── Product 4
├── About
│ ├── Team
│ └── History
└── Contact- Sequential Sitemap: Linear flows (e.g., onboarding, checkout)
- Matrix Sitemap: Multiple paths to the same destination
- Organic Sitemap: User-generated or dynamic content structures
Best Practices:
- Use consistent notation and symbols
- Indicate page templates vs unique pages
- Show navigation types (global, utility, contextual)
- Document user permissions and access
- Include off-site links and integrations
- Version and date your sitemaps
目的：可视化网站/应用的结构与层级
组件：
- 页面/屏幕以节点形式呈现
- 层级关系
- 导航路径
- 内容分组
- 用户访问级别
站点地图类型：
- 层级式站点地图：
首页
├── 产品
│ ├── 分类A
│ │ ├── 产品1
│ │ └── 产品2
│ └── 分类B
│ ├── 产品3
│ └── 产品4
├── 关于我们
│ ├── 团队
│ └── 历史
└── 联系我们- 顺序式站点地图：线性流程（如引导页、结账流程）
- 矩阵式站点地图：同一目的地的多条路径
- 有机式站点地图：用户生成或动态内容结构
最佳实践：
- 使用一致的符号与标记
- 标注页面模板与独特页面
- 展示导航类型（全局、实用、上下文）
- 记录用户权限与访问规则
- 包含外部链接与集成
- 为站点地图添加版本与日期
Content Hierarchy
内容层级
Definition: Organization of content by importance and relationships
Principles:
- Visual Hierarchy:
- Size: Larger elements draw more attention
- Weight: Bold text creates emphasis
- Color: Contrast highlights importance
- Position: Top and left get noticed first
- White space: Breathing room adds prominence
- Information Hierarchy:
- Primary information: Main user goal
- Secondary information: Supporting details
- Tertiary information: Optional or contextual
- Metadata: System-level information
F-Pattern and Z-Pattern:
-
F-Pattern: Common reading pattern for text-heavy content
- Users scan horizontally across top
- Second horizontal scan lower down
- Vertical scan down left side
-
Z-Pattern: For less text-heavy, more visual content
- Top left to top right
- Diagonal to bottom left
- Bottom left to bottom right
Creating Clear Hierarchy:
- Establish clear content types (H1, H2, H3, body, captions)
- Use consistent spacing scales
- Group related information
- Apply the principle of proximity
- Limit hierarchy levels (typically 3-4 max)
- Test hierarchy by squinting (blur test)
定义：按重要性与关系组织内容
原则：
- 视觉层级：
- 大小：更大的元素更吸引注意力
- 字重：粗体文本创造强调效果
- 颜色：对比突出重要性
- 位置：顶部与左侧最先被注意到
- 留白：呼吸空间提升显著性
- 信息层级：
- 主要信息：用户核心目标
- 次要信息：支持性细节
- 三级信息：可选或上下文信息
- 元数据：系统级信息
F型模式与Z型模式：
-
F型模式：文本密集型内容的常见阅读模式
- 用户水平扫描顶部
- 第二次水平扫描位置更低
- 垂直扫描左侧
-
Z型模式：适用于文本较少、视觉性更强的内容
- 从左上到右上
- 对角线到左下
- 从左下到右下
创建清晰层级：
- 建立明确的内容类型（H1、H2、H3、正文、说明文字）
- 使用一致的间距比例
- 分组相关信息
- 应用接近性原则
- 限制层级数量（通常最多3-4级）
- 通过眯眼测试验证层级（模糊测试）
Card Sorting
卡片分类法
Purpose: Understand user mental models for content organization
Types:
- Open Card Sorting:
- Participants create their own categories
- Useful for discovering natural groupings
- Best for new products or redesigns
- Closed Card Sorting:
- Participants sort into predefined categories
- Validates existing structure
- Tests category labels
- Hybrid Card Sorting:
- Predefined categories with option to create new ones
- Balances structure with discovery
Process:
- Identify content items to be sorted
- Create cards (physical or digital)
- Recruit representative users
- Conduct sorting sessions
- Analyze results for patterns
- Iterate on information architecture
Tools:
- OptimalSort
- UserZoom
- Miro (virtual card sorting)
- Physical index cards
目的：理解用户对内容组织的心智模型
类型：
- 开放式卡片分类：
- 参与者创建自己的分类
- 有助于发现自然分组
- 最适合新产品或重设计
- 封闭式卡片分类：
- 参与者将内容归入预定义分类
- 验证现有结构
- 测试分类标签
- 混合式卡片分类：
- 预定义分类，同时允许创建新分类
- 在结构与发现之间取得平衡
流程：
- 确定要分类的内容项
- 创建卡片（物理或数字）
- 招募代表性用户
- 开展分类会话
- 分析结果中的模式
- 迭代信息架构
工具：
- OptimalSort
- UserZoom
- Miro（虚拟卡片分类）
- 实体索引卡
User Flows
用户流程
Task Flows
任务流程
Definition: Step-by-step paths users take to complete specific tasks
Components:
- Entry point
- Decision points
- Actions/steps
- System responses
- Success criteria
- Error states
Flow Diagram Elements:
- Rectangles: Screens or pages
- Diamonds: Decision points
- Ovals: Entry/exit points
- Arrows: Flow direction
- Annotations: Additional context
Example Task Flow Structure:
[Start] → [Login Page] → {Valid Credentials?}
↓ Yes ↓ No
[Dashboard] [Error Message]
↓ ↓
[Success] [Retry Login]Creating Effective Task Flows:
- Define the user goal clearly
- Map all possible paths (happy path and edge cases)
- Identify decision points
- Document system responses
- Include error handling
- Note any assumptions
- Test with actual user scenarios
定义：用户完成特定任务的分步路径
组件：
- 入口点
- 决策点
- 动作/步骤
- 系统响应
- 成功标准
- 错误状态
流程图元素：
- 矩形：屏幕或页面
- 菱形：决策点
- 椭圆形：入口/出口点
- 箭头：流程方向
- 标注：额外上下文
示例任务流结构：
[开始] → [登录页面] → {凭证有效？}
↓ 是 ↓ 否
[仪表板] [错误提示]
↓ ↓
[成功] [重试登录]创建有效任务流：
- 明确定义用户目标
- 绘制所有可能路径（理想路径与边缘情况）
- 识别决策点
- 记录系统响应
- 包含错误处理
- 标注所有假设
- 用真实用户场景测试
User Journeys
用户旅程
Definition: Holistic view of user experience across touchpoints over time
Difference from Task Flows:
- Broader scope (multiple tasks/sessions)
- Includes emotional journey
- Considers all touchpoints
- Maps user thoughts and feelings
- Identifies pain points and opportunities
Journey Map Components:
- Persona: Who is the user?
- Scenario: What are they trying to accomplish?
- Phases: Major stages of the journey
- Actions: What the user does
- Touchpoints: Where interactions occur
- Thoughts: User mental model
- Emotions: User feelings (often visualized as a graph)
- Pain Points: Frustrations and obstacles
- Opportunities: Areas for improvement
Example Journey Phases (E-commerce):
- Awareness: Discover product need
- Research: Compare options
- Purchase: Complete transaction
- Delivery: Receive product
- Usage: Experience product
- Support: Get help if needed
- Loyalty: Repeat purchase or recommend
定义：跨触点、随时间变化的用户体验全景视图
与任务流的区别：
- 范围更广（多个任务/会话）
- 包含情感旅程
- 考虑所有触点
- 绘制用户想法与感受
- 识别痛点与机会
旅程地图组件：
- 用户画像：用户是谁？
- 场景：他们试图完成什么？
- 阶段：旅程的主要阶段
- 动作：用户做了什么
- 触点：交互发生的地点
- 想法：用户的心智模型
- 情感：用户的感受（通常以图表可视化）
- 痛点：挫折与障碍
- 机会：改进空间
示例旅程阶段（电商）：
- 认知：发现产品需求
- 研究：对比选项
- 购买：完成交易
- 交付：收到产品
- 使用：体验产品
- 支持：需要帮助时获取支持
- 忠诚：重复购买或推荐
Flowcharts
流程图
Purpose: Visualize logic, processes, and system behavior
Standard Flowchart Symbols:
- Terminator (oval): Start/End
- Process (rectangle): Action or step
- Decision (diamond): Yes/No question
- Input/Output (parallelogram): Data entry or display
- Connector (circle): Link to another part of flow
- Document (wavy bottom rectangle): Document or report
Types of Flowcharts for UX:
- User Flowchart: User's path through interface
- System Flowchart: Backend logic and processes
- Swimlane Flowchart: Multiple actors or systems
- State Diagram: Object states and transitions
Best Practices:
- Use standard symbols consistently
- Flow top-to-bottom, left-to-right
- Minimize crossing lines
- Label all decision branches clearly
- Keep flows on one page when possible
- Use connectors for complex flows
- Include a legend if needed
目的：可视化逻辑、流程与系统行为
标准流程图符号：
- 终止符（椭圆形）：开始/结束
- 流程（矩形）：动作或步骤
- 决策（菱形）：是/否问题
- 输入/输出（平行四边形）：数据输入或显示
- 连接器（圆形）：链接到流程的另一部分
- 文档（底部波浪形的矩形）：文档或报告
UX常用流程图类型：
- 用户流程图：用户在界面中的路径
- 系统流程图：后端逻辑与流程
- 泳道流程图：多个参与者或系统
- 状态图：对象状态与转换
最佳实践：
- 始终使用标准符号
- 流程从上到下、从左到右
- 尽量减少交叉线条
- 清晰标注所有决策分支
- 尽可能将流程放在一页
- 对复杂流程使用连接器
- 必要时包含图例
Wireflows
线框流程图
Definition: Combination of wireframes and user flows
Format:
- Actual wireframe screens connected by arrows
- Shows both interface design and flow logic
- Annotations on transitions and interactions
When to Use:
- Complex interaction patterns
- Multi-step processes
- Conditional navigation
- Developer handoff for flows
- Documenting interactive prototypes
Creating Wireflows:
- Create key wireframes for each step
- Arrange in logical sequence
- Connect with arrows showing transitions
- Annotate triggers and conditions
- Include alternative paths
- Note error states and edge cases
定义：线框图与用户流程的结合
格式：
- 真实线框图屏幕用箭头连接
- 同时展示界面设计与流程逻辑
- 标注过渡与交互
适用场景：
- 复杂交互模式
- 多步骤流程
- 条件导航
- 面向开发的流程交接
- 记录交互式原型
创建线框流程图：
- 为每个步骤创建关键线框图
- 按逻辑顺序排列
- 用箭头连接展示过渡
- 标注触发条件
- 包含备选路径
- 标注错误状态与边缘情况
Wireframe Elements
线框图元素
Layout Components
布局组件
Grid Systems:
- 12-column grid (most common for responsive)
- 8-column grid (simpler layouts)
- 16-column grid (complex, detailed layouts)
- Baseline grid (vertical rhythm)
Container Types:
- Fixed width containers
- Fluid containers (full width)
- Constrained containers (max-width)
Spacing Systems:
- 4px or 8px base unit
- Consistent padding and margins
- Vertical rhythm for readability
网格系统：
- 12列网格（响应式设计最常用）
- 8列网格（更简单的布局）
- 16列网格（复杂、详细的布局）
- 基线网格（垂直韵律）
容器类型：
- 固定宽度容器
- 流式容器（全宽）
- 受限容器（最大宽度）
间距系统：
- 4px或8px基础单位
- 一致的内边距与外边距
- 提升可读性的垂直韵律
Navigation Elements
导航元素
Primary Navigation:
- Top horizontal navigation bar
- Hamburger/mobile menu
- Mega menus
- Sidebar navigation
- Tab navigation
Secondary Navigation:
- Breadcrumbs
- Pagination
- Filters and sorting
- In-page navigation (anchor links)
- Related links
Utility Navigation:
- User account menu
- Cart/shopping bag
- Search
- Language/region selector
- Settings and preferences
主导航：
- 顶部水平导航栏
- 汉堡/移动端菜单
- 巨型菜单
- 侧边栏导航
- 标签导航
次要导航：
- 面包屑
- 分页
- 筛选与排序
- 页内导航（锚点链接）
- 相关链接
实用导航：
- 用户账户菜单
- 购物车
- 搜索
- 语言/地区选择器
- 设置与偏好
Content Elements
内容元素
Typography Placeholders:
- Headlines (H1, H2, H3, etc.)
- Body text (paragraphs)
- Lists (bulleted, numbered)
- Captions and labels
- Links and CTAs
Media Placeholders:
- Images (box with X or diagonal lines)
- Video players (box with play icon)
- Icons (simple shapes or actual icons)
- Maps (box labeled "MAP")
- Charts and graphs
Form Elements:
- Text inputs
- Text areas
- Checkboxes
- Radio buttons
- Dropdowns/select menus
- Date pickers
- File uploads
- Submit buttons
排版占位符：
- 标题（H1、H2、H3等）
- 正文（段落）
- 列表（项目符号、编号）
- 说明文字与标签
- 链接与CTA
媒体占位符：
- 图片（带X或对角线的方框）
- 视频播放器（带播放图标的方框）
- 图标（简单形状或真实图标）
- 地图（标注为“MAP”的方框）
- 图表与图形
表单元素：
- 文本输入框
- 文本区域
- 复选框
- 单选按钮
- 下拉/选择菜单
- 日期选择器
- 文件上传
- 提交按钮
Interactive Elements
交互元素
Buttons:
- Primary buttons (filled)
- Secondary buttons (outlined)
- Tertiary buttons (text only)
- Icon buttons
- Button groups
- Toggle buttons
Links:
- Inline text links
- Standalone links
- Navigation links
- Footer links
Toggles and Switches:
- On/off toggles
- Checkbox toggles
- Segmented controls
Cards:
- Content cards
- Product cards
- Profile cards
- Interactive cards
按钮：
- 主按钮（填充样式）
- 次按钮（轮廓样式）
- 三级按钮（仅文本）
- 图标按钮
- 按钮组
- 切换按钮
链接：
- 行内文本链接
- 独立链接
- 导航链接
- 页脚链接
切换开关：
- 开/关切换
- 复选框切换
- 分段控件
卡片：
- 内容卡片
- 产品卡片
- 资料卡片
- 交互式卡片
Feedback Elements
反馈元素
Status Indicators:
- Loading spinners
- Progress bars
- Success messages
- Error messages
- Warning messages
- Informational messages
Modals and Overlays:
- Modal dialogs
- Lightboxes
- Tooltips
- Popovers
- Drawers/side panels
状态指示器：
- 加载 spinner
- 进度条
- 成功提示
- 错误提示
- 警告提示
- 信息提示
模态框与浮层：
- 模态对话框
- 灯箱
- 工具提示
- 弹出框
- 抽屉/侧边面板
Annotation and Specification
标注与规范
Types of Annotations
标注类型
1. Functional Annotations:
- What happens when user clicks/taps
- Form validation rules
- Dynamic content updates
- Conditional logic
Example:
[Button: "Add to Cart"]
→ On click: Add item to cart
→ Update cart count in header
→ Show success message
→ Animate button (scale feedback)2. Content Annotations:
- Character limits
- Content sources
- Placeholder vs final content
- Content rules and logic
Example:
[Product Title]
→ Max 60 characters
→ Source: Product database, title field
→ Truncate with ellipsis if exceeds limit3. Behavioral Annotations:
- Hover states
- Active states
- Disabled states
- Loading states
- Error states
4. Technical Annotations:
- API endpoints
- Data requirements
- Performance considerations
- Third-party integrations
5. Accessibility Annotations:
- Alt text requirements
- ARIA labels
- Focus order
- Keyboard interactions
- Screen reader behavior
1. 功能标注：
- 用户点击/触摸时发生的行为
- 表单验证规则
- 动态内容更新
- 条件逻辑
示例：
[按钮：“加入购物车”]
→ 点击时：将商品加入购物车
→ 更新页眉中的购物车数量
→ 显示成功提示
→ 按钮动画（缩放反馈）2. 内容标注：
- 字符限制
- 内容来源
- 占位符 vs 最终内容
- 内容规则与逻辑
示例：
[产品标题]
→ 最多60个字符
→ 来源：产品数据库，标题字段
→ 超出限制时用省略号截断3. 行为标注：
- 悬停状态
- 激活状态
- 禁用状态
- 加载状态
- 错误状态
4. 技术标注：
- API端点
- 数据需求
- 性能考量
- 第三方集成
5. 无障碍标注：
- 替代文本要求
- ARIA标签
- 焦点顺序
- 键盘交互
- 屏幕阅读器行为
Annotation Methods
标注方法
Numbered Callouts:
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 hoverInline Notes:
- Annotations directly on or near elements
- Use leader lines for clarity
- Color-code by annotation type
Separate Specification Document:
- Detailed specifications separate from wireframes
- Reference wireframes by screen name/number
- Include user stories and acceptance criteria
Interactive Annotations (in prototyping tools):
- Hover to reveal notes
- Click to expand details
- Linked specification docs
编号标注：
带编号标记的线框图：
1. Logo 链接到首页
2. 搜索框点击后展开
3. 购物车显示商品数量
4. 用户菜单悬停时下拉内联注释：
- 直接在元素上或附近添加注释
- 用引线确保清晰
- 按标注类型用颜色区分
单独的规范文档：
- 与线框图分离的详细规范
- 按屏幕名称/编号引用线框图
- 包含用户故事与验收标准
交互式标注（在原型工具中）：
- 悬停显示注释
- 点击展开详细信息
- 链接到规范文档
Writing Clear Annotations
编写清晰的标注
Best Practices:
- Be specific and unambiguous
- Use consistent terminology
- Focus on behavior, not implementation
- Include edge cases
- Reference design patterns or examples
- Specify what, not how (unless critical)
Poor Annotation:
"Button does something when clicked"
Good Annotation:
"On click: Submit form data. If validation passes, navigate to confirmation page. If validation fails, display inline error messages next to invalid fields and scroll to first error."
最佳实践：
- 具体且无歧义
- 使用一致的术语
- 聚焦于行为而非实现
- 包含边缘情况
- 参考设计模式或示例
- 说明“做什么”而非“怎么做”（除非关键）
糟糕的标注：
“按钮点击后会有反应”
优秀的标注：
“点击时：提交表单数据。如果验证通过，跳转到确认页面。如果验证失败，在无效字段旁显示内联错误提示，并滚动到第一个错误位置。”
Specifications for Developers
面向开发者的规范
What to Include:
- Layout Specifications:
- Spacing values (padding, margins)
- Grid columns and gutters
- Breakpoint behaviors
- Alignment rules
- Component Specifications:
- States (default, hover, active, disabled, error)
- Size variations
- Content rules
- Accessibility requirements
- Interaction Specifications:
- User triggers (click, tap, hover, swipe)
- System responses
- Animation timing and easing
- Transition behaviors
- Data Specifications:
- Required vs optional data
- Data formats
- Default values
- Validation rules
- Conditional Logic:
- If/then scenarios
- User permission levels
- Feature flags
- Personalization rules
需包含的内容：
- 布局规范：
- 间距值（内边距、外边距）
- 网格列与 gutter
- 断点行为
- 对齐规则
- 组件规范：
- 状态（默认、悬停、激活、禁用、错误）
- 尺寸变体
- 内容规则
- 无障碍需求
- 交互规范：
- 用户触发方式（点击、触摸、悬停、滑动）
- 系统响应
- 动画时长与缓动效果
- 过渡行为
- 数据规范：
- 必填 vs 可选数据
- 数据格式
- 默认值
- 验证规则
- 条件逻辑：
- 若/则场景
- 用户权限级别
- 功能开关
- 个性化规则
Tools and Technologies
工具与技术
Paper and Physical Tools
纸质与物理工具
Pen and Paper:
- Best for: Quick ideation, brainstorming
- Pros: Immediate, tactile, accessible
- Cons: Hard to share remotely, limited iteration
Whiteboards:
- Best for: Collaborative sessions, workshops
- Pros: Easy to erase and modify, great for groups
- Cons: Not portable, requires photography for archiving
Sticky Notes:
- Best for: Card sorting, affinity mapping, flow creation
- Pros: Flexible, tactile, easy to reorganize
- Cons: Temporary, requires physical space
Wireframe Notebooks and Templates:
- Dot grid notebooks
- Pre-printed device templates
- UI stencils
- Pros: Structured, professional-looking
- Cons: Limited flexibility
笔和纸：
- 最佳用途：快速构思、头脑风暴
- 优势：即时、有触感、易获取
- 劣势：远程分享不便、迭代受限
白板：
- 最佳用途：协作会议、研讨会
- 优势：易擦改、适合团队
- 劣势：不便携、需拍照存档
便利贴：
- 最佳用途：卡片分类、亲和图、流程创建
- 优势：灵活、有触感、易重新组织
- 劣势：临时、需要物理空间
线框图笔记本与模板：
- 点阵笔记本
- 预印设备模板
- UI模具
- 优势：结构化、专业外观
- 劣势：灵活性有限
Low-Fidelity Digital Tools
低保真数字工具
Balsamiq:
- Description: Sketch-style wireframing tool
- Best for: Low-fi wireframes, rapid prototyping
- Key features:
- Intentionally "sketchy" aesthetic
- Large component library
- Quick to create mockups
- Built-in UI components
- Pricing: Subscription-based
- Learning curve: Low
Whimsical:
- Description: Lightweight diagramming and wireframing
- Best for: Flowcharts, wireframes, mind maps
- Key features:
- Fast performance
- Clean, minimal interface
- Real-time collaboration
- Integrated flowcharts and wireframes
- Pricing: Freemium
- Learning curve: Very low
Miro:
- Description: Digital whiteboard platform
- Best for: Workshops, brainstorming, collaborative wireframing
- Key features:
- Infinite canvas
- Wireframe templates
- Real-time collaboration
- Integration with other tools
- Pricing: Freemium
- Learning curve: Low
Balsamiq：
- 描述：草图风格线框图工具
- 最佳用途：低保真线框图、快速原型制作
- 核心功能：
- 刻意“草图感”的美学
- 庞大的组件库
- 快速创建原型
- 内置UI组件
- 定价：订阅制
- 学习曲线：低
Whimsical：
- 描述：轻量级图表与线框图工具
- 最佳用途：流程图、线框图、思维导图
- 核心功能：
- 性能快速
- 简洁、极简界面
- 实时协作
- 集成流程图与线框图
- 定价：免费增值制
- 学习曲线：极低
Miro：
- 描述：数字白板平台
- 最佳用途：研讨会、头脑风暴、协作线框图
- 核心功能：
- 无限画布
- 线框图模板
- 实时协作
- 与其他工具集成
- 定价：免费增值制
- 学习曲线：低
Professional Wireframing Tools
专业线框图工具
Figma:
- Description: Collaborative interface design tool
- Best for: All fidelity levels, design systems, prototyping
- Key features:
- Browser-based, cross-platform
- Real-time collaboration
- Component libraries
- Advanced prototyping
- Design systems support
- Developer handoff
- Version history
- Pricing: Freemium (free for individual use)
- Learning curve: Medium
- Wireframing approach:
- Use Auto Layout for responsive designs
- Create component libraries
- Leverage community wireframe kits
- Use variants for component states
Sketch:
- Description: Vector-based design tool (macOS only)
- Best for: High-fidelity wireframes, UI design
- Key features:
- Symbols and libraries
- Plugin ecosystem
- Prototyping capabilities
- Developer handoff
- Pricing: Subscription
- Learning curve: Medium
- Limitations: macOS only, limited collaboration
Adobe XD:
- Description: UI/UX design and prototyping tool
- Best for: High-fidelity wireframes, interactive prototypes
- Key features:
- Components and states
- Advanced prototyping
- Auto-animate
- Voice prototyping
- Design systems
- Pricing: Included with Creative Cloud
- Learning curve: Medium
Axure RP:
- Description: Professional prototyping and specification tool
- Best for: Complex interactions, detailed specifications
- Key features:
- Advanced conditional logic
- Dynamic content
- Variables and expressions
- Detailed documentation generation
- Team collaboration
- Pricing: License-based (expensive)
- Learning curve: High
- Best for: Enterprise, complex applications
Figma：
- 描述：协作式界面设计工具
- 最佳用途：所有保真度层级、设计系统、原型制作
- 核心功能：
- 基于浏览器，跨平台
- 实时协作
- 组件库
- 高级原型制作
- 设计系统支持
- 开发交接
- 版本历史
- 定价：免费增值制（个人使用免费）
- 学习曲线：中等
- 线框图方法：
- 使用 Auto Layout 创建响应式设计
- 创建组件库
- 利用社区线框图套件
- 用变体管理组件状态
Sketch：
- 描述：基于矢量的设计工具（仅支持macOS）
- 最佳用途：高保真线框图、UI设计
- 核心功能：
- 符号与库
- 插件生态系统
- 原型制作功能
- 开发交接
- 定价：订阅制
- 学习曲线：中等
- 局限性：仅支持macOS、协作功能有限
Adobe XD：
- 描述：UI/UX设计与原型制作工具
- 最佳用途：高保真线框图、交互式原型
- 核心功能：
- 组件与状态
- 高级原型制作
- 自动动画
- 语音原型
- 设计系统
- 定价：包含在Creative Cloud中
- 学习曲线：中等
Axure RP：
- 描述：专业原型制作与规范工具
- 最佳用途：复杂交互、详细规范
- 核心功能：
- 高级条件逻辑
- 动态内容
- 变量与表达式
- 详细文档生成
- 团队协作
- 定价：授权制（价格较高）
- 学习曲线：高
- 最佳适用场景：企业、复杂应用
Specialized Tools
专用工具
OmniGraffle (macOS/iOS):
- Best for: Diagrams, sitemaps, user flows
- Strengths: Powerful diagramming, beautiful output
- Limitations: macOS/iOS only
Lucidchart:
- Best for: Flowcharts, sitemaps, system diagrams
- Strengths: Collaboration, integrations
- Use case: Information architecture documentation
FlowMapp:
- Best for: Sitemaps and user flows
- Strengths: Purpose-built for IA work
- Features: Visual sitemaps, user flow creation
Overflow:
- Best for: User flow diagrams from designs
- Strengths: Imports from design tools, creates beautiful flows
- Use case: Documentation and presentation
OmniGraffle（macOS/iOS）：
- 最佳用途：图表、站点地图、用户流程
- 优势：强大的图表功能、美观的输出
- 局限性：仅支持macOS/iOS
Lucidchart：
- 最佳用途：流程图、站点地图、系统图表
- 优势：协作、集成
- 适用场景：信息架构文档
FlowMapp：
- 最佳用途：站点地图与用户流程
- 优势：专为IA工作设计
- 功能：可视化站点地图、用户流程创建
Overflow：
- 最佳用途：从设计中生成用户流程图
- 优势：从设计工具导入、生成精美的流程
- 适用场景：文档与演示
Code-Based Wireframing
基于代码的线框图
HTML/CSS Wireframes:
- When to use: When wireframes should be functional
- Pros: Truly responsive, testable, can become production code
- Cons: Slower, requires coding skills
Frameworks for Wireframing:
- Tailwind CSS: Utility-first CSS framework
- Bootstrap: Component library
- Material UI: Google's design system
- Semantic UI: Human-friendly HTML
Example Tools:
- CodePen: Quick prototyping
- JSFiddle: Interactive coding
- StackBlitz: Full development environment
HTML/CSS线框图：
- 适用场景：线框图需要具备功能性时
- 优势：真正响应式、可测试、可转化为生产代码
- 劣势：速度慢、需要编码技能
线框图框架：
- Tailwind CSS：实用优先的CSS框架
- Bootstrap：组件库
- Material UI：谷歌设计系统
- Semantic UI：人性化HTML
示例工具：
- CodePen：快速原型制作
- JSFiddle：交互式编码
- StackBlitz：完整开发环境
Choosing the Right Tool
选择合适的工具
Decision Factors:
- Project Fidelity Needs:
- Low-fi: Balsamiq, Whimsical, paper
- Mid-fi: Figma, Sketch, Adobe XD
- High-fi: Figma, Sketch, Adobe XD, Axure
- Collaboration Requirements:
- Solo: Any tool
- Small team: Figma, Miro, Whimsical
- Large team: Figma, Adobe XD, Axure
- Budget:
- Free: Figma (free tier), Miro (free tier), paper
- Moderate: Whimsical, Balsamiq
- Enterprise: Axure, Sketch
- Platform:
- Cross-platform: Figma, Adobe XD, web-based tools
- macOS only: Sketch, OmniGraffle
- Learning Curve:
- Easy: Balsamiq, Whimsical, paper
- Moderate: Figma, Adobe XD
- Advanced: Axure, code-based
决策因素：
- 项目保真度需求：
- 低保真：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、基于代码的工具
Iteration Process
迭代流程
Design Iteration Cycle
设计迭代周期
1. Create Initial Wireframes:
- Start with low-fidelity sketches
- Focus on core user flows
- Explore multiple concepts
- Don't get attached to first ideas
2. Internal Review:
- Share with design team
- Get feedback on structure and flow
- Identify assumptions and gaps
- Refine based on team input
3. Stakeholder Review:
- Present to product owners, business stakeholders
- Validate against business requirements
- Confirm scope and priorities
- Document decisions and rationale
4. User Testing:
- Test with representative users
- Observe behavior, not just opinions
- Identify pain points and confusion
- Validate assumptions
5. Analysis and Synthesis:
- Review feedback and data
- Identify patterns and themes
- Prioritize changes
- Create action items
6. Refinement:
- Incorporate validated changes
- Increase fidelity if appropriate
- Add detail where needed
- Prepare for next round
7. Repeat:
- Multiple iterations are normal
- Each cycle should answer specific questions
- Know when to move forward
1. 创建初始线框图：
- 从低保真草图开始
- 聚焦于核心用户流程
- 探索多个概念
- 不要执着于第一个想法
2. 内部评审：
- 与设计团队分享
- 获取结构与流程反馈
- 识别假设与差距
- 根据团队意见优化
3. 利益相关者评审：
- 向产品负责人、业务利益相关者展示
- 验证是否符合业务需求
- 确认范围与优先级
- 记录决策与理由
4. 用户测试：
- 与代表性用户测试
- 观察行为而非仅听取意见
- 识别痛点与困惑
- 验证假设
5. 分析与综合：
- 评审反馈与数据
- 识别模式与主题
- 优先处理变更
- 创建行动项
6. 优化：
- 纳入经过验证的变更
- 适当时提升保真度
- 在需要的地方添加细节
- 为下一轮做准备
7. 重复：
- 多次迭代是正常的
- 每个周期应回答特定问题
- 知道何时推进
Feedback Loops
反馈循环
Types of Feedback:
- Design Critique:
- Regular sessions with design team
- Focus on specific aspects
- Structured feedback format
- Document decisions
- Stakeholder Feedback:
- Business alignment check
- Technical feasibility review
- Resource and timeline impact
- Strategic fit
- User Feedback:
- Usability testing
- Surveys and interviews
- Analytics and behavior data
- A/B testing results
Feedback Best Practices:
- Set clear objectives for each review
- Ask specific questions
- Focus on user needs, not personal preferences
- Document all feedback and decisions
- Close the loop (show how feedback was addressed)
反馈类型：
- 设计评审：
- 与设计团队定期开展
- 聚焦于特定方面
- 结构化反馈格式
- 记录决策
- 利益相关者反馈：
- 业务对齐检查
- 技术可行性评审
- 资源与时间影响
- 战略契合度
- 用户反馈：
- 可用性测试
- 调查与访谈
- 分析与行为数据
- A/B测试结果
反馈最佳实践：
- 为每次评审设定明确目标
- 提出具体问题
- 聚焦于用户需求而非个人偏好
- 记录所有反馈与决策
- 闭环（展示如何处理反馈）
Usability Testing with Wireframes
线框图的可用性测试
When to Test:
- After initial concept validation
- Before high-fidelity design work
- When exploring new patterns
- To validate major changes
Testing Methods:
- Moderated Usability Testing:
- One-on-one sessions
- Think-aloud protocol
- Task-based scenarios
- Observer takes notes
- Unmoderated Testing:
- Remote, asynchronous
- Users complete tasks independently
- Screen recording
- Survey responses
- Guerrilla Testing:
- Quick, informal testing
- Coffee shop or public space
- Brief sessions (5-10 minutes)
- Low-fi appropriate
What to Test:
- Can users complete key tasks?
- Do users understand the information hierarchy?
- Is the navigation intuitive?
- Are interactions clear?
- Does the flow match user mental models?
- Are there points of confusion or friction?
Testing Wireframes vs High-Fi:
- Wireframes: Test structure and flow
- High-fidelity: Test visual hierarchy and details
- Both: Test usability and user understanding
测试时机：
- 初始概念验证后
- 高保真设计工作前
- 探索新模式时
- 验证重大变更时
测试方法：
- 有主持可用性测试：
- 一对一会话
- 出声思考协议
- 基于任务的场景
- 观察者记录
- 无主持测试：
- 远程、异步
- 用户独立完成任务
- 屏幕录制
- 调查反馈
- 游击式测试：
- 快速、非正式测试
- 咖啡馆或公共场所
- 简短会话（5-10分钟）
- 适合低保真
测试内容：
- 用户能否完成关键任务？
- 用户是否理解信息层级？
- 导航是否直观？
- 交互是否清晰？
- 流程是否符合用户心智模型？
- 是否存在困惑或摩擦点？
线框图测试 vs 高保真测试：
- 线框图：测试结构与流程
- 高保真：测试视觉层级与细节
- 两者都需：测试可用性与用户理解
Progressive Refinement
渐进式优化
Low-Fi to High-Fi Journey:
Stage 1: Sketches (Hours):
- Multiple rough concepts
- Explore different approaches
- Get quick team alignment
- Identify obvious issues
Stage 2: Low-Fi Wireframes (Days):
- Digitize best concepts
- Create basic user flows
- Test core structure
- Stakeholder review
Stage 3: Mid-Fi Wireframes (Days-Weeks):
- Add detail and refinement
- Include actual content where possible
- Create component consistency
- User testing
Stage 4: High-Fi Wireframes (Weeks):
- Precise specifications
- All states documented
- Edge cases addressed
- Developer-ready
Stage 5: Interactive Prototype (Weeks):
- Functional interactions
- Animation and transitions
- Advanced user testing
- Stakeholder demos
When to Increase Fidelity:
- Core structure is validated
- Major changes are unlikely
- Specific details need testing
- Developer handoff is approaching
- Stakeholder sign-off is needed
When to Stay Low-Fi:
- Still exploring options
- Major questions unanswered
- Early in process
- Limited time/budget
- Testing basic concepts
从低保真到高保真的旅程：
阶段1：草图（数小时）：
- 多个粗糙概念
- 探索不同方法
- 快速与团队对齐
- 识别明显问题
阶段2：低保真线框图（数天）：
- 将最佳概念数字化
- 创建基础用户流程
- 测试核心结构
- 利益相关者评审
阶段3：中保真线框图（数天至数周）：
- 添加细节与优化
- 尽可能包含真实内容
- 创建组件一致性
- 用户测试
阶段4：高保真线框图（数周）：
- 精确规范
- 所有状态已记录
- 边缘情况已处理
- 适合开发使用
阶段5：交互式原型（数周）：
- 功能性交互
- 动画与过渡
- 高级用户测试
- 利益相关者演示
何时提升保真度：
- 核心结构已验证
- 不太可能有重大变更
- 需要测试特定细节
- 接近开发交接
- 需要利益相关者签字确认
何时保持低保真：
- 仍在探索选项
- 主要问题未解决
- 流程早期
- 时间/预算有限
- 测试基础概念
Best Practices
最佳实践
Clarity and Communication
清晰与沟通
1. Use Consistent Visual Language:
- Same placeholder styles throughout
- Consistent annotation format
- Standard symbols and notation
- Uniform component representation
2. Establish Clear Hierarchy:
- Size indicates importance
- Spacing creates relationships
- Weight adds emphasis
- Position guides attention
3. Label Everything:
- Page/screen names
- Section headings
- Interactive elements
- Navigation items
- Form fields
4. Provide Context:
- Show where in the flow users are
- Include breadcrumbs or progress indicators
- Reference related screens
- Note user state or context
5. Document Assumptions:
- Note what's assumed about user knowledge
- Document technical assumptions
- Clarify content assumptions
- Specify user permissions or roles
1. 使用一致的视觉语言：
- 全程使用相同的占位符样式
- 一致的标注格式
- 标准符号与标记
- 统一的组件呈现
2. 建立清晰的层级：
- 大小表示重要性
- 间距创造关系
- 字重增加强调
- 位置引导注意力
3. 标注所有内容：
- 页面/屏幕名称
- 章节标题
- 交互元素
- 导航项
- 表单字段
4. 提供上下文：
- 展示用户在流程中的位置
- 包含面包屑或进度指示器
- 引用相关屏幕
- 标注用户状态或上下文
5. 记录假设：
- 标注对用户知识的假设
- 记录技术假设
- 明确内容假设
- 指定用户权限或角色
Focus on Structure Over Style
聚焦结构而非样式
1. Resist Visual Design Temptation:
- Don't choose final colors yet
- Avoid specific typography decisions
- Don't add unnecessary decoration
- Focus on layout and function
2. Use Grayscale:
- Keeps focus on structure
- Prevents premature style decisions
- Reduces stakeholder distraction
- Makes hierarchy testing easier
3. Consistent Element Styling:
- All buttons look the same
- All form fields consistent
- All headings uniform
- Variations only when functionally different
4. Separate Content from Container:
- Use placeholders appropriately
- Don't let content drive layout
- Consider various content scenarios
- Plan for edge cases (long/short content)
1. 抵制视觉设计诱惑：
- 暂不选择最终颜色
- 避免特定排版决策
- 不要添加不必要的装饰
- 聚焦于布局与功能
2. 使用灰度：
- 保持对结构的关注
- 避免过早的样式决策
- 减少利益相关者的分心
- 让层级测试更简单
3. 一致的元素样式：
- 所有按钮外观一致
- 所有表单字段一致
- 所有标题统一
- 仅在功能不同时使用变体
4. 分离内容与容器：
- 适当使用占位符
- 不要让内容驱动布局
- 考虑各种内容场景
- 为边缘情况（长/短内容）做规划
Collaboration and Handoff
协作与交接
1. Involve Stakeholders Early:
- Share low-fi concepts quickly
- Get alignment before detail work
- Regular check-ins
- Document decisions
2. Work with Developers:
- Understand technical constraints
- Ask about feasibility
- Provide clear specifications
- Be available for questions
3. Version Control:
- Date all wireframes
- Track major changes
- Maintain changelog
- Archive old versions
4. Create a Design System:
- Reusable components
- Consistent patterns
- Shared libraries
- Documentation
5. Handoff Checklist:
- All screens documented
- Interactions specified
- States defined
- Edge cases addressed
- Assets prepared
- Specifications clear
1. 尽早让利益相关者参与：
- 快速分享低保真概念
- 在细节工作前达成一致
- 定期检查
- 记录决策
2. 与开发者合作：
- 了解技术约束
- 询问可行性
- 提供清晰的规范
- 随时解答问题
3. 版本控制：
- 为所有线框图添加日期
- 跟踪重大变更
- 维护变更日志
- 存档旧版本
4. 创建设计系统：
- 可复用组件
- 一致的模式
- 共享库
- 文档
5. 交接清单：
- 所有屏幕已记录
- 交互已指定
- 状态已定义
- 边缘情况已处理
- 资源已准备
- 规范清晰
Accessibility Considerations
无障碍设计考量
1. Consider Screen Readers:
- Logical heading hierarchy
- Meaningful link text
- Form label associations
- Alt text requirements noted
2. Keyboard Navigation:
- Focus order makes sense
- All interactive elements accessible
- Keyboard shortcuts documented
- Skip links for long pages
3. Color and Contrast:
- Don't rely on color alone
- Note where contrast is critical
- Consider colorblind users
- Plan for high contrast modes
4. Touch Targets:
- Minimum 44x44px for mobile
- Adequate spacing between targets
- Consider thumb zones
- Plan for various input methods
5. Content Accessibility:
- Clear language
- Logical structure
- Alternatives for complex content
- Captions for media
1. 考虑屏幕阅读器：
- 合理的标题层级
- 有意义的链接文本
- 表单标签关联
- 标注替代文本要求
2. 键盘导航：
- 焦点顺序合理
- 所有交互元素可访问
- 记录键盘快捷键
- 长页面提供跳过链接
3. 颜色与对比度：
- 不要仅依赖颜色
- 标注对比度关键的位置
- 考虑色盲用户
- 为高对比度模式做规划
4. 触摸目标：
- 移动端最小44x44px
- 目标间有足够间距
- 考虑拇指区域
- 为各种输入方法做规划
5. 内容无障碍：
- 清晰的语言
- 合理的结构
- 复杂内容的替代方案
- 媒体字幕
Common Pitfalls to Avoid
需避免的常见陷阱
1. Too Much Detail Too Soon:
- Risk: Wasted effort on wrong direction
- Solution: Stay low-fi until validated
2. Designing in a Vacuum:
- Risk: Misaligned with user needs or business goals
- Solution: Regular feedback and testing
3. Ignoring Edge Cases:
- Risk: Incomplete specifications, development surprises
- Solution: Think through error states, empty states, loading, etc.
4. Inconsistent Patterns:
- Risk: Confusing users, inefficient development
- Solution: Establish and follow patterns
5. Missing Mobile/Responsive Considerations:
- Risk: Designs don't work on all devices
- Solution: Design for multiple breakpoints
6. Inadequate Annotation:
- Risk: Misunderstood requirements, rework
- Solution: Clear, comprehensive specifications
7. Skipping User Testing:
- Risk: Building the wrong thing
- Solution: Test early and often
8. Not Considering Content:
- Risk: Designs break with real content
- Solution: Use realistic content, plan for variations
1. 过早添加过多细节：
- 风险：在错误方向上浪费精力
- 解决方案：在验证前保持低保真
2. 孤立设计：
- 风险：与用户需求或业务目标不一致
- 解决方案：定期获取反馈与测试
3. 忽略边缘情况：
- 风险：规范不完整、开发意外
- 解决方案：考虑错误状态、空状态、加载状态等
4. 不一致的模式：
- 风险：使用户困惑、开发效率低
- 解决方案：建立并遵循模式
5. 忽略移动端/响应式考量：
- 风险：设计在所有设备上无法正常工作
- 解决方案：为多个断点设计
6. 标注不足：
- 风险：需求被误解、返工
- 解决方案：清晰、全面的规范
7. 跳过用户测试：
- 风险：构建错误的产品
- 解决方案：尽早并经常测试
8. 未考虑内容：
- 风险：真实内容会破坏设计
- 解决方案：使用真实内容、为变体做规划
Wireframing Examples
线框图示例
Example 1: E-Commerce Product Listing Page
示例1：电商产品列表页
Purpose: Display multiple products with filtering and sorting
Low-Fidelity Approach:
[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] |
+------------------------+Annotations:
- Filter sidebar: Collapsible on mobile
- Product grid: 3 columns desktop, 2 tablet, 1 mobile
- Sort dropdown: Options include price, rating, newest
- Each product card links to product detail page
- "Load More" uses infinite scroll on mobile
High-Fidelity Considerations:
- Product image aspect ratio: 1:1
- Price formatting with currency
- Sale price treatment
- Quick view functionality
- Wishlist/favorite icons
- Out of stock indication
- Rating stars display
目的：展示多个产品，支持筛选与排序
低保真实现：
[页眉]
+------------------------------------------+
| Logo 搜索 购物车 账户 |
+------------------------------------------+
[面包屑]
首页 > 分类 > 子分类
[主内容区]
+------------+ +------------------------+
| 筛选器 | | [排序: 下拉菜单] |
| | | [网格视图] [列表视图]|
| 分类 | | |
| [ ] 选项 | | +----+ +----+ +----+ |
| [ ] 选项 | | |图片| |图片| |图片| |
| | | | | | | | | |
| | | |名称| |名称| |名称| |
| 价格 | | |$XXX| |$XXX| |$XXX| |
| [滑块] | | +----+ +----+ +----+ |
| | | |
| 品牌 | | +----+ +----+ +----+ |
| [ ] 选项 | | |图片| |图片| |图片| |
| [ ] 选项 | | +----+ +----+ +----+ |
| | | |
| [应用] | | [加载更多] |
+------------+ +------------------------+标注：
- 筛选侧边栏：移动端可折叠
- 产品网格：桌面3列、平板2列、移动端1列
- 排序下拉菜单：选项包括价格、评分、最新
- 每个产品卡片链接到产品详情页
- “加载更多”在移动端使用无限滚动
高保真考量：
- 产品图片宽高比：1:1
- 带货币符号的价格格式
- 促销价格处理
- 快速查看功能
- 心愿单/收藏图标
- 缺货标识
- 星级评分显示
Example 2: User Registration Flow
示例2：用户注册流程
Flow Overview:
[Landing Page] → [Sign Up Form] → [Email Verification] → [Profile Setup] → [Dashboard]
↓
[Login Instead]Sign Up Form Wireframe:
+------------------------------------------+
| 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] |
+------------------------------------------+Annotations:
- Email field: Validate format on blur
- Password field: Toggle visibility with eye icon
- Password strength indicator: Update as user types
- Terms checkbox: Required, link to full terms
- Social signup: OAuth flow, create account with minimal info
- Error handling: Inline validation, show errors above field
States to Consider:
- Empty state (initial)
- Filled state (valid)
- Error state (invalid email, weak password)
- Loading state (submitting)
- Success state (account created)
流程概述：
[落地页] → [注册表单] → [邮箱验证] → [资料设置] → [仪表板]
↓
[改为登录]注册表单线框图：
+------------------------------------------+
| 创建账户 |
+------------------------------------------+
| |
| 全名 |
| [________________________] |
| |
| 邮箱地址 |
| [________________________] |
| |
| 密码 |
| [________________________] [👁] |
| • 至少8个字符 |
| • 包含数字与特殊字符 |
| |
| [ ] 我同意条款与隐私政策 |
| |
| [ 创建账户 ] |
| |
| 已有账户？[登录] |
| |
| -------- 或通过以下方式注册 -------- |
| |
| [Google] [Apple] [Facebook] |
+------------------------------------------+标注：
- 邮箱字段：失焦时验证格式
- 密码字段：用眼睛图标切换可见性
- 密码强度指示器：用户输入时更新
- 条款复选框：必填，链接到完整条款
- 社交注册：OAuth流程，用最少信息创建账户
- 错误处理：内联验证，在字段上方显示错误
需考虑的状态：
- 空状态（初始）
- 已填充状态（有效）
- 错误状态（无效邮箱、弱密码）
- 加载状态（提交中）
- 成功状态（账户已创建）
Example 3: Dashboard with Data Visualization
示例3：带数据可视化的仪表板
Purpose: Display key metrics and performance data
Layout Structure:
+----------------------------------------------------+
| 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] | |
| +-----------------------+ +---------------------+ |
+----------------------------------------------------+Interactive Elements:
- Date range picker: Updates all data
- Metric cards: Click to drill down
- Chart: Hover for data points, click for details
- Tables: Sortable columns, click row for details
Responsive Behavior:
- Desktop: 3-column metric cards, side-by-side tables
- Tablet: 2-column metrics, stacked tables
- Mobile: 1-column, vertical stack, simplified chart
目的：展示关键指标与绩效数据
布局结构：
+----------------------------------------------------+
| Logo 仪表板 报告 设置 [资料▼] |
+----------------------------------------------------+
| 欢迎回来，[用户名] [日期范围 ▼] |
| |
| +---------------+ +---------------+ +---------+ |
| | 总销售额 | | 订单 | | 增长率 | |
| | $XXX,XXX | | XXX | | +XX% | |
| | 较上月 +XX% | | 较上月 +XX% | | ↑ | |
| +---------------+ +---------------+ +---------+ |
| |
| +------------------------------------------------+ |
| | 收入趋势 [月份▼] | |
| | [折线图] | |
| | | |
| | | |
| +------------------------------------------------+ |
| |
| +-----------------------+ +---------------------+ |
| | 热门产品 | | 最近订单 | |
| | 1. 产品A $XXX | | #1234 [状态] | |
| | 2. 产品B $XXX | | #1235 [状态] | |
| | 3. 产品C $XXX | | #1236 [状态] | |
| | [查看全部] | | [查看全部] | |
| +-----------------------+ +---------------------+ |
+----------------------------------------------------+交互元素：
- 日期范围选择器：更新所有数据
- 指标卡片：点击可钻取
- 图表：悬停显示数据点，点击查看详情
- 表格：列可排序，点击行查看详情
响应式行为：
- 桌面：3列指标卡片、并排表格
- 平板：2列指标、堆叠表格
- 移动端：1列、垂直堆叠、简化图表
Example 4: Mobile App Onboarding
示例4：移动应用引导页
Screen Flow:
[Splash] → [Welcome] → [Feature 1] → [Feature 2] → [Feature 3] → [Sign Up/Login]
↓
[Skip]Welcome Screen:
+-------------------+
| |
| [Illustration] |
| |
| Welcome to App |
| |
| Discover amazing |
| features that |
| make life easier |
| |
| ● ○ ○ ○ |
| |
| [ Next ] |
| |
| [Skip] |
+-------------------+Annotations:
- Swipe gestures: Left/right to navigate
- Progress dots: Indicate current screen (4 total)
- Next button: Advance to next screen
- Skip link: Jump directly to sign up/login
- Auto-advance: Option to auto-play with timer
Design Considerations:
- Simple, focused messaging
- One concept per screen
- Visual > text
- Easy exit option
- Remember user (don't show again)
屏幕流程：
[启动页] → [欢迎页] → [功能1] → [功能2] → [功能3] → [注册/登录]
↓
[跳过]欢迎页：
+-------------------+
| |
| [插图] |
| |
| 欢迎使用App |
| |
| 发现让生活更轻松的 |
| 神奇功能 |
| |
| ● ○ ○ ○ |
| |
| [ 下一步 ] |
| |
| [跳过] |
+-------------------+标注：
- 滑动手势：左右滑动导航
- 进度点：指示当前屏幕（共4个）
- 下一步按钮：前进到下一个屏幕
- 跳过链接：直接跳转到注册/登录
- 自动前进：可选计时器自动播放
设计考量：
- 简洁、聚焦的信息
- 每个屏幕一个概念
- 视觉优先于文本
- 退出选项便捷
- 记住用户（不再显示）
Example 5: Search Results Page
示例5：搜索结果页
Layout:
+--------------------------------------------------+
| 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] |
+--------------------------------------------------+Annotations:
- Search box: Maintains query, suggest refinements
- Filters: Change result type, update page
- Result images: Preview image when available
- Breadcrumb URL: Show page hierarchy
- Description: Keyword highlighting
- "People also ask": Expandable FAQ accordion
- Pagination: Standard page navigation
布局：
+--------------------------------------------------+
| Logo [搜索: "关键词" ] [搜索] |
+--------------------------------------------------+
| 约X,XXX个结果（0.XX秒） |
| |
| 筛选：[全部] [图片] [视频] [新闻] [更多▼] |
| |
| +---------+ |
| | [图片] | 结果标题 - 链接 |
| +---------+ www.example.com › 路径 |
| 内容简要描述 |
| 搜索关键词已高亮... |
| 额外上下文行。 |
| |
| +---------+ |
| | [图片] | 结果标题 - 链接 |
| +---------+ www.example.com › 路径 |
| 简要描述... |
| |
| [用户还问] |
| ▼ 与搜索相关的问题？ |
| ▼ 另一个问题？ |
| |
| ... 更多结果 ... |
| |
| [上一页] [1] [2] [3] [4] [5] [下一页] |
+--------------------------------------------------+标注：
- 搜索框：保留查询词，建议 refinements
- 筛选器：更改结果类型，更新页面
- 结果图片：有可用预览图时显示
- 面包屑URL：显示页面层级
- 描述：关键词高亮
- “用户还问”：可展开的FAQ手风琴
- 分页：标准页面导航
Example 6: Blog Article Page
示例6：博客文章页
Structure:
+--------------------------------------------------+
| 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 | |
| +-------+ +-------+ +-------+ |
+--------------------------------------------------+Responsive Considerations:
- Desktop: Max-width container (680-720px) for readability
- Mobile: Full-width with padding, stacked layout
- Images: Responsive, maintain aspect ratio
- Related articles: 3 columns → 1 column
结构：
+--------------------------------------------------+
| Logo 首页 文章 关于我们 联系我们 [搜索] |
+--------------------------------------------------+
| |
| 首页 > 分类 > 文章标题 |
| |
| 文章标题这里 |
| 引人入胜的副标题或摘要 |
| |
| 作者：[作者名] | [日期] | 阅读X分钟 |
| |
| [特色图片 - 全宽] |
| |
| +--------------------------------------------+ |
| | 文章内容从这里开始。Lorem ipsum | |
| | dolor sit amet, consectetur adipiscing | |
| | elit. 主要内容段落... | |
| | | |
| | ## 子标题 | |
| | | |
| | 更多内容，层级与格式合理。 | |
| | 列表、引用、图片等。 | |
| | | |
| | [带说明的内联图片] | |
| | | |
| +--------------------------------------------+ |
| |
| 标签：[设计] [UX] [线框图] |
| |
| 分享：[Twitter] [Facebook] [LinkedIn] |
| |
| +--------------------------------------------+ |
| | 关于作者 | |
| | [头像] 姓名 | |
| | 简短简介与社交链接 | |
| +--------------------------------------------+ |
| |
| 相关文章 |
| +-------+ +-------+ +-------+ |
| |[图片]| |[图片]| |[图片]| |
| |标题 | |标题 | |标题 | |
| +-------+ +-------+ +-------+ |
+--------------------------------------------------+响应式考量：
- 桌面：最大宽度容器（680-720px）提升可读性
- 移动端：全宽带内边距、堆叠布局
- 图片：响应式，保持宽高比
- 相关文章：3列 → 1列
Example 7: Settings/Preferences Page
示例7：设置/偏好页
Tab-Based Layout:
+--------------------------------------------------+
| [Account] [Privacy] [Notifications] [Billing] |
+--------------------------------------------------+
| |
| Account Settings |
| |
| Profile Photo |
| [ Avatar ] [Change Photo] [Remove] |
| |
| Display Name |
| [_____________________________] |
| |
| Email Address |
| user@example.com [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] |
+--------------------------------------------------+Annotations:
- Tabs: Load different setting sections
- Change actions: Modal or inline edit
- 2FA toggle: Confirmation required
- Save button: Enabled only when changes made
- Danger zone: Confirmation modal with password
- Autosave option: Consider for better UX
标签式布局：
+--------------------------------------------------+
| [账户] [隐私] [通知] [账单] |
+--------------------------------------------------+
| |
| 账户设置 |
| |
| 头像 |
| [ 头像 ] [更换头像] [移除] |
| |
| 显示名称 |
| [_____________________________] |
| |
| 邮箱地址 |
| user@example.com [已验证 ✓] |
| [更改邮箱] |
| |
| 密码 |
| •••••••• |
| [更改密码] |
| |
| 双重认证 |
| [ 已启用 ] |
| 添加额外安全层 |
| [管理2FA] |
| |
| 时区 |
| [America/New_York ▼] |
| |
| 语言 |
| [English ▼] |
| |
| 危险区域 |
| [删除账户] 此操作不可撤销 |
| |
| [取消] [保存更改] |
+--------------------------------------------------+标注：
- 标签：加载不同的设置章节
- 更改操作：模态框或内联编辑
- 2FA开关：需要确认
- 保存按钮：仅在有更改时启用
- 危险区域：需要密码确认的模态框
- 自动保存选项：为更好的UX考虑
Example 8: Calendar/Scheduling Interface
示例8：日历/调度界面
Monthly View:
+--------------------------------------------------+
| [<] 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] |
+--------------------------------------------------+Alternative Views:
- Week view: Hourly grid with event blocks
- Day view: Detailed timeline with conflicts shown
- Agenda view: List of all events
Interactions:
- Click date: See day detail or create event
- Dots: Indicate events (color-coded by type)
- Drag events: Reschedule
- Click event: View/edit details
- Month navigation: Previous/next, or date picker
月视图：
+--------------------------------------------------+
| [<] 2024年10月 [>] [今天] [+ 事件] |
+--------------------------------------------------+
| 日 | 一 | 二 | 三 | 四 | 五 | 六 | |
+--------------------------------------------------+
| | | 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 | | | |
| | | | ●● | | | | |
+--------------------------------------------------+
| |
| 即将到来的事件 |
| 10月9日 上午9:00 - 团队会议 |
| 10月15日 下午2:00 - 客户电话 |
| 10月17日 上午10:00 - 设计评审 |
| [查看全部] |
+--------------------------------------------------+替代视图：
- 周视图：带事件块的小时网格
- 日视图：详细时间线，显示冲突
- 议程视图：所有事件列表
交互：
- 点击日期：查看日详情或创建事件
- 点：表示事件（按类型颜色编码）
- 拖动事件：重新安排
- 点击事件：查看/编辑详情
- 月份导航：上一个/下一个，或日期选择器
Example 9: Social Media Feed
示例9：社交媒体信息流
Feed Structure:
+--------------------------------------------------+
| [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] |
+--------------------------------------------------+Post Interactions:
- Avatar/name: Link to user profile
- Three-dot menu: Report, mute, block, etc.
- Reply icon: Open comment thread
- Repost icon: Share to own feed
- Like icon: Toggle like state
- Bookmark: Save for later
- Share: Share externally
Features:
- Infinite scroll or "Load More"
- Pull-to-refresh on mobile
- Real-time updates for new posts
- Engagement counts update live
信息流结构：
+--------------------------------------------------+
| [首页] [发现] [消息] [资料] [@用户] |
+--------------------------------------------------+
| 你在想什么？ |
| [____________________________] [图片] [发布] |
+--------------------------------------------------+
| |
| +----------------------------------------------+ |
| | [头像] 用户名 [•••] | |
| | @username · 2小时前 | |
| | | |
| | 帖子内容在这里。可以是文本、 | |
| | 图片、链接或其他媒体。#标签 | |
| | | |
| | [链接/媒体预览图] | |
| | | |
| | [💬 12] [🔄 5] [❤️ 24] [🔖] [📤] | |
| +----------------------------------------------+ |
| |
| +----------------------------------------------+ |
| | [头像] 另一个用户 [•••] | |
| | @user2 · 5小时前 | |
| | | |
| | 另一个帖子，内容不同... | |
| | | |
| | [💬 3] [🔄 1] [❤️ 8] [🔖] [📤] | |
| +----------------------------------------------+ |
| |
| [加载更多帖子] |
+--------------------------------------------------+帖子交互：
- 头像/姓名：链接到用户资料
- 三点菜单：举报、静音、屏蔽等
- 回复图标：打开评论线程
- 转发图标：分享到自己的信息流
- 点赞图标：切换点赞状态
- 书签：保存供以后查看
- 分享：外部分享
功能：
- 无限滚动或“加载更多”
- 移动端下拉刷新
- 新帖子实时更新
- 互动计数实时更新
Example 10: Video Player Interface
示例10：视频播放器界面
Player Wireframe:
+--------------------------------------------------+
| |
| [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 ▼] |
+--------------------------------------------------+Player Controls:
- Play/Pause: Toggle playback
- Skip buttons: 10 seconds back/forward
- Progress bar: Scrub to any point, show buffer
- Volume: Slider control, mute toggle
- Settings: Quality, speed, captions
- Fullscreen: Toggle fullscreen mode
Additional Features:
- Auto-hide controls after inactivity
- Keyboard shortcuts
- Picture-in-picture mode
- Captions/subtitles toggle
- Playlist navigation
播放器线框图：
+--------------------------------------------------+
| |
| [视频内容] |
| |
| [播放/暂停浮层] |
| |
+--------------------------------------------------+
| [▶/⏸] [⏮] [⏭] ——●———————————————— [🔊] [⚙] [⛶]|
| 0:45 12:34 |
+--------------------------------------------------+
| |
| 视频标题在这里 |
| 120万次观看 · 2天前 |
| |
| [头像] 频道名称 [订阅] |
| 12.5万订阅者 |
| |
| [👍 1.2万] [👎] [分享] [下载] [保存] [•••] |
| |
| [显示描述 ▼] |
+--------------------------------------------------+播放器控件：
- 播放/暂停：切换播放
- 跳过按钮：后退/前进10秒
- 进度条：可跳转到任意位置，显示缓冲
- 音量：滑块控制、静音切换
- 设置：画质、速度、字幕
- 全屏：切换全屏模式
附加功能：
- 无活动时自动隐藏控件
- 键盘快捷键
- 画中画模式
- 字幕/副标题切换
- 播放列表导航
Example 11: Checkout Flow
示例11：结账流程
Multi-Step Process:
Step 1: Cart → Step 2: Shipping → Step 3: Payment → Step 4: Review → ConfirmationPayment Step Wireframe:
+--------------------------------------------------+
| [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 >] |
+--------------------------------------------------+Security & Trust Elements:
- SSL badge/lock icon
- Accepted payment methods shown
- Security text/guarantees
- Save payment info option (if logged in)
多步骤流程：
步骤1：购物车 → 步骤2：配送 → 步骤3：支付 → 步骤4：审核 → 确认支付步骤线框图：
+--------------------------------------------------+
| [Logo] [帮助] |
+--------------------------------------------------+
| [✓] 购物车 [✓] 配送 [●] 支付 [ ] 审核 |
+--------------------------------------------------+
| |
| 支付方式 |
| (•) 信用卡 |
| ( ) PayPal |
| ( ) Apple Pay |
| |
| 卡号 |
| [____-____-____-____] [VISA] |
| |
| 到期日期 CVV |
| [MM/YY] [___] [?] |
| |
| 持卡人姓名 |
| [_____________________________] |
| |
| 账单地址 |
| [ ] 与配送地址相同 |
| |
| [应用优惠码 ▼] |
| |
| +--------------------------------------------+ |
| | 订单总结 | |
| | 小计： $XX.XX | |
| | 配送费： $X.XX | |
| | 税费： $X.XX | |
| | ---------------------------------------- | |
| | 总计： $XX.XX | |
| +--------------------------------------------+ |
| |
| [< 返回配送] [继续到审核 >] |
+--------------------------------------------------+安全与信任元素：
- SSL徽章/锁图标
- 显示接受的支付方式
- 安全文本/保证
- 保存支付信息选项（如果已登录）
Example 12: FAQ/Help Center
示例12：FAQ/帮助中心
Layout:
+--------------------------------------------------+
| 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] |
+--------------------------------------------------+Interactive Elements:
- Search: Auto-suggest relevant articles
- Category cards: Link to filtered view
- FAQ accordion: Expand/collapse answers
- Related articles: Show after viewing FAQ
- Helpful voting: "Was this helpful? Yes/No"
布局：
+--------------------------------------------------+
| Logo 产品 资源 支持 [登录] |
+--------------------------------------------------+
| |
| 我们能如何帮助您？ |
| [搜索帮助主题... ] [搜索] |
| |
| 热门话题 |
| +-------------+ +-------------+ +-------------+|
| | [图标] | | [图标] | | [图标] ||
| | 入门 | | 账单与 | | 技术 ||
| | | | 账户 | | 支持 ||
| +-------------+ +-------------+ +-------------+|
| |
| 常见问题 |
| |
| [▼] 如何重置密码？ |
| 要重置密码，请点击... |
| |
| [>] 如何更新账单信息？ |
| |
| [>] 你们接受哪些支付方式？ |
| |
| [>] 如何取消订阅？ |
| |
| [>] 如何联系客户支持？ |
| |
| [浏览所有文章] |
| |
| 仍需要帮助？ |
| [联系支持] 或 [社区论坛] |
+--------------------------------------------------+交互元素：
- 搜索：自动建议相关文章
- 分类卡片：链接到筛选视图
- FAQ手风琴：展开/折叠答案
- 相关文章：查看FAQ后显示
- 有用性投票：“这篇文章有帮助吗？是/否”
Example 13: Data Table with Actions
示例13：带操作的数据表格
Complex Table Interface:
+--------------------------------------------------+
| [+ 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 >] |
+--------------------------------------------------+Annotations:
- Checkboxes: Multi-select for bulk actions
- Column headers: Clickable to sort
- Status: Color-coded badges
- Actions menu: Edit, duplicate, delete, view details
- Search: Filter table in real-time
- Filters: Dropdown with multiple criteria
- Pagination: Standard page controls
Responsive Strategy:
- Desktop: Full table view
- Tablet: Horizontal scroll or hide less critical columns
- Mobile: Card-based view with key information
复杂表格界面：
+--------------------------------------------------+
| [+ 新项目] [搜索: _____] [筛选▼]|
+--------------------------------------------------+
| [ ] | 名称 | 状态 | 日期 | 操作 |
+--------------------------------------------------+
| [✓] | 项目Alpha | 活跃 | 2024/01/15 | [•••] |
| [ ] | 项目Beta | 待处理 | 2024/01/16 | [•••] |
| [✓] | 项目Gamma | 活跃 | 2024/01/17 | [•••] |
| [ ] | 项目Delta | 不活跃| 2024/01/18 | [•••] |
| [ ] | 项目Echo | 活跃 | 2024/01/19 | [•••] |
+--------------------------------------------------+
| 批量操作：[删除] [导出] [更改状态] |
| |
| 显示127条中的5条 [< 1 2 3 4 5 >] |
+--------------------------------------------------+标注：
- 复选框：多选用于批量操作
- 列标题：点击可排序
- 状态：颜色编码徽章
- 操作菜单：编辑、复制、删除、查看详情
- 搜索：实时筛选表格
- 筛选器：带多个条件的下拉菜单
- 分页：标准页面控件
响应式策略：
- 桌面：完整表格视图
- 平板：水平滚动或隐藏次要列
- 移动端：卡片式视图，显示关键信息
Example 14: Modal Dialog
示例14：模态对话框
Confirmation Modal:
+------------------------------+
| [X]|
| Delete Item? |
| |
| Are you sure you want to |
| delete "Item Name"? This |
| action cannot be undone. |
| |
| [Cancel] [Delete] |
+------------------------------+Form Modal:
+------------------------------+
| Add New Item [X]|
+------------------------------+
| |
| Item Name |
| [_______________________] |
| |
| Category |
| [Select category ▼] |
| |
| Description |
| [_______________________] |
| [_______________________] |
| [_______________________] |
| |
| [ ] Mark as featured |
| |
| [Cancel] [Add Item] |
+------------------------------+Modal Best Practices:
- Overlay/backdrop to focus attention
- Clear close options (X button, Cancel, click outside)
- Logical action button placement
- Keyboard support (ESC to close, Tab navigation)
- Focus trap (keep focus within modal)
- Avoid modals within modals
确认模态框：
+------------------------------+
| [X]|
| 删除项目？ |
| |
| 您确定要删除“项目名称”吗？此 |
| 操作不可撤销。 |
| |
| [取消] [删除] |
+------------------------------+表单模态框：
+------------------------------+
| 添加新项目 [X]|
+------------------------------+
| |
| 项目名称 |
| [_______________________] |
| |
| 分类 |
| [选择分类 ▼] |
| |
| 描述 |
| [_______________________] |
| [_______________________] |
| [_______________________] |
| |
| [ ] 标记为特色 |
| |
| [取消] [添加项目] |
+------------------------------+模态框最佳实践：
- 遮罩层聚焦注意力
- 清晰的关闭选项（X按钮、取消、点击外部）
- 逻辑化的操作按钮布局
- 键盘支持（ESC关闭、Tab导航）
- 焦点陷阱（保持焦点在模态框内）
- 避免模态框嵌套
Example 15: Mobile Navigation Patterns
示例15：移动导航模式
Hamburger Menu:
+-------------------+
| [☰] Logo [🔍] |
+-------------------+
| |
| Main Content |
| |
+-------------------+
[Menu Open State]
+-------------------+
| [✕] Menu |
+-------------------+
| Home |
| Products |
| About |
| Contact |
| Account |
+-------------------+Tab Bar Navigation (Bottom):
+-------------------+
| |
| Content Area |
| |
+-------------------+
| [🏠] [🔍] [+] |
| Home Search Add |
| |
| [♥] [👤] |
| Saved Profile |
+-------------------+Tab Bar Best Practices:
- 3-5 primary destinations
- Icons + labels for clarity
- Active state clearly indicated
- Don't hide primary actions
- Fixed position at bottom
汉堡菜单：
+-------------------+
| [☰] Logo [🔍] |
+-------------------+
| |
| 主内容 |
| |
+-------------------+
[菜单展开状态]
+-------------------+
| [✕] 菜单 |
+-------------------+
| 首页 |
| 产品 |
| 关于我们 |
| 联系我们 |
| 账户 |
+-------------------+底部标签栏导航：
+-------------------+
| |
| 内容区域 |
| |
+-------------------+
| [🏠] [🔍] [+] |
| 首页 搜索 添加 |
| |
| [♥] [👤] |
| 收藏 资料 |
+-------------------+标签栏最佳实践：
- 3-5个主要目的地
- 图标+标签提升清晰度
- 活跃状态清晰指示
- 不要隐藏主要操作
- 固定在底部
Conclusion
结论
Wireframing is a critical skill in the UX design process. It enables rapid exploration of ideas, validates concepts with minimal investment, facilitates clear communication among stakeholders, and provides a solid foundation for visual design and development.
Key takeaways:
- Match fidelity to your stage in the design process
- Focus on structure and functionality before aesthetics
- Iterate based on feedback and testing
- Use the right tools for your needs and team
- Document interactions and specifications clearly
- Consider accessibility from the start
- Involve stakeholders and users throughout
By mastering wireframing techniques and following best practices, you'll create more effective designs, reduce costly revisions, and deliver better user experiences.
线框图是UX设计流程中的关键技能。它能快速探索想法，以最小投入验证概念，促进利益相关者之间的清晰沟通，并为视觉设计与开发提供坚实基础。
关键要点：
- 根据设计流程阶段匹配保真度
- 在美学前聚焦于结构与功能
- 根据反馈与测试进行迭代
- 根据需求与团队选择合适的工具
- 清晰记录交互与规范
- 从一开始就考虑无障碍设计
- 全程让利益相关者与用户参与
通过掌握线框图技术并遵循最佳实践，您将创建更有效的设计，减少昂贵的修订，并提供更好的用户体验。