漂亮的、統(tǒng)一的、規(guī)范的APP設(shè)計(jì)是留住用戶的手段，而UI界面設(shè)計(jì)的真正價(jià)值，則是為了實(shí)現(xiàn)商業(yè)價(jià)值的“最大化”。

楊瀾說(shuō)：沒(méi)人有義務(wù)透過(guò)你邋遢的外表，去發(fā)現(xiàn)你優(yōu)秀的內(nèi)在。套用在互聯(lián)網(wǎng)的App產(chǎn)品開(kāi)發(fā)上就是：沒(méi)有人有義務(wù)透過(guò)你糟糕的UI設(shè)計(jì)，去發(fā)現(xiàn)你App產(chǎn)品的優(yōu)秀內(nèi)在。

UI怎么理解？

百度百科解釋是“user interface”，即用戶界面，可以人機(jī)交互的界面。

也有人從計(jì)算機(jī)的角度這么理解：

U，You，就是用戶，是個(gè)計(jì)算力只有5的渣。

I，就是我這個(gè)計(jì)算機(jī)，心算大神，每秒億計(jì)次計(jì)算。

UI，就是你我之間的互動(dòng)。

所以UI設(shè)計(jì)得越好，你越容易使用我。

UI設(shè)計(jì)的工作流程步驟

我們可以先看看 UI 設(shè)計(jì)師的工作流程是什么樣的。

UI 設(shè)計(jì)在視覺(jué)層面的工作只是所有工作內(nèi)容中的一部分，并不是全部，其他的一些理解需求、明確設(shè)計(jì)目標(biāo)、制定計(jì)劃以及后期的開(kāi)發(fā)支持和收集反饋上層層體現(xiàn)了一個(gè) UI 設(shè)計(jì)師工作的價(jià)值。

1.理解需求

在拿到需求后，首先要做的工作就是要去理解這份需求。

這時(shí)候，我們拿到的需求有可能非常詳細(xì)，是交互設(shè)計(jì)師加工過(guò)的具體的需求文檔，其中包括完整的交互設(shè)計(jì)原型。這個(gè)時(shí)候，我們重點(diǎn)去理解交互設(shè)計(jì)的輸出，查看產(chǎn)品使用的每一個(gè)流程以及每一個(gè)界面的具體細(xì)節(jié)，其中包括功能、操作、反饋以及信息呈現(xiàn)邏輯等。

而大多數(shù)團(tuán)隊(duì)中，可能就沒(méi)有交互設(shè)計(jì)師這樣的角色，而是產(chǎn)品經(jīng)理或者老板直接下達(dá)的需求，需求的精細(xì)程度也會(huì)存在非常大的區(qū)別，這個(gè)時(shí)候其實(shí)就會(huì)比較復(fù)雜。設(shè)計(jì)師此時(shí)需要站在用戶的角度，化身為以用戶為中心的原點(diǎn)，去理解需求以及將需求進(jìn)行拆分。針對(duì)于需求的每一個(gè)細(xì)節(jié)，需要設(shè)計(jì)師深入進(jìn)行思考，對(duì)于缺失的部分，或者存在不合理的部分，需要回過(guò)頭來(lái)和提出需求的人詳細(xì)溝通，共同討論以及解決問(wèn)題。

在這里推薦一個(gè)針對(duì)于需求梳理的思考工具——「用戶旅程」。通過(guò)「用戶旅程」這一方法，可以梳理出用戶使用產(chǎn)品的情景、操作以及具體的心理狀態(tài)，便于設(shè)計(jì)師站在用戶的視角去理解和分析需求。

2.明確設(shè)計(jì)目標(biāo)

