前言?

很多年前，馬力在一次給某軟件公司的培訓(xùn)中，開篇就使用《巴黎圣母院》中的男主人公「鐘樓怪人」來比喻 UI 設(shè)計以及 UI 設(shè)計師的工作。

當(dāng)時主要傳達的信息在于，一款產(chǎn)品功能的好壞，不能通過優(yōu)秀的界面設(shè)計以及良好的用戶體驗去表達出來，那么很容易被用戶或購買者從表層忽略掉。

隨著互聯(lián)網(wǎng)行業(yè)的發(fā)展，整體行業(yè)中對于 UI 設(shè)計的認(rèn)知和主要的工作范圍，也在不斷地發(fā)生變化，不僅僅在于視覺層面，而會包含更多的內(nèi)核在其中。

一、UI設(shè)計師的工作內(nèi)容

根據(jù)個人的經(jīng)驗和體會總結(jié)，UI 設(shè)計師的工作內(nèi)容，由表及里會逐漸深入到五個層面上：

• 界面視覺效果的維護

• 界面視覺效果的輸出

• 解決問題和信息整合

• 重點研究用戶需求

• 推動互聯(lián)網(wǎng)產(chǎn)品的發(fā)展

這五個方面，從 UI 設(shè)計師的能力發(fā)展軌跡來看，是遞進發(fā)展逐步深入的，但是在實際的工作過程中，實際上又是交叉并且平行的，只是隨著 UI 設(shè)計師的能力逐步提升，才會有更加明確的認(rèn)識。

接下來要分述一下這五個方面是什么，以及主要的工作內(nèi)容有哪些。

01界面視覺效果的維護

這部分的工作內(nèi)容，一般情況下是新入行的 UI 設(shè)計師投入到具體工作中要做的事情，而已經(jīng)有一定經(jīng)驗的 UI 設(shè)計師也同樣脫離不開相關(guān)的工作內(nèi)容。

主要是針對于已有的產(chǎn)品界面設(shè)計需求的維護，比如說以下的幾個情景：

現(xiàn)有產(chǎn)品的設(shè)計，修改界面中的文字樣式；

對于新增功能，增加圖標(biāo)設(shè)計，或?qū)τ谠袌D標(biāo)的修改；

運營相關(guān)的工作，輸出 Banner 圖片或者海報設(shè)計；

產(chǎn)品中輸出的內(nèi)容需要增加圖片或者配圖等。

這只是一部分例子，可以看到，一般情況下視覺設(shè)計師所做的類似工作是需要應(yīng)用設(shè)計流程和設(shè)計理論的，但是相對于整體產(chǎn)品來說，會比較細(xì)微。

而大多數(shù)情況下，看起來貌似是修修補補，或者是針對于運營需求進行添加相關(guān)的設(shè)計方案。

但這其實是 UI 設(shè)計師日常需要完成的重要工作，也會是設(shè)計師需要配合整體產(chǎn)品團隊的工作內(nèi)容。

在行業(yè)發(fā)展早期，UI 設(shè)計師被冠以「美工」這一所有從業(yè)者都不太喜歡的名號，主要是因為當(dāng)時的團隊中分工不夠明確，認(rèn)為 UI 設(shè)計師僅能完成以上工作內(nèi)容有很大的關(guān)系。

當(dāng)然了，再次申明這部分工作同樣重要，越是細(xì)節(jié)的內(nèi)容，越能體現(xiàn)出來設(shè)計師的個人能力。

02界面視覺效果的輸出

這是一部分非常完整的，需要 UI 設(shè)計師主導(dǎo)并著重完成的工作。

一般情況下，當(dāng) UI 設(shè)計師拿到了具體的需求后，從一開始的需求分析著手，然后再到界面的視覺設(shè)計方案輸出，敲定方案后會完成界面的視覺設(shè)計細(xì)化，以及相關(guān)元素輸出等工作，最終將完整的設(shè)計方案輸出給相關(guān)的開發(fā)人員，界面實現(xiàn)后參與測試，最終推動產(chǎn)品的上線。

