UI設(shè)計(jì)師除了做圖，還要負(fù)責(zé)哪些工作？

時(shí)間：2024-02-08 01:40:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2024-02-08 01:40:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

UI設(shè)計(jì)師除了做圖，還要負(fù)責(zé)哪些工作？：這個(gè)問(wèn)題也是現(xiàn)在不少?gòu)臉I(yè)的設(shè)計(jì)師所焦慮的問(wèn)題，由于常年做一些邊緣化的作圖工作，距離核心業(yè)務(wù)越來(lái)越遠(yuǎn)了，在近幾年這樣的設(shè)計(jì)師正在被慢慢的淘汰。

我們來(lái)看一下 UI 設(shè)計(jì)師的職責(zé)：

UI 設(shè)計(jì)師的工作職責(zé)和能力要求：

UI 設(shè)計(jì)師作為互聯(lián)網(wǎng)行業(yè)的一個(gè)核心崗位，主要負(fù)責(zé)各個(gè)平臺(tái)（網(wǎng)頁(yè)、App、小程序、公眾號(hào)……）的產(chǎn)品的視覺(jué)設(shè)計(jì)工作，包括產(chǎn)品的視覺(jué)風(fēng)格定位、具體界面設(shè)計(jì)、圖標(biāo)設(shè)計(jì)（頁(yè)面里的和桌面圖標(biāo)）、運(yùn)營(yíng)圖片、開(kāi)發(fā)切圖標(biāo)注等工作，工作過(guò)程中要和交互設(shè)計(jì)師、產(chǎn)品經(jīng)理、前端工程師緊密配合。

可以看到，上手做 UI 首先你需要具備視覺(jué)表現(xiàn)能力。然而，這只是最基本的技能，尤其是隨著扁平化風(fēng)格的風(fēng)靡，又大大拉低了 UI 設(shè)計(jì)師的從業(yè)門(mén)檻。然而，設(shè)計(jì)師最重要的能力是設(shè)計(jì)思維、設(shè)計(jì)方法以及職場(chǎng)軟實(shí)力。

我們常常有一個(gè)誤區(qū)是學(xué)會(huì)這些軟件技能我就是設(shè)計(jì)師了，其實(shí)我們?nèi)魏我粋€(gè)產(chǎn)品從一開(kāi)始，就要先去做用戶(hù)研究，要去理解這個(gè)產(chǎn)品的用戶(hù)是什么樣的，用戶(hù)研究并不是我拍腦袋去做，他有一系列的標(biāo)準(zhǔn)的這些方法。 比如說(shuō)一開(kāi)始你要理解用戶(hù)，然后你怎么做產(chǎn)品的概念，你怎么去建立產(chǎn)品的原型，你怎么后續(xù)一步一步做，從無(wú)到有，這些就體現(xiàn)出了我們的專(zhuān)業(yè)能力。

下圖是一個(gè)完整的設(shè)計(jì)設(shè)計(jì)師的工作流程，也是設(shè)計(jì)思維的一個(gè)流程化展示：

現(xiàn)在的UI 設(shè)計(jì)師已經(jīng)不是把界面呈現(xiàn)效果做的好看，遵循一下設(shè)計(jì)規(guī)范就可以了，這從個(gè)圖中可以看出，在真正動(dòng)手設(shè)計(jì)的階段之前還有一個(gè)流程。它包括用戶(hù)研究、需求挖掘以及定義設(shè)計(jì)機(jī)會(huì)點(diǎn)等工作，這些前期工作非常重要，因?yàn)楝F(xiàn)在不少企業(yè)都對(duì)設(shè)計(jì)師的要求更全面了，僅僅是畫(huà)界面、做視覺(jué)的設(shè)計(jì)，如果做不到非常拔尖的水平就很容易被淘汰掉。

現(xiàn)在而言一個(gè) UI 設(shè)計(jì)師需要具備這樣的幾個(gè)能力：

• 用戶(hù)需求及調(diào)研能力

這里首先說(shuō)的就是一個(gè)大家不太注意到的一個(gè)能力：用戶(hù)需求調(diào)研能力。

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

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

• 挖掘需求的能力

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

a）挖掘商業(yè)需求

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

