編輯導(dǎo)語：好的產(chǎn)品，不僅能提供好的用戶體驗，還通過細(xì)節(jié)傳遞著團(tuán)隊的產(chǎn)品力和產(chǎn)品理念。針對不一樣的場景，產(chǎn)品們可以從哪些地方進(jìn)行不一樣的視覺呈現(xiàn)？本文作者從產(chǎn)品的視覺呈現(xiàn)入手，全面詳細(xì)地講訴了10個國民APP的設(shè)計方案。感興趣的小伙伴不妨來看看。

目錄章節(jié)

1. 【翼支付】國 – 情感相連，牢記今日重要性
2. 【飛豬】強 – 值得尊重的首頁瀑布流全置灰
3. 【優(yōu)酷】則 – 精選欄目長屏置灰，以示尊重
4. 【京東】民 – 配合文案展示，清晰傳達(dá)今日之特殊
5. 【淘寶】安 – 首頁與逛逛導(dǎo)航置灰，弱化色彩對比
6. 【拼多多】告 – 全劇置灰，弱化產(chǎn)品視覺
7. 【百度】誡 – 細(xì)節(jié)灰度處理，視覺呈現(xiàn)更加細(xì)膩
8. 【餓了么】后 – 金剛區(qū)全置灰，半屏灰度處理
9. 【云閃付】來 – 頂部主視覺置灰，營造紀(jì)念氛圍
10. 【美團(tuán)】人 – 頂部品牌色置灰，避免影響主體業(yè)務(wù)
11. 【視覺總結(jié)】 – 文末總結(jié)大廠對特殊日的視覺表現(xiàn)

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

1. 產(chǎn)品描述

作為覆蓋通信、民生繳費等多生活消費場景的便民產(chǎn)品，用戶主要集中青、中、老年群體中。

2. 設(shè)計方案

在首頁一屏中（指進(jìn)入首頁不去向下滑動）用灰度來給原有的彩色頁面去噪，用灰白視覺呈現(xiàn)來緬懷這一特殊日子。除此之外，運營彈窗也用灰度來呈現(xiàn)，避免與首頁視覺呈現(xiàn)不統(tǒng)一導(dǎo)致的穿幫。

再有就是金剛區(qū)「更多」頁面中所有圖標(biāo)的灰度呈現(xiàn)，視覺統(tǒng)一，與首頁金剛區(qū)自定義編輯形成良好的視覺閉環(huán)，細(xì)節(jié)之處發(fā)現(xiàn)產(chǎn)品設(shè)計上的用心，產(chǎn)品情感的良好傳達(dá)。

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

1. 產(chǎn)品描述

「飛豬」是阿里巴巴旗下的旅游產(chǎn)品，有住、行、游玩攻略等眾多服務(wù)。自身已有完整品牌屬性，如何更好提升品牌情感，用情緒影響用戶，提升使用粘性。

2. 設(shè)計方案

進(jìn)入「飛豬」首頁呈現(xiàn)全局灰色布局，往下滑動瀑布流中UGC與運營等內(nèi)容也都灰色顯示，上下首位統(tǒng)一，沒有割裂感，視覺氛圍感知強。但對于習(xí)慣首頁瀏覽的用戶，長時間觀看會有視覺壓抑感，產(chǎn)生情緒波動。

三、【優(yōu)酷】 – 精選欄目長屏置灰，以示尊重

1. 產(chǎn)品描述

作為知名視頻網(wǎng)站，制作精品內(nèi)容目的也是為了服務(wù)用戶，產(chǎn)生強粘性，增加產(chǎn)品活躍度，如此一來，情感傳達(dá)也同樣重要。

2. 設(shè)計方案

在首頁精選欄目中，視覺呈現(xiàn)都用灰色來處理，統(tǒng)一性更強，當(dāng)切換到其他欄目中恢復(fù)原彩模式，沒有較強割裂感。且全局操作時只有標(biāo)簽欄始終灰色圖標(biāo)呈現(xiàn)，不影響用戶正常使用瀏覽。

四、【京東】 – 配合文案展示，清晰傳達(dá)今日之特殊

1. 產(chǎn)品描述

移動購物產(chǎn)品，用戶體量本身就很大，作為企業(yè)，要有帶頭作用以及正向傳播使命。如何更好地給予用戶感知，是當(dāng)下之需。

2. 設(shè)計方案

