前言

滿足用戶需求、提升用戶的產品使用體驗，是產品在設計過程中必然要考慮的事情。比如針對老齡群體，如何才能做好適老化設計？針對某一具體場景，如何才能做好相應的場景化設計？不妨看看本文拆解的設計細節，也許會給你啟發。

微信

快捷表情 – 關鍵詞顯示，減少交互路徑發生

1. 使用場景

聊天場景中，表情包的使用相比文字更友好。有時也能緩解打字尷尬的情況。如何快速呈現表情包，讓交流無障礙。

2. 設計思考

設計目標：解決表情包交互路徑過長導致用戶選擇困難，提高表情包易用性，提升聊天趣味體驗，減少文字表述時的尷尬場景。

設計方案：當用戶輸入文字后，會提取已添加相關標題內容的表情包，通過對話窗口的形式呈現 4s 然后消失。

這里說兩點，第一表情框居右，代表是本人向對方發送內容、左邊留有空區為了視覺更好聚焦到文本框內容中，第二 4s 的顯示，很好展示表情包內容不至于看不到，且無操作時不需要二次關閉，降低長時間遮擋對話內容的查閱體驗。

就表情包顯示一個小點，體驗是不是很好。微信的每個功能都是用完即走，學習成本很低，原因在于提前一步洞察用戶需求并給出對應方案。多用表情包，避免尬聊。

Bluebird

貓頭鷹的眼 – 跟隨手勢進行移動，增加產品亮點

1. 使用場景

專注模式下人是處于相對集中辦公的狀態，偶爾會掃視剩余時間，如何把產品 IP 融入到使用場景中。

2. 設計思考

設計目標：解決專注模式下頁面內容單一問題，結合 IP 進行關聯，增加趣味性，提高記憶點增加產品使用粘性。

設計方案：通過環形滑桿位置移動，讓貓頭鷹的眼睛跟隨滑塊旋轉位移，眼睛對于貓頭鷹來說本身就是一個記憶點，放在產品中不違和，相反還有助于提升操作時的趣味性，給產品自身帶來記憶點。居中的貓頭鷹也處在視覺中心位置，雖然眼睛很小，但因為聚焦更加突出。

微信讀書

范圍感知 – 當前進度了然于心，智能推算更用心

1. 使用場景

閱讀書籍時，讀了好久卻只過了幾十頁，閱讀的動力降低一半，尤其對于難啃的書籍。

2. 設計思考

設計目標：解決整本書籍閱讀時長無法感知，無法合理的給閱讀排期，造成閱讀一半放棄的行為。給予正向提升用戶閱讀完成率。

設計方案：微信閱讀會記錄用戶閱讀當前書籍的閱讀時長，當閱讀 20%、40%、60%、80%、100%時，會給予頂部 Toast 提示，并且還有預估多久看完。這兩點是讓用戶感知當前在書閱讀籍的那個階段，讓用戶合理安排閱讀時間，標題前路雖遠，尤可期許用文言文語句來向用戶表達積極向上的心態，對未來充滿期待和動力。給予用戶自我勉勵，從而有持續動力進行閱讀。

漫漫漫畫

男女模式 – 隨心切換，快速查看不同內容

1. 使用場景

漫畫按性別區分時，很容易會把想看的內容分到對應性別模式下，只能通過切換男女模式來查看。

2. 設計思考

設計目標：提升男女模式切換的便捷性，讓用戶更易選擇操作。

設計方案：在首頁頂部導航區，左側位置添加切換模式功能，用戶通過點擊即可實時切換，并且會有彈窗強提醒，切換后會突出當前模式的類型，如果切換成 Girl，則 Girl 會在最上方展示；切換成 Boy 模式，則 Boy 會在最上方展示，給用戶明確感知。

自如

頭圖位移 – 與手機功能的完美結合，呈現趣味觀感體驗

1. 使用場景

如今的 Banner 都是矩形條設計，只是里面內容不同，設計抓人眼球的點越來越小了。

2. 設計思考

設計目標：提升頂部 Banner 趣味體驗，提高辨識度，加深用戶心智，達到自傳播效果。

設計方案：自如頂部頭圖設計結合 iPhone 硬件陀螺儀功能，通過手機左右扭轉，水平移動，主體人物會在 X 軸水平位移，與背景形成錯位感達到擬 3D 空間感覺。

不可否認，剛出來此模塊時，玩了好久，至今還記憶猶新，這難道不是一個加深用戶心智的改版嘗試嘛。不過話說回來，你提這樣的需求，開發小哥會不會拿刀追趕你就不得而知了。

微信

