從春暖花開到明媚初夏，隨著疫情的慢慢消退，各位小伙伴有沒有結(jié)伴去周邊放風玩耍呀？

作為阿里最能代表“玩”的設(shè)計團隊——FliggyDesign飛豬設(shè)計，在過去的一年里又做了哪些好玩又貼心的事情呢？

從設(shè)計理念到視覺語言，從界面框架到組件模式，從單用戶觸點到全鏈路場景……整個2019我們對飛豬App進行了全面的體驗升級。

我們希望通過設(shè)計語言的升級來強化用戶與產(chǎn)品的聯(lián)結(jié)，并進一步激發(fā)品牌與用戶的溝通，進而實現(xiàn)極具旅程感的產(chǎn)品體驗。

一、核心設(shè)計理念探索

體驗升級的開端需要有核心的理念支撐，理念的統(tǒng)一幫助我們在設(shè)計層面形成高度一致的認知。

關(guān)于飛豬設(shè)計理念的探索，我們追溯回旅行本身。關(guān)于旅行的感受，我們能想到無數(shù)美好的詞來形容：快樂、有趣、自由、活力……旅行是過程的完整體驗，從萌生想法到旅程結(jié)束，這所有的過程都讓人陶醉其中、樂此不疲。

然而，由于過度的關(guān)注行業(yè)之間的差異性以及場景的復雜度使得前臺的體驗缺失了統(tǒng)一性和標準，通過我們前期的調(diào)研發(fā)現(xiàn)用戶的認知和品牌的主張有了一定的偏差，很多用戶認為當時的飛豬App在使用感受上是有點生硬、風格陳舊且復雜的。

從“享受大不同”到“越玩越過癮”，飛豬的旅行態(tài)度也向著更年輕，更地道，更具玩樂精神的方向不斷演進。所以，回到飛豬App的設(shè)計升級，我們的任務(wù)是在傳遞旅行樂趣的同時，不斷提升各個用戶觸點的產(chǎn)品體驗，幫助用戶更輕松更高效的完成旅行全過程。

帶著這樣的目標和命題，我們經(jīng)過內(nèi)部的討論和梳理，最后將飛豬設(shè)計的核心理念聚焦在三個關(guān)鍵詞：玩趣、簡單、貼心。

1. 玩趣：品牌觸達，真實豐富的情緒共鳴

玩趣是飛豬品牌傳遞的第一印象。我們希望通過生動鮮活、年輕以及富于變化的外在設(shè)計表達讓用戶感受到好玩有趣的飛豬。

玩趣首先是內(nèi)容的呈現(xiàn)，旅行內(nèi)容的吸引重點在于真實自然的影像及其多樣性。我們結(jié)合這些場景影像的特點，以個性詼諧的語言，創(chuàng)造出豐富的“話/畫風”標簽，極大的提升了旅行商品的表達能力。

玩趣作為品牌基因，除了內(nèi)容本身，更是一種與用戶的溝通方式。不經(jīng)意間的刷新、評分的動態(tài)展示、異常狀態(tài)的出現(xiàn)等我們都通過有趣的動態(tài)來呈現(xiàn)。

2. 簡單、貼心：更輕松的體驗才是美好旅行的開始

基于旅行生態(tài)的建設(shè)和有序發(fā)展，更多的內(nèi)容和服務(wù)也在飛豬App上不斷生長，體驗容器上的信息荷載也在不斷的增加。所以不論對于內(nèi)容的認知，還是平臺產(chǎn)品功能的操作體驗，我們都希望能以更簡單的方式直接面向用戶，讓用戶能夠輕松掌控一切并能感受到細致入微的服務(wù)體驗。

因此，針對每一個細微的體驗觸點，結(jié)合核心設(shè)計理念和整體趨勢，我們對用戶界面的基礎(chǔ)視覺語言及規(guī)范進行統(tǒng)一的升級：

二、視覺語言升級，統(tǒng)一規(guī)范

1. 界面框架：關(guān)注功能，合理統(tǒng)一

框架是界面設(shè)計語言的起點，它決定了界面中的內(nèi)容和功能以何種方式呈現(xiàn)和組織，用戶又是以何種方式進行最基本的互動。在飛豬2019的框架設(shè)計中，一方面我們需要一種能通用且清晰的界面結(jié)構(gòu)，來承載平臺統(tǒng)一穩(wěn)定的基礎(chǔ)功能。另一方面，基于業(yè)務(wù)不斷發(fā)展變化的訴求，更需要有靈活的內(nèi)容變陣以及兼容不同場景的表達。因此我們分別從“空間”的分層和“功能”的布局出發(fā)，定義飛豬App的通用頁面框架。

首先，從“空間”屬性出發(fā)，劃分界面統(tǒng)一的分層結(jié)構(gòu)：穩(wěn)定的背景、導航和事件層以及靈活兼容的內(nèi)容層。

