让高手教你如何规划网页设计草图

图：这样的线框图看起来文字非常多，并且很难通过这个图来表达作品的风格和基调，特别是一些照片与视觉上的素材。你什么时候见过这些大“XX”描述过将要放在这里的图片？

通过速写，你可以迅速的将自己脑海中的创意记录下来。手绘草图是非常有效率的，你可以减少在电脑前的工作时间，花更多的时间关注于创作。你只需要卷起袖子就可以找到解决方案。

图：这个草图最终会制作成PS格式的电子图片。你可以看见电子草图与手绘草图布局的相似之处，也会发现手绘草图更能表现最终作品的艺术风格。

使用手绘草图可以减少替代图片的使用（就是那些替代你正式图片用的大叉叉）。手绘网页草图也可以为你节省购买替代图片的成本。

图：这个就是网页的样本。你看到从手绘草图到最终样本的进化过程了吗？

如何开始？

有一点是可以肯定的，那就是熟能生巧。所以拿起笔，操起速写本开始不停的涂鸦吧。

我发现最好的方法就是在排队或者等待的时候练习速写，在你喝咖啡的时候，或者在杂货店购物的时候，又或者在等火车的时候。任何等待的时间都可以利用来进行手绘练习。

画下任何你看到的东西，这将会帮助你给在客户面前呈现你的想法。对每日所见的物品进行绘画可以帮你收集灵感，随身携带速写本的话你就可以随时记录下自己的想法。

随着练习的时间与数量的增加，你的手绘将会越来越精致，并且会发展成为更正式的绘画风格。网页设计师的手绘

在计划制作一个网页时，手绘是计划中不可或缺的一个部分。你可以使用它来进行设计、用户体验测试，用户界面元素设计，甚至是字体的测试。

我曾经在几个网页上使用手绘草图的方法来进行项目的创作与制作，例如摄影图片和图标设计。我也曾经使用手绘来解决棘手的用户界面问题，例如如何制作能够舒适使用的按钮。

手绘是进行设计想法交流的最佳工具。并且客户们也喜欢具有创意的元素。让他们也加入到这个过程中来，你会发现他们也喜欢涂涂画画。

以前有一个客户对我说过：“我想到了你就可以画出来，实在是太神奇了。”这就是在客户会议中现场手绘的魔力。

警示！练习，练习，再练习

图：城市画者是一个国际性的、非盈利性的、致力于手绘观察的网站。它在Flickr和Facebook上都有很有影响力的社区。它的官方博客上精选了一群手绘高手的习作来分享给大家。你可以在它的博客、Flickr还有Facebook社区上找到很多值得参考的绘画技巧。

要记住，简笔画是不能打动人的。所以有能力进行手绘是非常重要的一点。也许你需要花些时间来练习，并想想如何在客户面前展现你的创意。

图：这是个初期的电子手绘草图。我当时在尝试着将线框数位手绘与Wacom数位板混搭使用。从这里我发现，想要更多地与客户进行互动，简笔画是远远不够的。

在手绘设计项目草图时需要提出的问题

首先我会问自己，我了解那些我将会在设计中使用到的东西吗？如果是一个再设计项目，我会将已有的元素列成清单，并写出顾客们期待看到的新元素。

如果是一个新的网页，我会参考同类型的网站，并对这些网站进行竞争分析，同时明确用户们的

需要，把这些要点写成清单。

接下来，我会询问客户是否有特别喜爱的设计风格。很多时候客户都有自己喜爱的网站。了解这些对接下来的设计是很有帮助的。色彩搭配、字体选择、语言风格、视觉元素，还有设计趋势，这些往往会对市场营销造成影响。图片分享、情绪展板、还有设计“寻宝”，这些环节都会帮助你了解客户的喜好。

手绘一个设计草图

图：这是我为一个私立学校设计网页是画的草图。目的就是要在充分展现网页布局的同时，又不浪费太多时间在PS的渲染上。

首先，将页面上的关键内容收集起来。我会使用便利贴或者建立一个文档。当然，我还是会从文字入手，不过文字只是将最原始的创意记录下来，这样我就清楚网页上将会出现什么内容。

第二，我会从不同的创意中挑出一些来进行手绘。一点我有了很棒的点子，我就可以下定决心完成它。通常我都会从客户和同行中得到很多反馈。手绘草图在视觉上是很不正式的，这样客户会更放心的选择中意的方案来进行下一步的制作。

典型的项目流程

图：这就是由选出的草图制作成的PS成品。你可以看见手绘草图对图片选择的帮助。

大部分的项目，我都会从简单的方形和一些缩略图开始画起。这个过程非常简单，但是它帮助我为客户、经理和合作伙伴提供很多选择。

当我们开始讨论缩略图和缩略图背后的想法时，我会将选好的缩略图用粗糙的手绘来进行表示。这些草图可以帮助确定网页中内容的主次和页面的布局。我也会画下照片和其他素材，用来为按键或者其他图标的排版做准备。

在初期我会尽量弄清楚用户想要的是什么，还有如何安排好网页上的内容。这个阶段是需要合作的。我会将我的草图展示给客户、经理、团队伙伴们。如果需要，我们甚至会让一些用户来进行测试。接下来我再对草图进行变更和完善。

一旦草图大致定下来之后，我会画一个正式的线框图。像传统的线框图一样，手绘的线框图会有具体的内容，文字、图标以及图片。这样我的设计风格以及一些创意就会在这个草图中得到测试和印证。我也会使用手绘线框来测试用户界面的元素，以确保它们能够被使用。我们会测试所有的方案，有时候也会有产生一些介于两者之间的设计方案。

有些时候，当我需要对客户进行正式的展示时，我会使用墨水而不是石墨来进行手绘。墨水会增加手绘的正式感，如果要上色的话，我也不用担心因为石墨的不稳定而模糊了网页上的界面元素。

最后，你将会建立自己的设计流程。手绘最棒的一点就是它使设计变得自由。你可以随时随地记录自己的创意。

实用的手绘“利器”

图：找到合适的绘图工具很重要。我很喜欢用防水的Uni-Bal Vision. 一只便携的小毛笔可以方便填充颜色。

一般来说，这些就是会议中互动绘画常用的工具。

钢笔——我很爱用钢笔来画画。当然，这需要有一定的自信，但是你可以随时重组你的线条。客户也很喜欢墨水的可见性。我最喜欢的笔是Uni-Bal Vision。它是防水的，你可以使用水彩来上色。

便携白板——拿一张旧的白板，然后裁成小块，这样就有很多小的便携白板了。你可以带着你的便携白板从一个办公室到另一个办公室，也可以与印象笔记一起使用来记录工作和草图。

大尺寸速写本——不要畏畏缩缩的用小尺寸的速写本来为客户画图。找一个至少14英寸长的本子。这样可以更好的展示你的作品。

活动挂图——活动挂图其实跟便携白板差不多，都是可以吸引客户的工具。如果是可粘贴的，就可