UI設(shè)計(jì)流程大解析

　　不少剛剛?cè)胄凶鯱I設(shè)計(jì)的朋友，都期待著可以參與公司項(xiàng)目設(shè)計(jì)的整個(gè)流程，但是不同的公司，具體的流程可能是不一樣的。為了滿足廣大學(xué)員的需求，AAA教育小編姐姐就UI設(shè)計(jì)流程簡單分析如下：

一、確認(rèn)用戶需求
 

　　在UI設(shè)計(jì)過程中，需求設(shè)計(jì)角色會(huì)確定軟件的目標(biāo)用戶，獲取最終用戶和直接用戶的需求。用戶交互要考慮到不同目標(biāo)用戶的交互設(shè)計(jì)重點(diǎn)，將這些重點(diǎn)融合。例如：老年人用戶和專業(yè)用戶的設(shè)計(jì)重點(diǎn)就不盡相同，所有的目標(biāo)用戶的需求都要考慮進(jìn)去。
 

二、采集交互方式
 

　　目標(biāo)用戶不同交互習(xí)慣也千差萬別。習(xí)慣性的交互方式往往來源于其原有的針對現(xiàn)實(shí)的交互流程、已有軟件工具的交互流程。在此基礎(chǔ)上通過調(diào)研分析找到用戶希望達(dá)到的交互效果，并且以流程確認(rèn)下來。
 

三、討論并制定草圖框架
 

　　在一個(gè)項(xiàng)目的開始，UI設(shè)計(jì)師就需要參與到整個(gè)項(xiàng)目當(dāng)中。對于產(chǎn)品需求的了解，不只是產(chǎn)品經(jīng)理或者項(xiàng)目負(fù)責(zé)人的事情。所以，需要UI設(shè)計(jì)師、項(xiàng)目負(fù)責(zé)人、產(chǎn)品經(jīng)理和客戶一起作出討論。這個(gè)時(shí)候，你就需要畫出一個(gè)大概的框架草圖。
 

　　對于一些外包項(xiàng)目，客戶的需求很多時(shí)候都是模糊的，這個(gè)時(shí)候，整個(gè)產(chǎn)品的功能、結(jié)構(gòu)框架也都是模糊的，所以，可能需要UI設(shè)計(jì)師積極的與客戶或者項(xiàng)目負(fù)責(zé)人溝通，了解清楚。要不然，你就會(huì)抓瞎，沒法開始接下來的項(xiàng)目。
 

四、流程圖

　　這個(gè)時(shí)候，你需要結(jié)合開始的產(chǎn)品需求和框架草圖，用思維導(dǎo)圖工具做出一個(gè)具體的流程圖，理清你的設(shè)計(jì)思路。這樣你的項(xiàng)目負(fù)責(zé)人可以直觀的看到整個(gè)的流程，你在開始設(shè)計(jì)的時(shí)候，也可以依據(jù)你做的流程圖。
 

　　做腦圖/思維導(dǎo)圖/流程圖的工具其實(shí)有很多。在這里呢，列舉一些常用到的流程圖工具，如Mindnode/百度腦圖/Xmind/Mindmanager等等。
 

五、原型圖
 

　　所需工具：Sketch(框架圖)、POP(初步原型)、墨刀(高保真原型圖和交互)等
 

六、確定設(shè)計(jì)稿和原型交互demo
 

　　所需工具：Sketch(設(shè)計(jì)稿)、Axure(原型交互)、Marvel(原型展示)、Principle(交互動(dòng)效)、墨刀(原型交互)
 

七、設(shè)計(jì)和待開發(fā)
 

　　所需工具：PS、AI等(設(shè)計(jì))、Cutterman (切圖工具)、PxCook(標(biāo)注、切圖工具)、Zeplin(切圖、設(shè)計(jì)稿標(biāo)注)等。
 

　　設(shè)計(jì)過程就不說了，只要你是一位UI設(shè)計(jì)師，頁面怎么做那你肯定清楚。當(dāng)你設(shè)計(jì)完成頁面以后，要做的工作就是：標(biāo)注、切圖。
 

八、引導(dǎo)用戶交互
 

　　軟件是為目標(biāo)用戶服務(wù)。因此應(yīng)該由目標(biāo)用戶來使用和控制軟件。軟件響應(yīng)用戶的動(dòng)作和設(shè)定的規(guī)則。對于目標(biāo)用戶交互的結(jié)果和反饋，提示目標(biāo)用戶結(jié)果和反饋信息，引導(dǎo)目標(biāo)用戶進(jìn)行自我需求的下一步操作。
 

