網(wǎng)頁界面設(shè)計(jì)流程

淘寶面試的最后一環(huán)是讓應(yīng)聘者向面試官提問，讓面試官有機(jī)會回答公司、團(tuán)隊(duì)、工作等問題。 我面試過的大約三分之一的設(shè)計(jì)師問我“淘寶的設(shè)計(jì)過程是怎么樣的？” 我不太清楚聽到這個(gè)問題的人為什么有這么高的比例。 這可能是一個(gè)“安全”的問題。 在面試沒有任何危害的現(xiàn)在，設(shè)計(jì)師在工作中可能面臨著“流程”問題和“無流程”問題，這個(gè)話題可能關(guān)系到各公司的“機(jī)密”，但確實(shí)找不到相關(guān)資料?？傊?，面試淘寶的設(shè)計(jì)師數(shù)量有限，但國內(nèi)三分之一的網(wǎng)絡(luò)設(shè)計(jì)師想了解更多關(guān)于“設(shè)計(jì)過程”的知識，這并不是“機(jī)密”的話題(我所知道的各公司的設(shè)計(jì)過程都是從890到10，名稱是因此，我們將簡要介紹淘寶UED的設(shè)計(jì)流程，期待它能為這三分之一的設(shè)計(jì)師帶來幫助。步驟1 :原型(Prototype )設(shè)計(jì)的第一階段稱為原型設(shè)計(jì)，主要包括設(shè)計(jì)產(chǎn)品功能、用戶流程、信息體系結(jié)構(gòu)、交互詳細(xì)信息和頁面元素。 如果你覺得這些概念相當(dāng)偏頗的話，就大口語來說，試用品的設(shè)計(jì)，即使產(chǎn)品不美麗，也只會明確你想做的事情，明確它們是如何與用戶交流的，并且把它們都描繪出來，直接怎么畫取決于你。 可以用紙畫、用白板畫、用Photoshop畫、用Visio畫，或者像我們一樣用Axure畫。 上述事情都可以不分巨細(xì)地表現(xiàn)出來。原型交付項(xiàng)目(Delivery，即某個(gè)階段的交付項(xiàng)目)中最重要、最常見的是線框，這在下圖中可以看到，不要太多說明在畫線圖時(shí)，要把握細(xì)節(jié)描寫的程度。 有只畫框就行的東西，也有必須設(shè)計(jì)復(fù)印件的東西。 你的上司和需求者抓住角落的廣告banner這個(gè)問題糾纏著你，不要忽視最重要的頁面正文部分。此外，要記住原型是用來改變?nèi)说摹?它的存在價(jià)值被多次修改，多次更新，下一步?jīng)]有多次改變。Step 2:模型(Mock-up )在原型被接受后，應(yīng)關(guān)注產(chǎn)品不美觀。 我們用“模特”一詞總稱這一步驟的成果。 與原型相比，我們更關(guān)注產(chǎn)品的可視化設(shè)計(jì)，包括顏色、樣式、圖標(biāo)和插圖。顯然，這不是“藝術(shù)”的“美化”工作。 可視設(shè)計(jì)師必須深入了解原型設(shè)計(jì)，充分理解交互式設(shè)計(jì)和尚未進(jìn)行的HTML/CSS/JS代碼。 如果不能從全球的視角進(jìn)行視覺設(shè)計(jì)的話，只能把水晶效果變成金屬效果的“自己享受”，產(chǎn)品本身毫無價(jià)值。 原型說“在這一頁中，a比b重要”，在他的頭腦中有能夠表現(xiàn)出17、8種“a比b重要”的視覺語言。 這是設(shè)計(jì)模式對視覺設(shè)計(jì)師的基本要求。更高的要求是視覺設(shè)計(jì)的“原創(chuàng)功能”。 “相反是水晶效應(yīng)還是金屬效應(yīng)？ “這個(gè)按鈕什么顏色好呢？ 等等。 這樣的想法和選擇，應(yīng)該著眼于產(chǎn)品的氣質(zhì)、品牌等，在各種產(chǎn)品之間保持一定的統(tǒng)一，在用戶的心上打上視覺的烙印。 很難做到這一點(diǎn)，尤其是要滿足以前的要求。 一般來說，如果能夠?qū)⒔换ピO(shè)計(jì)的成果和品牌形象表現(xiàn)出90%，就會有很好的結(jié)果。 從我自己的角度來看，總是很郁悶，在原創(chuàng)設(shè)計(jì)中無法用視覺語言表達(dá)自己的想法，總是完成模型的話就有7成更高的要求，有些問題用交互式設(shè)計(jì)很難解決。 此時(shí)，需要一位能夠從視覺設(shè)計(jì)的觀點(diǎn)創(chuàng)造性地解決問題的具有創(chuàng)造力的視覺師?？偟膩碚f，模型設(shè)計(jì)是非常困難的。 其工具感性，但設(shè)計(jì)過程非常合理，必須在各種制約中解決問題。 現(xiàn)在，從高角度看“視覺設(shè)計(jì)”的人還不多，多停留在“效果”“風(fēng)格”等表面議題上。 個(gè)人認(rèn)為在“Web標(biāo)準(zhǔn)”和“用戶體驗(yàn)”之后，視覺設(shè)計(jì)是Web設(shè)計(jì)專業(yè)化運(yùn)動(dòng)的第三波，市場需求已經(jīng)存在，只有有人能夠推動(dòng)。模型的設(shè)計(jì)通常使用Photoshop，但以下是示例(與原型示例相對應(yīng))Step 3:演示版(Demo )這一步驟基于演示或原型、模型通過xHTML/CSS/JavaScript等前端技術(shù)實(shí)現(xiàn)，后端開發(fā)工程師可以接管代碼。 這個(gè)過程，馬尼，正淳特別制作新的投稿詳細(xì)介紹吧。 但是，前端開發(fā)在一些公司還沒有設(shè)計(jì)團(tuán)隊(duì)，前端開發(fā)是用戶體驗(yàn)的提高和保證，開發(fā)只不過是其手段和形式。 所以，把這份工作一直留在我們隊(duì)里，現(xiàn)在看起來很不錯(cuò)：)如果將上述原型、模型轉(zhuǎn)換為xHTML/CSS，則會顯示此頁面http:/favorte.T/collect _ list -g，nrx wy2lumhgozsvz2CQ3tk k6w 64-htmStep 0.5/1.5/2.5/3.5中有一半的步驟嗎？ 是的，這是我們的用戶研究過程。 在每個(gè)階段的前后，根據(jù)情況選擇是否專心研究用戶。 用戶的研究形式也是自由的。 給會員打電話，汪汪隨便商量，到公司做可用性測試，訪問會員家方便實(shí)用的方法怎么辦？ 我們還沒有著力于很多“學(xué)術(shù)”的理論研究，就研究方法也能“抓住老鼠”。 關(guān)鍵是研究的結(jié)果如何體現(xiàn)在產(chǎn)品中，如何吸收個(gè)人用戶的意見，為所有用戶提供服務(wù)。在這一點(diǎn)上，我們還不夠，積累也很薄弱，需要向伙伴們學(xué)習(xí)更多。 請代我向大家問好。最后關(guān)于進(jìn)程，請注意以下幾點(diǎn)1 .設(shè)計(jì)過程的目標(biāo)是保證“無論誰設(shè)計(jì)這個(gè)產(chǎn)品，都能達(dá)到80分”2. “100分”的完美作品，很有可能不遵循過程，是將革新、傳承、實(shí)行力天才融合的作品3 .“過程”只有根據(jù)環(huán)境帶來正面作用