18年末，途?？蛻舳擞瓉砹艘粋€新的開始，細(xì)心的小伙伴想必早已在十二月全量運行的新版首頁中窺見一二。

作為一家專業(yè)的休閑旅游預(yù)訂平臺，途牛自2006年創(chuàng)立至今，始終致力于為用戶提供更優(yōu)質(zhì)，更舒適的出行體驗，但在企業(yè)快速成長期間，新功能不斷增加，現(xiàn)有的體驗設(shè)計架構(gòu)已經(jīng)無法匹配市場消費升級和用戶需求的變更，途牛急需更全方位，輕量化，品質(zhì)化的全新架構(gòu)來為品牌煥新。

在歷經(jīng)九個版本的迭代后，站在V10.0版本發(fā)布的新路口，我們決定停下來，跳脫現(xiàn)有的舒適圈，嘗試探索途牛體驗設(shè)計的新可能。

背板設(shè)計理念

——

此次大型視覺改版主要由途牛設(shè)計團隊牽頭，聯(lián)動產(chǎn)品、研發(fā)等多個部門共同合作打造，耗時近1個季度，累計產(chǎn)出十幾套升級方案。從關(guān)鍵業(yè)務(wù)的架構(gòu)Redesign到基礎(chǔ)元素的升級，經(jīng)過不斷的打磨和突破，秉持著簡單、高效、自然的設(shè)計目標(biāo)，我們引入了全新的「背板設(shè)計」理念，標(biāo)準(zhǔn)化設(shè)計產(chǎn)出為品質(zhì)領(lǐng)航，提效內(nèi)容傳達(dá)更好為業(yè)務(wù)賦能。

1??|??兩位一體的設(shè)計抓手

近年來，尤以iPhoneX為代表的劉海屏帶動了手機終端產(chǎn)業(yè)全面屏的風(fēng)潮，縱觀現(xiàn)今主流的手機機型，最為統(tǒng)一的變化就是屏幕由原來的直角屏統(tǒng)一變?yōu)榱私咏?00%屏占比的圓角屏，設(shè)備革新的同時也啟發(fā)著我們對承載其中的界面設(shè)計進行革新，我們開始探索更適應(yīng)全面屏的界面設(shè)計是怎樣的？

針對這個問題，我們所提出的「二位一體」的設(shè)計理念，就是硬件物理機位與界面設(shè)計語言的傳承與統(tǒng)一。

物理圓角映射到設(shè)計層變?yōu)槿萜鲌A角，最大限度地在扁平化的設(shè)計理念中保留物理現(xiàn)實的影子，這點在iOS11開始也早已應(yīng)用到了蘋果的系統(tǒng)界面之上，設(shè)計語言由原來的橫平豎直，到現(xiàn)在的圓潤設(shè)計，由外到內(nèi)，形成一層層連續(xù)的過渡，采用這樣的設(shè)計，不單單契合了手機的硬件，更能讓用戶在使用中感受到視覺的和諧與友好。

背板設(shè)計帶來的留白率超越

身為一名（重度強迫癥患者）設(shè)計師，我們熟知「少就是多」的理念，在設(shè)計中簡化邊框，簡化分隔，僅僅運用線條、留白來表現(xiàn)層級固然能讓我們的界面更加清爽，設(shè)計更顯（逼格）高級。但是對于信息傳達(dá)效率而言，卡片容器所天然擁有的層級屬性能幫助用戶在使用中的更快、更高效地識別操作；卡片使信息更加聚焦，模塊感更強；背板設(shè)計的大圓角親和力強，更顯活潑，也符合途牛越來越年輕的用戶屬性，這些也我們權(quán)衡之下不愿舍棄的。

為了減少視覺層級，我們綜合了iOS和Material Design的特點，創(chuàng)新性地升級了「背板卡片」這一理念被廣泛應(yīng)用于界面中模塊的組合應(yīng)用。它通過舍棄邊距，削弱了頁面分割，減少了頁面留白率，避免卡片套卡片套卡片的復(fù)雜層級，在保留圓角特性的基礎(chǔ)上最大程度的維系了頁面的通透，為用戶提供提供沉浸式的視覺體驗。

更適合移動端的容器

手機界面作為一個二維平面空間，「背板卡片」在原有X軸、Y軸的二維空間中，新增了Z軸這個三維空間。使用背板的間隔、陰影疊加幫助我們突出內(nèi)容的邏輯層級關(guān)系，陰影越大，信息內(nèi)容的海拔越高，越容易被用戶識別，這樣就渲染出一個有別于以往扁平界面的信息獲取方式。

