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

2020-2-17    ui設(shè)計分享達(dá)人

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


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

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


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

之前的文章，有簡單定義過交互設(shè)計的“驚喜”，即為：超出用戶預(yù)期，并讓用戶開心。

具體而言有兩類，分別是：小驚喜、大驚喜。

1 小驚喜

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


先說趣味性。常見的有兩類，第一類是比較好玩的動效，第二類是一些小功能。第二類有時也會包含第一類。

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

(B 站登錄頁面)

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


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

比如在訂閱號消息列表頁，某個公眾號你已經(jīng)幾個月沒看過，對它失去了興趣和信任。這時，嘗試長按這個公眾號的頭像或名稱，會呼出一個包含“刪除消息”和“取關(guān)”功能的彈窗。

(訂閱號消息列表)

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

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

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


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

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

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


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

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


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

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

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

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

2 大驚喜

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

iPhone 就是典型例子之一 。

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

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

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

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

(測距儀 App)

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

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

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

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


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

個人覺得，有 4 個要點：既要有好奇心，又要有卓越心；既要天馬行空，又要保持自然。

聽起來可能有點亂，且聽筆者一一道來。


1 保持好奇心

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

看得出來，小孩對成年人的世界，懷有極大的好奇心。實際上，不止于成年人的世界，小孩對周遭世界都有比較強烈的好奇心。

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

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

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

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

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

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

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

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

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

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

為什么會提到個人利益？

因為，通常而言，個人利益，尤其是短期利益(比如少花時間設(shè)計和修改原型)，往往會和用戶體驗存在一個此消彼長的關(guān)系。

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

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

關(guān)鍵在于找到背后的源動力。這個源動力，在筆者看來，有兩點，分別是：求知若渴、淡泊寧靜。


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

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

所以，只要找回自己童年的那種求知若渴，同時修身養(yǎng)性到淡泊寧靜，這份好奇心，就會回來。

2 巧妙融合

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

筆者把這種巧妙融合，初步分成了三類，分別是：簡單融合、直接融合、委婉融合。


簡單融合，最常見的就是隱藏功能。把一個較為簡單的操作動作，比如長按、雙擊、下拉、左滑等，和一個合適的功能，融合在一起。用電腦時我們常說的快捷鍵，也屬于這一類。

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

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

簡單融合，既簡單，又實用。建議大家充分開發(fā)這一塊。

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

這一類融合，有點像商場里的電玩城，雖然我們不會經(jīng)常去玩，但確實比較好玩。

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

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

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

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

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

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

3 追求卓越

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

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

日常工作中，可能會有這樣的對話?！斑@個動效/功能，實現(xiàn)不了”。

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

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

4 自然而然

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

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

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

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

(長截屏)

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

筆者的備用機是錘子手機，身邊也有朋友在用錘子手機。以一步為例，這個功能，筆者體驗過很多次。但平常很少用，身邊朋友的情況也類似。

(一步)

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

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

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

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

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

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

總的來說，微觀層面上，比較缺讓大家能馬上想到一步的功能點。

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

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

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


結(jié)語

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

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

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

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

以上兩點，可以幫我們做出小驚喜類的交互設(shè)計。

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

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

再加上以上兩點，可以幫我們做出大驚喜類的交互設(shè)計。

最后，用愛因斯坦的一句話來共勉。

想象力比知識更重要。


日歷

鏈接

個人資料

存檔