如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，?請點這里 

UI和交互設(shè)計中常常會強調(diào)某項設(shè)計需要足夠的“直覺性”，但是直覺性的設(shè)計說來容易，實現(xiàn)卻往往差強人意。但是不得不承認，它是目前交互和UI設(shè)計的剛需。

仔細想想，符合用戶直覺的設(shè)計往往能夠更快地獲得用戶信任。符合用戶直覺的UI和交互邏輯會在用戶初次操作的時候不斷地進行匹配，而用戶在這個過程匯總，主觀感受會從操作前的“應(yīng)該是這樣吧？”變?yōu)橥瓿芍蟮摹肮痪褪沁@樣！”，如此一來，用戶會在使用過程中不斷地“驗證”自己的直覺，即使操作中有若干設(shè)計不是那么順暢，這個APP或者網(wǎng)頁也能在總體上獲得用戶的信任。

實際上，從上世紀七八十年代開始，各大科技企業(yè)都在鼓吹直覺式的界面，然而，用戶看到的大都是這樣的界面：

 

這樣的界面：

 

以及這樣的界面：

 

在個人電腦還沒走入家庭的時代，恐怕也就只有按鈕這種交互控件看起來足夠“直覺”吧？

不得不承認的是，直到今天，我們的父輩當中，還有許多人還在“學(xué)習使用”手機和軟件。

我們的UI與交互依然不夠直覺。

了解直覺

首先得明白什么是直覺。直覺（intuition）是一種不受人類意志控制的一種特殊的思維方式，它是不經(jīng)過邏輯思考和分析推理而的出來的觀點，這是一個無意識的過程，它類似于本能，是復(fù)雜情境下無意識、合乎目的的領(lǐng)悟。另外一方面，直覺也是基于人的經(jīng)驗、職業(yè)、閱歷、知識和本能的，腦中的記憶、體驗和經(jīng)驗與五感所接受到的信息結(jié)合到一起，跳過邏輯思維，將信息結(jié)果直接呈現(xiàn)出來，可以說它是人類的本能知覺之一。

人類的直覺式思維是如此的典型，設(shè)計師可以合理地運用其中的的特性來構(gòu)建可用的UI模式、交互方式，甚至成熟可用的產(chǎn)品。從直覺的定義當中

 

·直接快速：“下意識”的行為，無需分析而獲得整體認知
·跳躍性：擺脫常規(guī)束縛，疾速飛躍的認知過程
·個特性：與用戶的知識、經(jīng)驗、思維方式緊密關(guān)聯(lián)，擁有明顯的個體特征
·主觀性：用戶直覺是主觀認知，不一定符合客觀的對錯，同時對于直覺有本能的信念

雖然直覺本身看起來“非邏輯”，但是直覺式的UI和交互還是以符合邏輯的方式構(gòu)建起來，因為直覺同樣是基于用戶的經(jīng)驗和習慣。

直覺式的交互

曾為蘋果設(shè)計第一款鼠標的設(shè)計師 David Kelley 目前供職于IDEO，在交互設(shè)計領(lǐng)域有著豐富的經(jīng)驗。在為蘋果公司設(shè)計鼠標的時候，他曾想過使用軌跡球來替代鼠標。

 

“想象一下，如果桌面上反過來一顆球讓你去轉(zhuǎn)動控制，感覺應(yīng)該比鼠標運作順暢些。我們原本認為這是個好點子……可是我以前從未觀潮這種觸感的細節(jié)?！?/span>

之后Dived和他的團隊終于有機會研發(fā)軌跡球了，當時需要替3~5歲的小用戶設(shè)計一個建議的操作裝置，合作方是著名的芝麻街美語，過程十分有意思。

“當孩子們操作鼠標和遙控桿的時候，會不自覺地低頭看輸入裝置……后來有人想到，如果操作時運動肌肉群范圍較大，也許他們可以不必低頭。我們做了一個大型軌跡球裝置，讓他們可以用手臂甚至肩膀牽動來操作，這樣就把問題解決了?！?/span>

