如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里 

很翔實(shí)的如何進(jìn)行網(wǎng)站策劃教程，想做一個像樣兒網(wǎng)站的朋友值得一看。另外推薦一本書《用戶體驗(yàn)的要素》，網(wǎng)站策劃必讀。

一，首先需要明白的是：網(wǎng)站設(shè)計(jì)與網(wǎng)站策劃的區(qū)別。

1.做策劃，不再是只關(guān)注表現(xiàn)，復(fù)雜的項(xiàng)目還可關(guān)系到運(yùn)營、營銷，除了研究網(wǎng)站是不是“漂亮 ”，還需要關(guān)注網(wǎng)站的商務(wù)模式、推廣等。所以，做策劃比設(shè)計(jì)要費(fèi)心得多，需要你有大局觀，把評價(jià)一個產(chǎn)品好不好的標(biāo)準(zhǔn)從“好看不好看”擴(kuò)大到“好用不好用 ”、“有沒有市場價(jià)值”、“用戶喜歡不喜歡”等問題上。

2.策劃工作周期長，也許很長時間方能夠見成效。設(shè)計(jì)得美不美，設(shè)計(jì)完了品評一下，就能夠心里有數(shù)；策劃做的好不好，要在項(xiàng)目運(yùn)營一個周期后才能夠見分曉。如果策劃有問題，代價(jià)也是比較大的。

3.意味著承擔(dān)更多壓力。很多公司，策劃是項(xiàng)目經(jīng)理在做，有時，雖然策劃人員不是管理者，可是自然而然在和程序員、設(shè)計(jì)師溝通時成為了一個管理者的角色。他需要同時和美術(shù)設(shè)計(jì)師、客戶、老板、開發(fā)人員協(xié)調(diào)溝通。有時還需要掌握項(xiàng)目開發(fā)進(jìn)度?！?因此策劃人員也很容易成為管理者。管理意味著更大的壓力與責(zé)任。

“做策劃怎么開始下手？”

“先做需求分析。參見方案中的需求分析環(huán)節(jié)?！?

“哦……”

一分鐘后?！澳切枨蠓治鲈趺撮_始做？”

……

二，需求是重中之重，再怎么強(qiáng)調(diào)都不為過

這里講策劃，是通常意義上的，其實(shí)無論是什么樣的策劃，都要先從需求分析著手。如果沒有需求，策劃就無從談起。很多項(xiàng)目在運(yùn)行中除了問題，甚至漏洞百出，其實(shí)不是設(shè)計(jì)做得不好，而是最初的策劃就出了問題。策劃出了問題，往往是需求沒有分析清楚。需求分析不清楚，就會影響產(chǎn)品的定位。

需求從哪里來？拿網(wǎng)站策劃來說，需求來自兩個方面，一來自客戶(廣義客戶，包含自己的老板)，二來自市場。畫個圖來說明這個問題：

1.認(rèn)真聆聽你的客戶，保持雙方溝通。

——你的客戶帶著問題來尋求你的幫助。所以你一定要讓他把問題描述清楚：

問題一：為什么要做這個網(wǎng)站（或項(xiàng)目、產(chǎn)品——以下僅以網(wǎng)站為例）？

問題二：針對的顧客群是哪些人？

問題三：客戶傾向的設(shè)計(jì)風(fēng)格？有無他認(rèn)為比較好的參考對象？

問題四：關(guān)于項(xiàng)目，他的初步構(gòu)思是什么？

問題五：對工作的安排？你需要提交的文件是哪些？

很多時候，設(shè)計(jì)師聽命于老板或客戶，老板或者客戶將想法簡單描述給他，他就開始做設(shè)計(jì)了，而且一上來就直接做photoshop設(shè)計(jì)風(fēng)格。注意，客戶雖然是想做這個項(xiàng)目，也有一定的目的，但是他也許并不能清楚將需求讓你知道。如果你不事先了解清楚就盲目開始做設(shè)計(jì)，只能事倍功半，日后有的是修改的痛苦。所以，要認(rèn)真挖掘他的需求是什么？記錄下來，認(rèn)真分析。