b）挖掘用戶(hù)需求

挖掘用戶(hù)的需求主要是要了解我們的用戶(hù)是誰(shuí)，以及他們的痛點(diǎn)、需求是什么，已有的解決方案和期待的解決方案是什么等等。

常見(jiàn)的調(diào)研方式有問(wèn)卷調(diào)查、用戶(hù)訪談等等。設(shè)計(jì)師可以根據(jù)自己的調(diào)研的對(duì)象選擇合適的方式，同時(shí)也要注意規(guī)避一些錯(cuò)誤的提問(wèn)，比如避免設(shè)置一些引導(dǎo)性過(guò)強(qiáng)的提問(wèn)、使用一些情感色彩比較濃重的話語(yǔ)等。

• 競(jìng)品調(diào)研能力

競(jìng)品分析、競(jìng)品調(diào)研，這并不是什么新鮮的詞匯，不少視覺(jué)設(shè)計(jì)師也常常會(huì)應(yīng)用這個(gè)工具。通過(guò)分析競(jìng)爭(zhēng)對(duì)手反過(guò)來(lái)引導(dǎo)自己更好的設(shè)計(jì)，它確實(shí)是一個(gè)有效的工具。

可惜這個(gè)工具不管是在商業(yè)分析領(lǐng)域還是設(shè)計(jì)領(lǐng)域都常常被濫用。

比如：直接復(fù)制粘貼 、取共性復(fù)制粘貼 、“融合+創(chuàng)新” 等，也被稱(chēng)為“競(jìng)品分析”，這樣的競(jìng)品分析通常不能帶來(lái)準(zhǔn)確的信息，甚至?xí)?duì)設(shè)計(jì)活動(dòng)產(chǎn)生誤導(dǎo)。

一個(gè)有效的競(jìng)品分析應(yīng)該是什么樣的呢？

• 競(jìng)品分析能和?戶(hù)研究做互補(bǔ)
• 確定市場(chǎng)機(jī)會(huì)
• 分辨?標(biāo)?戶(hù)
• 發(fā)現(xiàn)新的競(jìng)爭(zhēng)對(duì)?

明確分析目的是非常重要的，最后的分析報(bào)告的內(nèi)容就取決于此。假如你的分析目的是想分析競(jìng)爭(zhēng)對(duì)手在用戶(hù)的整個(gè)生命流程中是怎么增強(qiáng)用戶(hù)的粘性的，你的分析報(bào)告的內(nèi)容就應(yīng)該包括：競(jìng)品分析的目的、競(jìng)品是誰(shuí)、分析要點(diǎn)（視覺(jué)粘性、交互粘性、內(nèi)容粘性）、具體的競(jìng)品分析、結(jié)論輸出、優(yōu)化建議。

• 用戶(hù)分析能力

用戶(hù)分析是我們通過(guò)對(duì)用戶(hù)行為的觀察、研究來(lái)指導(dǎo)設(shè)計(jì)。為了保證我們的設(shè)計(jì)對(duì)用戶(hù)來(lái)說(shuō)是有價(jià)值的，我們需要對(duì)我們的目標(biāo)用戶(hù)進(jìn)行用戶(hù)分析。

有這樣幾個(gè)用戶(hù)分析常用的方法：

1.用戶(hù)旅程地圖（User Journey Map）

?戶(hù)旅程地圖（User Journey Map）是和?戶(hù)畫(huà)像（Persona）相輔相成的?具，persona代表的是具體的族群，?體驗(yàn)地圖是分析這個(gè)族群為了實(shí)現(xiàn)某個(gè)?標(biāo)?經(jīng)歷的過(guò)程的可視化呈現(xiàn)?具。 它?于了解和解決客戶(hù)需求和痛點(diǎn)，在這個(gè)過(guò)程中?戶(hù)可能會(huì)使?多個(gè)設(shè)備和渠道（例如?站，?機(jī) App ，社交媒體，電話， 線下客服等等）

為搭地鐵去工作的孕婦制作的用戶(hù)旅程圖：

2.用戶(hù)體驗(yàn)故事，又叫故事板（UX Story&Story Board）

