今天微信收到一個(gè)朋友的提問(wèn)，朋友是做 UI 設(shè)計(jì)的，新入職的公司在要求做 UI 的基礎(chǔ)上同時(shí)要他兼任交互的崗位，于是他提出了以下問(wèn)題：

相信很多剛接觸交互的同學(xué)，或者轉(zhuǎn)型的同學(xué)都會(huì)有這種疑問(wèn)：交互設(shè)計(jì)師常常掛在嘴邊，文章也都看過(guò)不少，好像自己都知道，但是等真正上手自己做的時(shí)候就有點(diǎn)手忙腳亂，不知道從何做起，優(yōu)先順序是什么。

總結(jié)起來(lái)就幾個(gè)問(wèn)題：

1. 交互設(shè)計(jì)師需要做什么？
2. 交互設(shè)計(jì)師如何去做？
3. 交互設(shè)計(jì)師如何進(jìn)行提升？

交互設(shè)計(jì)師需要做什么

首先，這篇文章不會(huì)從各種定義概念來(lái)分析交互設(shè)計(jì)師是什么，怎么做，只會(huì)通過(guò)一些簡(jiǎn)單的例子來(lái)讓你明白交互設(shè)計(jì)師需要做一些什么樣的工作。一般來(lái)說(shuō)大多數(shù)初創(chuàng)公司或者中小型公司都不會(huì)設(shè)定交互設(shè)計(jì)師這個(gè)崗位，大多數(shù)要么是產(chǎn)品經(jīng)理兼任，要么就是 UI 設(shè)計(jì)師兼任，而我朋友就是屬于后者。

回到主旨，交互設(shè)計(jì)師到底需要做一些什么呢？

——針對(duì)PC端和移動(dòng)端的用戶操作跳轉(zhuǎn)邏輯。

當(dāng)我們通過(guò)鼠標(biāo)或者手指操作頁(yè)面的時(shí)候，頁(yè)面將會(huì)跳轉(zhuǎn)到新頁(yè)面，或者點(diǎn)擊頁(yè)面某個(gè)元素按鈕跳轉(zhuǎn)到新頁(yè)面還是彈窗顯示內(nèi)容，點(diǎn)擊返回鍵是回到什么頁(yè)面，這些頁(yè)面與頁(yè)面之前的跳轉(zhuǎn)邏輯，需要交互設(shè)計(jì)師考慮清楚。

——通過(guò)外觀（顏色、外觀、尺寸）表達(dá)功能，并告知用戶可能的操作。

當(dāng)我們看過(guò)一些設(shè)計(jì)規(guī)范之后，可以發(fā)現(xiàn)最簡(jiǎn)單的元素「按鈕」一般會(huì)分為幾種狀態(tài)：默認(rèn)狀態(tài)、鼠標(biāo)浮動(dòng)狀態(tài)、鼠標(biāo)點(diǎn)擊狀態(tài)、按鈕不可用狀態(tài)，這些就是最簡(jiǎn)單的交互樣式：通過(guò)顏色進(jìn)行區(qū)分狀態(tài)，用戶獲悉自己操作并進(jìn)行后續(xù)操作。

這些不同樣式狀態(tài)一般用戶是不會(huì)留意到的，而讓用戶“無(wú)感”就是交互設(shè)計(jì)師最穩(wěn)妥的處理方式，“無(wú)感”就是符合常識(shí)、符合邏輯，一旦出現(xiàn)不符合，用戶可能就會(huì)產(chǎn)生一種怪異感，雖然他說(shuō)不上來(lái)到底哪里奇怪。

另外還嘗試將一些重點(diǎn)功能通過(guò)增加展示區(qū)域，或者通過(guò)顏色凸顯等方式來(lái)進(jìn)行處理，從而實(shí)現(xiàn)需求或者產(chǎn)品的訴求，這也是交互設(shè)計(jì)師的考慮方向。

——執(zhí)行操作后的用戶反饋。

既然用戶進(jìn)行操作，同步的我們就要給到用戶反饋，這樣用戶才能明確獲悉自己的操作結(jié)果是什么，是成功了還是失敗了？如果是失敗了，為什么失敗呢？這些就需要交互設(shè)計(jì)師來(lái)進(jìn)行考慮，同樣拿「登錄」功能進(jìn)行舉例。