產(chǎn)品并不復(fù)雜，過程稱得上有意思，這個兒童軌跡球從頭至尾都稱得上是一個相當直覺的產(chǎn)品。值得注意的是，這個軌跡球從最早的構(gòu)思到后期的產(chǎn)品之間，橫亙著十多年的觀察和沉淀。

“我們先是觀察什么樣的操作方式比較合乎自然，然后提出想法，再進行測試。”

結(jié)合直覺的概念，我們不難從基本的概念中引伸出直覺式交互的一些關(guān)鍵點：

·基于現(xiàn)實與經(jīng)驗：直覺是經(jīng)驗積累和感官觸發(fā)之后的“靈光一現(xiàn)”
·符合預(yù)期：“第六感”直接給出的“結(jié)果”就是用戶的預(yù)期
·低學(xué)習成本：雖是近乎本能地上手操作，但是依然需要一個學(xué)習和適應(yīng)的過程，這個過程通常非常短
·一定的適用性：由于它是基于經(jīng)驗，所以它的適用范疇通常是有過類似體驗或者經(jīng)驗的用戶

行為模式與心智模型

我們常說的行為模式，是一群人執(zhí)行某種任務(wù)行為的抽象畫概括，是用來衡量和分析的基礎(chǔ)。直覺下的行為是無意識的行為，它本身也是人類在長期生活過程中所逐漸積累下一套有效率的行為模式，是無意識信息的重新組織的結(jié)果。

這也是為何在進行產(chǎn)品的交互設(shè)計的過程中需要用到心智模型。1986年 Susan Carey 在她的論文《Cognitive Science and Science Education》是這樣界定心智模型的：

“心智模型指一個人對于事物運作的思維過程，即一個人對于周遭世界的理解。心智模型的基礎(chǔ)是不完整的顯示、過去的經(jīng)驗甚至直覺感知。它有助于形成人的動作和行為，影響人在復(fù)雜情況下的關(guān)注點，并確定人們?nèi)绾沃纸鉀Q問題?！?/span>

直覺是心智模型中不可忽視的重要組成部分，它是可預(yù)期且是可控的，自然也是設(shè)計過程中可用的。以目前最著名的郵箱服務(wù)Gmail為例：

 

郵箱中所承載的郵件類型多樣，牽涉到的事務(wù)龐雜多樣，從中篩選出重要的事件并給用戶以日程提醒，這是一種相當直覺、非常自然的需求延伸，在這個心智模型中就體現(xiàn)出來了。借由第三方的服務(wù)的連接，它以Business Diary 的形式呈現(xiàn)出來。

當然，這只是一個實例，在UI設(shè)計和交互設(shè)計過程中，心智模型基本也是設(shè)計過程中難以回避的環(huán)節(jié)。

直覺式的交互

我們對于現(xiàn)實世界的認知、了解和習慣是構(gòu)成直覺的基礎(chǔ)，同樣的，直覺式的交互的基礎(chǔ)同樣源自于現(xiàn)實世界。

如今的我們已經(jīng)步入數(shù)字化的時代，我們每天面對著各式各樣的屏幕，多種多樣的界面，而我們最初接觸也是最早產(chǎn)生認知的應(yīng)該就是按鈕這種控件了。

雖然圖形化界面（GUI）在70年代中期就已經(jīng)出現(xiàn)，但是真正富有現(xiàn)實質(zhì)感的擬物化的按鈕設(shè)計大概直到1984年 Macintosh 發(fā)布才勉強看到影子（更早的按鈕就是個方框）：

 

初代Macintosh 系統(tǒng)中的計算器

而家用電腦操作系統(tǒng)霸主Windows 甚至是到1990年的Windows 3.0 時代，才擁有了讓用戶一眼就認出來的按鈕設(shè)計：

 

在個人電腦開始廣泛普及的98年，兩家大廠在按鈕和窗口的設(shè)計上，開始越來越貼近用戶的直覺認知：

 

