2016-8-29 藍藍設計的小編
很翔實的如何進行網站策劃教程，想做一個像樣兒網站的朋友值得一看。另外推薦一本書《用戶體驗的要素》，網站策劃必讀。
一，首先需要明白的是：網站設計與網站策劃的區別。
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的大蝦們在做設計前，一樣要借助這些簡陋的線框圖來討論項目。
線框圖更專業的叫法就是“低保真原型”——更多適用于軟件領域。
其中提到使用線框圖的原因，給出了以下幾點：
構建高真實度原型要花費很長時間。
審查人員會對原型細節進行評論，而忽視重要的特性。
因為修改高真實度原型比較困難，開發人員往往不樂意進行修改。
原型會使人們對系統形成預期，一旦形成，就很難改變。
高真實度原型中的一個 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.開發計劃及人員角色定義；
……視具體項目而有所不同。我不贊同使用模版，但是做為新手可以從這些模版里得到參考。不過我相信很多項目沒有這么復雜。你只要達到能夠讓開發人員明白網站的開發需求以及約束就可以了。如果要顯得專業些，還是要動點筆頭功夫寫點文檔。存在腦子里的想法隨時會變化和遺忘的，面對面的溝通雖然及時但是日后也會發生理解的偏差。以文檔為基礎的溝通可以方便項目的管理。（來源）
藍藍設計( www.ocunn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
