UI 和交互這兩個詞匯是一對孿生兄弟，有非常密切的聯(lián)系，我們在前期了解 UI 的時候“交互”這個詞總是形影不離，出現(xiàn)的頻次極高。

但是，從我開始學(xué)習(xí) UI 起，就被它困擾了非常長的時間，并不是苦于如何在實(shí)戰(zhàn)中應(yīng)用，而是在中文語境下，交互有關(guān)的詞義實(shí)在是太“玄學(xué)”了，網(wǎng)上對它的解釋多數(shù)也含糊不清。

比如看百度詞條里，交互本身有兩種解釋，我們分別來看一下。

1.交互：指替換；互相；彼此。語出《京氏易傳·震》：“震分陰陽，交互用事?！保庩枴y道是我想的那個意思？）

2.交互：通過某個具有交互功能的互聯(lián)網(wǎng)平臺，讓用戶在上面不僅可以獲得相關(guān)資訊、信息或服務(wù)，還能使用戶與用戶之間或用戶與平臺之間相互交流與互動，從而碰撞出更多的創(chuàng)意、思想和需求等。（交互使人類進(jìn)步？）

單就這個詞，如果詞條看不懂，多在網(wǎng)上搜索相關(guān)的信息，咂摸個10天半個月的，是可以對它有個大致的認(rèn)識。我會用一個比較簡單詞來概括它 —— 相交互動。即人和機(jī)器有了接觸并產(chǎn)生操作、互動的整個合集。

好不容易把這個詞搞懂，但是，交互事件、交互操作、交互方式、交互流程、交互原型、交互設(shè)計、交互文檔、交互體驗(yàn)、交互動效……又是什么意思？

當(dāng)我們在網(wǎng)上看一些交互相關(guān)的分享，你就會感受到這種混亂，比如下文截圖的這種表述方式。

這是我非常不喜歡的風(fēng)氣，通過非常生硬的專業(yè)名詞包裹自己的思路，去總結(jié)一個非常簡單易懂的道理或原則，也就是俗稱的 “不講人話”。

所以，對于這個問題的反感，我打算自己做一篇 “接地氣” 的分享，對交互的基本常識做一次掃盲。

針對這些解釋，我找了一個我自己課程學(xué)員正在處理的真實(shí)案例作為依據(jù)，并進(jìn)行改版優(yōu)化，來解釋所有和交互有關(guān)的名詞具體含義，以及對應(yīng)的實(shí)例是什么。

先看看下面這個案例。

Protopie線上可交互稿：https://cloud.protopie.io/p/a66d68949d

圍繞這個案例開展，該頁面是公司內(nèi)部人員使用的訂單管理頁面，訂單代表的是為客戶上門測量門框門扇數(shù)據(jù)和進(jìn)行設(shè)計定制的服務(wù)。

再詳細(xì)點(diǎn)解釋，就是銷售找到定制門的客戶，要創(chuàng)建一個銷售訂單，填寫客戶的基礎(chǔ)資料信息，然后設(shè)計師會上門進(jìn)行進(jìn)行測量，并將測量結(jié)果和定做要求編輯進(jìn)去，以及填寫具體定制參數(shù)，還有服務(wù)的價格明細(xì)。

這個頁面與公司內(nèi)部的四個角色有關(guān)聯(lián)，分別是銷售客服、設(shè)計師、財務(wù)、派單員。

銷售客服：聯(lián)系到客戶以后，確定客戶的資料信息基本需求，然后創(chuàng)建訂單填寫基本的客戶資料。

設(shè)計師：設(shè)計師在看見訂單后需要上門進(jìn)行測量溝通，并給出方案確定報價，然后將明細(xì)也記錄到資料中。

財務(wù)：財務(wù)在做賬的時候有時候需要進(jìn)來訂單查看具體的明細(xì)和數(shù)據(jù)。

派單員：派單員要根據(jù)訂單內(nèi)的具體數(shù)據(jù)要求，聯(lián)系倉庫進(jìn)行準(zhǔn)備和發(fā)貨（進(jìn)銷存管理）。

說到這里，大家應(yīng)該還已經(jīng)對這個頁面是做什么的有了基本的認(rèn)識了把。那么我們先不討論它的優(yōu)缺點(diǎn)，就來講講上面的交互名詞在這個頁面中的對應(yīng)實(shí)例。

人機(jī)交互：就是指上面銷售、設(shè)計、財務(wù)、派單四個角色進(jìn)入這個頁面，編輯信息、查看信息的所有操作和行動的合集。

交互界面：該頁面可以進(jìn)行操作和編輯，就叫做交互界面。

交互操作：交互操作就是指我們操作這個頁面的行為方式，該頁面目前只有兩種，點(diǎn)擊（Tap）和上下滾動（Scroll）。

滑動Scroll

