起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門(mén)專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)BOSS：我要招一個(gè)懂交互的UI設(shè)計(jì)師
如今，對(duì)于設(shè)計(jì)師的要求越來(lái)越趨于綜合化，用戶體驗(yàn)、交互可行性、數(shù)據(jù)分析……這些曾屬于交互設(shè)計(jì)師的職責(zé)，已普遍地出現(xiàn)在UI設(shè)計(jì)師的必備技能中。為了滿足互聯(lián)網(wǎng)市場(chǎng)的需求，UI設(shè)計(jì)師要如何學(xué)習(xí)交互呢？一起來(lái)學(xué)習(xí)一下吧。
Part 1 為什么UI設(shè)計(jì)師要懂交互？
近幾年的互聯(lián)網(wǎng)市場(chǎng)，有不少公司提出了“全鏈路設(shè)計(jì)師”、“用戶體驗(yàn)設(shè)計(jì)師”的說(shuō)法，合并交互與UI崗，一時(shí)間眾說(shuō)紛紜：有人說(shuō)是高要求，有人則說(shuō)這是一場(chǎng)變相的“人力壓縮”。
其實(shí)，設(shè)計(jì)師作為一個(gè)高度復(fù)合型的崗位，雖有UI、交互、產(chǎn)品設(shè)計(jì)等細(xì)分，但無(wú)論是哪個(gè)細(xì)分崗位，都需要對(duì)業(yè)務(wù)、場(chǎng)景、用戶、技術(shù)實(shí)現(xiàn)有所掌握，才能給出最佳的設(shè)計(jì)方案。
高度競(jìng)爭(zhēng)的市場(chǎng)環(huán)境下，單純的“美化產(chǎn)品原型稿”，早已喪失了獲得高回報(bào)工作的可能性。因此，才會(huì)對(duì)設(shè)計(jì)師的要求越來(lái)越趨于綜合化。放眼如今的UI設(shè)計(jì)師招聘描述：用戶體驗(yàn)、交互可行性、數(shù)據(jù)分析……這些曾屬于交互設(shè)計(jì)師的職責(zé)，已普遍地出現(xiàn)在UI設(shè)計(jì)師的必備技能中。
至此，我們可以危言聳聽(tīng)地說(shuō)一句：“單一的UI設(shè)計(jì)已經(jīng)逐漸滿足不了互聯(lián)網(wǎng)市場(chǎng)的需求”；但也正因?yàn)槿绱耍覀儾乓S富起自己的武器庫(kù)，去創(chuàng)作更大的價(jià)值……
Part 2 UI設(shè)計(jì)師該如何學(xué)習(xí)交互呢？
1. 啟蒙篇：站在用戶的角度上思考問(wèn)題
筆者曾經(jīng)也是一位UI設(shè)計(jì)師，在工作中由于項(xiàng)目從C端逐漸偏向B端，工作重心也就需要從視覺(jué)傾向于產(chǎn)品邏輯、交互體驗(yàn)上了。崗位名稱從“UI設(shè)計(jì)師”到“用戶體驗(yàn)設(shè)計(jì)師”再到“交互設(shè)計(jì)師”。
這其中最大的轉(zhuǎn)變就是：將自己從“站在畫(huà)面美觀的角度上”思考問(wèn)題，轉(zhuǎn)變?yōu)椤罢驹谟脩舻慕嵌壬稀比ニ伎紗?wèn)題（??也許我之前是個(gè)不懂設(shè)計(jì)的美工）。
舉個(gè)簡(jiǎn)單的例子，之前做一個(gè)叉車工使用的PDA把槍界面：
現(xiàn)場(chǎng)實(shí)施人員給我?guī)?lái)一個(gè)小需求，為避免叉車工在操作的時(shí)候誤觸，需要把底部的操作按鈕向上移；
我在上移了16px之后依然被要求不夠，“繼續(xù)上移，再上移！”
站在設(shè)計(jì)規(guī)范的角度上，我與實(shí)施人員幾番battle之下……他發(fā)給我一張現(xiàn)場(chǎng)叉車工人的手的照片，我這才明白這么做的理由：
長(zhǎng)期的重活導(dǎo)致他們的手骨節(jié)粗大；再加上在搬貨途中使用PDA的抖動(dòng)性增強(qiáng)，使他們的操作誤區(qū)比普通人大了許多。
在了解用戶與場(chǎng)景之后，再看向那個(gè)PDA界面操作按鈕下大片的空白，瞬間顯得合理了……
2. 基礎(chǔ)篇：如何畫(huà)出合理的界面？
首先，筆者建議大家可以結(jié)合自身項(xiàng)目，從基礎(chǔ)層面開(kāi)始學(xué)習(xí)，由小至大、由簡(jiǎn)入繁。
一來(lái)，是因?yàn)轫?xiàng)目流程中原本崗位配合本就嚴(yán)絲合縫，要么是已有交互、要么是產(chǎn)品經(jīng)理產(chǎn)出交互原型稿，可能并不會(huì)給你很大的試錯(cuò)空間；
二來(lái)，則是因?yàn)楦魑环治鲞^(guò)大場(chǎng)景的能力可能不足，直接上手反倒容易短期內(nèi)沒(méi)有產(chǎn)出，影響學(xué)習(xí)的情緒……
基礎(chǔ)內(nèi)容主要包括三個(gè)部分：工具、控件、設(shè)計(jì)原則。
1）工具
這里會(huì)有很多UI童鞋問(wèn)的一個(gè)問(wèn)題就是：我需要學(xué)習(xí)Axure軟件嗎？
個(gè)人建議：Axure可以但沒(méi)必要, 反正我現(xiàn)在沒(méi)用到。各位既然能夠畫(huà)出精美的高保真效果圖，那么低保真的交互稿還畫(huà)不出來(lái)嗎？
工具如何并不重要，如今用sketch、figma畫(huà)原型的交互設(shè)計(jì)師很多，而且這樣更方便與視覺(jué)同學(xué)之間的產(chǎn)出物轉(zhuǎn)化。
所以大家倒不必將過(guò)多的時(shí)間精力放在軟件上，別讓軟件成為學(xué)習(xí)路上的第一個(gè)攔路虎。
2）控件
IOS、Android、MacOS、Windows各端、各平臺(tái)的設(shè)計(jì)規(guī)范&控件是設(shè)計(jì)的基礎(chǔ)，無(wú)論你是UI還是交互，都應(yīng)該熟練使用各個(gè)平臺(tái)、系統(tǒng)的組件使用場(chǎng)景。
只是UI與交互的側(cè)重點(diǎn)可能不一樣, 很多UI設(shè)計(jì)師過(guò)分注重組件的樣式，而忽略了它們的用戶使用場(chǎng)景。所以組件究竟該如何學(xué)習(xí)？
①熟記組件的使用場(chǎng)景
這個(gè)組件在什么情況下會(huì)用到？只有熟記使用場(chǎng)景，才能在需求到手時(shí)，快速實(shí)現(xiàn)功能。
這些內(nèi)容在各組件共享平臺(tái)的使用指南中都有詳細(xì)介紹，以element為例：基礎(chǔ)用法、相似組件區(qū)別都有標(biāo)明（如下圖）。
②各端組件不要混用
不同端的同種功能組件會(huì)有很大的操作區(qū)別，比如：濫用移動(dòng)端與PC端之間的組件，就會(huì)影響到用戶的體驗(yàn)。
以加載方式為例：web端常見(jiàn)的分頁(yè)加載就不適合出現(xiàn)在移動(dòng)端，移動(dòng)端主打的輕量化操作體驗(yàn)，多以滾動(dòng)&點(diǎn)擊的方式觸發(fā)加載。
3）設(shè)計(jì)原則
如何畫(huà)出一張合理的界面布局？那么你一定離不開(kāi)交互設(shè)計(jì)的七大定律。
對(duì)于交互設(shè)計(jì)七大定律，想必大家多多少少都有了解：格式塔原理、網(wǎng)格系統(tǒng)、7±2法則、席克定律、費(fèi)茨定律、奧卡姆剃刀原理、復(fù)雜性守恒定律。
以上定律的詳細(xì)定義，筆者在此就不一一摘抄了，想要知道的童鞋可以上網(wǎng)搜一搜。下面我具體只講我是如何學(xué)習(xí)這些定律的，那就是：多看案例！看得多了，自然就會(huì)用了。
以費(fèi)茨定律舉例：
帶入這個(gè)定律去看下面的實(shí)際方案：詳情頁(yè)面“返回”按鈕究竟擺在哪里，比較合適呢？
我們選取了幾個(gè)app詳情頁(yè)面的查看，最常見(jiàn)的兩個(gè)樣式，左上角VS左下角，那么哪個(gè)方案操作更便捷呢？
帶入用戶手指操作的場(chǎng)景，如果是雙手操作，那么兩個(gè)方案區(qū)別不大；但如果是單手操作，通過(guò)單手拇指觸屏的操作熱力圖來(lái)看，左上角的返回按鈕屬于“難觸及區(qū)域”，而左下角則是“操作便捷區(qū)域”，帶入費(fèi)茨定律，我們就能得出左下角的返回按鈕操作更快捷！
溫馨提示：
其實(shí)這些交互的定律就如同我們UI的設(shè)計(jì)規(guī)則一樣，可以在做設(shè)計(jì)的時(shí)候去參考，卻不能照本宣科，脫離實(shí)際場(chǎng)景。以免出現(xiàn)筆者前文中“一味追求規(guī)范，而忽略用戶痛點(diǎn)”的教訓(xùn)。
3. 強(qiáng)化篇：如何做出好用的功能？
一個(gè)好用功能的前提，得是一個(gè)能用的功能。所以我們要先讓流程閉環(huán)，功能跑起來(lái)；然后再做優(yōu)化，逐步完善……
1）先做出一個(gè)能用的功能：流程閉環(huán)
我們?cè)谧雒恳粋€(gè)版本需求時(shí)，產(chǎn)品經(jīng)理都會(huì)給到一條功能的業(yè)務(wù)流程，而這條業(yè)務(wù)流程是沒(méi)有辦法直接轉(zhuǎn)化成頁(yè)面的。設(shè)計(jì)師們需要將“業(yè)務(wù)流程”轉(zhuǎn)化為“用戶操作步驟”，再轉(zhuǎn)化為“界面”。
舉一個(gè)最經(jīng)典的審批流程的例子。
業(yè)務(wù)流程大家都很熟悉：發(fā)起-審批-結(jié)束；其中包括了兩類用戶：發(fā)起人&審批人。以發(fā)起人為例，向下拆分他的用戶操作步驟；再?gòu)牟僮鞑襟E中推導(dǎo)出界面（如下圖）：
2）讓功能變的好用：深挖用戶場(chǎng)景
當(dāng)閉環(huán)的操作流程已經(jīng)搭建完成，我們就需要考慮，如何讓它變得更加好用了。
這一環(huán)節(jié)我們需要深度挖掘用戶場(chǎng)景：弄清楚“誰(shuí)？在什么情況下？要做什么？”，然后與用戶共情，帶入場(chǎng)景去思考問(wèn)題……
繼續(xù)以發(fā)起審批為例：
在這一過(guò)程中，審批發(fā)起人（用戶）+在提交了審批之后（場(chǎng)景）+想要知道審批的結(jié)果（目標(biāo)）。
帶入用戶的角度，去思考這個(gè)場(chǎng)景下，他們的心理活動(dòng)，他們會(huì)有什么想法？再以此為需求，逐步完善我們的功能：
這里可能又有童鞋發(fā)問(wèn)了：我沒(méi)有這么強(qiáng)的共情能力，想不到這么多用戶的可能性怎么辦？
那么，交互設(shè)計(jì)師的核心技巧：用戶調(diào)研、可用性測(cè)試、數(shù)據(jù)埋點(diǎn)、競(jìng)品分析……就可以了解一下了！通過(guò)這些方法，就能又快、又準(zhǔn)的幫你做出一個(gè)好用的功能。
4. 進(jìn)階篇：設(shè)計(jì)賦能業(yè)務(wù)（績(jī)效加分項(xiàng)）
“賦能業(yè)務(wù)”是設(shè)計(jì)師工作中最重要的一點(diǎn)，相信這個(gè)詞在大家的績(jī)效匯報(bào)中經(jīng)?？吹?。
如果說(shuō)不懂“用戶體驗(yàn)”的UI只是一個(gè)畫(huà)圖機(jī)器的話，那么不懂“賦能業(yè)務(wù)”的交互則是一個(gè)畫(huà)原型圖的機(jī)器。
1）如何賦能業(yè)務(wù)？
首先要弄清你的業(yè)務(wù)目標(biāo)是什么？然后再圍繞著業(yè)務(wù)目標(biāo)去細(xì)化拆分：
- 思考自身設(shè)計(jì)，拆分設(shè)計(jì)任務(wù)
- 了解項(xiàng)目組其他崗位成員的拆分任務(wù)，找準(zhǔn)發(fā)力點(diǎn)，向下拆分
舉個(gè)例子，一個(gè)證件審核后臺(tái)的案例：
審核后臺(tái)的客服人力不足，導(dǎo)致工單積壓，用戶頻頻電話投訴催辦。業(yè)務(wù)方要求在一個(gè)月內(nèi)，在不增加客服人員編制的情況下，將催辦類投訴工單降低80%！
收到這個(gè)業(yè)務(wù)目標(biāo)后，項(xiàng)目組內(nèi)全體成員都在針對(duì)業(yè)務(wù)目標(biāo)思考方案、制定各自的任務(wù)。
第一步，設(shè)計(jì)師團(tuán)隊(duì)從設(shè)計(jì)出發(fā)，拆分設(shè)計(jì)任務(wù)：
- 去調(diào)研客服人員審核流程，做操作步驟精簡(jiǎn)提效；
- 再去調(diào)研投訴用戶的心理，增加審核進(jìn)度反饋功能，緩解用戶焦躁情緒；
然而，這些體驗(yàn)層級(jí)的優(yōu)化雖有奏效，卻很難擔(dān)起降低80%投訴率的大額目標(biāo)。
第二步，理清團(tuán)隊(duì)其他崗位的任務(wù)內(nèi)容及策略，向下拆分：
通過(guò)溝通，大數(shù)據(jù)團(tuán)隊(duì)針對(duì)該目標(biāo)提出了通過(guò)OCR識(shí)別技術(shù)（光學(xué)字符識(shí)別技術(shù)：通過(guò)掃描將印刷文字轉(zhuǎn)為圖片，再利用文字識(shí)別技術(shù)轉(zhuǎn)化為可使用的文字輸入），智能審核證件的方案。然而卻因?yàn)镺CR識(shí)別錯(cuò)誤率太高，導(dǎo)致近一半的工單仍然需要人工審核。
那么此時(shí)，設(shè)計(jì)師就可以在提升OCR識(shí)別成功率的目標(biāo)下，向下拆分自己的設(shè)計(jì)目標(biāo)了。
去調(diào)研OCR識(shí)別率低的基礎(chǔ)情況：除去技術(shù)層面的問(wèn)題，用戶上傳照片不規(guī)范、傾斜、反光、重要信息未拍全等都會(huì)導(dǎo)致識(shí)別失敗。
那么對(duì)于這些問(wèn)題，上傳審核步驟的指引優(yōu)化就是關(guān)鍵所在！
最后，團(tuán)隊(duì)一起實(shí)現(xiàn)了降低80%投訴率的大目標(biāo)，而設(shè)計(jì)師在項(xiàng)目過(guò)程中，既解決了用戶遇到的問(wèn)題、又解決了團(tuán)隊(duì)遇到的問(wèn)題，做到了真正的賦能業(yè)務(wù)！
尾聲
漫長(zhǎng)的文章終于接近尾聲了……
最后一句臨別贈(zèng)言送給大家（也是筆者在學(xué)習(xí)交互的時(shí)候，一位老師送給我的）：
不必太過(guò)死磕各個(gè)崗位的工作范圍，沒(méi)有哪個(gè)行業(yè)內(nèi)的專家能夠給交互、視覺(jué)、以及任何一份崗位的工作范圍去下定義。百度百科上能搜到的所有針對(duì)崗位的描述，也都只是包括但不限于。
所以，不必被他人設(shè)限，也不必給自己設(shè)限……
總而言之一句話，學(xué)習(xí)和提升是自己的事情，預(yù)祝各位成功！
文章推薦：
《交互設(shè)計(jì)的價(jià)值是什么？》
《入門(mén)交互設(shè)計(jì)的4個(gè)步驟》
《桌面端和移動(dòng)端的設(shè)計(jì)差異性》
《品牌基因如何延續(xù) | 網(wǎng)易“易”系列品牌及周邊設(shè)計(jì)》
《網(wǎng)易嚴(yán)選插畫(huà)風(fēng)格專題設(shè)計(jì)五部曲》
《圍繞深層次情感訴求的反饋設(shè)計(jì)》
《借助共情力為用戶研究“降噪”》
《B端產(chǎn)品的交互設(shè)計(jì)流程探索——樂(lè)高設(shè)計(jì)法和用戶體驗(yàn)的二次提升》
作者：王月明
來(lái)源公眾號(hào)：網(wǎng)易UEDC，網(wǎng)易用戶體驗(yàn)設(shè)計(jì)中心
本文來(lái)源于人人都是產(chǎn)品經(jīng)理合作媒體@網(wǎng)易UEDC，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自 Unsplash，基于CC0協(xié)議。
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
關(guān)于操作熱點(diǎn)圖的理解有問(wèn)題，因?yàn)槟鞘怯沂譄狳c(diǎn)圖，而事實(shí)上，現(xiàn)在左右手基本是五五開(kāi)。所以不能拿著右手的熱點(diǎn)圖作為案例。
最后一個(gè)例子，好像淡化了產(chǎn)品經(jīng)理的存在，項(xiàng)目中沒(méi)有產(chǎn)品嗎
怎么辦，交互設(shè)計(jì)給我的感覺(jué)就是，好像設(shè)計(jì)到現(xiàn)在到局限了？啊，沒(méi)有，原來(lái)還可以這樣，優(yōu)化優(yōu)化再優(yōu)化，越來(lái)越好。