编辑导语：我们常轻忽身边习觉得常的事物，以为没有须要为一些看似简朴又无关紧要的对象挥霍时间——譬喻线框图。固然没须要凡事都寻根问底，但对面临巨大问题时，量力而行回归根基面也许才是基础解法。本文深入先容措施开拓界面设计中，最简朴也最容易被轻忽的线框图设计。

接下来用以下几个点举办说明：

什么是线框图？

常见误区

为什么要画线框图？

奈何画线框图？

组织团队一起画线框图

CB Insights 做过一份调研陈诉《创业公司失败的20大原因》，内里说17%的创业公司认为他们失败的原因在于用户体验不足友好。

究竟设计出一个对用户友好的界面并不是一件容易事，出格是对付多维度、干系交织和要素浩瀚的巨大产物来说。

要设计这类产物时，我们应该自上而下，从顶层理念到详细细节的要领，而线框图是更好的东西。

一、什么是线框图？

线框图（Wireframe）：它是展示Web可能App框架的视觉指南。

绘制线框图的进程中，我们需要思量用户需求和利用流程，并在相应的页面上部署需要的内容和成果。

软件开拓的初期阶段，产物在进入视觉设计和内容填充阶段之前，我们可以用线框图来搭建页面的根基框架和布局。

乍一看很简朴，较量线框图已是日常事情的根基环节，交互设计师也不少见。但这就是本文开头提到的问题，我们往往对看似简朴的工作缺乏重视。

线框图的更大意义，是帮我们界说产物可能处事的方针。

可以说，线框图设计的主要目标，就是向团队、率领、相助同伴展示App等应用措施将拥有哪些页面和组件，以及这些元素将如何彼此浸染。

从这个层面来说，我们可以知道线框图对付开拓进程和最终产物泛起的影响有多大。

二、线框图的常见误区

为了完成任务而画线框图

直接跳过线框图阶段

做完了视觉再开始筹备线框图

不领略为什么要用线框图

线框图应该先于视觉设计阶段，而不是反过来。不然就像在敲完代码今后，再抉择选择你App的技能栈一样。

好的线框图是设计质量的担保。我们越相识其利用目标，收益也就越大。因此我们才需要更深入探讨利用线框图的原因及其代价地址。

在现实中，一些缺少产物设计常识的公司大概会直接跳过线框图阶段，固然这可以削减本钱，但也会发生风险。

碰着这种环境，设计师可以实验主动表明为什么要画线框图、它对我们的产物有什么长处、奈何节减开拓本钱？

三、为什么要画线框图？ 1. 辅佐团队确认事情内容

线框图答允设计师用可视化的 *** 快速建设产物原型，并向团队展示那边需要修订，界面有哪些，上面有什么元素和控件，它们是怎么交互的。

同时，欣赏可视化的线框图要比阅读说明书快得多，也能淘汰预期和最终制品之间的差别。

2. 让所有团队成员都能参加产物设计

我们必定碰着过这样的环境，做出了一流的设计却苦于开拓实现的限制。利用线框图能让我们拉上开拓人员在早期阶段一起接头设计，使他们可以或许在你举办视觉设计之前提供反馈和发起，这样可以或许加速设计流程从而制止挥霍时间和款子。

3. 为客户提供原型

从客户和上级率领哪里获得快速反馈是设计中一个重要的部门。我们都经验过来自他们的改稿要求，这是正常的。有了线框图，我们可以让这个进程更有效率，而不是在开拓原型上耗损更多的时间精神，同时它也能让设计师不会在改稿上挥霍特另外时间。

4. 能执行用户测试

《精益创业》（Lean Startup）的作者Eric Ries曾说过，越早举办用户测试越好——没有人但愿在推出一个应用措施今后才发明用户不知道如何利用它。线框图能辅佐设计师从潜在用户那得到有代价的反馈，而不消花时间去开拓巨大的可交互原型。

但UI/UX设计师们利用线框图并不料味着用得对用得好。

因此下面提供一些实践中的更佳做法以供参考。

四、奈何画线框图？

为了发挥更大效益，为后续事情流程提供基本，利用线框图应该遵循以下几个简朴原则:

1. 淘汰颜色的利用