一招帶你了解交互設計前沿理論
在我們日常生活中到處都充滿著交互設計,有時候你在使用某個APP的時候,你覺得很好用,而有的卻很難有,這是為什么呢?本文通過了兩個實際案例,跟大家講解了交互設計語言在實踐中的作用!enjoy~
一、我們生活中充滿著交互設計
每天滑手機的你,能想像在熒幕上做的那些簡單的點擊、滑動……等等動作都暗藏著玄機嗎?你是否也曾經感受到某些App的界面很難用,某些卻用的很舒服?
上述所描述的問題,都是可以通過交互設計來解決。
電腦的出現開啟了另一波科技革命的時代,交互設計也應此而誕生。
它是基于圖形用戶界面的基礎,發展到現在仍是個較年輕的學科。相較于傳統的工業設計,交互設計學科的很多知識體系尚不成熟和完善。
也因此,在團隊合作中常常出現溝通不良的問題,交互設計師想表示A,產品經理解釋成B,程序員理解成C,最后的產物,令人感到驚嚇的程度常常多過于令人驚喜呢!
二、拖拽和甩動的區別是什么
還記得第一次上交互設計課的我,所受到的沖擊。
當時教授問我們一個相當簡單的問題:拖拽和甩動的區別是什么?
臺下所有的同學都舉起手指,朝空氣中劃一劃,皺著眉頭和左右同學互看一下。大家七嘴八舌但沒有一個標準。
后來教授又出了一道題目,他請兩個同學一組,面對面前后坐著,面向白板熒幕的同學能夠看到Smartwatch界面圖,請這位同學向背向白板的同學說明界面的樣子并請他畫出來。
經過一番折騰,我的伙伴總算理解我的意思,但當她轉過去面對白板時,“啊~”的一聲,原來,我所描述的和她理解還是有些距離。
于是我開始思考:交互設計不需要自身獨特的語言去準確地傳達設計師的意圖嗎?
為了解決這個疑問,我去查了相關的資料,發現如何有效溝通交互設計的議題并不多,不過有一個比較完整的理論叫做“交互設計語言”。一開始不知道如何應用這門語言時,有種霧里看花的感覺; 然而,一但概念通了之后,對于交互設計有了更深層的見解,仿佛打開了交互設計領域的另一扇窗。
三、交互設計語言的魔力
在交互設計語言中,最基礎的概念就是控件、聯動和物件,當控件發生變化的時候,物件也隨之發生變化,即控件通過聯動控制了物件(如圖) ?!翱丶焙汀拔锛弊鳛椤拔铩庇兄芏鄬傩?,例如大小,角度,顏色,位置等。當兩個屬性之間有對應關系,可以通過“控件的屬性”來改變“物件的屬性”,我們就可以感受到“控制力”。
我們通過鼠標控制光標的位置,然后光標控制圖標在桌面上的位置,這個過程有兩個操控關系。在不同的操控關系中,光標可以是“物件”也可以是“控件”(如圖); 而我們的雙手,通常是控件,畢竟是我們在操控某個對象。
交互設計語言里,將操控關系稱為聯動,在實際應用上,因為通常不只一個聯動,而使情況變復雜。在交互設計語言中,還有像相對聯動、絕對聯動、循環邊界等詳細描述交互細節的概念。
下面我們通過兩個案例來說明交互設計語言在實踐中的作用!
四、實戰的威力
案例一:公交路線App
大眾交通類App是我們生活中不可或缺的工具。由于公車路線多且繁雜,所以每一條公交路線都需要單獨界面來表示。公交路線的介面一般用兩種形式來呈現。
- 第一種是,將兩個方向的終點站連起來,延展成一條長長的線(影片1);
- 另一種方式則是,在路線介面上方,設置一個方向控制的按鈕,來改變路線的方向(影片1-1)。但因為有些公車會從終點掉頭返回起點,有些則不一定延著原路進行,這樣的設計常常讓使用者混淆而找不到目的地。
該如何解決這個問題呢?
影片1(左)·影片1-1(右)
操控力視角的重要性
我們以韓國的T map大眾交通App的改進方案為例,來說明操控力視角的重要性。首先,交互設計語言在看待這個問題時,會先以“操控力視角”去著手。
為了讓公交路線更直觀地顯示方向,利用操控力的概念,通過滾動列表來“控制”路線圖顯示的方向。因為人們在向上滾列表的時候,會下意識去查看往下的站點,所以顯示下行線,反之,往下滾列表時,則會下意識地查看往上的站點,所以顯示上行線,因此用戶可以透過滾動列表輕松地切換上下行線。
然而,如果用戶反復上下滾動,進行上下行線的來回切換,會對用戶造成不必要的干擾,所以我們利用操控力視角的概念,用一個復選框來控制這個“操控關系”的開關 ( 如影片2)這樣一來使用者在查詢公交路線就可以快速達成目標。
案例二:微信的返回方式
當你沉浸在看微信里的文章時,突然收到一條新訊息必須確認,或是想到有一筆費用要繳,這時候的你,不得已要反覆操作“返回”的鍵去處理,這個過程中,不僅復雜,有時候還會發現訊息并不重要,讀文章的思路還被打斷 (如圖)。
交互設計語言在面對這個問題時,首先會以操控力的思維來思考。要如何利用操控力,快速地在不同層之間轉換呢?經過一連串的交互設計語言來理清思路后,發展出新的解決方法。
在從左至右拖動頁面返回上級的過程中稍微停頓一會,就會激活層級預覽和跳轉菜單。然后手指垂直移動就可以“操控”相應的層級(收付款、微信、浮窗……等等),并且位于當前的頁面會根據手指位置而產生頁面變化。
舉例來說,當我們在閱讀朋友圈的文章時,可以利用這個功能,不關閉當前的文章,“撇見”消息發送者及內容簡要;又或者輪到我們結帳時,可以迅速地到收付款的頁面。這樣跨越式地完成了層級之間的跳轉,大大縮短了操作步驟。(如影片)
Part 5:起掌握與萬物對話的藝術吧!
其實與萬物的交互都可以用“控制力”來解釋,它是一個抽象的視角,從中有無限的可能性。我們很長時間,在物理規律的限制下簡單地對物理實體進行“操控”。隨著技術的進步,我們開始控制能量并開始更精確地“控制”物質。計算機技術更讓我們對“操控力”有更近一步的理解。交互設計領域,確實需要一套語言來了解其奧理,讓團隊溝通更順暢并創新。
交互設計語言能夠幫助交互設計師能更清楚理清問題的脈絡,進而達成更有效的團隊溝通。
傳統的設計流程需要多次的開發原型迭代才能不斷改良,成本高且周期長( 圖1); 應用交互設計語言的設計流程,則是在思維層面進行多次迭代,成本低且周期短,能夠減少不必要的迭代,并且最大化每一次的價值 (圖2)。
傳統設計流程:
(圖 1)
應用交互設計語言的設計流程:
(圖2)
注:微信案例、解鎖案例中所用的交互設計,已在中國和韓國申請了設計專利。
作者:Yvonne,曾在臺灣新創、韓國科技公司擔任 Marketing executive。目前就讀韓國國民大學交互設計研究所。熱愛科技設計、生活、旅行,期許能為社會帶來美好。
圖片:Yvonne,微信公眾號:網易UEDC
本文來源于人人都是產品經理合作媒體@網易UEDC,作者@Yvonne
題圖來自Unsplash,基于CC0協議
gif要是更清晰些就好了!
厲害,讀兩遍才讀懂
微信的那個交互確實跟現有的不一樣,現有的是通過浮窗的方式展現
期待學習更多交互知識,希望可以有感興趣的伙伴一起討論成長
微信那個功能有出現過嗎?在哪個版本,我怎么從來沒見過
圖片畫質感人 ??
感覺視野開通了不少
原來微信返回時出現的那個圈圈是這個功能,我怎么從來就沒想過它的用處呢