產品體驗|10個助力產品增長的設計細節(21)

語言: CN / TW / HK

編輯導語:一個好的設計細節能有效助力產品增長,本篇文章作者分享了10個助力產品增長的設計細節,講述了其使用場景和設計思考等內容,一起來學習一下吧,希望對你有幫助。

章節目錄:

  1. 【飛豬】豬鼻搜尋 – 融入動效,強化品牌滲透;
  2. 【Timebook】點贊動效 – 停留後的播放,引導操作;
  3. 【騰訊新聞】長按點贊 – 彩蛋背後的思考,釋放使用者情緒;
  4. 【支付寶】清爽模式 – Tab隱藏,專注支付工具服務;
  5. 【飛書】雙擊編輯 – 互動的提效用途,更快更高效;
  6. 【貝殼找房】新舊看房 – 產生預判,避免白走一趟浪費的時間;
  7. 【得物】3D試穿 – 及時體驗,減少門店試穿過程;
  8. 【映客直播】 雙直播 – 一個預覽直播一個小窗直播,屏效利用更大;
  9. 【拼多多】商品收藏 – 預選屬性預設儲存,一鍵懂你;
  10. 【微信】影片號喜歡 – 頭像神奇位移,極度舒服。

一、【飛豬】豬鼻搜尋——融入動效,強化品牌滲透

1. 使用場景

全新UI升級後,搜尋模組有較大改動,如何在搜尋欄中引導使用者,同時不打擾使用者使用。

2. 設計思考

設計目標:提升搜尋按鈕pv率,同時強化飛豬品牌。

設計方案:在進入飛豬介面時,能看到頂部搜尋欄搜尋按鈕會有一個豬鼻子抖動特效,隨後消失,下拉重新整理時,豬鼻子特效再次啟用,很是有趣。

其實在完善的旅遊行業中,產品設計已經很難有獨自特色亮點,畢竟設計都是有輪迴(擬物-扁平-再到擬物)。安卓與蘋果手機的互動視覺也基本相仿,那好的設計還能從哪裡出發?

結合產品特有的品牌IP去進行產品融入,如果能在產品目標中進行強化IP那簡直厲害。很成功的產品設計細節,再一次強化了飛豬在我腦海中的記憶,值得大家學習。

二、【Timebook】點贊動效——停留後的播放,引導操作

1. 使用場景

一款社交產品,能讓使用者持續UGC(使用者素生產內容)不容易,需要有較多互動,才能留住使用者。

2. 設計思考

設計目標:提高點贊互動率,讓使用者互動率得到提升。

設計方案:當用戶停留到某一條動態時,通過頁面懸停時間,啟用點贊按鈕動效,靈動的動畫,彷彿對方再和你互動,想要你一個點贊,不自覺地就會引導互動起來,也算是打破只看不點讚的僵局。

這個設計亮點非常值得學習。當你要提升某個功能使用率,不妨把做圖示設計的時間改為動效設計。相比於平面圖形,動態圖形更容易引起使用者注意。

三、【騰訊新聞】長按點贊——彩蛋背後的思考,釋放使用者情緒

1. 使用場景

新聞資訊類產品長時間閱讀會引起使用者疲勞,如何通過點贊來讓使用者短暫休息。

2. 設計思考

設計目標:提升使用者使用時長,短暫放鬆是為了更好的閱讀使用。

設計方案:前面有講過微博點贊動效,其實做的蠻浮誇的,但作為泛娛樂產品還是挺好的,但也會強制打斷使用者閱讀。

在騰訊新聞中通過長按點贊圖示,會啟用點贊動效,統一的紅色圖示,強化點贊按鈕本身的屬性。隨著長時間按壓,螢幕會顯示逐漸遞增的數字,最高到+100大約需要5s,這個過程能讓使用者眼睛聚焦,大腦放空一下,好讓之後閱讀思路更加清晰。

四、【支付寶】清爽模式——Tab隱藏,專注支付工具服務

1. 使用場景

支付工具內的眾多服務增加使得產品越來越臃腫,不使用的功能時常干擾使用者操作,反感聲越來越大。

2. 設計思考

設計目標:通過自定義生活頻道導航欄,讓使用者操作更清爽,提升使用者滿意度。

設計方案:在我的-設定-功能管理-生活頻道入口,來選擇生活頻道是否在底部導航欄中顯示。開啟關閉配有對應效果方便使用者直觀理解,尤其對於億級體量的產品,要滿足不同年齡層使用者學習成本,圖示對應會更加友好,提升使用者理解與使用體驗。

五、【飛書】雙擊編輯——互動的提效用途,更快更高效

1. 使用場景

在文件預覽模式下,如何對某一行進行快速編輯操作。

2. 設計思考

設計目標:提升預覽到編輯的快速切換,縮短互動路徑,為使用者提效。