在某些特定業(yè)務(wù)應(yīng)用中，背板卡片可以幫助隱藏后層的輔助信息，背板卡片激活時，后層被遮擋的與背板卡片相關(guān)的信息則會以更自然，更符合物理現(xiàn)實的形式展現(xiàn)出來，更易被用戶理解。

在某些特定業(yè)務(wù)應(yīng)用中，背板卡片可以幫助隱藏后層的輔助信息，背板卡片激活時，后層被遮擋的與背板卡片相關(guān)的信息則會以更自然，更符合物理現(xiàn)實的形式展現(xiàn)出來，更易被用戶理解。

2??|??一體多位的理念滲透

背板容器化

在背板設(shè)計的基礎(chǔ)上，我們也同樣建立了通用的單元背板容器，通過結(jié)構(gòu)性的劃分來兼容不同的業(yè)務(wù)類型，以此將差異有效控制于基礎(chǔ)背板容器中。

針對旅游產(chǎn)品、用戶產(chǎn)出內(nèi)容、組合信息等拓展的背板矩陣也將信息層級收口為視覺框架，并根據(jù)不同的業(yè)務(wù)屬性靈活組裝，進行容器框架內(nèi)的業(yè)務(wù)自適應(yīng)，真正做到了“和而不同”，豐富了產(chǎn)品視覺呈現(xiàn)形式。

這種單元容器的組合方式，滲透于不同體量和特性中的業(yè)務(wù)類型中時，也給用戶在界面流轉(zhuǎn)過程中帶來了一體化的產(chǎn)品體驗和自然舒適的使用感知。

基因滲透

以往我們僅通過顏色、Logo等層面延展品牌的表達(dá)，為了更在整個應(yīng)用程序中更全面地傳達(dá)此次設(shè)計策略的升級，我們從背板設(shè)計中提煉了圓角作為全局可視化視覺載體進行延續(xù)設(shè)計，一個圓角的延展，可以演變出不同的形狀，當(dāng)這些延續(xù)了視覺DNA的空間沿用到每一個諸如：圖標(biāo)、按鈕、圖片等功能化控件中時，不但在提升品牌的整體印象，當(dāng)用戶看到這種圓潤設(shè)計的形狀或使用這些功能元素時，就會想到我們的品牌，強化圖形化的品牌記憶。

在應(yīng)對特殊場景時，我們也進行差異化處理。如在圖片宮格矩陣中，為了解決臨近圖片間的視覺錯覺黑點，我們只應(yīng)用了全局外部圓角，以此兼容內(nèi)容呈現(xiàn)形式。

設(shè)計拆解下的細(xì)節(jié)重構(gòu)

——

V10.0版本作為一個全新的改版起點，除了在內(nèi)容信息層級運用背板設(shè)計進行布局提升外，我們也期望聯(lián)動整個設(shè)計系統(tǒng)的升級來傳遞途牛年輕化和娛樂化的調(diào)性，為用戶呈現(xiàn)出一個更鮮活的途牛。

為了讓我們的產(chǎn)品更符合旅游行業(yè)特性，我們參照了很多國內(nèi)外優(yōu)秀的產(chǎn)品、排版及旅游相關(guān)的廣告設(shè)計，從中萃取靈感，并嘗試將這些設(shè)計中的細(xì)節(jié)融入到我們的產(chǎn)品中，提升用戶在使用產(chǎn)品中最直觀的心智感受。

1??|??顏色系統(tǒng)

隨著年輕用戶對色彩的接受度逐漸升高，途牛原有的顏色體系色相偏冷，飽和度和亮度略低，過于平緩的顏色性格已經(jīng)不能勾起用戶的視覺記憶，在競品了多家顏色體系的基礎(chǔ)上，我們基于現(xiàn)有的品牌色，提升原有輔助色的亮度，用微漸變增加頁面動感。同時新增暖色系輔助配色，以提升豐富、年輕、娛樂感的基調(diào)。

文字部分的色彩也同樣在傳承品牌綠的基礎(chǔ)上，新增藍(lán)灰色系字體，提升內(nèi)容品質(zhì)。

2??|??圖標(biāo)系統(tǒng)

圖形延續(xù)圓角基因，簡化圖標(biāo)造型，用幾何有規(guī)律的圖形元素彰顯現(xiàn)代感，在斜面上選定了以45°射線方向切割的，結(jié)合升級的色彩體系，強化圖形識別度和設(shè)計理念傳承。