當(dāng)用戶登錄失敗，我們必須明確告知用戶錯(cuò)誤原因，否則用戶很可能因?yàn)榈谝徊骄蛯?duì)產(chǎn)品產(chǎn)生一種抵觸心理，而登錄失敗錯(cuò)誤無(wú)非就是賬號(hào)或者密碼錯(cuò)誤。

當(dāng)?shù)卿涘e(cuò)誤提示：賬號(hào)或者密碼錯(cuò)誤。錯(cuò)誤提示不明確，用戶不清楚到底是賬號(hào)錯(cuò)誤還是密碼錯(cuò)誤，需要嘗試各種賬號(hào)+密碼組合，較為低效。我們可以進(jìn)行先后判斷，當(dāng)賬號(hào)錯(cuò)誤時(shí)候優(yōu)先提示賬號(hào)錯(cuò)誤，正確后再對(duì)密碼進(jìn)行校驗(yàn)即可，但是也會(huì)存在安全風(fēng)險(xiǎn)問(wèn)題。

當(dāng)密碼錯(cuò)誤提示：密碼錯(cuò)誤，請(qǐng)輸入正確密碼。用戶只知道密碼錯(cuò)誤，但是實(shí)際上也許當(dāng)初注冊(cè)的時(shí)候有要求大寫(xiě)字母+小寫(xiě)字母+數(shù)字的組合方式，我們是否可以提醒用戶密碼要求呢？不一定，當(dāng)存在安全性風(fēng)險(xiǎn)的時(shí)候我們可以通過(guò)常用的忘記密碼方式讓用戶進(jìn)行重置，反之我們直接告知用戶：密碼錯(cuò)誤，需符合以下規(guī)則：XXXX。

另外還存在密碼多次輸入錯(cuò)誤，即會(huì)識(shí)別風(fēng)險(xiǎn)進(jìn)行凍結(jié)，解凍方式是什么，等等很多類(lèi)似問(wèn)題。總之，必須保證每一步我們都要給到用戶反饋或者提示。

交互設(shè)計(jì)師如何去做

第一步，充分理解需求。

我們做的一切都是為了充分還原需求和功能，所以我們首先應(yīng)該做的是拿到需求文檔，針對(duì)功能點(diǎn)和描述進(jìn)行熟悉，熟悉的過(guò)程針對(duì)不懂的地方進(jìn)行問(wèn)題記錄，并且與產(chǎn)品經(jīng)理進(jìn)行溝通，這樣才能保證設(shè)計(jì)出來(lái)的產(chǎn)品不存在太大偏差。

當(dāng)然，很多公司產(chǎn)品經(jīng)理在需求階段就會(huì)拉著團(tuán)隊(duì)進(jìn)行需求評(píng)審或者講解，這也是一個(gè)很好的溝通熟悉過(guò)程，在項(xiàng)目初期達(dá)成需求一致性，當(dāng)出現(xiàn)問(wèn)題能夠第一時(shí)間找到原因。

第二步，針對(duì)需求進(jìn)行頁(yè)面跳轉(zhuǎn)邏輯梳理。

當(dāng)產(chǎn)品經(jīng)理能直接給到線框圖，這種情況對(duì)交互設(shè)計(jì)師是最輕松的，只需要結(jié)合需求和線框圖進(jìn)行頁(yè)面邏輯梳理，梳理完畢與產(chǎn)品進(jìn)行溝通確認(rèn)即可。

當(dāng)產(chǎn)品經(jīng)理只給需求，交互設(shè)計(jì)師就還需要進(jìn)行線框圖的設(shè)計(jì)和頁(yè)面邏輯梳理，這個(gè)時(shí)候建議先進(jìn)行主頁(yè)面邏輯梳理，再進(jìn)行頁(yè)面線框圖具體元素設(shè)計(jì)展示，這個(gè)過(guò)程交互設(shè)計(jì)師承擔(dān)的任務(wù)更重，而且需要更多溝通來(lái)保證線框圖的準(zhǔn)確性。

第三步，先主后次細(xì)化頁(yè)面元素