所以，通過客戶訪談，了解他真正的需求所在，做一個網(wǎng)站，有很多目的，比如僅僅是宣傳，提高公司知名度？還是直接在線銷售產(chǎn)品？還是促進(jìn)內(nèi)部交流，協(xié)同辦公溝通？還是提供在線服務(wù)？……太多了，問清楚最核心的目的。并詢問他對網(wǎng)站欄目建設(shè)的意見。保持一種開放性的溝通，激發(fā)客戶的想法。前期溝通，他的想法越多越好，給你了提煉的機(jī)會。就怕是剛開始幾次客戶緘默不語，而后卻開始意見多多。

又問：“如果客戶確實(shí)說不清楚需求是什么怎么辦？”是的，很多時候你只接到一個簡單的任務(wù)，客戶不說清楚需求就讓你開始動工，而當(dāng)你費(fèi)盡心思把設(shè)計(jì)做出來了，他就開始挑三揀四。

所以這個時候，你需要注意需求的第二個途徑——市場與用戶。幫助你的客戶去了解需求，你如果想成為專業(yè)人士，不妨通過市場調(diào)研，用戶訪談，市場競爭分析等得到的需求，整理成市場需求文檔（MRD），反饋給客戶。

2.分析競爭對手

這一步的目的是通過對市場競爭對手的分析，找到他們的優(yōu)勢和弱點(diǎn)，尋求自己產(chǎn)品的差異化，特色以及賣點(diǎn)。

第一次的訪談必定給你許多信息了。然后找尋市場上同類型的網(wǎng)站數(shù)個，做對比分析。比如網(wǎng)站欄目建設(shè)，布局，色調(diào)，提供的功能，易用性等。這些網(wǎng)站各自的特色、優(yōu)勢是什么？不足和缺陷在哪里？當(dāng)時在開始做策劃時，也找了很多關(guān)于競爭對手分析的資料，若你英語還不錯，建議閱讀這一篇——《Competitive Analysis》。在做橫向?qū)Ρ确治鰰r，里面提到的案例分別從products（產(chǎn)品）、Search Box(搜索框)、Navigation(導(dǎo)航)、Contact Information(聯(lián)系信息)、Shopping functions(購買功能)等。若你對英文很頭疼，這篇草根網(wǎng)上的文章也可一讀——《網(wǎng)站分析及競爭對手分析》。

由于要分析什么要素，是由具體的項(xiàng)目決定的，所以下面有些方面僅供你參考：

這一步的分析，也要詳細(xì)寫到MRD里。

【聲音】

“我的客戶很麻煩，剛開始什么意見都不給。就讓我開始做設(shè)計(jì)，我詢問他的喜好，他一直等我辛辛苦苦把整個頁面做完。突然提出了一大堆的問題，內(nèi)容的，欄目的，圖片的，顏色的，我簡直都要瘋了。正改得馬不停蹄的時候，他突然給了我?guī)讉€網(wǎng)站讓我做模仿——”

做競爭對手分析能夠幫助你日后少一些以上的麻煩——客戶給的網(wǎng)站很多是競爭對手的網(wǎng)站，你先經(jīng)過分析，綜合其優(yōu)點(diǎn)，拋棄其不足，并言之有理。處處站在為客戶著想的角度去思考問題——相信他不會強(qiáng)行你去模仿一個“有不足和弱點(diǎn)的”網(wǎng)站。

3.分析目標(biāo)群體

這一步的目的是“設(shè)計(jì)出一個讓目標(biāo)群體喜歡的網(wǎng)站，而不是我喜歡和客戶喜歡就行。”

【夸張的案例】

一個網(wǎng)絡(luò)運(yùn)營商要做一個網(wǎng)絡(luò)商城。請?jiān)O(shè)計(jì)師小C做首頁風(fēng)格。小C在征詢了客戶的顏色偏好后，結(jié)合欄目要求，很快就出了幾個樣稿。客戶很滿意，經(jīng)過兩個人挑選，最后決定了一個最佳方案。小C喜歡凝重的顏色，嘗試了紅、黑、白的經(jīng)典搭配，而客戶也很喜歡這種大氣而不失穩(wěn)重的顏色。而且在同類的網(wǎng)站中，更能夠突現(xiàn)這個網(wǎng)站的獨(dú)特個性。因此很快就敲定了。

