绘制线框原型图的10个要点，做与不做

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

首先，我们需要搞清楚的一点就是线框图不是真正意义上的原型。许多设计师和产品经理，甚至是经验丰富的设计大牛往往也很容易混肴这些专业术语。什么是线框图什么是原型什么时候使用线框图什么时候使用原型

提供信息和功能——线框图，我该如何互动或如何使用——原型。

什么是线框图

线框图是一种低保真且静态的呈现方式，设计师通常使用纸笔来表达自己的想法。只要能明确表达内容大纲，信息结构，布局，用户界面的视觉以及交互行为描述即可。就像建筑蓝图一样，蓝图也就是施工方案，详细描述改如何建造建筑。绘制线框图重点就是要快，明确表达自己的设计想法，它不是美术作品，无需过多的视觉效果。黑白灰则是它的经典用色。

什么时候使用线框图

线框图(Wireframe)是软件或者网站设计过程中非常重要的一个环节。线框图常常适用于非正式场合，用于团队内部的讨论。

花费成本

线框图的花费成本可以说是零，只要有纸笔，或白板就能完成你的想法的构建。不过有的产品经理用Word，有的用Photoshop等。但一般不作为用户测试。

什么是原型

原型通常是中高保真的呈现形式。以接近最终产品的形式来考量产品的可用性。它能够实现和验证你的设计理念。原型是程序开发过程中的重要步骤，并且允许我们进行一些初步的测试。

什么时候使用原型

原型常用于做早期测试，以确保你的想法符合目标市场。在产品发布之前，没有原型和对用户的测试，这个产品注定是失败的。在原型设计阶段花费的时间，可以避免额外的工作和成本。相对于纸上的产品设计文档，产品原型更加有效，这样可以让所有的测试人员以及用户知道你产品的创意所在。

Visio不能，但是用Edraw Max亿图绘图工具可以。在亿图里，有专门的线框图，很方便，模板多，素材多，免费用。

随便给你看看模板~

还有程序开发的流程图。应该你想要的图都能够绘画。

百度的安全地址：http://rj.baidu.com/soft/detail/10099.html?ald

---