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

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

從設(shè)計(jì)理念到視覺(jué)語(yǔ)言，從界面框架到組件模式，從單用戶觸點(diǎn)到全鏈路場(chǎng)景……整個(gè)2019我們對(duì)飛豬App進(jìn)行了全面的體驗(yàn)升級(jí)。

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

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

體驗(yàn)升級(jí)的開(kāi)端需要有核心的理念支撐，理念的統(tǒng)一幫助我們?cè)谠O(shè)計(jì)層面形成高度一致的認(rèn)知。

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

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

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

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

1. 玩趣：品牌觸達(dá)，真實(shí)豐富的情緒共鳴

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

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

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

2. 簡(jiǎn)單、貼心：更輕松的體驗(yàn)才是美好旅行的開(kāi)始

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

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

二、視覺(jué)語(yǔ)言升級(jí)，統(tǒng)一規(guī)范

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

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

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

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

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

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

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

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

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

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

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

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

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

3. 色彩：品效合一，提升識(shí)別

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

同時(shí)，鑒于黃色的不穩(wěn)定性導(dǎo)致的識(shí)別不清晰等問(wèn)題，我們?cè)谕敌略隽藘煞N功能型標(biāo)準(zhǔn)色，以及從功能角度出發(fā)新增三種核心輔助色。

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

豐富色彩的運(yùn)用無(wú)處不在，從icon的點(diǎn)綴，容器信息的強(qiáng)化輔助，到全場(chǎng)景的氛圍穿透，無(wú)一不在傳遞鮮活生動(dòng)的品牌感知。

4. icon：品牌基因，化繁為簡(jiǎn)

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

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

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

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

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

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

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

四、寫(xiě)在最后

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