輕觸文字朗讀 – 高效聊天，適老化的細節體

1. 使用場景

老年人使用聊天對話功能，遇到不認識的文字或閱讀障礙情況。如何做到易用原則。

2. 設計思考

設計目標：提升老年人聊天的流暢度，多場景輔助老人使用微信溝通。

設計方案：在適老化模式下，除了常規的形色質構動的調整，聊天內容也做了改變，放大文字目的就是看的清楚，不可否認老年人視力及文字閱讀理解都較為吃力，微信在關懷模式中提供了，點擊文本框，即刻播放語音內容，把文字語音化，提高聊天效率。

所以，適老化設計絕不是簡單的構圖放大，而是結合自家產品目標用戶做細分的適老功能設計，助力老年人輕松使用。

網易云音樂

進度條的潮點 – 明確感知，直接定位整首歌的高潮處

1. 使用場景

每首歌都有經典的或者說高潮的句子，用戶再聽歌時想直接定位到高潮處，如何告知用戶。

2. 設計思考

設計目標：解決聽歌時無法通過進度條準確定位高潮位置，提高進度條定位易用性，并給出高潮點的視覺感知，服務用戶增加使用粘性。

設計方案：對于歌曲來說，上半段與下半段是重復歌詞，便于用戶定位，在上半段歌曲的高潮處添加一個小白點，提示此位置是整首歌的高潮處（記憶點），用戶可通過拖拽進度條準確定位，便于用戶對已知信息帶來確定感的滑動定位效率提升。

音遇

自動播放 – 快速提效，可切換可暫停趣味交互嘗鮮

1. 使用場景

在瀑布流瀏覽時，想要播放下面的語音，可上面的已經在自動播放，如何切換。

2. 設計思考

設計目標：解決播放暫停感知不強的問題，提高語音易用性。

設計方案：在刷領唱頁面時，當前停留內容最上方的語音會自動播放，黑膠唱片 360 度旋轉，左側還有音符動畫，表示此模塊播放中。下面模塊暫停，黑膠唱片在最右側且遮擋一半，左側無音符動畫，而這對比播放暫停較明確。通過點擊黑膠唱片進行播放暫停；點擊下面黑膠唱片向左劃出播放，并且上面黑膠唱片向右劃出，兩個交互相關聯，是一個不錯的交互體驗嘗試。

最右

情感細節 – 輸入密碼，IP情感化舉動

1. 使用場景

登錄頁輸入賬號密碼時，如何能給用戶安全感防止密碼泄漏。

2. 設計思考

設計目標：提升輸入密碼時的趣味反饋，給產品增加記憶點，增強用戶心智。

設計方案：在登錄頁面上方放有產品揮手打招呼的 IP 形象，當用戶輸入密碼時，最右 IP 會變成一個遮眼的形象并且有對話氣泡寫著“密”，表示當前用戶操作很重要不能偷看，雖然產品后臺都有記錄，但為了表達產品尊重用戶保護用戶隱私的感知，用 IP 來傳達給用戶安全感，讓產品與用戶更加親近。相同的還有 bilibili 登錄頁，此方法可以嘗試在任何產品中探索使用。

BOSS 直聘

進度感知 – 閱讀文章，隨時了解當前位置

1. 使用場景

閱讀文章時，通過快速滑到底部才能猜測文章大概的長度，給予閱讀預期，比較麻煩。

2. 設計思考

設計目標：提升用戶查看文章內容長度的預期，更好的給用戶進度感知，從而合理安排閱讀時間。

設計方案：體驗設計要解決用戶心理層次的需求，當閱讀一篇很長的文章，用戶對進度無從感知，這就是體驗差的設計。

BOSS 直聘文章閱讀中，添加進度條顯示，用戶通過 Y 軸移動關聯進度條 X 軸移動，形成聯動效果，如果是很短的一篇文章，用戶滑動文章進度條就會走很長反之很短。

為什么不加百分比，這樣更簡單明了？作者理解，百分比是數字顯示，對于文章閱讀尤其是文章版式不同的內容會進行視覺干擾，文章本身還是以閱讀為主，如果百分比做的太明顯會干擾閱讀文章本身，就會變的為了達到 100%，粗略掃讀，本末倒置。

結語

設計師要有發現美的眼睛。美不僅是視覺，還有好的體驗流程。不要讓用戶思考，這是每個設計師所追求的。認真記錄產品細節，了解背后的思考，也是不斷提升自己邏輯思維和表達能力的一種方式。

本期產品細節分析結束，我們下期再見！

歡迎關注作者微信公眾號：草蓉三石