令人怦然心動的 12 個產品設計細節

產品有時候像人，我們每天使用的過程就像是和老朋友打交道一樣，非常熟悉彼此的言行套路，但同時又會被對方身上一些微小閃光點輕易地打動。

本文就用 3 站地鐵的時間，給大家分享 12 個 APP 中非常精彩的體驗設計細節。

分享目錄

① Airbnb - 訂單支付彈窗

② B 站 - 視頻點贊動效

③ VUE - 視頻評論表情 3 連

④ 餓了麼 - 外賣金額篩選

⑤ 花生地鐵 WiFi - 彈窗小遊戲

⑥ 黃油相機 - 更改桌面圖標

⑦ 夸克瀏覽器 - 輸入法滑塊光標

⑧ 國泰君安君弘 - 四筆錢收益彈窗

⑨ 天天基金 - 轉賬金額數位提示

⑩ 有道翻譯 - 單詞零位移下鑽

⑪ 支付寶 - 付款碼重力翻轉

⑫ 高德地圖 - 擁堵路段交通實況

01/ Airbnb - 訂單支付彈窗

這個彈窗發生在確認民宿訂單的支付頁面，點擊 “申請預定”button 以後。旅行前期的規劃和挑選民宿的過程是複雜而重要的，用戶在最後一步確認之前，會潛意識形成對之前所有任務累加的心理負擔。

而這個彈窗用極具親和力的動畫形式，很大程度上削弱了前期工作的任務負擔。整個動畫設計輕量而有趣，一邊打包收拾行囊一邊微笑的小人，在此刻起到了很好的慰藉作用。

02/ B 站 - 視頻點贊動效

B 站視頻頁面的點贊動作除了 icon 狀態變化以外，icon 的上方會同時出現電視機小人的半身形象，伴隨咚咚心跳或者豎起大拇指，這是一個與衆不同的交互反饋。

我們都知道情感化設計分爲本能層、行爲層、反思層三個層面，這個點讚的動效反饋在本能層給用戶帶來眼前一亮的視覺驚喜，在反思層挖掘用戶的價值認同感，即 “點贊” 這個簡單的動作也可以很不簡單、很有儀式感，符合 B 站年輕用戶表達欲強的心智特徵。

03/ VUE - 視頻評論表情 3 連

近兩年是全民視頻播客的井噴期，VUE 最早聚焦於創作端的內容生產，也是最早一批進入內容端和社交端的視頻剪輯 APP。在社交化層面，VUE 也做了很多嘗試，其中包含這條發評論表情自動 3 連。

仔細觀察可以發現預設給的 7 個默認表情中，前 4 個都是正向情緒，有助於正面氛圍的渲染。這個預設在觀衆側降低了用戶的輸入操作成本，在內容側卻形成了評論區大家互動很熱烈的場面，可以說一舉兩得。在早期平臺內社交化氛圍不強的時候，是一個巧妙的運營工具。

04/ 餓了麼 - 外賣金額篩選

用餓了麼點外賣時，在商家列表頁根據金額範圍進行篩選，可以在手動設置人均金額上下限範圍的時候，同時觀察到對應價格的商家數量分佈趨勢，並且按鈕上的商家數量會聯動變化，便於用戶快速做出決策。

這是一招巧妙的視覺傳達技法，將兩層信息進行了可視化整合，用極簡的層級表達了數量級較大的信息內容。唯一不足在於分佈圖沒有給出明確釋義，第一眼看並不能秒懂，我也是反覆調節並且跟按鈕數字聯動觀察之後才發現其中規律。

05/ 花生地鐵 WiFi - 彈窗小遊戲

偶然在地鐵上連 WiFi 的時候發現了這一有趣的細節，有別於其他的運營彈窗，這是一款應用重力反饋的小遊戲彈窗，通過搖動手機把屏幕中帶禮物的小羊搖到出口就會觸發頁面跳轉。

花生地鐵 WiFi 是一款 “用完即走” 的工具型 APP，由於流量優勢啓動頁面會推送大量廣告彈窗。常規的彈窗都是靜態圖片，或者附帶一些簡單的動效吸引視線，但用戶經過長期的心智教育都熟悉了這樣的運營套路，會直接關閉彈窗去連 WiFi。這款小遊戲彈窗利用了人的好奇心理，抓住眼球的同時促成一定量的轉化。

06/ 黃油相機 - 更改桌面圖標

APP 桌面圖標作爲品牌與用戶之間的關鍵觸點，通常是品牌標識的圖形或文字。黃油相機在這一點上特立獨行，APP 圖標就是一塊單純的黃油，沒有其他任何元素。

