你曾有过开发一个网站或是一款应用的想法吗？事实上我们很容易的就能蹦出一两个点子，但之后就会发现，这其中最困难的莫过于如何将这些想法以用户界面的形式表现出来。而在这时，手绘草图设计就该派上大用场了。其实在创意产业和建筑领域，人们使用草图设计来开展工作已经由来已你曾有过开发一个网站或是一款应用的想法吗？事实上我们很容易的就能蹦出一两个点子，但之后就会发现，这其中最困难的莫过于如何将这些想法以用户界面的形式表现出来。而在这时，手绘草图设计就该派上大用场了。其实在创意产业和建筑领域，人们使用草图设计来开展工作已经由来已久。就连达芬奇也会在他开始制造自己的那些发明之前，先进行草图设计。所以说不管你有多么的聪明，你都不可能仅仅依靠在脑袋里转一转，就把一个想法很完整的建立起来。因此对于每一位设计师来说，手绘草图都是你在构建想法时必不可少的。

任何一个想法都需要被“翻译”成用户界面

设计用户界面是一个过程，它往往从一个点子开始 ，但需要被转换成用户界面。仅仅说我这个应用里包涵XYZ是远远不够的。你还需要知道每一个用户在众多的设备屏幕上看到它时该如果操作XYZ。在你思考用户体验的时候，草图设计就可以帮助你把这些模糊的想法转换成可被视觉识别的用户界面。哪怕你已经知道自己的应用可以运行哪些操作，草图设计则帮助你去理解应用该如何达到用户期望。

手绘的方式使你很形象的掌握在不同的设备之间用户体验到底是怎么样的，而不至于让这些想法过于模糊。事实上，草图设计将使得你的用户界面设计更加清晰，更具视觉性。

手绘草图不是线框图

很多设计师错误的混淆了手绘草图和线框图的区别。它们之间相似但却不相同。对于图解用户界面概念他们都很有帮助，但是线框图和手绘草图借助的都是不同的媒介，应对的也是不同的目的。

当你在进行手绘草图时，你是在试图搞清楚最基本的概念：即你的应用需求如何以用户界面的形式展现出来。当然，我们有很多种方法来做这件事，但这里你需要清楚的是哪种才是适合你的。事实上在草图设计阶段，我们常常会使用纸和笔这类最简单的工具。这主要是为了方便我们进行大量而快速的思考，哪怕其中的一些想法不太令人满意。在这个阶段的用户界面设计，细节并不是最重要的，最重要的是搞清楚用户在每个切换的界面之间会看看到哪些最基本的东西，因为这些才是决定用户期望的关键因素。

而当你在进行线框图设计时，你其实是在草图理念的基础上完善整个界面的设计：即当采用了这些像素级的灰色布局后，应用到底该如何呈现。这中间你关注的将是更多的细节，诸如尺寸，布局以及元素的顺序。你必须考虑整个页面的所有元素细节，而不再是一些最基本的元素。当你在使用像素级的布局进行设计时，你将站在更精确的角度看待应用是如何运行的。而一旦你完成了整个线框图的设计，界面设计的概念也将变的更为清晰和准确。

在线框图设计之前最好就开始手绘草图

大多数设计师都有自己的一套工作方式。其中有一些人会跳过手绘草图而直接进行线框图的设计，甚至有些还会跳过这两个程序直接开始更为具体的产品原型设计。但不管你忽略了其中的哪一个，你都会因此丢失掉界面设计的许多概念和细节。到最后，关键元素的缺失以及细节上的不够精确，都将给整个界面设计工作带来诸多障碍，而究其原因就在于我们的设计流程出现了混乱。

