項(xiàng)目背景

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

現(xiàn)有問(wèn)題

在快速增長(zhǎng)的階段，設(shè)計(jì)團(tuán)隊(duì)為了配合產(chǎn)品的快速迭代上線，完善基礎(chǔ)功能。這種做法雖然在初期能夠快速響應(yīng)市場(chǎng)，但也遺留了許多問(wèn)題：

交互步長(zhǎng)的冗余，受限于技術(shù)框架，原流程的任務(wù)均獨(dú)立存在，無(wú)法形成有效的串聯(lián)，導(dǎo)致用戶在操作時(shí)需頻繁通過(guò)中間頁(yè)進(jìn)行承接，視覺(jué)交互不一致，由于快速迭代需求上線，未能建立統(tǒng)一的規(guī)范。

設(shè)計(jì)方向

在徹底分析了現(xiàn)有問(wèn)題及用研報(bào)告后，我們確定了視覺(jué)、交互、范圍三個(gè)層面的改版設(shè)計(jì)框架：

1. 視覺(jué)層：通過(guò)優(yōu)化頁(yè)面結(jié)構(gòu)和視覺(jué)表現(xiàn)，增強(qiáng)用戶視覺(jué)體驗(yàn)的一致性。
2. 交互層：通過(guò)簡(jiǎn)化操作步驟，提升用戶操作的便捷性和效率。
3. 范圍層：通過(guò)組件化任務(wù)流程，實(shí)現(xiàn)金融全業(yè)務(wù)覆蓋，提升設(shè)計(jì)和開(kāi)發(fā)的效率，降低運(yùn)營(yíng)維護(hù)成本。

一、視覺(jué)層

考慮到金融自身體的獨(dú)特性，我們圍繞形態(tài)、色彩、字體、質(zhì)感以及頁(yè)面結(jié)構(gòu)等幾個(gè)方面進(jìn)行設(shè)計(jì)。

1. 形態(tài)設(shè)計(jì)

我們?cè)陧?yè)面布局上做了優(yōu)化和統(tǒng)一，采用“頭部進(jìn)度提示+主體任務(wù)展示+底部按鈕操作”的方式，通過(guò)合理的間距將模塊清晰的分割，使用戶能更清晰的感知到任務(wù)進(jìn)度和路徑，增加預(yù)判感知。

2. 色彩選擇

色彩設(shè)計(jì)上，結(jié)合金融用戶畫(huà)像偏好及攜程藍(lán)這一標(biāo)志性色彩作為主色調(diào)，使得用戶在攜程、去哪兒、智行、鐵友（金融主要依托在這些 APP 場(chǎng)景中）的金融服務(wù)中感受到一致的視覺(jué)體驗(yàn)，減少用戶在不同服務(wù)場(chǎng)景切換時(shí)的認(rèn)知負(fù)擔(dān)。

3. 字體調(diào)整

針對(duì)金融服務(wù)的特點(diǎn)及用戶閱讀習(xí)慣，我們對(duì)標(biāo)題和內(nèi)容的字號(hào)、大小、間距進(jìn)行全面調(diào)整，使得傳遞的信息更清晰易讀。

4. 質(zhì)感升級(jí)

在質(zhì)感設(shè)計(jì)上，我們采用充滿科技感的藍(lán)色漸變風(fēng)，不僅符合金融科技的行業(yè)特性，也與攜程藍(lán)相形契合，提升了產(chǎn)品專業(yè)度的同時(shí)也增加了視覺(jué)層次感。

5. 頁(yè)面重構(gòu)

通過(guò)頭部進(jìn)度區(qū)、中間任務(wù)內(nèi)容區(qū)、底部操作區(qū)的清晰劃分，每個(gè)部分都是采用組件化設(shè)計(jì)，增加了頁(yè)面布局的靈活性同時(shí)降低維護(hù)難度，保證了不同任務(wù)的視覺(jué)視覺(jué)一致性，減少用戶學(xué)習(xí)成本，同時(shí)增加他們對(duì)產(chǎn)品的信任感。

二、交互層

基于改版前存在的問(wèn)題，我們通過(guò)創(chuàng)建一個(gè)整體的大組件來(lái)統(tǒng)一管理所有授信任務(wù)，所有業(yè)務(wù)的任務(wù)均可由組件統(tǒng)一調(diào)度，消除了任務(wù)中跳轉(zhuǎn)的中間頁(yè)，做到任務(wù)與任務(wù)間的無(wú)縫銜接。

1. 簡(jiǎn)化操作步驟

授信流程的步長(zhǎng)減少了 50%，極大地降低了用戶的操作難度，提升了體驗(yàn)。

2. 統(tǒng)一交互動(dòng)畫(huà)

確保每個(gè)動(dòng)畫(huà)都符合整體設(shè)計(jì)風(fēng)格，增強(qiáng)用戶感知一致性和專業(yè)性。

三、范圍層

我們對(duì)金融業(yè)務(wù)任務(wù)進(jìn)行歸納、整理、分類并進(jìn)行組件化，像搭建樂(lè)高積木一樣，使各類任務(wù)能兼容不同任務(wù)形態(tài)并融入整個(gè)授信流程，最終實(shí)現(xiàn)了全金融場(chǎng)景的覆蓋。

1. 數(shù)據(jù)結(jié)果

目前新版授信流程已上線半年多，風(fēng)控核身、任務(wù)完成率及授信流程等核心指標(biāo)數(shù)據(jù)均表現(xiàn)良好，超出預(yù)期效果。數(shù)據(jù)結(jié)果驗(yàn)證了統(tǒng)一視覺(jué)與簡(jiǎn)化交互步驟能有效幫助用戶聚焦信息、降低操作費(fèi)力度，提升核心功能使用率。

總結(jié)

通過(guò)視覺(jué)和交互改版，與大家分享了我們?cè)跇I(yè)務(wù)改版設(shè)計(jì)的探索，于整個(gè)項(xiàng)目是由 UE 自發(fā)推動(dòng)，涉及的改動(dòng)量和開(kāi)發(fā)人日非常大，項(xiàng)目在未上線獲得正向數(shù)據(jù)前，體驗(yàn)的價(jià)值無(wú)法被量化，期間跟老板、開(kāi)發(fā)們無(wú)數(shù)次上會(huì)敲定方案，最終得以推動(dòng)信貸業(yè)務(wù)線接新組件。上線后數(shù)據(jù)反饋向，切量 50%后持續(xù)觀察兩個(gè)月，數(shù)據(jù)依然穩(wěn)定，有了數(shù)據(jù)的支撐才得將組件推動(dòng)至全業(yè)務(wù)線。由于新版對(duì)每個(gè)任務(wù)項(xiàng)的監(jiān)測(cè)更準(zhǔn)確了，未來(lái)我們還會(huì)繼續(xù)深入監(jiān)測(cè)每項(xiàng)任務(wù)的數(shù)據(jù)表現(xiàn)，持續(xù)深入發(fā)掘可提升點(diǎn)，改善產(chǎn)品體驗(yàn)，發(fā)揮設(shè)計(jì)價(jià)值。

歡迎關(guān)注作者微信公眾號(hào)：「TripDesign」