猫咪免费人成网站在线观看丨国产69精品久久久久9999apgf丨射 精 视频 合集丨俄罗斯videodesxo极品丨成人天堂网丨日日碰日日摸丨波多野结衣成人在线丨97一区二区国产好的精华液丨在线的av丨闷骚老干部cao个爽丨99免费观看视频丨久久精品国产久精国产丨久久久无码人妻精品一区丨欧美巨乳在线观看丨91九色精品丨天天操天天爽天天干丨高清偷自拍亚洲精品三区丨又黄又湿免费高清视频丨国产免费黄色小视频丨精品1区2区

淘寶面試的最后一個(gè)環(huán)節(jié)，是請應(yīng)聘者向面試官提問，使面試官有機(jī)會(huì)解答應(yīng)聘者對公司、團(tuán)隊(duì)以及工作等等方面的疑問。在我面試過的設(shè)計(jì)師當(dāng)中，大約有三分之一會(huì)問我：“淘寶的設(shè)計(jì)流程是怎么樣的？”我不是很了解問這個(gè)問題的人為什么會(huì)有如此高的比例。也許這是一個(gè)“安全”的問題，不會(huì)對面試有什么危害；也許目前設(shè)計(jì)師在工作中普遍碰到“流程”問題或“沒有流程”的問題；也許這個(gè)話題涉及各家公司的“機(jī)密”，確實(shí)無從找到相關(guān)的資料。

總而言之，雖然來面試淘寶的設(shè)計(jì)師人數(shù)有限，但我斗膽假設(shè)：目前國內(nèi)所有網(wǎng)頁設(shè)計(jì)師中的三分之一想了解更多關(guān)于“設(shè)計(jì)流程”方面的知識(shí)，而我們也不認(rèn)為這是什么“機(jī)密”的話題(我了解的各公司設(shè)計(jì)過程都八九不離十，名稱不同，本質(zhì)上是一樣的)。所以，就在此簡單介紹一下淘寶UED的設(shè)計(jì)流程，期望對這三分之一的設(shè)計(jì)師有所幫助。

Step 1：原型（Prototype）

設(shè)計(jì)的第一個(gè)階段，我們稱之為原型設(shè)計(jì)，主要是設(shè)計(jì)產(chǎn)品的功能、用戶流程、信息架構(gòu)、交互細(xì)節(jié)、頁面元素等等。如果你覺得聽上去這些概念都比較懸的話，我就用大白話來說：原型設(shè)計(jì)，就是完全不管產(chǎn)品長得好不好看，只把它要做的事情和怎么做這些事情想清楚，把它怎么和用戶交互想清楚，而且把所有這些都畫出來，讓人可以直觀地看到。

至于怎么畫出來，那就隨你了。用紙筆畫，用白板水筆畫，用Photoshop畫，用Visio畫，或者像我們一樣用Axure畫，都可以。只要把上面提到的這些都事無巨細(xì)地表達(dá)出來。

在原型的交付物（Delivery，也就是某個(gè)階段的產(chǎn)出物）中，最重要也最常見的就是線框圖（Wire Frame），這玩意兒不用多解釋了，看下面這張圖就明白：


在畫線框圖的時(shí)候，要把握好細(xì)節(jié)的刻畫程度。有些東西只要畫個(gè)框就行了，而有些東西需要把文案都設(shè)計(jì)好。以免你的老板或是需求方揪住角落里的廣告banner該有多大這種問題與你糾纏不休，而忽視了最重要的頁面主體部分。

此外，還要牢記：原型就是用來讓人改的。它存在的價(jià)值就體現(xiàn)在被修改了幾次，被更新了幾次，以及它的下一步被少改了幾次。
Step 2：模型（Mock-up）

在原型被大家接受之后，就該關(guān)心產(chǎn)品長得好不好看了。 我們以“模型”這個(gè)詞來統(tǒng)稱該步驟的交付物。和原型相比，它關(guān)注于產(chǎn)品的視覺設(shè)計(jì)，包括色彩、風(fēng)格、圖標(biāo)、插圖等等。

要清楚的是，這不是一步由“美工”來“美化”的工作。視覺設(shè)計(jì)師需要對原型設(shè)計(jì)有深刻的理解，對交互設(shè)計(jì)和尚未進(jìn)行的HTML/CSS/JS的 Code都要有充分的了解。如果不能從全局的角度來做視覺設(shè)計(jì)，則只能是做做把水晶效果改成金屬效果這樣的“自娛自樂”，而對產(chǎn)品本身沒有任何有價(jià)值的幫助。如果原型說：“在這個(gè)頁面上，A比B重要。”，那他的腦子里就要有十七八種可以表現(xiàn)“A比B重要”的視覺語言可供選擇。這是對設(shè)計(jì)模型的視覺設(shè)計(jì)師的基本要求。

