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