線性圖標(biāo)秉持簡單直接，通俗易懂，高辨識度的理念進行輕量化設(shè)計，當(dāng)兩者組合時，一排采用權(quán)重較高的填充型圖標(biāo)，二排則用延續(xù)了“途牛綠”的線性圖標(biāo)作分隔。多維度、立體化的結(jié)構(gòu)呈現(xiàn)滿足了多種場景化設(shè)計需求。

3??|??文字系統(tǒng)

途牛的標(biāo)準(zhǔn)字體是系統(tǒng)字體，無論是iOS的「蘋方」還是Android的「思源黑體」，都擁有強大的字重系統(tǒng)，可以應(yīng)用在不同觸點中，滿足頁面中大部分信息層級的排版和信息可讀性，在中文系統(tǒng)的設(shè)計升級中我們?nèi)耘f保留了這一標(biāo)準(zhǔn)，只在此基礎(chǔ)上通過加大字號梯度和Light字重，來提升圖文排版中的閱讀效果。

其中變化較為顯著的是，我們對于電商較為核心的數(shù)字字體進行了升級。一期上線時為減少開發(fā)成本，在價格、時間、促銷等內(nèi)容更換使用了系統(tǒng)自帶的DIN字體，相較于San Francisco的數(shù)字呈現(xiàn)，該字體更為清秀，精致，對于客戶端整體氣質(zhì)的提升有很大幫助。在后期，我們也將持續(xù)定制途牛專屬的價格字體，以形成途牛特有的文字系統(tǒng)記憶。

4??|??交互系統(tǒng)

交互動效作為一個設(shè)計方案，在此次設(shè)計升級中在產(chǎn)品的效率、趣味化、情感化方面都做出了相應(yīng)的優(yōu)化和進步。在形式上，我們構(gòu)建了全新的動效體系化方案，運用一定程度的空間層級運動軌跡來保持頁面流轉(zhuǎn)跟操作反饋中的一致。

如，在頁面懶加載中，我們也為用戶提前加載了自然的色塊引導(dǎo)，貼近用戶心理預(yù)期，減輕等待過程中的焦慮感。在游記詳情業(yè)務(wù)中，當(dāng)用戶滑至二屏?xí)r，將用戶名、關(guān)注操作作為關(guān)鍵聯(lián)動元素，整體收攏于頂部Bar中，方便用戶操作的同時擴充屏幕利用率等。

自然的情感表達(dá)：在產(chǎn)品中我們嘗試了場景化的動效設(shè)計以及圖標(biāo)微動效的設(shè)計，即便是在輪播中我們也參照電影級片頭的加載方式拆解元素，運用分層加載的形式載入內(nèi)容，讓畫面更具動感和真實性，為用戶的使用創(chuàng)造一個個不經(jīng)意間的小驚喜和小美好。

這些小心機的實現(xiàn)也有賴于強大技術(shù)的支持，在動效實現(xiàn)層面，我們?nèi)嬉肓薒ottie動畫解決方法，在不影響用戶加載速度的前提下，大幅度地提高了交互反饋實現(xiàn)的流暢和質(zhì)量。

科學(xué)管理助力設(shè)計創(chuàng)新

——

從改版策劃到設(shè)計落地，從方案探索到業(yè)務(wù)應(yīng)用，其中不乏多方的反復(fù)和博弈，在支持原有迭代工作的基礎(chǔ)上更需要科學(xué)有效的管理方法來幫助我們解決對全局用戶體驗方方面面的影響，保持高效的團隊協(xié)作。

以下我們將分享在項目執(zhí)行過程中一些行之有效的設(shè)計方法。

1??|??虛擬團隊組建

作為一次大體量的視覺改版不可能憑借個人力量完成，一個人的能力再高，效率再高，精力也是有限的。在日常業(yè)務(wù)條線分配工作以外，我們組建了一只虛擬項目小分隊，協(xié)同大家一起參與來完成這次挑戰(zhàn)。

在團隊執(zhí)行過程中，結(jié)合途牛自有的設(shè)計方法策略以：洞見需求——找到設(shè)計抓手——設(shè)計解決方案落地——增加體驗落地可能性的方法來應(yīng)對不同階段的使命和挑戰(zhàn)。

