編輯導(dǎo)讀：好的產(chǎn)品總會關(guān)注細(xì)節(jié)，將細(xì)節(jié)做到最好，這篇文章分析了十個(gè)產(chǎn)品的使用場景和產(chǎn)品的設(shè)計(jì)思考，最后總結(jié)產(chǎn)品成功的原因，一起學(xué)習(xí)一下吧。

目錄：

【騰訊地圖】主題廣場– 導(dǎo)航的趣味體驗(yàn)、提高用戶粘性【汽水兒】進(jìn)度條交互– 絲滑放大，沉浸式拖拽時(shí)間節(jié)點(diǎn)【數(shù)字人民幣】上下滑動– 收錢付款，也能如此流暢順滑【Edge瀏覽器】新建標(biāo)簽– 下拉左右選擇，減少點(diǎn)擊交互鏈路【支付寶、B站】生日彩蛋– 除了父母愛人，它也更懂你【少數(shù)派】左滑派讀– 精心定制內(nèi)容，去肥增瘦更懂你【青藤之戀】返回頂部– 新位置新嘗試，防錯(cuò)操作設(shè)計(jì)夜間模式– 頂部變化，模仿天空趣味感知【騰訊動漫】置頂圖標(biāo)– 首頁Tab的兩種功能，配合動效絲滑流暢【快手】左滑查看– 小視圖作品，一鍵觸達(dá)，便于精準(zhǔn)定位

一、【騰訊地圖】主題廣場 – 導(dǎo)航的趣味體驗(yàn)、提高用戶粘性1. 使用場景

在使用騰訊地圖、開車導(dǎo)航時(shí)，默認(rèn)地圖指引與用戶所產(chǎn)生的情感。

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

設(shè)計(jì)目標(biāo)：發(fā)掘設(shè)計(jì)可能點(diǎn)，提升產(chǎn)品專屬服務(wù)性，從而增加用戶粘度。

設(shè)計(jì)方案：在我的-主題廣場中，提供20+主題皮膚，從游戲IP、盲盒IP到代言明星，老少通吃。

我所選擇的（泡泡馬特寶寶車車）主題，在使用地圖時(shí)，不僅底部TAB、頂部背景換成主題相關(guān)元素，就連開車導(dǎo)航時(shí)，我的位置都換成了Molly寶寶開車形象，360度查看車身。

這種深度統(tǒng)一的主題沿用，給用戶產(chǎn)生眼前一亮，具有彩蛋效果的驚喜感。要知道盲盒現(xiàn)在定價(jià)69元，買回來可能擺在家里吃灰，但高德地圖用3D可視化形象與產(chǎn)品進(jìn)行融合，提高趣味性的同時(shí)，用戶粘性潛在提高。

二、【汽水兒】進(jìn)度條交互 – 絲滑放大，沉浸式拖拽時(shí)間節(jié)點(diǎn)1. 使用場景

聽播客時(shí)，調(diào)節(jié)進(jìn)度條一直都沒有什么體驗(yàn)亮點(diǎn)。

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

設(shè)計(jì)目標(biāo)：提升進(jìn)度調(diào)節(jié)的易用性，給用戶帶來視覺和交互雙重體驗(yàn)。

設(shè)計(jì)方案：在收聽播客節(jié)目時(shí)，漏聽或想反復(fù)聽一段時(shí)間音頻時(shí)需要調(diào)節(jié)進(jìn)度條。

【汽水兒】在長按左右滑動調(diào)節(jié)進(jìn)度條時(shí)，會進(jìn)入一個(gè)浮層區(qū)，只有時(shí)間顯示和進(jìn)度條顯示，降低不必要信息干擾，同時(shí)進(jìn)度條放大顯示刻度，給用戶精準(zhǔn)選擇感知，配合放大的時(shí)間顯示，用戶更容易看清當(dāng)前所在位置，從而精準(zhǔn)停在想要播放的位置處。

三、【數(shù)字人民幣】上下滑動 – 收錢付款，也能如此流暢順滑1. 使用場景

電子支付平臺多而雜，收錢付款交互流程也很繁瑣?！緮?shù)字人民幣】是如何解決的。

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

設(shè)計(jì)目標(biāo)：提高產(chǎn)品操作體驗(yàn)，通過體驗(yàn)設(shè)計(jì)來進(jìn)行前期引流。

