概述

今天給大家分享海外瀏覽器視覺風格升級的案例。希望可以把整個產品改版過程中的沉澱以及總結經驗分享給大家。整個項目從19年6月開始，從設計提案到完整方案落地上線持續了5個月，前3個月從「方案探索」到「方案定稿」進行了多維度的嘗試，後續2個月從「開發落地」到「數據驗證」，針對不同變量的數據結論，進行設計微調整，以達成「正式上線」標準

接下來，先從背景部分給大家介紹下整個項目背景：

背景部分

外銷瀏覽器整體視覺樣式過於陳舊、以及體驗方面存在很多問題、品牌屬性較弱、缺乏一定的品牌認知、用戶在使用體驗上存在痛點等。因此需要進行全面的體驗優化升級，改善當前存在問題，以及提升品牌屬性，增強品牌一致性。給用戶提供良好的使用體驗，能更好的使用我們的產品。具體從以下四個方面闡述：

1. 主視覺樣式同海外主流產品對比

以下是海外瀏覽器線上效果，以及對比海外市場的Google系、Chrome產品視覺效果，海外主流產品的視覺風格更輕量化，簡潔，把視覺聚焦點放在產品內容上，因此我們的產品在視覺上有很大的優化空間（關於海外用戶對app風格傾向的用研結論顯示，海外用戶更傾向於Chrome及谷歌系產品風格）

2. 可用性問題梳理

本次體驗優化，在重新定義視覺風格的基礎上，可同步解決目前存在的體驗問題。因此和產品運營同學同步優化建議，以及提取可用性測試問題。經過討論並達成一致，整理待解決問題圖下：

3. 交互及UI整理待改進問題

在梳理完成可用性問題後，設計側進行了體驗問題走查工作，梳理體驗上存在的待改進問題點，對問題進行篩選及整理，梳理出目前待解決的體驗問題如下，後續視覺風格定義過程中，會同步解決對應問題

競品風格梳理

1. Google

• 整體視覺風格清爽，乾淨，沒有過多的裝飾，善於運用輕量化卡片，整合信息，少量使用微漸變區分不同信息
• 整體品牌色使用較謹慎，避免過度使用品牌色，保持整體性及簡約印象
• icon風格保留棱角，有質感，整體感更強

2. Chrome

內容版式佈局上較舒適，沒有擁擠感，層級清晰，閱讀體驗好

3. YouTube

YouTube採用沉浸式，內容呈現清晰，視頻封面/icon元素/模塊間空間，整體比例較大，區別於國內app，單屏可展示內容相對會減少，但足夠清晰，保留了呼吸感

綜上，目前海外主流競品均採用簡潔留白，保持視覺清晰，慎重使用品牌色，避免主色過度使用，將視覺重心聚焦在內容上，icon風格爲棱角切面。整體視覺風格和產品提議及用戶期望的風格方向一致，也便於我們後續確定視覺風格方向。

風格提煉

基於調研用戶期望的風格方向，以及產品提議的視覺風格定位均傾向於谷歌系等海外產品風格。因此視覺設計前期進行了相關的競品風格梳理整理，提煉主流競品風格如下：保持簡潔清爽，輕量化，品牌化，層級清晰，保留呼吸空間。icon風格棱角切面處理

品牌主色&輔色定義

1. 線上品牌色使用效果

整體視覺感受，主色飽和度過高，在白色區域及模塊，視覺對比過高亮，會有刺眼的感受，閱讀使用體驗效果不佳

2. 海外廠商競品品牌色

小米，oppo，三星整體品牌色彩傾向藍色及同色系。三星，oppo品牌色使用整體性更好。在產品設計中品牌主色使用相對剋制

3. 產品設計中品牌主色使用定位

• 傳遞信息：界面清晰，明確的層級關係，高效舒適的閱讀體驗
• 引導操作：清晰合理的操作引導
• 品牌價值：品牌一致性，品牌歸屬

4. 主色定義