接下來，同風(fēng)格的欄目頁、內(nèi)容頁等系列頁面很快就做出來了。小C松口氣，終于可以交付給開發(fā)人員了。這時，小C的女朋友來了，小C得意地展示設(shè)計(jì)作品。沒想到她淡淡一掃，就打起電動來了。

“喜歡嗎？這種風(fēng)格？”

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

“你以后想要飾品，禮物，可以來這里買。這是小玩意淘。各種各樣希奇古怪的玩意都有?！?

“這樣啊……”女朋友頭也不抬，“那干嘛做得像政治論壇？”

是的。小C的女朋友代表了這個網(wǎng)站面向的用戶群：年輕，時尚，有冒險(xiǎn)精神，追求新鮮，有趣味的東西?；蛟S，如果再認(rèn)真將產(chǎn)品加以分析的話，或許還會發(fā)現(xiàn)，這些產(chǎn)品大部分都是女孩子喜歡淘的——發(fā)現(xiàn)生活之類的小店，向來是女孩子拖著男孩子逛。而網(wǎng)上購物的，又是女孩子居多?？墒切的女朋友居然不喜歡。而客戶是位40歲的男子，小C是位有點(diǎn)特地獨(dú)行的設(shè)計(jì)師，他們的喜好不能夠決定客戶的喜好。

所以，策劃人員在這一步，要幫客戶分析目標(biāo)市場:

問題一：這個網(wǎng)站的主要使用人群是那些？

問題二：這些人的主要特點(diǎn)？

問題三：這些人有什么樣的需求？

這一步的分析，也要詳細(xì)寫到MRD里。

4.分析所屬行業(yè)

這一步的目的是“了解對設(shè)計(jì)的限制，知其可為與不可為。知其發(fā)展趨勢和標(biāo)準(zhǔn)?！?

這一點(diǎn)可能更能夠某些特定行業(yè)中適用，比如餐飲頁，用暖色增加食欲，一般多用橙黃，橘紅。但是這種顏色也不能濫用，一般仍要保留一種潔凈感和衛(wèi)生感。如果要尋求突破，把行業(yè)慣用的顏色從暖色、綠色，改成為梅紅色、粉紅色，就太不合適了。

更明顯的例子就是醫(yī)院行業(yè)了。醫(yī)院更要有一種人文關(guān)懷、衛(wèi)生和潔凈感。一般以藍(lán)、綠為主色，當(dāng)然，某些以婦科為主的可以用梅紅色來突出目標(biāo)群體。但是顏色不能多而亂，不能夠隨意發(fā)揮。

這是行業(yè)特征對設(shè)計(jì)的限制。

在需求文檔里，必要時，也要涉及到行業(yè)特征分析。

現(xiàn)在，需求文檔就可以整理成文了。你可以帶著它去見你的客戶，當(dāng)他沒有明確的需求給你講時，你也有備而來。用你的需求分析去引導(dǎo)他細(xì)化需求。這樣，他也會覺得你對他的產(chǎn)品很負(fù)責(zé)，很用心，日后也不會因?yàn)椴恍湃文愣幪幐缮妗?

三：在正式設(shè)計(jì)前做一個原型設(shè)計(jì)（草圖、概念）

設(shè)計(jì)師在經(jīng)過了前期的需求分析后，腦子里就已經(jīng)有很多似乎具像化的頁面形象了。甚至迫不及待要去做設(shè)計(jì)了。但是如果要做策劃的話，請不要著急動用你的photoshop。

在真正的設(shè)計(jì)開始之前，你還有個很重要的步驟要走。這個是被很設(shè)計(jì)師所忽視的，但是卻很重要的取得項(xiàng)目成功的秘訣哦。如果沒有這一步，你將會有以下的夢魘：

1.每次找客戶確認(rèn)目前成果時，雙方總是集中不到一點(diǎn)上去，你在征求他對欄目的意見時，他已經(jīng)開始討厭你用的顏色了。

2.你將面臨更多的修改，因?yàn)槊看螀⒓佑懻摰娜硕疾荒芗芯Φ侥阆胍牡胤饺?。切忌，對美感的統(tǒng)一是最難的；

