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

目錄章節(jié)

1. 【微信】快捷表情 – 關(guān)鍵詞顯示，減少交互路徑發(fā)生
2. 【Bluebird】貓頭鷹的眼 – 跟隨手勢(shì)進(jìn)行移動(dòng)，增加產(chǎn)品亮點(diǎn)
3. 【微信讀書(shū)】范圍感知 – 當(dāng)前進(jìn)度了然于心，智能推算更用心
4. 【漫漫漫畫(huà)】男女模式 – 隨心切換，快速查看不同內(nèi)容
5. 【自如】頭圖位移 – 與手機(jī)功能的完美結(jié)合，呈現(xiàn)趣味觀感體驗(yàn)
6. 【微信】輕觸文字朗讀 – 高效聊天，適老化的細(xì)節(jié)體現(xiàn)
7. 【網(wǎng)易云音樂(lè)】進(jìn)度條的潮點(diǎn) – 明確感知，直接定位整首歌的高潮處
8. 【音遇】自動(dòng)播放 – 快速提效，可切換可暫停趣味交互嘗鮮
9. 【最右】情感細(xì)節(jié) – 輸入密碼，IP情感化舉動(dòng)
10. 【BOSS直聘】進(jìn)度感知 – 閱讀文章，隨時(shí)了解當(dāng)前位置

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

1. 使用場(chǎng)景

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

2.設(shè)計(jì)思考

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

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

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

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

二、【Bluebird】貓頭鷹的眼 – 跟隨手勢(shì)進(jìn)行移動(dòng)，增加產(chǎn)品亮點(diǎn)

1.使用場(chǎng)景

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

2. 設(shè)計(jì)思考

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

設(shè)計(jì)方案：通過(guò)環(huán)形滑桿位置移動(dòng)，讓貓頭鷹的眼睛跟隨滑塊旋轉(zhuǎn)位移，眼睛對(duì)于貓頭鷹來(lái)說(shuō)本身就是一個(gè)記憶點(diǎn)，放在產(chǎn)品中不違和，相反還有助于提升操作時(shí)的趣味性，給產(chǎn)品自身帶來(lái)記憶點(diǎn)。居中的貓頭鷹也處在視覺(jué)中心位置，雖然眼睛很小，但因?yàn)榫劢垢油怀觥?/p>

三、【微信讀書(shū)】范圍感知 – 當(dāng)前進(jìn)度了然于心，智能推算更用心

1. 使用場(chǎng)景

閱讀書(shū)籍時(shí)，讀了好久卻只過(guò)了幾十頁(yè)，閱讀的動(dòng)力降低一半，尤其對(duì)于難啃的書(shū)籍。

2. 設(shè)計(jì)思考

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

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

四、【漫漫漫畫(huà)】男女模式 – 隨心切換，快速查看不同內(nèi)容

1. 使用場(chǎng)景

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

2. 設(shè)計(jì)思考

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

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

五、【自如】頭圖位移 – 與手機(jī)功能的完美結(jié)合，呈現(xiàn)趣味觀感體驗(yàn)

1. 使用場(chǎng)景

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

2. 設(shè)計(jì)思考

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

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

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

六、【微信】輕觸文字朗讀 – 高效聊天，適老化的細(xì)節(jié)體現(xiàn)

1. 使用場(chǎng)景

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

2. 設(shè)計(jì)思考

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

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

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

七、【網(wǎng)易云音樂(lè)】進(jìn)度條的潮點(diǎn) – 明確感知，直接定位整首歌的高潮處

1. 使用場(chǎng)景

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

2. 設(shè)計(jì)思考

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

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

八、【音遇】自動(dòng)播放 – 快速提效，可切換可暫停趣味交互嘗鮮

1. 使用場(chǎng)景

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

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：解決播放暫停感知不強(qiáng)的問(wèn)題，提高語(yǔ)音易用性。

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

九、【最右】情感細(xì)節(jié) – 輸入密碼，IP情感化舉動(dòng)

1. 使用場(chǎng)景

登錄頁(yè)輸入賬號(hào)密碼時(shí)，如何能給用戶安全感防止密碼泄漏。

2. 設(shè)計(jì)思考

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

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

十、【BOSS直聘】進(jìn)度感知 – 閱讀文章，隨時(shí)了解當(dāng)前位置

1. 使用場(chǎng)景

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

2. 設(shè)計(jì)思考

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

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

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

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

十一、結(jié)語(yǔ)

設(shè)計(jì)師要有發(fā)現(xiàn)美的眼睛。美不僅是視覺(jué)，還有好的體驗(yàn)流程。

不要讓用戶思考，這是每個(gè)設(shè)計(jì)師所追求的。認(rèn)真記錄產(chǎn)品細(xì)節(jié)，了解背后的思考，也是不斷提升自己邏輯思維和表達(dá)能力的一種方式。

作者：碳水Sir；公眾號(hào)：草蓉三石

本文由 @碳水Sir 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于CC0協(xié)議