曾经在一次朋友聚会的时候，一位从瀛海威时代开始从业的老前辈说起了他的故事。

他高中毕业，大学没有考上，自学Photoshop去了广告公司当了一个小小的设计师。工作几年，发现没啥进展。正好这个时候互联网开始兴起，于是又去自学了JSP，成为了一名程序员，后来在公司无聊，自学了C#，闲来无聊搞了个小软件，结果发现用的人挺多，正好风投也找了过来，就自己出来创业了，历经3次起起伏伏的创业，现如今也算是一个不大不小的互联网公司的老板。

他说这一路走来，学会了Photoshop、Auto CAD、3ds Max、Maya、Premiere、Flash、ASP、JSP、PHP、C#、.NET等等一大堆有用没用的技能，最后发现这些技能用处都不大。最后他终于领悟到了，在职场，尤其是互联网行业，什么技能最重要？——学会做一个好的PPT。

PPT主要应用是在会议上展示、并辅助演讲。不过在项目管理中，我们更多情况下将之应用于方案的提交、沟通。在项目初期的设计环节，我们对于甲方的需求只是靠推理和猜想，为了确认我们心中的想法是否正确，我们需要将我们的推理猜想通过PPT制作提交，与甲方进行确认。设计方案与执行方案不同，必须通过实际的图片效果来说明我们的想法，但是当全部设计完成了再去确认，一旦出现问题，那就面临重做的窘境，所以这时候我们往往是同过“设计草图”加上一些说明文字来阐述我们的设计想法。如何制作设计草案、如何将草案制作成PPT交与甲方并与之沟通？在这一小节里，我们还将继续小明的故事，并在故事中给出答案。

故事板

所有前期的设计思路都已经捋清楚了，这时候距离拿到需求已经过去了半小时，小明开始准备素材的故事板。

小明从素材库中搜索了一批图片，从需求邮件中也挑出了几张产品图，把他们放在了“故事板”上，经过筛选，最后挑选出来了一堆“可能有用的素材”贴在了故事板上（见下图）。

在整个挑选过程中，小明首先是靠直觉挑出“可能能用”的素材，再根据大脑中最初对于设计的思路，评估这些素材是否符合这个设计体系。当一切都准备就绪，小明就开始准备设计草案的制作了。

故事板最初用于电影、电视的创作，后来广泛应用于各种视觉设计门类，是软件显示效果的视觉草图，用于视频创作和广告设计，表达作者的创意的一种方式。在网页设计方面应用，故事板主要的好处是便于筛选素材，当所有的素材放在一起的时候，素材的好坏优劣，是否可用就一目了然了。同一个元素不宜准备过多的备选素材，以免挑选的时候“选择恐惧症”发作。当然，备选素材存在是有意义的，挑选素材阶段毕竟不是实际制作阶段，很多看起来应该不错的素材，实际使用的时候却会发现各种问题，这时候备案就变的很重要了。

“故事板”听起来是个“高大上”的概念，实际工作中就是一个PSD文件，用来排列摆放所有的素材。这个文件请保留到整个设计全部完工之后再删除，以免需要大幅修改设计的时候找不到原始素材。

设计草案

故事板准备齐备，小明开始准备设计草案。首先开始考虑的是一个大背景，对于这个项目而言，场景气氛的烘托是页面成败的关键，所以从这里入手较为合适。大致拼贴了背景之后，小明开始按照当时在规划时候对于页面整体的理解，将页面上主要的元素排列了一下。三拼两凑之下，一个页面的大效果就出来了——虽然这个时候基本不能看。

刚开始学画画的时候，总是画不好色彩。老师只告诉我一个办法：以最快的速度将画面全部填满。

对于人的视觉而言，最一开始入眼的东西都是“看起来很新鲜”的，这时候对于元素的判断是最为明锐的（很多明明很丑的东西，看时间长了也就不觉得丑了，这就是视觉补偿效应带来的问题）。所以说，用“触感视觉”判断大体的感觉，对于设计师而言是非常实用的。一来，这时候铺大感觉的东西能够快速确定整体画面的平衡性和整体感；二来，即使在这个阶段对于画面大感觉不满意，我们仍然有足够充裕的时间去进行快速调整。这时候的调整是非常效率的，并且也是对于后面设计影响最小的。

