亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

恭喜你成為UI中國(guó)推薦設(shè)計(jì)師 (詳情)
//百度統(tǒng)計(jì) 20220402 uicn

您的意見(jiàn)是我們 UI 中國(guó)進(jìn)步的動(dòng)力!
點(diǎn)擊立即反饋按鈕,發(fā)表您的意見(jiàn)!
立即反饋
QQ群反饋
您也可以加入U(xiǎn)I中國(guó)官方反饋群進(jìn)行反饋!
群號(hào):302892100
備注:反饋問(wèn)題后@管理員能讓我們及時(shí)了解您的意見(jiàn)

提交需求

賽事與廣告咨詢(xún)合作,請(qǐng)?zhí)顚?xiě)需求表單,我們會(huì)在第一時(shí)間與您聯(lián)系!

0/20
0/200

設(shè)計(jì)大賽

  • 設(shè)計(jì)大賽
  • 發(fā)布廣告
  • 發(fā)布招聘
  • 其它需求

提交完成
感謝您對(duì)UI中國(guó)的支持和信賴(lài)!
途牛新設(shè)計(jì)探索解析
0.0°

Image title

18年末,途??蛻?hù)端迎來(lái)了一個(gè)新的開(kāi)始,細(xì)心的小伙伴想必早已在十二月全量運(yùn)行的新版首頁(yè)中窺見(jiàn)一二。


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


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

Image title


背板設(shè)計(jì)理念

——

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

Image title

 |  兩位一體的設(shè)計(jì)抓手

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

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


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

Image title


背板設(shè)計(jì)帶來(lái)的留白率超越

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

Image title

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



更適合移動(dòng)端的容器

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

Image title

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

Image title

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




  一體多位的理念滲透


背板容器化

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

Image title

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

Image title

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

Image title


基因滲透

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

Image title

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

Image title




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

——

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


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

Image title


1  |  顏色系統(tǒng)

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

Image title

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

Image title



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

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

Image title

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

Image title

 |  文字系統(tǒng)

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

Image title

Image title

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

Image title



 |  交互系統(tǒng)

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


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

Image title

Image title

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

Image title

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

Image title





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

——


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


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




 |  虛擬團(tuán)隊(duì)組建

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


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

Image title

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


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



2  |  借力單點(diǎn)業(yè)務(wù)進(jìn)行最佳實(shí)踐

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



洞見(jiàn)需求

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

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



找到設(shè)計(jì)抓手

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

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

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

Image title


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


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

Image title

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


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


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


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

Image title

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



增加體驗(yàn)落地可能性

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


效果評(píng)估

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

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



結(jié)語(yǔ)

——


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


綜上,就是我們?cè)谕九8陌嬖O(shè)計(jì)中融入的新探索和新沉淀,寫(xiě)下這些內(nèi)容讓大家更深入地了解我們?cè)诖蛟飚a(chǎn)品體驗(yàn)中所做的努力和嘗試,也希望能給身處行業(yè)中的設(shè)計(jì)師們一些幫助和啟發(fā),感謝大家!

Image title

「途牛設(shè)計(jì)團(tuán)隊(duì)」祝大家開(kāi)心工作,快樂(lè)生活

更新:2019-02-27

收藏

322人已收藏

途牛UED

設(shè)計(jì)是無(wú)言的服務(wù),說(shuō)的真好!

  • 48

    作品

  • 6752

    粉絲

  • 3

    關(guān)注

  • B端產(chǎn)品設(shè)計(jì)實(shí)錄——途牛商旅全案塑造
  • 官宣!《設(shè)計(jì)驅(qū)動(dòng)力》正式上市!
  • 海報(bào)小程序設(shè)計(jì)如何聯(lián)動(dòng)社群營(yíng)銷(xiāo)
  • 移動(dòng)端表單設(shè)計(jì)準(zhǔn)則:酒店表單重構(gòu)實(shí)踐

    猜你喜歡

      途牛新設(shè)計(jì)探索解析

      0.0°

      你確定要舉報(bào)途牛新設(shè)計(jì)探索解析

      如果查出惡意舉報(bào),十天內(nèi)禁止提交任何舉報(bào)申請(qǐng)。

      0/200

      上傳證據(jù): 超過(guò)10M的附件請(qǐng)使用網(wǎng)盤(pán)地址

      點(diǎn)擊上傳附件

      對(duì)誰(shuí)可見(jiàn):

      全部設(shè)計(jì)師
      • 全部設(shè)計(jì)師
      • 推薦設(shè)計(jì)師和認(rèn)證設(shè)計(jì)師

      您確認(rèn)要推薦?

      該作品發(fā)布時(shí)間:2019年02月26日

      評(píng)分

      完整度

      啟發(fā)性

      勤奮性

      排版布局

      推薦心得

      建議20-200字以?xún)?nèi)

      0/200

      337
      322
      23

      賬號(hào)或密碼錯(cuò)誤,請(qǐng)重新輸入

      賬號(hào)或密碼錯(cuò)誤,請(qǐng)重新輸入

      登錄

      手機(jī)號(hào)

      發(fā)送驗(yàn)證碼 120s 驗(yàn)證碼錯(cuò)誤

      登錄
      第三方賬號(hào)登錄