設計方案:當用戶瀏覽一個文件,想要在某一行進行文字編輯時,除了右下角編輯按鈕外,還可以雙擊想要編輯的段落,即可快速進入編輯模式,同時游標停留在雙擊位置處,很是高效。

這就是菲茨定律,通過雙擊互動來替代點選編輯按鈕的互動時間,從而讓編輯效率得到提升。反觀語雀,移動端並沒有做到這點,編輯文章回到頂部,還得和有優化空間的。

六、【貝殼找房】新舊看房——產生預判,避免白走一趟浪費的時間

1. 使用場景

二手房中,看現房很難產生清空後的房屋預判,會因為房間過亂或東西過多導致空間不好的預期,如何解決使用者這種問題?

2. 設計思考

設計目標:通過VR技術進行三維空間採集來提供全新室內設計佈局,提高房屋轉賣率。

設計方案:在二手房詳情頁中,點選設計效果,能看到當前與新裝修後的室內對比VR圖,避免因舊家佈局亂,產生不好的預期,從而不在詳細瞭解。

雖然VR技術是接第三方服務,但這種新舊裝修對比最能直觀給使用者產生正向預期。好不容易買一套房,不也要找室內設計先看下整體裝修效果嗎!

七、【得物】3D試穿——及時體驗,減少門店試穿過程

1.使用場景

線上電商最大的痛點就是無法試穿,導致看上去挺好,但我自己穿就不知道了。

2. 設計思考

設計目標:通過AR現實,提升試穿直觀感受,從而促進商品下單率。

設計方案:在商品詳情頁中,點選AR試穿,就可透過手機看到鞋子試穿後的效果,除了真實腳感不能感受,外形各角度效果都非常不錯,有種身臨其境的感覺,刺激使用者進行下單決策。

無論是直播電商試穿或者AR試穿都在解決使用者無法親身體驗的嘗試,通過一個物件嫁接,能使使用者得到信任,從而提升商品交易量。

八、【映客直播】 雙直播 – 一個預覽直播一個小窗直播,屏效利用更大

1.使用場景

關注的博主,晚上同一時間開播,無奈只有一個手機不能一起看。

2. 設計思考

設計目標:提升直播曝光率,為使用者提供更更多博主直播,提高屏效。

設計方案:在直播頁面中,選擇小視窗模式,會以浮窗直播外漏,使用者可邊看小窗直播,邊看預覽直播大畫面,目的為了曝光更多優秀博主內容,讓使用者按需選擇。雙直播無論對使用者還是博主都提供了多種引流方式,從而提升瀏覽量與瀏覽時長。

九、【拼多多】商品收藏——預選屬性預設儲存,一鍵懂你

1. 使用場景

拼多多拼著買更划算,可遇到當下不買但需要過幾天買的東西,又不想滑走商品,這時就需要收藏功能來代替購物車。

2. 設計思考

設計目標:提升收藏功能的易用性,不用二次選擇即可一鍵下單,快捷高效購物。

設計方案:在瀏覽商品時,選擇好商品屬性,點選收藏,商品預設放在收藏模組中,需要買時,只需開啟收藏頁,就能看到商品資訊和之前預選的商品屬性,節省二次選擇操作,為使用者提供高效收藏。

相比淘寶的收藏,只是簡單的商品收藏,並沒有把預選的商品屬性一併收藏起來,使用者在收藏中購物時,還需要再進入商品頁二次選擇,頻繁重複的操作,帶來的低效的購物體驗。

十、【微信】影片號喜歡——頭像神奇位移,極度舒服

1. 使用場景

在瀏覽影片時,如何引導並強化點選喜歡的操作。

2. 設計思考

設計目標:提升喜歡互動的趣味體驗,提高點選率。

設計方案:當點選喜歡,你能看到自己的頭像會有一個弧形移動效果,最終停留在正文上方。很流暢的操作,頭像停留出是好友旁邊,有種擠在朋友身邊的錯覺,並不孤單,加強親密性,影片都很喜歡並不是只有我自己覺得好。

弧形移動相比直線移動更具有動感,更能抓住使用者視線,從而再次強化喜歡按鈕的功能。

十一、結語

設計師要有發現美的眼睛。美不僅是視覺,還有好的體驗流程。不要讓使用者思考,這是每個設計師所追求的。

認真記錄產品細節,瞭解背後的思考,也是不斷提升自己邏輯思維和表達能力的一種方式。

本期產品細節分析結束,我們下期再見!

#專欄作家#

碳水Sir;微信公眾號:草蓉三石,人人都是產品經理專欄作家。One More產品設計負責人,擅長設計細節洞察分析。

本文原創釋出於人人都是產品經理。未經許可,禁止轉載。

題圖來自Unsplash,基於 CC0 協議。