网站设计转做策划（入门篇）

{:soso_e157:}  http://blog.sina.com.cn/s/blog_639f1b190102dvfc.html


                                                                                 

   文 /

Heidi格物志

同事小Q是个设计师，做设计没话说，最近考虑到将来的上升，想从设计转向策划，进而是管理。当得知了我要离开这个公司的消息，他突然很好学，还拿着笔记本坐到我的隔壁，假惺惺说是珍惜和我最后在一起工作的时光。而一坐下就问如何开始做策划？

从设计转向策划，当然也是很多设计人员的想法。设计不是个长久之计，就像编程一样。我顺手拿起两张纸，在中午休息时做了一次“老师”（脸红一下）。讲完了，看小Q似乎有些收获，不觉洋洋自得。经过这么一讲，我发现我的思路反而清晰了，干脆整理出来。

先声明一哈：本文适合于从设计转向策划的人员。看法也相当相当浅薄，若有大侠在场，尽管拍砖.在很多工作的职能里，和大公司的交互设计有重复的地方，但是大多数的中小型企业，都没有过细的划分，如果要向策划方面转，建议你多看看用户体验设计和交互设计领域的知识。

一，首先需要明白的是：设计与策划的区别。

• 1.做策划，不再是只关注表现，复杂的项目还可关系到运营、营销，除了研究网站是不是“漂亮”，还需要关注网站的商务模式、推广等。所以，做策划比设计要费心得多，需要你有大局观，把评价一个产品好不好的标准从“好看不好看”扩大到“好用不好用”、“有没有市场价值”、“用户喜欢不喜欢”等问题上。
  
  
• 2.策划工作周期长，也许很长时间方能够见成效。设计得美不美，设计完了品评一下，就能够心里有数；策划做的好不好，要在项目运营一个周期后才能够见分晓。如果策划有问题，代价也是比较大的。
  
  
• 3.意味着承担更多压力。很多公司，策划是项目经理在做，有时，虽然策划人员不是管理者，可是自然而然在和程序员、设计师沟通时成为了一个管理者的角色。他需要同时和美术设计师、客户、老板、开发人员协调沟通。有时还需要掌握项目开发进度。——因此策划人员也很容易成为管理者。管理意味着更大的压力与责任。
  

“做策划怎么开始下手？”

“先做需求分析。参见方案中的需求分析环节。”

“哦……”

一分钟后。“那需求分析怎么开始做？”

……

二，需求是重中之重，再怎么强调都不为过

这里讲策划，是通常意义上的，其实无论是什么样的策划，都要先从需求分析着手。如果没有需求，策划就无从谈起。很多项目在运行中除了问题，甚至漏洞百出，其实不是设计做得不好，而是最初的策划就出了问题。策划出了问题，往往是需求没有分析清楚。需求分析不清楚，就会影响产品的定位。

需求从哪里来？拿网站策划来说，需求来自两个方面，一来自客户(广义客户，包含自己的老板)，二来自市场。画个图来说明这个问题：

1.认真聆听你的客户，保持双方沟通。

——你的客户带着问题来寻求你的帮助。所以你一定要让他把问题描述清楚：

• 问题一：为什么要做这个网站（或项目、产品——以下仅以网站为例）？
• 问题二：针对的顾客群是哪些人？
• 问题三：客户倾向的设计风格？有无他认为比较好的参考对象？
• 问题四：关于项目，他的初步构思是什么？
• 问题五：对工作的安排？你需要提交的文件是哪些？
  

很多时候，设计师听命于老板或客户，老板或者客户将想法简单描述给他，他就开始做设计了，而且一上来就直接做photoshop设计风格。注意，客户虽然是想做这个项目，也有一定的目的，但是他也许并不能清楚将需求让你知道。如果你不事先了解清楚就盲目开始做设计，只能事倍功半，日后有的是修改的痛苦。所以，要认真挖掘他的需求是什么？记录下来，认真分析。

