編輯導語:好的產品,不僅能提供好的使用者體驗,還透過細節傳遞著團隊的產品力和產品理念。針對不一樣的場景,產品們可以從哪些地方進行不一樣的視覺呈現?本文作者從產品的視覺呈現入手,全面詳細地講訴了10個國民APP的設計方案。感興趣的小夥伴不妨來看看。
目錄章節
【翼支付】
國
– 情感相連,牢記今日重要性
【飛豬】
強
– 值得尊重的首頁瀑布流全置灰
【優酷】
則
– 精選欄目長屏置灰,以示尊重
【京東】
民
– 配合文案展示,清晰傳達今日之特殊
【淘寶】
安
– 首頁與逛逛導航置灰,弱化色彩對比
【拼多多】
告
– 全劇置灰,弱化產品視覺
【百度】
誡
– 細節灰度處理,視覺呈現更加細膩
【餓了麼】
後
– 金剛區全置灰,半屏灰度處理
【雲閃付】
來
– 頂部主視覺置灰,營造紀念氛圍
【美團】
人
– 頂部品牌色置灰,避免影響主體業務
【視覺總結】 –
文末總結大廠對特殊日的視覺表現
一、【翼支付】- 情感相連,牢記今日重要性
1. 產品描述
作為覆蓋通訊、民生繳費等多生活消費場景的便民產品,使用者主要集中青、中、老年群體中。
2. 設計方案
在首頁一屏中(指進入首頁不去向下滑動)用灰度來給原有的彩色頁面去噪,用灰白視覺呈現來緬懷這一特殊日子。除此之外,運營彈窗也用灰度來呈現,避免與首頁視覺呈現不統一導致的穿幫。
再有就是金剛區「更多」頁面中所有圖示的灰度呈現,視覺統一,與首頁金剛區自定義編輯形成良好的視覺閉環,細節之處發現產品設計上的用心,產品情感的良好傳達。
二、【飛豬】- 值得尊重的首頁瀑布流全置灰
1. 產品描述
「飛豬」是阿里巴巴旗下的旅遊產品,有住、行、遊玩攻略等眾多服務。自身已有完整品牌屬性,如何更好提升品牌情感,用情緒影響使用者,提升使用粘性。
2. 設計方案
進入「飛豬」首頁呈現全域性灰色佈局,往下滑動瀑布流中UGC與運營等內容也都灰色顯示,上下首位統一,沒有割裂感,視覺氛圍感知強。但對於習慣首頁瀏覽的使用者,長時間觀看會有視覺壓抑感,產生情緒波動。
三、【優酷】 – 精選欄目長屏置灰,以示尊重
1. 產品描述
作為知名影片網站,製作精品內容目的也是為了服務使用者,產生強粘性,增加產品活躍度,如此一來,情感傳達也同樣重要。
2. 設計方案
在首頁精選欄目中,視覺呈現都用灰色來處理,統一性更強,當切換到其他欄目中恢復原彩模式,沒有較強割裂感。且全域性操作時只有標籤欄始終灰色圖示呈現,不影響使用者正常使用瀏覽。
四、【京東】 – 配合文案展示,清晰傳達今日之特殊
1. 產品描述
移動購物產品,使用者體量本身就很大,作為企業,要有帶頭作用以及正向傳播使命。如何更好地給予使用者感知,是當下之需。
2. 設計方案
進入首頁,主屏置灰,對於電商平臺來說,使用者文字瀏覽會更多,同時會更好理解,在左上角與京東狗排列,展示「緬懷悼念」文案,更容易讓使用者理解首屏灰度展示的原因,也更好地與使用者情感繫結,加深企業正向傳播。 當下滑瀏覽時,瓷片區模組與瀑布流資訊進行色彩分割,弱化了色彩斷層,讓使用者也能良好地瀏覽與使用,很好地避免使用者瀏覽時的壓迫感,避免當日GMV(商品交易總額 )下滑較大。全屏去色後依然可以透過標籤欄圖示色彩來區分品牌感知。
五、【淘寶】 – 首頁與逛逛導航置灰,弱化色彩對比
1. 產品描述
作為電商頭部產品,為使用者推出好逛、有趣的消費場景,使用者來淘寶更多是逛街,發現好物等滿足各需求的使用。企業也要與特殊日有關聯,來給使用者正向傳播情感,提升國民凝聚力。
2. 設計方案
在首頁主屏置灰,向下滑動顯示被遮擋模組後用原彩來呈現,模組有輕微斷層,但可以避免各分會場使用者流失。逛逛模組主視覺粉紅色灰度處理,降低色彩曝光,與首頁形成色彩統一很好避免了視覺強對比給使用者帶來的混亂感。
六、【拼多多】 – 全劇置灰,弱化產品視覺
1. 產品描述
拼多多作為34線城市的主力軍,在助農產品上一直髮揮著重要地位。34線及鄉村人口是一個大基數,作為企業同樣需要傳達國家情感,讓使用者一起緬懷。
2. 設計方案
拼多多首屏灰度展示,因為本身業務模組整合精煉,首屏會展示商品內容,再次情況下,為了讓首屏視覺灰度統一,給使用者統一感,一屏顯示的兩個商品都去色展示,包括價格和頭像等。
當用戶在首頁向下滑動瀏覽更多商品時,呈現原彩模式,不會過多影響使用者使用體驗。tabbar圖示始終灰色展示,時刻告知使用者今日是特殊日子,加深使用者印象。
七、【百度】 – 細節灰度處理,視覺呈現更加細膩
1. 產品描述
作為最早入局,擁有大量使用者的搜尋諮詢平臺,使用者搜尋看新聞等都是高頻發生的事情,如何在不影響產品自身情況下,配合特殊節日去做緬懷的視覺呈現。
2. 設計方案
百度搜索使用的人群更多更廣,當用戶在特殊日子搜尋特定關鍵詞,得到的內容會經過處理呈現偏藍灰的主色調,給使用者視覺感知,並且在金剛區中,圖示色彩重新設計,與背景形成強呼應,氛圍感更強,讓使用者更好的沉浸在場景中閱讀,提高瀏覽體驗。
八、【餓了麼】 – 金剛區全置灰,半屏灰度處理
1. 產品描述
阿里巴巴旗下本地生活服務產品,使用者外賣美食場景更加頻繁,對於DUA(日活躍使用者)大的產品,同樣需要在特殊節日給使用者情感共鳴,與阿里生態形成統一的特殊節日視覺呈現。
2. 設計方案
首頁金剛區與頂部導航灰度處理,各模組入口色彩保持統一,給使用者特殊節日感知。金剛區下方瀑布流採用原彩模式呈現給消費者,使用者進入首頁會有明顯色彩斷層感知,此做法迫於消費場景,做的視覺讓步。
因為推薦模組更多都是當下及時消費的餐飲菜品,置灰處理給使用者的感知自己在消費灰色內容,會有不尊重,帶入感等複雜情緒,產生負面影響,所以首頁會呈現色彩斷層感受。
再說回拼多多為什麼要商品置灰處理,其一因為電商購物從付費運輸派送週期會有3-5天使用者當下消費後,感知會慢慢淡去。
其二因為拼多多相比餓了麼使用者體量更大,首頁如果出現明顯顏色斷層灰給使用者極大的視覺干擾,造成不好的使用體驗。如此僅個人感悟,如有其他見解歡迎留言討論。
九、【雲閃付】 – 頂部主視覺置灰,營造紀念氛圍
1. 產品描述
銀行業務統一管理的戰略產品,使用者基數同樣很大,產品本身品牌紅色會和當日特殊節日產生強對比。設想在重要的緬懷場景下,使用雲閃付交易,首頁半屏紅色不利於特殊場景下使用,那如何解決。
2. 設計方案
紅色在中國更多具有喜慶熱鬧活躍的感受,不利於特殊節日使用。雲閃付作為品牌紅會與節日發生衝突。在首頁頂部導航中採用去色的表現形式,一來降低色彩與場景的對比,二來體現產品對節日的特殊緬懷,三來降低飽和度會凸顯金剛區業務板塊,側面還能提升各業務的曝光,是不錯的方案設計。
十、【美團】 – 頂部品牌色置灰,避免影響主體業務
1. 產品描述
生活本地服務的大佬,各業務模組都是產品營收的關鍵,如何在不影響商業前提下,還能很好地給使用者傳達特殊節日下的緬懷行為。
2. 設計方案
和雲閃付的視覺呈現類似,在頂部導航欄中用灰度來代替品牌黃,給使用者直觀感受,灰色相比黃色不會搶眼,在首頁與金剛區排列中,更加突出金剛區業務的分類,強化各模組曝光,多業務來說是一個好的視覺改點,因為此節日具有特殊性時間性,短期使用灰色不會影響使用者使用,反而會強化金剛區業務。
為了營造氛圍,避免大面積灰色呈現,在底部標籤欄中使用灰色圖示展示,時刻給使用者傳遞節日感知。
十一、視覺總結
在特殊節日裡可以透過,灰度呈現來讓使用者感知到產品的情感。
全域性灰度:
視覺呈現統一,無色彩割裂感,長時間觀看會給使用者視覺壓迫感。
首屏灰度:
首頁灰度統一,向下滑動時有明顯色彩斷層,分割感強,但不影響使用者向下瀏覽內容時的彩色呈現。
特殊圖示及背景去色處理:
視覺呈現最好,不影響品牌色傳播,瀏覽時具有呼吸感,不壓迫不斷層。
金剛區與導航去色:
首頁視覺呈現斷層,搜尋金剛區入口需要看字來尋找,視覺感知平級,品牌感知較弱。
導航與Tabbar去色:
首頁視覺兩分化,強化金剛區檢索,品牌色感知較弱,會給使用者感知BUG問題的想法,但不影響各業務的尋找使用。
總之,處理方式有很多種,結合自家產品,不影響使用者使用和易開發兩點去選擇合適的呈現形式,讓使用者感知產品也是具有國家情懷和使用者情感一致的使用體驗。
十二、結語
設計師要有發現美的眼睛。美不僅是視覺,還有好的體驗流程。不要讓使用者思考,這是每個設計師所追求的。認真記錄產品細節,瞭解背後的思考,也是不斷提升自己邏輯思維和表達能力的一種方式。
本期產品細節分析結束,我們下期再見!
作者:碳水Sir;公眾號:草蓉三石
本文由 @碳水Sir 原創釋出於人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基於CC0協議