交互設(shè)計(jì)：如何做到驚喜？

2020-3-1    ui設(shè)計(jì)分享達(dá)人

保持好奇，巧妙融合，追求卓越，自然而然


上一篇，探討了如何做到品質(zhì)。這一篇，探討下如何做到驚喜。

一家之言，未必全面，甚至未必正確。歡迎交流探討。


01
交互設(shè)計(jì)的驚喜，是什么？

之前的文章，有簡(jiǎn)單定義過(guò)交互設(shè)計(jì)的“驚喜”，即為：超出用戶(hù)預(yù)期，并讓用戶(hù)開(kāi)心。

具體而言有兩類(lèi)，分別是：小驚喜、大驚喜。

1 小驚喜

所謂小驚喜，是指一些頗具趣味性或人文屬性的交互設(shè)計(jì)小細(xì)節(jié)。


先說(shuō)趣味性。常見(jiàn)的有兩類(lèi)，第一類(lèi)是比較好玩的動(dòng)效，第二類(lèi)是一些小功能。第二類(lèi)有時(shí)也會(huì)包含第一類(lèi)。

動(dòng)效這塊，大家比較熟悉的，有 iPhone 上刪除應(yīng)用前圖標(biāo)的抖動(dòng)，仿佛是嚇的發(fā)抖，也可能是在搖頭求饒；還有移動(dòng)端登錄 B 站、輸入密碼時(shí)，動(dòng)畫(huà)人物的捂眼捂臉動(dòng)作。

(B 站登錄頁(yè)面)

小功能這塊，也可以分成兩類(lèi)。一類(lèi)是隱藏的小功能，一類(lèi)是有趣的小功能。


很多隱藏功能，頭幾次用的時(shí)候，多少會(huì)有一些驚喜之感。

比如在訂閱號(hào)消息列表頁(yè)，某個(gè)公眾號(hào)你已經(jīng)幾個(gè)月沒(méi)看過(guò)，對(duì)它失去了興趣和信任。這時(shí)，嘗試長(zhǎng)按這個(gè)公眾號(hào)的頭像或名稱(chēng)，會(huì)呼出一個(gè)包含“刪除消息”和“取關(guān)”功能的彈窗。

(訂閱號(hào)消息列表)

還有些隱藏功能，既能讓用戶(hù)覺(jué)得驚喜和方便，又能引發(fā)用戶(hù)思考。這種思考，可能會(huì)讓用戶(hù)感嘆設(shè)計(jì)之妙，也可能也會(huì)給用戶(hù)一種猜對(duì)謎語(yǔ)的欣喜之感。

比如用墨刀的時(shí)候，嘗試按數(shù)字鍵 1，會(huì)呼出“內(nèi)置組件”這個(gè)使用頻率非常高的功能，會(huì)讓人覺(jué)得墨刀很聰明。

如果再仔細(xì)看一下，會(huì)發(fā)現(xiàn)，“內(nèi)置組件”的縮略圖標(biāo)，和其他 4 個(gè)諸如“我的組件”、“圖標(biāo)”等功能的縮略圖標(biāo)，并成一列。這 5 個(gè)縮略圖標(biāo)的排列順序（上到下），和它們快捷鍵（"、"鍵和數(shù)字鍵1、2、3、4）的排列順序（左到右），是完全一致的。不得不說(shuō)，這是一個(gè)簡(jiǎn)單又巧妙的設(shè)計(jì)。


再比如朋友圈里，某個(gè)不熟的好友每天都發(fā)集贊的小廣告，搞的我們不勝其煩。長(zhǎng)按其頭像，會(huì)呼出設(shè)置權(quán)限（屏蔽等）的功能。

有意思的是，長(zhǎng)按好友名字，則不會(huì)呼出這個(gè)功能。要知道點(diǎn)擊頭像或名字是都能進(jìn)入好友主頁(yè)的；另外剛才那個(gè)例子，長(zhǎng)按公眾號(hào)頭像或名字，也都能呼出取關(guān)的彈窗。

