网页设计：高手教你如何设计好Web首页网页设计：高手教你如何设计好Web首页.doc

网页设计：高手教你如何设计好Web首页 无论是涂鸦高手，还是素描菜鸟，手绘能够助你提高网页设计效率。画笔和纸张来进行创作依然是重要的设计技能。今天与大家分享的是 这样的线框图看起来文字非常多，并且很难通过这个图来表达作品的风格和基调，特别是一些照片与视觉上的素材。你什么时候见过这些大“XX”描述过将要放在这里的图片？ 通过速写，你可以迅速的将自己脑海中的创意记录下来。手绘草图是非常有效率的，你可以减少在电脑前的工作时间，花更多的时间关注于创作，你只需要卷起袖子就可以找到解决方案。 这个草图最终会制作成PS格式的电子图片。你可以看见电子草图与手绘草图布局的相似之处，也会发现手绘草图更能表现最终作品的艺术风格。 使用手绘草图可以减少替代图片的使用（就是那些替代你正式图片用的大叉叉），手绘网页草图也可以为你节省购买替代图片的成本。 如何开始？ 有一点是可以肯定的，那就是熟能生巧。所以拿起笔，操起速写本开始不停的涂鸦吧。 我发现最好的方法就是在排队或者等待的时候练习速写，在你喝咖啡的时候，或者在杂货店购物的时候，又或者在等火车的时候，任何等待的时间都可以利用来进行手绘练习。画下任何你看到的东西，这将会帮助你给在客户面前呈现你的想法。对每日所见的物品进行绘画可以帮你收集灵感，随身携带速写本的话你就可以随时记录下自己的想法。随着练习的时间与数量的增加，你的手绘将会越来越精致，并且会发展成为更正式的绘画风格。 网页设计师的手绘 在计划制作一个网页时，手绘是计划中不可或缺的一个部分。你可以使用它来进行设计、用户体验测试，用户界面元素设计，甚至是字体的测试。我曾经在几个网页上使用手绘草图的方法来进行项目的创作与制作，例如摄影图片和图标设计。我也曾经使用手绘来解决棘手的用户界面问题，例如如何制作能够舒适使用的按钮。 手绘是进行设计想法交流的最佳工具，并且客户们也喜欢具有创意的元素，让他们也加入到这个过程中来，你会发现他们也喜欢涂涂画画。以前有一个客户对我说过：“我想到了你就可以画出来，实在是太神奇了。”这就是在客户会议中现场手绘的魔力。 警示！练习，练习，再练习 要警惕，这个世界是很残酷的，练习手绘也会是很困难的。如果你不是个绘画老手，或者没有准备好绘画的工具……那就还是在工作之余多花些时间练习吧。如果想找些灵感，就常去看看Worldwide Sketchcrawl， Doodlers Anonymous，还有Urban Sketchers。在研读绘画教程和不断在绘画博客上提交习作之后，你就要想想我是不是已经准备好在客户面前进行手绘了？ 要记住，简笔画是不能打动人的，所以有能力进行手绘是非常重要的一点。也许你需要花些时间来练习，并想想如何在客户面前展现你的创意。 在手绘设计项目草图时需要提出的问题 首先我会问自己，我了解那些我将会在设计中使用到的东西吗？如果是一个再设计项目，我会将已有的元素列成清单，并写出顾客们期待看到的新元素。 如果是一个新的网页，我会参考同类型的网站并对这些网站进行竞争分析，同时明确用户们的需要，把这些要点写成清单。接下来，我会询问客户是否有特别喜爱的设计风格。很多时候客户都有自己喜爱的网站，了解这些对接下来的设计是很有帮助的。色彩搭配、字体选择、语言风格、视觉元素，还有设计趋势，这些往往会对市场营销造成影响；图片分享、情绪展板、还有设计“寻宝”，这些环节都会帮助你了解客户的喜好。 手绘一个设计草图 这是我为一个私立学校设计网页是画的草图。目的就是要在充分展现网页布局的同时，又不浪费太多时间在PS的渲染上。 首先，将页面上的关键内容收集起来。我会使用便利贴或者建立一个文档，当然，我还是会从文字入手，不过文字只是将最原始的创意记录下来，这样我就清楚网页上将会出现什么内容。 第二，我会从不同的创意中挑出一些来进行手绘。一点我有了很棒的点子，我就可以下定决心完成它，通常我都会从客户和同行中得到很多反馈，手绘草图在视觉上是很不正式的，这样客户会更放心的选择中意的方案来进行下一步的制作。 典型的项目流程 这就是由选出的草图制作成的PS成品。你可以看见手绘草图对图片选择的帮助。 大部分的项目，我都会从简单的方形和一些缩略图开始画起。这个过程非常简单，但是它帮助我为客户、经理和合作伙伴提供很多选择。 当我们开始讨论缩略图和缩略图背后的想法时，我会将选好的缩略图用粗糙的手绘来进行表示。这些草图可以帮助确定网页中内容的主次和页面的布局，我也会画下照片和其他素材，用来为按键或者其他图标的排版做准备。在初期我会尽量弄清楚用户想要的是什么，还有如何安排好网页上的内容，这个阶段是需要合作的。我会将我的草图展示给客户、经理、团队伙伴们，如果需