為了更加貼近現(xiàn)實，讓界面更加真實，MacOSX率先邁出了擬物化的步伐，推出了Aqua的概念，并在第三個開發(fā)版發(fā)布的時候，應(yīng)用到界面的每個角落：

（如果你仔細觀察，會發(fā)現(xiàn)這個時候的設(shè)計師將紙的紋理運用到窗口上，此處的設(shè)計和Material Design 中紙的隱喻不謀而合，這又何嘗不是一種潛意識的引導(dǎo)呢？）

隨后微軟在Windows Vista 中運用了名為Aero 的設(shè)計風格，讓按鈕和窗口充滿了光影細節(jié)，至少按鈕的設(shè)計更加突出了：

桌面端交互基本還是依賴鼠標鍵盤來操作，而移動端則截然不同。從90年代初手持掌上設(shè)備開始，各路設(shè)計師就沒在移動端設(shè)備上少花費心思。Palm的“四大天王”按鍵和GTD，黑莓那充滿歐美血統(tǒng)的快捷鍵交互，Sony 的Clie系列的Jog Dial 滾輪所帶來的單手交互，前四代亞馬遜Kindle 兩側(cè)的翻頁按鍵交互，這些都是比較典型的借助硬件來完成軟件交互的范例。按鈕和滾輪是絕大多數(shù)的用戶所熟知的交互媒介，合理的設(shè)計這些硬件賦予了移動端設(shè)備更強的易用性。

iPhone 問世之后，電容屏逐漸成了標準配置，觸摸屏讓交互設(shè)計擁有了更多的可能性和更多值得探究的縱深。這個時候，隔著屏幕借助按鈕和觸控筆間接交互的時代一去不復(fù)返，手指作為一種更為本能的媒介，在一塊扁平的觸摸屏上，使用我們自出生以來就習得的方式，與虛擬的控件進行交互。交互距離直覺更近了。

點按

從有觸摸屏開始，手指點按就不再需要長期借助其他的硬件來完成了。雖然早期的按鈕，受限于屏幕尺寸并不會設(shè)計的太大，但是有諸如電腦這樣的硬件設(shè)備在前面鋪墊，絕大多數(shù)的用戶至少能夠直覺地區(qū)分開小屏幕上的按鈕和其他內(nèi)容。

 

而早期iOS的擬物化設(shè)計讓按鈕擁有了更強的質(zhì)感，更加貼近用戶認知，用戶、設(shè)計師、產(chǎn)品人對于擬物化設(shè)計的追捧以及之后的依依不舍并不是毫無道理的。扁平化之后的按鈕和其他組件的設(shè)計，經(jīng)歷了好幾年的混亂時期，直到Flat 2.0 和 Material Design 的興起和后期iOS的設(shè)計調(diào)整，扁平化的風潮這才基本站穩(wěn)了腳跟。（Metro 一直都是這個領(lǐng)域的反面典型）

目前能夠稱得上是直覺的交互并不算太多，但是它們的內(nèi)在邏輯倒是相當值得學(xué)習和探究。

滑動與滑動解鎖

滑動也是相當直覺的交互，人類慣于使用滑動觸摸的方式來認知和了解這個世界。在硬質(zhì)的電容屏幕上，有的用戶無需引導(dǎo)就能直接開始通過手指滑動來滾動Android 1.5 的APP列表界面。而此時更加值得一提的，應(yīng)該是iOS上的滑動解鎖的經(jīng)典設(shè)計。

iOS 7 之前的滑動解鎖界面采用的典型的擬物化設(shè)計，控件包含一個看起來凹下去的滑動槽和其中凸起的按鈕，按鈕中向內(nèi)凹陷的箭頭指引著用戶滑動方向，槽中的文字“slide to unlock”還通過向右流動的光線給予用戶強化滑動方向的暗示，絕大部分的用戶會在這種視覺引導(dǎo)下直覺地完成這個交互。解鎖完成之后，解鎖的音效則讓用戶對于解鎖的預(yù)期和結(jié)果達成一致，這個交互會很快在用戶的大腦勾回成留下痕跡，越發(fā)的本能。

 

雙指縮放