個(gè)人的理解，生活中，我們用力長(zhǎng)按一個(gè)人，通常是表達(dá)強(qiáng)烈不滿(mǎn)，比如打架時(shí)。比起長(zhǎng)按名字，長(zhǎng)按頭像更像是長(zhǎng)按真人，所以也更能表達(dá)我們的不滿(mǎn)。


說(shuō)完隱藏的小功能，再說(shuō)下有趣的小功能。比如微信聊天里的扔骰子、石頭剪刀布，微信給朋友發(fā)生日快樂(lè)后漫天飄落的蛋糕，拍照軟件里的貼紙，等等。

最后說(shuō)下帶有人文屬性的交互設(shè)計(jì)小細(xì)節(jié)。常見(jiàn)的有如下類(lèi)型：幫助弱勢(shì)、關(guān)照情緒、表達(dá)情感、保護(hù)隱私。


幫助弱勢(shì)這塊，比如 iPhone 的輔助功能，里面有針對(duì)視力障礙的放大鏡功能、有針對(duì)不識(shí)字群體的旁白功能。

關(guān)照情緒這塊，很重要的一點(diǎn)，就是避免引起用戶(hù)的負(fù)面情緒。比如微信的刪好友是單方面刪除，被刪時(shí)我們很難察覺(jué)到，而且微信也不會(huì)通知我們。個(gè)人覺(jué)得，微信之所以不通知我們，其中一點(diǎn)，就是不給我們添堵。類(lèi)似的還有，微信消息沒(méi)有“已讀”功能，這就大大減輕了接收者的回復(fù)壓力。

表達(dá)情感這塊，比較為人所知的例子，5 月 20 號(hào)這天，微信紅包的限額，從 200 元升到了 520 元。還有一個(gè)例子，在微信聊天里發(fā)一個(gè)“ohh”，長(zhǎng)按并點(diǎn)翻譯，結(jié)果也是一個(gè)驚喜。

保護(hù)隱私這塊，比如借助 iPhone 的“引導(dǎo)式訪問(wèn)”功能，可以讓小朋友只能訪問(wèn)你的某個(gè)視頻應(yīng)用來(lái)看動(dòng)畫(huà)片。再比如別人用你電腦的時(shí)候，如果你不想讓對(duì)方看到你的微信，就可以通過(guò)手機(jī)微信來(lái)鎖定或退出電腦版微信。

2 大驚喜

所謂大驚喜，是指那些系統(tǒng)性大創(chuàng)新，并且能夠引領(lǐng)潮流、代表未來(lái)的交互設(shè)計(jì)。通常而言，這些大驚喜，最開(kāi)始給用戶(hù)的感覺(jué)，就是酷。

iPhone 就是典型例子之一 。

2007 年的初代 iPhone，帶來(lái)了當(dāng)時(shí)的大屏幕：3.5 寸屏幕，以及純觸摸屏，和極為靈敏的觸控體驗(yàn)。

2011 年，Siri 同 iPhone 4S 一起問(wèn)世，為我們帶來(lái)了語(yǔ)音交互。如今，在 100 元就能買(mǎi)到品牌類(lèi)智能音響的情況下，依靠語(yǔ)音交互的智能音響也在慢慢走入尋常百姓家。

也許后喬布斯時(shí)代的 iPhone 創(chuàng)新不如以前，但不可否認(rèn)的是，時(shí)至今日，iPhone 依然在引領(lǐng)潮流，在給我們大驚喜。比如這幾年流行的手機(jī)無(wú)線充電和以 AirPods 為代表的極簡(jiǎn)的無(wú)線耳機(jī)。

以上是比較廣為人知的交互設(shè)計(jì)，還有一些不太為人所知的設(shè)計(jì)。比如在家里網(wǎng)購(gòu)一條床單，但是不知道床的尺寸，家里又沒(méi)有尺子。這時(shí)，打開(kāi) iPhone 里的測(cè)距儀這款 App，就可以量出床的尺寸，會(huì)不會(huì)覺(jué)得有點(diǎn)酷。

(測(cè)距儀 App)

微信在引領(lǐng)潮流方面也有一些建樹(shù)，比如極大的普及了二維碼和掃一掃。小程序作為一種體驗(yàn)接近原生 App、同時(shí)又不用下載的產(chǎn)品，也正在引領(lǐng)新一輪的潮流。

