一、交互設計的基本說明

在 UI 設計師的工作中劃分了三種相關設計類型：界面設計，交互設計，體驗設計。其中，界面設計就是界面的視覺樣式設計，交互設計是設計功能的操作方式設計，體驗設計就是圍繞用戶體驗做改進的綜合設計。

先明確強調這三件事情都屬于 UI 設計師的本職工作，只不過當團隊變大以后需要細分工作職能才會拆解開，但不代表作為 UI 設計師只需要關注界面就可以忽略交互和體驗。就像一個大的廚房，會拆出宰殺、配菜、擺盤、站鍋的不同崗位，但不代表作為一個廚師只需要炒菜就認為其它工作不在你的職責范圍里。

而我們再進一步理解，什么是功能的操作方式？

比如我們要在瑞幸上點一杯 9.9 的打工人大力水去門店自提，從進入應用以后就要完成下面這些操作：

這種操作大家都很熟悉了對吧，感覺是打娘胎里就已經點上的互聯網產品使用技能。雖然已經用得很熟練，但不代表這些功能天生就該設計成這樣。操作的步驟是經過規劃和設計以后的結果，只不過大家用習慣了，就會忽略它的存在。

想要再深刻點的感受，就可以打開星巴克、喜茶、蜜雪等，完成一遍點單流程，你就會發現雖然做的是一件事，但是操作起來就是有差異，而這種操作的差異，就是交互設計細節上的差異。

在項目設計中，團隊無論如何都無法回避對交互的定義過程，因為沒有交互產品就沒辦法正常使用。如果產品非常簡單，交互方案照搬常規應用的方法就不會引起討論和注意，但當產品開始變復雜，功能變繁瑣以后，那么交互方案就必須擺到臺面上做認真的分析和規劃。

在專業的設計環境中，必然要先完成交互的方案，再開始視覺的設計。因為功能的操作方法是產品界面的骨架和地基，外立面設計成什么樣和地基打得好不好是兩回事。

所以前期就需要單獨完成交互的設計，而既然是設計就肯定要有產出物，交互相關的設計產出物包含三種內容：

之所以要畫原型，是因為畫原型是最快最便捷的。所有說項目沒時間不能畫原型一定要先出界面的說法，說到底就是你們認為交互不重要，不需要單獨花時間去處理。

對于復雜的操作而言，往往需要輸出多套方案做對比，選出最佳的那套。否則往往也會在第一套方案完成以后發現不理想，全部推翻了重做。這個時候你們要是先出設計了，那么這些設計稿也就大多作廢重來，這才叫真正的時間成本的浪費。

而畫交互原型又不是簡單畫出幾個界面的線框圖就結束了，單一界面的線框圖可以表示功能和流程的大致交互，但是還有很多細節是欠缺的，比如操作有不同的判斷、條件、結果，所以想要表達的完整還需要添加流程圖示意。

即使添加連線，很多背后的邏輯僅通過圖例也說不清，所以設計師就需要對這些信息用文字做補充，確保自己能記住，其他人可以看懂。而這些添加了連線和文本的交互說明，就可以理解成交互文檔。

交互文檔不是真要用文檔形式去表現的，只要能用圖文把你的交互方案、思路講明白的方式，都可以叫交互文檔。

這就是交互設計工作中主要要輸出的內容，也是任何 UI 設計師需要具備的基礎能力。掌握它們本身不算復雜，但看網上的各種分享或是相關書籍，反而解釋得很抽象。所以，下面我們就要再用個具體的案例來解釋交互方案的設計思路。

更多美團交互分析：

二、交互實例輸出的過程

這次我們要輸出的交互案例是美團的神搶手下單流程，相信不少同學沒少用這個功能叫外賣。

具體的原設計我們就不做分析了，直接分享從需求分析開始到交互設計輸出的過程。

首先我們要從業務層面上理解神搶手的邏輯，首先用戶進入神搶手模塊，查看神搶手包含的“商品”列表，選中自己想要的“商品”并做出規格篩選，完成支付即可完成一次完整的服務，可以用下面的圖例表示。

