重建設計體系！馬蜂窩 App 設計升級解析
2019 年底我們對馬蜂窩 App 做了小幅改版嘗試。優化底導航，一級場景去掉個人中心和目的地。首頁整理頂導航結構，重新梳理雙流內容橫滑邏輯，優化雙流卡片；個人中心優化功能入口，露出生產內容。因爲時間成本問題，整個改版覆蓋頁面少，更多是嘗試和驗證。從數據層面看，整個改版帶來了很多積極的變化，驗證了部分方向的正確性；
2019 年底的改版嘗試
2020 年計劃整體跟進視覺升級，所以年初做了針對線上體驗的用戶調研，同時進行了一次全面徹底的設計梳理。
歸納後發現以下 3 種普遍存在的問題：
來自用戶的反饋是：
“App 用起來感覺很複雜，想找到自己想要的東西是一個很累的過程”
馬蜂窩不是一個高頻使用軟件， 用戶對於自己想要的內容，往往更習慣走自己熟悉（被教育過）的路徑。對於非常規入口，即便可以縮短體驗路徑，也很難被發現。同時產品對重點轉化節點添加過多的輔助信息，反而形成對主內容的干擾（閱讀噪音）。
馬蜂窩 App 不同頁面存在各種五花八門的表現形式，被我們戲稱爲 “設計百科全書”。這樣導致給用戶體驗帶來了混亂和錯覺感。造成這樣現象有以下幾點問題：
-
改版覆蓋率低 ，多歷史版本共存；
-
產品迭代速度較快，同步不及時，規範外的設計不斷出現；
-
設計成本壓縮，拿來主義的設計脫離原有設計體系，App 整體感被破壞；
來自用戶的反饋是：
“感覺越來越像 XXX，慢慢缺少打開的動力”
這個問題存在在兩個層面上：
產品層面上缺少深入思考，無法根據自身垂類特點做出差異化；
視覺層面缺少對品牌元素的提煉和統一的透傳方式；
根據問題制定本次視覺升級目標：
根據目標需要解決三件事：
· 明確品牌性格，提升產品品牌感知
· 建立統一的設計世界觀
· 簡化產品層次，提升信息轉化效率
團隊內部組織了多次腦暴，通過對產品內容特點的深入梳理和用戶畫像分析，總結出馬蜂窩 App 體現出的氣質可歸納爲：
把品牌性格融入設計細節，通過三個設計層面來體現品牌性格
通過線性 Logo 推導的面形輔助圖形
使用中，圖形的品牌感在認知層面存在成本，圖形本身的負形（複雜）也不利於產品層面使用。需要添加更容易識別和應用的輔助圖形。
嘗試中發現，六邊形是一個優質的選擇，無論從形狀，還是表意，都可以和已有圖形形成互補。
六邊形的認知成本低，符合品牌調性。針對六邊形的認知我們還做了用戶測試。結果顯示，六邊形更容易被大家認同與馬蜂窩品牌之間存在強關聯。將六邊形融入產品重要節點時，品牌感知得到強化。
一級頁面添加內容按鈕
POI 評分
將六邊形圖案設計在產品的各個細節中，品牌辨識度明顯加強。
原有色彩體系突出豐富的多彩性，通過色彩多樣型來體現年輕化的概念。但過多的顏色反而會弱化品牌感知，不容易聚焦。同時在應用場景中單一追求品牌主色又很難完全滿足各方業務需要。
所以經過歸納，將原有的多種顏色優化爲 4 種。去除漸變色，只使用純色，同時提高明度，調整純度，讓新顏色更有活力和富有想象。
質感這部分在結合產品內容特點的同時，還參考了近一段時間較爲流行的設計趨勢，制定了質感方面需要追求的三個特點：
通過對形狀、色彩和質感的定義，我們首先對 App 設計感知力最強的業務功能入口（餅區）進行了設計升級。
舊版的餅區設計特點鮮明，尤其是在形狀設計上富有品牌的獨特性。升級中我們在原有形狀基礎上融合新添加的六邊形進行了微調。
在材質方面也做了多套方案嘗試：
**方案 a **
以統一的品牌色進行設計，可增強品牌透傳，但各業務區分度差，業務識別效率低；
**方案 b **
雖然使用彩色方案可以提升業務的分發效率，但是拼色的特點過於複雜，功能辨識弱；
**方案 c **
質感符合設計所追求的目標，但是圖標的重心不穩定，對品牌的凸顯也不夠強烈；
所以最終選擇了更簡潔通透的疊色風格。
顏色方面結合之前梳理的四色結論，調整色彩使用比率：“馬蜂窩黃 40%”、“天空藍 20%”、“酷酷紫 20%”、“熱烈紅 20%”。加大品牌主色佔比。
最終方案：
改版前一級頁面狀態：
4 個頁面單完全是不同設計體系下的產品，用戶使用時不一定能直接表達出視覺上的不適感，但內心的反饋就是混亂和複雜。
解決這部分問題，設計上需要從 2 個關鍵點入手 --- 文字和柵格規則
以首頁舉例：
僅首頁一屏內就有多達 14 種字號、字色和字重。問題表現在：文字樣式過多。不同的字號、字色和字重使用過於隨意，缺乏節制，導致視覺層次無法拉開，用戶閱讀困難。
不僅是首頁，我們對全端的文字樣式佔比進行了梳理：
通過圖表可以看出，從 10px 到 22px 的文字全都被使用了，這無疑會從閱讀上造成一定的混亂，所以需要重新進行梳理和歸納。結合使用場景，將原有 11px、15px、17px、19px、21px、24px 等字號和其他字號進行合併，同時控制使用比例，達到拉開文字間的層次的目的。
經過歸納和修改後的佔比狀態：
一級頁面中存在的各種模塊規則：
不同頁面間存在不同的柵格規則，即使在同樣一個頁面裏也存在多種樣式，體驗上讓用戶瀏覽內容的節奏變得混亂，在設計執行層也缺乏使用邏輯，所以需要重新制定一套適合所有內容類型的柵格規則。
保留產品中最重要模塊的柵格規則，犧牲其他部分，從而獲得一套統一樣式。雙流是產品容器形態中最重要的瀏覽模塊，同時也是很難作出設計妥協的部分。所以在雙流的基礎上重設計，定製面向所有的容器的全新規則。新規則將設計世界觀統一，可以有效降低用戶的閱讀成本。
從雙流中提取最小柵格尺寸 5px ，以此爲基數展開佈局，我們得到了一組全新的排列規則：
然而統一的設計並不能解決所有問題，產品上覆雜的表達給用戶快速理解內容帶來更重的負面影響。
簡潔設計的根本是提升信息轉化效率，不僅是設計，更是產品層關注的重點。結合前面兩件事的結論，我們深入一級頁面的各個模塊，對其一一做了設計優化和升級。
A. 頂部導航欄
初始狀態存在 4 個功能：搜索、福利入口、個人中心入口與搜索熱詞兩行排布。首先基於內容相關性，將搜索框和搜索熱詞做緊密的結合。減少內容層級，提升用戶信息獲取效率。
其次關於個人中心入口。原有方案業務目標是爲了讓用戶沉浸於內容，減少跳出，因此將導航變成簡短的收縮入口，個人中心移到右上角，新版基於用戶反饋及固有認知習慣，我們還是把個人中心放回底導航最右，爲方便內容互動，將消息中心拿回右上角。
而福利中心，雖然設計上採用了插畫形式以追求視覺突出，但是 CTR 表現低於大盤，所以把它收入個人中心，支持可以通過消息中心透傳信息。
B. 業務功能區
除更新 Icon 風格外，產品層面對這個區域做了重新的梳理。第二行小餅在用戶層面缺乏心智。自身數據表現差，並因設計層次上的問題，還拉低了大餅的數據。重新梳理後只保留了自駕一個入口。設計上修改爲單行入口形式。
C. 目的地功能區
在首頁場景下，用戶可以通過添加 Mdd 直接瀏覽內容。產品需要藉助此場景添加進入目的地各個業務的入口。但用戶更容易感知的是下面的雙流內容，如果需要針對性進入目的地的各個細化場景，則更習慣走搜索路徑。所以這裏的目的地卡片設計要儘可能提煉重點，去除效率低下分層功能。
改版中，提煉出 2 個核心任務：
首先是提升對目的地首頁的轉化，其次是突出馬蜂窩的優質玩法。設計層次上拉開與導航視覺空間，追求和下面雙流內容打平。
目的地卡片的背景採用重新定義後的色彩，再根據天氣的不同對應不同的顏色：晴天對應熱烈紅、霧霾和陰天等對應酷酷紫、雨雪天氣對應天空藍。這樣設計不但拉開不同目的地卡片的層次，讓用戶對不同的目的地天氣有宏觀認知，同時還增強了品牌感知。
D. 雙流內容區
雙流模塊在馬蜂窩 App 中是主形式，新改版的所有一級頁面全部都是以雙流結尾， 此模塊的設計調整是整個升級改版中的重點。改版前的存在的雙流樣式：
主要存在三個明顯問題：
信息內容層次複雜，缺乏一致性的設計規則，視覺和交互行爲不匹配；
各種角標位置、形式均不統一；
卡片類型繁多，且各種形式強行干擾內容主體閱讀；
針對以上問題，重新梳理線上所有雙流內容設計。
首先去除卡片表現形式，簡化層次，統一容器展現樣式。同時按照柵格尺寸規範視圖圓角，加大圓角尺寸從 6 px 變爲 10 px。
去除不同的內容類型所帶來的不同展現形式，用類型角標統一取代。並在運營緯度增加統一的運營角標。
將所有的角標固化位置。“類型角標” 放置在內容的右上角，“運營角標” 放在內容的左上角。
露出用戶人名，統一各種屬性元素位置, 增加可互動性。
優化後筆記的雙流樣式：
類型是多篇內容或長內容時，用標題壓圖的設計方式做區別。
升級後的所有雙流卡片設計：
雙流內容瀏覽時。用戶根據內容本身來作轉化決定，不同形式的附加設計都是對內容的干擾。簡單而統一的類型角標就可以方便用戶快速識別。
升級後和之前舊版對比：
目的地是改版中新增加的一級頁面，主要是強化用戶對旅行垂類產品的認知。
目的地存在問題：
模塊堆疊無序，不匹配用戶行爲路徑；
層級複雜，重點信息不突出，獲取效率低；
分割樣式過多，模塊間樣式不統一；
團隊通過梳理產品需求，從產品核心目標出發，通過細化需求，整合樣式將問題解決。
首先從排序上看，玩樂熱銷模塊 CTR 表現差，說明內容放在首屏不符合用戶心智，所以將此模塊移至必體驗模塊之後。
必體驗模塊定位模糊，玩法和 POI 的混合方式讓用戶查找困難。拆解這個模塊可以給用戶更直觀的體驗，滿足用戶在目的地的核心需要。
將必體驗拆分成以玩法和 POI 兩者爲核心的喫買住玩模塊：精選攻略和馬蜂窩榜單。
突出攻略產品優勢的同時，可以根據每個目的地的特色進行個性化的榜單定製，滿足不同類型用戶對 POI 的需求。
從當前的社會環境、產品定位、公司戰略以及用戶普遍習慣出發，把以攻略玩法爲核心內容的精選攻略排在以 POI 爲核心的馬蜂窩榜單的前面。
確定最終的目的地框架結構爲：
A. 頭部認知
在目的地頭部加入當地視頻概覽，更加生動的增強目的地認知，同時露出視頻作者信息強化榮譽感，鼓勵內容生產。
B. 精選攻略
之前的必體驗模塊問題主要是重點信息不突出、對官方攻略缺乏品牌認知。同時和榜單做拆分之後，需要減小屏佔比，提升展示效率。所以設計呈現上，重新梳理了信息優先級，將空間壓縮。同時輸出統一的官方攻略標識，拉開閱讀的層次。
C. 馬蜂窩榜單
必體驗原來的榜單更像是主題 POI 聚合，缺少對榜單的感知和權威性。而且信息層級隱藏較深，閱讀效率低下。改版中強調榜單權威認知的同時露出更多 POI 信息，提升獲取效率 。用摳圖形式突出榜單中的重點 POI，佔領用戶心智。品牌色拉開與上下文內容層次的同時，突出品牌感知。
D. 玩樂熱銷
原有的 “玩樂熱銷榜” 廣告感強，設計規則與上下模塊都不統一，文字居中對齊閱讀效率差。大卡樣式強調整體，弱化單品，而交互的轉化行爲卻是針對單品的。改版中按照新規則分割內容模塊，並賦予每個單品差異性的品牌色，強化對單品轉化認知。
省級、國家級目的地 - 熱門目的地模塊：
省級、國家級目的地與城市級目的地不同，它的核心模塊是往城市級目的地轉化的熱門目的地模塊。主要問題是：用戶對相當一部分目的地中 POI 的認知強過目的地本身，所以改版中把城市裏認知高的 POI 做了露出設計，增加轉化率。
其他模塊都按照新規範做了對齊，最後目的地頁面改版完的最終效果：
之後的商城首頁和個人中心也按照全新設計規範進行了改版：
對比改版前，改版後的頁面很好地實現了團隊制定的視覺升級目標，即簡潔 · 統一 · 有性格。
在本次設計升級過程中，對以往改版的一些問題進行了反思。每次大版本設計升級，都具備完善的方案，並建立了相應的設計規範，但最終隨着版本迭代都逐漸鬆散、瓦解。
如何讓一套視覺體系有效且長效，是驗證升級是否成功的關鍵。以下幾點值得思考：
提升改版覆蓋率
保證一級頁面可以在可控版本內連續上線，這樣體驗上的割裂感會大大降低。
一套靈活的設計規範
規範不是一成不變的，它應該隨時根據產品變化不斷升級，關鍵邏輯點在於產品的變化。如果產品的需求本身合理且異於之前的目標，設計就應該順應產品需求做出相應改變，並將新樣式同步到設計規範中。
實時同步
規範的 “瓦解” 大多是因爲規範迭代中的同步問題，人與人之間的信息同步會出現很多問題：時間不及時、溝通不到位、 理解不全面等等。推薦使用即時型設計工具，比如 Figma ，其團隊組件庫功能的實時性和唯一性可以極大降低溝通成本。修改原始組件後，所有相關文件都自動完成同步。
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/LDvMClhyozApWFzi2kZwyw