編輯導(dǎo)語(yǔ)：本篇文章中講解了多個(gè)優(yōu)秀產(chǎn)品設(shè)計(jì)案例，在每一個(gè)優(yōu)秀產(chǎn)品案例中去學(xué)習(xí)如何設(shè)計(jì)好產(chǎn)品，能夠?qū)?yīng)不同的功能設(shè)計(jì)不同的方案，作者從產(chǎn)品的細(xì)節(jié)去洞察分析，指導(dǎo)如何能做出更吸引人、更能使用戶滿意的產(chǎn)品，推薦想要學(xué)習(xí)設(shè)計(jì)產(chǎn)品的群體閱讀。

章節(jié)目錄

1. 【央視新聞】標(biāo)簽欄里藏乾坤，整合視頻類型與一體
2. 【愛(ài)奇藝】槽點(diǎn)劇，小窗口進(jìn)入看完整版
3. 【閃電記賬】消失賬本，隱藏保存提升安全性
4. 【澎湃新聞】標(biāo)志玄機(jī)，多入口提升板塊曝光
5. 【多抓魚】精準(zhǔn)推薦，提升商品成交率
6. 【葫蘆時(shí)刻】導(dǎo)航欄下移，易于拇指操作
7. 【抖音】播放提速，觀影效率大幅提升
8. 【Eyeye】視力鍛煉，趣味交互與新擬物設(shè)計(jì)相結(jié)合
9. 【澎湃新聞】文字之美，兩種字體滿足不同閱讀者
10. 【拼多多】拼小單的不反感，交互反饋原則的合理運(yùn)用

一、【央視新聞】標(biāo)簽欄里藏乾坤，整合視頻類型與一體

1. 使用場(chǎng)景

作為中央新聞平臺(tái)，內(nèi)容都以文字呈現(xiàn)為主。短視頻新聞則放置在駝式標(biāo)簽欄中。

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

設(shè)計(jì)目標(biāo)：看新聞?dòng)袃深惾巳?，文字閱讀、短視頻觀看，如何讓兩類人群在閱讀觀看中提高專注力不被其他形式影響，更好服務(wù)用戶。

設(shè)計(jì)方案：在底部駝式標(biāo)簽欄中，央視新聞按鈕內(nèi)整合各新聞視頻于一體，以駝式轉(zhuǎn)盤為表現(xiàn)手法，讓用戶易于理解交互手勢(shì)，減少學(xué)習(xí)成本。并且點(diǎn)擊進(jìn)入對(duì)應(yīng)欄目視頻，之后刷到的都是相同欄目不同的內(nèi)容，有效提高同欄目多內(nèi)容曝光度。同時(shí)專注閱讀的用戶和看視頻的用戶形式互不干擾。

二、【愛(ài)奇藝】槽點(diǎn)劇情，小窗口進(jìn)入看完整版

1. 使用場(chǎng)景

綜藝劇，有的槽點(diǎn)不符合大眾口味，沒(méi)有共鳴的內(nèi)容放在二級(jí)頁(yè)面。

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

設(shè)計(jì)目標(biāo)：解決因劇情普通流失用戶觀看，提升綜藝完播度，話題熱度、從而更好的吸引用戶觀看，增加產(chǎn)品活躍度。

設(shè)計(jì)方案：在「一年一度喜劇大賽」中，會(huì)有很多喜劇故事，其中不免會(huì)有平平無(wú)奇的故事。通過(guò)剪輯把優(yōu)質(zhì)內(nèi)容放在熱期劇里，一般內(nèi)容通過(guò)完整剪輯放置二級(jí)頁(yè)面。用戶在熱期劇中會(huì)看到節(jié)選片段，對(duì)于感興趣的內(nèi)容通過(guò)點(diǎn)擊右下方小窗口進(jìn)入觀看。這種做法，很好的整合優(yōu)質(zhì)內(nèi)容，讓綜藝節(jié)目更加好看，同時(shí)也預(yù)留了其他故事情節(jié)的入口，滿足小部分用戶。

三、【閃電記賬】消失賬本，隱藏保存提升安全性

1. 使用場(chǎng)景

人每天都會(huì)有金錢往來(lái)，如果保持每天記賬，賬本會(huì)隨著使用頻次，信息越來(lái)越多，會(huì)帶來(lái)信息干擾。

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

設(shè)計(jì)目標(biāo)：解決賬本過(guò)多不易檢索的問(wèn)題，增加隱藏賬本功能，提高信息降噪的同時(shí)，給用戶帶來(lái)私密性的心理感受，從而提升用戶粘性。