同滑動解鎖略有不同，雙指縮放很容易理解，但是大多需要界面進行初次引導(dǎo)之后，用戶才會學(xué)會。不過這種交互的學(xué)習成本非常低，雙指縮放的手勢本身也符合用戶對于大小縮放的認知。

托拽

在家用電腦還處于普及階段的時候，使用鼠標托拽圖標是許多初學(xué)者學(xué)習得并不那么愉悅的一種操作，畢竟隔著鼠標和屏幕。與之相反的是，在觸摸屏上用戶可以很快的明白托拽的精髓，按住，劃動即可。這種交互在現(xiàn)實生活中并不少見，在屏幕上操作也得心應(yīng)手。如果你仔細觀察會發(fā)現(xiàn)，如今即使是專業(yè)的工具，也越來越多地開始拿托拽式交互作為賣點，因為它確實切實地降低了用戶的前期學(xué)習成本。

下拉刷新

和滑動解鎖略有不同，下拉刷新并沒有那么明顯的視覺線索，但是借助動效和前期引導(dǎo)，下拉刷新會讓用戶極快地上手，并且樂此不疲地使用這種交互方式。下拉刷新這種交互方式很有意思，下拉是一種直覺式的操作，刷新出來的內(nèi)容則是這種交互帶給用戶的結(jié)果，這種結(jié)果可以預(yù)期也是用戶所期待的，介于兩者之間的動效則縮小了用戶等待的主觀感受上的時長，甚至某些動效讓用戶深陷其中愛不釋手，比如iOS 6時代的Podcasts 的下拉刷新的動效。

 

雙擊

正如前文所述，直覺并非一成不變，它是發(fā)展和漸進演變的。對于現(xiàn)在的用戶而言，許多在之前都使用過鼠標，或者看過長輩使用鼠標，雙擊這種操作雖然始于規(guī)則，但已經(jīng)是近乎習慣的存在了。雙擊操作脫胎于硬件操作，所以它在移動端設(shè)備上也常常同實體按鍵連接到一起，比如雙擊Home鍵之類的。

雙擊耳機上的按鍵切換下一首歌這種操作，應(yīng)該和雙擊操作一本同源。有意思的是，許多系統(tǒng)和硬件都設(shè)定了連按3下切換上一首歌的操作，但是知道的人并不算多，慣于如此操作的人則更少。這就是有意思的地方：雙擊交互已經(jīng)因其前期的普及性，已經(jīng)成為許多用戶的“直覺”，而連按3下則是在雙擊基礎(chǔ)上發(fā)展出的一種操作規(guī)則，它缺少直覺性，相應(yīng)的普及度則少的多。

卡片式UI

卡片式UI 最大的特色是源自于現(xiàn)實生活的卡片的“隱喻”，多種多樣的卡片和內(nèi)容投射到界面，讓卡片控件作為不同內(nèi)容的載體，成了用戶極容易接受的一種設(shè)定。Material Design 是卡片式UI中的一個重要分支，不過Material Design 更為規(guī)整而系統(tǒng)，它所采用的隱喻更偏向于“紙”?？ㄆ経I 作為框架，將UI設(shè)計中不同的功能和不同的內(nèi)容格式化到一套整飭的卡片體系當中，降低UI和不同交互的學(xué)習成本，而卡片也常常作為不同層次內(nèi)容的溝通媒介，形同桌面端界面中的“窗口”，甚至更加強大。

漢堡圖標與界面模式

這個時候不得不提一下漢堡圖標。五年前探討漢堡圖標的時候，可以說它和直覺交互毫無關(guān)聯(lián)，但是隨著時間的推移，在數(shù)字時代的“棲居者”越來越多的今天，漢堡圖標無處不在，它逐步成為按鈕中廣泛被認知的存在，就像扳手和齒輪的圖標意味著“設(shè)置”、“設(shè)定”一樣，漢堡圖標已經(jīng)成為界面模式中的一個基礎(chǔ)設(shè)施了，以前它代表“菜單”，現(xiàn)在它就是“菜單”。