進(jìn)入首頁，主屏置灰，對于電商平臺來說，用戶文字瀏覽會更多，同時會更好理解，在左上角與京東狗排列，展示「緬懷悼念」文案，更容易讓用戶理解首屏灰度展示的原因，也更好地與用戶情感綁定，加深企業(yè)正向傳播。
當(dāng)下滑瀏覽時，瓷片區(qū)模塊與瀑布流信息進(jìn)行色彩分割，弱化了色彩斷層，讓用戶也能良好地瀏覽與使用，很好地避免用戶瀏覽時的壓迫感，避免當(dāng)日GMV（商品交易總額 ）下滑較大。全屏去色后依然可以通過標(biāo)簽欄圖標(biāo)色彩來區(qū)分品牌感知。

五、【淘寶】 – 首頁與逛逛導(dǎo)航置灰，弱化色彩對比

1. 產(chǎn)品描述

作為電商頭部產(chǎn)品，為用戶推出好逛、有趣的消費場景，用戶來淘寶更多是逛街，發(fā)現(xiàn)好物等滿足各需求的使用。企業(yè)也要與特殊日有關(guān)聯(lián)，來給用戶正向傳播情感，提升國民凝聚力。

2. 設(shè)計方案

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

六、【拼多多】 – 全劇置灰，弱化產(chǎn)品視覺

1. 產(chǎn)品描述

拼多多作為34線城市的主力軍，在助農(nóng)產(chǎn)品上一直發(fā)揮著重要地位。34線及鄉(xiāng)村人口是一個大基數(shù)，作為企業(yè)同樣需要傳達(dá)國家情感，讓用戶一起緬懷。

2. 設(shè)計方案

拼多多首屏灰度展示，因為本身業(yè)務(wù)模塊整合精煉，首屏?xí)故旧唐穬?nèi)容，再次情況下，為了讓首屏視覺灰度統(tǒng)一，給用戶統(tǒng)一感，一屏顯示的兩個商品都去色展示，包括價格和頭像等。

當(dāng)用戶在首頁向下滑動瀏覽更多商品時，呈現(xiàn)原彩模式，不會過多影響用戶使用體驗。tabbar圖標(biāo)始終灰色展示，時刻告知用戶今日是特殊日子，加深用戶印象。

七、【百度】 – 細(xì)節(jié)灰度處理，視覺呈現(xiàn)更加細(xì)膩

1. 產(chǎn)品描述

作為最早入局，擁有大量用戶的搜索咨詢平臺，用戶搜索看新聞等都是高頻發(fā)生的事情，如何在不影響產(chǎn)品自身情況下，配合特殊節(jié)日去做緬懷的視覺呈現(xiàn)。

2. 設(shè)計方案

百度搜索使用的人群更多更廣，當(dāng)用戶在特殊日子搜索特定關(guān)鍵詞，得到的內(nèi)容會經(jīng)過處理呈現(xiàn)偏藍(lán)灰的主色調(diào)，給用戶視覺感知，并且在金剛區(qū)中，圖標(biāo)色彩重新設(shè)計，與背景形成強呼應(yīng)，氛圍感更強，讓用戶更好的沉浸在場景中閱讀，提高瀏覽體驗。

八、【餓了么】 – 金剛區(qū)全置灰，半屏灰度處理

1. 產(chǎn)品描述

阿里巴巴旗下本地生活服務(wù)產(chǎn)品，用戶外賣美食場景更加頻繁，對于DUA（日活躍用戶）大的產(chǎn)品，同樣需要在特殊節(jié)日給用戶情感共鳴，與阿里生態(tài)形成統(tǒng)一的特殊節(jié)日視覺呈現(xiàn)。

2. 設(shè)計方案

首頁金剛區(qū)與頂部導(dǎo)航灰度處理，各模塊入口色彩保持統(tǒng)一，給用戶特殊節(jié)日感知。金剛區(qū)下方瀑布流采用原彩模式呈現(xiàn)給消費者，用戶進(jìn)入首頁會有明顯色彩斷層感知，此做法迫于消費場景，做的視覺讓步。

因為推薦模塊更多都是當(dāng)下及時消費的餐飲菜品，置灰處理給用戶的感知自己在消費灰色內(nèi)容，會有不尊重，帶入感等復(fù)雜情緒，產(chǎn)生負(fù)面影響，所以首頁會呈現(xiàn)色彩斷層感受。

