2020-3-31 ui設(shè)計(jì)分享達(dá)人
通過(guò)一個(gè)案例解釋那些讓你們看得有大的交互專業(yè)詞匯
UI 和交互這兩個(gè)詞匯是一對(duì)孿生兄弟，有非常密切的聯(lián)系，我們?cè)谇捌诹私?UI 的時(shí)候“交互”這個(gè)詞總是形影不離，出現(xiàn)的頻次極高。
但是，從我開始學(xué)習(xí) UI 起，就被它困擾了非常長(zhǎng)的時(shí)間，并不是苦于如何在實(shí)戰(zhàn)中應(yīng)用，而是在中文語(yǔ)境下，交互有關(guān)的詞義實(shí)在是太“玄學(xué)”了，網(wǎng)上對(duì)它的解釋多數(shù)也含糊不清。
比如看百度詞條里，交互本身有兩種解釋，我們分別來(lái)看一下。
1.交互：指替換；互相；彼此。語(yǔ)出《京氏易傳·震》：“震分陰陽(yáng)，交互用事?！保庩?yáng)……難道是我想的那個(gè)意思？）
2.交互：通過(guò)某個(gè)具有交互功能的互聯(lián)網(wǎng)平臺(tái)，讓用戶在上面不僅可以獲得相關(guān)資訊、信息或服務(wù)，還能使用戶與用戶之間或用戶與平臺(tái)之間相互交流與互動(dòng)，從而碰撞出更多的創(chuàng)意、思想和需求等。（交互使人類進(jìn)步？）
單就這個(gè)詞，如果詞條看不懂，多在網(wǎng)上搜索相關(guān)的信息，咂摸個(gè)10天半個(gè)月的，是可以對(duì)它有個(gè)大致的認(rèn)識(shí)。我會(huì)用一個(gè)比較簡(jiǎn)單詞來(lái)概括它 —— 相交互動(dòng)。即人和機(jī)器有了接觸并產(chǎn)生操作、互動(dòng)的整個(gè)合集。
好不容易把這個(gè)詞搞懂，但是，交互事件、交互操作、交互方式、交互流程、交互原型、交互設(shè)計(jì)、交互文檔、交互體驗(yàn)、交互動(dòng)效……又是什么意思？
當(dāng)我們?cè)诰W(wǎng)上看一些交互相關(guān)的分享，你就會(huì)感受到這種混亂，比如下文截圖的這種表述方式。
這是我非常不喜歡的風(fēng)氣，通過(guò)非常生硬的專業(yè)名詞包裹自己的思路，去總結(jié)一個(gè)非常簡(jiǎn)單易懂的道理或原則，也就是俗稱的 “不講人話”。
所以，對(duì)于這個(gè)問(wèn)題的反感，我打算自己做一篇 “接地氣” 的分享，對(duì)交互的基本常識(shí)做一次掃盲。
針對(duì)這些解釋，我找了一個(gè)我自己課程學(xué)員正在處理的真實(shí)案例作為依據(jù)，并進(jìn)行改版優(yōu)化，來(lái)解釋所有和交互有關(guān)的名詞具體含義，以及對(duì)應(yīng)的實(shí)例是什么。
先看看下面這個(gè)案例。
Protopie線上可交互稿：https://cloud.protopie.io/p/a66d68949d
圍繞這個(gè)案例開展，該頁(yè)面是公司內(nèi)部人員使用的訂單管理頁(yè)面，訂單代表的是為客戶上門測(cè)量門框門扇數(shù)據(jù)和進(jìn)行設(shè)計(jì)定制的服務(wù)。
再詳細(xì)點(diǎn)解釋，就是銷售找到定制門的客戶，要?jiǎng)?chuàng)建一個(gè)銷售訂單，填寫客戶的基礎(chǔ)資料信息，然后設(shè)計(jì)師會(huì)上門進(jìn)行進(jìn)行測(cè)量，并將測(cè)量結(jié)果和定做要求編輯進(jìn)去，以及填寫具體定制參數(shù)，還有服務(wù)的價(jià)格明細(xì)。
這個(gè)頁(yè)面與公司內(nèi)部的四個(gè)角色有關(guān)聯(lián)，分別是銷售客服、設(shè)計(jì)師、財(cái)務(wù)、派單員。
銷售客服：聯(lián)系到客戶以后，確定客戶的資料信息基本需求，然后創(chuàng)建訂單填寫基本的客戶資料。
設(shè)計(jì)師：設(shè)計(jì)師在看見訂單后需要上門進(jìn)行測(cè)量溝通，并給出方案確定報(bào)價(jià)，然后將明細(xì)也記錄到資料中。
財(cái)務(wù)：財(cái)務(wù)在做賬的時(shí)候有時(shí)候需要進(jìn)來(lái)訂單查看具體的明細(xì)和數(shù)據(jù)。
派單員：派單員要根據(jù)訂單內(nèi)的具體數(shù)據(jù)要求，聯(lián)系倉(cāng)庫(kù)進(jìn)行準(zhǔn)備和發(fā)貨（進(jìn)銷存管理）。
說(shuō)到這里，大家應(yīng)該還已經(jīng)對(duì)這個(gè)頁(yè)面是做什么的有了基本的認(rèn)識(shí)了把。那么我們先不討論它的優(yōu)缺點(diǎn)，就來(lái)講講上面的交互名詞在這個(gè)頁(yè)面中的對(duì)應(yīng)實(shí)例。
人機(jī)交互：就是指上面銷售、設(shè)計(jì)、財(cái)務(wù)、派單四個(gè)角色進(jìn)入這個(gè)頁(yè)面，編輯信息、查看信息的所有操作和行動(dòng)的合集。
交互界面：該頁(yè)面可以進(jìn)行操作和編輯，就叫做交互界面。
交互操作：交互操作就是指我們操作這個(gè)頁(yè)面的行為方式，該頁(yè)面目前只有兩種，點(diǎn)擊（Tap）和上下滾動(dòng)（Scroll）。
滑動(dòng)Scroll
點(diǎn)擊Tap
交互方式：這是軟件允許用戶操作的規(guī)則，比如想要選擇設(shè)計(jì)師，就要通過(guò)點(diǎn)擊 “設(shè)計(jì)師” 欄目，在彈出的選擇器中，通過(guò)滾動(dòng)列表來(lái)選取指定人選的方法，就叫交互方式。
交互事件：交互事件是指整個(gè)人機(jī)交互中的其中一個(gè)獨(dú)立事件，比如上面案例講的，點(diǎn)擊設(shè)計(jì)師觸發(fā)選擇器彈出的事件，就是一個(gè)交互事件，在選擇器列表中選擇具體設(shè)計(jì)師，也是一個(gè)事件。
交互流程：交互流程是完成一個(gè)操作目標(biāo)的操作流程，范圍可大可小。比如上面選擇設(shè)計(jì)師的全部操作流程，可以定義為一個(gè)交互流程。而完成整個(gè)頁(yè)面信息錄入的過(guò)程，也可以成為一個(gè)交互流程。
交互動(dòng)效：比如選擇設(shè)計(jì)師的交互流程中，點(diǎn)擊設(shè)計(jì)師選擇器的動(dòng)畫效果，就叫交互動(dòng)效。交互動(dòng)效是由交互操作觸發(fā)而成的，方便用戶理解界面的內(nèi)容，而不是任何在UI中看到的動(dòng)效都叫交互動(dòng)效，比如下圖這種。
交互體驗(yàn)：它和產(chǎn)品、用戶體驗(yàn)還不太一樣，專指用戶在交互流程中得到的體驗(yàn)，維度并沒(méi)有覆蓋產(chǎn)品服務(wù)、情感化設(shè)計(jì)。
關(guān)于交互設(shè)計(jì)、交互原型、交互文檔，我們?cè)谙乱粋€(gè)部分討論。這里的結(jié)尾我們就來(lái)講講交互體驗(yàn)，交互體驗(yàn)的評(píng)判維度有很多。但拋開所有技術(shù)分析，我自己將交互體驗(yàn)的結(jié)果簡(jiǎn)化成 3 個(gè)：難用、能用、好使。
交互體驗(yàn)的好壞不是產(chǎn)品、交互、設(shè)計(jì)師、程序員說(shuō)了算的，是由用戶來(lái)評(píng)判的。所以產(chǎn)品和設(shè)計(jì)行業(yè)都會(huì)強(qiáng)調(diào) “共情” 能力，可以站在用戶的角度來(lái)審視我們做出來(lái)的東西，而不是呆滯的上帝視角。
之所以挑這個(gè)案例，就是因?yàn)榧幢阕鳛樽x者的你們，應(yīng)該也可以想象如果你是這個(gè)頁(yè)面的操作用戶，那么體驗(yàn)一定會(huì)非常差，雖然它功能可能是完備的，但一定是 “難用” 的。
而對(duì)難用的分析上，絕對(duì)不是直接去套理論分析哪里難用，而是先找到難用的原因。
這個(gè)是多數(shù)新手會(huì)犯的錯(cuò)誤，不站在業(yè)務(wù)、用戶的角度去使用應(yīng)用，找出原因，而就指望著去套理論套公示來(lái)對(duì)這個(gè)界面進(jìn)行 “專業(yè)分析”。
所以這里我們簡(jiǎn)單講講，它的主要問(wèn)題：
頁(yè)面菜單選項(xiàng)太多，操作起來(lái)感覺(jué)壓力非常大
菜單內(nèi)容的分布感覺(jué)混亂，很難形成記憶點(diǎn)每次要設(shè)置的東西在什么位置
不同角色對(duì)這個(gè)頁(yè)面的功能訴求不同，現(xiàn)在的設(shè)計(jì)顯然沒(méi)有滿足
在得到上面三個(gè)問(wèn)題以后，我們就可以對(duì)這個(gè)頁(yè)面做出新的優(yōu)化。 而要優(yōu)化交互，我們就要首先從交互原型入手，即根據(jù)我們的想法設(shè)計(jì)出可以表現(xiàn)交互方式、交互流程的原型圖，比如下圖案例。
Protopie線上可交互原型：https://cloud.protopie.io/p/838165bdad
交互原型和產(chǎn)品原型不一樣，產(chǎn)品原型是用來(lái)解釋產(chǎn)品經(jīng)理自己對(duì)產(chǎn)品功能的規(guī)劃，不需要著重考慮交互體驗(yàn)，邏輯能跑順并且能講清楚即可。
而最終的設(shè)計(jì)稿，就是基于交互原型的基礎(chǔ)上，遵照它的交互方式、事件、流程展開視覺(jué)內(nèi)容的填充和細(xì)化。
我們?cè)倩氐竭@個(gè)改版過(guò)后的案例，講講我們?cè)诮换ピ椭械牧鞒探o大家一點(diǎn)啟發(fā)。
首先這個(gè)頁(yè)面的所有菜單，并不是只有一個(gè)人完成填寫，最起碼要由派單員、設(shè)計(jì)師兩個(gè)人，而財(cái)務(wù)、派單員進(jìn)入到這個(gè)頁(yè)面中，通常會(huì)有明確的目的要查看哪一部分?jǐn)?shù)據(jù)，其它的數(shù)據(jù)信息對(duì)于他們而言都是干擾。
所以，我們將所有數(shù)據(jù)類型進(jìn)行劃分，統(tǒng)計(jì)結(jié)果如下（大致規(guī)劃，了解意思即可）。
完成分類后，舊版中只使用上下滾動(dòng)查找菜單的方式顯然是不滿足實(shí)際需要的，所以我就根據(jù)內(nèi)容的劃分創(chuàng)建一個(gè)分頁(yè)欄的形式，將不同類目的菜單對(duì)應(yīng)進(jìn)行匹配。
當(dāng)我們要查找某個(gè)具體元素的時(shí)候，首先選擇對(duì)應(yīng)的分類以后，再在分類下方查找。并且我們還引入一個(gè)新的 “交互方式”，可以通過(guò)左右滑動(dòng)的 “交互操作” 來(lái)切換分類頁(yè)面。
并且這個(gè)分頁(yè)器欄目也可以進(jìn)行標(biāo)識(shí)，你的賬戶對(duì)這些內(nèi)容的權(quán)限如何，比如 “不可看”、“只讀”、“可編輯” 等等。
而每個(gè)分類下方，對(duì)它們?cè)僮鲆淮芜壿嫹诸?，還有區(qū)分必填項(xiàng)和非必填項(xiàng)。如果有大量非必填項(xiàng)目為空，那么對(duì)于信息的查閱檢索都是干擾，選填內(nèi)容是用戶需要填寫的情況下才會(huì)去填，所以我們將每個(gè)分類下面的必填和選填也作出拆分，默認(rèn)將選填菜單進(jìn)行折疊（也可以是默認(rèn)不折疊）。
這樣，我們就可以得到一個(gè)你沒(méi)有想到的 “船新” 版本。相信大家在這個(gè)版本的交互體驗(yàn)肯定比老版好出不少。
當(dāng)然，這只是對(duì)交互流程的其中一個(gè)改版，并不代表我們的交互只能這么改而已，實(shí)際項(xiàng)目中，優(yōu)秀的設(shè)計(jì)師都會(huì)提供幾種不同的版本進(jìn)行評(píng)審和測(cè)試，挑出其中最優(yōu)的方案。
比如，我們可以不把分類頁(yè)面做成左右滾動(dòng)的，而是做成上下滑動(dòng)的。
所以，在了解上面兩套交互原型的案例，我們就可以再來(lái)介紹交互設(shè)計(jì)（UE）了。交互設(shè)計(jì)就是制定用戶操作界面的流程、方式、體驗(yàn)的設(shè)計(jì)，和界面視覺(jué)設(shè)計(jì)并不能劃上等號(hào)。
雖然過(guò)去行業(yè)里喜歡強(qiáng)調(diào)，將交互設(shè)計(jì) (UE) 和界面視覺(jué)設(shè)計(jì) (UI) 崗位拆分開來(lái)，但這不是一個(gè)太合理的現(xiàn)象，對(duì)于多數(shù)業(yè)務(wù)和團(tuán)隊(duì)來(lái)說(shuō)增加 UE 崗位只是平添負(fù)擔(dān)而已，未來(lái)的大趨勢(shì)是由 UI 設(shè)計(jì)師負(fù)責(zé)交互設(shè)計(jì)的內(nèi)容，當(dāng)然也有個(gè)洋氣的新名稱叫 UX。
最后，在完成了上面這些內(nèi)容的設(shè)計(jì)和規(guī)則制定以后，事情還沒(méi)完。專業(yè)的 UE 和 UX 還會(huì)提供一份文檔叫 “交互文檔”，除了將交互原型圖置入進(jìn)去以外，還要具體來(lái)介紹它的交互方式、交互事件和交互流程的說(shuō)明。
基于時(shí)間原因我就沒(méi)辦法提供一份基于這個(gè)案例制作的交互文檔了，大家只要明白，如果我沒(méi)在一個(gè)地方標(biāo)注可以通過(guò)左右滑動(dòng)來(lái)切換頁(yè)面的方式，或者默認(rèn)狀態(tài)下選填內(nèi)容是展開還是關(guān)閉之類的信息，那么最后落實(shí)到開發(fā)環(huán)節(jié)中可能就會(huì)導(dǎo)致很多細(xì)節(jié)問(wèn)題的錯(cuò)誤。
以上，就是我們關(guān)于對(duì)交互有關(guān)名詞掃盲和解釋的全部?jī)?nèi)容了。學(xué)習(xí)交互，要先從這些名詞的認(rèn)識(shí)開始入手，搞清楚底層的邏輯和原因，然后再通過(guò)實(shí)踐和分析來(lái)積累對(duì)這部分內(nèi)容的經(jīng)驗(yàn)。
只有深入去了解業(yè)務(wù)，并站在用戶角度審視，勤于思考的設(shè)計(jì)師，才能在交互領(lǐng)域中有所建樹，理論知識(shí)只是其中嘴不重要的一環(huán)。
下面再把所有涉及的名詞羅列一遍做個(gè)總結(jié)：
人機(jī)交互：用戶和機(jī)器、軟件實(shí)現(xiàn)操作和互動(dòng)的過(guò)程。
交互界面：可以用來(lái)進(jìn)行交互和操作的UI界面。
交互操作：用戶操作軟件、界面的具體操作，比如單擊、雙擊、長(zhǎng)按等。
交互方式：軟件允許用戶操作的規(guī)則，比如按鈕的交互方式要通過(guò)點(diǎn)擊才能觸發(fā)。
交互事件：沒(méi)完成一次交互操作并獲得反饋的事件。
交互流程：用戶為完成目標(biāo)所做的一系列交互的合集。
交互原型：用來(lái)確定產(chǎn)品交互方式的原型圖。
交互設(shè)計(jì)：制定用戶操作界面的流程、方式、體驗(yàn)的設(shè)計(jì)。
交互文檔：用圖文記錄交互思路、具體交互規(guī)則的文檔。
交互動(dòng)效：用來(lái)協(xié)助交互操作明確交互事件的動(dòng)畫效果。
交互體驗(yàn)：完成交互流程后所獲得得感受。
完！
轉(zhuǎn)自：站酷-酸梅干超人
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.gyxygd.cn