大廠改版設計實戰！攜程金融授信流程體驗升級復盤

項目背景

隨著市場環境的快速變化，尤其是在經歷了疫情之后，金融市場逐漸從增長期過渡到成熟期。在這一階段，市場競爭愈發激烈，用戶增長放緩。為了將產品、服務和用戶體驗做到極致，我們攜程金融 UE 自發了「授信流程體驗全面升級」的重大改版，旨在更好地滿足用戶需求，提升產品在市場的競爭力。

現有問題

在快速增長的階段，設計團隊為了配合產品的快速迭代上線，完善基礎功能。這種做法雖然在初期能夠快速響應市場，但也遺留了許多問題：

交互步長的冗余，受限于技術框架，原流程的任務均獨立存在，無法形成有效的串聯，導致用戶在操作時需頻繁通過中間頁進行承接，視覺交互不一致，由于快速迭代需求上線，未能建立統一的規范。

設計方向

在徹底分析了現有問題及用研報告后，我們確定了視覺、交互、范圍三個層面的改版設計框架：

1. 視覺層：通過優化頁面結構和視覺表現，增強用戶視覺體驗的一致性。
2. 交互層：通過簡化操作步驟，提升用戶操作的便捷性和效率。
3. 范圍層：通過組件化任務流程，實現金融全業務覆蓋，提升設計和開發的效率，降低運營維護成本。

一、視覺層

考慮到金融自身體的獨特性，我們圍繞形態、色彩、字體、質感以及頁面結構等幾個方面進行設計。

1. 形態設計

我們在頁面布局上做了優化和統一，采用“頭部進度提示+主體任務展示+底部按鈕操作”的方式，通過合理的間距將模塊清晰的分割，使用戶能更清晰的感知到任務進度和路徑，增加預判感知。

2. 色彩選擇

色彩設計上，結合金融用戶畫像偏好及攜程藍這一標志性色彩作為主色調，使得用戶在攜程、去哪兒、智行、鐵友（金融主要依托在這些 APP 場景中）的金融服務中感受到一致的視覺體驗，減少用戶在不同服務場景切換時的認知負擔。

3. 字體調整

針對金融服務的特點及用戶閱讀習慣，我們對標題和內容的字號、大小、間距進行全面調整，使得傳遞的信息更清晰易讀。

4. 質感升級

在質感設計上，我們采用充滿科技感的藍色漸變風，不僅符合金融科技的行業特性，也與攜程藍相形契合，提升了產品專業度的同時也增加了視覺層次感。

5. 頁面重構

通過頭部進度區、中間任務內容區、底部操作區的清晰劃分，每個部分都是采用組件化設計，增加了頁面布局的靈活性同時降低維護難度，保證了不同任務的視覺視覺一致性，減少用戶學習成本，同時增加他們對產品的信任感。

二、交互層

基于改版前存在的問題，我們通過創建一個整體的大組件來統一管理所有授信任務，所有業務的任務均可由組件統一調度，消除了任務中跳轉的中間頁，做到任務與任務間的無縫銜接。

1. 簡化操作步驟

授信流程的步長減少了 50%，極大地降低了用戶的操作難度，提升了體驗。

2. 統一交互動畫

確保每個動畫都符合整體設計風格，增強用戶感知一致性和專業性。

三、范圍層

我們對金融業務任務進行歸納、整理、分類并進行組件化，像搭建樂高積木一樣，使各類任務能兼容不同任務形態并融入整個授信流程，最終實現了全金融場景的覆蓋。

1. 數據結果

目前新版授信流程已上線半年多，風控核身、任務完成率及授信流程等核心指標數據均表現良好，超出預期效果。數據結果驗證了統一視覺與簡化交互步驟能有效幫助用戶聚焦信息、降低操作費力度，提升核心功能使用率。

總結

通過視覺和交互改版，與大家分享了我們在業務改版設計的探索，于整個項目是由 UE 自發推動，涉及的改動量和開發人日非常大，項目在未上線獲得正向數據前，體驗的價值無法被量化，期間跟老板、開發們無數次上會敲定方案，最終得以推動信貸業務線接新組件。上線后數據反饋向，切量 50%后持續觀察兩個月，數據依然穩定，有了數據的支撐才得將組件推動至全業務線。由于新版對每個任務項的監測更準確了，未來我們還會繼續深入監測每項任務的數據表現，持續深入發掘可提升點，改善產品體驗，發揮設計價值。

歡迎關注作者微信公眾號：「TripDesign」