2024-4-1 資深UI設(shè)計者
UI、UE、UXD能力模型分析
-
對自己說的話：
要想看起來毫不費力，你就需要非常努力，每一個領(lǐng)域，都會有很多專業(yè)的人。你必須馬不停蹄的學(xué)習(xí)，才有能保持和他們的距離，不努力不學(xué)習(xí)，一不留神就會掉隊。特別在設(shè)計這個青春行業(yè)，新知識、新風(fēng)格、新技能更新的很快，更需要我們保持警惕心，時刻迎接新的挑戰(zhàn)，敢于突破自己。
-
-
-
UI，即User Interface。
崗位永遠是隨著市場的演變，不停的更新，在web時代，還沒有真正UI的說法，都叫“美工”，號稱是“美術(shù)工程師”，這個稱呼在國內(nèi)是被叫壞了。一說“美工”，就是指修修圖、扣扣圖之類的工種，感覺很low了。泛濫的廣告門店，全都是“美工”，也許因為這個影響，而把這個職業(yè)變的沒那么檔次了。其實在國外，“美工”的職位是很高的，是一個高水平的職業(yè)。令我印象最深的是，看過一次設(shè)計分享會，其中“紀(jì)念碑谷”的視覺設(shè)計師，也都是稱自己是“美工”的?？芍?，“紀(jì)念碑谷”的風(fēng)格、顏色搭配等，那可是一直是被行業(yè)學(xué)習(xí)的。
上幾張“紀(jì)念碑谷”的美圖
在web時代，前端工程師算比較厲害了，要有一定審美，還要會寫代碼，網(wǎng)頁的實現(xiàn)主要是靠前端工程師，而小“美工”輔助前端工程師出圖，那時候前端工程師的審美不一定比“美工”差，特別是那些追求像素細節(jié)的前端工程師。
移動互聯(lián)網(wǎng)的興起，各種移動終端設(shè)備的界面越來越追求規(guī)范化設(shè)計，還要考慮適配各種機型，便衍生出了UI設(shè)計師這一職位。崗位需求也是井噴式的增長。前期UI設(shè)計師來源大致分三類：公司有“美工”的，則兼著做著UI的工作，也慢慢從“美工”轉(zhuǎn)型UI設(shè)計師了；還有一部分從培訓(xùn)機構(gòu)出來的“專業(yè)”UI設(shè)計師；還有一部分是藝術(shù)類院校的畢業(yè)生。
UE，即User Experience。
UE江湖上號稱交互設(shè)計師，隨著產(chǎn)品的用戶增多，業(yè)務(wù)增加，崗位職責(zé)就要更細分。小體量的產(chǎn)品，PM可以畫原型和簡單的交互，UI可以出高保真設(shè)計圖和完善頁面流程，不需要交互設(shè)計師，整個產(chǎn)品完全可以做下來。但是，面對龐大的業(yè)務(wù)體系，比如微信、淘寶、抖音等等，以前PM和UI就可以一起搞定的事情，這一下子就變得沒時間沒精力完成了，做不好，也顯得不專業(yè)。此時就得需要一個特殊的崗位來專職完成交互工作，便衍生出了交互設(shè)計師的職位。在公司，一些邏輯性強、對業(yè)務(wù)熟悉的PM和UI就可以轉(zhuǎn)交互崗位了。交互設(shè)計師主要還是存在于大公司，比如阿里、騰訊、攜程、字節(jié)跳動等等。所以說，崗位永遠隨著業(yè)務(wù)需求產(chǎn)生。就比如，以前你肯定都沒聽過滴滴專車司機、美團外賣員、淘寶電商主播這些職業(yè)，也都是隨著某個項目的業(yè)務(wù)發(fā)展，有了一定的需求，就需要對應(yīng)的崗位了。
UXD，即User Experience Designer。
UXD英文同UE。為了區(qū)分，被行業(yè)默認為是用戶體驗設(shè)計師，或者可以說是全鏈路設(shè)計師，不同公司有不同的叫法。其實UXD一直存在，移動互聯(lián)網(wǎng)剛興起，就有UXD的概念，一般都是指相對全能型的UI設(shè)計師。能完成產(chǎn)品分析到交互原型到高保真視覺稿，整個鏈路的輸出。小公司比較喜歡這類人才，畢竟一個人拿著一份工資，干了多個人的活，何樂而不為呢。
可是早期的UXD，真的只是個概念，表面看起來是全能型人才，其實每個崗位都沒有深入研究，都只是懂一些皮毛，顯得很不專業(yè)。如今，一些大廠的UI設(shè)計師，經(jīng)過幾年的工作，單方面的UI工作已經(jīng)不能滿足崗位的需求了，一款產(chǎn)品成熟了，UI相關(guān)工作就會少很多。這時就需要深入熟悉業(yè)務(wù)，需要用戶研究和交互設(shè)計。像阿里，也會對各個種類的設(shè)計師進行能力模型分析，從“用研”、“交互”、“視覺”三個維度去考評每個設(shè)計師。重新定義級別更高更符合項目需求的設(shè)計師，就是這里說的UXD。如果我們把“用研”、“交互”、“視覺”每個維度能力定義10分的話，UXD就需要三個能力都要滿8分以上。這時候，UI設(shè)計師，如果“視覺”能力，達到9分以上，“用研”和“交互”都在6分以下，那么或許UI設(shè)計師這個崗位可能也就會不存在了，崗位職責(zé)更傾向于做一些創(chuàng)意型的視覺工作，被稱為VD。
UXD的出現(xiàn)，其他設(shè)計崗位都會帶來一定影響，看了一下最近的設(shè)計崗位招聘信息，很多招聘信息都是寫著需要UX（偏交互）或者UX（偏視覺）。
看到這里，作為單一視覺能力、單一交互能力、單一用研能力的童鞋，是不是會感到一絲絲緊張呢。這是行業(yè)發(fā)展的必然趨勢，你想不被淘汰，那么就需要對自己的能力進行評估，看看更適合走哪條路。不過也不用太緊張，專業(yè)的大公司畢竟是少數(shù)，短期內(nèi)不會發(fā)生很大的變化，中小企業(yè)還是占據(jù)多數(shù)。當(dāng)然，你想走在設(shè)計行業(yè)的前頭，那就必須像大公司看齊了。
能力的區(qū)分，要從整體行業(yè)去看，因為不同的公司，不同的項目，需要的能力也會有很大的不同。很簡單，在招聘網(wǎng)站看下各公司對同一崗位的招聘要求，就一目了然了。所以找工作也是需要雙方的匹配度，不是說你是UI，就能勝任所有項目的UI，同樣，你是UE，也不可能熟悉所有項目的業(yè)務(wù)流程。我們每個人的認知和經(jīng)驗都是有限的，找工作的過程，其實也是挖掘自己能力極限的過程（PS：隨意找份工作的除外）。
以下針對三個職業(yè)的主要能力模型進行闡述，一些基本能力，比如會什么什么軟件，就不做說明了。
如今針對UI設(shè)計師，在職場上，處于僧多粥少的局面，不完全統(tǒng)計，每個UI設(shè)計師的崗位都有將近500+的人在競爭，已經(jīng)泛濫了。但是話又說回來，是人才，都會搶著要的，你的能力出眾，再多的競爭對手都不是問題。作為普通的UI設(shè)計師，就要對自己的能力分析，看看自己是否具備了一個專業(yè)UI設(shè)計師的能力。
a.排版
從平面轉(zhuǎn)行過來的UI設(shè)計師，附帶一定的排版能力，好比創(chuàng)建角色的時候，系統(tǒng)默認給你的技能屬性，比起其他的UI設(shè)計師，是有著一定的優(yōu)勢，當(dāng)然，只是剛開始的階段，設(shè)計是一條漫長的道路，能力都可以靠自己后期訓(xùn)練出來。
排版的能力，可以說是UI設(shè)計師最基礎(chǔ)，也是最重要的一個能力，移動終端涉及到的所有界面，都是需要排版。排版四原則“親密性、對齊、對比、重復(fù)”，必須靈活應(yīng)用。
b.色彩搭配
一個合格的UI設(shè)計師，必須擁有良好的色彩搭配能力。要多研究好的配色，也需要知道一定的理論知識，什么互補色、對比色、色相、飽和度等各種參數(shù)調(diào)節(jié)也必須得都知道，你要是一直處于紅（sai）配（gou）綠（pi）的水平，那玩完了。要把顏色研究的極致，確實很難的，要不停的試錯，還要抓住流行。就算做了十年設(shè)計的大佬，也還需要一直研究顏色。顏色給人的感覺是最直觀的，顏色用的好不好，也直接反應(yīng)了UI設(shè)計師的專業(yè)程度。
為什么有些設(shè)計師搭配出來的顏色就看的很舒服，也能通過顏色給一個產(chǎn)品定性，比如“微信綠“、”網(wǎng)易紅“、”美團黃“，都是一些深入人心的顏色。而有些設(shè)計師搭配出來的顏色，就不通透，顯得有點臟，有想過其中的問題么？不太會色彩搭配的設(shè)計師，建議選一些自己喜歡的插畫、界面等，研究其中色彩，一定要具體到色值，多一點研究，自然能總結(jié)出自己的一個配色方法。
c.圖標(biāo)設(shè)計
只有文字排版，沒有圖標(biāo)的界面，顯得很蒼白，就好像家里裝修，除了油漆、地板、瓷磚等常規(guī)的硬裝，沒有任何燈具、窗簾、沙發(fā)等軟裝。就像微信這么簡約的產(chǎn)品，也是需要圖標(biāo)支撐的，不然就是一個不完整的產(chǎn)品。App界面不像書籍，只需要文字就行?？磿浅两降模恍枰^多的附加元素干擾，而界面，是為了能快速讓用戶知道該功能的作用，此時圖標(biāo)就發(fā)揮作用了。
圖標(biāo)的形式有線性、面性、斷點等，圖標(biāo)的風(fēng)格有扁平、擬物、2.5D等，圖標(biāo)的使用還是要根據(jù)產(chǎn)品的調(diào)性和使用場景定義。比如現(xiàn)在很流行的暗黑模式，面性的圖標(biāo)更能適合使用場景。
d.動效
動效是UI設(shè)計師的加分項，一些基礎(chǔ)的動效需要掌握，不然在如今的局面，太沒競爭力了，移動互聯(lián)網(wǎng)的紅利期已經(jīng)過去了，現(xiàn)在公司對UI設(shè)計師的招聘要求也越來越高了，技多不壓身，有精力的可以學(xué)一下。大多App中必要的動效也就加載動效和刷新動效了，其他的動效我感覺都可有可無，只能說其他的動效是對產(chǎn)品的優(yōu)化，在產(chǎn)品體驗上會更有趣。某些場景，動效的觸發(fā)也會給用戶帶來一點驚喜，也會提高一些點擊率、轉(zhuǎn)化率。典型的比如要做一個活動，在app的首頁，就會彈出動效的浮層，吸引用戶去點擊。
e.插畫
在app中，經(jīng)常會被提到情感化設(shè)計，在空白頁、異常頁會應(yīng)用的比較多，其中插畫就立了很大功勞，通過一些有趣的場景畫抵消產(chǎn)品給用戶帶來的失落情緒。要是插畫中有品牌形象的融入，也增加了產(chǎn)品的品牌感。作為UI設(shè)計師，插畫的能力雖然比不過專業(yè)的插畫師，但是一些基本能力需要掌握，比如構(gòu)建場景、場景具象化、提煉品牌元素等。至于技法，能懂一兩個最方便最有效的就行（PS：想深入研究插畫的除外）。
f.制定規(guī)范
制定規(guī)范是UI設(shè)計師很重要的一項工作，我們設(shè)計概念稿可以天馬行空，無關(guān)具體規(guī)范，但是在項目中，我們就必須制定規(guī)范，因為我們的設(shè)計是需要落地的，而不只是欣賞。
規(guī)范包括文字規(guī)范、顏色規(guī)范、狀態(tài)規(guī)范、卡片規(guī)范、異常規(guī)范、圖標(biāo)規(guī)范、動效規(guī)范、切圖命名規(guī)范等，可以說所有的設(shè)計輸出，都需要我們制定規(guī)范。這里簡單闡述一下各種規(guī)范。
文字規(guī)范：字體、字重、字號、字色、行間距、字間距、段間距。
顏色規(guī)范：主色調(diào)、副色調(diào)、顏色使用場景。
卡片規(guī)范：比例、圓角、不同卡片使用場景。
異常規(guī)范：單行文字限制字?jǐn)?shù)、文字最多顯示行數(shù)、網(wǎng)絡(luò)異常、加載失敗
圖標(biāo)規(guī)范：主要是指可點擊的圖標(biāo)不能小于最小可點擊尺寸
動效規(guī)范：動效參數(shù)，什么貝塞爾曲線、時間、位移等等
切圖命名規(guī)范：需要和開發(fā)代碼庫里的切圖命名一一對應(yīng)
制定規(guī)范是為了項目更好的進行，也方便部門之間的溝通。我在制規(guī)范的過程中，會反問自己，“我這樣制定規(guī)范合不合理”？這時候我就會跑去問開發(fā)，他們是怎樣實現(xiàn)我們的設(shè)計稿的，你會發(fā)現(xiàn)，你制定的某些規(guī)范，可能開發(fā)看都不看。小朋友，你是否有很多問號？這里建議制定某些規(guī)范的時候，最好還是和開發(fā)溝通一下，看看開發(fā)到底是怎么樣實現(xiàn)的，我們制定的規(guī)范是給他們用的，是為他們服務(wù)的，所以不要沉浸在自己的思維里。
UE的門檻挺高的，不像UI，可以打前期，有初級UI設(shè)計師的職位，而UE只能是中后期了，能當(dāng)UE的都是有一定項目經(jīng)驗，前期還是安心打野吧（指積累項目經(jīng)驗）。我一直覺得UE就好像是PM和架構(gòu)師的結(jié)合，資深的UE真的是一個狠角，能肉能DPS。（肉：和PM走在項目最前頭提需求；DPS：業(yè)務(wù)流程、頁面交互等設(shè)計稿的輸出）
a.邏輯思維
邏輯思維是指人們在認識事物的過程中借助于概念、判斷、推理等思維形式能動地反映客觀現(xiàn)實的理性認識過程。在項目中，UE就需要了解各種邏輯，包括產(chǎn)品層的邏輯和業(yè)務(wù)層的邏輯。UE輸出的流程圖是直接給到開發(fā)的，要細到每個節(jié)點、每個狀態(tài)都需要考慮。哪條流程沒閉環(huán)，那就是不完整的，開發(fā)出來就是BUG。
感覺自己邏輯思維能力弱的童鞋，可以用A4紙筆記法提高自己的邏輯思維能力，可參考書籍《零秒思考》。
b.數(shù)據(jù)分析
在設(shè)計產(chǎn)品過程中，怎么體現(xiàn)我們設(shè)計的價值，那就需要用數(shù)據(jù)論證。沒有數(shù)據(jù)支撐，我們的設(shè)計將沒多大意義，也不利于一個產(chǎn)品的持久迭代。畢竟設(shè)計和純藝術(shù)不一樣，一個是主觀感受，一個是為了解決問題。尤其是UE設(shè)計師，更需要數(shù)據(jù)分析，重要的業(yè)務(wù)流程節(jié)點都需要埋點，通過數(shù)據(jù)對比，來反應(yīng)產(chǎn)品功能迭代或流程優(yōu)化是否合理。
舉個例子：提高某產(chǎn)品的會員購買率，這時有AB兩個方案，要數(shù)據(jù)分析，數(shù)據(jù)類型大致有PV、UV、轉(zhuǎn)化率、跳出率、訪問時長等等，涉及的頁面有會員套餐選擇頁、提交訂單頁、支付頁等等。整條會員購買任務(wù)線的每個流程節(jié)點都要分析，哪個節(jié)點用戶流失很多，哪個頁面用戶訪問率低等等，數(shù)據(jù)對比著看，就能很清楚的知道問題所在，才能確定哪個方案更合適。
c.用戶研究
在PM提煉需求的時候，UE往往要和PM一起配合，每個公司PM分擔(dān)的職責(zé)會不一樣，像我們這里，PM還需要把控整個項目的進度，從項目立項到項目落地結(jié)束，此時給到的需求就沒那么精細。有些公司PM只是提煉需求，然后出原型，項目進度的事情會有專門的項目經(jīng)理去完成，那么PM提出來的需求會精細一點，也分擔(dān)了UE一部分工作。不管PM的工作職責(zé)是什么樣的，UE的目的就是要把提煉的需求具體化，要確定是真需求還是偽需求，這時候就需要我們做用戶研究。確定用戶群體，站在用戶的立場，融入場景去分析需求。
研究的方法有兩個維度：定性的和定量的。
定性的有用戶訪談等，定量的有調(diào)查問卷、可用性測試、A/B測試等等。（這里不延展講具體的方法，后面的文章再具體討論用研的方法）
d.交互文檔
交互文檔的輸出，是UE最基礎(chǔ)也是最重要的一個能力，前期的一切準(zhǔn)備，用研、競品分析等，都是為了交互文檔的輸出。在工作中，很多UE輸出的交互文檔都不規(guī)范，也不完整。UE是PM的下游，是UI、開發(fā)（包括前端和后端）、測試的上游，我們要考慮輸出的文檔是給哪個部門用的。一份完整的交互文檔，應(yīng)該包含PRD的所有內(nèi)容，下游的部門看了交互文檔，就不需要再去看PRD了，也節(jié)省了多部門之間的溝通成本。
UE的責(zé)任重大，下游的各大部門都等著，拿到交互文檔，就可以同時開工了。UI拿到交互文檔，可以進行視覺設(shè)計；前端拿到交互文檔，可以寫頁面整體結(jié)構(gòu)；后端拿到交互文檔，可以開始寫各種API；測試拿到交互文檔，可以開始寫測試用例（我見過我們公司測試童鞋寫的測試用例文檔，真的是很專業(yè)，寫的很細，值得學(xué)習(xí)，了解他們的測試用例文檔，對交互文檔的輸出也是有很大幫助的）?？梢?，一份清晰、完整、規(guī)范的交互文檔有多么重要，能大大提高各部門協(xié)作的效率。從交互文檔，也能看出一個UE的專業(yè)性。
這里要說明一點，交互原型最好都是黑白稿，有些UE為了體現(xiàn)自己的設(shè)計水平，把原型圖設(shè)計的很漂亮，各種顏色都有，這其實反而顯得不專業(yè)（屬于過度設(shè)計，太想表現(xiàn)了），也給下游的UI設(shè)計師帶來很大干擾。作為UE，不需要體現(xiàn)視覺設(shè)計能力，我們的原型圖，看起來規(guī)范、條理清楚就行了。我看過一些大佬出的交互原型，都是黑白稿，很規(guī)整，反而看起來逼格很高。運用好各種黑白灰組合和大小對比，已經(jīng)足夠表現(xiàn)你想要的各種信息元素和權(quán)重比例了。
交互文檔需要包含的內(nèi)容：修訂記錄、需求說明、業(yè)務(wù)流程、頁面流程、原型圖說明、數(shù)據(jù)埋點等。
e.制定規(guī)范
前面說過了UI設(shè)計師需要制定規(guī)范，這里UE設(shè)計師也是需要制定規(guī)范的。一個產(chǎn)品0-1可能不需要這么多規(guī)范，主要是功能的實現(xiàn)，而隨著業(yè)務(wù)越來越多，功能越來越多，沒有規(guī)范肯定是不行的。
UE制定規(guī)范，主要分兩類：
一個是文檔輸出的規(guī)范，首先需要制定一套組件庫，為了團隊輸出文檔的統(tǒng)一性，還要規(guī)定文檔輸出的具體內(nèi)容，比如：版本記錄、功能使用場景說明、流程圖、原型圖等等。還有更多規(guī)范，這里列舉幾個。
另一個是產(chǎn)品的交互規(guī)范，通用的交互動作定義（滑動、點擊、長按等），全局的結(jié)構(gòu)定義（金剛區(qū)、底部標(biāo)簽欄等，比如最新版的馬蜂窩已經(jīng)去掉了通用的底部標(biāo)簽欄），時間定義（等待時間、觸發(fā)時間、動效時間等，這里動效的時間，需要動效設(shè)計師的配合）。還有更多規(guī)范，這里列舉幾個。
規(guī)范有通用性，也有差異性，規(guī)范也不是死的，需要根據(jù)實時的情況去制定更合理的規(guī)范。
UXD是一個互聯(lián)網(wǎng)公司發(fā)展到一定規(guī)模，在設(shè)計團隊必須要的一種設(shè)計師。是一個綜合能力比較強的設(shè)計師，他能更全面更理性的去看待一個項目，更多的是提供方案去解決每個問題。類比室內(nèi)設(shè)計師，如果你不了解房屋的承重結(jié)構(gòu)；你不了解木工、水電工、瓦工等各工種的施工技術(shù)；不了解各種建材的價格、質(zhì)量、環(huán)保等情況，設(shè)計出來的圖紙肯定有一大堆問題，可行性比較差，也滿足不了業(yè)主的需求，更有可能存在安全隱患。UXD也一樣，你需要懂視覺審美、懂交互、了解開發(fā)技術(shù)、了解業(yè)務(wù)場景、會用戶研究等，這樣才能確保設(shè)計方案的可行性。
UXD的能力從整體去看，分為兩大能力：專業(yè)能力和職業(yè)能力，不同領(lǐng)域的UXD還需要具備某一項差異化的特殊能力。比如我們HMI（人機交互界面）相關(guān)的UXD，你必須還了解一些ID（工業(yè)設(shè)計）相關(guān)的知識，軟硬結(jié)合的場景要比純APP復(fù)雜的多。
a.專業(yè)能力
很顯然，專業(yè)能力需要具備UI、UE、用研的專業(yè)能力，還需要提案的能力。前面也有說過，10分UI、UE的專業(yè)能力，至少也需要達到8分以上。其中UI的插畫、動效能力可以弱一點，相關(guān)工作可以由VD去完成，主要是能讓頁面落地，提供可行性的設(shè)計方案。當(dāng)然，也需要UXD去制定一些規(guī)范，這樣能更系統(tǒng)、更清楚的推進項目。
這里主要講一下用研能力和提案能力。
用研能力：比起UE，UXD的用研應(yīng)該要更全面更細化，UE的需求大多都是從PM那邊過來的。作為UXD，因為你已經(jīng)熟悉了整個產(chǎn)品業(yè)務(wù)，要時刻跟用戶站在一起，要自己去挖掘新需求，優(yōu)化體驗，讓用戶感知到“對，這就是我想要的東西“。
提案能力：提案的能力是作為UXD需要具備的一個很重要的能力，常規(guī)的提案，會由部門協(xié)作整體輸出，而到UXD這邊，你就代表了部門，你就需要具備這樣的能力，這時候你需要了解項目背景、分析需求目的、做競品分析、用戶調(diào)研等各類工作，輸出1-2個可行性方案，其中包含完整的分析過程、交互圖、視覺圖等等。不然所有的設(shè)計稿躺在電腦里，只能是自我欣賞，沒有說服力，沒有價值。
b.職業(yè)能力
相比專業(yè)能力，作為UXD，職業(yè)能力更為重要。有些資深的設(shè)計師，設(shè)計能力很強，設(shè)計的方案也很完美，可是就是很難落地。為什么呢？就是缺少職業(yè)能力。職業(yè)能力可以從情商、執(zhí)行力、自驅(qū)力等方面去衡量。UXD的最終目的就是要推動設(shè)計方案落地，在項目過程中，你同時也充當(dāng)了一個管理者的角色，對外你要協(xié)調(diào)各部門資源，怎么制定計劃，推進方案；對內(nèi)，你要總結(jié)方法論，分享設(shè)計心得。其實就是在公司打造自己的IP，增加影響力，這樣你的每一次提案都很有說服力，最后用數(shù)據(jù)論證自己的方案是正確的。UXD的最高段位，就是靠自身持續(xù)的影響力、持續(xù)輸出的優(yōu)質(zhì)方案推動你進入最高決策層，此時你的聊天對象很有可能就是CEO了。
看到這里，大家對自己的設(shè)計能力有沒有很清晰的一個認識？對自己的職業(yè)發(fā)展方向有沒有一個新的目標(biāo)？不管怎么樣，職業(yè)崗位一直會變，我們站在自己的崗位上，都要用全局的眼光去做事情，能力和經(jīng)驗這個東西都是需要靠時間沉淀的，方向明確了，就好好努力吧。以上是我自己設(shè)計職場生涯的一些經(jīng)驗之談，希望能幫到你們，有地方不足，還請各位大佬指點。
藍藍設(shè)計的小編 http://tweetduck.com