问题是一旦到了实际操作阶段，我们往往会因为迷恋一些小细节的效果，从这些效果出发，一点一点把设计“抠出来”。这样操作的弊端很明显，当我们设计到一定程度，发现我们费尽心力抠完的那个“亮点”最终在设计中格格不入，“壮士断腕”的决心并不是所有人都能下的。毕竟是花费了较大精力去做的东西，去掉舍不得，不去掉，又觉得画面实在无法平衡。即使我们下定决心去掉这个“亮点”，为整个设计重新找回平衡，在这个阶段也是一件很困难的事。所以，在这种情况下，怎么选择都是伤筋动骨的，不少情况下甚至成本高过重新做一个页面。

如此粗糙的大效果自然是不成的，接下来小明要做的就是用最简单的方式，完成页面的基础效果。在这个阶段，怎样效果最明显、最直接，就用怎样的方式来实现。

首先，小明要做的是根据最初想好的配色方案统一色调，然后是把背景修成一个完整的场景。这样一来，背景比之前真实多了，接下来处理的事是违和感极高的越野车，需要让他感觉和场景融为一体——至少要让车子看起来是实际放在场景里了，而不是贴上去的。用笔刷喷出雪花四溅的效果，再加上车身整体调色和局部的一些小调整，三两下的功夫，页面的违和感渐渐减弱，画面的大感觉也渐渐完整起来了。

虽然看起来大致的画面已经非常完整了，但是就这个草案目前的状态，离能够提交的草案还有较大的距离。从场景气氛的渲染来说，这个效果和我们的预期还比较大的差距，虽然场景的开阔感有了，但视觉上的冲击感很弱，这个时候，简单的径向模糊加上动感模糊，再加上简单的其他小元素的收拾，场景的冲击感达到了草案所需的标准。虽然依然很粗，但这已经是一个大致看得过去的设计草图了（如下图）。当然，既然是草图，细节不完善再所难免，但是这毕竟是草图，只要能够说明我们的设计想法和思路就可以了。更何况，一份草图风险太高，我们还需要很有效率地出另一个草图作为备案呢。小明看了下手表，时间过去了一个多小时，看来时间还够用啊！赶紧做下一个草图吧。

曾经写过一篇帖子，提到过做设计草图的好处。当时有不少人有疑问：草图真的有必要吗？不是浪费时间吗？时间项目这么紧张，真有必要做草图吗？——想一下之前提到的二八理论吧，还记得在整个设计的过程中，哪些步骤是关键性的20%么？如果你还记得，那这个问题就容易解释了。

假设按照两天一个页面来计算（这个时间对于一个普通的网页设计绰绰有余，但对于一个高质量页面而言，就远远不够了）。在两天的时间里，一天上班八小时，抛却你聊天、吃饭、吃零食、逛各种天猫豆瓣的时间，差不多真正用在设计上的时间也就一天5-6个小时，两天来算的话，也就是12个小时。在这个12小时里，完成一个粗略的大效果的时间，估计也就2-3个小时（这已经是做的比较细致的了，至少比上面的那个草图细致多了！）

剩下来的时间里抛去思考设计思路、寻找设计素材的时间，花费在设计上，绝大多数时间是花费在举棋不定的犹豫和后期平衡细节调整这些细碎的工作上！（不管你承认不承认，仔细想一下，是不是这样的？）当你花费2天时间，完成了这所有的一切。拿着心血之作的设计稿给到甲方看的时候，甲方来一句：不是我要的，重做吧！——这时候你的心肯定在滴血的。

所以，设计草图的好处相当明显：一个设计草案，如果你设计技法熟练，1-2个小时就能搞定。但是当你拿着这样的草案找甲方确认的时候，往往会赢得甲方的信任。因为你的反馈很及时，对待项目的态度也很积极，在这种先入为主的感情分影响下，只要你的大效果不是丑陋到让人类无法接受，甲方不会太吹毛求疵的——毕竟，是草图嘛！只要风格大致是他们要的，他们的诉求能从页面展现出来——后面不还是会深入的嘛？！

退一步说，即使设计审核没有通过，你也只需要再花费1~2小时出另一个草案，对于你而言，损失的只是几个小时的时间，这远远比花费两天做一个页面，然后被拍回来重做强多了！