看起來和普通下單操作沒什么區別，但我們要重點理解神搶手內添加的看起來像“商品”的東西不是最終的商品本身，而是 —— 兌換券。

而兌換券還有個邏輯，即前置購買是個券包，里面可以是一個兌換券也可以是多個兌換券（類似兩張美式兌換券）。而一個兌換券下，又包含兩種情況：

1. 包含單一商品(SPU)，比如兌換雞腿堡、美式、豬腳飯
2. 包含多個固定商品(SPU)，比如作為套餐還包含雞腿堡、薯條、冰闊落
3. 包含多個可選商品(SPU)，比如奶茶飲品 3 選 2

而最終商品本身也不是完全固定的，因為還有部分商品包含屬性的選擇，比如咖啡選冷還是熱，加糖還是其它小料等。

理解完我們就可以做一個表格，從左到右就是它的級別，下方則放它的狀態（粗略總結，不代表完整的真實情況）：

以上的分析就是業務分析，了解完業務，然后還要再分析產品的其它需求（暫時略過），然后就可以開始做方案的輸出。

首先流程包含 4 個核心頁面代表 4 個核心交互節點，分別是神搶手主頁，兌換券詳情頁，兌換設置頁，付款結算頁。可以先將他們輸出出來：

這個流程中，最核心的組件優化就是商品篩選模塊，不管是一個券包下包含幾個兌換券，兌換券內有幾個商品，還是商品可選，都支持使用這個組件來完成的方案。

感興趣的同學可以去線上操作一遍對比原方案應對三個不同狀態下的交互方式：

大致確定好核心的頁面，就可以先補充剩余的其它主要頁面，跑通大致的操作流程。

在我的習慣中，做交互方案一定是先框架后細節，完成主要頁面的原型并不代表完成了交互細節。所以接下來就要對細節做補充，也就是各個頁面、組件不同的狀態和交互反饋。

還是以這個兌換券商品篩選組件來說，它包含了下面這些條件：

1. 商品不可選，無規格
2. 商品不可選，可選規格
3. 多商品可選，無規格
4. 多商品可選，可選規格

不同條件還會包含不同的交互狀態和步驟，比如商品固定且不能選規格時，只有默認和選中狀態。而商品可選且可以切換規格時，就有默認、選擇商品、完成選擇、編輯規格等多個狀態。

我們需要將每個條件下的不同交互步驟和狀態都設計出來，大致結果如下：

了解這個邏輯即可，其它頁面、組件的狀態就不做演示了。有了樣式的設計，最終靠這些圖例能支撐起整個模塊的交互方案說明嗎？

肯定不行！即使是我自己做的，可能三天后回來看就會忘了背后的邏輯。所以但凡有時間，就必然要添加和交互相關的說明，也就是輸出交互文檔。

交互文檔不是做個連線可交互的原型，這種演示文件只能演示一些既定的交互路線和流程，但無法呈現需要特殊條件才能觸發的狀態和結果。

理論上交互的設計是到這步結束，評審通過驗收以后，下一步就可以開始正式的界面視覺設計了。

但是！對于項目開發而言，最佳的交互說明和示例并不是以原型為載體，而是最終的界面設計結果。因為在界面的設計過程中，往往會有細節上的優化、變動，導致最終界面和原型不一致，導致前面的交互文檔缺乏說服力變得雞肋。

所以在真實項目中，交互文檔的正式輸出并不僅限于設計開始之前，而是可以先做簡單的備注，在完成設計后再做詳盡的連線和說明進行輸出，確保程序員、測試看到的是最終的準確結果。

做交互的核心目標是確保產品功能在交互層面上可以被正確的實現出來，并能被用戶接受，形成盡可能好的操作體驗。但具體要用什么方式表現和輸出，則根據項目的實際需要判斷，不要被固定的思路還是流程限制我們的思維。

結尾

項目的設計就是業務、產品、交互、視覺的銜接和組合，交互起承上啟下的作用，將業務和產品要素轉化成視覺的骨骼，而最后的視覺設計才進入真正由我們主導和發揮的部分。

總之，交互一直都是 UI 設計的職業組成因素，是我們工作中最重要的價值體現之一，也是 AI 完全無法替代的工作。