线框图是设计过程中的第一步，也是整个设计流程中最重要的步骤之一。线框图是你想法开始成形的时候。尽管线框图看起来很简单，但也可以做得很好或很差。相框图的好坏可能对最终产品产生重大影响。下面将介绍正确的与错误的线框图。这些技巧可以帮助打造更好的Web和移动端体验。

线框图是什么？

线框图是用户界面布局的基本框架。线框图使用使用占位符，而不是使用真实的界面元素。线框图被用于早期阶段设计和开发过程中，验证信息架构和用户流程。

线框图为什么重要？

相框图有助于确定移动端程序或网站的界面功能与视觉框架，所以说线框图是设计产品过程中的关键步骤。线框图还可以作为产品文档，指导设计师快速搭建移动端程序或网站。

设计师如何充分利用线框图，以及应该注意什么？

要怎么做？

1.创建线框之前的研究

如果想绘制好的线框图，你必须研究用户需要什么和他们想要什么。考虑两个重要的目标：业务目标和用户目标。这两个目标对产品是否成功起着至关重要的作用。线框框架之前的研究将帮助您设定明确的期望，即您想要使用线框图实现的目标。

2.绘制简单的线框图

绘制线框图与设计其它步骤的主要区别是要简单、快速。其中速度尤为重要。你需要快速的用线框图尝试很多不同的方案，在为问题提出适当的解决方案之前。线框图尽可能的保持简单是至关重要的，因为这可以帮助你避免分心，并且可以清晰地传达你的想法。

3.脑暴各种方案

在绘制线框图框架时，要尽可能多地提出方案。一般而言，提出的设计方案越多，就会越有机会朝最佳解决方案进行迭代。如果能够在一个想法上产生多种想法和变化，可以让您看到每个想法的优点和缺点。

4.确保线框容易理解

线框图可以说是项目前期的一种沟通工具，它可以帮助其他人理解你的想法。当你与其他童鞋对接时，请确保任何人都可以轻松的看懂并使用线框图。如果只有一个人能够理解你的线框，这么说，你的线框图就是不ok的。

尝试遵循以下内容来提高理解力：

a.向一个与你的项目无关的人展示你的线框，并向他提出一些关于工作的问题。这将有助于你理解应该做些什么来提高理解力。

b.为你的线框图进行注释，使其更易于阅读和理解。阅读某些元素或交互的描述要比过看静态图像来理解事情要容易得多。

5.协作

切勿单独思考。当你与其他人一起集思广益时，能收获更多及更好的解决方案。在设计过程的早期应该多向团队成员展示线框图，这有助于验证和改进你的想法。

团队成员的反馈有助于您改善方案 - 听取其他成员对你的设计的看法，根据反馈进行重复性修改。

不要怎么做？

1.绘制完整的产品相框图，不要跳过某些部分

例如：我们电子商务网站的产品中，有结账页面，这与许多其他网站类似的。如果你觉得因为一样可以选择不绘制产品这个部门的线框图，而是专注于应用程序中不太明显的部分。其实这样会导致你遗漏交互内容，影响用户体验。所以请避免这样的误区，确保应用程序的每个部分都有线框图。

2.不要直接使用电脑软件工具绘制

当你准备绘制线框图时，直接使用你最喜欢的电脑软件工具绘制，这看来是没有什么问题的。虽然像Mockplus这样的现代原型开发工具可以在几分钟内创建出功能完整的原型，但在最好先用笔和纸勾勒出你的想法，然后才使用电脑软件。

3.不要使用颜色

你有没有想过为什么线框经常以灰度创建？灰色防止颜色对你造成的分心，帮助你快速完成绘制。线框图的主要目的是搭建用户界面内容并描述应用程序的功能。添加多种颜色可能会导致分心，因此最好避免在线框中使用颜色（除非要突出显示某些特定元素）。

4.不要试图让线框看起来漂亮

不要过分关注线框的外观。线框不是最终设计稿。它们不需要看起来感觉像成最终产品。请记住，线框图是一种工具，帮助了解界面中视觉或交互设计元素的层次结构。当你过分关注美观度，你可能会绘制特别精美的线框图，但可能不会产出真正的解决方案。因此，绘制线框图要努力让它们能用，可以轻松传达你的想法。视觉和交互设计应留在产品设计过程的后期阶段。

5.不要太专注产品中的一部分

不要依附于你的个人想法。可能你很难放弃一些你花费了很多时间的某些东西上（特别是当结果本身并不坏时，但却不符合你设计的产品概念）。但重要的是，线框图被绘制出来前。你需要尝试很多不同的选择（可能10种、50种、甚至100种方案），然后选择最适合问题的一个（或两个）方案。

结论

绘制线框图是用户体验设计师的基本技能。时间就是一颗良药，任何技能都可以慢慢熟练掌握。同样熟练掌握绘制线框图技巧的关键也在于练习。你做得越多，你就会越好。因此，你平时需要投资更多的时间在相框图上，这样在下一次个项目开始时，可以节省大量时间。

原文作者：Nick Babich

原文链接：https://medium.com/mockplus/10-dos-and-don-ts-of-wireframing-8a6d0b3429d8