故事板最初是源?于電影?業(yè)，早在20世紀(jì)20年代的時(shí)候，迪?尼?作室內(nèi)就常常?故事板來(lái)勾勒故事草圖。

產(chǎn)品的使?場(chǎng)景，?戶(hù)的交互流程，也可以借由?系列連續(xù)的插畫(huà)故事化地呈現(xiàn)出來(lái)。

?戶(hù)體驗(yàn)故事（UX story）是從?戶(hù)的?度對(duì)事件進(jìn)?說(shuō)明的?式， 故事中的事件展示了?戶(hù)中個(gè)體驗(yàn)的轉(zhuǎn)變。

3.用戶(hù)建模（User Modeling）

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

用戶(hù)建模的常用方法：

? Persona（?戶(hù)畫(huà)像）

? Empathy Map（同理?地圖）

? Affinity Diagram（親和圖）

? User Profile canvas（價(jià)值主張畫(huà)布）

• 創(chuàng)意方法

A problem well stated is a problem half solved 一個(gè)問(wèn)題被很好的定義，就解決了一半問(wèn)題 ——John Dewey

我們?cè)谡{(diào)研完用戶(hù)和商業(yè)上的需求之后，需要將用戶(hù)體驗(yàn)上和商業(yè)利益上的訴求轉(zhuǎn)化為可被解決的設(shè)計(jì)機(jī)會(huì)點(diǎn)，定義設(shè)計(jì)機(jī)會(huì)點(diǎn)是非常重要的一個(gè)步驟，它是創(chuàng)意的入口。而如何定義一個(gè)好的問(wèn)題，這需要科學(xué)的方法和實(shí)踐積累。

創(chuàng)意發(fā)散方法：頭腦風(fēng)暴

對(duì)于設(shè)計(jì)師來(lái)說(shuō)，頭腦風(fēng)暴并不是一個(gè)什么新鮮詞匯，這是一種用的十分普遍的迸發(fā)創(chuàng)意的方法，同時(shí)，也是被濫用的非常普遍的方法。

人們通常把創(chuàng)意發(fā)散和混亂的步驟相混淆，殊不知，創(chuàng)意的發(fā)散并不是指的是漫無(wú)目的的發(fā)散，而是用體系的方法找出最佳的解決方案。

一個(gè)體系的頭腦風(fēng)暴要經(jīng)歷這樣的三個(gè)步驟：

1. 充足的準(zhǔn)備，包括知識(shí)儲(chǔ)備和流程儲(chǔ)備。

2. 邀請(qǐng)合適的人，合適的人是指有專(zhuān)業(yè)背景的人、與項(xiàng)目相關(guān)度高的人，要盡量覆蓋到每種角色，需要注意的是盡量不要邀請(qǐng)決策者。

3. workshop，按照：開(kāi)始、發(fā)散、評(píng)估、驗(yàn)證的步驟來(lái)進(jìn)行。

創(chuàng)意評(píng)估

在頭腦風(fēng)暴之后，我們會(huì)得到很多問(wèn)題的解決方案，這個(gè)時(shí)候，我們就需要對(duì)這些創(chuàng)意方案進(jìn)行評(píng)估，找到最佳的那個(gè)解決方案。

• 原型測(cè)試

創(chuàng)意提出來(lái)后，我們并不急于將這些點(diǎn)子立刻鋪開(kāi)行動(dòng)，而是先做一個(gè)原型來(lái)測(cè)試，避免返工帶來(lái)的資源浪費(fèi)。

快速原型的原則是：

• 快速、低成本
• 可以迅速推倒、改變、反復(fù)測(cè)試
• 對(duì)原型不斷思索的過(guò)程就是拋棄原來(lái)想法的過(guò)程最重要的是過(guò)程，而非某一個(gè)環(huán)境單獨(dú)的行為或者成果

幾種設(shè)計(jì)原型及其順序：

• 用戶(hù)流程及信息架構(gòu)

1. 用戶(hù)流程圖：

2. 信息架構(gòu)：

任何時(shí)候都讓用戶(hù)知道TA在哪，如何到達(dá)某個(gè)頁(yè)面，在他們完成事情之后能去什么地方。

包含組織系統(tǒng)、導(dǎo)航系統(tǒng)、標(biāo)簽系統(tǒng)、搜索系統(tǒng)。

• 圖形概念和圖形造型能力

數(shù)字圖標(biāo)由最初的簡(jiǎn)單滿(mǎn)足圖形化的易識(shí)別、易記憶到后來(lái)的擬物寫(xiě)實(shí)風(fēng)格，人們對(duì)圖標(biāo)的美觀度越來(lái)越重視再發(fā)展到現(xiàn)在兼具簡(jiǎn)潔實(shí)用與造型美感的扁平風(fēng)格。

比如你要畫(huà)一個(gè)星星圖標(biāo)，不僅需要畫(huà)出一個(gè)“星星”的形態(tài)，還要符合造型審美。你畫(huà)的這個(gè)星星不僅有“星星”的造型，還要有質(zhì)感，比如毛茸茸的質(zhì)感、大理石的質(zhì)感……

色彩能力和規(guī)范能力

1. 色彩能力

這里的色彩能力主要是指對(duì)色彩的概念、色彩模式（RGB、CMYK、HSB）有一定了解后，具備有審美的配色能力。

初學(xué)者常會(huì)使用的配色方式把別人的配色 copy 下來(lái)直接用網(wǎng)站上找一組推薦配色用看感覺(jué)選色。正確的單色配色方式要考慮和周?chē)氐拇钆渖c色之間的梯度統(tǒng)一性和豐富性之間的平衡，考慮顏色的質(zhì)感（輕薄、略有質(zhì)感、厚重）。

