前言

作為一名 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. 快狗打車:用拉貨來搬家 – 綜合對(duì)比,雙方利益最大化

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. 使用場(chǎng)景

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

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

10個(gè)產(chǎn)品細(xì)節(jié)剖析,看看大廠是如何做設(shè)計(jì)的!

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

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

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

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

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

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

航旅縱橫

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

1. 使用場(chǎng)景

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

10個(gè)產(chǎn)品細(xì)節(jié)剖析,看看大廠是如何做設(shè)計(jì)的!

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

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

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

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

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

iPhone 查找

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

1. 使用場(chǎng)景

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

10個(gè)產(chǎn)品細(xì)節(jié)剖析,看看大廠是如何做設(shè)計(jì)的!

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á),給彼此信息安全保障。

快狗打車

用拉貨來搬家 – 綜合對(duì)比,雙方利益最大化

1. 使用場(chǎng)景

對(duì)于一年一搬,或幾年一搬的家庭,深知搬家的辛苦。全程日式搬家雖然省心但價(jià)格對(duì)于大眾還是無法接受。找人搬家如何定義搬家費(fèi)用,價(jià)格高與價(jià)格適中,搬家效果其實(shí)更多取決于搬家?guī)煾档臑槿恕V庇^的展示搬家費(fèi)用明細(xì),對(duì)于用戶來說,可以大致界定費(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)用,所以這部分很難界定。這也是選擇搬家比選擇拉貨要貴的原因。

10個(gè)產(chǎn)品細(xì)節(jié)剖析,看看大廠是如何做設(shè)計(jì)的!

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

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

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

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

抖音

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

1. 使用場(chǎng)景

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

10個(gè)產(chǎn)品細(xì)節(jié)剖析,看看大廠是如何做設(shè)計(jì)的!

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

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

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

第二種也是交互升級(jí)方案,視頻在主頁最下方或距離當(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. 使用場(chǎng)景

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

10個(gè)產(chǎn)品細(xì)節(jié)剖析,看看大廠是如何做設(shè)計(jì)的!

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

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

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

微信

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

1. 使用場(chǎng)景

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

10個(gè)產(chǎn)品細(xì)節(jié)剖析,看看大廠是如何做設(shè)計(jì)的!

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

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

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

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

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

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

皮皮蝦

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

1. 使用場(chǎng)景

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

10個(gè)產(chǎn)品細(xì)節(jié)剖析,看看大廠是如何做設(shè)計(jì)的!

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

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

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

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

iPhone 信息

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

1. 使用場(chǎng)景

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

10個(gè)產(chǎn)品細(xì)節(jié)剖析,看看大廠是如何做設(shè)計(jì)的!

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

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

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

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

淘寶

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

1. 使用場(chǎng)景

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

10個(gè)產(chǎn)品細(xì)節(jié)剖析,看看大廠是如何做設(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,對(duì)用戶來說接受度更高,童趣可愛的形象,會(huì)激發(fā)用戶使用操作。同時(shí)在使用過程中,由于用戶經(jīng)常使用,淘寶底部 Tabbar 基本形成基本認(rèn)知,不用細(xì)看也能分清楚對(duì)應(yīng)模塊類別,主題換膚的使用不會(huì)給用戶帶來學(xué)習(xí)或認(rèn)知成本的增加。相反,會(huì)給用戶帶來使用體驗(yàn)的升級(jí)。

結(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)注作者微信公眾號(hào):草蓉三石

10個(gè)產(chǎn)品細(xì)節(jié)剖析,看看大廠是如何做設(shè)計(jì)的!

收藏 47
點(diǎn)贊 36

復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng),未經(jīng)允許不得轉(zhuǎn)載。