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

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

?1. 界面視覺效果的維護?

這部分的工作內(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è)計師的個人能力。

?2. 界面視覺效果的輸出?

這是一部分非常完整的，需要 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 源文件就可以了。

藍(lán)湖、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)。

?3. 解決問題和信息整合?

比較純粹的 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í)等。只有綜合了這些理論知識，并且能夠靈活運用到實踐中，才能夠更清晰地達(dá)成目標(biāo)。UI 設(shè)計師要獲得這方面的提升，就要不斷地思考，將自身投入到反復(fù)的設(shè)計實踐中去，在此基礎(chǔ)之上，還要不斷地進行理論知識的學(xué)習(xí)，通過日積月累的疊加經(jīng)驗，才能夠逐漸形成完整的設(shè)計洞察能力。

4. 重點研究用戶需求?

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ì)。

5. 推動互聯(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)品在市場上更加具備競爭力。

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)理或者老板直接下達(dá)的需求，需求的精細(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è)計是需要犧牲一些信息密度、信息傳達(dá)性等；設(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è)計進度要達(dá)成共識，確定在那個時間點上，大家能夠有什么樣的預(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è)計的還原程度達(dá)不到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è)計師在工作中的關(guān)鍵能力

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

?1.?用戶需求及調(diào)研能力

這里首先說的就是一個大家沒太提到的一個能力：用戶需求調(diào)研能力。

為了避免與公司的核心業(yè)務(wù)脫節(jié)，現(xiàn)在的設(shè)計師所承擔(dān)的工作內(nèi)容越來貼近業(yè)務(wù)，越來越需要設(shè)計師去親自了解需求、挖掘需求。通過深入的調(diào)研工作指導(dǎo)設(shè)計師進行設(shè)計工作，這樣更加科學(xué)和高效。調(diào)研、收集需求的方法有很多，我們這里可以把它們大致分成兩類：定量調(diào)研和定性調(diào)研。兩種調(diào)研方式也適用于不同的調(diào)研對象：

• 定性調(diào)研

調(diào)研文化背景和生活習(xí)慣、人們的經(jīng)驗和習(xí)慣、探索人們行為背后的原因。
常見的定性調(diào)研方法有：用戶訪談、實地觀察等。

• 定量調(diào)研

舉個例子，當(dāng)我們研究廁所海報對人們行為的影響的時候，獨立變量就是設(shè)計師設(shè)計的海報，有依賴的變量就是洗手的人數(shù)，其他變量就是年齡、性別甚至還包括宗教信仰等等。

通常，我們在現(xiàn)實中面臨的問題都會比較復(fù)雜，這兩類方法會在調(diào)研的不同階段結(jié)合使用，比如下面的這個案例就是定量調(diào)研和定性調(diào)研的方法結(jié)合使用來挖掘這個購物行為背后的需求。

?2.?挖掘需求的能力

一般而言，設(shè)計師需要挖掘的需求來自商業(yè)和用戶。挖掘?qū)?yīng)的需求可以幫助設(shè)計師更好的平衡設(shè)計的商業(yè)價值和用戶體驗。

• 挖掘商業(yè)需求

挖掘商業(yè)上的需求，主要是了解我們的目標(biāo)用戶，他們可能為我們的設(shè)計買單、資源的優(yōu)劣、商業(yè)愿景和產(chǎn)品愿景等。

• 挖掘用戶需求

挖掘用戶的需求主要是要了解我們的用戶是誰，以及他們的痛點、需求是什么，已有的解決方案和期待的解決方案是什么等等。常見的調(diào)研方式有問卷調(diào)查、用戶訪談等等。設(shè)計師可以根據(jù)自己的調(diào)研的對象選擇合適的方式，同時也要注意規(guī)避一些錯誤的提問，比如避免設(shè)置一些引導(dǎo)性過強的提問、使用一些情感色彩比較濃重的話語等。

?3.?用戶分析能力

用戶分析是我們通過對用戶行為的觀察、研究來指導(dǎo)設(shè)計。為了保證我們的設(shè)計對用戶來說是有價值的，我們需要對我們的目標(biāo)用戶進行用戶分析。這里介紹用戶分析的幾個常用的方法：

• 用戶旅程地圖（User Journey map）

?戶旅程地圖（User Journey Map）是和?戶畫像（persona）相輔相成的?具，persona代表的是具體的族群，?體驗地圖是分析這個族群為了實現(xiàn)某個?標(biāo)?經(jīng)歷的過程的可視化呈現(xiàn)?具。它?于了解和解決客戶需求和痛點，在這個過程中?戶可能會使?多個設(shè)備和渠道（例如?站，?機app，社交媒體，電話，?線下客服等等）為搭地鐵去工作的孕婦制作的用戶旅程圖：

• 用戶體驗故事，又叫故事板（UX Story&Story Board）

故事板最初是源?于電影?業(yè)，早在20世紀(jì)20年代的時候，迪?尼?作室內(nèi)就常常?故事板來勾勒故事草圖。產(chǎn)品的使?場景，?戶的交互流程，也可以借由?系列連續(xù)的插畫故事化地呈現(xiàn)出來。?戶體驗故事（UX story）是從?戶的?度對事件進?說明的?式， 故事中的事件展示了?戶中個體驗的轉(zhuǎn)變。

• 用戶建模（User Modeling）

?戶建模是?種幫助我們「基于研究」中收集的數(shù)據(jù)歸納整合出「若?個」有相似?為、?標(biāo)、動機和需求的「半虛構(gòu)?戶」的?法，從?更好的幫助我們理解?標(biāo)?戶。用戶建模的常用方法：

• Persona（?戶畫像）?

• Empathy Map（同理?地圖）?

• Affinity Diagram（親和圖）?

• User Profile canvas（價值主張畫布）

總結(jié)?

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)該多充電，多打磨自己，讓自己的有更強的競爭力。

本文內(nèi)容為轉(zhuǎn)載 僅供個人學(xué)習(xí)使用