設(shè)計(jì)目標(biāo)，直接會(huì)聯(lián)系到產(chǎn)品目標(biāo)、運(yùn)營(yíng)目標(biāo)以及用戶目標(biāo)等。在了解到具體的需求細(xì)節(jié)以后，要明確本次設(shè)計(jì)在整個(gè)項(xiàng)目中的定位是什么，通過(guò)設(shè)計(jì)需要帶來(lái)的收益以及用戶對(duì)于設(shè)計(jì)的訴求有多大。另外在設(shè)計(jì)過(guò)程中，還要明確的是設(shè)計(jì)目標(biāo)最核心的點(diǎn)在哪里，這樣的話就可以針對(duì)設(shè)計(jì)內(nèi)容的輸出重點(diǎn)方向有所了解。

也利于我們做一些權(quán)衡：有時(shí)好看的設(shè)計(jì)是需要犧牲一些信息密度、信息傳達(dá)性等；設(shè)計(jì)頁(yè)面類型是什么，是偏展示性的，還是偏功能性的，展示性的設(shè)計(jì)空間會(huì)大些，功能性的要考慮開(kāi)發(fā)實(shí)現(xiàn)要做的組件化一些；

另外，針對(duì)于設(shè)計(jì)的頁(yè)面具體有哪些，優(yōu)先級(jí)何如，以及任務(wù)的拆解，設(shè)計(jì)目標(biāo)都會(huì)有所影響。

3.制定計(jì)劃

包括時(shí)間計(jì)劃和執(zhí)行計(jì)劃。

設(shè)計(jì)師最重要的一個(gè)能力就是針對(duì)于任務(wù)的評(píng)估，將一個(gè)完整鏈條的任務(wù)拆解成為小段，然后再比較每一段人物的優(yōu)先級(jí)，高優(yōu)先級(jí)的先完成，低優(yōu)先級(jí)的后完成，因此也直接衍生出時(shí)間計(jì)劃的編排。另外，還要在每一個(gè)時(shí)間節(jié)點(diǎn)和里程碑，確認(rèn)對(duì)接溝通的角色，以及要輸出的物料有哪些。這項(xiàng)工作就要有經(jīng)驗(yàn)的設(shè)計(jì)師進(jìn)行決策，或者團(tuán)隊(duì)中有經(jīng)驗(yàn)的設(shè)計(jì)師帶領(lǐng)大家一起來(lái)完成。

時(shí)間節(jié)點(diǎn)和里程碑是工作進(jìn)度的外在表現(xiàn)，具體可以使用的工具其實(shí)蠻多，但是最基本的是整體團(tuán)隊(duì)對(duì)于設(shè)計(jì)進(jìn)度要達(dá)成共識(shí)，確定在那個(gè)時(shí)間點(diǎn)上，大家能夠有什么樣的預(yù)期——看到的內(nèi)容和聽(tīng)到的結(jié)論等。

4.進(jìn)入分析階段

此時(shí)對(duì)于需求已經(jīng)了解過(guò)，明確自己工作的意義所在以及制定了相應(yīng)的計(jì)劃，那么就要進(jìn)入到詳細(xì)的分析階段。

分析階段會(huì)包含三個(gè)主要的部分：市場(chǎng)分析、競(jìng)品分析和用戶需求分析。

市場(chǎng)分析會(huì)決定了你的設(shè)計(jì)要在哪方面與對(duì)手進(jìn)行抗衡，配合產(chǎn)品在市場(chǎng)中的重要定位，設(shè)計(jì)需要做哪些內(nèi)容。

而競(jìng)品分析是一種取長(zhǎng)補(bǔ)短的思路，通過(guò)學(xué)習(xí)對(duì)手產(chǎn)品的優(yōu)點(diǎn)，規(guī)避它的缺點(diǎn)，讓自己的設(shè)計(jì)變得更完美。

用戶需求分析，這個(gè)不得不說(shuō)，是以用戶為中心的設(shè)計(jì)，那就是要深入發(fā)掘用戶需求背后的東西。比如說(shuō)，經(jīng)典段子「用戶想要一匹更快的馬」，實(shí)際上背后的訴求是用戶想要的是「速度」。

5.定義視覺(jué)風(fēng)格

此時(shí)，做完了分析，那么就可以來(lái)定義視覺(jué)風(fēng)格，包括設(shè)計(jì)元素的大方向。