基於項目組決策產品定位延續不變的背景下，本次主色定義過程中延續使用舊版本中產品定位，即提供穩定，安全，快速的信息獲取服務。從這三種主要情感要素進行色彩探索及提煉。

色彩不只是一種視覺語言，它更是傳播情感的途徑。根據對產品定位的細分拆解，結合產品的感知路徑，從品牌及體驗緯度提煉產品可傳遞的情感基因

結合產品定位相關的核心關鍵詞，聯想接近定位的品牌主色，同時可覆蓋到產品定位的顏色爲藍色。能夠表達穩定，安全，快速，同時有科技色彩

品牌色優化方向往簡潔，幹練，富有科技感的方向貼近，因此選擇方案3爲主色方向。同時定義中性色色彩層級，便於指導後續產品設計

5. 品牌延展覆蓋場景

6. 同色系輔色延展定義

同色系是指在色環上相距不超過45度的兩種顏色，在主色的同色系範圍內，我們可以選擇主色的同色系範圍內的顏色來豐富產品配色。可以選出同色系顏色作爲延展色使用

設計單元

1. 設計語言概述

結合產品風格定位，視覺語言使用柔和圓角爲基礎。圓角風格更接近目前主流視覺風格，圓角的包容性更強，複用場景豐富，更容易達成統一性。同時延續外銷「地球」的視覺符號，綜上，整體搜索、名站、卡片、以及btn、均採用圓角爲基礎進行統一設計

2. 信息認知簡化

我們希望用戶更專注於內容，因此對承載內容的容器、卡片信息的構成及樣式進行了簡化設計。採用卡片的形式，卡片可以較好的聚合信息，使信息流內信息展示更清晰。卡片結構上，本次採用更清晰的大圖樣式，閱讀清晰可見，文字信息部分，允許展示更多文案，以解決用戶看不全標題文案的痛點

3. 整體視覺感知全面優化（卡片信息與背景的關係）

當一部分元素處在明確的邊界區域內，則用戶感知這些元素是一個整體，聚合在一起。爲使整體視覺風格輕量化，背景底色不宜過重，達到卡片聚合的目的，對卡片進行統一的0.5px的淺描邊，達到明確邊界的同時，不過度表現，與背景產生過強的分割感，使整個卡片與背景有即清晰又相對統一的視覺效果

4. 天氣模塊全新icon

天氣模塊延續簡化處理的方式。和舊版本中，面性的，多色的icon相比，更清晰，安靜。不過度搶掉頭部模塊視覺吸引，可以滿足用戶對天氣信息使用的功能

5. 強化搜索核心功能

搜索框採用大圓角的風格，和舊版相比提高了搜索框的高度，樣式更飽滿。當用戶進入主頁時，能夠提升對核心的搜索功能的聚焦。爲了更好的和整體視覺風格相融合，以及凸顯搜索區域，採用弱陰影進行輔助，使整體視覺風格趨於統一

6. 搜索落地頁

搜索落地頁採用和主頁一致的背景。icon風格延續採用6px描邊，棱角切面的風格樣式。信息排布方面，保留足夠的間距，提升品質以及清晰的閱讀體驗。

7. 信息流置頂

信息流置頂，聚焦搜索模塊，弱化色塊以及裝飾，加載刷新提示信息樣式進行風格優化，與整體視覺語言達成一致

8. icon風格重新定義

icon風格進行了降噪處理，依據我們前面明確的icon風格定位，延續棱角切面，線條明朗，概括，結合整體視覺風格，更具有質感

9. 名站icon優化

名站icon採用25px小圓角，達成與兩邊垂直相切的狀態，當陣列排布時，整體性更強

10. 品牌一致性（菜單頁）

菜單內第一層級icon使用品牌輔助色，避免像市場上競品使用與品牌色無相關的五彩色。使用輔色可以增強品牌的一致性以及特有的品牌認知，區別與競品的彩色化。使整個產品的用色更有依據，逐漸給用戶記憶點

11. 情感化設計（信息流loading）

