高手是如何做改版的？來看智行10.0設計改版案例復盤

Hey，親愛的小伙伴，你期待的旅行是什么樣的？

很高興在 22 年末，智行 10.0 帶著輕快的步伐與大家見面啦！

新年新面貌，全新智行希望為小伙伴來年的旅途提供更優質服務，增添一份好心情。

下面就來看看，智行 10.0 的構思與成果吧～

更多改版案例：

智行，作為一站式旅游出行平臺，已覆蓋火車、機票、汽車票、酒店等業務。近年來，更是以親民的價格吸引了越來越多的年輕用戶，其中 90 后及 00 后占比高達 75.2%。前期調研中我們發現，與核心用戶年輕化趨勢形成反差的是，智行的界面風格調性更多被評價為“商務”、“嚴肅”。因此，褪去舊殼，以嶄新活力之姿擁抱年輕群體是智行 10.0 需要探索的方向。

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

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

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

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

1. 輕盈有序 · 打造高效預訂體驗
2. 情感傳遞 · 旅程的貼心陪伴者
3. 品牌外化 · 構建品牌記憶點

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

1. 全新 10.0 框架 更輕量

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

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

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

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

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

2. 全新首頁 讓營銷變有趣

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

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

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

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

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

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

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

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

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

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

明快的色彩

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

圓潤的圖形

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

輕盈的插畫

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

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

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

1. 功能說明長，讀得腦殼疼
2. 看了半天不理解，迷迷糊糊下了單
3. 我是出行新手，那么多專業詞看不懂呀...

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

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

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

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

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

1. 打造全新 UI 品牌符號

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

符號的由來

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

讓符號“動”起來

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

寫在最后

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

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

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

隨疫情的逐步放開，旅游業也將穩步復蘇。

正如開篇所說：「旅行，是對自由與快樂的向往」

智行期待未來與你相伴，

共同探索未知的世界，

欣賞旅途的風景。

2023 年，和智行一起，向快樂出發～