入門必讀，UI設(shè)計(jì)的整個工作流程是怎樣的？

UI設(shè)計(jì)師到底要做什么。今天千鋒就來為大家介紹一下UI設(shè)計(jì)的工作流程，相信即使是零基礎(chǔ)的小伙伴也可以輕松理解。

首先，大家要知道，UI設(shè)計(jì)的整個工作流程有許多人的參與。第一個是產(chǎn)品經(jīng)理，主要的工作是競品分析等工作，也是UI設(shè)計(jì)最核心的一個領(lǐng)頭人物。

第二個交互設(shè)計(jì)師，根據(jù)產(chǎn)品經(jīng)理提供的方案，設(shè)計(jì)出一套原型圖設(shè)計(jì)。第三個視覺設(shè)計(jì)師，工作內(nèi)容是根據(jù)交互給的原型圖，設(shè)計(jì)出視覺圖。其實(shí)無論是交互設(shè)計(jì)師，還是視覺設(shè)計(jì)師都統(tǒng)稱為UI設(shè)計(jì)師。

第四個程序員，根據(jù)視覺設(shè)計(jì)師提供的圖片，用代碼的方式實(shí)現(xiàn)其功能，也就是開發(fā)APP的過程。第五個運(yùn)營，負(fù)責(zé)把已經(jīng)開發(fā)出來的APP推廣出去，讓更多人來的使用這個產(chǎn)品。

歸納起來就是，產(chǎn)品定位與市場分析階段，主要由產(chǎn)品經(jīng)理負(fù)責(zé)牽頭，相關(guān)需求部門與產(chǎn)品需求專員、市場人員進(jìn)行多次會議研討，經(jīng)過上級領(lǐng)導(dǎo)同意，確立好需求后即將進(jìn)入交互設(shè)計(jì)階段，這也是UI設(shè)計(jì)的主要階段。下面是一個UI設(shè)計(jì)師的具體工作流程：

1、了解項(xiàng)目分析需求文檔

2、草圖快速溝通

3、設(shè)計(jì)開工前溝通需求

4、視覺設(shè)計(jì)

5、界面輸出

（1）目的（配合好技術(shù)開發(fā)人員完成相關(guān)的界面規(guī)范溝通、設(shè)計(jì)需求溝通）

（2）主要執(zhí)行人員（技術(shù)）

（3）溝通（UI、UE、需求部門、銷售）

（4）UI設(shè)計(jì)師的主要職責(zé)（對界面設(shè)計(jì)階段的最后結(jié)果配合技術(shù)部門實(shí)現(xiàn)界面設(shè)計(jì)的實(shí)際效果）

6、可用性測試階段

（1）目的（針對一致性測試；信息反饋測試；界面簡潔性測試；界面美觀度測試；用戶動作性測試；行業(yè)標(biāo)準(zhǔn)測試）

（2）主要執(zhí)行人員（技術(shù)開發(fā)測試部門）

（3）溝通（UI/UE、技術(shù)開發(fā)部門、產(chǎn)品需求部門、營銷運(yùn)營部門）（4）、UI設(shè)計(jì)師的主要職責(zé)（可用性的循環(huán)研究、用戶體驗(yàn)回饋、測試回饋、UI人員把可行性建議進(jìn)行完善）

7、產(chǎn)品上線

8、開發(fā)后期，細(xì)節(jié)跟進(jìn)

9、項(xiàng)目總結(jié)

完成了設(shè)計(jì)工作后，要做的事情就是出一份視覺規(guī)范，然后檢查一下整體的視覺層級。無論是小型項(xiàng)目還是大型項(xiàng)目，視覺規(guī)范都有其存在的必要性。無論是對你自己，還是對于同事，都能起到很好的規(guī)范作用，避免不一致的設(shè)計(jì)。

ui設(shè)計(jì)流程有哪些？

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

在UI設(shè)計(jì)過程中，需求設(shè)計(jì)角色會確定軟件的目標(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)下來。

三、討論并制定草圖框架

在一個項(xiàng)目的開始，UI設(shè)計(jì)師就需要參與到整個項(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)理和客戶一起作出討論。這個時候，你就需要畫出一個大概的框架草圖。

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

四、流程圖

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

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

五、原型圖

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

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

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

七、設(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)用戶的動作和設(shè)定的規(guī)則。對于目標(biāo)用戶交互的結(jié)果和反饋，提示目標(biāo)用戶結(jié)果和反饋信息，引導(dǎo)目標(biāo)用戶進(jìn)行自我需求的下一步操作。

九、一致性原則

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

2、元素外觀一致

3、交互行為一致

十、可用性原則

1、可理解

2、可達(dá)到

3、可控制

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

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

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

相關(guān)推薦

UI設(shè)計(jì)流程

ui設(shè)計(jì)培訓(xùn)四個月騙局

零基礎(chǔ)學(xué)ui設(shè)計(jì)真他媽慘

現(xiàn)在學(xué)ui設(shè)計(jì)都是傻子

UI 設(shè)計(jì)的整個工作流程是怎樣的？

一.UI設(shè)計(jì)參與完成的流程。

UI設(shè)計(jì)的工作流程會根據(jù)公司性質(zhì)、規(guī)模、項(xiàng)目性質(zhì)、項(xiàng)目規(guī)模、UI職能要求等的不同有所區(qū)別。

UI設(shè)計(jì)參與完成的流程大致為：

1. 參與需求評審，理解PRD

2. 用戶調(diào)研、情緒板梳理（主要針對一些對體驗(yàn)、視覺要求很高的產(chǎn)品，需要更加多關(guān)注人的設(shè)計(jì)，不是必要流程）

3. 交互設(shè)計(jì)

4. 視覺設(shè)計(jì)

5. 視覺評審（視覺稿確定過后）