在loading區域，可以在保持風格一致的前提下，進行個性化設計。結合印度網絡環境不穩定的背景，將tab下頻道符號化處理，聯繫起來進行連播式設計。傳達產品的內容及特性。在情感化方面，當網絡情況不好的場景下，可能給用戶小驚喜

下拉刷新最先展示品牌符號（地球元素），在連播過程中，依次展示視頻，資訊，圖片，遊戲娛樂等類目符號。採用路徑追蹤的形式有效的銜接起來五個符號

12. 跟進行業主流趨勢（ Dark Mode, 2019年11月已上線）

用戶使用暗黑模式的場景很多，第一種是在暗光環境下可減少視覺疲勞，另外在白天很多用戶也會長期打開深色模式。這意味着在暗黑模式下首先要考慮產品的可讀性，需要滿足WCAG 2.0 (Web內容可訪問性指南) 中規定的AA級標準，即最低4.5:1的對比度

Material Design 中推薦暗黑模式默認最底層顏色爲#121212，而在這之上的層級則使用不同透明度的白色透明層遮罩獲得層級區分。層級越高，對應的不透明度越大，本次Dark Mode設計，概括定義7個層級，便於後續場景拓展設計

以下是核心頁面視覺效果：

13. 更高效的及時反饋（ 無痕模式）

對無痕模式展示位置進行優化，當用戶啓動無痕模式時，底tab內icon爲清晰的高亮色展示，給用戶一個明確的狀態（解決舊版本中無痕模式狀態開啓後，用戶對狀態的感知弱的問題）。可在多窗口落地頁內進行開啓以及關閉操作

14. 桌面掛件（ 無痕模式）

添加桌面掛件功能，爲本次改版新增功能。添加桌面掛件，用戶能快捷啓動瀏覽器並迅速定位到搜索，提升活躍度，以及搜索滲透率。視覺風格上，延續主頁內搜索組件的樣式，視覺上會有通透感。從功能角度看，差異化競品的樣式

數據驗證

在數據驗證階段，進行了多個不同變量的測試版本，針對啓動頁，名站，搜索區域位置，以及信息流卡片高度，文字字號大小，以及部分交互方式，進行微調整設計。在整個數據驗證的過程中，需要根據實際問題，進行微調整設計，逐個變量進行排除原因，尋找合理的方案。具體的數據表格就不貼出來啦，以下是羅列的對應數據結論：

• 印度的日活提升了2.6%，印尼日活、日活率均有明顯提升
• 因信息流/首頁交互方式及視覺風格優化，更多用戶進入瀏覽器後瀏覽了信息流內容，印度和印尼的信息流滲透率比上個版本分別上升了18.5%和9.36%，且整體來看信息流的人均使用時長分別上升了2.12%和6.69%，兩地的數據上升明顯
• 因信息流回到首頁的交互方式改變，名站的人均曝光次數（名站曝光人數/日活）提升21.5%
• 上線後一週內，設置頁添加掛件按鈕和浮層add now 按鈕佔比分別爲15.75%、0.9%，
  其餘部分推測爲來自桌面掛件直接添加
• 大盤中搜索組件的點擊次數和點擊人數分別上升7.39%和8.36%，搜索量中來源爲掛件的數值提升了8.58%，該功能對搜索量有正向提升

覆盤總結

在本次改版設計到落地過程中相對順利，但也存在一些問題。由於涉及整體的改版落地，分期進行開發，在項目前期缺少對齊整個項目的落地範圍，在開發過程中，有場景缺失，以及Dark Mode 適配範圍不明確的問題等，這些都需要在過程中進行補充設計。因此在涉及大改版的項目，主視覺風格確定後，需要和項目組各角色同學明確對齊開發範圍及落地場景，是否分期落地？核心頁面的改版，一定涉及很多深層級的頁面邏輯，是否需要適配新風格，適配到哪個度？這些在前期都要對齊，才能在方案推進過程中會更順利，也降低項目各成員的溝通成本，團隊配合更默契。

曾經的谷歌瀏覽器設計思路覆盤：

歡迎關注作者微信公衆號：「VMIC UED」