更高一些的要求，才是視覺設(shè)計(jì)的“原始功能”。“倒底是選水晶效果還是金屬效果？”，“這個(gè)按鈕選什么顏色好？”等等。這一類的思考和選擇，應(yīng)著眼于產(chǎn)品的氣質(zhì)、品牌等等，在各種產(chǎn)品間保持一定的統(tǒng)一，在用戶心里打下視覺的烙印。其實(shí)要做到這一點(diǎn)是很難的，特別是還要滿足上一點(diǎn)的要求。一般來說，如果能90%的把交互設(shè)計(jì)的成果和品牌形象表達(dá)出來，已經(jīng)是很好的結(jié)果了。從我自己來說，就常常很郁悶不能用好的視覺語言來表達(dá)自己在原型設(shè)計(jì)中的想法，總是做完模型就打個(gè)七折:(

更更高的要求， 有些問題用交互設(shè)計(jì)是很難解決的，這時(shí)就需要一個(gè)有創(chuàng)造能力的視覺師，可以從視覺設(shè)計(jì)的角度來創(chuàng)造性地解決問題（一時(shí)還沒想出好的例子，想出來再補(bǔ)上）。

總的來說，模型設(shè)計(jì)是件非常困難的事情。它的工具是感性的，但設(shè)計(jì)過程又要求非常理性，必須在各種約束條件中解決問題。而目前能從較高的角度來來看“視覺設(shè)計(jì)”的人還不多，大多還停留在“效果”、“風(fēng)格”等表面議題上。個(gè)人以為在“Web標(biāo)準(zhǔn)”和“用戶體驗(yàn)”之后，視覺設(shè)計(jì)是Web設(shè)計(jì)專業(yè)化運(yùn)動(dòng)的第三波，市場的需求已經(jīng)存在，只差有人推動(dòng)一下。

模型的設(shè)計(jì)一般來說都是用Photoshop了，下是是個(gè)例子（與原型的例子對應(yīng)）：
Step 3：演示版（Demo）

這步我就不多說了，Demo就是按照原型和模型用xHTML/CSS/JavaScript等等前端技術(shù)實(shí)現(xiàn)出來，以便后端的開發(fā)工程師可以接手編碼。這個(gè)過程讓小馬、正淳專門起個(gè)新帖來詳細(xì)介紹吧。只提一點(diǎn)，前端開發(fā)在有些公司是不放在設(shè)計(jì)團(tuán)隊(duì)的，而我們認(rèn)為前端開發(fā)從很大程度上來說是對用戶體驗(yàn)的提升和保證，開發(fā)只是它的一個(gè)手段和形式。所以就把這塊工作一直留在我們團(tuán)隊(duì)，現(xiàn)在看起來這樣很棒：）

　把上述原型、模型轉(zhuǎn)為xHTML/CSS之后就是這個(gè)頁面了：

http://favorite.taobao.com/collect_list——-g,nrxwy2lumhgozsvz2cq3tk6w64-.htm
Step 0.5/1.5/2.5/3.5

居然還有半個(gè)半個(gè)的步驟？是的，這是我們的用戶研究過程。在各個(gè)階段的前后，我們會(huì)根據(jù)具體情況選擇是否投入精力到用戶研究上。用戶研究的形式也很自由：給會(huì)員打個(gè)電話，旺旺上隨便找人聊聊，到公司來做可用性測試，到會(huì)員家中訪談……怎么方便怎么實(shí)用就怎么做。我們還沒有精力放在太多的“學(xué)術(shù)”性質(zhì)的理論研究上，對研究方法也是不拘一格，“能抓老鼠”就行。關(guān)鍵的關(guān)鍵，研究的結(jié)果如何表現(xiàn)到產(chǎn)品上，如何吸收單個(gè)用戶的意見來服務(wù)所有用戶。

在這一點(diǎn)上，我們做得還很不夠，積累也很薄，需要向同行們多多學(xué)習(xí)，也請大家多多指點(diǎn)。
最后……

關(guān)于流程，要注意：

1.

設(shè)計(jì)流程的目標(biāo)，在于保證“無論誰來做這個(gè)產(chǎn)品的設(shè)計(jì)，都能達(dá)到80分”；
2.

“100分”的完美作品，很有可能沒有遵循流程，而是天才地融合了創(chuàng)新、傳承和執(zhí)行力的作品；
3. “流程”這種東西，只有與環(huán)境相匹配才能帶來正面的作用。

以上是我們UED團(tuán)隊(duì)目前的設(shè)計(jì)流程，也許你也發(fā)現(xiàn)了，它和大多數(shù)公司的設(shè)計(jì)流程是差不多的。我們也在不斷地修改和發(fā)展這個(gè)體系，有不足的地方也請大家多指教。如果你借鑒了我們的流程，在工作中發(fā)現(xiàn)有什么問題，也請回來告訴我們，謝謝大家！