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

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

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

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

二、采集交互方式
 

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

三、討論并制定草圖框架
 

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

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

四、流程圖

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

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

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

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

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

九、一致性原則
 

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

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

　　2、元素外觀一致
 

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

　　3、交互行為一致
 

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

十、可用性原則
 

　　1、可理解
 

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

　　2、可達(dá)到
 

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

　　3、可控制
 

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

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

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

　　以上是對(duì)UI設(shè)計(jì)流程的內(nèi)容，內(nèi)容也許不是最全，但也能讓你對(duì)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í)。