設(shè)計(jì)方案：在賬本設(shè)計(jì)中，有一欄隱藏此賬本功能，開啟后，首頁(yè)對(duì)應(yīng)賬本會(huì)消失，通過(guò)點(diǎn)擊5次左上角閃電記賬標(biāo)志，就能重新展示被隱藏的賬本。5次點(diǎn)擊的高學(xué)習(xí)成本操作目的，是為了防止誤操作發(fā)生同時(shí)增加隱藏賬本的安全性。

（ps：又一個(gè)在標(biāo)志內(nèi)增加功能的產(chǎn)品，把產(chǎn)品特有功能放在標(biāo)志中，提升產(chǎn)品記憶點(diǎn)同時(shí)給功能入口降噪，讓首頁(yè)始終保持簡(jiǎn)潔留白的設(shè)計(jì)語(yǔ)言。）

四、【澎湃新聞】標(biāo)志玄機(jī)，多入口提升板塊曝光

1. 使用場(chǎng)景

新聞產(chǎn)品第一視覺(jué)展示新聞模塊，更多頻道和欄目都放到漢堡按鈕中，一個(gè)小小的按鈕承載全頻道內(nèi)容，增加里識(shí)別與點(diǎn)擊難度。

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

設(shè)計(jì)目標(biāo)：解決全頻道欄目入口深，讓用戶不易點(diǎn)擊操作的問(wèn)題。通過(guò)增加多入口，給按鈕分流提高用戶全頻道操作。

設(shè)計(jì)方案：文字相比圖標(biāo)會(huì)更準(zhǔn)確的傳遞內(nèi)容本身。澎湃新聞?chuàng)碛卸囝l道和多欄目?jī)?nèi)容，這本身也是產(chǎn)品一大特點(diǎn)。在首頁(yè)澎湃新聞標(biāo)志中增加進(jìn)入全頻道模塊入口，二次提高點(diǎn)擊率，使屏幕可操作區(qū)域發(fā)揮到極致。

五、【多抓魚】精準(zhǔn)推薦，提升商品成交率

1. 使用場(chǎng)景

買二手服飾主要關(guān)心尺碼是否合適，其次是成色和價(jià)格。一個(gè)很滿意的服飾尺碼不匹配也是空歡喜一場(chǎng)。

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

設(shè)計(jì)目標(biāo)：提前為用戶篩選適合尺碼的品牌服飾。包括衣物的具體分類，為二手服飾帶來(lái)曝光和成交率的上升。

設(shè)計(jì)方案：在第一次進(jìn)入服飾頁(yè)面時(shí)，提供設(shè)置性別和尺碼的推薦機(jī)制。選擇設(shè)置，提供更精準(zhǔn)的服飾分類和品牌的選擇，當(dāng)設(shè)置過(guò)后，出現(xiàn)該服飾，會(huì)第一時(shí)間給特定人群

推送上新內(nèi)容，從而提高服飾快速成交率，怎家用戶粘性。

六、【葫蘆時(shí)刻】導(dǎo)航欄下移，易于拇指操作

1. 使用場(chǎng)景

隨著手機(jī)尺寸越來(lái)越大，手機(jī)日常操作單手很難完成。尤其是導(dǎo)航欄中的返回按鈕，處在最遠(yuǎn)且最不易點(diǎn)擊的區(qū)域。

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

設(shè)計(jì)目標(biāo)：提升用戶使用產(chǎn)品時(shí)操作便捷性，對(duì)單手操作提供更多可能。解放雙手操作，提升使用體驗(yàn)。

設(shè)計(jì)方案：整個(gè)產(chǎn)品導(dǎo)航欄放置下方，用戶針對(duì)多頁(yè)面切換和搜索時(shí)，操作熱區(qū)都在拇指活躍區(qū)域，不需要一手抓手機(jī)一手點(diǎn)返回按鍵。產(chǎn)品中大量交互操作在下方都可完成，并且更多功能也是從底部彈出浮層，形成統(tǒng)一，讓用戶便于操作使用。

七、【抖音】播放提速，觀影效率大幅提升

1. 使用場(chǎng)景

更多視頻博主入駐抖音，從原來(lái)十秒短視頻發(fā)展到幾分鐘甚至十幾分鐘的視頻，用戶在瀏覽過(guò)程中會(huì)消磨大量時(shí)間在不太感興趣的內(nèi)容上，浪費(fèi)時(shí)間不說(shuō)同時(shí)也是一種煎熬。

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

設(shè)計(jì)目標(biāo)：解決用戶瀏覽視頻的效率，提升觀看速度、達(dá)到段時(shí)間內(nèi)獲取內(nèi)容了解脈絡(luò)，提升用戶活躍度。

