前言

作為一名 UI 設(shè)計(jì)師，要有一雙洞察美的眼睛，挖掘產(chǎn)品中令人喜歡與貼心的地方，為自己后續(xù)的產(chǎn)品設(shè)計(jì)打造基礎(chǔ)。我總結(jié)了十個(gè)產(chǎn)品的細(xì)節(jié)進(jìn)行體驗(yàn)與分析，并提出了自己的一些思考，分享出來。

1. 小紅書：暴贊收藏 – UGC的最大回訪

2. 航旅縱橫：航線圖 – 追憶往昔，鎖定用戶旅程記憶

3. iPhone 查找：伴侶安全 – 就算女友離家出走也能及時(shí)找到她

4. 快狗打車：用拉貨來搬家 – 綜合對比，雙方利益最大化

5. 抖音：剛剛看過 – 優(yōu)化用戶觀影視頻銜接流程

6. MOO 音樂：獨(dú)特頻譜 – 打造產(chǎn)品記憶點(diǎn)

7. 微信：懸浮窗口 – 及時(shí)聊天、及時(shí)閱讀兩不誤

8. 皮皮蝦：插眼 – 萬物皆可眼，讓你笑到抖三抖

9. iPhone 信息：批量選擇 – 高效編輯快捷處理繁雜信息

10. 淘寶：主題換膚 – 眾多DIY主題，換你所想，給你自由

這里還有超過2378條產(chǎn)品細(xì)節(jié)可以學(xué)習(xí)? ?? ?細(xì)節(jié)獵人

小紅書

暴贊收藏 – UGC的最大回訪

1. 使用場景

在刷小紅書時(shí)，看到旅游攻略或?qū)毑卮┐顣r(shí)會(huì)點(diǎn)收藏按鈕進(jìn)行保存。這里怎么不是點(diǎn)贊呢？因?yàn)辄c(diǎn)贊更多是對當(dāng)前筆記內(nèi)容產(chǎn)生共鳴、贊同觀點(diǎn)、給予鼓勵(lì)、崇拜或表揚(yáng)等等。當(dāng)然也不排除一類用戶把點(diǎn)贊當(dāng)收藏使用（這里不過多闡述點(diǎn)贊愛心功能）。

第二種使用場景：當(dāng)我最近有時(shí)間可以進(jìn)行計(jì)劃已久的旅行，查看收藏過的旅行攻略，可以快速找到我之前保存的筆記，更快去行動(dòng)起來。

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

設(shè)計(jì)目標(biāo)：針對用戶收藏整理筆記做優(yōu)化，把收藏與點(diǎn)贊做功能區(qū)分，提升用戶復(fù)看頻率，讓 UGC 內(nèi)容更好傳播與回訪。

設(shè)計(jì)方案：收藏包含于點(diǎn)贊，但收藏是更細(xì)分的內(nèi)容歸類模塊。當(dāng)用戶進(jìn)行收藏時(shí)，可以給用戶提供創(chuàng)建專輯功能。這里我有必要說明一下小紅書對于專輯的定義；為什么不叫-文件夾什么的。

首先收藏的筆記內(nèi)容是為了一個(gè)共同目標(biāo)（美妝、穿搭、護(hù)膚、做飯等），筆記作者各行各業(yè)描述的角度不同，但最終能幫助我達(dá)到目的。就像音樂專輯，一個(gè)專輯能出版取決于歌手、調(diào)音師、出品人、發(fā)行社等等共同努力。說回來這樣布局可以最大化的管理查看收藏的筆記內(nèi)容，提高用戶回看筆記的效率。

我之所以拿小紅書來說，完全因?yàn)樽罱褂枚兑魰r(shí)，首頁出現(xiàn)收藏按鈕，與點(diǎn)贊-評論-分享放到一個(gè)層級，我又看了看收藏頁面，沒有提供細(xì)分化操作，只是把點(diǎn)贊和收藏做了簡單區(qū)分。