3.你將在反復(fù)的修改中，失去方向，一會調(diào)整框架一會調(diào)整內(nèi)容，一會調(diào)整顏色和布局；

4.你將失去原本的激情和創(chuàng)造力；

5.你的項(xiàng)目將無法管理進(jìn)度——讓客戶覺得你效率低下；

所以你需要一個線框圖，把經(jīng)由需求分析形成的思路和想法用更具像但是低保真的方法表現(xiàn)出來，帶著它去找你的客戶，而不是存在腦子里的思路。

先放幾張所謂的神秘的線框圖出來，先體會一下：

你在做設(shè)計(jì)前一定也有構(gòu)思吧？也會畫草圖吧？線框圖其實(shí)——也就是線—框圖（汗……）。一點(diǎn)都不神秘。

別看那么簡陋的線稿，微軟、IBM的大蝦們在做設(shè)計(jì)前，一樣要借助這些簡陋的線框圖來討論項(xiàng)目。

線框圖更專業(yè)的叫法就是“低保真原型”——更多適用于軟件領(lǐng)域。

其中提到使用線框圖的原因，給出了以下幾點(diǎn)：

構(gòu)建高真實(shí)度原型要花費(fèi)很長時間。

審查人員會對原型細(xì)節(jié)進(jìn)行評論，而忽視重要的特性。

因?yàn)樾薷母哒鎸?shí)度原型比較困難，開發(fā)人員往往不樂意進(jìn)行修改。

原型會使人們對系統(tǒng)形成預(yù)期，一旦形成，就很難改變。

高真實(shí)度原型中的一個 bug 就可能使測試完全中斷。

網(wǎng)站策劃中使用線框圖，也能夠總結(jié)出類似以上的原因，總之，使用線框圖就是將思路與想法用最有效率的方式表現(xiàn)出來，使討論的重點(diǎn)集中到內(nèi)容與信息結(jié)構(gòu)設(shè)計(jì)，而先不關(guān)注外觀表現(xiàn)因素。骨架沒問題，再去考慮皮膚與衣著。

IBM這篇文章還給出了做原型的參考工具：

交互式卡片序列

紙上原型

線框圖

Excel 電子表格模擬

Photoshop 模擬

Flash demo

基于代碼的實(shí)現(xiàn)

從這個分類上，我們看到我們通常所說的“線框圖”還不能足夠代替“原型設(shè)計(jì)”，而只是原型設(shè)計(jì)中的一類。上面的圖片都是線框圖的例子，包含了紙上原型，還有用軟件模擬的線框圖。而flash demo在涉及到一些需要交互技術(shù)的網(wǎng)站更容易被用到，比如在線學(xué)習(xí)網(wǎng)站的練習(xí)設(shè)計(jì)。

舉我最近在做的項(xiàng)目的某個環(huán)節(jié)的flash demo設(shè)計(jì)：

這個系列，我先是用word來做線框圖，后來有一些無法用word來描述交互狀態(tài)的就干脆一直用flash來描述整個動態(tài)效果了。

flash做原型，目前我很喜歡，不但可以模擬頁面效果，而且很有效率，還能夠很好模擬鼠標(biāo)放置到鏈接上的效果。

word 畫線框圖，也不錯。你可以借助它的表格很快模擬網(wǎng)站布局，舉個例子：

現(xiàn)在看來，這個原型是不合格的，因?yàn)槔锩娉霈F(xiàn)了顏色和圖片要素。呵呵，雖然在討論時我一再強(qiáng)調(diào)我的那些顏色不是最終設(shè)計(jì)的顏色，可是boss們總還是不自覺去評價(jià)那些顏色和圖片……因此下次一定要注意，去除去除任何會影響注意力集中到內(nèi)容和頁面信息布局、框架的元素。

除了白紙和筆、word、flash、photoshop（不推薦）等可以做原型設(shè)計(jì)，還有更專業(yè)的Axure RP

原型設(shè)計(jì)能夠讓你在很快的時間內(nèi)將核心需求表達(dá)出來。你將和你的客戶就這些原型討論，確定核心的內(nèi)容、欄目結(jié)構(gòu)、基本布局等。這些東西一旦確定下來，你后期的設(shè)計(jì)工作就有章可依了。