這其中還包括了針對于用戶的研究、競品分析、市場分析、流行趨勢分析和情態(tài)圖版制作等等，這是一個復(fù)雜而又耗費腦力的過程。之后還要經(jīng)過漫長的思考，不斷推翻自己的方案，才能夠最終得到一次滿意的設(shè)計輸出。

設(shè)計輸出有可能是幾個關(guān)鍵界面，也有可能只是一張描述出來設(shè)計思路的效果圖。拿著這些物料，設(shè)計師要快速跟團隊成員進行溝通，看看是否能夠確定下來具體的方向。

如果方向確定，那么接下來就是細(xì)化效果圖，輸出圖標(biāo)設(shè)計、動效設(shè)計和一些狀態(tài)展示等等，以及批量輸出所有的界面設(shè)計。

在與產(chǎn)品經(jīng)理和開發(fā)人員共同確定了界面設(shè)計的所有輸出后，接下來還要給后續(xù)的開發(fā)人員相關(guān)的支持。有些團隊會輸出切圖和坐標(biāo)標(biāo)注 ( Layout )，有些團隊配備專門的前端角色（ Builder ），因此只要輸出 PSD 或 Sketch 源文件就可以了。

藍湖、Sketch、以及 PS 的各種插件，這些工具的出現(xiàn)，正在縮短 UI 設(shè)計師與開發(fā)人員的對接時間，提高整體工作的效率。

在開發(fā)人員完成了所有的工作內(nèi)容以后，就進入了一個非常痛苦的階段。UI 設(shè)計師要對著開發(fā)人員實現(xiàn)的界面效果，參與到測試中去，以精確到像素的標(biāo)準(zhǔn)，來核查開發(fā)實現(xiàn)對于設(shè)計的還原度。這個事情非常考驗開發(fā)人員對于 UI 設(shè)計的理解程度和 UI 設(shè)計師的溝通技巧，如果雙方都不給力，那么就會出現(xiàn)反復(fù)修改的情況。

當(dāng)完成以上的工作后， UI 設(shè)計師的工作內(nèi)容基本上可以說是畫上一個句號。接下來就可以收集用戶的反饋，以及迎接下次需求所帶來的各種挑戰(zhàn)。

03解決問題和信息的整合

比較純粹的 UI 設(shè)計師，實際上從設(shè)計思維上，更多的體現(xiàn)出這兩件事：

抓住問題的本質(zhì)，去解決問題；

信息的整合以及輸出。

前者實際上是設(shè)計的本質(zhì)，通過解決問題，來滿足用戶的某些需求。

我們常常會提到用戶體驗方面的經(jīng)典段子：「用戶想要的是一匹更快的馬，而福特卻給了他們一輛汽車」，實際上在說的就是抓住現(xiàn)象背后本質(zhì)，然后給出一個徹底的解決方案。

設(shè)計的過程，就是要不斷地去參透到需求、痛點或用戶所反饋問題的本質(zhì)，然后給出一個從設(shè)計層面出發(fā)的解決方案。

后者，是 UI 設(shè)計師所完成工作的重要組成部分。在《 Pixel Perfect Precision 3》 這本書中給出一個很典型的例子，就是要把整塊的信息展示成為分塊的信息，這就是視覺設(shè)計要做的最基礎(chǔ)、最直接、最容易闡述清楚工作指的案例。

而設(shè)計師在完成這兩項工作的過程中，還要具備的是「可用性」、「用戶體驗」、「前端開發(fā)」、「后端實現(xiàn)」以及對于業(yè)務(wù)流程方面深入的研究和學(xué)習(xí)等。只有綜合了這些理論知識，并且能夠靈活運用到實踐中，才能夠更清晰地達成目標(biāo)。

