UI入門(mén)工作流程介紹-佛山網(wǎng)站設(shè)計(jì)

設(shè)計(jì)師在工作中需要清楚了解設(shè)計(jì)的目的，尤其是你做的不是大眾化產(chǎn)品，不能以個(gè)人認(rèn)知、很強(qiáng)的主題性（如游戲）或”潮流“風(fēng)格來(lái)確定目標(biāo)時(shí)。比如設(shè)計(jì)小米手機(jī)的老人模式，老人需要什么樣的顏色？增加樣式是會(huì)產(chǎn)生干擾還是更好的體驗(yàn)感？按鈕要多大才合適？在這種產(chǎn)品的UI設(shè)計(jì)時(shí)，設(shè)計(jì)師需要從頭參與，而且到了設(shè)計(jì)環(huán)節(jié)時(shí)，設(shè)計(jì)師基本上已經(jīng)心里有數(shù)了。

　　我傾向于說(shuō)“交互設(shè)計(jì)的整個(gè)流程”。在我這里，UI是指“界面”，在視覺(jué)設(shè)計(jì)開(kāi)始之前，界面的的交互策劃與設(shè)計(jì)是很重要的前置步驟，對(duì)終的用戶體驗(yàn)有很大的影響。
我團(tuán)隊(duì)在交互設(shè)計(jì)階段一般有產(chǎn)品經(jīng)理、交互設(shè)計(jì)師和UI設(shè)計(jì)師主要參與。以我的了解，很多公司不設(shè)專(zhuān)門(mén)的交互設(shè)計(jì)師，而由產(chǎn)品經(jīng)理完成相關(guān)工作。以下是我這里的工作流程（圖片來(lái)自于網(wǎng)絡(luò)，本團(tuán)隊(duì)的就不貼了）。這個(gè)流程希望整個(gè)產(chǎn)品團(tuán)隊(duì)都能參與其中并共同加強(qiáng)對(duì)產(chǎn)品的理解?；蛘呓枰粋€(gè)時(shí)髦的概念，我是希望團(tuán)隊(duì)能具有更多Design Thinking，“設(shè)計(jì)思維”，來(lái)加強(qiáng)和推動(dòng)解決問(wèn)題的能力，并激發(fā)更多創(chuàng)新。
開(kāi)始一定要把Scenario應(yīng)用場(chǎng)景和Persona用戶角色做出來(lái)。你的產(chǎn)品是在何種場(chǎng)景下被使用，你的用戶角色是怎樣特征的人。設(shè)計(jì)的對(duì)不對(duì)，要用用戶角色來(lái)判斷，而不是設(shè)計(jì)師或產(chǎn)品經(jīng)理自己。把場(chǎng)景和角色描述清楚，并且讓整個(gè)團(tuán)隊(duì)理解透徹，這能保證團(tuán)隊(duì)少犯錯(cuò)誤。
*用戶角色Persona，實(shí)際工作中寫(xiě)文字描述就好，不用做的如下圖一般高大上。如果你要給客戶或Boss提案，可以做一個(gè)提升逼格。
1.Storyboard故事版：
主要負(fù)責(zé)人：產(chǎn)品經(jīng)理或交互設(shè)計(jì)師
早大家開(kāi)始討論用戶體驗(yàn)流程，在白板上邊畫(huà)流程邊添加粗略的UI元素。會(huì)后交互設(shè)計(jì)師會(huì)在在紙上做手繪版線框圖。這階段產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、UI設(shè)計(jì)師、包括技術(shù)工程師會(huì)一同作大量的討論，而且主要討論的是流程和主要功能，因此手畫(huà)故事版快方便并易于修改的。
此環(huán)節(jié)要敲定Userflow，用戶流程及其中的關(guān)鍵步驟，每一步驟都是一個(gè)主要界面。
*白板上一般都是這樣，交互設(shè)計(jì)同學(xué)會(huì)在紙上重繪。
*移動(dòng)產(chǎn)品設(shè)計(jì)這樣做也行，不買(mǎi)專(zhuān)用的模板本和工具尺，自己打印也行。
2.Key wireframe關(guān)鍵界面線框圖
主要負(fù)責(zé)人：交互設(shè)計(jì)師
在確定的用戶流程中，選出幾個(gè)關(guān)鍵的，有代表性的步驟，做細(xì)化的Wireframe線框圖。線框圖里要確保每一個(gè)UI元素的設(shè)計(jì)，包括其大小和位置。我們做的線框圖是1:1的，也就是線框圖與實(shí)際界面尺寸一致。1:1的線框圖能在前期避免考慮不周和執(zhí)行困難等很多問(wèn)題的出現(xiàn)。
此環(huán)節(jié)要確定關(guān)鍵界面里的UI元素和布局，以及全局的布局排版風(fēng)格。
*線框圖做成1：1知名。輸出到文檔里要添加說(shuō)明。在后面的工作里，這份文檔可以讓UI設(shè)計(jì)同學(xué)和工程師同學(xué)共用。
3.Key visual design關(guān)鍵界面視覺(jué)設(shè)計(jì)
主要負(fù)責(zé)人：UI設(shè)計(jì)師
此環(huán)節(jié)交互設(shè)計(jì)師會(huì)按確定的用戶流程及確定的布局風(fēng)格來(lái)繼續(xù)做其它界面的線框圖。UI設(shè)計(jì)師則同時(shí)開(kāi)始做關(guān)鍵界面的視覺(jué)設(shè)計(jì)，進(jìn)行配色、樣式不同風(fēng)格的嘗試。
此環(huán)節(jié)要確定產(chǎn)品界面的視覺(jué)設(shè)計(jì)風(fēng)格。
4.All wireframe全部界面線框圖
主要負(fù)責(zé)人：交互設(shè)計(jì)師
此環(huán)節(jié)交互設(shè)計(jì)師要完成全部界面的線框圖（1:1的）設(shè)計(jì)并且團(tuán)隊(duì)確認(rèn)。
*做完全部的線框圖，一般會(huì)出一個(gè)總結(jié)構(gòu)圖。如果有足夠大的場(chǎng)地，也可以逐頁(yè)打印出來(lái)貼到一面墻上。方便團(tuán)隊(duì)隨時(shí)參考。
5.Prototype可動(dòng)原型
主要負(fù)責(zé)人：交互設(shè)計(jì)師
此環(huán)節(jié)依產(chǎn)品需求而定。如果靜態(tài)的線框圖還不能完整的體現(xiàn)出產(chǎn)品特點(diǎn)，那就需要做成可操作甚至有關(guān)鍵界面動(dòng)畫(huà)示意的可動(dòng)原型。通常是HTML的可動(dòng)原型，特殊項(xiàng)目也曾經(jīng)做過(guò)Flash的。我還有一個(gè)奇葩朋友用PPT做過(guò)（PPT的開(kāi)發(fā)工具+VB Script）幾乎接近成品界面的可動(dòng)原型。
此環(huán)節(jié)的確認(rèn)同上一步，團(tuán)隊(duì)的理解會(huì)更精準(zhǔn)。
*忍不住貼一個(gè)PPT的開(kāi)發(fā)工具面板，提供VS風(fēng)格的控件，并且直接用VB script寫(xiě)控件邏輯！還可以帶dummy數(shù)據(jù)！客戶都以為你開(kāi)發(fā)完畢了有木有。
6.UI design全部界面視覺(jué)設(shè)計(jì)
主要負(fù)責(zé)人：UI設(shè)計(jì)師
完成全部界面的UI視覺(jué)設(shè)計(jì)。
此環(huán)節(jié)確認(rèn)全部UI設(shè)計(jì)。同時(shí)把確認(rèn)的UI更新到文檔里。

當(dāng)前文章：UI入門(mén)工作流程介紹-佛山網(wǎng)站設(shè)計(jì)
網(wǎng)站地址：http://www.bm7419.com/news30/215680.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、響應(yīng)式網(wǎng)站、自適應(yīng)網(wǎng)站、商城網(wǎng)站、App設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)