在这种情况下，你要么在线框图的设计中去提炼界面概念，要么在具体的产品原型阶段去细化界面的精确度。但这其实是适得其反的，因为创建最基本的界面概念本该在手绘草图设计时就该完成的，而线框图的设计是使这些基本概念更趋于细节化。事实上，到了产品原型阶段，界面的视觉图形设计和内容已经完成，而不是该退回去重新提炼界面的最初概念。当你忽略了手绘草图和线框图，你不得不把这些工作在压缩到一个阶段里去执行。对于设计师来说，这不仅把事情变得更为困难，界面的基本设计理念也会因为没有得到足够的重视而让我们丢失掉许多东西。

手绘草图将帮助你与他人一起进行头脑风暴

手绘草图最大优势之一就是在这个过程中，你可以快速的表达自己的想法，并以这种方式邀请他人与你一起进行用户界面的设计。无论你是在白板还是在一张普普通通的纸上进行创作，最重要的是你的同伴可以通过它来理解关于界面设计的基本理念，有了这样的基础，他们在进行各自的工作时将可以为你提供所需要的帮助。另外，你也可以从他们那里得到一些反馈，甚至一些他们的想法，而这种充分的讨论，会使得界面设计环节更加的完善。而对于你的客户们来说，他们甚至可以通过手绘草图自己将想法表达出来。当所有人都在专注于同一个界面设计时，小组的所有人可以在清晰理解的基础上，有效的的推进整个项目。

手绘草图将帮助你更快的思考，更有效率的工作

如果没有提炼出最基本的界面设计理念，那么要做好线框图的设计将是很困难的，因为你不能如你所想的那样进行快速的布局设计。但假如你已经有了这方面的基础理念，你就可以按照自己的工作方式来进行用户体验设计。我们的想法总是源源不断的，但是我们要知道在像素画布上进行表达是远远没有将它们放在简单的纸笔上来的快。手绘草图允许我们快速的探索不同的选择，以从中选出我们觉得最好的方式。如果当我们在线框图设计之前就获得了最基本的界面设计理念，那么整个设计过程将变得更有效率。

草图将使你的线框图包含更多的细节设计和精确性

假如你的线框图包含了最基本的界面设计理念，你就不需要劳神哪种方式应该被带到用户界面中来。虽然有很多方法帮助我们在执行用户体验设计时以达到我们预期，但是假如你在手绘草图阶段就已经完成了，那在线框图阶段就不需要增加不必要的负担。界面设计的基本理念将让你的线框图设计包含更多的细节，因为你已经花费了很多的时间去将它精确化，所以在思考采取何种方式的设计时只需花费较少的时间。到最后，你的线框图设计已经具备了足够多的细节和精确性，你就有更多的精力投入到原型设计阶段的视觉表现和内容上。

草图虽然难看，但管用！

相信我，你不需要具备专业的绘图功底就可以玩转草图设计。要知道，哪怕你画的再难看，它仍旧很管用。草图设计关注的并不是你的艺术才能，它看中的是你如何去表现不同的界面设计理念。手绘草图为我们提供了一种窥视自身想法的入口。你在想法上任何一点细微的变动，都可以在草图设计时迅速的得到调整。这不像是最后的产品原型设计，手绘草图不需要很美观，这就意味着你不需要任何专业上的技能也可以操作它们。另外，它还可以让你的团队成员很容易的参与进来，这样就可以为最开始的界面设计工作带来很多的价值。

永远不要低估了草图的力量

事实上，手绘草图为接下来的设计工作定义了基础。这些基础对于精巧的用户体验设计和团队沟通来说，是非常核心的。也许你已经知道想要的用户界面是什么样的，因而觉得不再需要进行手绘草图设计。但是当你实际的去进行草图设计时，你会发现跟你最初的想法相比，这里出现了更多的可能性，所以有可能你之前预设的道路并不是最好的。手绘草图可以将你的用户界面所出现的所有可能性包含进去，而从如此众多的可能性中选择什么，则完全取决于你自己。

原创翻译@一笔一画的小胡子

原文链接：http://uxmovement.com/wireframes/why-its-important-to-sketch-before-you-wireframe/