网球冠军数排名
深一集團40%的客戶來自外地,80%的業務來自搜索引擎和良好口碑!
微信 微信人工客服  |
微信人工客服
QQ在線溝通

新聞中心

全國業務咨詢請致電

400-666-2014

為您打響品牌第一炮
  • 在線QQ
  • 在線客服
  • 在線留言
看看淘寶的設計流程
發布日期:2008-11-01   關鍵詞:羅湖網站建設|石排網頁設計◆石排百度代理   已有 4633 人瀏覽
淘寶面試的最后一個環節,是請應聘者向面試官提問,使面試官有機會解答應聘者對公司、團隊以及工作等等方面的疑問。在我面試過的設計師當中,大約有三分之一會問我:“淘寶的設計流程是怎么樣的?”我不是很了解問這個問題的人為什么會有如此高的比例。也許這是一個“安全”的問題,不會對面試有什么危害;也許目前設計師在工作中普遍碰到“流程”問題或“沒有流程”的問題;也許這個話題涉及各家公司的“機密”,確實無從找到相關的資料。

總而言之,雖然來面試淘寶的設計師人數有限,但我斗膽假設:目前國內所有網頁設計師中的三分之一想了解更多關于“設計流程”方面的知識,而我們也不認為這是什么“機密”的話題(我了解的各公司設計過程都八九不離十,名稱不同,本質上是一樣的)。所以,就在此簡單介紹一下淘寶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://www.axeux.com/newslist_489_2.html 如需轉載,請注明出處!
深一網絡公司專注設計13年
全國網站建設
深一云服務器深一云服務器
高性能,高安全
網絡公司拒絕不當利
崇尚野蠻生長
500強企業網500強企業網
站建設供應商
10000家客戶案例10000家客戶案
實力說服力
83位技術團隊83位技術團隊
服務高保障
深一只做有排名網站只做有排名
有價值的網站
200人服務團隊200人服務團隊
追求客戶滿意
网球冠军数排名 彩票自动投注脚本 扑克21点手机版官方下载 彩票绑定银行卡安全吗 BETVICTOR伟德与官网 玩快三怎么选大小单双 黄金计划软件下载 好彩客正版官方网下载 时时彩组选包胆公式 今日最新娱乐 赛车6码8期倍投方案 天天快三计划软件手机版下载 谁能入侵黑彩服务器