還有一個(gè)比較酷的功能，就是以圖搜圖。筆者最早用過(guò)百度和谷歌的相關(guān)功能，主要是在電腦上搜索相似的圖片，使用頻率極低。

假設(shè)一個(gè)場(chǎng)景，比如在路上看到一個(gè)陌生人的外套很好看，但又不好意思上前問(wèn)，就可以拿起手機(jī)，利用淘寶的拍立淘功能，拍張照就能馬上看到相同或相似的商品。

如果淘寶上沒(méi)有搜到類(lèi)似商品，還可以用微信的掃一掃識(shí)物。和拍立淘相比，區(qū)別之處有兩點(diǎn)。第一，不用拍，直接能識(shí)別，不過(guò)通常得等 1-3 秒；第二，識(shí)物結(jié)果里面，除了商品，可能還會(huì)有百科詞條和資訊。


02
交互設(shè)計(jì)：如何做到驚喜？

個(gè)人覺(jué)得，有 4 個(gè)要點(diǎn)：既要有好奇心，又要有卓越心；既要天馬行空，又要保持自然。

聽(tīng)起來(lái)可能有點(diǎn)亂，且聽(tīng)筆者一一道來(lái)。


1 保持好奇心

筆者觀察身邊讀小學(xué)的小孩，發(fā)現(xiàn)，當(dāng)大人聊天時(shí)，特別是談?wù)聲r(shí)，小孩特別喜歡坐在旁邊聽(tīng)，而且聽(tīng)的很認(rèn)真。小孩有時(shí)也會(huì)說(shuō)兩句，或是問(wèn)問(wèn)題，或是發(fā)表自己的看法。

看得出來(lái)，小孩對(duì)成年人的世界，懷有極大的好奇心。實(shí)際上，不止于成年人的世界，小孩對(duì)周遭世界都有比較強(qiáng)烈的好奇心。

整體而言，成年人對(duì)周遭世界的好奇心，遠(yuǎn)不如小孩。我們互聯(lián)網(wǎng)從業(yè)者也不例外。

好奇心和交互設(shè)計(jì)，有什么關(guān)系？

交互設(shè)計(jì)，某種程度上，也是一種創(chuàng)作。好的創(chuàng)作，一定來(lái)自生活。這就需要我們?nèi)ビ^察生活。

觀察生活，非常重要的一點(diǎn)，就是好奇心，對(duì)周遭人、事、物要有足夠的好奇心。

比如上文提到的例子，在 iPhone 上刪除應(yīng)用前，應(yīng)用圖標(biāo)會(huì)抖。這種抖是一種趣味隱喻，既可以理解成嚇的發(fā)抖，也可以理解成搖頭求生。如果對(duì)生活沒(méi)有足夠的好奇心，是很難留意到這種生活細(xì)節(jié)，并把它們作為一種隱喻運(yùn)用到交互設(shè)計(jì)中的。

以上是關(guān)于好奇心，還有一種特質(zhì)，也是在小孩身上表現(xiàn)突出，同時(shí)也和本文主題有關(guān)，那就是：童趣。

還是上文的例子，在 B 站 App 上輸入登錄密碼時(shí)，動(dòng)畫(huà)人物會(huì)捂眼睛。這個(gè)設(shè)計(jì)，可能不會(huì)打動(dòng)所有用戶(hù)，但至少一部分用戶(hù)會(huì)覺(jué)得比較有趣。如果我們內(nèi)心沒(méi)有一點(diǎn)童趣，可能也會(huì)覺(jué)得，這個(gè)設(shè)計(jì)，沒(méi)啥意思。

玩是人的天性。對(duì)于比較好玩的交互設(shè)計(jì)，大部分人是比較容易產(chǎn)生共鳴的。實(shí)際上，據(jù)筆者觀察，我們大部分從業(yè)者是有童趣的。我們比較缺的，是好奇心。

那么，怎樣判斷自己是否擁有足夠的好奇心，其標(biāo)志是什么？

