前言

滿足用戶需求、提升用戶的產(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ā)。

微信

快捷表情 – 關(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é)體

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á)能力的一種方式。