編者按：本文從啟蒙、基礎(chǔ)、強(qiáng)化、進(jìn)階4個方面，列舉了UI設(shè)計(jì)師學(xué)習(xí)交互的路徑和方法。

一、為什么 UI 設(shè)計(jì)師要懂交互？

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

其實(shí)，設(shè)計(jì)師作為一個高度復(fù)合型的崗位，雖有 UI、交互、產(chǎn)品設(shè)計(jì)等細(xì)分，但無論是哪個細(xì)分崗位，都需要對業(yè)務(wù)、場景、用戶、技術(shù)實(shí)現(xiàn)有所掌握，才能給出最佳的設(shè)計(jì)方案。高度競爭的市場環(huán)境下，單純的"美化產(chǎn)品原型稿"，早已喪失了獲得高回報工作的可能性。

因此，才會對設(shè)計(jì)師的要求越來越趨于綜合化。放眼如今的 UI 設(shè)計(jì)師招聘描述：用戶體驗(yàn)、交互可行性、數(shù)據(jù)分析……這些曾屬于交互設(shè)計(jì)師的職責(zé)，已普遍的出現(xiàn)在UI設(shè)計(jì)師的必備技能中。

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

二、UI 設(shè)計(jì)師該如何學(xué)習(xí)交互呢？

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

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

這其中最大的轉(zhuǎn)變就是：將自己從"站在畫面美觀的角度上"思考問題，轉(zhuǎn)變?yōu)?quot;站在用戶的角度上"去思考問題（也許我之前是個不懂設(shè)計(jì)的美工）。

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

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

我在上移了 16px 之后依然被要求不夠，"繼續(xù)上移，再上移！"

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

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

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

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

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

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

二來，則是因?yàn)楦魑环治鲞^大場景的能力可能不足，直接上手反倒容易短期內(nèi)沒有產(chǎn)出，影響學(xué)習(xí)的情緒……

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

① 工具

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

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

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

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

② 控件

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

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

a. 熟記組件的使用場景

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

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

b. 各端組件不要混用

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

以加載方式為例：web 端常見的分頁加載就不適合出現(xiàn)在移動端，移動端主打的輕量化操作體驗(yàn)，多以滾動&點(diǎn)擊的方式觸發(fā)加載。

③ 設(shè)計(jì)原則

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

對于交互設(shè)計(jì)七大定律，想必大家多多少少都有了解：格式塔原理、7±2 法則、席克定律、費(fèi)茨定律、奧卡姆剃刀原理、復(fù)雜性守恒定律等。

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

以費(fèi)茨定律舉例：

帶入這個定律去看下面的實(shí)際方案：

詳情頁面"返回"按鈕究竟擺在哪里，比較合適呢？

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

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

溫馨提示：

其實(shí)這些交互的定律就如同我們 UI 的設(shè)計(jì)規(guī)則一樣，可以在做設(shè)計(jì)的時候去參考，卻不能照本宣科，脫離實(shí)際場景。以免出現(xiàn)筆者前文中"一味追求規(guī)范，而忽略用戶痛點(diǎn)"的教訓(xùn)。

3. 強(qiáng)化篇：如何做出好用的功能？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

"賦能業(yè)務(wù)"是設(shè)計(jì)師工作中最重要的一點(diǎn)，相信這個詞在大家的績效匯報中經(jīng)?？吹?。

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

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

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

1. 思考自身設(shè)計(jì)，拆分設(shè)計(jì)任務(wù)
2. 了解項(xiàng)目組其他崗位成員的拆分任務(wù)，找準(zhǔn)發(fā)力點(diǎn)，向下拆分

舉個例子，一個證件審核后臺的案例：

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

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

第一步，設(shè)計(jì)師團(tuán)隊(duì)從設(shè)計(jì)出發(fā)，拆分設(shè)計(jì)任務(wù)：

1. 去調(diào)研客服人員審核流程，做操作步驟精簡提效；
2. 再去調(diào)研投訴用戶的心理，增加審核進(jìn)度反饋功能，緩解用戶焦躁情緒；

然而，這些體驗(yàn)層級的優(yōu)化雖有奏效，卻很難擔(dān)起降低 80%投訴率的大額目標(biāo)。

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

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

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

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

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

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

尾聲

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

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

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

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

總而言之一句話，學(xué)習(xí)和提升是自己的事情，預(yù)祝各位成功！

作者：網(wǎng)易UEDC