6. UI走查、驗(yàn)收（開發(fā)提測后，發(fā)布前）

在工作過程中，可能會組織團(tuán)隊(duì)成員對設(shè)計(jì)方案、項(xiàng)目進(jìn)行復(fù)盤，這樣細(xì)致的分工會把每個環(huán)節(jié)都打磨得非常到位。我們再來細(xì)分工作中的每一步，具體的工作內(nèi)容是什么？

1.參與需求評審，理解PRD

一個項(xiàng)目全員開始動工，應(yīng)該就是從需求評審開始。在產(chǎn)品理清楚需求后，會輸出PRD或者原型草圖，依據(jù)PRD或者原型草圖來和項(xiàng)目組的全體成員澄清需求。在需求澄清會中，項(xiàng)目組成員會對需求、操作流程、業(yè)務(wù)邏輯等提出不同的問題，產(chǎn)品完善問題。需求澄清不會一次就讓項(xiàng)目組全體成員清晰的明確所有需求，產(chǎn)品會根據(jù)大家的疑惑去不斷完善需求內(nèi)容，在多次的需求澄清后，大家達(dá)成一致的共識，正式開始動工。

在這個過程中UI設(shè)計(jì)需要：

（1）反復(fù)和產(chǎn)品溝通，確認(rèn)，協(xié)助產(chǎn)品給出原型草圖。

（2）協(xié)助產(chǎn)品明確產(chǎn)品的市場定位、產(chǎn)品定義、客戶群體、運(yùn)行方式等。

2. 用戶調(diào)研、情緒板梳理

產(chǎn)品、UI、UE等相關(guān)人員會依據(jù)產(chǎn)品的定位、競品分析、目標(biāo)用戶的使用場景、需求、心理等提出用戶的研究報(bào)告。

在這個過程中UI設(shè)計(jì)需要：

（1）參與討論，輸出紙稿線框稿、用工具制作線框圖。

（2）協(xié)助產(chǎn)品初擬產(chǎn)品設(shè)計(jì)方向和思路，提出可用性設(shè)計(jì)建議。

3. 交互設(shè)計(jì)

交互設(shè)計(jì)階段一般由交互設(shè)計(jì)師（UE）和產(chǎn)品一起制定，根據(jù)可用性分析結(jié)果制定交互方式、操作流程、跳轉(zhuǎn)流程等。在線框圖階段去設(shè)計(jì)交互流程，可以減少由于交互流程改變而帶來的視覺設(shè)計(jì)的改變。這個階段會輸出原型圖，以支持后面做詳細(xì)的視覺設(shè)計(jì)。很多公司沒有專職的交互設(shè)計(jì)師，交互設(shè)計(jì)由產(chǎn)品或者UI完成。

在這個過程中UI設(shè)計(jì)需要：

（1）這個過程，UI可以依據(jù)上一個流程中的輸出，初步設(shè)計(jì)產(chǎn)品的風(fēng)格，然后和產(chǎn)品不斷推敲。

（2）原型設(shè)計(jì)的不斷完善，紙質(zhì)草圖-線框圖-低保真-高保真（高保真原型成本較高，很多小規(guī)模的公司都不做高保真原型設(shè)計(jì)）。

4.視覺設(shè)計(jì)

視覺設(shè)計(jì)階段，UI根據(jù)界面原型，對界面原型進(jìn)行視覺效果的處理。該項(xiàng)目組的UI在明確界面風(fēng)格、要求后，開始制作所有界面的視覺設(shè)計(jì)

在這個過程中UI設(shè)計(jì)需要：

（1）確定整個界面的風(fēng)格、界面、窗口、圖標(biāo)、色調(diào)、按鈕的表現(xiàn)。

（2）完成所有界面的視覺設(shè)計(jì)，交出最終的視覺稿。

5. 視覺評審

在視覺稿確定之后，UI設(shè)計(jì)組針對界面做一致性測試、簡潔性測試、美觀度測試、用戶體驗(yàn)測試、行業(yè)標(biāo)準(zhǔn)測試等。然后召集項(xiàng)目組所有人員召開原型的可用性測試評審會，發(fā)現(xiàn)可用性問題并提出修改意見。當(dāng)視覺評審過了之后，配合技術(shù)部門實(shí)現(xiàn)界面設(shè)計(jì)的實(shí)際效果。

在這個過程中UI設(shè)計(jì)需要：

（1）針對提出的問題，對界面進(jìn)行不斷的完善。

（2）參與視覺評審全過程。

（3）配合技術(shù)部門實(shí)現(xiàn)界面設(shè)計(jì)的實(shí)際效果，給出最后的界面效果圖，標(biāo)注好距離、 尺寸、顏色、文字大小等。

（4）輸出前端開發(fā)工程師需要的切圖。

6. UI走查、驗(yàn)收

在發(fā)布前，測試會針對可用性、用戶體驗(yàn)、測試界面等對設(shè)計(jì)問題進(jìn)行一下回饋，在依據(jù)這些問題把設(shè)計(jì)工作進(jìn)行細(xì)節(jié)調(diào)整。再正式發(fā)布之后，收集市場上真實(shí)的用戶體驗(yàn)并記錄，為下個版本提供強(qiáng)有力的市場需求。

在這個過程中UI設(shè)計(jì)需要：

（1）不斷完善界面設(shè)計(jì)。

（2）UI人員把可行性建議進(jìn)行完善，不斷總結(jié)以備以后產(chǎn)品設(shè)計(jì)升級。

當(dāng)然，以上談到的UI設(shè)計(jì)工作只是一個大致的流程，一個項(xiàng)目UI參與的流程肯定是會依據(jù)公司性質(zhì)、規(guī)模、項(xiàng)目性質(zhì)、人員配比等不同，所做的工作有所縮減或精分。