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

說(shuō)實(shí)話，剛聽(tīng)到這個(gè)問(wèn)題我是挺懵的，這么簡(jiǎn)單的事情還用問(wèn)，不就是按"步驟 1、步驟 2、步驟 3、步驟 4、步驟 5"這樣就解決了嗎？

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

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

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

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

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

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

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

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

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

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

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

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

二、交互設(shè)計(jì)的 3 種常見(jiàn)模式

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

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

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

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

三、3 個(gè)方法，快速提升交互能力

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

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

1. 熟悉組件

創(chuàng)新，是在一系列約束條件下，對(duì)基礎(chǔ)元素的排列組合?！孟?/p>

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

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

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

2. 靜態(tài)交互

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

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

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

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

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

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

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

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

3. 解耦復(fù)用

當(dāng)你做的交互稿越來(lái)越多、交互邏輯越來(lái)越復(fù)雜后，隨之會(huì)面臨幾個(gè)問(wèn)題：

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

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

① 耦合和解耦

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

這樣講可能有點(diǎn)抽象，我們舉個(gè)生活中的例子，試著簡(jiǎn)單理解。

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

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

② 交互解耦

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

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

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

某個(gè)難以解決的問(wèn)題，往往在另一領(lǐng)域存在普遍解法?！孟?/p>

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

③ 如何解耦

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

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

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

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

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

最后的步驟，有點(diǎn)像拼樂(lè)高積木~

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

怎樣，是不是簡(jiǎn)潔又清晰？

總結(jié)

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

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

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

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

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