點(diǎn)擊Tap

交互方式：這是軟件允許用戶操作的規(guī)則，比如想要選擇設(shè)計師，就要通過點(diǎn)擊 “設(shè)計師” 欄目，在彈出的選擇器中，通過滾動列表來選取指定人選的方法，就叫交互方式。

交互事件：交互事件是指整個人機(jī)交互中的其中一個獨(dú)立事件，比如上面案例講的，點(diǎn)擊設(shè)計師觸發(fā)選擇器彈出的事件，就是一個交互事件，在選擇器列表中選擇具體設(shè)計師，也是一個事件。

交互流程：交互流程是完成一個操作目標(biāo)的操作流程，范圍可大可小。比如上面選擇設(shè)計師的全部操作流程，可以定義為一個交互流程。而完成整個頁面信息錄入的過程，也可以成為一個交互流程。

交互動效：比如選擇設(shè)計師的交互流程中，點(diǎn)擊設(shè)計師選擇器的動畫效果，就叫交互動效。交互動效是由交互操作觸發(fā)而成的，方便用戶理解界面的內(nèi)容，而不是任何在UI中看到的動效都叫交互動效，比如下圖這種。

交互體驗(yàn)：它和產(chǎn)品、用戶體驗(yàn)還不太一樣，專指用戶在交互流程中得到的體驗(yàn)，維度并沒有覆蓋產(chǎn)品服務(wù)、情感化設(shè)計。

關(guān)于交互設(shè)計、交互原型、交互文檔，我們在下一個部分討論。這里的結(jié)尾我們就來講講交互體驗(yàn)，交互體驗(yàn)的評判維度有很多。但拋開所有技術(shù)分析，我自己將交互體驗(yàn)的結(jié)果簡化成 3 個：難用、能用、好使。

交互體驗(yàn)的好壞不是產(chǎn)品、交互、設(shè)計師、程序員說了算的，是由用戶來評判的。所以產(chǎn)品和設(shè)計行業(yè)都會強(qiáng)調(diào) “共情” 能力，可以站在用戶的角度來審視我們做出來的東西，而不是呆滯的上帝視角。

之所以挑這個案例，就是因?yàn)榧幢阕鳛樽x者的你們，應(yīng)該也可以想象如果你是這個頁面的操作用戶，那么體驗(yàn)一定會非常差，雖然它功能可能是完備的，但一定是 “難用” 的。

而對難用的分析上，絕對不是直接去套理論分析哪里難用，而是先找到難用的原因。

這個是多數(shù)新手會犯的錯誤，不站在業(yè)務(wù)、用戶的角度去使用應(yīng)用，找出原因，而就指望著去套理論套公示來對這個界面進(jìn)行 “專業(yè)分析”。

所以這里我們簡單講講，它的主要問題：

• 頁面菜單選項(xiàng)太多，操作起來感覺壓力非常大

• 菜單內(nèi)容的分布感覺混亂，很難形成記憶點(diǎn)每次要設(shè)置的東西在什么位置

• 不同角色對這個頁面的功能訴求不同，現(xiàn)在的設(shè)計顯然沒有滿足

在得到上面三個問題以后，我們就可以對這個頁面做出新的優(yōu)化。 而要優(yōu)化交互，我們就要首先從交互原型入手，即根據(jù)我們的想法設(shè)計出可以表現(xiàn)交互方式、交互流程的原型圖，比如下圖案例。

Protopie線上可交互原型：https://cloud.protopie.io/p/838165bdad

交互原型和產(chǎn)品原型不一樣，產(chǎn)品原型是用來解釋產(chǎn)品經(jīng)理自己對產(chǎn)品功能的規(guī)劃，不需要著重考慮交互體驗(yàn)，邏輯能跑順并且能講清楚即可。

而最終的設(shè)計稿，就是基于交互原型的基礎(chǔ)上，遵照它的交互方式、事件、流程展開視覺內(nèi)容的填充和細(xì)化。

我們再回到這個改版過后的案例，講講我們在交互原型中的流程給大家一點(diǎn)啟發(fā)。

首先這個頁面的所有菜單，并不是只有一個人完成填寫，最起碼要由派單員、設(shè)計師兩個人，而財務(wù)、派單員進(jìn)入到這個頁面中，通常會有明確的目的要查看哪一部分?jǐn)?shù)據(jù)，其它的數(shù)據(jù)信息對于他們而言都是干擾。

所以，我們將所有數(shù)據(jù)類型進(jìn)行劃分，統(tǒng)計結(jié)果如下（大致規(guī)劃，了解意思即可）。

完成分類后，舊版中只使用上下滾動查找菜單的方式顯然是不滿足實(shí)際需要的，所以我就根據(jù)內(nèi)容的劃分創(chuàng)建一個分頁欄的形式，將不同類目的菜單對應(yīng)進(jìn)行匹配。