九、一致性原則
 

　　1、設(shè)計(jì)目標(biāo)一致
 

　　軟件中往往存在多個(gè)組成部分(組件、元素)。不同組成部分之間的交互設(shè)計(jì)目標(biāo)需要一致。例如：以老年人作為目標(biāo)用戶，以簡化界面邏輯為設(shè)計(jì)目標(biāo)，那么該目標(biāo)需要貫徹軟件(軟件包)整體，而不是局部。
 

　　2、元素外觀一致
 

　　交互元素的外觀往往影響用戶的交互效果。同一個(gè)(類)軟件采用一致風(fēng)格的外觀，對于保持用戶焦點(diǎn)，改進(jìn)交互效果有很大幫助。遺憾的是如何確認(rèn)元素外觀一致沒有特別統(tǒng)一的衡量方法。因此需要對目標(biāo)用戶進(jìn)行調(diào)查取得反饋。
 

　　3、交互行為一致
 

　　在交互模型中，不同類型的元素用戶觸發(fā)其對應(yīng)的行為事件后，其交互行為需要一致。例如：所有需要用戶確認(rèn)操作的對話框都至少包含確認(rèn)和放棄兩個(gè)按鈕。對于交互行為一致性原則比較極端的理念是相同類型的交互元素所引起的行為事件相同。但是我們可以看到這個(gè)理念雖然在大部分情況下正確，但是的確有相反的例子證明不按照這個(gè)理念設(shè)計(jì)，會(huì)更加簡化用戶操作流程。
 

十、可用性原則
 

　　1、可理解
 

　　軟件要為目標(biāo)用戶服務(wù)，軟件各元素對應(yīng)的功能要被目標(biāo)用戶所理解。如果不能為用戶理解，那么需要提供一種非破壞性的途徑，使得用戶可以通過對該元素的操作，理解其對應(yīng)的功能。例：刪除操作元素。用戶可以點(diǎn)擊刪除操作按鈕，提示用戶如何刪除操作或者是否確認(rèn)刪除操作，用戶可以更加詳細(xì)的理解該元素對應(yīng)的功能，同時(shí)可以取消該操作。
 

　　2、可達(dá)到
 

　　用戶是交互的神經(jīng)，交互元素對應(yīng)用戶需要的功能。因此交互元素必須可以被用戶控制。用戶可以用諸如鍵盤、鼠標(biāo)之類的交互設(shè)備通過移動(dòng)和觸發(fā)已有的交互元素達(dá)到其它在此之前不可見或者不可交互的交互元素。要注意的是交互的次數(shù)會(huì)影響可達(dá)到的效果。當(dāng)一個(gè)功能被深深隱藏(一般來說超過4層)那么用戶達(dá)到該元素的幾率就大大降低了?？蛇_(dá)到的效果也同界面設(shè)計(jì)有關(guān)。過于復(fù)雜的界面會(huì)影響可達(dá)到的效果。
 

　　3、可控制
 

　　軟件的交互流程，用戶可以控制。功能的執(zhí)行流程，用戶可以控制。如果確實(shí)無法提供控制，則向目標(biāo)用戶提示相關(guān)的信息。
 

十一、項(xiàng)目進(jìn)度管理
 

　　所需工具：Trello(任務(wù)管理)、Bearychat(團(tuán)隊(duì)溝通)
 

　　以上是對UI設(shè)計(jì)流程的內(nèi)容，內(nèi)容也許不是最全，但也能讓你對UI設(shè)計(jì)流程有清楚的認(rèn)識(shí)，之前也有分享UI設(shè)計(jì)的相關(guān)知識(shí)《淺析ui設(shè)計(jì)就業(yè)前景》、《UI設(shè)計(jì)7大就業(yè)方向》、《ui設(shè)計(jì)原則要素有哪些》、《ui設(shè)計(jì)培訓(xùn)課程內(nèi)容》等，感興趣的可以去看看，后期我還會(huì)分享更多UI設(shè)計(jì)行業(yè)知識(shí)，大家多多關(guān)注!若是有你特別想知道的內(nèi)容，可以留言告訴小編，小編盡量分享大家想了解的行業(yè)知識(shí)。