在我們?nèi)粘Ｉ钪械教幎汲錆M著交互設(shè)計，有時候你在使用某個APP的時候，你覺得很好用，而有的卻很難有，這是為什么呢？本文通過了兩個實(shí)際案例，跟大家講解了交互設(shè)計語言在實(shí)踐中的作用！enjoy~

一、我們生活中充滿著交互設(shè)計

每天滑手機(jī)的你，能想像在熒幕上做的那些簡單的點(diǎn)擊、滑動……等等動作都暗藏著玄機(jī)嗎？你是否也曾經(jīng)感受到某些App的界面很難用，某些卻用的很舒服？

上述所描述的問題，都是可以通過交互設(shè)計來解決。

電腦的出現(xiàn)開啟了另一波科技革命的時代，交互設(shè)計也應(yīng)此而誕生。

它是基于圖形用戶界面的基礎(chǔ)，發(fā)展到現(xiàn)在仍是個較年輕的學(xué)科。相較于傳統(tǒng)的工業(yè)設(shè)計，交互設(shè)計學(xué)科的很多知識體系尚不成熟和完善。

也因此，在團(tuán)隊合作中常常出現(xiàn)溝通不良的問題，交互設(shè)計師想表示A，產(chǎn)品經(jīng)理解釋成B，程序員理解成C，最后的產(chǎn)物，令人感到驚嚇的程度常常多過于令人驚喜呢！

二、拖拽和甩動的區(qū)別是什么

還記得第一次上交互設(shè)計課的我，所受到的沖擊。

當(dāng)時教授問我們一個相當(dāng)簡單的問題：拖拽和甩動的區(qū)別是什么?

臺下所有的同學(xué)都舉起手指，朝空氣中劃一劃，皺著眉頭和左右同學(xué)互看一下。大家七嘴八舌但沒有一個標(biāo)準(zhǔn)。

后來教授又出了一道題目，他請兩個同學(xué)一組，面對面前后坐著，面向白板熒幕的同學(xué)能夠看到Smartwatch界面圖，請這位同學(xué)向背向白板的同學(xué)說明界面的樣子并請他畫出來。

經(jīng)過一番折騰，我的伙伴總算理解我的意思，但當(dāng)她轉(zhuǎn)過去面對白板時，“啊～”的一聲，原來，我所描述的和她理解還是有些距離。

于是我開始思考：交互設(shè)計不需要自身獨(dú)特的語言去準(zhǔn)確地傳達(dá)設(shè)計師的意圖嗎？

為了解決這個疑問，我去查了相關(guān)的資料，發(fā)現(xiàn)如何有效溝通交互設(shè)計的議題并不多，不過有一個比較完整的理論叫做“交互設(shè)計語言”。一開始不知道如何應(yīng)用這門語言時，有種霧里看花的感覺; 然而，一但概念通了之后，對于交互設(shè)計有了更深層的見解，仿佛打開了交互設(shè)計領(lǐng)域的另一扇窗。

三、交互設(shè)計語言的魔力

在交互設(shè)計語言中，最基礎(chǔ)的概念就是控件、聯(lián)動和物件，當(dāng)控件發(fā)生變化的時候，物件也隨之發(fā)生變化，即控件通過聯(lián)動控制了物件(如圖) ?！翱丶焙汀拔锛弊鳛椤拔铩庇兄芏鄬傩裕绱笮?，角度，顏色，位置等。當(dāng)兩個屬性之間有對應(yīng)關(guān)系，可以通過“控件的屬性”來改變“物件的屬性”，我們就可以感受到“控制力”。

我們通過鼠標(biāo)控制光標(biāo)的位置，然后光標(biāo)控制圖標(biāo)在桌面上的位置，這個過程有兩個操控關(guān)系。在不同的操控關(guān)系中，光標(biāo)可以是“物件”也可以是“控件”（如圖）； 而我們的雙手，通常是控件，畢竟是我們在操控某個對象。

交互設(shè)計語言里，將操控關(guān)系稱為聯(lián)動，在實(shí)際應(yīng)用上，因?yàn)橥ǔ２恢灰粋€聯(lián)動，而使情況變復(fù)雜。在交互設(shè)計語言中，還有像相對聯(lián)動、絕對聯(lián)動、循環(huán)邊界等詳細(xì)描述交互細(xì)節(jié)的概念。

下面我們通過兩個案例來說明交互設(shè)計語言在實(shí)踐中的作用！

四、實(shí)戰(zhàn)的威力

案例一：公交路線App

大眾交通類App是我們生活中不可或缺的工具。由于公車路線多且繁雜，所以每一條公交路線都需要單獨(dú)界面來表示。公交路線的介面一般用兩種形式來呈現(xiàn)。

