前段時間有位產(chǎn)品小白問我：在實習(xí)的這段時間里，要怎么才能高效提升我的交互設(shè)計經(jīng)驗?zāi)兀?/p>

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

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

回想起剛?cè)胄挟a(chǎn)品的那段日子，當(dāng)時沒人帶不知道走了多少彎路，連原型、交互是啥都沒概念，就這么跌跌撞撞過來了~

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

一、什么是交互設(shè)計？

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

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

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

而原型，一般僅聚焦頁面的組件構(gòu)成，簡化顏色、圖標(biāo)等樣式細(xì)節(jié)，你可以理解為實際要上線頁面的去色簡化版。

那什么是交互設(shè)計呢？

交互設(shè)計，它定義了多個事物間交流互動的規(guī)則，以便達(dá)成某種目標(biāo)的思維創(chuàng)意活動。

這些事物可以是人、系統(tǒng)、或其他任意對象。

一般在互聯(lián)網(wǎng)領(lǐng)域，交互設(shè)計指的是用戶輸入、系統(tǒng)反饋的一系列人機(jī)互動內(nèi)容。這些內(nèi)容一般由組件、頁面等組成。

二、交互設(shè)計的 3 種常見模式

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

1. 簡單動態(tài)交互：只涉及少量操作 + 一兩個組件反饋的交互過程；
2. 數(shù)據(jù)操作交互：涉及數(shù)據(jù)錄入、編輯、驗證的數(shù)據(jù)交互；
3. 業(yè)務(wù)判斷交互：通過理解業(yè)務(wù)規(guī)則，并轉(zhuǎn)化為相關(guān)數(shù)據(jù)條件判斷，實現(xiàn)較復(fù)雜的業(yè)務(wù)功能。

當(dāng)你掌握了一些基礎(chǔ)組件，就可以嘗試搭一些簡單的功能交互了。

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

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

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

這里我復(fù)盤了一下以往的個人經(jīng)歷，主要有 3 個提升的關(guān)鍵節(jié)點，分享給你。

1. 熟悉組件

創(chuàng)新，是在一系列約束條件下，對基礎(chǔ)元素的排列組合。——好夕雷

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

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

如果不懂上述基礎(chǔ)組件，產(chǎn)品設(shè)計就像是盲人摸象。只能依靠以往的產(chǎn)品經(jīng)驗、或找?guī)讉€競品功能抄抄完事，下次遇到新需求又得重頭思考。所以，掌握組件概念，已經(jīng)成為初級產(chǎn)品的必備知識。

2. 靜態(tài)交互

交互可分為動態(tài)交互和靜態(tài)交互。

動態(tài)交互，顧名思義即包含了自動化或觸發(fā)式的一系列變化的交互效果。

例如：點擊退出登錄后，頁面彈出對話框提示"是否退出"，點擊退出按鈕后，繼續(xù)彈出退出成功提示，并跳轉(zhuǎn)首頁等。

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

溝通的本質(zhì)，是減少信息差?！孟?/p>

我在剛開始做產(chǎn)品時，就踩過動態(tài)交互的坑。當(dāng)時錯誤的認(rèn)為，NB 的產(chǎn)品要追求各種酷炫的交互動態(tài)效果，一些"中繼器增刪改查、轉(zhuǎn)盤抽獎"等動態(tài)交互，我閑著沒事都會研究研究。

現(xiàn)在看來，有點本末倒置了。交互文檔本質(zhì)是一種溝通方式，需要方便開發(fā)查閱和理解。

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

3. 解耦復(fù)用

當(dāng)你做的交互稿越來越多、交互邏輯越來越復(fù)雜后，隨之會面臨幾個問題：

1. 某些類似的交互，總是會重復(fù)出現(xiàn)，并且適用于不同功能進(jìn)行調(diào)用；
2. 一個頁面的交互細(xì)節(jié)要改動，可能另一個頁面的內(nèi)容也要微調(diào)，如果相關(guān)聯(lián)的交互有 10 個，要怎么改阿？

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

① 耦合和解耦

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

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

以前的諾基亞把電池?fù)赶聛恚湍軗Q新的?，F(xiàn)在一個 iPhone14，除非專業(yè)修手機(jī)的，普通人基本上不可能徒手完成電池?fù)Q新。在這里，我們就可以說 iPhone14 的電池和手機(jī)高度耦合。

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

② 交互解耦

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

我翻看了剛做產(chǎn)品時，產(chǎn)出的一些文檔，發(fā)現(xiàn)頁面和交互是共用同一個畫布的。

這將產(chǎn)生一個問題：如果某幾個頁面的部分交互涉及重疊部分，就會出現(xiàn)一個特定功能交互的優(yōu)化，需要多個頁面內(nèi)交互進(jìn)行逐一修改，耗時耗力且不好維護(hù)。

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

直到我接觸了 UML 的"面向?qū)ο?、封裝、繼承、多態(tài)"等相關(guān)知識后，將解耦的概念用在交互上，原來的問題便引刃而解了。

③ 如何解耦

具體的做法有 3 步，分別是"原型交互分層、設(shè)計具體交互、組裝頁面交互"。

原型交互分層，指的是將"原型、交互"看作是不同的內(nèi)容，分別用不同的畫布繪制。

原型負(fù)責(zé)頁面內(nèi)容、樣式、規(guī)則呈現(xiàn)，交互負(fù)責(zé)功能邏輯變化。

然后在"某功能交互"畫布中，設(shè)計具體的交互邏輯，完成單一功能閉環(huán)。

如涉及頁面復(fù)用，請使用 Axure 母版功能，避免頁面內(nèi)容重復(fù)編輯。

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

你只需回到原型，進(jìn)行相關(guān)功能入口的交互組裝即可。

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

總結(jié)

組件、原型、交互的相關(guān)概念：

1. 組件：組件是具有特定樣式和用途的內(nèi)容組合，主要有五種類型：基礎(chǔ)、導(dǎo)航、輸入、展示、反饋；
2. 原型：原型一般僅聚焦頁面的組件構(gòu)成，簡化顏色、圖標(biāo)等樣式細(xì)節(jié)；
3. 交互：在互聯(lián)網(wǎng)領(lǐng)域，交互設(shè)計指的是用戶輸入、系統(tǒng)反饋的一系列人機(jī)互動內(nèi)容。

交互設(shè)計的 3 種常見模式，主要有"簡單動態(tài)交互、數(shù)據(jù)操作交互、業(yè)務(wù)判斷交互"。

你還可以通過"熟悉組件、靜態(tài)交互、解耦復(fù)用"等方法，快速提升交互能力。

作者：產(chǎn)品之外