线框原型设计

Name: WireframePrototyping
Rating: 5 (1 reviews)

概述

线框图和原型设计连接了想法和实现之间的桥梁，使得团队能够在成本高昂的开发之前测试概念、获取反馈并完善设计。

何时使用

早期概念验证
利益相关者对齐
用户测试和反馈
开发者交接
功能探索
用户体验问题解决
快速迭代

指南

1. 线框图基础

线框图原则：

低保真（草图）：
  工具：纸、白板、Balsamiq
  时间：30分钟 - 2小时
  细节：基本布局，无颜色/字体
  最适合：头脑风暴，探索
  成本：免费

中等保真度：
  工具：Figma、Sketch、Adobe XD
  时间：2-8小时
  细节：布局、内容、基本交互
  最适合：团队对齐，反馈
  成本：低

高保真度：
  工具：Figma、Framer、Web开发工具
  时间：8+小时
  细节：视觉设计、交互、动画
  最适合：开发者交接，用户测试
  成本：中等

---

## 线框图组件

头部：
  - Logo/品牌
  - 导航菜单
  - 搜索栏（如适用）
  - 用户账户菜单

主要内容：
  - 英雄区或标题
  - 主要内容区域
  - 行动号召按钮
  - 支持信息

侧边栏（如适用）：
  - 二级导航
  - 过滤器
  - 相关内容

页脚：
  - 页脚链接
  - 版权
  - 社交媒体

---

## 布局模式

网格系统：
  - 12列网格（最灵活）
  - 8列适用于移动设备
  - 一致的间距

响应式断点：
  - 移动设备：320px - 480px
  - 平板：768px - 1024px
  - 桌面：1200px+

常见布局：
  - 英雄+特性
  - 带侧边栏的两列
  - 三列网格
  - 砌体/卡片布局

2. 原型工具与技术

# 创建交互式原型

class PrototypeFramework:
    TOOLS = {
        'Figma': {
            'fidelity': 'Medium-High',
            'interactivity': 'Full',
            'collaboration': 'Real-time',
            'cost': 'Free-$30/month'
        },
        'Framer': {
            'fidelity': 'High',
            'interactivity': 'Advanced',
            'collaboration': 'Limited',
            'cost': '$12+/month'
        },
        'Adobe XD': {
            'fidelity': 'High',
            'interactivity': 'Full',
            'collaboration': 'Good',
            'cost': '$20/month'
        }
    }

    def create_prototype_flow(self):
        """定义用户交互流程"""
        return {
            'screens': [
                {'name': 'Login', 'interactions': ['Email input', 'Password input', 'Submit button']},
                {'name': 'Dashboard', 'interactions': ['View projects', 'Create new', 'Search']},
                {'name': 'Project Detail', 'interactions': ['View tasks', 'Edit project', 'Share']}
            ],
            'flows': [
                {'from': 'Login', 'to': 'Dashboard', 'trigger': 'Valid credentials'},
                {'from': 'Dashboard', 'to': 'Project Detail', 'trigger': 'Click project'},
                {'from': 'Project Detail', 'to': 'Dashboard', 'trigger': 'Back button'}
            ]
        }

    def define_interactions(self, screen):
        """映射用户交互"""
        return {
            'screen': screen,
            'interactions': [
                {
                    'element': 'Submit button',
                    'trigger': 'Click',
                    'action': 'Validate form and submit'
                },
                {
                    'element': 'Email field',
                    'trigger': 'Focus',
                    'action': 'Show placeholder, hint text'
                }
            ]
        }

    def test_prototype(self, prototype):
        """收集原型反馈"""
        return {
            'testing_method': 'Unmoderated user testing',
            'participants': 5,
            'duration': '30 minutes each',
            'tasks': [
                'Complete user registration',
                'Create first project',
                'Invite team member'
            ],
            'metrics': [
                'Task completion rate',
                'Time to complete',
                'Error rate',
                'User satisfaction'
            ]
        }

3. 线框图示例

示例：电子商务产品页面

头部：
  [Logo] [Search bar] [Cart] [Account]

英雄区：
  [Product image] [Price] [Add to cart] [Reviews: 4.5★]

产品详情：
  Description | Specs | Size guide

产品图片：
  [Main] [Thumb1] [Thumb2] [Thumb3]

相关产品：
  [Product card] [Product card] [Product card]

页脚：
  Contact | FAQ | Returns | Shipping info

4. 原型测试

测试计划：

目标：验证主要用户流程和用户体验清晰度

测试方法：无人监督的远程测试

参与者：
  - 5名代表性用户
  - 经验水平混合
  - 类似目标人物

任务：
  1. 注册新账户
  2. 创建您的第一个项目
  3. 邀请团队成员
  4. 编辑项目设置

成功标准：
  - 80%+任务完成率
  - 平均时间<5分钟每项任务
  - SUS得分>70
  - 无关键可用性问题

反馈领域：
  - 导航清晰度
  - 按钮放置
  - 表单字段
  - 视觉层次
  - 错误处理

分析：
  - 前3个摩擦点
  - 用户引述
  - 设计建议

最佳实践

✅ DO

从低保真草图开始
尽早并经常获取反馈
与真实用户测试
根据反馈迭代
使用一致的网格和间距
记录交互流程
包括边缘情况（空状态，错误）
创建移动优先线框图
分享原型以供协作
保持线框图简单专注

❌ DON’T

直接跳到高保真
在验证前过度设计
忽略移动/响应需求
没有用户输入就创建线框图
未定义交互
使线框图过于详细
只与团队成员测试
忽略可访问性
过早锁定设计
创建不切实际的用户流程

线框图技巧

使用线框图网格以保持一致性
清晰一致地命名屏幕
显示所有状态（空的，加载中，错误）
包括标签和描述
对复杂交互使用注释