前段時間有位產品小白問我：在實習的這段時間里，要怎么才能高效提升我的交互設計經驗呢？

說實話，剛聽到這個問題我是挺懵的，這么簡單的事情還用問，不就是按“步驟 1、步驟 2、步驟 3、步驟 4、步驟 5”這樣就解決了嗎？

說出這句話的我，其實陷入了一種知識詛咒。即當你掌握一種知識后，你就無法想象在其他人眼中，這種未知的狀態是怎樣的。

回想起剛入行產品的那段日子，當時沒人帶不知道走了多少彎路，連原型、交互是啥都沒概念，就這么跌跌撞撞過來了~

為了避免其他人繼續踩坑，我簡單分享下一些快速入門交互的經驗和技巧。

更多自學方法：

一、什么是交互設計？

要了解什么是交互設計，首先要理解組件、原型的概念。

我們這里簡單介紹一下，組件是具有特定樣式和用途的內容組合。主要有五種類型：基礎、導航、輸入、展示、反饋。

1. 基礎：基礎組件是一些常見的頁面基礎元素，例如圖標、文本；
2. 導航：主要幫助用戶了解當前位置和指引各個頁面跳轉；
3. 輸入：一般用于數據錄入，例如選擇內容、輸入文本等操作；
4. 展示：主要用于顯示相關數據內容；
5. 反饋：用戶進行操作后，將會引發一系列數據交互。

而原型，一般僅聚焦頁面的組件構成，簡化顏色、圖標等樣式細節，你可以理解為實際要上線頁面的去色簡化版。

那什么是交互設計呢？

交互設計，它定義了多個事物間交流互動的規則，以便達成某種目標的思維創意活動。

這些事物可以是人、系統、或其他任意對象。

一般在互聯網領域，交互設計指的是用戶輸入、系統反饋的一系列人機互動內容。這些內容一般由組件、頁面等組成。

二、交互設計的 3 種常見模式

我個人簡單總結了一下，常見的交互設計模式，大概有這 3 種：

1. 簡單動態交互：只涉及少量操作 + 一兩個組件反饋的交互過程；
2. 數據操作交互：涉及數據錄入、編輯、驗證的數據交互；
3. 業務判斷交互：通過理解業務規則，并轉化為相關數據條件判斷，實現較復雜的業務功能。

當你掌握了一些基礎組件，就可以嘗試搭一些簡單的功能交互了。

例如：京東的“清理緩存、退出登錄”小功能，再復雜一點的“新增收貨地址、訂單商品評價”等，搞清楚每個操作，顯示怎樣的反饋和數據驗證，大概抄抄就有感覺了~

三、3 個方法，快速提升交互能力

如何才能快速提升交互能力呢？

這里我復盤了一下以往的個人經歷，主要有 3 個提升的關鍵節點，分享給你。

1. 熟悉組件

創新，是在一系列約束條件下，對基礎元素的排列組合。——好夕雷

如圖為有贊的 Vant 組件庫，大致包含了 5 種類型，約 70+ 個組件，不同的組件有各自的樣式和用途。

作為初級產品，務必對這些組件的適用條件、組件用途做到爛熟于心、信手拈來，才能依據不同功能、場景、需求，將各種組件進行排列、組合，完成頁面、功能、乃至模塊的高效設計。

如果不懂上述基礎組件，產品設計就像是盲人摸象。只能依靠以往的產品經驗、或找幾個競品功能抄抄完事，下次遇到新需求又得重頭思考。所以，掌握組件概念，已經成為初級產品的必備知識。

2. 靜態交互

交互可分為動態交互和靜態交互。

動態交互，顧名思義即包含了自動化或觸發式的一系列變化的交互效果。

例如：點擊退出登錄后，頁面彈出對話框提示“是否退出”，點擊退出按鈕后，繼續彈出退出成功提示，并跳轉首頁等。

而靜態交互，是指將這種動態交互效果，通過一張張頁面、組件鋪開組成交互流程圖，使開發一目了然、快速抓住交互重點。

溝通的本質，是減少信息差。——好夕雷

我在剛開始做產品時，就踩過動態交互的坑。當時錯誤的認為，NB 的產品要追求各種酷炫的交互動態效果，一些“中繼器增刪改查、轉盤抽獎”等動態交互，我閑著沒事都會研究研究。

現在看來，有點本末倒置了。交互文檔本質是一種溝通方式，需要方便開發查閱和理解。

如果使用動態交互，一個稍微復雜的交互效果，做的人效率低不說，查閱的開發同事，要重復點擊多少次，才能完全理解其中的邏輯，換我也崩潰~

3. 解耦復用

當你做的交互稿越來越多、交互邏輯越來越復雜后，隨之會面臨幾個問題：

1. 某些類似的交互，總是會重復出現，并且適用于不同功能進行調用；
2. 一個頁面的交互細節要改動，可能另一個頁面的內容也要微調，如果相關聯的交互有 10 個，要怎么改阿？

遇到上述問題，就需要談到交互的解耦復用了。復用比較好理解，就是重復使用，那解耦是什么呢？

① 耦合和解耦

要搞懂什么是解耦，首先要掌握耦合的概念。耦合，是指事物之間相互依賴的程度。

這樣講可能有點抽象，我們舉個生活中的例子，試著簡單理解。

以前的諾基亞把電池摳下來，就能換新的。現在一個 iPhone14，除非專業修手機的，普通人基本上不可能徒手完成電池換新。在這里，我們就可以說 iPhone14 的電池和手機高度耦合。

那么解耦，就是降低或消除這種依賴程度和耦合性。

② 交互解耦

解耦的概念，可用在產品工作中的“流程解耦、模塊解耦、功能解耦”等分析中，這里我們暫時只討論如何進行交互解耦，解決上述遇到的問題。

我翻看了剛做產品時，產出的一些文檔，發現頁面和交互是共用同一個畫布的。

這將產生一個問題：如果某幾個頁面的部分交互涉及重疊部分，就會出現一個特定功能交互的優化，需要多個頁面內交互進行逐一修改，耗時耗力且不好維護。

某個難以解決的問題，往往在另一領域存在普遍解法。——好夕雷

直到我接觸了 UML 的“面向對象、封裝、繼承、多態”等相關知識后，將解耦的概念用在交互上，原來的問題便引刃而解了。

③ 如何解耦

具體的做法有 3 步，分別是“原型交互分層、設計具體交互、組裝頁面交互”。

原型交互分層，指的是將“原型、交互”看作是不同的內容，分別用不同的畫布繪制。

原型負責頁面內容、樣式、規則呈現，交互負責功能邏輯變化。

然后在“某功能交互”畫布中，設計具體的交互邏輯，完成單一功能閉環。

如涉及頁面復用，請使用 Axure 母版功能，避免頁面內容重復編輯。

最后的步驟，有點像拼樂高積木~

你只需回到原型，進行相關功能入口的交互組裝即可。

怎樣，是不是簡潔又清晰？

總結

組件、原型、交互的相關概念：

1. 組件：組件是具有特定樣式和用途的內容組合，主要有五種類型：基礎、導航、輸入、展示、反饋；
2. 原型：原型一般僅聚焦頁面的組件構成，簡化顏色、圖標等樣式細節；
3. 交互：在互聯網領域，交互設計指的是用戶輸入、系統反饋的一系列人機互動內容。

交互設計的 3 種常見模式，主要有“簡單動態交互、數據操作交互、業務判斷交互”。

你還可以通過“熟悉組件、靜態交互、解耦復用”等方法，快速提升交互能力。

歡迎關注作者微信公眾號：「產品之外」