前言

滿足用戶需求、提升用戶的產(chǎn)品使用體驗，是產(chǎn)品在設(shè)計過程中必然要考慮的事情。比如針對老齡群體，如何才能做好適老化設(shè)計?針對某一具體場景，如何才能做好相應(yīng)的場景化設(shè)計?不妨看看本文拆解的設(shè)計細(xì)節(jié)，也許會給你啟發(fā)。

微信

快捷表情 – 關(guān)鍵詞顯示，減少交互路徑發(fā)生

1. 使用場景

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

2. 設(shè)計思考

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

設(shè)計方案：當(dāng)用戶輸入文字后，會提取已添加相關(guān)標(biāo)題內(nèi)容的表情包，通過對話窗口的形式呈現(xiàn) 4s 然后消失。

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

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

Bluebird

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

1. 使用場景

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

2. 設(shè)計思考

設(shè)計目標(biāo)：解決專注模式下頁面內(nèi)容單一問題，結(jié)合 IP 進行關(guān)聯(lián)，增加趣味性，提高記憶點增加產(chǎn)品使用粘性。

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

微信讀書

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

1. 使用場景

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

2. 設(shè)計思考

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

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

漫漫漫畫

男女模式 – 隨心切換，快速查看不同內(nèi)容

1. 使用場景

漫畫按性別區(qū)分時，很容易會把想看的內(nèi)容分到對應(yīng)性別模式下，只能通過切換男女模式來查看。

2. 設(shè)計思考

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

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

自如

頭圖位移 – 與手機功能的完美結(jié)合，呈現(xiàn)趣味觀感體驗

1. 使用場景

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

2. 設(shè)計思考

設(shè)計目標(biāo)：提升頂部 Banner 趣味體驗，提高辨識度，加深用戶心智，達(dá)到自傳播效果。

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

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

微信

輕觸文字朗讀 – 高效聊天，適老化的細(xì)節(jié)體

1. 使用場景

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

2. 設(shè)計思考

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

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

所以，適老化設(shè)計絕不是簡單的構(gòu)圖放大，而是結(jié)合自家產(chǎn)品目標(biāo)用戶做細(xì)分的適老功能設(shè)計，助力老年人輕松使用。

網(wǎng)易云音樂

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

1. 使用場景

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

2. 設(shè)計思考

設(shè)計目標(biāo)：解決聽歌時無法通過進度條準(zhǔn)確定位高潮位置，提高進度條定位易用性，并給出高潮點的視覺感知，服務(wù)用戶增加使用粘性。

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

音遇

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

1. 使用場景

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

2. 設(shè)計思考

設(shè)計目標(biāo)：解決播放暫停感知不強的問題，提高語音易用性。

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

最右

情感細(xì)節(jié) – 輸入密碼，IP情感化舉動

1. 使用場景

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

2. 設(shè)計思考

設(shè)計目標(biāo)：提升輸入密碼時的趣味反饋，給產(chǎn)品增加記憶點，增強用戶心智。

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

BOSS 直聘

進度感知 – 閱讀文章，隨時了解當(dāng)前位置

1. 使用場景

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

2. 設(shè)計思考

設(shè)計目標(biāo)：提升用戶查看文章內(nèi)容長度的預(yù)期，更好的給用戶進度感知，從而合理安排閱讀時間。

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

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

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

結(jié)語

設(shè)計師要有發(fā)現(xiàn)美的眼睛。美不僅是視覺，還有好的體驗流程。不要讓用戶思考，這是每個設(shè)計師所追求的。認(rèn)真記錄產(chǎn)品細(xì)節(jié)，了解背后的思考，也是不斷提升自己邏輯思維和表達(dá)能力的一種方式。