完成頁(yè)面梳理后，就要開(kāi)始進(jìn)行頁(yè)面元素的功能設(shè)計(jì)了，這個(gè)過(guò)程建議進(jìn)行“先主后次”的順序進(jìn)行。

主，即結(jié)合所有功能，找到共同點(diǎn)，對(duì)主頁(yè)面的元素進(jìn)行合理排布，保證一致性和合理性。

次，即當(dāng)主頁(yè)面元素確定后，針對(duì)每一個(gè)元素進(jìn)行分析和設(shè)計(jì)。例如常見(jiàn)的 B 端產(chǎn)品，存在輸入框、按鈕、表格、導(dǎo)航、步驟條、對(duì)話框等待，每一項(xiàng)元素或者組件都存在不同的狀態(tài)和樣式，我們需要熟悉之后才能進(jìn)行設(shè)計(jì)。

那么如何熟悉呢？在我們不熟悉交互產(chǎn)品的時(shí)候，還是建議首先找一些前端組件網(wǎng)站，例如： https://element.eleme.cn/#/zh-CN/component/installation ，其他組件網(wǎng)站大同小異，我們可以知道一個(gè)網(wǎng)站組件分別有哪些，以及每一種組件的不同表現(xiàn)形式。

△ 餓了么組件網(wǎng)站

另外，知道有哪些構(gòu)成元素后，我們還可以針對(duì)產(chǎn)品用的比較多的元素組件搜索相關(guān)文章，挑選幾篇進(jìn)行熟悉，這樣已經(jīng)可以對(duì)產(chǎn)品有著更清晰的設(shè)計(jì)。

第四步，討論修改。

當(dāng)前幾步完成后，已經(jīng)可以拿出設(shè)計(jì)成型的產(chǎn)品交互稿進(jìn)行討論了，討論分兩步，一是與產(chǎn)品經(jīng)理的討論，二是與產(chǎn)品團(tuán)隊(duì)的討論。

與產(chǎn)品經(jīng)理討論，主要是分析交互方式和邏輯是否符合他的預(yù)期，針對(duì)不一致的進(jìn)行討論闡述各自邏輯，達(dá)成共識(shí)后進(jìn)行修改。

與產(chǎn)品團(tuán)隊(duì)討論，更多的是進(jìn)行一個(gè)查缺補(bǔ)漏作用。一個(gè)團(tuán)隊(duì)一般包含前端、后端、交互、UI、測(cè)試等等，也許在交互與產(chǎn)品經(jīng)理達(dá)成一致后，存在開(kāi)發(fā)實(shí)現(xiàn)難度較高，或者從測(cè)試角度發(fā)現(xiàn)不完善的地方，能夠通過(guò)團(tuán)隊(duì)討論的方式進(jìn)行評(píng)估和補(bǔ)充，避免后期發(fā)現(xiàn)問(wèn)題后進(jìn)行推脫。

交互設(shè)計(jì)師如何提升

優(yōu)秀的人善于總結(jié)，這句話適用所有行業(yè)，所以最好提升的方式也是總結(jié)。

在前文的每一個(gè)階段，每一個(gè)遇到的問(wèn)題，每一個(gè)解決方式，都可以是一篇文章，這就是總結(jié)。

我們常常覺(jué)得總結(jié)就是一小段話，寫(xiě)了也沒(méi)什么意義，其實(shí)并不是如此，在我們搜索按鈕、搜索表格的相關(guān)文章并且用于實(shí)際工作中的時(shí)候，這些都是源源不斷的素材， 一旦你能將問(wèn)題將解決方式形成自己的內(nèi)容，多年后回過(guò)頭看，你會(huì)發(fā)現(xiàn)這一切都是值得的。

很多優(yōu)秀的內(nèi)容產(chǎn)出者，都是結(jié)合自己工作進(jìn)行內(nèi)容輸出，而這些內(nèi)容，往往比那些理論書(shū)籍更重要，因?yàn)檫@才是實(shí)際工作會(huì)遇見(jiàn)的問(wèn)題，也可以從他們身上學(xué)到優(yōu)秀的人解決問(wèn)題的方式，而未來(lái)的你們就是此刻的他們。

歡迎關(guān)注作者微信公眾號(hào)：「零交互」