今天微信收到一個朋友的提問，朋友是做 UI 設計的，新入職的公司在要求做 UI 的基礎上同時要他兼任交互的崗位，于是他提出了以下問題：

相信很多剛接觸交互的同學，或者轉型的同學都會有這種疑問：交互設計師常常掛在嘴邊，文章也都看過不少，好像自己都知道，但是等真正上手自己做的時候就有點手忙腳亂，不知道從何做起，優先順序是什么。

總結起來就幾個問題：

1. 交互設計師需要做什么？
2. 交互設計師如何去做？
3. 交互設計師如何進行提升？

交互設計師需要做什么

首先，這篇文章不會從各種定義概念來分析交互設計師是什么，怎么做，只會通過一些簡單的例子來讓你明白交互設計師需要做一些什么樣的工作。一般來說大多數初創公司或者中小型公司都不會設定交互設計師這個崗位，大多數要么是產品經理兼任，要么就是 UI 設計師兼任，而我朋友就是屬于后者。

回到主旨，交互設計師到底需要做一些什么呢？

——針對PC端和移動端的用戶操作跳轉邏輯。

當我們通過鼠標或者手指操作頁面的時候，頁面將會跳轉到新頁面，或者點擊頁面某個元素按鈕跳轉到新頁面還是彈窗顯示內容，點擊返回鍵是回到什么頁面，這些頁面與頁面之前的跳轉邏輯，需要交互設計師考慮清楚。

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

當我們看過一些設計規范之后，可以發現最簡單的元素「按鈕」一般會分為幾種狀態：默認狀態、鼠標浮動狀態、鼠標點擊狀態、按鈕不可用狀態，這些就是最簡單的交互樣式：通過顏色進行區分狀態，用戶獲悉自己操作并進行后續操作。

這些不同樣式狀態一般用戶是不會留意到的，而讓用戶“無感”就是交互設計師最穩妥的處理方式，“無感”就是符合常識、符合邏輯，一旦出現不符合，用戶可能就會產生一種怪異感，雖然他說不上來到底哪里奇怪。

另外還嘗試將一些重點功能通過增加展示區域，或者通過顏色凸顯等方式來進行處理，從而實現需求或者產品的訴求，這也是交互設計師的考慮方向。

——執行操作后的用戶反饋。

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

當用戶登錄失敗，我們必須明確告知用戶錯誤原因，否則用戶很可能因為第一步就對產品產生一種抵觸心理，而登錄失敗錯誤無非就是賬號或者密碼錯誤。

當登錄錯誤提示：賬號或者密碼錯誤。錯誤提示不明確，用戶不清楚到底是賬號錯誤還是密碼錯誤，需要嘗試各種賬號+密碼組合，較為低效。我們可以進行先后判斷，當賬號錯誤時候優先提示賬號錯誤，正確后再對密碼進行校驗即可，但是也會存在安全風險問題。

當密碼錯誤提示：密碼錯誤，請輸入正確密碼。用戶只知道密碼錯誤，但是實際上也許當初注冊的時候有要求大寫字母+小寫字母+數字的組合方式，我們是否可以提醒用戶密碼要求呢？不一定，當存在安全性風險的時候我們可以通過常用的忘記密碼方式讓用戶進行重置，反之我們直接告知用戶：密碼錯誤，需符合以下規則：XXXX。

另外還存在密碼多次輸入錯誤，即會識別風險進行凍結，解凍方式是什么，等等很多類似問題。總之，必須保證每一步我們都要給到用戶反饋或者提示。

交互設計師如何去做

第一步，充分理解需求。

我們做的一切都是為了充分還原需求和功能，所以我們首先應該做的是拿到需求文檔，針對功能點和描述進行熟悉，熟悉的過程針對不懂的地方進行問題記錄，并且與產品經理進行溝通，這樣才能保證設計出來的產品不存在太大偏差。

當然，很多公司產品經理在需求階段就會拉著團隊進行需求評審或者講解，這也是一個很好的溝通熟悉過程，在項目初期達成需求一致性，當出現問題能夠第一時間找到原因。

第二步，針對需求進行頁面跳轉邏輯梳理。

當產品經理能直接給到線框圖，這種情況對交互設計師是最輕松的，只需要結合需求和線框圖進行頁面邏輯梳理，梳理完畢與產品進行溝通確認即可。

當產品經理只給需求，交互設計師就還需要進行線框圖的設計和頁面邏輯梳理，這個時候建議先進行主頁面邏輯梳理，再進行頁面線框圖具體元素設計展示，這個過程交互設計師承擔的任務更重，而且需要更多溝通來保證線框圖的準確性。

第三步，先主后次細化頁面元素

完成頁面梳理后，就要開始進行頁面元素的功能設計了，這個過程建議進行“先主后次”的順序進行。

主，即結合所有功能，找到共同點，對主頁面的元素進行合理排布，保證一致性和合理性。

次，即當主頁面元素確定后，針對每一個元素進行分析和設計。例如常見的 B 端產品，存在輸入框、按鈕、表格、導航、步驟條、對話框等待，每一項元素或者組件都存在不同的狀態和樣式，我們需要熟悉之后才能進行設計。

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

△ 餓了么組件網站

另外，知道有哪些構成元素后，我們還可以針對產品用的比較多的元素組件搜索相關文章，挑選幾篇進行熟悉，這樣已經可以對產品有著更清晰的設計。

第四步，討論修改。

當前幾步完成后，已經可以拿出設計成型的產品交互稿進行討論了，討論分兩步，一是與產品經理的討論，二是與產品團隊的討論。

與產品經理討論，主要是分析交互方式和邏輯是否符合他的預期，針對不一致的進行討論闡述各自邏輯，達成共識后進行修改。

與產品團隊討論，更多的是進行一個查缺補漏作用。一個團隊一般包含前端、后端、交互、UI、測試等等，也許在交互與產品經理達成一致后，存在開發實現難度較高，或者從測試角度發現不完善的地方，能夠通過團隊討論的方式進行評估和補充，避免后期發現問題后進行推脫。

交互設計師如何提升

優秀的人善于總結，這句話適用所有行業，所以最好提升的方式也是總結。

在前文的每一個階段，每一個遇到的問題，每一個解決方式，都可以是一篇文章，這就是總結。

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

很多優秀的內容產出者，都是結合自己工作進行內容輸出，而這些內容，往往比那些理論書籍更重要，因為這才是實際工作會遇見的問題，也可以從他們身上學到優秀的人解決問題的方式，而未來的你們就是此刻的他們。

歡迎關注作者微信公眾號：「零交互」