設(shè)計(jì)方案：先不說【數(shù)字人民幣】使用率與普及程度，單說其設(shè)計(jì)對于產(chǎn)品的貢獻(xiàn)。進(jìn)入首頁直接展示銀行所對應(yīng)的錢包余額，用銀行品牌色與人民幣形象結(jié)合，用戶能直觀檢索是哪家銀行。在使用電子支付時(shí)，可點(diǎn)擊或滑動兩種交互進(jìn)入功能區(qū)，相對點(diǎn)擊進(jìn)入，學(xué)習(xí)成本低，老少皆宜，都易操作。

滑動交互，更多是為操作便捷做的體驗(yàn)嘗試，流暢順滑的過度，在設(shè)計(jì)圈都成為教學(xué)參考。如此簡單易用的產(chǎn)品確實(shí)能俘獲大眾用戶的心，希望后續(xù)不要為了新增功能而閹割此功能。

四、【Edge瀏覽器】新建標(biāo)簽 – 下拉左右選擇，減少點(diǎn)擊交互鏈路1. 使用場景

在瀏覽器中新建標(biāo)簽頁通常需要點(diǎn)擊底部Tab再點(diǎn)擊新建，操作上始終還可以優(yōu)化一下。

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

設(shè)計(jì)目標(biāo)：提升操作便捷，通過交互手勢提高產(chǎn)品易用性。

設(shè)計(jì)方案：在iOS系統(tǒng)中，用戶在使用【Edge】時(shí)，通過下拉呼出頂部功能入口，提供三個(gè)選擇，分別是新建標(biāo)簽頁、刷新、關(guān)閉，這都是常用功能，當(dāng)圓圈停留在哪里說明此功能已被激活，通過釋放手勢，完成功能選擇。例如想要刷新頁面，通過下拉釋放、刷新完成。想要新建標(biāo)簽頁，通過下拉左滑、釋放手勢、完成新建標(biāo)簽頁。關(guān)閉同理。小球在左右移動時(shí)會變成橢圓形，貼合手勢操作感知。并且此交互入口是隱藏功能，用戶想要新建標(biāo)簽頁，可通過常規(guī)底部Tab欄中創(chuàng)建。交互手勢更多提供易用可能性，當(dāng)點(diǎn)擊操作已經(jīng)變得繁瑣，就可以用滑動手勢縮短用戶觸達(dá)成本。

五、【支付寶、B站】生日彩蛋 – 除了父母愛人，它也更懂你1. 使用場景

生日場景是很多產(chǎn)品可以做文章的地方，來強(qiáng)化產(chǎn)品自身品牌感知。

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

設(shè)計(jì)目標(biāo)：提升產(chǎn)品與用戶的共情性，通過祝福，強(qiáng)化品牌感知。

設(shè)計(jì)方案：作者生日當(dāng)天，分別在使用【支付寶】【嗶哩嗶哩】時(shí)，閃屏頁給予用戶生日祝福呈現(xiàn)。要知道閃屏頁通常是產(chǎn)品廣告變現(xiàn)位置，這么重要的模塊在生日當(dāng)天給專屬用戶展示驚喜，對于用戶自身來說是很開心喜悅的。有時(shí)身邊人都不記得，但產(chǎn)品記得，這也是溫情一面的透出，產(chǎn)品既是冰冷同時(shí)保存的信息也會強(qiáng)化用戶某一時(shí)間的重要感知，必須是一個(gè)與用戶產(chǎn)生情感共鳴的設(shè)計(jì)亮點(diǎn)。

六、【少數(shù)派】左滑派讀 – 精心定制內(nèi)容，去肥增瘦更懂你1. 使用場景

少數(shù)派的派讀，和入口一樣去肥增瘦，預(yù)覽便捷。

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

設(shè)計(jì)目標(biāo)：提升進(jìn)入入口的便捷性，給予用戶入口感知，提高派讀模塊使用活躍度。

設(shè)計(jì)方案：在少數(shù)派首頁沒有金剛區(qū)，頭部是一個(gè)半屏的推薦文章，這樣讓品牌符號得以突出。通常首頁左上方品牌符號只是一個(gè)展示樣式，不具備觸發(fā)入口功能，就算是一個(gè)入口也很難讓用戶發(fā)現(xiàn)（之前文章有例子）。

少數(shù)派通過在品牌左側(cè)加入三個(gè)小點(diǎn)，引導(dǎo)用戶點(diǎn)擊操作，更具有識別功能操作性，同時(shí)貼屏向右滑動也會進(jìn)入派讀頁面。提供兩種入口，有效提升進(jìn)入派讀頁的簡易程度，為用戶提供便捷操作。

七、【青藤之戀】返回頂部 – 新位置新嘗試，防錯(cuò)操作設(shè)計(jì)1. 使用場景