抖音收藏類目下，包含視頻、音樂、道具、商品、合集。如果以后要給視頻做可分類的專輯功能，不禁覺得模塊入口過于深且交互操作過多，我還刻意看女友的抖音首頁沒有收藏按鈕，應(yīng)該在做 A/B Test。如果要優(yōu)化視頻收藏模塊，希望抖音團(tuán)隊(duì)改版優(yōu)化好，就目前使用體驗(yàn)收藏外置沒有發(fā)揮最大點(diǎn)擊需要。

航旅縱橫

航線圖 – 追憶往昔，鎖定用戶旅程記憶

1. 使用場景

打開 App，查看近一年可視化飛行線路歷史，在年末階段發(fā)個(gè)動(dòng)態(tài)總結(jié)一下旅程。

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

設(shè)計(jì)目標(biāo)：給用戶里程碑式的飛行總結(jié)，產(chǎn)生情感依托，提升用戶粘性，航線圖的總結(jié)，有助于分享傳播，從而達(dá)到拉新目標(biāo)。

設(shè)計(jì)方案：依托民航官方為背景，更好的匯集各大航空公司的機(jī)票、航班，給用戶準(zhǔn)確、時(shí)效的功能使用。

對此，可以總結(jié)用戶近一年，全部的飛行史，在可視化地圖中展示出來，相比文字，視覺沖擊更強(qiáng)，一目了然，更加直觀。

不僅如此，針對高齡群體、老花眼、密集恐懼癥人群，提供熱力圖顯示，能直觀看到去過最多的地方在哪里?？傊疅崃D與航線圖兩種視覺表現(xiàn)，供用戶選擇。間接也能體現(xiàn)出航旅縱橫產(chǎn)品人性化的設(shè)計(jì)對用戶更加友好。提升用戶信任。這不就是一款好產(chǎn)品之所以好的原因。

iPhone 查找

伴侶安全 – 就算女友離家出走也能及時(shí)找到她

1. 使用場景

情侶相處多少會(huì)有小吵小鬧，解決之后感情又會(huì)加深。此款軟件與其說用來查找丟失的手機(jī)。不如說是解決情侶矛盾的調(diào)解師。

有一次，因?yàn)橹蹦行愿竦奈?，一件事小變大，大變女友生氣到離家出走。剛出去時(shí)，頭腦還不清醒，等過一會(huì)情緒緩和下來發(fā)現(xiàn)原本主動(dòng)承認(rèn)錯(cuò)誤就不會(huì)有的矛盾（女方其實(shí)看的就是一個(gè)態(tài)度）這也是經(jīng)過多次矛盾總結(jié)出來的真理。

當(dāng)我冷靜下來，意識到女友已經(jīng)走了一段時(shí)間，情急之下發(fā)微信打電話都不回復(fù)，腦海里出現(xiàn)無數(shù)可能去的地方，但漫無目的的挨個(gè)找既浪費(fèi)時(shí)間又沒有效率。冷靜思考了一下，打開手機(jī)劃著劃著看到了地圖軟件（想到了定位）于是即刻打開iPhone 查找果不其然下一秒女友 1 分鐘前的位置出現(xiàn)在地圖中（前提要雙方已綁定）欣喜之中，快速向女友位置走去。事后，女友問你是怎么找到我的？我說愛情的力量，心有靈犀（狗頭漏出）……

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

設(shè)計(jì)目標(biāo)：iPhone 查找，搭載原生系統(tǒng)，即使無互聯(lián)網(wǎng)也可以準(zhǔn)確定位手機(jī)出現(xiàn)的位置，解決手機(jī)丟失追蹤，解決家人迷路、失蹤、位置等等。準(zhǔn)確定位家人位置，互相給予保護(hù)與安全等保障。

設(shè)計(jì)方案：打開 app 直觀顯示家人與我的地圖位置、距離、最近一次出現(xiàn)的時(shí)間，且位置不斷刷新，給家人實(shí)時(shí)顯示，提供準(zhǔn)確，時(shí)效，易理解的信息傳達(dá)，給彼此信息安全保障。

快狗打車

用拉貨來搬家 – 綜合對比，雙方利益最大化

1. 使用場景

