產品細節洞察分析,大廠對重大紀念日的視覺呈現(2021-10)

編輯導語:好的產品,不僅能提供好的使用者體驗,還透過細節傳遞著團隊的產品力和產品理念。針對不一樣的場景,產品們可以從哪些地方進行不一樣的視覺呈現?本文作者從產品的視覺呈現入手,全面詳細地講訴了10個國民APP的設計方案。感興趣的小夥伴不妨來看看。

產品細節洞察分析,大廠對重大紀念日的視覺呈現(2021-10)

目錄章節

【翼支付】

– 情感相連,牢記今日重要性

【飛豬】

– 值得尊重的首頁瀑布流全置灰

【優酷】

– 精選欄目長屏置灰,以示尊重

【京東】

– 配合文案展示,清晰傳達今日之特殊

【淘寶】

– 首頁與逛逛導航置灰,弱化色彩對比

【拼多多】

– 全劇置灰,弱化產品視覺

【百度】

– 細節灰度處理,視覺呈現更加細膩

【餓了麼】

– 金剛區全置灰,半屏灰度處理

【雲閃付】

– 頂部主視覺置灰,營造紀念氛圍

【美團】

– 頂部品牌色置灰,避免影響主體業務

【視覺總結】 –

文末總結大廠對特殊日的視覺表現

一、【翼支付】- 情感相連,牢記今日重要性

1. 產品描述

作為覆蓋通訊、民生繳費等多生活消費場景的便民產品,使用者主要集中青、中、老年群體中。

2. 設計方案

在首頁一屏中(指進入首頁不去向下滑動)用灰度來給原有的彩色頁面去噪,用灰白視覺呈現來緬懷這一特殊日子。除此之外,運營彈窗也用灰度來呈現,避免與首頁視覺呈現不統一導致的穿幫。

再有就是金剛區「更多」頁面中所有圖示的灰度呈現,視覺統一,與首頁金剛區自定義編輯形成良好的視覺閉環,細節之處發現產品設計上的用心,產品情感的良好傳達。

產品細節洞察分析,大廠對重大紀念日的視覺呈現(2021-10)

二、【飛豬】- 值得尊重的首頁瀑布流全置灰

1. 產品描述

「飛豬」是阿里巴巴旗下的旅遊產品,有住、行、遊玩攻略等眾多服務。自身已有完整品牌屬性,如何更好提升品牌情感,用情緒影響使用者,提升使用粘性。

2. 設計方案

進入「飛豬」首頁呈現全域性灰色佈局,往下滑動瀑布流中UGC與運營等內容也都灰色顯示,上下首位統一,沒有割裂感,視覺氛圍感知強。但對於習慣首頁瀏覽的使用者,長時間觀看會有視覺壓抑感,產生情緒波動。

產品細節洞察分析,大廠對重大紀念日的視覺呈現(2021-10)

三、【優酷】 – 精選欄目長屏置灰,以示尊重

1. 產品描述

作為知名影片網站,製作精品內容目的也是為了服務使用者,產生強粘性,增加產品活躍度,如此一來,情感傳達也同樣重要。

2. 設計方案

在首頁精選欄目中,視覺呈現都用灰色來處理,統一性更強,當切換到其他欄目中恢復原彩模式,沒有較強割裂感。且全域性操作時只有標籤欄始終灰色圖示呈現,不影響使用者正常使用瀏覽。

產品細節洞察分析,大廠對重大紀念日的視覺呈現(2021-10)

四、【京東】 – 配合文案展示,清晰傳達今日之特殊

1. 產品描述

移動購物產品,使用者體量本身就很大,作為企業,要有帶頭作用以及正向傳播使命。如何更好地給予使用者感知,是當下之需。

2. 設計方案

進入首頁,主屏置灰,對於電商平臺來說,使用者文字瀏覽會更多,同時會更好理解,在左上角與京東狗排列,展示「緬懷悼念」文案,更容易讓使用者理解首屏灰度展示的原因,也更好地與使用者情感繫結,加深企業正向傳播。 當下滑瀏覽時,瓷片區模組與瀑布流資訊進行色彩分割,弱化了色彩斷層,讓使用者也能良好地瀏覽與使用,很好地避免使用者瀏覽時的壓迫感,避免當日GMV(商品交易總額 )下滑較大。全屏去色後依然可以透過標籤欄圖示色彩來區分品牌感知。

產品細節洞察分析,大廠對重大紀念日的視覺呈現(2021-10)

五、【淘寶】 – 首頁與逛逛導航置灰,弱化色彩對比

1. 產品描述

作為電商頭部產品,為使用者推出好逛、有趣的消費場景,使用者來淘寶更多是逛街,發現好物等滿足各需求的使用。企業也要與特殊日有關聯,來給使用者正向傳播情感,提升國民凝聚力。

2. 設計方案

在首頁主屏置灰,向下滑動顯示被遮擋模組後用原彩來呈現,模組有輕微斷層,但可以避免各分會場使用者流失。逛逛模組主視覺粉紅色灰度處理,降低色彩曝光,與首頁形成色彩統一很好避免了視覺強對比給使用者帶來的混亂感。

產品細節洞察分析,大廠對重大紀念日的視覺呈現(2021-10)

六、【拼多多】 – 全劇置灰,弱化產品視覺

1. 產品描述

拼多多作為34線城市的主力軍,在助農產品上一直髮揮著重要地位。34線及鄉村人口是一個大基數,作為企業同樣需要傳達國家情感,讓使用者一起緬懷。

2. 設計方案

拼多多首屏灰度展示,因為本身業務模組整合精煉,首屏會展示商品內容,再次情況下,為了讓首屏視覺灰度統一,給使用者統一感,一屏顯示的兩個商品都去色展示,包括價格和頭像等。