UI 設(shè)計師要獲得這方面的提升，就要不斷地思考，將自身投入到反復(fù)的設(shè)計實踐中去，在此基礎(chǔ)之上，還要不斷地進行理論知識的學(xué)習(xí)，通過日積月累的疊加經(jīng)驗，才能夠逐漸形成完整的設(shè)計洞察能力。

04重點研究用戶需求

UI 設(shè)計師，要時刻像產(chǎn)品經(jīng)理一樣，具備一顆同理心，站在用戶的角度來看待界面設(shè)計，通過用戶的視角來思考問題：

用戶能夠接受的視覺風(fēng)格應(yīng)該是什么樣的范圍？用戶對于什么樣的圖形載體會更加接受？用戶所能夠理解的視覺引導(dǎo)應(yīng)該是什么樣子？用戶會在什么樣的情景下使用產(chǎn)品？用戶的界面操作訴求是怎么樣的？有什么樣的痛點？如何通過界面視覺設(shè)計提升用戶的滿意度?視覺設(shè)計怎樣能夠教會用戶使用產(chǎn)品？視覺設(shè)計應(yīng)該給用戶帶來什么樣的情感共鳴？…….

UI 設(shè)計師也要時刻的去思考用戶，只有深入的了解到用戶的情況，才能夠輸出最優(yōu)秀的設(shè)計。因此，就要求 UI 設(shè)計師也要接觸用戶研究的工作，在需求分析的時候更深入的去探究用戶的需求，以及多用產(chǎn)品，把自身也變成用戶。

如果一名 UI 設(shè)計師能夠站在用戶的立場上去看待產(chǎn)品，那么在整體的職業(yè)生涯中，以及能力范圍內(nèi)會超出圖形設(shè)計專家的身份，而具備交互設(shè)計師和產(chǎn)品經(jīng)理的氣質(zhì)。

05推動互聯(lián)網(wǎng)產(chǎn)品的發(fā)展

在具備了以上的素質(zhì)后，UI 設(shè)計師更能做到的，就是推動產(chǎn)品的發(fā)展，而不僅僅是為產(chǎn)品修飾一張完美的面具。

UI 設(shè)計師此時能夠參與到功能的定義、產(chǎn)品運營策略、產(chǎn)品未來的發(fā)展和規(guī)劃等工作，整體的輸出情況更像是一名互聯(lián)網(wǎng)產(chǎn)品人，會協(xié)助產(chǎn)品團隊中的各個角色一同推動產(chǎn)品的正向發(fā)展。在一個產(chǎn)品團隊中，每一名角色都明確目標(biāo)是什么，以及都能夠為產(chǎn)品的發(fā)展出謀劃策，那么會非常有利于產(chǎn)品的快速前進，讓產(chǎn)品在市場上更加具備競爭力。

06UI 設(shè)計師在工作中的關(guān)鍵

在日常的工作中，有一些軟技能對于 UI 設(shè)計師來說是非常關(guān)鍵的。具備這些能力，才能夠更順滑地推進日常工作的執(zhí)行，并且在輸入和輸出方面，提升效率。

• 溝通能力

前面我也提到了若干有關(guān)于團隊內(nèi)配合 UI 設(shè)計師所需要的工作內(nèi)容，因此溝通能力是至關(guān)重要的。對于信息的獲取和輸出，需要注意方法以及對于理解力的提升。

快速獲取別人所說、縮寫的內(nèi)容關(guān)鍵，并且通過語言或文字，快速傳達出自己的思想，并且保證對方能夠明白，這是溝通能力的內(nèi)核所在。

這方面的能力實際上已經(jīng)是一個專門的學(xué)科，要通過自身的總結(jié)才能夠獲取到相應(yīng)的提升。

• 設(shè)計思想

設(shè)計思想實際上是一種恒相關(guān)的說法，包括交互設(shè)計的理論知識和視覺設(shè)計的理論知識應(yīng)用，都需要 UI 設(shè)計師能夠非常深入的掌握，并能夠活學(xué)活用。