所以，通过客户访谈，了解他真正的需求所在，做一个网站，有很多目的，比如仅仅是宣传，提高公司知名度？还是直接在线销售产品？还是促进内部交流，协同办公沟通？还是提供在线服务？……太多了，问清楚最核心的目的。并询问他对网站栏目建设的意见。保持一种开放性的沟通，激发客户的想法。前期沟通，他的想法越多越好，给你了提炼的机会。就怕是刚开始几次客户缄默不语，而后却开始意见多多。

又问：“如果客户确实说不清楚需求是什么怎么办？”是的，很多时候你只接到一个简单的任务，客户不说清楚需求就让你开始动工，而当你费尽心思把设计做出来了，他就开始挑三拣四。

所以这个时候，你需要注意需求的第二个途径——市场与用户。帮助你的客户去了解需求，你如果想成为专业人士，不妨通过市场调研，用户访谈，市场竞争分析等得到的需求，整理成市场需求文档（MRD），反馈给客户。

2.分析竞争对手

这一步的目的是通过对市场竞争对手的分析，找到他们的优势和弱点，寻求自己产品的差异化，特色以及卖点。

第一次的访谈必定给你许多信息了。然后找寻市场上同类型的网站数个，做对比分析。比如网站栏目建设，布局，色调，提供的功能，易用性等。这些网站各自的特色、优势是什么？不足和缺陷在哪里？当时在开始做策划时，也找了很多关于竞争对手分析的资料，若你英语还不错，建议阅读这一篇——《Competitive Analysis》.在做横向对比分析时，里面提到的案例分别从products（产品）、Search Box(搜索框)、Navigation(导航)、Contact Information(联系信息)、Shopping functions(购买功能)等。若你对英文很头疼，这篇草根网上的文章也可一读——《网站分析及竞争对手分析》。

由于要分析什么要素，是由具体的项目决定的，所以下面有些方面仅供你参考：

这一步的分析，也要详细写到MRD里。

【声音】

“我的客户很麻烦，刚开始什么意见都不给。就让我开始做设计，我询问他的喜好，他一直等我辛辛苦苦把整个页面做完。突然提出了一大堆的问题，内容的，栏目的，图片的，颜色的，我简直都要疯了。正改得马不停蹄的时候，他突然给了我几个网站让我做模仿——”

做竞争对手分析能够帮助你日后少一些以上的麻烦——客户给的网站很多是竞争对手的网站，你先经过分析，综合其优点，抛弃其不足，并言之有理。处处站在为客户着想的角度去思考问题——相信他不会强行你去模仿一个“有不足和弱点的”网站。

3.分析目标群体

这一步的目的是“设计出一个让目标群体喜欢的网站，而不是我喜欢和客户喜欢就行。”

【夸张的案例】

一个网络运营商要做一个网络商城。请设计师小C做首页风格。小C在征询了客户的颜色偏好后，结合栏目要求，很快就出了几个样稿。客户很满意，经过两个人挑选，最后决定了一个最佳方案。小C喜欢凝重的颜色，尝试了红、黑、白的经典搭配，而客户也很喜欢这种大气而不失稳重的颜色。而且在同类的网站中，更能够突现这个网站的独特个性。因此很快就敲定了。

接下来，同风格的栏目页、内容页等系列页面很快就做出来了。小C松口气，终于可以交付给开发人员了。这时，小C的女朋友来了，小C得意地展示设计作品。没想到她淡淡一扫，就打起电动来了。

“喜欢吗？这种风格？”

“还好吧。做什么用的？”

“你以后想要饰品，礼物，可以来这里买。这是小玩意淘。各种各样希奇古怪的玩意都有。”

“这样啊……”女朋友头也不抬，“那干嘛做得像政治论坛？”

是的。小C的女朋友代表了这个网站面向的用户群：年轻，时尚，有冒险精神，追求新鲜，有趣味的东西。或许，如果再认真将产品加以分析的话，或许还会发现，这些产品大部分都是女孩子喜欢淘的——发现生活之类的小店，向来是女孩子拖着男孩子逛。而网上购物的，又是女孩子居多。可是小C的女朋友居然不喜欢。而客户是位40岁的男子，小C是位有点特地独行的设计师，他们的喜好不能够决定真正的目标群体的喜好。

所以，策划人员在这一步，要帮客户分析目标市场:

• 问题一：这个网站的主要使用人群是那些？
• 问题二：这些人的主要特点？
• 问题三：这些人有什么样的需求？
  

这一步的分析，也要详细写到MRD里。

4.分析所属行业

这一步的目的是“了解对设计的限制，知其可为与不可为。知其发展趋势和标准。”

这一点可能更能够某些特定行业中适用，比如餐饮页，用暖色增加食欲，一般多用橙黄，橘红。但是这种颜色也不能滥用，一般仍要保留一种洁净感和卫生感。如果要寻求突破，把行业惯用的颜色从暖色、绿色，改成为梅红色、粉红色，就太不合适了。

更明显的例子就是医院行业了。医院更要有一种人文关怀、卫生和洁净感。一般以蓝、绿为主色，当然，某些以妇科为主的可以用梅红色来突出目标群体。但是颜色不能多而乱，不能够随意发挥。

这是行业特征对设计的限制。

在需求文档里，必要时，也要涉及到行业特征分析。

现在，需求文档就可以整理成文了。你可以带着它去见你的客户，当他没有明确的需求给你讲时，你也有备而来。用你的需求分析去引导他细化需求。这样，他也会觉得你对他的产品很负责，很用心，日后也不会因为不信任你而处处干涉。

三：在正式设计前做一个原型设计（草图、概念）

设计师在经过了前期的需求分析后，脑子里就已经有很多似乎具像化的页面形象了。甚至迫不及待要去做设计了。但是如果要做策划的话，请不要着急动用你的photoshop。

在真正的设计开始之前，你还有个很重要的步骤要走。这个是被很设计师所忽视的，但是却很重要的取得项目成功的秘诀哦。如果没有这一步，你将会有以下的梦魇：

1.每次找客户确认目前成果时，双方总是集中不到一点上去，你在征求他对栏目的意见时，他已经开始讨厌你用的颜色了。

2.你将面临更多的修改，因为每次参加讨论的人都不能集中精力到你想要的地方去。切忌，对美感的统一是最难的；

3.你将在反复的修改中，失去方向，一会调整框架一会调整内容，一会调整颜色和布局；

4.你将失去原本的激情和创造力；

5.你的项目将无法管理进度——让客户觉得你效率低下；


所以你需要一个线框图，把经由需求分析形成的思路和想法用更具像但是低保真的方法表现出来，带着它去找你的客户，而不是存在脑子里的思路。

先放几张所谓的神秘的线框图出来，先体会一下：




你在做设计前一定也有构思吧？也会画草图吧？线框图其实——也就是线—框图（汗……）。一点都不神秘。

别看那么简陋的线稿，微软、IBM的大虾们在做设计前，一样要借助这些简陋的线框图来讨论项目。

线框图更专业的叫法就是“低保真原型”——更多适用于软件领域。

在IBM网站上，使用开源软件设计、开发和部署协作型 Web 站点，第 2 部分: 设计有效的用户体验
这篇文章也详细提到了线框图。

其中提到使用线框图的原因，给出了以下几点：

• 构建高真实度原型要花费很长时间。
• 审查人员会对原型细节进行评论，而忽视重要的特性。
• 因为修改高真实度原型比较困难，开发人员往往不乐意进行修改。
• 原型会使人们对系统形成预期，一旦形成，就很难改变。
• 高真实度原型中的一个 bug 就可能使测试完全中断。
  

网站策划中使用线框图，也能够总结出类似以上的原因，总之，使用线框图就是将思路与想法用最有效率的方式表现出来，使讨论的重点集中到内容与信息结构设计，而先不关注外观表现因素。骨架没问题，再去考虑皮肤与衣着。

IBM这篇文章还给出了做原型的参考工具：

• 交互式卡片序列
• 纸上原型
• 线框图
• Excel 电子表格模拟
• Photoshop 模拟
• Flash demo
• 基于代码的实现
  

从这个分类上，我们看到我们通常所说的“线框图”还不能足够代替“原型设计”，而只是原型设计中的一类。上面的图片都是线框图的例子，包含了纸上原型，还有用软件模拟的线框图。而flash demo在涉及到一些需要交互技术的网站更容易被用到，比如在线学习网站的练习设计。

