產品細節洞察分析,看完這些你離大廠又近了一步(2022-17)
編輯導讀:好的產品總會關注細節,將細節做到最好,這篇文章分析了十個產品的使用場景和產品的設計思考,最后總結產品成功的原因,一起學習一下吧。
目錄:
- 【騰訊地圖】主題廣場 – 導航的趣味體驗、提高用戶粘性
- 【汽水兒】進度條交互 – 絲滑放大,沉浸式拖拽時間節點
- 【數字人民幣】上下滑動 – 收錢付款,也能如此流暢順滑
- 【Edge瀏覽器】新建標簽 – 下拉左右選擇,減少點擊交互鏈路
- 【支付寶、B站】生日彩蛋 – 除了父母愛人,它也更懂你
- 【少數派】左滑派讀 – 精心定制內容,去肥增瘦更懂你
- 【青藤之戀】返回頂部 – 新位置新嘗試,防錯操作設計
- 【微博動漫】夜間模式 – 頂部變化,模仿天空趣味感知
- 【騰訊動漫】置頂圖標 – 首頁Tab的兩種功能,配合動效絲滑流暢
- 【快手】左滑查看 – 小視圖作品,一鍵觸達,便于精準定位
一、【騰訊地圖】主題廣場 – 導航的趣味體驗、提高用戶粘性
1. 使用場景
在使用騰訊地圖、開車導航時,默認地圖指引與用戶所產生的情感。
2. 設計思考
設計目標:發掘設計可能點,提升產品專屬服務性,從而增加用戶粘度。
設計方案:在我的-主題廣場中,提供20+主題皮膚,從游戲IP、盲盒IP到代言明星,老少通吃。
我所選擇的(泡泡馬特寶寶車車)主題,在使用地圖時,不僅底部TAB、頂部背景換成主題相關元素,就連開車導航時,我的位置都換成了Molly寶寶開車形象,360度查看車身。
這種深度統一的主題沿用,給用戶產生眼前一亮,具有彩蛋效果的驚喜感。要知道盲盒現在定價69元,買回來可能擺在家里吃灰,但高德地圖用3D可視化形象與產品進行融合,提高趣味性的同時,用戶粘性潛在提高。
二、【汽水兒】進度條交互 – 絲滑放大,沉浸式拖拽時間節點
1. 使用場景
聽播客時,調節進度條一直都沒有什么體驗亮點。
2. 設計思考
設計目標:提升進度調節的易用性,給用戶帶來視覺和交互雙重體驗。
設計方案:在收聽播客節目時,漏聽或想反復聽一段時間音頻時需要調節進度條。
【汽水兒】在長按左右滑動調節進度條時,會進入一個浮層區,只有時間顯示和進度條顯示,降低不必要信息干擾,同時進度條放大顯示刻度,給用戶精準選擇感知,配合放大的時間顯示,用戶更容易看清當前所在位置,從而精準停在想要播放的位置處。
三、【數字人民幣】上下滑動 – 收錢付款,也能如此流暢順滑
1. 使用場景
電子支付平臺多而雜,收錢付款交互流程也很繁瑣?!緮底秩嗣駧拧渴侨绾谓鉀Q的。
2. 設計思考
設計目標:提高產品操作體驗,通過體驗設計來進行前期引流。
設計方案:先不說【數字人民幣】使用率與普及程度,單說其設計對于產品的貢獻。進入首頁直接展示銀行所對應的錢包余額,用銀行品牌色與人民幣形象結合,用戶能直觀檢索是哪家銀行。在使用電子支付時,可點擊或滑動兩種交互進入功能區,相對點擊進入,學習成本低,老少皆宜,都易操作。
滑動交互,更多是為操作便捷做的體驗嘗試,流暢順滑的過度,在設計圈都成為教學參考。如此簡單易用的產品確實能俘獲大眾用戶的心,希望后續不要為了新增功能而閹割此功能。
四、【Edge瀏覽器】新建標簽 – 下拉左右選擇,減少點擊交互鏈路
1. 使用場景
在瀏覽器中新建標簽頁通常需要點擊底部Tab再點擊新建,操作上始終還可以優化一下。
2. 設計思考
設計目標:提升操作便捷,通過交互手勢提高產品易用性。
設計方案:在iOS系統中,用戶在使用【Edge】時,通過下拉呼出頂部功能入口,提供三個選擇,分別是新建標簽頁、刷新、關閉,這都是常用功能,當圓圈停留在哪里說明此功能已被激活,通過釋放手勢,完成功能選擇。例如想要刷新頁面,通過下拉釋放、刷新完成。想要新建標簽頁,通過下拉左滑、釋放手勢、完成新建標簽頁。關閉同理。小球在左右移動時會變成橢圓形,貼合手勢操作感知。并且此交互入口是隱藏功能,用戶想要新建標簽頁,可通過常規底部Tab欄中創建。交互手勢更多提供易用可能性,當點擊操作已經變得繁瑣,就可以用滑動手勢縮短用戶觸達成本。
五、【支付寶、B站】生日彩蛋 – 除了父母愛人,它也更懂你
1. 使用場景
生日場景是很多產品可以做文章的地方,來強化產品自身品牌感知。
2. 設計思考
設計目標:提升產品與用戶的共情性,通過祝福,強化品牌感知。
設計方案:作者生日當天,分別在使用【支付寶】【嗶哩嗶哩】時,閃屏頁給予用戶生日祝福呈現。要知道閃屏頁通常是產品廣告變現位置,這么重要的模塊在生日當天給專屬用戶展示驚喜,對于用戶自身來說是很開心喜悅的。有時身邊人都不記得,但產品記得,這也是溫情一面的透出,產品既是冰冷同時保存的信息也會強化用戶某一時間的重要感知,必須是一個與用戶產生情感共鳴的設計亮點。
六、【少數派】左滑派讀 – 精心定制內容,去肥增瘦更懂你
1. 使用場景
少數派的派讀,和入口一樣去肥增瘦,預覽便捷。
2. 設計思考
設計目標:提升進入入口的便捷性,給予用戶入口感知,提高派讀模塊使用活躍度。
設計方案:在少數派首頁沒有金剛區,頭部是一個半屏的推薦文章,這樣讓品牌符號得以突出。通常首頁左上方品牌符號只是一個展示樣式,不具備觸發入口功能,就算是一個入口也很難讓用戶發現(之前文章有例子)。
少數派通過在品牌左側加入三個小點,引導用戶點擊操作,更具有識別功能操作性,同時貼屏向右滑動也會進入派讀頁面。提供兩種入口,有效提升進入派讀頁的簡易程度,為用戶提供便捷操作。
七、【青藤之戀】返回頂部 – 新位置新嘗試,防錯操作設計
1. 使用場景
陌生人社交社區,刷了很長的內容后如何返回頂部刷新頁面。
2. 設計思考
設計目標:提高刷新內容入口的識別性,防止多功能點擊的誤觸情況。
設計方案:青藤之戀社區,左上角有一個「我的小窩」功能入口。當瀏覽了很長的內容返回頂部時,通常點擊左上方時間位置,這需要開發后臺寫入指令才有此功能,可作者使用時點擊時間位置并不能出發返回頂部操作,檢索后發現,在頂部標題上方會出現一個類似Home的矩形條,通過點擊此位置,可返回頂部。
分析這樣設計的原因,時間位置加交互操作容易與「我的小窩」進行誤觸重合,原因過于精密,為提高防錯性,故返回置頂操作放在了標題處,這樣用戶也好理解。同時作者覺得也可以嘗試底部「村口」Tab也可加上返回頂部并刷新的操作,多入口,滿足不同用戶的操作習慣,這樣產品更易用,粘度更高。
八、【微博動漫】夜間模式 – 頂部變化,模仿天空趣味感知
1. 使用場景
夜間模式的切換,如何給予用戶狀態感知。
2. 設計思考
設計目標:提升產品趣味體驗,強化用戶心智。
設計方案:在我的頁面,點擊夜間模式切換按鈕,頭部會變換天氣插畫。但用戶切換為日間模式,天空是藍色有云彩的,表示白天;當切換夜間模式,天空是深藍色有星星和月亮,表示黑夜。切換按鈕配合動畫視頻給予用戶情感化展示,提升產品操作帶來的趣味體驗,讓用戶有眼前一亮的感覺。(建議:切換模式iocn可以在設計一個太陽圖標,用同一個月亮圖標始終覺得有些為了并不能形成統一感受。
九、【騰訊動漫】置頂圖標 – 首頁Tab的兩種功能,配合動效絲滑流暢
1. 使用場景
用戶在刷首頁流是,如何快速返回頂部,一鍵觸達。
2. 設計思考
設計目標:提高用戶理解成本,使回頂部功能清晰可見。
設計方案:首頁默認情況下,推薦Tab是一個星星圖標,當用戶向下滑動到一定位置時,圖標變成弓箭樣式,文字也從推薦變成回頂部,這樣既是看不懂圖標含義的用戶,通過文字描述也能知道此icon所具備的交互功能。并且配合動效射出弓箭,豐富元素形態。相比默認圖標點擊回頂部,這種變換圖標和文案的形式用戶更易懂且更直觀的進行操作,是一個好的優化亮點。
十、【快手】左滑查看 – 小視圖作品,一鍵觸達,便于精準定位
1. 使用場景
看完一個視頻想要接著繼續看作者視頻,如何準確找到視頻位置。
2. 設計思考
設計目標:提高產品易用性,提供多種觸達形式呈現。
設計方案:用戶看完一個視頻通過向左滑動,呼出側邊視頻欄,定位當前視頻位置,用戶可通過上下滑動,縮略查看想要看的內容,降低進入作者頁尋找「剛剛看過」視頻周圍的內容,降低用戶操作成本。當返回首頁時,只需向右滑動就可無切換割裂的回到首頁。與抖音相比,提供兩種交互入口是一個好的設計點。
十一、結語
設計師要有發現美的眼睛。美不僅是視覺,還有好的體驗流程。不要讓用戶思考,這是每個設計師所追求的。認真記錄產品細節,了解背后的思考,也是不斷提升自己邏輯思維和表達能力的一種方式。
本期產品細節分析結束,我們下期再見!
#專欄作家#
碳水Sir;微信公眾號:草蓉三石,人人都是產品經理專欄作家。One More產品設計負責人,擅長設計細節洞察分析。
本文原創發布于人人都是產品經理。未經許可,禁止轉載。
題圖來自 Unsplash,基于CC0協議
不得不說大廠在細節方面做的真是很優秀,站到用戶的角度來想,來解決發生的和可能發生的事情
??