個(gè)人觀點(diǎn)，有兩個(gè)標(biāo)志。第一，是對(duì)與個(gè)人利益無(wú)關(guān)的生活小事的關(guān)注，遠(yuǎn)多于對(duì)個(gè)人利益本身的關(guān)注。第二，觀察和思考，遠(yuǎn)多于評(píng)價(jià)和自大；追本和溯源，遠(yuǎn)多于偏見(jiàn)和傲慢。

為什么會(huì)提到個(gè)人利益？

因?yàn)椋ǔ６?，個(gè)人利益，尤其是短期利益(比如少花時(shí)間設(shè)計(jì)和修改原型)，往往會(huì)和用戶(hù)體驗(yàn)存在一個(gè)此消彼長(zhǎng)的關(guān)系。

如果過(guò)于關(guān)注個(gè)人利益，不僅很難照顧到用戶(hù)體驗(yàn)，甚至?xí)τ脩?hù)體驗(yàn)。至于給用戶(hù)帶來(lái)驚喜，就更無(wú)從談起了。

回到現(xiàn)實(shí)當(dāng)中。在時(shí)代洪流面前，好奇心的兩個(gè)標(biāo)志，顯得很難，該如何實(shí)現(xiàn)？

關(guān)鍵在于找到背后的源動(dòng)力。這個(gè)源動(dòng)力，在筆者看來(lái)，有兩點(diǎn)，分別是：求知若渴、淡泊寧?kù)o。


求知若渴，可以源源不斷的驅(qū)動(dòng)我們?nèi)ビ^察、去思考萬(wàn)事萬(wàn)物的規(guī)律和聯(lián)系。

淡泊寧?kù)o，正如諸葛亮在《誡子書(shū)》中所說(shuō)，“非淡泊無(wú)以明志，非寧?kù)o無(wú)以致遠(yuǎn)”。人的心力和精力終歸是有限的，如果我們沉迷名利、物欲、享樂(lè)，就難有興趣和精力去琢磨萬(wàn)事萬(wàn)物了。

所以，只要找回自己童年的那種求知若渴，同時(shí)修身養(yǎng)性到淡泊寧?kù)o，這份好奇心，就會(huì)回來(lái)。

2 巧妙融合

某種程度上，很多帶給我們驚喜的交互設(shè)計(jì)，都是一種巧妙融合。

筆者把這種巧妙融合，初步分成了三類(lèi)，分別是：簡(jiǎn)單融合、直接融合、委婉融合。


簡(jiǎn)單融合，最常見(jiàn)的就是隱藏功能。把一個(gè)較為簡(jiǎn)單的操作動(dòng)作，比如長(zhǎng)按、雙擊、下拉、左滑等，和一個(gè)合適的功能，融合在一起。用電腦時(shí)我們常說(shuō)的快捷鍵，也屬于這一類(lèi)。

通常而言，操作對(duì)應(yīng)什么功能，講究的是合適，并無(wú)固定章法束縛。比如在微信朋友圈，發(fā)表文字的功能可以靠長(zhǎng)按（相機(jī)圖標(biāo)）喚起，設(shè)置權(quán)限的功能也可以靠長(zhǎng)按（好友頭像）喚起。所以，簡(jiǎn)單融合這塊，可供我們發(fā)揮的空間很大。

另外，簡(jiǎn)單融合最常見(jiàn)的形式——隱藏功能，既實(shí)現(xiàn)了界面的簡(jiǎn)潔，又帶來(lái)了一定驚喜。

簡(jiǎn)單融合，既簡(jiǎn)單，又實(shí)用。建議大家充分開(kāi)發(fā)這一塊。

直接融合，是指將生活中的趣味性，直接搬到軟件中，搬到交互設(shè)計(jì)中。比如微信聊天中的扔骰子、石頭剪刀布，以及漂流瓶、抽獎(jiǎng)等。

這一類(lèi)融合，有點(diǎn)像商場(chǎng)里的電玩城，雖然我們不會(huì)經(jīng)常去玩，但確實(shí)比較好玩。

委婉融合，是指用明喻或隱喻的手法，將生活中微不足道的一些細(xì)節(jié)，移植到交互設(shè)計(jì)中。