大家可以看到一個趨勢，用戶體驗層面的相關(guān)崗位，界線會越來越模糊，交互設(shè)計師和 UI 設(shè)計師正在逐漸融合，成為界面設(shè)計師這樣一個角色，因此就需要 UI 設(shè)計師在發(fā)展過程中，要不斷地橫向拓寬自己的知識儲備，增大自身的能力范圍。

• 對于技術(shù)的了解

UI 設(shè)計師不需要會寫代碼，但是需要了解一些實現(xiàn)機制，這樣才能夠在設(shè)計過程中，考慮到實現(xiàn)的最優(yōu)可能性。

在行業(yè)發(fā)展的早期，UI 設(shè)計師主要工作的平臺在 Web 上，那時候?qū)τ?UI 設(shè)計師的要求不僅僅局限于輸出界面視覺效果，還要求輸出靜態(tài)的網(wǎng)頁頁面，因此那時候的大多數(shù) UI 設(shè)計師身兼前端工程師的角色，對于 CSS 和 JS 的了解也相當(dāng)深入。

轉(zhuǎn)換到了移動互聯(lián)網(wǎng)時代，對于大多數(shù)的設(shè)計師來說，學(xué)習(xí) App 的前端開發(fā)成本會比較高，但是不能寫也要知道 iOS 和 Android 相關(guān)的 UI Guideline ，對于規(guī)范以及實現(xiàn)的原理要清楚，這樣才能夠和開發(fā)更容易的進行交流。

• 不要忽略業(yè)務(wù)流程

我們現(xiàn)在所接觸到的眾多互聯(lián)網(wǎng)產(chǎn)品，實際上是要依托于各種各樣的業(yè)務(wù)流程的，因此就需要大家在自身所處的行業(yè)中，深入了解業(yè)務(wù)流程相關(guān)的信息，才能夠做好設(shè)計。

?

二、UI設(shè)計師的工作流程

一般情況下 UI 設(shè)計師拿到的需求是什么樣的？其實這會直接決定了你的工作流程是怎樣的。需求方可能有幾種角色，而且需求的詳細(xì)程度也會與個人有直接的關(guān)系。（提需求的人是怎樣理解 UI 設(shè)計的？他是否認(rèn)為 UI 設(shè)計就是做圖的呢？）

基本的流程如下圖，接下來要詳細(xì)說一下每一個流程包含的工作都有哪些。

1.理解需求

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

這時候，我們拿到的需求有可能非常詳細(xì)，是交互設(shè)計師加工過的具體的需求文檔，其中包括完整的交互設(shè)計原型。

這個時候，我們重點去理解交互設(shè)計的輸出，查看產(chǎn)品使用的每一個流程以及每一個界面的具體細(xì)節(jié)，其中包括功能、操作、反饋以及信息呈現(xiàn)邏輯等。

而大多數(shù)團隊中，可能就沒有交互設(shè)計師這樣的角色，而是產(chǎn)品經(jīng)理或者老板直接下達的需求，需求的精細(xì)程度也會存在非常大的區(qū)別，這個時候其實就會比較復(fù)雜。

設(shè)計師此時需要站在用戶的角度，化身為以用戶為中心的原點，去理解需求以及將需求進行拆分。

針對于需求的每一個細(xì)節(jié)，需要設(shè)計師深入進行思考，對于缺失的部分，或者存在不合理的部分，需要回過頭來和提出需求的人詳細(xì)溝通，共同討論以及解決問題。

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

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

設(shè)計目標(biāo)，直接會聯(lián)系到產(chǎn)品目標(biāo)、運營目標(biāo)以及用戶目標(biāo)等，

在了解到具體的需求細(xì)節(jié)以后，要明確本次設(shè)計在整個項目中的定位是什么，通過設(shè)計需要帶來的收益以及用戶對于設(shè)計的訴求有多大。

