看看淘寶的設(shè)計(jì)流程
發(fā)布日期:2008-11-01 關(guān)鍵詞:羅湖網(wǎng)站建設(shè)|石排網(wǎng)頁(yè)設(shè)計(jì)◆石排百度代理 已有 6746 人瀏覽
淘寶面試的最后一個(gè)環(huán)節(jié),是請(qǐng)應(yīng)聘者向面試官提問(wèn),使面試官有機(jī)會(huì)解答應(yīng)聘者對(duì)公司、團(tuán)隊(duì)以及工作等等方面的疑問(wèn)。在我面試過(guò)的設(shè)計(jì)師當(dāng)中,大約有三分之一會(huì)問(wèn)我:“淘寶的設(shè)計(jì)流程是怎么樣的?”我不是很了解問(wèn)這個(gè)問(wèn)題的人為什么會(huì)有如此高的比例。也許這是一個(gè)“安全”的問(wèn)題,不會(huì)對(duì)面試有什么危害;也許目前設(shè)計(jì)師在工作中普遍碰到“流程”問(wèn)題或“沒(méi)有流程”的問(wèn)題;也許這個(gè)話題涉及各家公司的“機(jī)密”,確實(shí)無(wú)從找到相關(guān)的資料。
總而言之,雖然來(lái)面試淘寶的設(shè)計(jì)師人數(shù)有限,但我斗膽假設(shè):目前國(guó)內(nèi)所有網(wǎng)頁(yè)設(shè)計(jì)師中的三分之一想了解更多關(guān)于“設(shè)計(jì)流程”方面的知識(shí),而我們也不認(rèn)為這是什么“機(jī)密”的話題(我了解的各公司設(shè)計(jì)過(guò)程都八九不離十,名稱不同,本質(zhì)上是一樣的)。所以,就在此簡(jiǎn)單介紹一下淘寶UED的設(shè)計(jì)流程,期望對(duì)這三分之一的設(shè)計(jì)師有所幫助。
Step 1:原型(Prototype)
設(shè)計(jì)的第一個(gè)階段,我們稱之為原型設(shè)計(jì),主要是設(shè)計(jì)產(chǎn)品的功能、用戶流程、信息架構(gòu)、交互細(xì)節(jié)、頁(yè)面元素等等。如果你覺(jué)得聽(tīng)上去這些概念都比較懸的話,我就用大白話來(lái)說(shuō):原型設(shè)計(jì),就是完全不管產(chǎn)品長(zhǎng)得好不好看,只把它要做的事情和怎么做這些事情想清楚,把它怎么和用戶交互想清楚,而且把所有這些都畫(huà)出來(lái),讓人可以直觀地看到。
至于怎么畫(huà)出來(lái),那就隨你了。用紙筆畫(huà),用白板水筆畫(huà),用Photoshop畫(huà),用Visio畫(huà),或者像我們一樣用Axure畫(huà),都可以。只要把上面提到的這些都事無(wú)巨細(xì)地表達(dá)出來(lái)。
在原型的交付物(Delivery,也就是某個(gè)階段的產(chǎn)出物)中,最重要也最常見(jiàn)的就是線框圖(Wire Frame),這玩意兒不用多解釋了,看下面這張圖就明白:
在畫(huà)線框圖的時(shí)候,要把握好細(xì)節(jié)的刻畫(huà)程度。有些東西只要畫(huà)個(gè)框就行了,而有些東西需要把文案都設(shè)計(jì)好。以免你的老板或是需求方揪住角落里的廣告banner該有多大這種問(wèn)題與你糾纏不休,而忽視了最重要的頁(yè)面主體部分。
此外,還要牢記:原型就是用來(lái)讓人改的。它存在的價(jià)值就體現(xiàn)在被修改了幾次,被更新了幾次,以及它的下一步被少改了幾次。
Step 2:模型(Mock-up)
在原型被大家接受之后,就該關(guān)心產(chǎn)品長(zhǎng)得好不好看了。 我們以“模型”這個(gè)詞來(lái)統(tǒng)稱該步驟的交付物。和原型相比,它關(guān)注于產(chǎn)品的視覺(jué)設(shè)計(jì),包括色彩、風(fēng)格、圖標(biāo)、插圖等等。
要清楚的是,這不是一步由“美工”來(lái)“美化”的工作。視覺(jué)設(shè)計(jì)師需要對(duì)原型設(shè)計(jì)有深刻的理解,對(duì)交互設(shè)計(jì)和尚未進(jìn)行的HTML/CSS/JS的 Code都要有充分的了解。如果不能從全局的角度來(lái)做視覺(jué)設(shè)計(jì),則只能是做做把水晶效果改成金屬效果這樣的“自?shī)首詷?lè)”,而對(duì)產(chǎn)品本身沒(méi)有任何有價(jià)值的幫助。如果原型說(shuō):“在這個(gè)頁(yè)面上,A比B重要。”,那他的腦子里就要有十七八種可以表現(xiàn)“A比B重要”的視覺(jué)語(yǔ)言可供選擇。這是對(duì)設(shè)計(jì)模型的視覺(jué)設(shè)計(jì)師的基本要求。
更高一些的要求,才是視覺(jué)設(shè)計(jì)的“原始功能”?!暗沟资沁x水晶效果還是金屬效果?”,“這個(gè)按鈕選什么顏色好?”等等。這一類(lèi)的思考和選擇,應(yīng)著眼于產(chǎn)品的氣質(zhì)、品牌等等,在各種產(chǎn)品間保持一定的統(tǒng)一,在用戶心里打下視覺(jué)的烙印。其實(shí)要做到這一點(diǎn)是很難的,特別是還要滿足上一點(diǎn)的要求。一般來(lái)說(shuō),如果能90%的把交互設(shè)計(jì)的成果和品牌形象表達(dá)出來(lái),已經(jīng)是很好的結(jié)果了。從我自己來(lái)說(shuō),就常常很郁悶不能用好的視覺(jué)語(yǔ)言來(lái)表達(dá)自己在原型設(shè)計(jì)中的想法,總是做完模型就打個(gè)七折:(
更更高的要求, 有些問(wèn)題用交互設(shè)計(jì)是很難解決的,這時(shí)就需要一個(gè)有創(chuàng)造能力的視覺(jué)師,可以從視覺(jué)設(shè)計(jì)的角度來(lái)創(chuàng)造性地解決問(wèn)題(一時(shí)還沒(méi)想出好的例子,想出來(lái)再補(bǔ)上)。
總的來(lái)說(shuō),模型設(shè)計(jì)是件非常困難的事情。它的工具是感性的,但設(shè)計(jì)過(guò)程又要求非常理性,必須在各種約束條件中解決問(wèn)題。而目前能從較高的角度來(lái)來(lái)看“視覺(jué)設(shè)計(jì)”的人還不多,大多還停留在“效果”、“風(fēng)格”等表面議題上。個(gè)人以為在“Web標(biāo)準(zhǔn)”和“用戶體驗(yàn)”之后,視覺(jué)設(shè)計(jì)是Web設(shè)計(jì)專(zhuān)業(yè)化運(yùn)動(dòng)的第三波,市場(chǎng)的需求已經(jīng)存在,只差有人推動(dòng)一下。
模型的設(shè)計(jì)一般來(lái)說(shuō)都是用Photoshop了,下是是個(gè)例子(與原型的例子對(duì)應(yīng)):
Step 3:演示版(Demo)
這步我就不多說(shuō)了,Demo就是按照原型和模型用xHTML/CSS/JavaScript等等前端技術(shù)實(shí)現(xiàn)出來(lái),以便后端的開(kāi)發(fā)工程師可以接手編碼。這個(gè)過(guò)程讓小馬、正淳專(zhuān)門(mén)起個(gè)新帖來(lái)詳細(xì)介紹吧。只提一點(diǎn),前端開(kāi)發(fā)在有些公司是不放在設(shè)計(jì)團(tuán)隊(duì)的,而我們認(rèn)為前端開(kāi)發(fā)從很大程度上來(lái)說(shuō)是對(duì)用戶體驗(yàn)的提升和保證,開(kāi)發(fā)只是它的一個(gè)手段和形式。所以就把這塊工作一直留在我們團(tuán)隊(duì),現(xiàn)在看起來(lái)這樣很棒:)
把上述原型、模型轉(zhuǎn)為xHTML/CSS之后就是這個(gè)頁(yè)面了:
http://favorite.taobao.com/collect_list——-g,nrxwy2lumhgozsvz2cq3tk6w64-.htm
Step 0.5/1.5/2.5/3.5
居然還有半個(gè)半個(gè)的步驟?是的,這是我們的用戶研究過(guò)程。在各個(gè)階段的前后,我們會(huì)根據(jù)具體情況選擇是否投入精力到用戶研究上。用戶研究的形式也很自由:給會(huì)員打個(gè)電話,旺旺上隨便找人聊聊,到公司來(lái)做可用性測(cè)試,到會(huì)員家中訪談……怎么方便怎么實(shí)用就怎么做。我們還沒(méi)有精力放在太多的“學(xué)術(shù)”性質(zhì)的理論研究上,對(duì)研究方法也是不拘一格,“能抓老鼠”就行。關(guān)鍵的關(guān)鍵,研究的結(jié)果如何表現(xiàn)到產(chǎn)品上,如何吸收單個(gè)用戶的意見(jiàn)來(lái)服務(wù)所有用戶。
在這一點(diǎn)上,我們做得還很不夠,積累也很薄,需要向同行們多多學(xué)習(xí),也請(qǐng)大家多多指點(diǎn)。
最后……
關(guān)于流程,要注意:
1.
設(shè)計(jì)流程的目標(biāo),在于保證“無(wú)論誰(shuí)來(lái)做這個(gè)產(chǎn)品的設(shè)計(jì),都能達(dá)到80分”;
2.
“100分”的完美作品,很有可能沒(méi)有遵循流程,而是天才地融合了創(chuàng)新、傳承和執(zhí)行力的作品;
3. “流程”這種東西,只有與環(huán)境相匹配才能帶來(lái)正面的作用。
以上是我們UED團(tuán)隊(duì)目前的設(shè)計(jì)流程,也許你也發(fā)現(xiàn)了,它和大多數(shù)公司的設(shè)計(jì)流程是差不多的。我們也在不斷地修改和發(fā)展這個(gè)體系,有不足的地方也請(qǐng)大家多指教。如果你借鑒了我們的流程,在工作中發(fā)現(xiàn)有什么問(wèn)題,也請(qǐng)回來(lái)告訴我們,謝謝大家!
總而言之,雖然來(lái)面試淘寶的設(shè)計(jì)師人數(shù)有限,但我斗膽假設(shè):目前國(guó)內(nèi)所有網(wǎng)頁(yè)設(shè)計(jì)師中的三分之一想了解更多關(guān)于“設(shè)計(jì)流程”方面的知識(shí),而我們也不認(rèn)為這是什么“機(jī)密”的話題(我了解的各公司設(shè)計(jì)過(guò)程都八九不離十,名稱不同,本質(zhì)上是一樣的)。所以,就在此簡(jiǎn)單介紹一下淘寶UED的設(shè)計(jì)流程,期望對(duì)這三分之一的設(shè)計(jì)師有所幫助。
Step 1:原型(Prototype)
設(shè)計(jì)的第一個(gè)階段,我們稱之為原型設(shè)計(jì),主要是設(shè)計(jì)產(chǎn)品的功能、用戶流程、信息架構(gòu)、交互細(xì)節(jié)、頁(yè)面元素等等。如果你覺(jué)得聽(tīng)上去這些概念都比較懸的話,我就用大白話來(lái)說(shuō):原型設(shè)計(jì),就是完全不管產(chǎn)品長(zhǎng)得好不好看,只把它要做的事情和怎么做這些事情想清楚,把它怎么和用戶交互想清楚,而且把所有這些都畫(huà)出來(lái),讓人可以直觀地看到。
至于怎么畫(huà)出來(lái),那就隨你了。用紙筆畫(huà),用白板水筆畫(huà),用Photoshop畫(huà),用Visio畫(huà),或者像我們一樣用Axure畫(huà),都可以。只要把上面提到的這些都事無(wú)巨細(xì)地表達(dá)出來(lái)。
在原型的交付物(Delivery,也就是某個(gè)階段的產(chǎn)出物)中,最重要也最常見(jiàn)的就是線框圖(Wire Frame),這玩意兒不用多解釋了,看下面這張圖就明白:
在畫(huà)線框圖的時(shí)候,要把握好細(xì)節(jié)的刻畫(huà)程度。有些東西只要畫(huà)個(gè)框就行了,而有些東西需要把文案都設(shè)計(jì)好。以免你的老板或是需求方揪住角落里的廣告banner該有多大這種問(wèn)題與你糾纏不休,而忽視了最重要的頁(yè)面主體部分。
此外,還要牢記:原型就是用來(lái)讓人改的。它存在的價(jià)值就體現(xiàn)在被修改了幾次,被更新了幾次,以及它的下一步被少改了幾次。
Step 2:模型(Mock-up)
在原型被大家接受之后,就該關(guān)心產(chǎn)品長(zhǎng)得好不好看了。 我們以“模型”這個(gè)詞來(lái)統(tǒng)稱該步驟的交付物。和原型相比,它關(guān)注于產(chǎn)品的視覺(jué)設(shè)計(jì),包括色彩、風(fēng)格、圖標(biāo)、插圖等等。
要清楚的是,這不是一步由“美工”來(lái)“美化”的工作。視覺(jué)設(shè)計(jì)師需要對(duì)原型設(shè)計(jì)有深刻的理解,對(duì)交互設(shè)計(jì)和尚未進(jìn)行的HTML/CSS/JS的 Code都要有充分的了解。如果不能從全局的角度來(lái)做視覺(jué)設(shè)計(jì),則只能是做做把水晶效果改成金屬效果這樣的“自?shī)首詷?lè)”,而對(duì)產(chǎn)品本身沒(méi)有任何有價(jià)值的幫助。如果原型說(shuō):“在這個(gè)頁(yè)面上,A比B重要。”,那他的腦子里就要有十七八種可以表現(xiàn)“A比B重要”的視覺(jué)語(yǔ)言可供選擇。這是對(duì)設(shè)計(jì)模型的視覺(jué)設(shè)計(jì)師的基本要求。
更高一些的要求,才是視覺(jué)設(shè)計(jì)的“原始功能”?!暗沟资沁x水晶效果還是金屬效果?”,“這個(gè)按鈕選什么顏色好?”等等。這一類(lèi)的思考和選擇,應(yīng)著眼于產(chǎn)品的氣質(zhì)、品牌等等,在各種產(chǎn)品間保持一定的統(tǒng)一,在用戶心里打下視覺(jué)的烙印。其實(shí)要做到這一點(diǎn)是很難的,特別是還要滿足上一點(diǎn)的要求。一般來(lái)說(shuō),如果能90%的把交互設(shè)計(jì)的成果和品牌形象表達(dá)出來(lái),已經(jīng)是很好的結(jié)果了。從我自己來(lái)說(shuō),就常常很郁悶不能用好的視覺(jué)語(yǔ)言來(lái)表達(dá)自己在原型設(shè)計(jì)中的想法,總是做完模型就打個(gè)七折:(
更更高的要求, 有些問(wèn)題用交互設(shè)計(jì)是很難解決的,這時(shí)就需要一個(gè)有創(chuàng)造能力的視覺(jué)師,可以從視覺(jué)設(shè)計(jì)的角度來(lái)創(chuàng)造性地解決問(wèn)題(一時(shí)還沒(méi)想出好的例子,想出來(lái)再補(bǔ)上)。
總的來(lái)說(shuō),模型設(shè)計(jì)是件非常困難的事情。它的工具是感性的,但設(shè)計(jì)過(guò)程又要求非常理性,必須在各種約束條件中解決問(wèn)題。而目前能從較高的角度來(lái)來(lái)看“視覺(jué)設(shè)計(jì)”的人還不多,大多還停留在“效果”、“風(fēng)格”等表面議題上。個(gè)人以為在“Web標(biāo)準(zhǔn)”和“用戶體驗(yàn)”之后,視覺(jué)設(shè)計(jì)是Web設(shè)計(jì)專(zhuān)業(yè)化運(yùn)動(dòng)的第三波,市場(chǎng)的需求已經(jīng)存在,只差有人推動(dòng)一下。
模型的設(shè)計(jì)一般來(lái)說(shuō)都是用Photoshop了,下是是個(gè)例子(與原型的例子對(duì)應(yīng)):
Step 3:演示版(Demo)
這步我就不多說(shuō)了,Demo就是按照原型和模型用xHTML/CSS/JavaScript等等前端技術(shù)實(shí)現(xiàn)出來(lái),以便后端的開(kāi)發(fā)工程師可以接手編碼。這個(gè)過(guò)程讓小馬、正淳專(zhuān)門(mén)起個(gè)新帖來(lái)詳細(xì)介紹吧。只提一點(diǎn),前端開(kāi)發(fā)在有些公司是不放在設(shè)計(jì)團(tuán)隊(duì)的,而我們認(rèn)為前端開(kāi)發(fā)從很大程度上來(lái)說(shuō)是對(duì)用戶體驗(yàn)的提升和保證,開(kāi)發(fā)只是它的一個(gè)手段和形式。所以就把這塊工作一直留在我們團(tuán)隊(duì),現(xiàn)在看起來(lái)這樣很棒:)
把上述原型、模型轉(zhuǎn)為xHTML/CSS之后就是這個(gè)頁(yè)面了:
http://favorite.taobao.com/collect_list——-g,nrxwy2lumhgozsvz2cq3tk6w64-.htm
Step 0.5/1.5/2.5/3.5
居然還有半個(gè)半個(gè)的步驟?是的,這是我們的用戶研究過(guò)程。在各個(gè)階段的前后,我們會(huì)根據(jù)具體情況選擇是否投入精力到用戶研究上。用戶研究的形式也很自由:給會(huì)員打個(gè)電話,旺旺上隨便找人聊聊,到公司來(lái)做可用性測(cè)試,到會(huì)員家中訪談……怎么方便怎么實(shí)用就怎么做。我們還沒(méi)有精力放在太多的“學(xué)術(shù)”性質(zhì)的理論研究上,對(duì)研究方法也是不拘一格,“能抓老鼠”就行。關(guān)鍵的關(guān)鍵,研究的結(jié)果如何表現(xiàn)到產(chǎn)品上,如何吸收單個(gè)用戶的意見(jiàn)來(lái)服務(wù)所有用戶。
在這一點(diǎn)上,我們做得還很不夠,積累也很薄,需要向同行們多多學(xué)習(xí),也請(qǐng)大家多多指點(diǎn)。
最后……
關(guān)于流程,要注意:
1.
設(shè)計(jì)流程的目標(biāo),在于保證“無(wú)論誰(shuí)來(lái)做這個(gè)產(chǎn)品的設(shè)計(jì),都能達(dá)到80分”;
2.
“100分”的完美作品,很有可能沒(méi)有遵循流程,而是天才地融合了創(chuàng)新、傳承和執(zhí)行力的作品;
3. “流程”這種東西,只有與環(huán)境相匹配才能帶來(lái)正面的作用。
以上是我們UED團(tuán)隊(duì)目前的設(shè)計(jì)流程,也許你也發(fā)現(xiàn)了,它和大多數(shù)公司的設(shè)計(jì)流程是差不多的。我們也在不斷地修改和發(fā)展這個(gè)體系,有不足的地方也請(qǐng)大家多指教。如果你借鑒了我們的流程,在工作中發(fā)現(xiàn)有什么問(wèn)題,也請(qǐng)回來(lái)告訴我們,謝謝大家!
注:本文來(lái)自深一集團(tuán)原創(chuàng)或轉(zhuǎn)截 http://ganglongfangchan.com/newslist_489_2.html 如需轉(zhuǎn)載,請(qǐng)注明出處!