設(shè)計(jì)方案：在視頻瀏覽時(shí)，長(zhǎng)按屏幕，會(huì)浮出更多操作，當(dāng)視頻大于15s時(shí)提供「播放速度」功能，根據(jù)用戶習(xí)慣選擇倍速播放，當(dāng)錯(cuò)過(guò)重點(diǎn)內(nèi)容或二次查看時(shí)，可拖動(dòng)底部滑桿調(diào)節(jié)時(shí)間位置，提高瀏覽效率。如今在觀看電視劇綜藝等長(zhǎng)視頻時(shí)，習(xí)慣了倍速播放的用戶忍受不了普通倍速，「抖音」洞察到這一點(diǎn)，把倍速功能移到短視頻中。因?yàn)槎桃曨l就是依靠不斷刷劇，5s小梗10s大梗帶給用戶短時(shí)間爽的體驗(yàn)，從而達(dá)到用戶粘性持續(xù)保持的效果。

八、【Eyeye】視力鍛煉，趣味交互與新擬物設(shè)計(jì)相結(jié)合

1. 使用場(chǎng)景

手機(jī)等電子儀器的長(zhǎng)期使用，眼部高負(fù)荷，如何緩解視覺(jué)疲勞 ，提高護(hù)眼習(xí)慣。

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

設(shè)計(jì)目標(biāo)：為用眼過(guò)度的人群提供護(hù)眼操，配合AR眼動(dòng)追蹤技術(shù)來(lái)鍛煉視力。

設(shè)計(jì)方案：在設(shè)計(jì)中秉持極簡(jiǎn)設(shè)計(jì)風(fēng)格，讓界面簡(jiǎn)潔干凈，同時(shí)減少視覺(jué)負(fù)擔(dān)。首頁(yè)只提供兩種眼部鍛煉模式，點(diǎn)擊進(jìn)入即刻開始鍛煉，配合apple自身的軟硬件技術(shù)，讓箭頭與用戶眼球同步運(yùn)動(dòng)，并在完成后給予阻尼振動(dòng)反饋，減少二次視覺(jué)瀏覽的負(fù)擔(dān)，達(dá)到正真意義的眼部運(yùn)動(dòng)鍛煉。

九、【澎湃新聞】文字之美，兩種字體滿足不同閱讀者

1. 使用場(chǎng)景

澎湃新聞全局采用宋體文字，產(chǎn)品調(diào)性統(tǒng)一，但針對(duì)無(wú)襯線字體閱讀用戶來(lái)說(shuō)閱讀體驗(yàn)不是很好。

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

設(shè)計(jì)目標(biāo)：解決閱讀文字時(shí)識(shí)別性問(wèn)題，提供宋體和黑體兩種選擇，提升用戶閱讀效率。

設(shè)計(jì)方案：提供字體設(shè)置功能，用戶可進(jìn)行宋體與系統(tǒng)字體切換以及字號(hào)大小選擇。由于澎湃新聞襯線字體的產(chǎn)品調(diào)性，會(huì)增加一部分用戶閱讀習(xí)慣的適應(yīng)成本，不可避免的帶來(lái)用戶流失。在設(shè)置入口根據(jù)用戶閱讀習(xí)慣按需選擇字體，提供多方案選擇，提高用戶閱讀體驗(yàn)，防止用戶流失。

十、【拼多多】拼小單的不反感，交互反饋原則的合理運(yùn)用

1. 使用場(chǎng)景

拼多多獨(dú)特的拼單購(gòu)買流程，以及購(gòu)買后的「拼單成功」彈窗，每當(dāng)出現(xiàn)同步到拼小圈時(shí)心里總會(huì)咯噔一下，自己買的東西為什么要讓別人看到。

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

設(shè)計(jì)目標(biāo)：解決用戶購(gòu)買前中后階段未能及時(shí)傳達(dá)反饋消息，帶來(lái)用戶無(wú)感知的情況，完善用戶體驗(yàn)流程，給用戶帶來(lái)操作前有感知，操作中有反饋，操作后可撤回的良好交互體驗(yàn)。

設(shè)計(jì)方案：操作前可感知：用戶在搜索同類型產(chǎn)品時(shí)，買過(guò)的產(chǎn)品會(huì)在標(biāo)題中出現(xiàn)「拼單過(guò)」的標(biāo)簽，給用戶購(gòu)買過(guò)這家店這個(gè)商品的感知度，提高二次復(fù)購(gòu)率，給用戶降低選擇的時(shí)間成本，給商家?guī)?lái)增收，一舉兩得；操作中有反饋：當(dāng)購(gòu)買完一件商品，會(huì)及時(shí)出現(xiàn)拼單成功的彈窗，并且有「即將同步到拼小圈」的文本，右側(cè)提供「點(diǎn)擊取消」功能，及時(shí)反饋及時(shí)操作；操作后可撤銷：當(dāng)拼單成功后，忘記「不同步到拼小圈」操作，可在我的訂單中對(duì)應(yīng)商品中「點(diǎn)擊取消操作」。這一套流程下來(lái)，讓用戶有了清晰的交互感知，提高操作體驗(yàn)。

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

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

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

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

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

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