再說回拼多多為什么要商品置灰處理，其一因為電商購物從付費運輸派送周期會有3-5天用戶當(dāng)下消費后，感知會慢慢淡去。

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

九、【云閃付】 – 頂部主視覺置灰，營造紀(jì)念氛圍

1. 產(chǎn)品描述

銀行業(yè)務(wù)統(tǒng)一管理的戰(zhàn)略產(chǎn)品，用戶基數(shù)同樣很大，產(chǎn)品本身品牌紅色會和當(dāng)日特殊節(jié)日產(chǎn)生強對比。設(shè)想在重要的緬懷場景下，使用云閃付交易，首頁半屏紅色不利于特殊場景下使用，那如何解決。

2. 設(shè)計方案

紅色在中國更多具有喜慶熱鬧活躍的感受，不利于特殊節(jié)日使用。云閃付作為品牌紅會與節(jié)日發(fā)生沖突。在首頁頂部導(dǎo)航中采用去色的表現(xiàn)形式，一來降低色彩與場景的對比，二來體現(xiàn)產(chǎn)品對節(jié)日的特殊緬懷，三來降低飽和度會凸顯金剛區(qū)業(yè)務(wù)板塊，側(cè)面還能提升各業(yè)務(wù)的曝光，是不錯的方案設(shè)計。

十、【美團(tuán)】 – 頂部品牌色置灰，避免影響主體業(yè)務(wù)

1. 產(chǎn)品描述

生活本地服務(wù)的大佬，各業(yè)務(wù)模塊都是產(chǎn)品營收的關(guān)鍵，如何在不影響商業(yè)前提下，還能很好地給用戶傳達(dá)特殊節(jié)日下的緬懷行為。

2. 設(shè)計方案

和云閃付的視覺呈現(xiàn)類似，在頂部導(dǎo)航欄中用灰度來代替品牌黃，給用戶直觀感受，灰色相比黃色不會搶眼，在首頁與金剛區(qū)排列中，更加突出金剛區(qū)業(yè)務(wù)的分類，強化各模塊曝光，多業(yè)務(wù)來說是一個好的視覺改點，因為此節(jié)日具有特殊性時間性，短期使用灰色不會影響用戶使用，反而會強化金剛區(qū)業(yè)務(wù)。

為了營造氛圍，避免大面積灰色呈現(xiàn)，在底部標(biāo)簽欄中使用灰色圖標(biāo)展示，時刻給用戶傳遞節(jié)日感知。

十一、視覺總結(jié)

在特殊節(jié)日里可以通過，灰度呈現(xiàn)來讓用戶感知到產(chǎn)品的情感。

全局灰度：視覺呈現(xiàn)統(tǒng)一，無色彩割裂感，長時間觀看會給用戶視覺壓迫感。

首屏灰度：首頁灰度統(tǒng)一，向下滑動時有明顯色彩斷層，分割感強，但不影響用戶向下瀏覽內(nèi)容時的彩色呈現(xiàn)。

特殊圖標(biāo)及背景去色處理：視覺呈現(xiàn)最好，不影響品牌色傳播，瀏覽時具有呼吸感，不壓迫不斷層。

金剛區(qū)與導(dǎo)航去色：首頁視覺呈現(xiàn)斷層，搜索金剛區(qū)入口需要看字來尋找，視覺感知平級，品牌感知較弱。

導(dǎo)航與Tabbar去色：首頁視覺兩分化，強化金剛區(qū)檢索，品牌色感知較弱，會給用戶感知BUG問題的想法，但不影響各業(yè)務(wù)的尋找使用。

總之，處理方式有很多種，結(jié)合自家產(chǎn)品，不影響用戶使用和易開發(fā)兩點去選擇合適的呈現(xiàn)形式，讓用戶感知產(chǎn)品也是具有國家情懷和用戶情感一致的使用體驗。

十二、結(jié)語

設(shè)計師要有發(fā)現(xiàn)美的眼睛。美不僅是視覺，還有好的體驗流程。不要讓用戶思考，這是每個設(shè)計師所追求的。認(rèn)真記錄產(chǎn)品細(xì)節(jié)，了解背后的思考，也是不斷提升自己邏輯思維和表達(dá)能力的一種方式。

本期產(chǎn)品細(xì)節(jié)分析結(jié)束，我們下期再見！

作者：碳水Sir；公眾號：草蓉三石

本文由 @碳水Sir 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議