經過數月打磨，手機 QQ 瀏覽器 Android 版從 2.0 迭代至 2.6，歷經設計千回百轉與架構反復嘗試，終換新顏，體驗大幅提升。這只是萬里長征第一步，分享背後設計心得。

國內局勢：瀏覽器戰場群雄逐鹿

PC 端大廠角力數十年；移動端 Android 成兵家必爭之地：Opera 早入場國際聲譽高、UC 多年積累霸主、海豚後起之秀、迷人/天天/Go/百度等多路勢力、系統默認瀏覽器與發力的 Firefox。QQ 瀏覽器夾縫中求生存發展，非苦功專業精神不可。

追本溯源：產品定義與關鍵詞

核心問題：這是款怎樣的瀏覽器？帶來什麼感受？留下什麼印象？如何延續品牌基因？
探求瀏覽器本質：以高效性能、便捷操作達致舒適閱讀體驗。
讓用戶安靜愉悅享受內容，成設計重心。

提取關鍵詞：清新、舒適、簡潔、細膩、平靜

視覺語言構建

色彩定義

藍色：天空遼闊、海洋深邃，寧靜清澈理智科技感；延續品牌基因色系，作主體色。深藍作菜單系。藍綠搭配清新淡雅明亮乾淨；點綴橘黃增添明快活躍。

色彩如音樂需音階維持秩序，靠三屬性維持界面層次秩序。

質感表達：扁平輕量原則

符合 UI 趨勢，對內容為主界面更友好、增強親切感。柔和漸變、略透明、亞光質感減少視覺跳躍、清晰層次。描邊、漸變、線條、陰影薄而有力。

信息分類與層次結構

三區劃分：頂部輸入導航區、中部內容區、底部菜單區。集中信息在內容區展示，提高操作效率一鍵直達。左右內容自成體系無縫連接，增強滑屏體驗。適配灰度與色彩對比度，減少視覺疲勞、提升可讀性。

簡化設計：減法美學

舊版頭部佔空間大，手機方寸之地須充分利用。減法設計必然：弱化非功能性元素、增大內容可用空間，結構首尾呼應。「簡約是美，少即是多。」

小細節完善內容感官

少量紋理運用，界面更細膩不單調。

等待過程設計：心理學應用

David Maister 等待心理學：無所適事等待感覺更長。網頁載入中加入功能宣導，每 2 秒換一句，轉移注意力、避免等待感過長、增強沉浸式體驗。

傳統控件新設計：統一視覺體驗

Android 廠商定制系統紛繁，系統控件五花八門。重新設計彈出菜單、對話框等，避免定制系統感官差異，全方位統一視覺體驗。

圖標：簡約趨勢

准確表意前提下排除多餘元素，輕量漸變、明確描邊，精致且符合整體風格，用戶更快直觀理解選項含義。

遇到的挑戰與對策

紛繁終端適配

Android 廠商多、機型多、分辨率多。為簡化設計兼容更多屏幕，為主流 HVGA/WVGA 分別提供兩套圖，充分利用可拉伸圖片特性，保證奇異分辨率顯示效果。

圖片抖動/色階問題

硬件/系統差異導致漸變圖在不同機型顯示異常(N1 正常、里程碑出現色階)。對策：調整設計圖避免過大/過細漸變，漸變形狀加入斜紋理改善。

後記

設計過程近尾聲，但持續優化不止。感謝團隊支持辛勞。發布獲用戶肯定贊賞，雖存不足，但極致追求體驗的信念不變。革命未成，同志仍需努力，萬里長征續行，好戲在後頭。

來源：Tencent WSD Blog，轉載請注明出處。