举我最近在做的项目的某个环节的flash demo设计：

这个系列，我先是用word来做线框图，后来有一些无法用word来描述交互状态的就干脆一直用flash来描述整个动态效果了。
flash做原型，目前我很喜欢，不但可以模拟页面效果，而且很有效率，还能够很好模拟鼠标放置到链接上的效果。

word 画线框图，也不错。你可以借助它的表格很快模拟网站布局，举个例子：

现在看来，这个原型是不合格的，因为里面出现了颜色和图片要素。呵呵，虽然在讨论时我一再强调我的那些颜色不是最终设计的颜色，可是boss们总还是不自觉去评价那些颜色和图片……因此下次一定要注意，去除去除任何会影响注意力集中到内容和页面信息布局、框架的元素。

除了白纸和笔、word、flash、photoshop（不推荐）等可以做原型设计，还有更专业的Axure RP,
原型设计能够让你在很快的时间内将核心需求表达出来。你将和你的客户就这些原型讨论，确定核心的内容、栏目结构、基本布局等。这些东西一旦确定下来，你后期的设计工作就有章可依了。

原型设计时，若客户对网站的定位存在疑惑或者认为不必要的时候，你尽量帮他把网站定位分析清楚。定位的模糊让下一步的网站构架设计、内容策划、运营策划和市场策划出现障碍。

四：设计风格图

经过几次的讨论修改，确定了原型后，就可以做设计了。开始动用你的photoshop。
最主要的是做首页、代表栏目页、代表内容页。三个页面即可。这一步是确定基本色调和网站风格。讨论的重点落到了“好看不好看”“适合不适合”上来 。

若你在做设计的时候，客户又想提出需求更改的要求，比如在原型设计时，已经确认的栏目增加了一个。那我建议你仍是要先修改原型设计，而不是直接在photoshop上修改设计。因为可能后面的开发人员仍要参考你的更简洁的原型做开发——当你做页面设计的时候。若你在根据客户的需求更改修改了设计而不修改原型时，很可能导致你和开发人员的信息不一致。

增加或减少一个栏目的更改算是小事，如果日后在设计时客户突然改变了网站的定位——意味着目标人群可能也要发生变化。所以，你在原型设计里一定要认真和客户沟通。相信经过几次真诚的，为客户着想的沟通基础上确定下来的大的方针，客户不应该轻易发生变化。

风格图确定后，客户认为颜色、布局、版式都ok了。开始下一步的工作。

五：制作页面（html）同时交付开发人员

原则上讲，策划人员与设计人员是应该分离的职能，不过很多公司是设计师承担着策划工作，那么下一步就是：

以做页面了（高保真原型）。不一定用photoshop将所有的页面做出来看效果，我觉得做了首页、栏目页和内容页就够了。下面的页面就在dreawer里完成，需要用图的时候再设计就是了。同时接触开发人员，让他们明白整个设计思路，以及开发要求。

若开发人员并没有参与到前期你和客户的沟通，也没有参加原型设计时，你可能还需要准备一份文档给他——产品需求文档。

产品需求文档大概需要涵盖以下部分：

1.项目概述：是个什么项目？为什么要做？
2.面向的用户是如何定义的？他们能够利用这个网站做什么？
3.这个网站提供什么服务？有什么特色？
4.主要的功能有什么？
5.网站的目录层次结构图；
6.开发计划及人员角色定义；
……视具体项目而有所不同。我不赞同使用模版，但是做为新手可以从这些模版里得到参考。不过我相信很多项目没有这么复杂。你只要达到能够让开发人员明白网站的开发需求以及约束就可以了。如果要显得专业些，还是要动点笔头功夫写点文档。存在脑子里的想法随时会变化和遗忘的，面对面的沟通虽然及时但是日后也会发生理解的偏差。以文档为基础的沟通可以方便项目的管理。

正处在工作交接的紧张时刻，总是无法完成此文。今天刚好找到一篇文章，若对网站策划感兴趣，可以读读。

来源：http://heidixie.blog.sohu.com/84312251.html

写的很好，值得学习