2023年BOSS：我要招一個懂交互的UI設(shè)計師

BOSS：我要招一個懂交互的UI設(shè)計師Part1為什么UI設(shè)計師要懂交互？

近幾年的互聯(lián)網(wǎng)市場，有不少公司提出了“全鏈路設(shè)計師”、“用戶體驗設(shè)計師”的說法，合并交互與UI崗，一時間眾說紛紜：有人說是高要求，有人則說這是一場變相的“人力壓縮”。

其實，設(shè)計師作為一個高度復(fù)合型的崗位，雖有UI、交互、產(chǎn)品設(shè)計等細(xì)分，但無論是哪個細(xì)分崗位，都需要對業(yè)務(wù)、場景、用戶、技術(shù)實現(xiàn)有所把握，才能給出最佳的設(shè)計方案。

高度競爭的市場環(huán)境下，單純的“美化產(chǎn)品原型稿”，早已丟失了獲得高回報工作的可能性。因此，才會對設(shè)計師的要求越來越趨于綜合化。放眼如今的UI設(shè)計師聘請描述：用戶體驗、交互可行性、數(shù)據(jù)分析……這些曾屬于交互設(shè)計師的職責(zé)，已普遍地消失在UI設(shè)計師的必備技能中。

至此，我們可以危言聳聽地說一句：“單一的UI設(shè)計已經(jīng)漸漸滿意不了互聯(lián)網(wǎng)市場的需求”；但也正由于如此，我們才要豐富起自己的武器庫，去創(chuàng)作更大的價值……

Part2UI設(shè)計師該如何學(xué)習(xí)交互呢？

1.啟蒙篇：站在用戶的角度上思索問題

筆者曾經(jīng)也是一位UI設(shè)計師，在工作中由于項目從C端漸漸偏向B端，工作重心也就需要從視覺傾向于產(chǎn)品規(guī)律、交互體驗上了。崗位名稱從“UI設(shè)計師”到“用戶體驗設(shè)計師”再到“交互設(shè)計師”。

這其中最大的轉(zhuǎn)變就是：將自己從“站在畫面美觀的角度上”思索問題，轉(zhuǎn)變?yōu)椤罢驹谟脩舻慕嵌壬稀比ニ妓鲉栴}（??或許我之前是個不懂設(shè)計的美工）。

舉個簡潔的例子，之前做一個叉車工使用的PDA把槍界面：

現(xiàn)場實施人員給我?guī)硪粋€小需求，為避開叉車工在操作的時候誤觸，需要把底部的操作按鈕向上移；

我在上移了16px之后依舊被要求不夠，“連續(xù)上移，再上移！”

站在設(shè)計規(guī)范的角度上，我與實施人員幾番battle之下……他發(fā)給我一張現(xiàn)場叉車工人的手的照片，我這才明白這么做的理由：

長期的重活導(dǎo)致他們的手骨節(jié)粗大；再加上在搬貨途中使用PDA的抖動性增加，使他們的操作誤區(qū)比一般人大了很多。

在了解用戶與場景之后，再看向那個PDA界面操作按鈕下大片的空白，瞬間顯得合理了……

2.基礎(chǔ)篇：如何畫出合理的界面？

首先，筆者建議大家可以結(jié)合自身項目，從基礎(chǔ)層面開頭學(xué)習(xí)，由小至大、由簡入繁。

一來，是由于項目流程中原本崗位協(xié)作本就嚴(yán)絲合縫，要么是已有交互、要么是產(chǎn)品經(jīng)理產(chǎn)出交互原型稿，可能并不會給你很大的試錯空間；

二來，則是由于各位分析過大場景的力量可能不足，直接上手反倒簡單短期內(nèi)沒有產(chǎn)出，影響學(xué)習(xí)的心情……

基礎(chǔ)內(nèi)容主要包括三個部分：工具、控件、設(shè)計原則。

1）工具

這里會有許多UI童鞋問的一個問題就是：我需要學(xué)習(xí)Axure軟件嗎？

個人建議：Axure可以但沒必要,反正我現(xiàn)在沒用到。各位既然能夠畫出精致的高保真效果圖，那么低保真的交互稿還畫不出來嗎？

工具如何并不重要，如今用sketch、figma畫原型的交互設(shè)計師許多，而且這樣更便利與視覺同學(xué)之間的產(chǎn)出物轉(zhuǎn)化。

