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