陌生人社交社區(qū)，刷了很長的內(nèi)容后如何返回頂部刷新頁面。

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

設(shè)計(jì)目標(biāo)：提高刷新內(nèi)容入口的識別性，防止多功能點(diǎn)擊的誤觸情況。

設(shè)計(jì)方案：青藤之戀社區(qū)，左上角有一個(gè)「我的小窩」功能入口。當(dāng)瀏覽了很長的內(nèi)容返回頂部時(shí)，通常點(diǎn)擊左上方時(shí)間位置，這需要開發(fā)后臺寫入指令才有此功能，可作者使用時(shí)點(diǎn)擊時(shí)間位置并不能出發(fā)返回頂部操作，檢索后發(fā)現(xiàn)，在頂部標(biāo)題上方會出現(xiàn)一個(gè)類似Home的矩形條，通過點(diǎn)擊此位置，可返回頂部。

分析這樣設(shè)計(jì)的原因，時(shí)間位置加交互操作容易與「我的小窩」進(jìn)行誤觸重合，原因過于精密，為提高防錯(cuò)性，故返回置頂操作放在了標(biāo)題處，這樣用戶也好理解。同時(shí)作者覺得也可以嘗試底部「村口」Tab也可加上返回頂部并刷新的操作，多入口，滿足不同用戶的操作習(xí)慣，這樣產(chǎn)品更易用，粘度更高。

八、夜間模式 – 頂部變化，模仿天空趣味感知1. 使用場景

夜間模式的切換，如何給予用戶狀態(tài)感知。

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

設(shè)計(jì)目標(biāo)：提升產(chǎn)品趣味體驗(yàn)，強(qiáng)化用戶心智。

設(shè)計(jì)方案：在我的頁面，點(diǎn)擊夜間模式切換按鈕，頭部會變換天氣插畫。但用戶切換為日間模式，天空是藍(lán)色有云彩的，表示白天；當(dāng)切換夜間模式，天空是深藍(lán)色有星星和月亮，表示黑夜。切換按鈕配合動畫視頻給予用戶情感化展示，提升產(chǎn)品操作帶來的趣味體驗(yàn)，讓用戶有眼前一亮的感覺。（建議：切換模式iocn可以在設(shè)計(jì)一個(gè)太陽圖標(biāo)，用同一個(gè)月亮圖標(biāo)始終覺得有些為了并不能形成統(tǒng)一感受。

九、【騰訊動漫】置頂圖標(biāo) – 首頁Tab的兩種功能，配合動效絲滑流暢1. 使用場景

用戶在刷首頁流是，如何快速返回頂部，一鍵觸達(dá)。

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

設(shè)計(jì)目標(biāo)：提高用戶理解成本，使回頂部功能清晰可見。

設(shè)計(jì)方案：首頁默認(rèn)情況下，推薦Tab是一個(gè)星星圖標(biāo)，當(dāng)用戶向下滑動到一定位置時(shí)，圖標(biāo)變成弓箭樣式，文字也從推薦變成回頂部，這樣既是看不懂圖標(biāo)含義的用戶，通過文字描述也能知道此icon所具備的交互功能。并且配合動效射出弓箭，豐富元素形態(tài)。相比默認(rèn)圖標(biāo)點(diǎn)擊回頂部，這種變換圖標(biāo)和文案的形式用戶更易懂且更直觀的進(jìn)行操作，是一個(gè)好的優(yōu)化亮點(diǎn)。

十、【快手】左滑查看 – 小視圖作品，一鍵觸達(dá)，便于精準(zhǔn)定位1. 使用場景

看完一個(gè)視頻想要接著繼續(xù)看作者視頻，如何準(zhǔn)確找到視頻位置。

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

設(shè)計(jì)目標(biāo)：提高產(chǎn)品易用性，提供多種觸達(dá)形式呈現(xiàn)。

設(shè)計(jì)方案：用戶看完一個(gè)視頻通過向左滑動，呼出側(cè)邊視頻欄，定位當(dāng)前視頻位置，用戶可通過上下滑動，縮略查看想要看的內(nèi)容，降低進(jìn)入作者頁尋找「剛剛看過」視頻周圍的內(nèi)容，降低用戶操作成本。當(dāng)返回首頁時(shí)，只需向右滑動就可無切換割裂的回到首頁。與抖音相比，提供兩種交互入口是一個(gè)好的設(shè)計(jì)點(diǎn)。

十一、結(jié)語

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

本期產(chǎn)品細(xì)節(jié)分析結(jié)束，我們下期再見！

作者：碳水Sir；公眾號：草蓉三石

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

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