當(dāng)我們要查找某個具體元素的時候，首先選擇對應(yīng)的分類以后，再在分類下方查找。并且我們還引入一個新的 “交互方式”，可以通過左右滑動的 “交互操作” 來切換分類頁面。

并且這個分頁器欄目也可以進(jìn)行標(biāo)識，你的賬戶對這些內(nèi)容的權(quán)限如何，比如 “不可看”、“只讀”、“可編輯” 等等。

而每個分類下方，對它們再做一次邏輯分類，還有區(qū)分必填項(xiàng)和非必填項(xiàng)。如果有大量非必填項(xiàng)目為空，那么對于信息的查閱檢索都是干擾，選填內(nèi)容是用戶需要填寫的情況下才會去填，所以我們將每個分類下面的必填和選填也作出拆分，默認(rèn)將選填菜單進(jìn)行折疊（也可以是默認(rèn)不折疊）。

這樣，我們就可以得到一個你沒有想到的 “船新” 版本。相信大家在這個版本的交互體驗(yàn)肯定比老版好出不少。

當(dāng)然，這只是對交互流程的其中一個改版，并不代表我們的交互只能這么改而已，實(shí)際項(xiàng)目中，優(yōu)秀的設(shè)計師都會提供幾種不同的版本進(jìn)行評審和測試，挑出其中最優(yōu)的方案。

比如，我們可以不把分類頁面做成左右滾動的，而是做成上下滑動的。

所以，在了解上面兩套交互原型的案例，我們就可以再來介紹交互設(shè)計（UE）了。交互設(shè)計就是制定用戶操作界面的流程、方式、體驗(yàn)的設(shè)計，和界面視覺設(shè)計并不能劃上等號。

雖然過去行業(yè)里喜歡強(qiáng)調(diào)，將交互設(shè)計 (UE) 和界面視覺設(shè)計 (UI) 崗位拆分開來，但這不是一個太合理的現(xiàn)象，對于多數(shù)業(yè)務(wù)和團(tuán)隊來說增加 UE 崗位只是平添負(fù)擔(dān)而已，未來的大趨勢是由 UI 設(shè)計師負(fù)責(zé)交互設(shè)計的內(nèi)容，當(dāng)然也有個洋氣的新名稱叫 UX。

最后，在完成了上面這些內(nèi)容的設(shè)計和規(guī)則制定以后，事情還沒完。專業(yè)的 UE 和 UX 還會提供一份文檔叫 “交互文檔”，除了將交互原型圖置入進(jìn)去以外，還要具體來介紹它的交互方式、交互事件和交互流程的說明。

基于時間原因我就沒辦法提供一份基于這個案例制作的交互文檔了，大家只要明白，如果我沒在一個地方標(biāo)注可以通過左右滑動來切換頁面的方式，或者默認(rèn)狀態(tài)下選填內(nèi)容是展開還是關(guān)閉之類的信息，那么最后落實(shí)到開發(fā)環(huán)節(jié)中可能就會導(dǎo)致很多細(xì)節(jié)問題的錯誤。

以上，就是我們關(guān)于對交互有關(guān)名詞掃盲和解釋的全部內(nèi)容了。學(xué)習(xí)交互，要先從這些名詞的認(rèn)識開始入手，搞清楚底層的邏輯和原因，然后再通過實(shí)踐和分析來積累對這部分內(nèi)容的經(jīng)驗(yàn)。

只有深入去了解業(yè)務(wù)，并站在用戶角度審視，勤于思考的設(shè)計師，才能在交互領(lǐng)域中有所建樹，理論知識只是其中嘴不重要的一環(huán)。

下面再把所有涉及的名詞羅列一遍做個總結(jié)：

人機(jī)交互：用戶和機(jī)器、軟件實(shí)現(xiàn)操作和互動的過程。

交互界面：可以用來進(jìn)行交互和操作的UI界面。

交互操作：用戶操作軟件、界面的具體操作，比如單擊、雙擊、長按等。

交互方式：軟件允許用戶操作的規(guī)則，比如按鈕的交互方式要通過點(diǎn)擊才能觸發(fā)。

交互事件：沒完成一次交互操作并獲得反饋的事件。

交互流程：用戶為完成目標(biāo)所做的一系列交互的合集。

交互原型：用來確定產(chǎn)品交互方式的原型圖。

交互設(shè)計：制定用戶操作界面的流程、方式、體驗(yàn)的設(shè)計。

交互文檔：用圖文記錄交互思路、具體交互規(guī)則的文檔。

交互動效：用來協(xié)助交互操作明確交互事件的動畫效果。

交互體驗(yàn)：完成交互流程后所獲得得感受。

完！

轉(zhuǎn)自：站酷-酸梅干超人