2016-8-29 藍(lán)藍(lán)設(shè)計(jì)的小編
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
很翔實(shí)的如何進(jìn)行網(wǎng)站策劃教程，想做一個(gè)像樣兒網(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)心得多，需要你有大局觀，把評(píng)價(jià)一個(gè)產(chǎn)品好不好的標(biāo)準(zhǔn)從“好看不好看”擴(kuò)大到“好用不好用 ”、“有沒有市場價(jià)值”、“用戶喜歡不喜歡”等問題上。
2.策劃工作周期長，也許很長時(shí)間方能夠見成效。設(shè)計(jì)得美不美，設(shè)計(jì)完了品評(píng)一下，就能夠心里有數(shù)；策劃做的好不好，要在項(xiàng)目運(yùn)營一個(gè)周期后才能夠見分曉。如果策劃有問題，代價(jià)也是比較大的。
3.意味著承擔(dān)更多壓力。很多公司，策劃是項(xiàng)目經(jīng)理在做，有時(shí)，雖然策劃人員不是管理者，可是自然而然在和程序員、設(shè)計(jì)師溝通時(shí)成為了一個(gè)管理者的角色。他需要同時(shí)和美術(shù)設(shè)計(jì)師、客戶、老板、開發(fā)人員協(xié)調(diào)溝通。有時(shí)還需要掌握項(xiàng)目開發(fā)進(jìn)度。—— 因此策劃人員也很容易成為管理者。管理意味著更大的壓力與責(zé)任。
“做策劃怎么開始下手？”
“先做需求分析。參見方案中的需求分析環(huán)節(jié)。”
“哦……”
一分鐘后。“那需求分析怎么開始做？”
……
二，需求是重中之重，再怎么強(qiáng)調(diào)都不為過
這里講策劃，是通常意義上的，其實(shí)無論是什么樣的策劃，都要先從需求分析著手。如果沒有需求，策劃就無從談起。很多項(xiàng)目在運(yùn)行中除了問題，甚至漏洞百出，其實(shí)不是設(shè)計(jì)做得不好，而是最初的策劃就出了問題。策劃出了問題，往往是需求沒有分析清楚。需求分析不清楚，就會(huì)影響產(chǎn)品的定位。
需求從哪里來？拿網(wǎng)站策劃來說，需求來自兩個(gè)方面，一來自客戶(廣義客戶，包含自己的老板)，二來自市場。畫個(gè)圖來說明這個(gè)問題：
1.認(rèn)真聆聽你的客戶，保持雙方溝通。
——你的客戶帶著問題來尋求你的幫助。所以你一定要讓他把問題描述清楚：
問題一：為什么要做這個(gè)網(wǎng)站（或項(xiàng)目、產(chǎn)品——以下僅以網(wǎng)站為例）？
問題二：針對(duì)的顧客群是哪些人？
問題三：客戶傾向的設(shè)計(jì)風(fēng)格？有無他認(rèn)為比較好的參考對(duì)象？
問題四：關(guān)于項(xiàng)目，他的初步構(gòu)思是什么？
問題五：對(duì)工作的安排？你需要提交的文件是哪些？
很多時(shí)候，設(shè)計(jì)師聽命于老板或客戶，老板或者客戶將想法簡單描述給他，他就開始做設(shè)計(jì)了，而且一上來就直接做photoshop設(shè)計(jì)風(fēng)格。注意，客戶雖然是想做這個(gè)項(xiàng)目，也有一定的目的，但是他也許并不能清楚將需求讓你知道。如果你不事先了解清楚就盲目開始做設(shè)計(jì)，只能事倍功半，日后有的是修改的痛苦。所以，要認(rèn)真挖掘他的需求是什么？記錄下來，認(rèn)真分析。
所以，通過客戶訪談，了解他真正的需求所在，做一個(gè)網(wǎng)站，有很多目的，比如僅僅是宣傳，提高公司知名度？還是直接在線銷售產(chǎn)品？還是促進(jìn)內(nèi)部交流，協(xié)同辦公溝通？還是提供在線服務(wù)？……太多了，問清楚最核心的目的。并詢問他對(duì)網(wǎng)站欄目建設(shè)的意見。保持一種開放性的溝通，激發(fā)客戶的想法。前期溝通，他的想法越多越好，給你了提煉的機(jī)會(huì)。就怕是剛開始幾次客戶緘默不語，而后卻開始意見多多。
又問：“如果客戶確實(shí)說不清楚需求是什么怎么辦？”是的，很多時(shí)候你只接到一個(gè)簡單的任務(wù)，客戶不說清楚需求就讓你開始動(dòng)工，而當(dāng)你費(fèi)盡心思把設(shè)計(jì)做出來了，他就開始挑三揀四。
所以這個(gè)時(shí)候，你需要注意需求的第二個(gè)途徑——市場與用戶。幫助你的客戶去了解需求，你如果想成為專業(yè)人士，不妨通過市場調(diào)研，用戶訪談，市場競爭分析等得到的需求，整理成市場需求文檔（MRD），反饋給客戶。
2.分析競爭對(duì)手
這一步的目的是通過對(duì)市場競爭對(duì)手的分析，找到他們的優(yōu)勢和弱點(diǎn)，尋求自己產(chǎn)品的差異化，特色以及賣點(diǎn)。
第一次的訪談必定給你許多信息了。然后找尋市場上同類型的網(wǎng)站數(shù)個(gè)，做對(duì)比分析。比如網(wǎng)站欄目建設(shè)，布局，色調(diào)，提供的功能，易用性等。這些網(wǎng)站各自的特色、優(yōu)勢是什么？不足和缺陷在哪里？當(dāng)時(shí)在開始做策劃時(shí)，也找了很多關(guān)于競爭對(duì)手分析的資料，若你英語還不錯(cuò)，建議閱讀這一篇——《Competitive Analysis》。在做橫向?qū)Ρ确治鰰r(shí)，里面提到的案例分別從products（產(chǎn)品）、Search Box(搜索框)、Navigation(導(dǎo)航)、Contact Information(聯(lián)系信息)、Shopping functions(購買功能)等。若你對(duì)英文很頭疼，這篇草根網(wǎng)上的文章也可一讀——《網(wǎng)站分析及競爭對(duì)手分析》。
由于要分析什么要素，是由具體的項(xiàng)目決定的，所以下面有些方面僅供你參考：
這一步的分析，也要詳細(xì)寫到MRD里。
【聲音】
“我的客戶很麻煩，剛開始什么意見都不給。就讓我開始做設(shè)計(jì)，我詢問他的喜好，他一直等我辛辛苦苦把整個(gè)頁面做完。突然提出了一大堆的問題，內(nèi)容的，欄目的，圖片的，顏色的，我簡直都要瘋了。正改得馬不停蹄的時(shí)候，他突然給了我?guī)讉€(gè)網(wǎng)站讓我做模仿——”
做競爭對(duì)手分析能夠幫助你日后少一些以上的麻煩——客戶給的網(wǎng)站很多是競爭對(duì)手的網(wǎng)站，你先經(jīng)過分析，綜合其優(yōu)點(diǎn)，拋棄其不足，并言之有理。處處站在為客戶著想的角度去思考問題——相信他不會(huì)強(qiáng)行你去模仿一個(gè)“有不足和弱點(diǎn)的”網(wǎng)站。
3.分析目標(biāo)群體
這一步的目的是“設(shè)計(jì)出一個(gè)讓目標(biāo)群體喜歡的網(wǎng)站，而不是我喜歡和客戶喜歡就行。”
【夸張的案例】
一個(gè)網(wǎng)絡(luò)運(yùn)營商要做一個(gè)網(wǎng)絡(luò)商城。請(qǐng)?jiān)O(shè)計(jì)師小C做首頁風(fēng)格。小C在征詢了客戶的顏色偏好后，結(jié)合欄目要求，很快就出了幾個(gè)樣稿。客戶很滿意，經(jīng)過兩個(gè)人挑選，最后決定了一個(gè)最佳方案。小C喜歡凝重的顏色，嘗試了紅、黑、白的經(jīng)典搭配，而客戶也很喜歡這種大氣而不失穩(wěn)重的顏色。而且在同類的網(wǎng)站中，更能夠突現(xiàn)這個(gè)網(wǎng)站的獨(dú)特個(gè)性。因此很快就敲定了。
接下來，同風(fēng)格的欄目頁、內(nèi)容頁等系列頁面很快就做出來了。小C松口氣，終于可以交付給開發(fā)人員了。這時(shí)，小C的女朋友來了，小C得意地展示設(shè)計(jì)作品。沒想到她淡淡一掃，就打起電動(dòng)來了。
“喜歡嗎？這種風(fēng)格？”
“還好吧。做什么用的？”
“你以后想要飾品，禮物，可以來這里買。這是小玩意淘。各種各樣希奇古怪的玩意都有?！?
“這樣啊……”女朋友頭也不抬，“那干嘛做得像政治論壇？”
是的。小C的女朋友代表了這個(gè)網(wǎng)站面向的用戶群：年輕，時(shí)尚，有冒險(xiǎn)精神，追求新鮮，有趣味的東西?；蛟S，如果再認(rèn)真將產(chǎn)品加以分析的話，或許還會(huì)發(fā)現(xiàn)，這些產(chǎn)品大部分都是女孩子喜歡淘的——發(fā)現(xiàn)生活之類的小店，向來是女孩子拖著男孩子逛。而網(wǎng)上購物的，又是女孩子居多?？墒切的女朋友居然不喜歡。而客戶是位40歲的男子，小C是位有點(diǎn)特地獨(dú)行的設(shè)計(jì)師，他們的喜好不能夠決定客戶的喜好。
所以，策劃人員在這一步，要幫客戶分析目標(biāo)市場:
問題一：這個(gè)網(wǎng)站的主要使用人群是那些？
問題二：這些人的主要特點(diǎn)？
問題三：這些人有什么樣的需求？
這一步的分析，也要詳細(xì)寫到MRD里。
4.分析所屬行業(yè)
這一步的目的是“了解對(duì)設(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è)特征對(duì)設(shè)計(jì)的限制。
在需求文檔里，必要時(shí)，也要涉及到行業(yè)特征分析。
現(xiàn)在，需求文檔就可以整理成文了。你可以帶著它去見你的客戶，當(dāng)他沒有明確的需求給你講時(shí)，你也有備而來。用你的需求分析去引導(dǎo)他細(xì)化需求。這樣，他也會(huì)覺得你對(duì)他的產(chǎn)品很負(fù)責(zé)，很用心，日后也不會(huì)因?yàn)椴恍湃文愣幪幐缮妗?
三：在正式設(shè)計(jì)前做一個(gè)原型設(shè)計(jì)（草圖、概念）
設(shè)計(jì)師在經(jīng)過了前期的需求分析后，腦子里就已經(jīng)有很多似乎具像化的頁面形象了。甚至迫不及待要去做設(shè)計(jì)了。但是如果要做策劃的話，請(qǐng)不要著急動(dòng)用你的photoshop。
在真正的設(shè)計(jì)開始之前，你還有個(gè)很重要的步驟要走。這個(gè)是被很設(shè)計(jì)師所忽視的，但是卻很重要的取得項(xiàng)目成功的秘訣哦。如果沒有這一步，你將會(huì)有以下的夢(mèng)魘：
1.每次找客戶確認(rèn)目前成果時(shí)，雙方總是集中不到一點(diǎn)上去，你在征求他對(duì)欄目的意見時(shí)，他已經(jīng)開始討厭你用的顏色了。
2.你將面臨更多的修改，因?yàn)槊看螀⒓佑懻摰娜硕疾荒芗芯Φ侥阆胍牡胤饺?。切忌，?duì)美感的統(tǒng)一是最難的；
3.你將在反復(fù)的修改中，失去方向，一會(huì)調(diào)整框架一會(huì)調(diào)整內(nèi)容，一會(huì)調(diào)整顏色和布局；
4.你將失去原本的激情和創(chuàng)造力；
5.你的項(xiàng)目將無法管理進(jìn)度——讓客戶覺得你效率低下；
所以你需要一個(gè)線框圖，把經(jīng)由需求分析形成的思路和想法用更具像但是低保真的方法表現(xiàn)出來，帶著它去找你的客戶，而不是存在腦子里的思路。
先放幾張所謂的神秘的線框圖出來，先體會(huì)一下：
你在做設(shè)計(jì)前一定也有構(gòu)思吧？也會(huì)畫草圖吧？線框圖其實(shí)——也就是線—框圖（汗……）。一點(diǎn)都不神秘。
別看那么簡陋的線稿，微軟、IBM的大蝦們?cè)谧鲈O(shè)計(jì)前，一樣要借助這些簡陋的線框圖來討論項(xiàng)目。
線框圖更專業(yè)的叫法就是“低保真原型”——更多適用于軟件領(lǐng)域。
其中提到使用線框圖的原因，給出了以下幾點(diǎn)：
構(gòu)建高真實(shí)度原型要花費(fèi)很長時(shí)間。
審查人員會(huì)對(duì)原型細(xì)節(jié)進(jìn)行評(píng)論，而忽視重要的特性。
因?yàn)樾薷母哒鎸?shí)度原型比較困難，開發(fā)人員往往不樂意進(jìn)行修改。
原型會(huì)使人們對(duì)系統(tǒng)形成預(yù)期，一旦形成，就很難改變。
高真實(shí)度原型中的一個(gè) 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)
從這個(gè)分類上，我們看到我們通常所說的“線框圖”還不能足夠代替“原型設(shè)計(jì)”，而只是原型設(shè)計(jì)中的一類。上面的圖片都是線框圖的例子，包含了紙上原型，還有用軟件模擬的線框圖。而flash demo在涉及到一些需要交互技術(shù)的網(wǎng)站更容易被用到，比如在線學(xué)習(xí)網(wǎng)站的練習(xí)設(shè)計(jì)。
舉我最近在做的項(xiàng)目的某個(gè)環(huán)節(jié)的flash demo設(shè)計(jì)：
這個(gè)系列，我先是用word來做線框圖，后來有一些無法用word來描述交互狀態(tài)的就干脆一直用flash來描述整個(gè)動(dòng)態(tài)效果了。
flash做原型，目前我很喜歡，不但可以模擬頁面效果，而且很有效率，還能夠很好模擬鼠標(biāo)放置到鏈接上的效果。
word 畫線框圖，也不錯(cuò)。你可以借助它的表格很快模擬網(wǎng)站布局，舉個(gè)例子：
現(xiàn)在看來，這個(gè)原型是不合格的，因?yàn)槔锩娉霈F(xiàn)了顏色和圖片要素。呵呵，雖然在討論時(shí)我一再強(qiáng)調(diào)我的那些顏色不是最終設(shè)計(jì)的顏色，可是boss們總還是不自覺去評(píng)價(jià)那些顏色和圖片……因此下次一定要注意，去除去除任何會(huì)影響注意力集中到內(nèi)容和頁面信息布局、框架的元素。
除了白紙和筆、word、flash、photoshop（不推薦）等可以做原型設(shè)計(jì)，還有更專業(yè)的Axure RP
原型設(shè)計(jì)能夠讓你在很快的時(shí)間內(nèi)將核心需求表達(dá)出來。你將和你的客戶就這些原型討論，確定核心的內(nèi)容、欄目結(jié)構(gòu)、基本布局等。這些東西一旦確定下來，你后期的設(shè)計(jì)工作就有章可依了。
原型設(shè)計(jì)時(shí)，若客戶對(duì)網(wǎng)站的定位存在疑惑或者認(rèn)為不必要的時(shí)候，你盡量幫他把網(wǎng)站定位分析清楚。定位的模糊讓下一步的網(wǎng)站構(gòu)架設(shè)計(jì)、內(nèi)容策劃、運(yùn)營策劃和市場策劃出現(xiàn)障礙。
四：設(shè)計(jì)風(fēng)格圖
經(jīng)過幾次的討論修改，確定了原型后，就可以做設(shè)計(jì)了。開始動(dòng)用你的photoshop。
最主要的是做首頁、代表欄目頁、代表內(nèi)容頁。三個(gè)頁面即可。這一步是確定基本色調(diào)和網(wǎng)站風(fēng)格。討論的重點(diǎn)落到了“好看不好看”“適合不適合”上來 。
若你在做設(shè)計(jì)的時(shí)候，客戶又想提出需求更改的要求，比如在原型設(shè)計(jì)時(shí)，已經(jīng)確認(rèn)的欄目增加了一個(gè)。那我建議你仍是要先修改原型設(shè)計(jì)，而不是直接在photoshop上修改設(shè)計(jì)。因?yàn)榭赡芎竺娴拈_發(fā)人員仍要參考你的更簡潔的原型做開發(fā)——當(dāng)你做頁面設(shè)計(jì)的時(shí)候。若你在根據(jù)客戶的需求更改修改了設(shè)計(jì)而不修改原型時(shí)，很可能導(dǎo)致你和開發(fā)人員的信息不一致。
增加或減少一個(gè)欄目的更改算是小事，如果日后在設(shè)計(jì)時(shí)客戶突然改變了網(wǎng)站的定位——意味著目標(biāo)人群可能也要發(fā)生變化。所以，你在原型設(shè)計(jì)里一定要認(rèn)真和客戶溝通。相信經(jīng)過幾次真誠的，為客戶著想的溝通基礎(chǔ)上確定下來的大的方針，客戶不應(yīng)該輕易發(fā)生變化。
風(fēng)格圖確定后，客戶認(rèn)為顏色、布局、版式都o(jì)k了。開始下一步的工作。
五：制作頁面（html）同時(shí)交付開發(fā)人員
原則上講，策劃人員與設(shè)計(jì)人員是應(yīng)該分離的職能，不過很多公司是設(shè)計(jì)師承擔(dān)著策劃工作，那么下一步就是：
以做頁面了（高保真原型）。不一定用photoshop將所有的頁面做出來看效果，我覺得做了首頁、欄目頁和內(nèi)容頁就夠了。下面的頁面就在dreawer里完成，需要用圖的時(shí)候再設(shè)計(jì)就是了。同時(shí)接觸開發(fā)人員，讓他們明白整個(gè)設(shè)計(jì)思路，以及開發(fā)要求。
若開發(fā)人員并沒有參與到前期你和客戶的溝通，也沒有參加原型設(shè)計(jì)時(shí)，你可能還需要準(zhǔn)備一份文檔給他——產(chǎn)品需求文檔。
產(chǎn)品需求文檔大概需要涵蓋以下部分：
1.項(xiàng)目概述：是個(gè)什么項(xiàng)目？為什么要做？
2.面向的用戶是如何定義的？他們能夠利用這個(gè)網(wǎng)站做什么？
3.這個(gè)網(wǎng)站提供什么服務(wù)？有什么特色？
4.主要的功能有什么？
5.網(wǎng)站的目錄層次結(jié)構(gòu)圖；
6.開發(fā)計(jì)劃及人員角色定義；
……視具體項(xiàng)目而有所不同。我不贊同使用模版，但是做為新手可以從這些模版里得到參考。不過我相信很多項(xiàng)目沒有這么復(fù)雜。你只要達(dá)到能夠讓開發(fā)人員明白網(wǎng)站的開發(fā)需求以及約束就可以了。如果要顯得專業(yè)些，還是要?jiǎng)狱c(diǎn)筆頭功夫?qū)扅c(diǎn)文檔。存在腦子里的想法隨時(shí)會(huì)變化和遺忘的，面對(duì)面的溝通雖然及時(shí)但是日后也會(huì)發(fā)生理解的偏差。以文檔為基礎(chǔ)的溝通可以方便項(xiàng)目的管理。（來源）
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com