對于一年一搬，或幾年一搬的家庭，深知搬家的辛苦。全程日式搬家雖然省心但價(jià)格對于大眾還是無法接受。找人搬家如何定義搬家費(fèi)用，價(jià)格高與價(jià)格適中，搬家效果其實(shí)更多取決于搬家?guī)煾档臑槿?。直觀的展示搬家費(fèi)用明細(xì)，對于用戶來說，可以大致界定費(fèi)用區(qū)間，不至于搬家過程中產(chǎn)生金錢糾紛無法協(xié)商。

拉貨：指把貨物從出發(fā)地送到目的地，如果選擇拉貨時(shí)搬運(yùn)，基本都是默認(rèn)雙方共同完成。選擇搬家搬運(yùn)類型，一定是給到搬家?guī)煾灯叩臐M意價(jià)格，全程師傅搬家，遇到大包袋司機(jī)搬運(yùn)合理，小物件，零碎物品，一般總是住戶來整理并搬運(yùn)（因?yàn)槿菀讈G失不放心）期間住戶搬運(yùn)代替搬家?guī)煾档囊徊糠重浳锸遣皇菓?yīng)該返還部分費(fèi)用，所以這部分很難界定。這也是選擇搬家比選擇拉貨要貴的原因。

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

設(shè)計(jì)目標(biāo)：解決給用戶直觀展示搬運(yùn)價(jià)格明細(xì)，達(dá)到透明化，合理化區(qū)間。讓用戶對比從而選擇更符合自己需求的搬家種類。

設(shè)計(jì)方案：拉貨，搬家兩種類型都提供搬運(yùn)服務(wù)，且都有搬運(yùn)價(jià)格明細(xì)。針對拉貨需求的用戶不一定需要兩邊都搬運(yùn)，這里能選擇單邊搬運(yùn)或全程搬運(yùn)。對于搬家來說，選擇搬家服務(wù)，默認(rèn)就是要全程搬運(yùn)的，價(jià)格明細(xì)只有總計(jì)，按需選擇。

對于經(jīng)常搬家的我，拉貨模式更適合，價(jià)格透明合理，可接受，全程體驗(yàn)也比搬家模式更輕松。行程中和司機(jī)交流中得知，某拉拉平臺(tái)抽取提成貌似最高，這樣算下來，用戶與司機(jī)明顯是被薅最嚴(yán)重的群體，并且價(jià)格明細(xì)鏈路過于復(fù)雜，查看不便捷整體閱讀完也是云里霧里。所以快狗打車能成為我一直使用的搬家產(chǎn)品，無論用戶還是司機(jī)還是平臺(tái)都達(dá)到了三方利益最大化。

抖音

剛剛看過-優(yōu)化用戶觀影視頻銜接流程

1. 使用場景

最近迷戀上短視頻中三段式電影，隨機(jī)看完一個(gè)電影（1），還想繼續(xù)觀看（2）（3）結(jié)果打開作者主頁，使勁翻找剛剛看過的視頻，結(jié)果翻了好一會(huì)兒才找到，這時(shí)電影的記憶像魚兒一樣，忘了個(gè)全糊。

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

設(shè)計(jì)目標(biāo)：解決對于上中下分級短視頻，完播率的提高。提好觀看用戶的觀影體驗(yàn)。優(yōu)化交互操作，提升操作效率。同時(shí)提高視頻博主，優(yōu)質(zhì)視頻的曝光。

設(shè)計(jì)方案：當(dāng)用戶對某視頻產(chǎn)生興趣，想看視頻博主更多內(nèi)容，提供點(diǎn)擊頭像或，屏幕外右滑操作快速進(jìn)入主頁。這時(shí)提供兩種“剛剛看過”的顯示位置。第一種，當(dāng)視頻最近發(fā)布，在一屏或滑動(dòng)一次能顯示時(shí)“剛剛看過”會(huì)顯示在視頻頂層，并且文字下方黑色遮罩用來提高文字識別，與其他視頻做區(qū)分。讓用戶清晰看到。

第二種也是交互升級方案，視頻在主頁最下方或距離當(dāng)前時(shí)間很遠(yuǎn)的歷史線中，右下角會(huì)有最近看過的“剛剛看過”的點(diǎn)擊按鈕，點(diǎn)擊一下，自動(dòng)把剛看過的視頻移動(dòng)到手機(jī)可顯示的屏幕范圍，高效提高用戶查找所浪費(fèi)的時(shí)間成本。

