交互設計:如何做到驚喜?

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

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

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協議

給作者打賞,鼓勵TA抓緊創作!

1人打賞

文章若有侵權請來信告知:品牌行銷策略,產品行銷與設計,各類型行銷推廣案例分享-品牌行銷點點讚 » 交互設計:如何做到驚喜?