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

3 評論 8295 瀏覽 79 收藏 17 分鐘

如今,對于設(shè)計師的要求越來越趨于綜合化,用戶體驗、交互可行性、數(shù)據(jù)分析……這些曾屬于交互設(shè)計師的職責(zé),已普遍地出現(xiàn)在UI設(shè)計師的必備技能中。為了滿足互聯(lián)網(wǎng)市場的需求,UI設(shè)計師要如何學(xué)習(xí)交互呢?一起來學(xué)習(xí)一下吧。

Part 1 為什么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é),已普遍地出現(xiàn)在UI設(shè)計師的必備技能中。

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

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

Part 2 UI設(shè)計師該如何學(xué)習(xí)交互呢?

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

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

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

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

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

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

我在上移了16px之后依然被要求不夠,“繼續(xù)上移,再上移!”

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

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

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

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

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

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

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

一來,是因為項目流程中原本崗位配合本就嚴(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í)路上的第一個攔路虎。

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

2)控件

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

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

①熟記組件的使用場景

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

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

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

②各端組件不要混用

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

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

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

3)設(shè)計原則

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

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

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

以費茨定律舉例:

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

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

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

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

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

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

溫馨提示:

其實這些交互的定律就如同我們UI的設(shè)計規(guī)則一樣,可以在做設(shè)計的時候去參考,卻不能照本宣科,脫離實際場景。以免出現(xiàn)筆者前文中“一味追求規(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)化為“界面”。

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

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

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

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

2)讓功能變的好用:深挖用戶場景

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

舉個例子,一個證件審核后臺的案例:

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

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

第一步,設(shè)計師團隊從設(shè)計出發(fā),拆分設(shè)計任務(wù):

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

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

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

第二步,理清團隊其他崗位的任務(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)鍵所在!

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

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

尾聲

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

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

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

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

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

 

文章推薦:

《交互設(shè)計的價值是什么?》

《入門交互設(shè)計的4個步驟》

《桌面端和移動端的設(shè)計差異性》

《品牌基因如何延續(xù) | 網(wǎng)易“易”系列品牌及周邊設(shè)計》

《網(wǎng)易嚴(yán)選插畫風(fēng)格專題設(shè)計五部曲》

《圍繞深層次情感訴求的反饋設(shè)計》

《借助共情力為用戶研究“降噪”》

《B端產(chǎn)品的交互設(shè)計流程探索——樂高設(shè)計法和用戶體驗的二次提升》

作者:王月明

來源公眾號:網(wǎng)易UEDC,網(wǎng)易用戶體驗設(shè)計中心

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@網(wǎng)易UEDC,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自 Unsplash,基于CC0協(xié)議。

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 關(guān)于操作熱點圖的理解有問題,因為那是右手熱點圖,而事實上,現(xiàn)在左右手基本是五五開。所以不能拿著右手的熱點圖作為案例。

    來自澳大利亞 回復(fù)
  2. 最后一個例子,好像淡化了產(chǎn)品經(jīng)理的存在,項目中沒有產(chǎn)品嗎

    來自浙江 回復(fù)
  3. 怎么辦,交互設(shè)計給我的感覺就是,好像設(shè)計到現(xiàn)在到局限了?啊,沒有,原來還可以這樣,優(yōu)化優(yōu)化再優(yōu)化,越來越好。

    來自山西 回復(fù)