淘寶網(wǎng)的設(shè)計流程（網(wǎng)站設(shè)計 淘寶設(shè)計 大型網(wǎng)站設(shè)計 設(shè)計策劃 網(wǎng)站方案 網(wǎng)站策劃）

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