MOO 音樂

獨(dú)特頻譜 – 打造產(chǎn)品記憶點(diǎn)

1. 使用場景

休閑時(shí)刻，聽著愜意的音樂，看著頻譜跟隨音樂節(jié)奏律動(dòng)，視覺聽覺雙重享受，更加沉浸在音樂世界。

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

設(shè)計(jì)目標(biāo)：提升視覺沉浸式體驗(yàn)，解決播放頁動(dòng)態(tài)元素單調(diào)無法傳達(dá)熱愛音樂用戶對音律共振的情感共鳴。

設(shè)計(jì)方案：MOO 音樂潮流、偏向小眾、再打造更純粹的音樂世界。所以風(fēng)格上看不到傳統(tǒng)音樂的影子。正因如此，在播放頁底部，加入音頻波動(dòng)條，與音樂同步起伏，營造氛圍，充滿個(gè)性。給用戶帶來雙重享受。彩蛋：不同曲風(fēng)的歌曲，底部音頻條樣式也不一樣，這樣可以提升神秘感、給用戶帶來探索的機(jī)會(huì)。

微信

懸浮窗口 – 及時(shí)聊天、及時(shí)閱讀兩手不誤

1. 使用場景

微信作為國民級產(chǎn)品，聊天與文章閱讀已成常態(tài)，經(jīng)常在地鐵看公號文章時(shí)，朋友發(fā)來消息，像以前只能返回聊天頁面，回復(fù)后，重新打開公眾號，找見文章，翻到對應(yīng)文字下。

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

設(shè)計(jì)目標(biāo)：優(yōu)化聊天與閱讀文章的交互流程，提供稍后閱讀功能，也支持外鏈形式。大幅提升用戶聊天及閱讀效率。

設(shè)計(jì)方案：當(dāng)閱讀公號文章或其他外鏈網(wǎng)站時(shí)，可點(diǎn)擊右上角更多按鈕，點(diǎn)擊浮窗自動(dòng)收入首頁浮窗中?？赏ㄟ^右滑查看浮窗內(nèi)已添加的內(nèi)容，選擇對應(yīng)文章進(jìn)行繼續(xù)閱讀。

對于微信來說浮窗功能簡直就是及時(shí)雨，微信深度“捆綁”的現(xiàn)代人，加上大量碎片化信息，想要碎片信息整合閱讀，必須要有此功能。

對于知乎來說，本身就是問答平臺(tái)，不像微信有聊天、朋友圈、文章等多功能內(nèi)容，浮窗功能顯然不是很必要。再加上，浮窗始終最頂層，層級過高，作為懸浮按鈕多少會(huì)遮擋文字有效閱讀，以及誤碰浮窗，手動(dòng)刪除又徒增麻煩。即便微信有人聊天，直接放到后臺(tái)頁不會(huì)影響之后閱讀體驗(yàn)。

對比微信與知乎同樣是浮窗，對于不同產(chǎn)品，使用相同功能，雖然可以降低學(xué)習(xí)成本，但深挖用戶需求是否有必要，再有就是我的 PM 曾對我說，加功能易，去功能難，尤其針對龐大用戶的產(chǎn)品。至此，回頭想想浮窗功能是否合適你的產(chǎn)品。這是值得深思的問題。

皮皮蝦

插眼 – 萬物皆可眼，讓你笑到抖三抖

1. 使用場景

作為主打搞笑視頻和神評論的應(yīng)用，用戶大多在休閑娛樂時(shí)觀看，每一個(gè)視頻都有其爆梗的點(diǎn)，這個(gè)梗是用戶對視頻中點(diǎn)贊評論最高做出的置頂曝光，同時(shí)也最能表達(dá)出新奇點(diǎn)的評論給予肯定。當(dāng)一個(gè)視頻沒有爆梗，會(huì)想關(guān)注日后爆梗時(shí)能說出怎樣有趣的段子，這時(shí)就需要插眼功能。

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