正如同剛剛探討雙擊操作一樣，時間和大眾認知的改變讓一個事物從非直覺化的存在，逐步變?yōu)橐环N無需思考過程就能明白含義的東西。

這也是我們學(xué)習界面模式、使用界面模式的一個重要依據(jù)。隨著時間的推移，越來越多的界面設(shè)計模式和交互模式開始成為一種固定的搭配、用戶所習慣的存在，一些更為基礎(chǔ)的控件和交互已經(jīng)成為許多用戶“直覺”的一部分。

遵循自然邏輯的交互模式

就像我們所知道的一樣，交互設(shè)計是一門還很年輕的學(xué)科，它一直高速地向前發(fā)展，并且不斷的將新的技術(shù)、知識納入其中，融會貫通，創(chuàng)造新的可能性。技術(shù)的發(fā)展讓直覺式的交互了有了新的轉(zhuǎn)機。

的確，在很長的一段時間里面，我們的數(shù)字設(shè)備始終遵循著有序的、樹狀的結(jié)構(gòu)，將內(nèi)容和功能呈現(xiàn)在用戶面前，但是人類的認知并非是這樣的結(jié)構(gòu)，這也是新用戶最初面對數(shù)字設(shè)備的主要學(xué)習成本來源之一。傳統(tǒng)的界面用起來還不夠“自然”，還不夠“人性”。

而現(xiàn)在有了新的契機，大數(shù)據(jù)、機器學(xué)習、人工智能（AI）、語音交互、虛擬現(xiàn)實（VR）和現(xiàn)實增強（AR）等新的技術(shù)讓交互技術(shù)可以向著自然邏輯的方向走得更遠。

毫無疑問，我們之前聊的“界面模式”是過去40年間若干次技術(shù)革面在圖形化界面這個基礎(chǔ)上搭建起來的交互的大樓，而語音，手勢，虛擬現(xiàn)實和現(xiàn)實世界正在新技術(shù)的催化下，逐步耦合到一起。

基于某些眾所周知的原因，Google Now 是大家安卓手機上極為雞肋的一個存在，但是仔細想想，它可能是目前在交互上走的最遠的一項服務(wù)。大數(shù)據(jù)和機器學(xué)習讓Google Now 每天都更加了解你，在特定的時間特定的地點，你拿起手機它就會知道要給你提供什么，它就是你的直覺。它遵循你的習慣、你的操作、你的生活起居，它明白你的目的、明白你的需求、明白你可能需要什么，它就是你的“直覺”。

實際上，Apple也在讓Siri更加強大，它和Google Now 一樣正在試圖成為更懂你的人工智能，成為你日常交互的組成部分，成為你生命中的“基礎(chǔ)設(shè)施”。

當然，如果說有什么需要擔心的，大概就是這倆AI什么時候擁有了自己的之后開始搭建屬于自己的“天網(wǎng)”吧。（笑）

結(jié)語

強調(diào)直覺設(shè)計的重要，實際上是因為直覺設(shè)計的缺失。我們常?！皾M腦子的騷操作”，但是很少回過頭去仔細審視那些最基本的東西。在如今的UI界面交互設(shè)計中，真正帶來革命性影響的，絕大多數(shù)的來說源自于蘋果、谷歌以及后期Palm webOS團隊的那些人，而后者大多數(shù)也基本源于蘋果等幾家設(shè)計公司（Matias Duarte除外）。而我們所仰慕的（或者常常被吐槽的）公司，作為先行者一直在思考一些最原始、最初級的問題。

交互的未來還有很遠的路要走，直覺式的設(shè)計從來都是交互的最基本問題，做好準備吧。

（注：本文轉(zhuǎn)載自公眾號集創(chuàng)堂）

 

藍藍設(shè)計( m.sillybuy.com?)是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計?、 cs界面設(shè)計?、 ipad界面設(shè)計?、 包裝設(shè)計?、 圖標定制?、 用戶體驗 、交互設(shè)計、?網(wǎng)站建設(shè)?、平面設(shè)計服務(wù)