旅游APP設計改版后很舒服,到底做了什么改進

Sponsor

前言：這是一款關于旅游APP的設計改版，為使改版的感情調性更貼近用戶出游場景，團隊內部及用戶渠道收集了大量關于“旅行”的聯想關鍵詞，其中包括：愉悅、輕松、有趣、探索…等等。這些美好的詞匯，描繪了大家對未知旅程的期待與憧憬。

智行10.0的構思與成果～

智行，作為一站式旅游出行平臺，已覆蓋火車、機票、汽車票、酒店等業務。近年來，以親民的價格，智行吸引了越來越多的年輕用戶，其中90后及00后占比已高達75.2%。

在前期調研中我們發現，與核心用戶年輕化趨勢形成反差的是，智行的界面風格調性更多被評價為“商務”、“嚴肅”。因此，褪去舊殼，以嶄新活力之姿擁抱年輕群體是智行10.0急需探索的方向。?

項目初期，為使改版的感情調性更貼近用戶出游場景，我們在團隊內部及用戶渠道收集了大量關于“旅行”的聯想關鍵詞，其中包括：愉悅、輕松、有趣、探索…等等。這些美好的詞匯，描繪了大家對未知旅程的期待與憧憬。

由此，我們提出「旅行，是對自由與快樂的向往」作為10.0升級的主線。

我們希望通過10.0升級，提升體驗及服務品質同時，打破工具類產品較為沉悶的使用感受，挖掘旅行中快樂的情緒內核，以輕盈有趣的設計傳遞“快樂旅行，自由出發”的生活態度，做有價值有溫度的OTA產品。

以此，我們確立10.0的設計目標：

1???輕盈有序?· 打造高效預訂體驗

2???情感傳遞?· 旅程的貼心陪伴者

3???品牌外化?· 構建品牌記憶點

一、輕盈有序 · 高效預訂體驗

01.?全新10.0框架 更輕量

智行始終致力于讓用戶訂得高效、訂得安心。然而擴充的業務場景和功能，使頁面結構不堪重負，密集的信息和堆疊的模塊影響了用戶的預訂體驗。10.0全新框架語言，希望通過有效的視重引導及清晰的頁面展示，降低操作費力度，打造高效預訂流程。

?? “輕”頭部色彩 操作更聚焦

色彩是影響視重的重要因素。10.0的升級中，我們將框架語言的背板色由品牌重色調整為明亮通透的淺色，有效將視重由頭部轉移至高頻操作區，為用戶營造專注沉浸的下單體驗。同時，輕量的頭部使頁面更具呼吸感，緩解舊版“沉悶”、“商務”的視覺感受。

?? “輕”信息展示 預訂更友好

清晰的信息展示可有效降低操作難度及決策成本。我們對頁面信息進行分類重組，通過字號大小間距等手段擴大信息層級，凸顯關鍵決策信息。并在有限的頁面空間內，精簡信息，降低信息密度，增加透氣感，提升閱讀友好度。

?

02.?全新首頁 結合趣味營銷

首頁是獲悉業務種類和流量分發的第一道關卡。業務入口的清晰展示對用戶查找和后續轉化極為關鍵。新版首頁在使用10.0框架的基礎上，用重色光感色塊襯托智行四大業務入口，增強點擊感。同時我們將業務線入口作為營銷載體，融入動效，使營銷活動的曝光更立體有趣，為各業務線導流及增長起到了正向的作用。

二、情感傳遞 · 旅程貼心陪伴

我們希望智行10.0，不僅好用而且好玩，傳遞正向情緒價值，與用戶共情，成為旅途中的貼心伙伴。我們通過IP植入、可視化以及創意的視覺喚新等手段一改智行往日“嚴肅”的形象，為用戶提供更溫馨友好的服務。

01. IP“小智” 陪你環游世界?

智行IP“小智”自誕生以來，機智可愛的形象圈粉無數。在10.0的升級中，我們將它融入更多頁面流程，增加情感觸點，提升智行的品牌親和力。我們結合業務場景的同時，為“小智”量身打造了俏皮活潑的動作，塑造和飽滿了它的性格特點，使其煥發生命躍然紙上。

?? 下單助手，高效操作有“我”指引

?? 下拉刷新，一票在手，極速出行

?? 空態場景，有“我”不再無聊

02.?全新視覺語言 營造愉悅氛圍

視覺語言是傳遞產品調性的關鍵要素，圍繞著“輕松愉悅出行”的基調及年輕的客群特征，我們對10.0的整體視覺進行了喚新。

?? 明快的色彩

天空是純澈與美好的匯集，正如旅行中探索快樂的本心。我們從中尋找靈感，從智行品牌藍延伸出“純凈藍”，并將其作為背景色融入核心流程頁面中，營造藍天白云陽光暖煦的視覺氛圍。同時，我們提高了輔助色的明度和飽和度，讓頁面配色更活潑。

?? 圓潤的圖形

我們用簡潔流暢的外形結合大圓角，使圖形在視覺呈現上更靈動Q彈。疊色的表現形式起到1+1>2的效果，使圖形更豐富多彩～

??? 輕盈的插畫

插畫用簡約的造型風格，聚焦核心功能點的傳達。視覺上以靈動的線條，搭配輕盈的高明度漸變，展現10.0年輕活力的品牌調性。

03. 3D現實映射 服務貼心友好

調研中我們發現，預訂流程中，用戶面對復雜功能場景，時常存在這樣的煩惱：

?? 功能說明長，讀得腦殼疼

?? 看了半天不理解，迷迷糊糊下了單

?? 我是出行新手，那么多專業詞看不懂呀…?? ? ? ? ? ? ? ? ? ??

常說“字不如表，表不如圖”，圖像在傳遞信息效率和容量上都是文字的數百倍。10.0的升級中，我們希望通過有效的可視化手段替代單薄蒼白的文字表達，將信息化繁為簡，提升智行服務的品質感及友好度。

我們結合功能為用戶搭建3D場景，通過營造真實的環境氛圍，將現實映射運用到功能表達中，調動用戶真實生活中的常規心理認知。同時結合生動的動畫，將冗長復雜的功能說明以更直觀友好的方式呈現??。

4.趣味動效 轉角遇到“小驚喜”

旅行是快樂地出發，我們在下單流程中埋藏了許多有趣的彩蛋動效，為用戶即將到來的旅程增添不期而遇的“小驚喜”。

三、品牌外化 · 構建品牌記憶點

打造全新UI品牌符號

品牌符號有利于品牌價值觀的外化輸出，為產品帶來記憶點，同時高辨識度的符號能降低用戶對品牌的認知成本，增加信任感和忠誠度。由此，我們結合業務屬性及創意表達打造了智行全新UI品牌符號～

?? 符號的由來

創意上我們選取智行最具代表的火車業務為基點，從產品logo出發，衍生出抽象的火車造型。以光感的主題色漸變，增強呼吸感和透亮度。

?? 讓符號“動”起來

為了更生動地展現火車迎面駛來的速度感，我們將符號“動”了起來，穿梭如風的動態不僅象征搶票的高效性，也為原本靜態的頁面帶來一絲小調皮。我們將其應用到了底bar、一級頁面切換等眾多核心頁面中。

寫在最后 ??

智行10.0，從探索、落地、驗證到上線，歷時10個月。

比心每一位設計師為之付出的努力。

同時很開心，我們收獲了用戶對此次升級的認可和喜愛。

作者：智行ZXD設計中心
來源：智行ZXD設計中心（ID：gh_0a95e60710b1）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。