這種移植，有時(shí)是直白的。比如 Mac 上打開(kāi)應(yīng)用時(shí)，其圖標(biāo)會(huì)在 dock 欄里有規(guī)律的彈跳，這會(huì)讓我們聯(lián)想到皮球的彈跳。

這種移植，有時(shí)是隱晦的。比如 iPhone 上刪除應(yīng)用前，其圖標(biāo)會(huì)抖。這種抖，是害怕還是求饒，任憑我們想象。

這種移植，有時(shí)是無(wú)聲的。比如在朋友圈，要想呼出隱藏的設(shè)置權(quán)限功能，只能長(zhǎng)按頭像，長(zhǎng)按名字則不行。這個(gè)設(shè)計(jì)，不乏想象空間。如果不嘗試長(zhǎng)按名字，則不會(huì)發(fā)現(xiàn)這個(gè)細(xì)節(jié)。

委婉融合，有時(shí)會(huì)帶一些趣味性。更為重要的是，它能夠引發(fā)我們的思考和想象，所以是一種很出彩的融合。這種融合，也會(huì)賦予交互設(shè)計(jì)，一種禪的味道。

整體而言，筆者非常推薦委婉融合。

3 追求卓越

如果目標(biāo)是小驚喜，則保持好奇心、并做到巧妙融合，基本足矣。

如果目標(biāo)是大驚喜，則需要雄心壯志，需要舍我其誰(shuí)，需要追求卓越。

日常工作中，可能會(huì)有這樣的對(duì)話(huà)。“這個(gè)動(dòng)效/功能，實(shí)現(xiàn)不了”。

大驚喜里的幾個(gè)例子，比如初代 iPhone 的觸控體驗(yàn)，iPhone 里的測(cè)距儀，微信的掃一掃識(shí)物。這種設(shè)計(jì)，意味著要修一條最好的長(zhǎng)城，背后往往有很多技術(shù)難題要攻克，有很多臟活累活要做。

如果團(tuán)隊(duì)文化就是做出最優(yōu)秀的交互設(shè)計(jì)，那么，“實(shí)現(xiàn)不了”這句話(huà)，估計(jì)就聽(tīng)不到了。取而代之的，可能是：“還在研究中”，“下個(gè)大版本能上”。

4 自然而然

提到驚喜，還有一款值得研究和學(xué)習(xí)的產(chǎn)品，那就是錘子手機(jī)的 Smartisan OS。

個(gè)人觀點(diǎn)，在小驚喜方面，Smartisan OS 頗有建樹(shù)。在大驚喜方面，Smartisan OS 也進(jìn)行了一些值得學(xué)習(xí)的探索。

先說(shuō)小驚喜，比如華麗而細(xì)膩的桌面翻頁(yè)動(dòng)畫(huà)，比如四指橫劃桌面可以切換桌面背景。還有一些貼心的小功能，比如靜音可以設(shè)置時(shí)間，比如方便的長(zhǎng)截屏。

(靜音可設(shè)置時(shí)間)

(長(zhǎng)截屏)

再說(shuō)大驚喜。2016 年 10 月發(fā)布的一步和大爆炸，是比較大比較系統(tǒng)的功能，在當(dāng)時(shí)也很新。錘子公司也一直有宣傳這兩個(gè)功能。所以相對(duì)而言，這兩個(gè)功能是 Smartisan OS 的大驚喜。

筆者的備用機(jī)是錘子手機(jī)，身邊也有朋友在用錘子手機(jī)。以一步為例，這個(gè)功能，筆者體驗(yàn)過(guò)很多次。但平常很少用，身邊朋友的情況也類(lèi)似。

(一步)

根據(jù)使用情況和主觀感受，個(gè)人覺(jué)得，一步這個(gè)大驚喜，還存在進(jìn)步空間，主要有兩個(gè)方面。

第一，宏觀層面。一步作為新生事物，好比一顆新種子。種子破土而出時(shí)，是一顆嫩芽，而不是一棵大樹(shù)。新生的一步功能繁多，猶如一棵破土而出的大樹(shù)，一方面有違自然規(guī)律，另一面因?yàn)楣δ芊倍?，很多用?hù)無(wú)法一下子看懂，看不懂可能就不想用了。