• 設(shè)計(jì)規(guī)范能力

對(duì)于初學(xué)者來(lái)說(shuō)，閱讀設(shè)計(jì)規(guī)范，并將這些設(shè)計(jì)規(guī)范熟練的運(yùn)用非常有幫助?，F(xiàn)在各個(gè)平臺(tái)的文檔也都寫(xiě)得十分不錯(cuò)。因?yàn)檫@本來(lái)就是針對(duì)開(kāi)發(fā)者專(zhuān)門(mén)去做的，所以也很方便大家閱讀。比如iOS 的《人機(jī)交互指南》、安卓的 Material Design 等。

• 界面能力

用戶(hù)界面設(shè)計(jì)“USER INTERFACE DESIGN”，就是我們平時(shí)所說(shuō)的UI。大家常常混淆幾個(gè)概念：UE、UX、UI 、GUI、ID，我們一起看看他們之間的關(guān)系和區(qū)別：

界面能力是 UI 設(shè)計(jì)師所必備的一項(xiàng)能力，因此它非常重要。

界面設(shè)計(jì)所要遵循的原則：

• 美學(xué)性：視覺(jué)設(shè)計(jì)應(yīng)滿(mǎn)足基本的普適美學(xué)
• 清晰：通過(guò)視覺(jué)元素傳遞給用戶(hù)的信息及導(dǎo)航要清晰準(zhǔn)確，不讓用戶(hù)迷失方向
• 隱喻：簡(jiǎn)化視覺(jué)認(rèn)知，讓用戶(hù)能盡快地“認(rèn)識(shí)”界面，圖形元素符合用戶(hù)對(duì)真實(shí)事物地聯(lián)想，對(duì)用戶(hù)界面地慣性感知
• 用戶(hù)控制：視覺(jué)地設(shè)計(jì)要能夠讓用戶(hù)感受到，用戶(hù)是在控制界面，而不是被界面所控制，包括合理清晰、主次分明且容錯(cuò)性強(qiáng)的路徑指引，清晰友好的用戶(hù)反饋。

如果你還想要了解更多更系統(tǒng)的關(guān)于UI和UX的專(zhuān)業(yè)知識(shí)，知群可以幫助你系統(tǒng)的學(xué)習(xí)并且，在之后準(zhǔn)備面試的時(shí)候可能需要準(zhǔn)備作品集，那么知群也可以為你提供一線互聯(lián)網(wǎng)公司真實(shí)的實(shí)戰(zhàn)項(xiàng)目，以往有騰訊、阿里、滴滴、攜程、映客等公司的項(xiàng)目。

目前是免費(fèi)開(kāi)放給本站的粉絲的大家可以立即報(bào)名：