色彩范圍、質(zhì)感、細(xì)節(jié)、突出信息、圖標(biāo)設(shè)計(jì)方案、插畫(huà)設(shè)計(jì)思路以及動(dòng)效等，這些都可以在定義視覺(jué)風(fēng)格的階段進(jìn)行思考，并有所結(jié)論。

整體性是非常必要的，以及和其他產(chǎn)品的差異化，也同樣是視覺(jué)風(fēng)格會(huì)涵蓋其中的。一般情況下，我們?cè)谧鼍唧w的視覺(jué)風(fēng)格定義時(shí)，是通過(guò)一些關(guān)鍵界面或者關(guān)鍵操作來(lái)決定的。

有的團(tuán)隊(duì)或者項(xiàng)目的某些階段是可以不用定義風(fēng)格，因?yàn)橛幸?guī)范可以繼承或者延續(xù)，這個(gè)要就具體的項(xiàng)目情況而定。

定義視覺(jué)風(fēng)格是通過(guò)開(kāi)會(huì)、匯報(bào)最終敲定下來(lái)的，基本上是整體團(tuán)隊(duì)群策群力的事情，而不應(yīng)該由設(shè)計(jì)師自己完成。

6.批量輸出界面

在確定了設(shè)計(jì)方向以后，那么就可以批量輸出具體的界面。以及補(bǔ)充設(shè)計(jì)規(guī)范或這 UI KIT，針對(duì)于一些設(shè)計(jì)公司，還要補(bǔ)充設(shè)計(jì)說(shuō)明等。

7.開(kāi)發(fā)支持

接下來(lái)就要進(jìn)入開(kāi)發(fā)支持的階段，輸出切圖和 Layout ，并且此時(shí)要跟開(kāi)發(fā)同事保持非常頻繁的溝通，在他們完成設(shè)計(jì)方案后，要給出對(duì)應(yīng)的走查，找到開(kāi)發(fā)成果對(duì)于設(shè)計(jì)的還原程度達(dá)不到100%的位置。此時(shí)溝通真的很重要，我們團(tuán)隊(duì)之前合作的很多開(kāi)發(fā)，都是那種輸出了切圖和 Layout 根本不看的角色，然后實(shí)現(xiàn)出來(lái)的樣子和我們的設(shè)計(jì)千差萬(wàn)別，基本上讓我們的設(shè)計(jì)師就地石化。

設(shè)計(jì)師與開(kāi)發(fā)人員的溝通也是需要長(zhǎng)期磨合才能越來(lái)越好的?？傊O(shè)計(jì)師勤于溝通，對(duì)于自己的好處會(huì)非常多。

8.收集反饋

產(chǎn)品進(jìn)入測(cè)試階段，以及到后面的上線，設(shè)計(jì)師就要抽出一部分精力關(guān)注一下自己的設(shè)計(jì)在市場(chǎng)上或者用戶那里的反饋。如果設(shè)計(jì)的問(wèn)題很大，那么就要隨時(shí)準(zhǔn)備好，有可能要修改設(shè)計(jì)。如果反饋不錯(cuò)，那么要想到自己接下來(lái)的提高在哪里，以及產(chǎn)品下一個(gè)版本的迭代應(yīng)該做到哪些設(shè)計(jì)來(lái)彌補(bǔ)本次的不足。

以上就是設(shè)計(jì)師在拿到需求后要思考以及接下來(lái)要做的事情。

UI設(shè)計(jì)是一項(xiàng)科學(xué)嚴(yán)謹(jǐn)?shù)墓ぷ鳎枰煜ぎa(chǎn)品、目標(biāo)用戶以及用戶使用習(xí)慣和界面設(shè)計(jì)規(guī)律，通過(guò)界面引導(dǎo)讓用戶輕松完成任務(wù)，實(shí)現(xiàn)產(chǎn)品對(duì)于用戶的價(jià)值，同時(shí)企業(yè)也得到用戶的積極回饋。