另外在設(shè)計過程中，還要明確的是設(shè)計目標(biāo)最核心的點在哪里，這樣的話就可以針對設(shè)計內(nèi)容的輸出重點方向有所了解。

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

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

3.制定計劃

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

設(shè)計師最重要的一個能力就是針對于任務(wù)的評估，將一個完整鏈條的任務(wù)拆解成為小段，然后再比較每一段任務(wù)的優(yōu)先級，高優(yōu)先級的先完成，低優(yōu)先級的后完成，因此也直接衍生出時間計劃的編排。

另外，還要在每一個時間節(jié)點和里程碑，確認(rèn)對接溝通的角色，以及要輸出的物料有哪些。這項工作就要有經(jīng)驗的設(shè)計師進行決策，或者團隊中有經(jīng)驗的設(shè)計師帶領(lǐng)大家一起來完成。

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

4.進入分析階段

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

分析階段會包含三個主要的部分：市場分析、競品分析和用戶需求分析。

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

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

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

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

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

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

整體性是非常必要的，以及和其他產(chǎn)品的差異化，也同樣是視覺風(fēng)格會涵蓋其中的。一般情況下，我們在做具體的視覺風(fēng)格定義時，是通過一些關(guān)鍵界面或者關(guān)鍵操作來決定的。

有的團隊或者項目的某些階段是可以不用定義風(fēng)格，因為有規(guī)范可以繼承或者延續(xù)，這個要就具體的項目情況而定。

定義視覺風(fēng)格是通過開會、匯報最終敲定下來的，基本上是整體團隊群策群力的事情，而不應(yīng)該由設(shè)計師自己完成。

6.批量輸出界面

在確定了設(shè)計方向以后，那么就可以批量輸出具體的界面。

以及補充設(shè)計規(guī)范或者UI KIT，針對于一些設(shè)計公司，還要補充設(shè)計說明等。

7.開發(fā)支持

接下來就要進入開發(fā)支持的階段，輸出切圖和 Layout ，并且此時要跟開發(fā)同事保持非常頻繁的溝通，在他們完成設(shè)計方案后，要給出對應(yīng)的走查，找到開發(fā)成果對于設(shè)計的還原程度達不到100%的位置。

此時溝通真的很重要，我們團隊之前合作的很多開發(fā)，都是那種輸出了切圖和 Layout 根本不看的角色，然后實現(xiàn)出來的樣子和我們的設(shè)計千差萬別，基本上讓我們的設(shè)計師就地石化。

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

8.收集反饋

產(chǎn)品進入測試階段，以及到后面的上線，設(shè)計師就要抽出一部分精力關(guān)注一下自己的設(shè)計在市場上或者用戶那里的反饋。

如果設(shè)計的問題很大，那么就要隨時準(zhǔn)備好，有可能要修改設(shè)計。

如果反饋不錯，那么要想到自己接下來的提高在哪里，以及產(chǎn)品下一個版本的迭代應(yīng)該做到哪些設(shè)計來彌補本次的不足。

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

寫在最后?

?

我從來不覺得 UI 設(shè)計師、交互設(shè)計師是一個輕松的工作。不是簡簡單單能畫幾個 icon，能出一些界面，就算是優(yōu)秀的設(shè)計師。真正重要的，是設(shè)計背后的思考，能解決真切的業(yè)務(wù)問題。哪怕是一個按鈕上的文案，也要從業(yè)務(wù)和用戶體驗場景去思考和完善，而非一個作圖的機器。

真正的水平不錯的、實戰(zhàn)經(jīng)驗豐富的、保持進步和學(xué)習(xí)的設(shè)計師，一直都是稀缺的。作為在互聯(lián)網(wǎng)從業(yè)的設(shè)計師，應(yīng)該多充電，多打磨自己，讓自己的有更強的競爭力。

?