线框是界面的骨架。在颜色和图像之前，先定义结构和布局。本指南向您展示如何为移动应用程序创建有效的线框。
什么是线框
定义
界面结构的低保真视觉表示。
目的
注重布局、层次结构和功能。
没有
最终颜色、真实图像、详细排版。
为什么要创建线框
速度
快速创建和迭代。
焦点
在结构上，而不是视觉细节上。
通讯
与利益相关者协调想法。
经济
在最终设计之前发现问题。
验证
尽早测试流程。
线框类型
低保真度
简单的草图，基本的块。
中保真度
更详细、可识别的元素。
高保真
接近最终效果，没有颜色。
何时使用每个
低级用于探索，中级用于验证，高级用于指定。
线框元素
容器
定义区域的框。
占位符
内容表示。
导航
导航结构。
版式
文本层次结构。
按钮/CTA
互动元素。
注释
行为的解释。
创建过程
参考文献
分析类似的应用程序。
列出功能
屏幕上需要显示什么。
素描
从纸上开始。
###数字
切换到数字工具。
迭代
通过反馈进行完善。
纸线框
优势
超快，无学习曲线。
材质
纸、笔、模板。
何时使用
初步探索，集思广益。
限制
很难以数字方式共享。
数字工具
菲格玛
组件、快速、协作。
素描
仅限 Mac，流行。
巴尔萨米克
专注于低保真线框。
异想天开
又快又漂亮。
Adobe XD
Adobe 生态系统。
常用组件
标题
徽标、标题、操作。
标签栏
主导航。
卡牌
内容容器。
列表
重复的项目。
表格
输入和按钮。
情态动词
叠加。
视觉层次结构
尺寸
更大=更重要。
位置
顶部=最重要。
对比
突出关键要素。
间距
团体相关。
响应能力
移动优先
从最小的开始。
###断点
定义适应。
优先级
每种尺寸都有哪些内容？
线框与模型
线框
结构，没有最终的外观。
样机
完整、静态的外观。
原型
互动、可导航。
序列
线框→模型→原型。
测试线框
游击测试
与任何人一起快速测试。
点击测试
他们会点击哪里？
理解
你了解结构吗？
###反馈
收集并合并。
文档
注释
解释行为。
流量
屏幕如何连接。
州
空、错误、加载。
切换
用于视觉设计。
合作
利益相关者
在画太多之前先展示一下。
开发人员
尽早了解结构。
###评论
反馈会议。
版本控制
改变历史。
常见错误
非常详细
线框成为模型。
跳过步骤
直接进入视觉效果。
没有测试
不与用户验证。
很长一段时间
在完美上花费太多。
结论
线框图是良好设计的基础。在装饰之前定义结构，尽早测试并快速迭代。结果是在投资视觉设计之前经过深思熟虑的界面。
##常见问题解答
1) 每个项目都需要一个线框吗？ 对于重大项目，是的。加快速度并减少返工。
2) 使用哪个忠诚度级别？ 探索时低，大多数情况下中。
3) 线框图需要客户批准吗？ 是的。在投资视觉设计之前。
4) 线框取代原型？ 不。线框是结构，原型测试交互。
5) 在线框图上花费多少时间？ 足以验证结构。不要过于完美。
另请阅读
- 【应用导航流程：如何设计直观的旅程0
- [应用程序中的微交互：完整指南1
- [以用户为中心的设计：UCD完整指南2
- [交互设计：直观数字体验指南3
- 【应用导航流程：日常生活中的工具4
- [应用程序导航流程：扩展工具5