風(fēng)格探索期間，我們需要所有項目成員分別探索不同的方案，從而找到適合我們的設(shè)計定位和抓手，當(dāng)改版雛形確定后，則需要統(tǒng)一設(shè)計方向，針對不同的業(yè)務(wù)模塊進行分工規(guī)劃，期間不斷地通過討論和會議進行方案的細(xì)化和矯正。在業(yè)務(wù)發(fā)力期，虛擬團隊則更多地回歸業(yè)務(wù)架構(gòu)本身，溝通交互細(xì)節(jié)，依托真實的場景需求和產(chǎn)品目標(biāo)進行單條線的設(shè)計再發(fā)揮，從而獲得實際條線改版的最優(yōu)解。當(dāng)體驗成熟階段，團隊又可以分散為一個個小傘兵，分別精耕單模塊的打磨和業(yè)務(wù)策略的推進中。

在此期間，虛擬團隊不斷轉(zhuǎn)變設(shè)計角色，運用發(fā)散——收攏——再發(fā)散——再收攏的方式循環(huán)適用于整個項目的生命周期，在每個收攏的節(jié)點至少開展一次以上的匯報會議，積累足夠產(chǎn)出后及時同步信息至上游老板，不斷矯正并約束方向偏差，直至最終設(shè)計策略的成型及全業(yè)務(wù)的覆蓋。

2??|??借力單點業(yè)務(wù)進行最佳實踐

有了成熟的設(shè)計策略就好比打磨了一件成熟的商品，需要獲得市場的認(rèn)可才能實現(xiàn)叫好又叫座的效果。在推廣賦能階段，我們結(jié)合途牛自身的業(yè)務(wù)迭代規(guī)律，選取了V10.0適逢改版階段的首頁下手，作為策略落地的實踐案例。

洞見需求

從以往數(shù)據(jù)來看，首頁長久沒有更新的首頁樣式陳舊，單屏利用率低，流量大都集中于搜索和宮格入口，二三屏內(nèi)容同質(zhì)化嚴(yán)重，信息無法有效傳達(dá)用戶，產(chǎn)品轉(zhuǎn)化低迷。

現(xiàn)有首屏數(shù)據(jù)相對較為穩(wěn)定，為了維穩(wěn)用戶使用習(xí)慣，保持途牛近兩年來維系的品牌調(diào)性，綜合考慮下，我們此次改版對宮格入口不做較大調(diào)整，相反將設(shè)計重心更多地轉(zhuǎn)向二三屏的產(chǎn)品架構(gòu)升級，以解決當(dāng)前內(nèi)容、產(chǎn)品傳達(dá)率，提升轉(zhuǎn)化。

找到設(shè)計抓手

在這種模式下，我們結(jié)合業(yè)務(wù)需求將設(shè)計思維集中在：內(nèi)容吸引和架構(gòu)升級這兩個層面，以此來提高二三屏轉(zhuǎn)化數(shù)據(jù)。

1、內(nèi)容吸引：運用背板容器，挖掘模塊產(chǎn)品體驗定位，明確用戶對產(chǎn)品的價值期望，結(jié)合個性化推薦，重塑基于產(chǎn)品定位下的內(nèi)容信息層級。

2、架構(gòu)升級：統(tǒng)籌全局架構(gòu)，通過適度的設(shè)計方式整合信息區(qū)塊，簡化/刪除頁面中多余的視覺噪音，保證信息的快速感知。

設(shè)計解決方案落地

· 信息結(jié)構(gòu)優(yōu)先級：依托背板容器的基礎(chǔ)框架，我們在超值特賣、目的地推薦等模塊重新梳理，針對不同業(yè)務(wù)特質(zhì)區(qū)分信息優(yōu)先級，強化優(yōu)質(zhì)內(nèi)容以引發(fā)用戶情感共鳴，同時冠以主題性、個性化內(nèi)容滲透，如特賣模塊突出品類價格優(yōu)勢，目的地模塊強化信息架構(gòu)，精選模塊突出品牌價值等，從而形成更優(yōu)質(zhì)的場景化導(dǎo)購模式。

·?背板容器場景化升級：坑位原有的設(shè)計理念側(cè)重于高效，區(qū)塊分隔占比平均，分割規(guī)律。但根據(jù)點擊數(shù)據(jù)反饋，旅游作為更注重感性體驗的產(chǎn)品，過于理性的區(qū)塊能夠在功能上滿足需求，但是卻不能調(diào)動用戶點擊的欲望，我們需要結(jié)合用戶角色、產(chǎn)品、需求等維度來改變理念，更聚焦于內(nèi)容場景化的表達(dá)。