所以大家倒不必將過多的時間精力放在軟件上，別讓軟件成為學(xué)習(xí)路上的第一個攔路虎。

2）控件

IOS、Android、MacOS、Windows各端、各平臺的設(shè)計規(guī)范控件是設(shè)計的基礎(chǔ)，無論你是UI還是交互，都應(yīng)當(dāng)嫻熟使用各個平臺、系統(tǒng)的組件使用場景。

只是UI與交互的側(cè)重點可能不一樣,許多UI設(shè)計師過分注意組件的樣式，而忽視了它們的用戶使用場景。所以組件畢竟該如何學(xué)習(xí)？

①熟記組件的使用場景

這個組件在什么狀況下會用到？只有熟記使用場景，才能在需求到手時，快速實現(xiàn)功能。

這些內(nèi)容在各組件共享平臺的使用指南中都有具體介紹，以element為例：基礎(chǔ)用法、相像組件區(qū)分都有標(biāo)明（如下圖）。

②各端組件不要混用

不同端的同種功能組件會有很大的操作區(qū)分，比如：濫用移動端與PC端之間的組件，就會影響到用戶的體驗。

以加載方式為例：web端常見的分頁加載就不適合消失在移動端，移動端主打的輕量化操作體驗，多以滾動點擊的方式觸發(fā)加載。

3）設(shè)計原則

如何畫出一張合理的界面布局？那么你肯定離不開交互設(shè)計的七大定律。

對于交互設(shè)計七大定律，想必大家多多少少都有了解：格式塔原理、網(wǎng)格系統(tǒng)、7±2法則、席克定律、費茨定律、奧卡姆剃刀原理、簡單性守恒定律。

以上定律的具體定義，筆者在此就不一一摘抄了，想要知道的童鞋可以上網(wǎng)搜一搜。下面我詳細(xì)只講我是如何學(xué)習(xí)這些定律的，那就是：多看案例！看得多了，自然就會用了。

以費茨定律舉例：

帶入這個定律去看下面的實際方案：詳情頁面“返回”按鈕畢竟擺在哪里，比較合適呢？

我們選取了幾個app詳情頁面的查看，最常見的兩個樣式，左上角VS左下角，那么哪個方案操作更便捷呢？

帶入用戶手指操作的場景，假如是雙手操作，那么兩個方案區(qū)分不大；但假如是單手操作，通過單手拇指觸屏的操作熱力圖來看，左上角的返回按鈕屬于“難觸及區(qū)域”，而左下角則是“操作便捷區(qū)域”，帶入費茨定律，我們就能得出左下角的返回按鈕操作更快捷！

溫馨提示：

其實這些交互的定律就猶如我們UI的設(shè)計規(guī)章一樣，可以在做設(shè)計的時候去參考，卻不能照本宣科，脫離實際場景。以免消失筆者前文中“一味追求規(guī)范，而忽視用戶痛點”的教訓(xùn)。

3.強化篇：如何做出好用的功能？

一個好用功能的前提，得是一個能用的功能。所以我們要先讓流程閉環(huán)，功能跑起來；然后再做優(yōu)化，逐步完善……

1）先做出一個能用的功能：流程閉環(huán)

我們在做每一個版本需求時，產(chǎn)品經(jīng)理都會給到一條功能的業(yè)務(wù)流程，而這條業(yè)務(wù)流程是沒有方法直接轉(zhuǎn)化成頁面的。設(shè)計師們需要將“業(yè)務(wù)流程”轉(zhuǎn)化為“用戶操作步驟”，再轉(zhuǎn)化為“界面”。

舉一個最經(jīng)典的審批流程的例子。

業(yè)務(wù)流程大家都很熟識：發(fā)起-審批-結(jié)束；其中包括了兩類用戶：發(fā)起人審批人。以發(fā)起人為例，向下拆分他的用戶操作步驟；再從操作步驟中推導(dǎo)出界面（如下圖）：

2）讓功能變的好用：深挖用戶場景

當(dāng)閉環(huán)的操作流程已經(jīng)搭建完成，我們就需要考慮，如何讓它變得更加好用了。

這一環(huán)節(jié)我們需要深度挖掘用戶場景：弄清晰“誰？在什么狀況下？要做什么？”，然后與用戶共情，帶入場景去思索問題……