第二，微觀層面。一步這棵新大樹(shù)，結(jié)了很多不同的果子，比如拖拽圖片到其他應(yīng)用、切換后臺(tái)應(yīng)用、展示最近圖片/文件等。這些果子，是用戶(hù)真正需要的嗎？這個(gè)是要存疑的。

比如拖拽圖片到朋友圈就能發(fā)朋友圈這個(gè)設(shè)計(jì)。通常而言，我們發(fā)到朋友圈的圖片都是精挑細(xì)選的，會(huì)占用一定量的時(shí)間，比如旅游或聚會(huì)結(jié)束后發(fā)的照片。一步解決的是效率問(wèn)題。發(fā)朋友圈的時(shí)候，少點(diǎn)幾下這種效率問(wèn)題，優(yōu)先級(jí)是比較靠后的，我們沒(méi)那么在乎。

還有拖拽圖片/文件這個(gè)交互動(dòng)作，大家通常在電腦上用的比較多，在手機(jī)上是沒(méi)有這個(gè)習(xí)慣的，實(shí)際上應(yīng)用場(chǎng)景也少。在手機(jī)上，大家一般只習(xí)慣拖拽應(yīng)用圖標(biāo)。

還有切換后臺(tái)應(yīng)用這塊，大家第一個(gè)想到的，一定是系統(tǒng)自帶的，已經(jīng)用慣了。而且喚起速度比一步快，點(diǎn)擊面積也比一步大。

總的來(lái)說(shuō)，微觀層面上，比較缺讓大家能馬上想到一步的功能點(diǎn)。

最后，總結(jié)一下。對(duì)于領(lǐng)先時(shí)代、引領(lǐng)潮流的交互設(shè)計(jì)，需要做到自然。

具體而言，就是，大驚喜是一種系統(tǒng)性的大功能，好比一棵大樹(shù)。這棵大樹(shù)，最好有一個(gè)從種子到果子的生長(zhǎng)過(guò)程，這樣最自然，生命力也會(huì)最旺盛。

因?yàn)?，從破土而出的嫩芽階段，就可以通過(guò)用戶(hù)反饋和數(shù)據(jù)來(lái)檢驗(yàn)，這種嫩芽，是不是真的對(duì)用戶(hù)有價(jià)值。如果價(jià)值不大或沒(méi)有價(jià)值，還可以再調(diào)整。如果長(zhǎng)成大樹(shù)結(jié)滿(mǎn)果子，再去調(diào)整，就很難了。


結(jié)語(yǔ)

交互設(shè)計(jì)小細(xì)節(jié)，如果有一定的趣味性或人文屬性，則是小驚喜。

系統(tǒng)性工程的交互設(shè)計(jì)，如果最初感覺(jué)很酷，而且能引領(lǐng)潮流、代表未來(lái)，則是大驚喜。

始終保持孩童身上那種非功利的好奇心，用心觀察并思考生活中的小事；

將生活小事和交互設(shè)計(jì)巧妙融合起來(lái)；

以上兩點(diǎn)，可以幫我們做出小驚喜類(lèi)的交互設(shè)計(jì)。

追求卓越，獨(dú)立思考，做最酷最好的交互設(shè)計(jì)；

酷是結(jié)果也好，是目標(biāo)也好，都不是最重要的。最重要的是，避免刻意和心切。醞釀大驚喜，猶如培養(yǎng)一個(gè)新生的孩子，需要投入極大耐心和精力，需要讓孩子自然成長(zhǎng)。沒(méi)有家長(zhǎng)會(huì)教半歲的孩子唱歌、把 3 歲的孩子送到高中念書(shū)。

再加上以上兩點(diǎn)，可以幫我們做出大驚喜類(lèi)的交互設(shè)計(jì)。

最后，用愛(ài)因斯坦的一句話(huà)來(lái)共勉。

想象力比知識(shí)更重要。
轉(zhuǎn)自：站酷-SnowDesign 

分享本文至：

日歷

鏈接

個(gè)人資料

存檔