原型設(shè)計(jì)時，若客戶對網(wǎng)站的定位存在疑惑或者認(rèn)為不必要的時候，你盡量幫他把網(wǎng)站定位分析清楚。定位的模糊讓下一步的網(wǎng)站構(gòu)架設(shè)計(jì)、內(nèi)容策劃、運(yùn)營策劃和市場策劃出現(xiàn)障礙。

四：設(shè)計(jì)風(fēng)格圖

經(jīng)過幾次的討論修改，確定了原型后，就可以做設(shè)計(jì)了。開始動用你的photoshop。

最主要的是做首頁、代表欄目頁、代表內(nèi)容頁。三個頁面即可。這一步是確定基本色調(diào)和網(wǎng)站風(fēng)格。討論的重點(diǎn)落到了“好看不好看”“適合不適合”上來 。

若你在做設(shè)計(jì)的時候，客戶又想提出需求更改的要求，比如在原型設(shè)計(jì)時，已經(jīng)確認(rèn)的欄目增加了一個。那我建議你仍是要先修改原型設(shè)計(jì)，而不是直接在photoshop上修改設(shè)計(jì)。因?yàn)榭赡芎竺娴拈_發(fā)人員仍要參考你的更簡潔的原型做開發(fā)——當(dāng)你做頁面設(shè)計(jì)的時候。若你在根據(jù)客戶的需求更改修改了設(shè)計(jì)而不修改原型時，很可能導(dǎo)致你和開發(fā)人員的信息不一致。

增加或減少一個欄目的更改算是小事，如果日后在設(shè)計(jì)時客戶突然改變了網(wǎng)站的定位——意味著目標(biāo)人群可能也要發(fā)生變化。所以，你在原型設(shè)計(jì)里一定要認(rèn)真和客戶溝通。相信經(jīng)過幾次真誠的，為客戶著想的溝通基礎(chǔ)上確定下來的大的方針，客戶不應(yīng)該輕易發(fā)生變化。

風(fēng)格圖確定后，客戶認(rèn)為顏色、布局、版式都o(jì)k了。開始下一步的工作。

五：制作頁面（html）同時交付開發(fā)人員

原則上講，策劃人員與設(shè)計(jì)人員是應(yīng)該分離的職能，不過很多公司是設(shè)計(jì)師承擔(dān)著策劃工作，那么下一步就是：

以做頁面了（高保真原型）。不一定用photoshop將所有的頁面做出來看效果，我覺得做了首頁、欄目頁和內(nèi)容頁就夠了。下面的頁面就在dreawer里完成，需要用圖的時候再設(shè)計(jì)就是了。同時接觸開發(fā)人員，讓他們明白整個設(shè)計(jì)思路，以及開發(fā)要求。

若開發(fā)人員并沒有參與到前期你和客戶的溝通，也沒有參加原型設(shè)計(jì)時，你可能還需要準(zhǔn)備一份文檔給他——產(chǎn)品需求文檔。

產(chǎn)品需求文檔大概需要涵蓋以下部分：

1.項(xiàng)目概述：是個什么項(xiàng)目？為什么要做？

2.面向的用戶是如何定義的？他們能夠利用這個網(wǎng)站做什么？

3.這個網(wǎng)站提供什么服務(wù)？有什么特色？

4.主要的功能有什么？

5.網(wǎng)站的目錄層次結(jié)構(gòu)圖；

6.開發(fā)計(jì)劃及人員角色定義；

……視具體項(xiàng)目而有所不同。我不贊同使用模版，但是做為新手可以從這些模版里得到參考。不過我相信很多項(xiàng)目沒有這么復(fù)雜。你只要達(dá)到能夠讓開發(fā)人員明白網(wǎng)站的開發(fā)需求以及約束就可以了。如果要顯得專業(yè)些，還是要動點(diǎn)筆頭功夫?qū)扅c(diǎn)文檔。存在腦子里的想法隨時會變化和遺忘的，面對面的溝通雖然及時但是日后也會發(fā)生理解的偏差。以文檔為基礎(chǔ)的溝通可以方便項(xiàng)目的管理。（來源）

藍(lán)藍(lán)設(shè)計(jì)( m.820esy.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)