线框是一种只使用简单形状来呈现界面的一种表示形式，如框、圆、线和箭头。设计人员使用线框，来传达信息的层次结构和内容结构。在本文，作者详细解析了线框图的确切含义以及制作线框图的方式。

在软件开发进程中，时间是最宝贵的资源。产品设计者会进行不断尝试，在不降低产品质量的前提下缩短产品上市时间。在节省时间方面，设计师们会尽量使用一些工具以最方便快捷的方式来传达必要信息。

在许多不同的设计中，设计人员和开发人员之间会有一个主要的交流工具。设计师会利用这个东西来把他们头脑中的想法传递给开发人员，最终由开发人员来实施具体的决策，这个东西就被称为线框图。

在本文中，你会了解线框图的确切含义以及制作线框图最好的方式。

什么是线框图

在我们深入研究如何绘制线框图之前，我们需要明确线框图是什么。线框是一种只使用简单形状来呈现界面的一种表示形式，如框、圆、线和箭头。设计人员使用线框，来传达信息的层次结构和内容结构。

线框VS原型

许多设计师将线框与原型混淆，线框和原型并不是同一个东西。虽然两者在可交付成果之间存在重叠，但原型更侧重于交互性，它们通常寻找一些真实用户来进行测试，而线框经过审核和批准后，原型就产生了。

何时应创建线框图

通常情况下，线框是在设计进程的早期阶段。在构思阶段，设计师需要探索各种不同的选择，然后选择出最佳的一个。这个阶段，线框图就显得非常有用。因为它可以帮助设计人员来组织布局，而无需明确的展示产品的视觉设计。

十个线框图绘制技巧

1. 切忌一开始就试用数字化工具

尽管现代原型设计工具可让你在短短几分钟内创建出线框图，但在线框图中原型设计工具却很难胜过笔和纸（特别是当你正处于设计过程的构思阶段时）。设计师在构思阶段的目标是尽可能多地构建想法并迭代寻求最佳解决方案，所以使用笔和纸来创作更容易。通常，在纸上整理想法越多，转移到你的电脑上的速度就越快。

2. 在画图之前，不要去评判你的想法

“这没有任何意义”这在头脑风暴会议期间是一个非常常见的短语，在考虑解决方案时，人们倾向于“要做就做最好”这种理念。但是出于许多原因，这种方式可能适得其反。

最可能的原因是，你很容易就忽略了一个有价值的想法，因为脑海中来呈现确实有一定的难度。这就是你需要笔和纸的原因，第一时间把你脑海中的想法画在纸上。这样不管任何时候，你都可以直观的来表达你的设计方案。

当你探索各种想法时，建议你遵循一种名为Crazy Eights的技术。将一张纸折叠成八个不同的部分，然后尽快设计八个不同的部分。

3. 不要过分关注草图的质量

在绘制线框图时，关注的不是细节而是你的速度—尽可能快地完成工作。请记住，线框图中最重要的是你想传达的想法。线框图的目标不是展示你的设计艺术和技巧，而是去探索各种布局。因此，提供足够的详细信息，方便以后可以查看和优化你的草图。

4. 利用好的工具

绘制线框图的工具会直接影响你工作的效果和结果。首先，你需要给自己一只好用的笔，这里我建议使用三种不同的笔来绘制草图：

• 黑色的记号笔，用于线框图。
• 彩色笔，用于阴影元素。
• 荧光笔，用于着色。你可以将其作为强调色以吸引用户注意。

其次，尝试使用虚线纸。虚线纸可以帮助你更准确地绘制形状和布局。

5. 不要使用真实的UI元素，而是使用占位符

线框中的文本和图像并不是最终产品，而且，在产品设计的早期阶段可能无法使用真实数据。因此，设计师可以使用常用的占位符而不是真实的文本和图像。

• 图像可以用×来表示。
• 标题用大号粗体线来表示。
• 文字可以用水平线来表示。
• 视频可以用一个框来表示，中间添加一个播放按钮。

着陆页线框，该页面包含一个主要图像、标题、三个视频组件。

6. 使用颜色突出显示元素

虽然线框图不需要具备成品的任何视觉属性，但仍然可以用颜色来展示你设计的某些部分的含义。例如：使用对比色，可以将用户的注意力集中在某些特定元素上。

7. 注释线框图

线框的主要问题是它们是静态的，使用线框，可能很难传达意思，尤其是当你的屏幕非常复杂时。因此，参与者/团队成员可能很难理解用户与屏幕之间如何来进行互动。设计师不仅只是提供一个线框图就够了，而是应该在线框中提供批注或注释，以便参与者能够清楚明了。

8. 记录你的线框

为了避免每次会议都要携带纸张，你可以使用智能手机来创建一个数字化副本，你只需拍摄每张线框图并将它们存储云端即可。

9. 与团队分享你的线框

不要自顾自的工作，请记住：最好的设计决策来自于团体工作。因此，不要害怕去分享你自己的草图，经常得到别人的反馈可帮助你快速的进行下一个设计决策。

• 收集反馈并向他人学习，将线框与团队成员分享，看看你的想法是否有价值。欢迎提一些有建设性的评判，让参与者和团队成员有机会发表意见。
• 在向他人展示想法时，请使用草图作为你故事的补充。

10. 使用特定的工具

当你需要切换到数字工具，想进一步完善你的想法时，有一个环节是坚决不可少的，那就是选择一个强大的原型设计工具。

结论

绘制线框图的方法无所谓对错，所以不要把我在这里说过的所有内容都视为真理。尝试不同的草图方式，最终你会找到自己的绘制风格。记住，你画的线框图越多，你的技能提升的越快。希望大家享受这个过程！

原文作者：Nick Babich

原文地址：https://www.mockplus.com/blog/post/sketching-your-wireframes

本文由 @jongde 翻译发布于人人都是产品经理。未经许可，禁止转载

题图来自 Pexels，基于 CC0 协议