• 第一種是，將兩個方向的終點(diǎn)站連起來，延展成一條長長的線（影片1）;
• 另一種方式則是，在路線介面上方，設(shè)置一個方向控制的按鈕，來改變路線的方向（影片1-1）。但因?yàn)橛行┕嚂慕K點(diǎn)掉頭返回起點(diǎn)，有些則不一定延著原路進(jìn)行，這樣的設(shè)計常常讓使用者混淆而找不到目的地。

該如何解決這個問題呢？

影片1（左）·影片1-1（右）

操控力視角的重要性

我們以韓國的T map大眾交通App的改進(jìn)方案為例，來說明操控力視角的重要性。首先，交互設(shè)計語言在看待這個問題時，會先以“操控力視角”去著手。

為了讓公交路線更直觀地顯示方向，利用操控力的概念，通過滾動列表來“控制”路線圖顯示的方向。因?yàn)槿藗冊谙蛏蠞L列表的時候，會下意識去查看往下的站點(diǎn)，所以顯示下行線，反之，往下滾列表時，則會下意識地查看往上的站點(diǎn)，所以顯示上行線，因此用戶可以透過滾動列表輕松地切換上下行線。

然而，如果用戶反復(fù)上下滾動，進(jìn)行上下行線的來回切換，會對用戶造成不必要的干擾，所以我們利用操控力視角的概念，用一個復(fù)選框來控制這個“操控關(guān)系”的開關(guān) ( 如影片2）這樣一來使用者在查詢公交路線就可以快速達(dá)成目標(biāo)。

案例二：微信的返回方式

當(dāng)你沉浸在看微信里的文章時，突然收到一條新訊息必須確認(rèn)，或是想到有一筆費(fèi)用要繳，這時候的你，不得已要反覆操作“返回”的鍵去處理，這個過程中，不僅復(fù)雜，有時候還會發(fā)現(xiàn)訊息并不重要，讀文章的思路還被打斷 （如圖）。

交互設(shè)計語言在面對這個問題時，首先會以操控力的思維來思考。要如何利用操控力，快速地在不同層之間轉(zhuǎn)換呢？經(jīng)過一連串的交互設(shè)計語言來理清思路后，發(fā)展出新的解決方法。

在從左至右拖動頁面返回上級的過程中稍微停頓一會，就會激活層級預(yù)覽和跳轉(zhuǎn)菜單。然后手指垂直移動就可以“操控”相應(yīng)的層級（收付款、微信、浮窗……等等），并且位于當(dāng)前的頁面會根據(jù)手指位置而產(chǎn)生頁面變化。

舉例來說，當(dāng)我們在閱讀朋友圈的文章時，可以利用這個功能，不關(guān)閉當(dāng)前的文章，“撇見”消息發(fā)送者及內(nèi)容簡要；又或者輪到我們結(jié)帳時，可以迅速地到收付款的頁面。這樣跨越式地完成了層級之間的跳轉(zhuǎn)，大大縮短了操作步驟。（如影片）

Part 5：起掌握與萬物對話的藝術(shù)吧！

其實(shí)與萬物的交互都可以用“控制力”來解釋，它是一個抽象的視角，從中有無限的可能性。我們很長時間，在物理規(guī)律的限制下簡單地對物理實(shí)體進(jìn)行“操控”。隨著技術(shù)的進(jìn)步，我們開始控制能量并開始更精確地“控制”物質(zhì)。計算機(jī)技術(shù)更讓我們對“操控力”有更近一步的理解。交互設(shè)計領(lǐng)域，確實(shí)需要一套語言來了解其奧理，讓團(tuán)隊溝通更順暢并創(chuàng)新。

交互設(shè)計語言能夠幫助交互設(shè)計師能更清楚理清問題的脈絡(luò)，進(jìn)而達(dá)成更有效的團(tuán)隊溝通。

傳統(tǒng)的設(shè)計流程需要多次的開發(fā)原型迭代才能不斷改良，成本高且周期長（ 圖1）； 應(yīng)用交互設(shè)計語言的設(shè)計流程，則是在思維層面進(jìn)行多次迭代，成本低且周期短，能夠減少不必要的迭代，并且最大化每一次的價值 (圖2)。

傳統(tǒng)設(shè)計流程：

（圖 1）

應(yīng)用交互設(shè)計語言的設(shè)計流程：

（圖2）

注：微信案例、解鎖案例中所用的交互設(shè)計，已在中國和韓國申請了設(shè)計專利。

作者：Yvonne，曾在臺灣新創(chuàng)、韓國科技公司擔(dān)任 Marketing executive。目前就讀韓國國民大學(xué)交互設(shè)計研究所。熱愛科技設(shè)計、生活、旅行，期許能為社會帶來美好。

圖片：Yvonne，微信公眾號：網(wǎng)易UEDC

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@網(wǎng)易UEDC，作者@Yvonne

題圖來自Unsplash，基于CC0協(xié)議