設(shè)計(jì)目標(biāo)：解決視頻話題下用戶參與評論、回看等活躍度提升。想待會(huì)兒看的內(nèi)容可以進(jìn)行插眼操作。

設(shè)計(jì)方案：在視頻下方，針對無神評論時(shí)，提供插眼功能，當(dāng)有神評論時(shí)，提供贊同功能。當(dāng)用戶對視頻進(jìn)行插眼，會(huì)顯示在個(gè)人中心插眼模塊內(nèi)，表示用戶期待后續(xù)評論。

插眼是皮皮蝦與其他競品產(chǎn)生差異化的功能。slogan：萬物皆可眼，只要眼在手，天下我都有。如此功能你愛了嘛？

iPhone 信息

批量選擇 – 高效編輯快捷處理繁雜信息

1. 使用場景

當(dāng)今時(shí)代，微信聊天已成主流，短信大多用來接收登錄驗(yàn)證碼，以及各種繁雜的廣告推送。有時(shí)收到一條銀行消息或者其他重要消息時(shí)，基本石沉大海要反復(fù)查找才能找到。

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

設(shè)計(jì)目標(biāo)：解決用戶處理信息的高效性，提升批量編輯操作的簡易性，針對信息批量已讀、批量刪除，降低一個(gè)一個(gè)選擇的頻繁操作。

設(shè)計(jì)方案：在iPhone 信息中，針對單個(gè)信息左滑刪除。針對多條信息可通過右上角更多-選擇信息進(jìn)入批量選擇狀態(tài)，此時(shí)會(huì)有兩種交互手勢：一種可逐個(gè)點(diǎn)擊選中，適用于間隔信息的選擇，第二種可在左側(cè)未選擇按鈕長按并下滑進(jìn)行批量選擇，值得注意的是當(dāng)手勢滑動(dòng)到標(biāo)簽欄時(shí)，信息列表會(huì)默認(rèn)向上滑動(dòng)，繼續(xù)執(zhí)行批量選擇，然后可針對所選信息進(jìn)行已讀刪除操作。

這個(gè)交互手勢很早就有了，之所以拿來細(xì)說，因?yàn)楫?dāng)我在使用安卓蘋果來回切換時(shí)發(fā)現(xiàn)，蘋果這樣的設(shè)計(jì)，確實(shí)在使用體驗(yàn)上高效易操作。加深我對蘋果產(chǎn)品的使用好感。

淘寶

主題換膚 – 眾多DIY主題，換你所想，給你自由

1. 使用場景

使用某產(chǎn)品經(jīng)常會(huì)吐槽，設(shè)計(jì)的真丑，或者使用幾年前風(fēng)格老舊的樣式。對于全民級產(chǎn)品，輕易修改 UI 視覺都會(huì)帶來巨大的風(fēng)險(xiǎn)?？捎脩魠挓┊?dāng)前主視覺設(shè)計(jì)，如何設(shè)計(jì)才能包容大眾用戶。

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

設(shè)計(jì)目標(biāo)：解決主題視覺風(fēng)格單一，為用戶提供可選擇的主題風(fēng)格，給用戶自由度高的切換主題功能，提升使用好感，增加用戶粘性從而提升交易額。

設(shè)計(jì)方案：在我的淘寶–設(shè)置–列表主題換膚。我的淘寶–向下第四層卡片中左滑主題換膚兩個(gè)入口，可進(jìn)入主題換膚頁面，提供眾多藝術(shù)家設(shè)計(jì)的主題風(fēng)格，讓用戶選擇心儀的主題，使用到產(chǎn)品中。有趣的是。

這些主題大多都是動(dòng)物 IP，對用戶來說接受度更高，童趣可愛的形象，會(huì)激發(fā)用戶使用操作。同時(shí)在使用過程中，由于用戶經(jīng)常使用，淘寶底部 Tabbar 基本形成基本認(rèn)知，不用細(xì)看也能分清楚對應(yīng)模塊類別，主題換膚的使用不會(huì)給用戶帶來學(xué)習(xí)或認(rèn)知成本的增加。相反，會(huì)給用戶帶來使用體驗(yàn)的升級。

結(jié)語

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

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

歡迎關(guān)注作者微信公眾號：草蓉三石