在 APP 設置菜單裏也支持用戶更改桌面圖標，可以說黃油相機並沒有用傳統方式進行品牌心智的灌輸，而是把主動權交還給用戶，以共情的方式讓用戶去定義與意識中最貼合的黃油形象。雖然圖標造型各有差異，但圍繞着 “黃油” 這一無形的品牌資產，卻拉近了品牌與人之間的距離。

07/ 夸克瀏覽器 - 光標定位

夸克瀏覽器在拉起鍵盤以後鍵盤上方的工具條會預設一個滑塊功能，該滑塊點擊後寬度會延展，是針對輸入長串字段後需要修改或刪除字符操作的場景。

傳統交互中需要長按字段手動去調節光標位置，既麻煩又耗時，精準度也不夠。夸克這個細節設計真的細緻入微，非常有效地提高了光標定位的效率，對文字工作者極爲友好。

08/ 國泰君安君弘 - 四筆錢收益

證券業 APP 在財富管理數字化轉型上做出了許多嘗試，致力於給用戶傳達 “炒股買基理財一站式” 綜合投資平臺的概念。“四筆錢”就是一個典型案例，依據 “標準普爾家庭資產配置理論” 對用戶的資產進行財務規劃，拆分爲對應 4 種場景的子賬戶。

當用戶在子賬戶內有相關產品持倉的時候，次日登入 “四筆錢” 頁面會推送一個收益提醒彈窗（收益爲正的時候有，爲負則沒有）。且文案會告知用戶該部分收益來自於哪一個子賬戶，在投資成果端強化用戶對該類子賬戶的印象，並在心理層面形成對用戶的正向激勵。

彈窗動效使用金幣落入錢袋的場景，伴隨金幣的落入錢袋也會漸進式變大，增加用戶知曉收益爲正時的 “爽感體驗”，間接提升了對“四筆錢” 功能的粘性。

09/ 天天基金 - 轉賬金額數位

轉賬行爲是伴隨用戶生活的角角落落，覆蓋了普惠金融和投資理財兩大重要場景，因此其專業性和安全性在設計上尤其需要體現。

業內通用的做法是跟隨國際慣例加千位分隔符，但這不符合本土用戶的使用習慣。天天基金在活期產品轉賬的時候設計了大額數位提示，超過 4 位數的金額就會顯示 “萬”、“十萬”、“百萬” 等提示字段，既增加了輸入金額時的安全感，也符合本土化的用戶心智。

10/ 有道翻譯 - 單詞零位移下鑽

這是一個極容易被忽略的細節。我們在任何 APP 裏搜索完一個關鍵詞，在搜索過程中的聯想列表頁和最終觸達的搜索結果頁之間會發生明顯的跳轉，這幾乎已經形成一個大家約定俗成願意接受的體驗流程上的斷點。

有道翻譯在視覺層面把這個斷點 “續接” 上了。輸入單詞的字號非常大而且在兩級頁面的位置保持完全一致，同時做到前端性能調優，最終呈現給用戶的觀感就是“這個頁面交互十分流暢，似乎沒有跳轉”，搜索結果很自然地就出現在界面上。

11/ 支付寶 - 付款碼重力翻轉

在與金錢相關的產品體驗設計上，安全感的傳遞會直接影響用戶對品牌的信賴度和忠誠度。支付寶收款頁面在這一點上，結合了真實轉賬場景中所發生的的用戶體態行爲進行設計，非常經典。

我們接受他人轉賬這個瞬時的動作，往往是把手機頂部往外翻，遞到對方面前。這時的界面對於對方來說剛好相反，支付寶順勢將卡片的標題和二維碼的說明文案都進行了翻轉，這些是給對方提供信任力的信息，能夠增強 TA 在資金轉出時的安全感。

12/ 高德地圖 - 擁堵路段實況

曾經高德導航路段中交通擁堵的部分會用紅色標識，但這對用戶而言僅僅完成了信息同步的可視化，對於擁堵路段的具體情況依然掌握不足，用戶無法判斷擁堵原因、處理狀況，以及時間預判是否準確，進一步會影響對導航結果測算的信任度。

最近發現擁堵路段上線了實況社交功能，位置正處於該路段的用戶可以實時在社區發帖播報當前路況，一方面緩解等待時的負面情緒，另一方面爲後來者提供實時有效的擁堵信息。並且在標紅路段的提示框裏會顯示交警是否到場、是否在處理等重要節點，對自駕出行用戶是一次非常不錯的體驗升級。

那些動人的設計細節就隱藏在我們四周，真正耐下心來觀察，其實每天都能發現不少。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/YSbmDXH8vDXOYB7YSj_XKg