連續(xù)以發(fā)起審批為例：

在這一過程中，審批發(fā)起人（用戶）+在提交了審批之后（場景）+想要知道審批的結(jié)果（目標(biāo)）。

帶入用戶的角度，去思索這個場景下，他們的心理活動，他們會有什么想法？再以此為需求，逐步完善我們的功能：

這里可能又有童鞋發(fā)問了：我沒有這么強的共情力量，想不到這么多用戶的可能性怎么辦？

那么，交互設(shè)計師的核心技巧：用戶調(diào)研、可用性測試、數(shù)據(jù)埋點、競品分析……就可以了解一下了！通過這些方法，就能又快、又準(zhǔn)的幫你做出一個好用的功能。

4.進(jìn)階篇：設(shè)計賦能業(yè)務(wù)（績效加分項）

“賦能業(yè)務(wù)”是設(shè)計師工作中最重要的一點，信任這個詞在大家的績效匯報中常?？吹?。

假如說不懂“用戶體驗”的UI只是一個畫圖機器的話，那么不懂“賦能業(yè)務(wù)”的交互則是一個畫原型圖的機器。

1）如何賦能業(yè)務(wù)？

首先要弄清你的業(yè)務(wù)目標(biāo)是什么？然后再圍圍著業(yè)務(wù)目標(biāo)去細(xì)化拆分：

思索自身設(shè)計，拆分設(shè)計任務(wù)了解項目組其他崗位成員的拆分任務(wù)，找準(zhǔn)發(fā)力點，向下拆分舉個例子，一個證件審核后臺的案例：

審核后臺的客服人力不足，導(dǎo)致工單積壓，用戶頻頻電話投訴催辦。業(yè)務(wù)方要求在一個月內(nèi)，在不增加客服人員編制的狀況下，將催辦類投訴工單降低80%！

收到這個業(yè)務(wù)目標(biāo)后，項目組內(nèi)全體成員都在針對業(yè)務(wù)目標(biāo)思索方案、制定各自的任務(wù)。

第一步，設(shè)計師團隊從設(shè)計動身，拆分設(shè)計任務(wù)：

去調(diào)研客服人員審核流程，做操作步驟精簡提效；再去調(diào)研投訴用戶的心理，增加審核進(jìn)度反饋功能，緩解用戶焦躁心情；然而，這些體驗層級的優(yōu)化雖有奏效，卻很難擔(dān)起降低80%投訴率的大額目標(biāo)。

其次步，理清團隊其他崗位的任務(wù)內(nèi)容及策略，向下拆分：

通過溝通，大數(shù)據(jù)團隊針對該目標(biāo)提出了通過OCR識別技術(shù)（光學(xué)字符識別技術(shù)：通過掃描將印刷文字轉(zhuǎn)為圖片，再利用文字識別技術(shù)轉(zhuǎn)化為可使用的文字輸入），智能審核證件的方案。然而卻由于OCR識別錯誤率太高，導(dǎo)致近一半的工單仍舊需要人工審核。

那么此時，設(shè)計師就可以在提升OCR識別勝利率的目標(biāo)下，向下拆分自己的設(shè)計目標(biāo)了。

去調(diào)研OCR識別率低的基礎(chǔ)狀況：除去技術(shù)層面的問題，用戶上傳照片不規(guī)范、傾斜、反光、重要信息未拍全等都會導(dǎo)致識別失敗。

那么對于這些問題，上傳審核步驟的指引優(yōu)化就是關(guān)鍵所在！

最終，團隊一起實現(xiàn)了降低80%投訴率的大目標(biāo)，而設(shè)計師在項目過程中，既解決了用戶遇到的問題、又解決了團隊遇到的問題，做到了真正的賦能業(yè)務(wù)！

尾聲

漫長的文章最終接近尾聲了……

最終一句臨別贈言送給大家（也是筆者在學(xué)習(xí)交互的時候，一位老師送給我的）：

不必太過死磕各個崗位的工作范圍，沒有哪個行業(yè)內(nèi)的專家能夠給交互、視覺、以及任何一份崗位的工作范圍去下定義。百度百科上能搜到的全部針對崗位的描述，也都只是包括但不限于。

所以，不必被他人設(shè)限，也不必給自己設(shè)限……

總而言之一句話，學(xué)習(xí)和提升是自己