當用戶在首頁向下滑動瀏覽更多商品時,呈現原彩模式,不會過多影響使用者使用體驗。tabbar圖示始終灰色展示,時刻告知使用者今日是特殊日子,加深使用者印象。

產品細節洞察分析,大廠對重大紀念日的視覺呈現(2021-10)

七、【百度】 – 細節灰度處理,視覺呈現更加細膩

1. 產品描述

作為最早入局,擁有大量使用者的搜尋諮詢平臺,使用者搜尋看新聞等都是高頻發生的事情,如何在不影響產品自身情況下,配合特殊節日去做緬懷的視覺呈現。

2. 設計方案

百度搜索使用的人群更多更廣,當用戶在特殊日子搜尋特定關鍵詞,得到的內容會經過處理呈現偏藍灰的主色調,給使用者視覺感知,並且在金剛區中,圖示色彩重新設計,與背景形成強呼應,氛圍感更強,讓使用者更好的沉浸在場景中閱讀,提高瀏覽體驗。

產品細節洞察分析,大廠對重大紀念日的視覺呈現(2021-10)

八、【餓了麼】 – 金剛區全置灰,半屏灰度處理

1. 產品描述

阿里巴巴旗下本地生活服務產品,使用者外賣美食場景更加頻繁,對於DUA(日活躍使用者)大的產品,同樣需要在特殊節日給使用者情感共鳴,與阿里生態形成統一的特殊節日視覺呈現。

2. 設計方案

首頁金剛區與頂部導航灰度處理,各模組入口色彩保持統一,給使用者特殊節日感知。金剛區下方瀑布流採用原彩模式呈現給消費者,使用者進入首頁會有明顯色彩斷層感知,此做法迫於消費場景,做的視覺讓步。

因為推薦模組更多都是當下及時消費的餐飲菜品,置灰處理給使用者的感知自己在消費灰色內容,會有不尊重,帶入感等複雜情緒,產生負面影響,所以首頁會呈現色彩斷層感受。

再說回拼多多為什麼要商品置灰處理,其一因為電商購物從付費運輸派送週期會有3-5天使用者當下消費後,感知會慢慢淡去。

其二因為拼多多相比餓了麼使用者體量更大,首頁如果出現明顯顏色斷層灰給使用者極大的視覺干擾,造成不好的使用體驗。如此僅個人感悟,如有其他見解歡迎留言討論。

產品細節洞察分析,大廠對重大紀念日的視覺呈現(2021-10)

九、【雲閃付】 – 頂部主視覺置灰,營造紀念氛圍

1. 產品描述

銀行業務統一管理的戰略產品,使用者基數同樣很大,產品本身品牌紅色會和當日特殊節日產生強對比。設想在重要的緬懷場景下,使用雲閃付交易,首頁半屏紅色不利於特殊場景下使用,那如何解決。

2. 設計方案

紅色在中國更多具有喜慶熱鬧活躍的感受,不利於特殊節日使用。雲閃付作為品牌紅會與節日發生衝突。在首頁頂部導航中採用去色的表現形式,一來降低色彩與場景的對比,二來體現產品對節日的特殊緬懷,三來降低飽和度會凸顯金剛區業務板塊,側面還能提升各業務的曝光,是不錯的方案設計。

產品細節洞察分析,大廠對重大紀念日的視覺呈現(2021-10)

十、【美團】 – 頂部品牌色置灰,避免影響主體業務

1. 產品描述

生活本地服務的大佬,各業務模組都是產品營收的關鍵,如何在不影響商業前提下,還能很好地給使用者傳達特殊節日下的緬懷行為。

2. 設計方案

和雲閃付的視覺呈現類似,在頂部導航欄中用灰度來代替品牌黃,給使用者直觀感受,灰色相比黃色不會搶眼,在首頁與金剛區排列中,更加突出金剛區業務的分類,強化各模組曝光,多業務來說是一個好的視覺改點,因為此節日具有特殊性時間性,短期使用灰色不會影響使用者使用,反而會強化金剛區業務。

為了營造氛圍,避免大面積灰色呈現,在底部標籤欄中使用灰色圖示展示,時刻給使用者傳遞節日感知。

產品細節洞察分析,大廠對重大紀念日的視覺呈現(2021-10)

十一、視覺總結

在特殊節日裡可以透過,灰度呈現來讓使用者感知到產品的情感。

全域性灰度:

視覺呈現統一,無色彩割裂感,長時間觀看會給使用者視覺壓迫感。

首屏灰度:

首頁灰度統一,向下滑動時有明顯色彩斷層,分割感強,但不影響使用者向下瀏覽內容時的彩色呈現。

特殊圖示及背景去色處理:

視覺呈現最好,不影響品牌色傳播,瀏覽時具有呼吸感,不壓迫不斷層。

金剛區與導航去色:

首頁視覺呈現斷層,搜尋金剛區入口需要看字來尋找,視覺感知平級,品牌感知較弱。

導航與Tabbar去色:

首頁視覺兩分化,強化金剛區檢索,品牌色感知較弱,會給使用者感知BUG問題的想法,但不影響各業務的尋找使用。

總之,處理方式有很多種,結合自家產品,不影響使用者使用和易開發兩點去選擇合適的呈現形式,讓使用者感知產品也是具有國家情懷和使用者情感一致的使用體驗。

十二、結語

設計師要有發現美的眼睛。美不僅是視覺,還有好的體驗流程。不要讓使用者思考,這是每個設計師所追求的。認真記錄產品細節,瞭解背後的思考,也是不斷提升自己邏輯思維和表達能力的一種方式。

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

作者:碳水Sir;公眾號:草蓉三石

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

題圖來自Unsplash,基於CC0協議

頂部