当然，有一个需要注意的问题，提交草案的时候一定要说清楚：这是用来确认大感觉的草案，细节会后期深入的。否则甲方看到你那这样一个粗糙的半成品出来给他看，结果会适得其反。

第二个草案的制作效率明显会比第一个草案快速，因为出发点是一致的，诉求点是一致的，小明需要做的是通过逆向思维找到另外一种表达的方式。第一稿草案用的是很直接方式表达“野性”；那么第二稿就可以换一个思路去表达这种观念：无论出于怎样“野性”的环境，这款越野车都能给你带来安全舒适的体验。基于这个想法，小明快速的设计出了第二稿草案（如下图）。

PPT

设计草图全部完成了，接下来的工作就是制作方案PPT了。找出现成的设计方案模板，贴上两个方案，外加几句简单的说明，一个PPT就完成了。小明看了下时间，正好到了吃中饭的点，PPT制作完成，邮件发完，小明快乐的和小伙伴们去吃必胜客了。下午需求方上班了，电话再去确认下进度，要是没问题，就可以细致刻画页面了。

草图的目的不仅仅是在确认设计本身，更大的意义在于与甲方建立相互信任。所以，草图尽量不要只做一张，可以多准备几张——对于甲方而言，有选择总比没选择情况好很多，而且准备的越充分，要求重做的可能性越小——这么多方向中，总会有一个方向是合适的！

上面案例中，由于时间紧张，设计时并没有太多的时间去准备多稿设计草图，只做了两稿草案。在这种情况下，“爱因斯坦小板凳效应”是我们可以利用的（关于爱因斯坦和小板凳的故事，有兴趣的同学可以自行百度下，在这里我们就不详细展开了）。为了突出一个相对不错的方案，使用一个相对质量略次（当然，至少应该是及格线以上）的方案去做比较，往往会提高方案通过的概率。

只要明眼人都会觉得A稿比B稿更合适于这个项目，小明希望A稿最终能够通过甲方的审核，所以相对而言，B稿上花费的经历没有A稿多。但是B稿件从视觉效果上来说，中规中矩，并无不妥。而且从PPT里的说明来看，小明对于B稿的设计也是花费了一定的精力的。所以在甲方看来，两稿事实上都是小明用心去琢磨之后的结果。只是从感觉上，肯定会偏向于“小明更用心设计”的那一稿，相比较之下，A稿就会更容易获得甲方的认可。当然，使用这种策略的前提是A稿设计必须足够用心，足够的有说服力。

展示方面，小明也是花了一些心思的。这个案例中，小明使用的是自己设计的标准模板，这种模板通用型较强，并且显示效果也相对经得起考验。PPT的模板未必要设计的细节到位，但至少要美观简洁。本来就是做设计的，模板都做得不好，这就太不专业了。

模板的设计，核心在于衬托页面效果，为页面加分，当然，这一切的前提是要有良好的阅读感——所以展示区域的不用华丽，但一定要简介明了。出于通用性的考虑，使用白色或者高亮灰这类单色的消色背景是个不错的选择。这样的背景较为百搭，基本上适用于所有风格的网页设计展示。

果然，如小明预料，A稿的设计最终成为了这个项目的主方案，之后的工作就是各种细节调整，当然调整中有一些和小明预想中不一样的地方。但是大体上的思路还是获得了甲方的认可，最终的设计稿件呈现如下所示。

总结

小明的故事到此告一段落。这个故事给我们的启发就是：使用合适的方法，有目的地去进行需求分析；使用合理的流程去控制设计结果，这样的设计方式相较之粗放式的设计方法（灵感→凑设计→改设计）更为有效率。

需要说明的是，这种制作方式比较适合于时效性较强的小项目：企业网站、MINISITE、活动页面都适用于这种方法，而对于项目周期较长，偏重用户体验的门户网站或者电商网站的页面设计，除了设计风格之外，最为重要的是一个标准化的规则制定。所以在下一小节里，我们就来说一下网页设计的另一面——标准化设计。

完

本文节选至

网页设计那些事

作者：王晖 

爱读｜www.iread360.com

爱读 ，您的职业进阶课堂。聚焦热点专业，汇聚行业精英，打造精品课程，致力于为您提供专业的在线学习服务及线下高级培训