其次，在內(nèi)容層上，根據(jù)不同場景的特點，從“功能”出發(fā)，我們歸納了5種界面布局框架：

A.扁平型： 適用于導購瀏覽型的場景，旅行的導購場景強調(diào)信息內(nèi)容本身的豐富性和吸引力，用戶在此類場景的核心任務(wù)是內(nèi)容的快速瀏覽和信息的輕松獲取。因此我們拉通卡片，打平容器層級，提升頁面整體的可讀性。

B.通用列表：用于二級承接場景，更聚焦在某一維度某一類型信息的聚合，強調(diào)用戶的瀏覽效率，因此模塊上更精簡，例如大量的主題、榜單等類型的承接。

C.大通欄：基本上用于詳情類場景，此類場景一般是某類信息鏈路末端的展現(xiàn)，是用戶了解該類信息最完整的場景，信息量大也較為復雜，我們沿用傳統(tǒng)的通欄卡片布局，以最大限度的展現(xiàn)內(nèi)容的同時保障閱讀的沉浸感。

D.卡片式：在此框架中我們使用信息聚類最高效的獨立卡片來組織內(nèi)容或功能。聚焦在功能或信息聚類上，強調(diào)功能易用性和信息模塊的完整度。

E.層疊面板：為了適應(yīng)更多的信息承載和更豐富的拓展能力，同時也是一種新交互趨勢的運用，目前主要運用于地圖類場景。

在布局框架的選擇上，功能決定形式。設(shè)計師需要根據(jù)不同場景的特征，結(jié)合內(nèi)容為中心的設(shè)計原則進行判斷并做出合理的選擇。

同時，鑒于目前框架的多樣性，我們?nèi)栽谔剿鞲呒嫒菪缘目蚣芊桨?，以期在場景特征、信息?nèi)容和形式表達三者之間尋求最佳平衡點。

2. 文字：字號提升，有序應(yīng)用

文字是信息的核心載體，為了降低在移動設(shè)備上內(nèi)容閱讀的疲勞度，提升信息的可讀性，我們對字號進行了全面提升。同時規(guī)范文字序列的使用，保持統(tǒng)一的信息閱讀節(jié)奏。

3. 色彩：品效合一，提升識別

色彩不僅是品牌的第一外化特征，在用戶界面中，也承擔了一部分信息的功能屬性?；谄放普w活潑、玩趣的基調(diào)，我們對色彩在明度和飽和度上進行了整體提升。

同時，鑒于黃色的不穩(wěn)定性導致的識別不清晰等問題，我們在同色系新增了兩種功能型標準色，以及從功能角度出發(fā)新增三種核心輔助色。

通過HSB劃定飛豬色域，提供更豐富的輔助色彩，建立飛豬用戶界面的色彩體系。

豐富色彩的運用無處不在，從icon的點綴，容器信息的強化輔助，到全場景的氛圍穿透，無一不在傳遞鮮活生動的品牌感知。

4. icon：品牌基因，化繁為簡

icon是最直觀的設(shè)計語言，我們結(jié)合品牌基因，去除冗余細節(jié)，強化功能性，并通過網(wǎng)格化規(guī)范繪制，保障圖形簡潔可識別，整體統(tǒng)一有序。

三、組件提效，場景應(yīng)用

設(shè)計語言的建立是從元素-組件-場景不斷向全局整合的過程，場景是應(yīng)用終局，視覺元素是基礎(chǔ)供給，組件是核心能力。因此，我們也不斷的完善和推進組件的平臺化能力，使之以更高效的方式應(yīng)用于適合的場景。

作為頁面布局的第一印象，我們對標題欄組件進行了統(tǒng)一的優(yōu)化，二級以下頁面的去色和沉浸式處理，使用戶在瀏覽過程中更聚焦內(nèi)容本身。

機酒火首頁是用戶高頻使用場景，我們規(guī)范和統(tǒng)一了檢索入口模塊，通過沉浸式的頁面布局進行整體優(yōu)化，在提升易用性的同時強化了不同場景的認知。

地圖是旅行場景的常用必備工具，我們基于簡單高效的原則，對之前復雜的地圖場景進行收斂，并通過組件化的方式完成全場景的統(tǒng)一。

最后，飛豬2019設(shè)計語言的應(yīng)用，使得包括視覺元素和框架布局在內(nèi)的設(shè)計過程變得有跡可循，同時在一致性體驗的基礎(chǔ)上，基于豐富業(yè)態(tài)和產(chǎn)品策略，設(shè)計師可以不斷挖掘更豐富且富有創(chuàng)意的表達方式。

四、寫在最后

2019早已經(jīng)過去，但飛豬的設(shè)計升級并不會就此結(jié)束，我們始終堅持以打造最美旅行體驗為目標，圍繞用戶的旅程感知和全場景體驗，專注行業(yè)的精細化設(shè)計。同時我們也持續(xù)關(guān)注新旅行趨勢，探索更多的新旅行體驗。