起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識令人怦然心動的12個產品設計細節
導語：產品有時候像人，我們每天使用的過程就像是和老朋友打交道一樣，非常熟悉彼此的言行套路，但同時又會被對方身上一些微小閃光點輕易地打動。本文就用3站地鐵的時間，給大家分享12個APP中非常精彩的體驗設計細節。
一、Airbnb-訂單支付彈窗
這個彈窗發生在確認民宿訂單的支付頁面，點擊“申請預定”button以后。旅行前期的規劃和挑選民宿的過程是復雜而重要的，用戶在最后一步確認之前，會潛意識形成對之前所有任務累加的心理負擔。
而這個彈窗用極具親和力的動畫形式，很大程度上削弱了前期工作的任務負擔。整個動畫設計輕量而有趣，一邊打包收拾行囊一邊微笑的小人，在此刻起到了很好的慰藉作用。
二、B站-視頻點贊動效
B站視頻頁面的點贊動作除了icon狀態變化以外，icon的上方會同時出現電視機小人的半身形象，伴隨咚咚心跳或者豎起大拇指，這是一個與眾不同的交互反饋。
我們都知道情感化設計分為本能層、行為層、反思層三個層面，這個點贊的動效反饋在本能層給用戶帶來眼前一亮的視覺驚喜，在反思層挖掘用戶的價值認同感，即“點贊”這個簡單的動作也可以很不簡單、很有儀式感，符合B站年輕用戶表達欲強的心智特征。
三、VUE-視頻評論表情3連
近兩年是全民視頻播客的井噴期，VUE最早聚焦于創作端的內容生產，也是最早一批進入內容端和社交端的視頻剪輯APP。在社交化層面，VUE也做了很多嘗試，其中包含這條發評論表情自動3連。
仔細觀察可以發現預設給的7個默認表情中，前4個都是正向情緒，有助于正面氛圍的渲染。這個預設在觀眾側降低了用戶的輸入操作成本，在內容側卻形成了評論區大家互動很熱烈的場面，可以說一舉兩得。在早期平臺內社交化氛圍不強的時候，是一個巧妙的運營工具。
四、餓了么-外賣金額篩選
用餓了么點外賣時，在商家列表頁根據金額范圍進行篩選，可以在手動設置人均金額上下限范圍的時候，同時觀察到對應價格的商家數量分布趨勢，并且按鈕上的商家數量會聯動變化，便于用戶快速做出決策。
這是一招巧妙的視覺傳達技法，將兩層信息進行了可視化整合，用極簡的層級表達了數量級較大的信息內容。唯一不足在于分布圖沒有給出明確釋義，第一眼看并不能秒懂，我也是反復調節并且跟按鈕數字聯動觀察之后才發現其中規律。
五、花生地鐵WiFi-彈窗小游戲
偶然在地鐵上連WiFi的時候發現了這一有趣的細節，有別于其他的運營彈窗，這是一款應用重力反饋的小游戲彈窗，通過搖動手機把屏幕中帶禮物的小羊搖到出口就會觸發頁面跳轉。
花生地鐵WiFi是一款“用完即走”的工具型APP，由于流量優勢啟動頁面會推送大量廣告彈窗。常規的彈窗都是靜態圖片，或者附帶一些簡單的動效吸引視線，但用戶經過長期的心智教育都熟悉了這樣的運營套路，會直接關閉彈窗去連WiFi。這款小游戲彈窗利用了人的好奇心理，抓住眼球的同時促成一定量的轉化。
六、黃油相機-更改桌面圖標
APP桌面圖標作為品牌與用戶之間的關鍵觸點，通常是品牌標識的圖形或文字。黃油相機在這一點上特立獨行，APP圖標就是一塊單純的黃油，沒有其他任何元素。
在APP設置菜單里也支持用戶更改桌面圖標，可以說黃油相機并沒有用傳統方式進行品牌心智的灌輸，而是把主動權交還給用戶，以共情的方式讓用戶去定義與意識中最貼合的黃油形象。雖然圖標造型各有差異，但圍繞著“黃油”這一無形的品牌資產，卻拉近了品牌與人之間的距離。
七、夸克瀏覽器-光標定位
夸克瀏覽器在拉起鍵盤以后鍵盤上方的工具條會預設一個滑塊功能，該滑塊點擊后寬度會延展，是針對輸入長串字段后需要修改或刪除字符操作的場景。
傳統交互中需要長按字段手動去調節光標位置，既麻煩又耗時，精準度也不夠?？淇诉@個細節設計真的細致入微，非常有效地提高了光標定位的效率，對文字工作者極為友好。
八、國泰君安君弘-四筆錢收益
證券業APP在財富管理數字化轉型上做出了許多嘗試，致力于給用戶傳達“炒股買基理財一站式”綜合投資平臺的概念。“四筆錢”就是一個典型案例，依據“標準普爾家庭資產配置理論”對用戶的資產進行財務規劃，拆分為對應4種場景的子賬戶。
當用戶在子賬戶內有相關產品持倉的時候，次日登入“四筆錢”頁面會推送一個收益提醒彈窗（收益為正的時候有，為負則沒有）。且文案會告知用戶該部分收益來自于哪一個子賬戶，在投資成果端強化用戶對該類子賬戶的印象，并在心理層面形成對用戶的正向激勵。
彈窗動效使用金幣落入錢袋的場景，伴隨金幣的落入錢袋也會漸進式變大，增加用戶知曉收益為正時的“爽感體驗”，間接提升了對“四筆錢”功能的粘性。
九、天天基金-轉賬金額數位
轉賬行為是伴隨用戶生活的角角落落，覆蓋了普惠金融和投資理財兩大重要場景，因此其專業性和安全性在設計上尤其需要體現。
業內通用的做法是跟隨國際慣例加千位分隔符，但這不符合本土用戶的使用習慣。天天基金在活期產品轉賬的時候設計了大額數位提示，超過4位數的金額就會顯示“萬”、“十萬”、“百萬”等提示字段，既增加了輸入金額時的安全感，也符合本土化的用戶心智。
十、有道翻譯-單詞零位移下鉆
這是一個極容易被忽略的細節。我們在任何APP里搜索完一個關鍵詞，在搜索過程中的聯想列表頁和最終觸達的搜索結果頁之間會發生明顯的跳轉，這幾乎已經形成一個大家約定俗成愿意接受的體驗流程上的斷點。
有道翻譯在視覺層面把這個斷點“續接”上了。輸入單詞的字號非常大而且在兩級頁面的位置保持完全一致，同時做到前端性能調優，最終呈現給用戶的觀感就是“這個頁面交互十分流暢，似乎沒有跳轉”，搜索結果很自然地就出現在界面上。
十一、支付寶-付款碼重力翻轉
在與金錢相關的產品體驗設計上，安全感的傳遞會直接影響用戶對品牌的信賴度和忠誠度。支付寶收款頁面在這一點上，結合了真實轉賬場景中所發生的的用戶體態行為進行設計，非常經典。
我們接受他人轉賬這個瞬時的動作，往往是把手機頂部往外翻，遞到對方面前。這時的界面對于對方來說剛好相反，支付寶順勢將卡片的標題和二維碼的說明文案都進行了翻轉，這些是給對方提供信任力的信息，能夠增強TA在資金轉出時的安全感。
十二、高德地圖-擁堵路段實況
曾經高德導航路段中交通擁堵的部分會用紅色標識，但這對用戶而言僅僅完成了信息同步的可視化，對于擁堵路段的具體情況依然掌握不足，用戶無法判斷擁堵原因、處理狀況，以及時間預判是否準確，進一步會影響對導航結果測算的信任度。
最近發現擁堵路段上線了實況社交功能，位置正處于該路段的用戶可以實時在社區發帖播報當前路況，一方面緩解等待時的負面情緒，另一方面為后來者提供實時有效的擁堵信息。并且在標紅路段的提示框里會顯示交警是否到場、是否在處理等重要節點，對自駕出行用戶是一次非常不錯的體驗升級。
那些動人的設計細節就隱藏在我們四周，真正耐下心來觀察，其實每天都能發現不少。你身邊一定也有很多類似的典型案例，歡迎在評論區留言分享！
本文由 @賞酒二兩 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基于CC0協議
第九點的轉賬金額位數愛了，再也不用數0了
第十點，也戳中我了，之前沒注意，一說發現真的是個很不錯的交互，這種平時不起眼但確實起到很好交互作用的設計，真的愛了
很棒哎
確實有怦然心動的感覺，很棒的交互設計