?·?動態(tài)內(nèi)容立體呈現(xiàn)：這種場景構(gòu)建不僅僅局限于二維平面，在縱向維度上，動態(tài)信息的呈現(xiàn)也為我們信息結(jié)構(gòu)的立體化提供了更多可能，豐富了業(yè)務(wù)展現(xiàn)形式。在超值特賣模塊針對有視頻的旅游產(chǎn)品我們會優(yōu)先選取動態(tài)片段循環(huán)播放，而對于沒有視頻素材的產(chǎn)品則會選取首焦圖自動播放緩動位移動畫。

· 個性化算法推薦：新升級的個性化算法融入了更多用戶行為特征。我們針對用戶的登錄、瀏覽行為進行記錄，當(dāng)一個有瀏覽記錄的用戶在打開首頁時，在搜索框、通知、目的地推薦、旅游產(chǎn)品卡等模塊都會根據(jù)其賬號狀態(tài)進行個性化產(chǎn)品推薦，以此來精準(zhǔn)識別用戶偏好，縮短其決策路徑，從而更好地激活潛在購買需求的用戶消費需求。

· 動態(tài)視差banner：針對運營內(nèi)容的升級，我們在首焦Banner架構(gòu)上創(chuàng)新型的運用了視差動畫的手法，參照電影級元素入場動畫形式，拆分Banner中的背景層、文字層進行切換時的異步加載，精細(xì)化空間軸坐標(biāo)及貝塞爾曲線數(shù)據(jù)，無縫對接開發(fā)，實現(xiàn)新版首焦圖的美學(xué)跨越。

當(dāng)然，這種新形式的首焦Banner形式固然會增加設(shè)計及研發(fā)的工作量，因此目前僅應(yīng)用在針對用戶數(shù)據(jù)進行的個性化推薦Banner中，對于常規(guī)的營銷活動，我們更多地側(cè)重于對于常規(guī)促銷內(nèi)容生產(chǎn)鏈路中與新版首頁的契合度把控。

增加體驗落地可能性

作為第一個應(yīng)用新版視覺策略的業(yè)務(wù)，首頁從設(shè)計到研發(fā)上線的整個過程中面對了很多的挑戰(zhàn)和壓力，無論是全新設(shè)計理念在公司內(nèi)一層層宣講的認(rèn)可度提升，還是研發(fā)在還原層面一次次突破研究的技術(shù)突破，項目組的每個成員都在堅定地朝著目標(biāo)努力，只愿為途牛用戶呈現(xiàn)更優(yōu)質(zhì)的產(chǎn)品體驗。

效果評估

此次首頁改版在十二月下旬正式上線，在前臺用戶使用的過程中，一方面我們也在持續(xù)進行精細(xì)化的迭代設(shè)計，僅針對瀑布流中產(chǎn)品卡的內(nèi)容結(jié)構(gòu)和信息層級在至今的每個版本中都有這細(xì)節(jié)處的不斷改變和提升。

另一方面，為了及時把握用戶接受度和滿意度，我們也在實時運用數(shù)據(jù)監(jiān)控對我們此次改版進行體驗效果評估，并根據(jù)反饋結(jié)果總結(jié)經(jīng)驗教訓(xùn)，沉淀對轉(zhuǎn)化率幫助較大的有效因素。事實也證明，通過設(shè)計重建下和系統(tǒng)思維解構(gòu)下的首頁V10改版項目在數(shù)據(jù)上看，二三屏的模塊轉(zhuǎn)化上相較之前有了很大的提升，實現(xiàn)了我們的初始目標(biāo)，更好地實現(xiàn)了業(yè)務(wù)賦能。

結(jié)語

——

正是依托在項目改版升級中的完美實踐，反哺給業(yè)務(wù)方更多的信心，團隊也將以此為基點與其他業(yè)務(wù)合作共享，運用「約束增量，改進存量」的方式，更好地為我們的用戶打造更專業(yè)、更極致的出游體驗，讓搭載全新設(shè)計策略的產(chǎn)品陸續(xù)落地。一切，也才剛剛開始......

綜上，就是我們在途牛改版設(shè)計中融入的新探索和新沉淀，寫下這些內(nèi)容讓大家更深入地了解我們在打造產(chǎn)品體驗中所做的努力和嘗試，也希望能給身處行業(yè)中的設(shè)計師們一些幫助和啟發(fā)，感謝大家！

作者：途牛UED