交互設計：如何做到驚喜？

交互設計的驚喜就是超出用戶預期，讓用戶開心。設計中有趣味性的是小驚喜，能引領未來潮流的，則是大驚喜。時刻保持好奇心、追求卓越和獨立思考，做出有驚喜的交互設計。

上一篇，探討了如何做到品質。這一篇，探討下如何做到驚喜。一家之言，未必全面，甚至未必正確。歡迎交流探討。

01 交互設計的驚喜，是什么？

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

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

1. 小驚喜

所謂小驚喜，是指一些頗具趣味性或人文屬性的交互設計小細節。

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

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

B 站登錄頁面

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

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

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

訂閱號消息列表

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

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

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

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

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

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

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

最后說下帶有人文屬性的交互設計小細節。常見的有如下類型：幫助弱勢、關照情緒、表達情感、保護隱私。

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

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

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

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

2. 大驚喜

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

iPhone 就是典型例子之一 。

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

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

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

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

測距儀 App

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

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

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

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

02 交互設計：如何做到驚喜？

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

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

1. 保持好奇心

筆者觀察身邊讀小學的小孩，發現，當大人聊天時，特別是談正事時，小孩特別喜歡坐在旁邊聽，而且聽的很認真。小孩有時也會說兩句，或是問問題，或是發表自己的看法。

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

整體而言，成年人對周遭世界的好奇心，遠不如小孩。我們互聯網從業者也不例外。

好奇心和交互設計，有什么關系？

交互設計，某種程度上，也是一種創作。好的創作，一定來自生活。這就需要我們去觀察生活。

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

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

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

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

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

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

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

為什么會提到個人利益？

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

如果過于關注個人利益，不僅很難照顧到用戶體驗，甚至會傷害用戶體驗。至于給用戶帶來驚喜，就更無從談起了。

回到現實當中。在時代洪流面前，好奇心的兩個標志，顯得很難，該如何實現？

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

求知若渴，可以源源不斷的驅動我們去觀察、去思考萬事萬物的規律和聯系。

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

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

2. 巧妙融合

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

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

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

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

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

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

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

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

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

這種移植，有時是直白的。比如 Mac 上打開應用時，其圖標會在 dock 欄里有規律的彈跳，這會讓我們聯想到皮球的彈跳。

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

這種移植，有時是無聲的。比如在朋友圈，要想呼出隱藏的設置權限功能，只能長按頭像，長按名字則不行。這個設計，不乏想象空間。如果不嘗試長按名字，則不會發現這個細節。

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

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

3. 追求卓越

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

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

日常工作中，可能會有這樣的對話。“這個動效/功能，實現不了”。

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

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

4. 自然而然

提到驚喜，還有一款值得研究和學習的產品，那就是錘子手機的 Smartisan OS。

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

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

靜音可設置時間

長截屏

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

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

一步

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

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

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

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

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

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

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

最后，總結一下。對于領先時代、引領潮流的交互設計，需要做到自然。

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

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

結語

交互設計小細節，如果有一定的趣味性或人文屬性，則是小驚喜。

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

始終保持孩童身上那種非功利的好奇心，用心觀察并思考生活中的小事，將生活小事和交互設計巧妙融合起來。

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

追求卓越，獨立思考，做最酷最好的交互設計；酷是結果也好，是目標也好，都不是最重要的。最重要的是，避免刻意和心切。

醞釀大驚喜，猶如培養一個新生的孩子，需要投入極大耐心和精力，需要讓孩子自然成長。沒有家長會教半歲的孩子唱歌、把 3 歲的孩子送到高中念書。

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

最后，用愛因斯坦的一句話來共勉：想象力比知識更重要。

#相關文章#

交互設計：如何做到品質？

交互設計：如何做到周到？

 

作者：Leeo，微信公眾號：SnowDesignStudio（用戶體驗研究，用戶體驗設計）

本文由 @SnowDesign 原創發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自Unsplash, 基于CC0協議