此文章簡單闡述了設計改版過程中的一些思考和經(jīng)驗，希望用圖文的方式總結(jié)下來，和大家分享一下，相互學習或者帶來一定的啟發(fā)。

司機金融是屬于貨車幫司機端的一個金融模塊，隨著平臺的改版規(guī)劃，我們在保持整體平臺規(guī)范的前提下，定義了屬于金融自己的視覺風格，根據(jù)本身的業(yè)務屬性和用戶特點進行差異化設計。此文章簡單闡述了設計改版過程中的一些思考和經(jīng)驗，希望用圖文的方式總結(jié)下來，和大家分享一下，相互學習或者帶來一定的啟發(fā)。

項目背景?

為什么要做改版？

隨著產(chǎn)品業(yè)務的發(fā)展，司機金融首頁逐漸暴露了以下問題：

產(chǎn)品層面：

無法滿足司機貸與司機白條的業(yè)務場景區(qū)分，無法突顯核心功能點，鏈接用戶的使用場景感弱；偏工具化，運營不足，不利于后期的用戶習慣培養(yǎng)；在同類競品中，產(chǎn)品形象不足，品牌感弱。

交互層面：

產(chǎn)品框架結(jié)構(gòu)單一，拓展性不足，簡單的功能堆疊，無功能主次區(qū)分。

視覺層面：

樣式陳舊，視覺信息無層級區(qū)分，風格冗雜，缺乏一致性和設計精細度

設計探索歷史

目標用戶

明確產(chǎn)品目標用戶，做有針對性和差異化的設計，結(jié)合前期的調(diào)研分析總結(jié)出以下用戶特征：

以上三點用戶特征，我們可以對應到不同的設計策略上來，比如：

根據(jù)基本社會特征分析，可以對應到視覺上減少圖標的使用，用文字來代替圖標，降低用戶理解成本；

根據(jù)消費行為特征分析，可以對應到內(nèi)容上增加優(yōu)惠券推送，滿足用戶享受優(yōu)惠的需求；

根據(jù)動態(tài)屬性特征分析，可以對應到渠道上將視頻類應用作為主要推送渠道。

改版目標

這次的改版是由設計側(cè)發(fā)起的，同時我們也需要兼顧業(yè)務上的需求，希望能夠有一個更加簡潔清晰的信息結(jié)構(gòu)呈現(xiàn)，降低用戶的操作和認知成本，同時做好主次業(yè)務區(qū)分，突顯出產(chǎn)品的核心功能點，強化產(chǎn)品的運營屬性，改變工具化的用戶認知，增加用戶黏性和留存；視覺上在大平臺改版的規(guī)范下，找到有自身金融屬性特點的風格，做好信息層級區(qū)分，融入一定的品牌基因，強化產(chǎn)品形象，改善用戶認知，提升用戶對產(chǎn)品的接受度和滿意度。

解決方案

信息架構(gòu)優(yōu)化

針對舊版架構(gòu)冗雜，存在不必要的分類和拓展性不足的問題，進行信息架構(gòu)的梳理和優(yōu)化：

細化頁面框架布局-探索更合適的方式

根據(jù)梳理的功能結(jié)構(gòu)，按照業(yè)務優(yōu)先級優(yōu)化布局結(jié)構(gòu)和視覺層次，在保障美觀度和高效傳達信息的同時，思考如何提升首屏版率（以750x1334px為基準）。

布局層級分析-判斷合理性

這里采用視覺比重分析法，以視覺所占比重來初步衡量層級布局的合理性。

情緒版分析

通過情緒版可以幫助我們理解用戶的情緒、態(tài)度等一系列和內(nèi)心活動相關的內(nèi)容，并借此指導我們選擇最合適的視覺風格。在此過程中我們需要去發(fā)散一些和產(chǎn)品特征相關的抽象化原生關鍵詞、具象化的衍生關鍵詞，并以此建立圖片庫，做好分類，挑選目標用戶，讓用戶根據(jù)關鍵詞挑選合適的圖片，并給出一定挑選原因，最后根據(jù)用戶挑選的圖提取視覺關鍵詞。

經(jīng)過多番探索，結(jié)合目前的產(chǎn)品特性，最終提取出以下設計關鍵詞：克制、高效、親和

色彩系統(tǒng)

色彩選擇在HSB模式下進行優(yōu)化，希望體現(xiàn)出產(chǎn)品的金融屬性，帶來可靠、安全、有保障以及可信賴的心理感受，漸變色的運用，使得頁面整體更加豐富和具有活力。

? ? ?

?品牌元素滲透

為了強化品牌形象，在設計中除了色彩和文字logo以外，另外融入了品牌元素（減速帶箭頭圖形）和容器圓角，來加深用戶認知和增強產(chǎn)品親和度。

頭部信息區(qū)

頭部信息信息區(qū)承載了頁面的核心功能，包含了司機貸、還款入口以及會員入口等，考慮到后期可能出現(xiàn)的運營換膚功能，采用組件化設計，結(jié)構(gòu)分層，突顯關鍵信息，便于迭代替換。

? ?

功能入口區(qū)

功能入口區(qū)是司機白條的核心轉(zhuǎn)化場景，為了吸引用戶的注意采用卡片容器承載，配色鏈接產(chǎn)品業(yè)務用色，提高飽和度和亮度，采用漸變豐富顏色細節(jié)；針對目標用戶群體，采用箭頭圖標進行引導，增加可點擊感；采用關聯(lián)圖標加深場景氛圍，幫助用戶認知功能，產(chǎn)生心理預期。

? ?

精細化設計

針對白條優(yōu)惠場景的信息設計，精細化迭代，希望呈現(xiàn)一個良好的內(nèi)容結(jié)構(gòu)和信息層次，滿足業(yè)務需求的同時，更好的幫助用戶做出選擇。

? ? ?

?運營瓷片區(qū)-品牌化表達

運營瓷片區(qū)采用組合設計，根據(jù)不同的運營需求存在多種配置方式，包括單獨出現(xiàn)、成對出現(xiàn)、一拖二等；設計上為了突出金融業(yè)務特色，采取英文底紋做區(qū)分設計，并對于一拖二的組合做瓷片層級區(qū)分設計，突出某一重點運營位；考慮到落地和運營設計后期的可控性，對于重點運營位給出了用色規(guī)范模板。

品牌設計

為了配合整個項目的改版，針對品牌文字logo也做了升級優(yōu)化，這是組內(nèi)的小伙伴完成的，感謝他們的付出，使得整個改版更加的完整，同時也使得整個視覺識別系統(tǒng)更加完善和規(guī)范。

運營規(guī)范

在改版過程中，我們梳理了金融業(yè)務線出現(xiàn)的運營場景，并進行了分類歸納，定義運營設計規(guī)范，目的是為了提高運營作圖的規(guī)范性和產(chǎn)出效率。

動態(tài)解決方案

舊版本通過調(diào)研反饋用戶對還款操作入口感知弱，這和目標用戶的操作習慣有一定關系，在改版中我們采取三種方式來解決這個問題：一是當用戶初次進入首頁給與用戶操作引導；二是當還款信息大于兩條時，信息上下輪播，利用動態(tài)效果來幫助用戶認知入口；三是當用戶下滑時，還款入口吸頂固定，便于用戶操作。

結(jié)尾感悟

總結(jié)下大概的思路過程：項目背景 - 目標用戶 - 預期目標 - 解決方案 - 設計驗證 - 精細調(diào)整。當然不同的項目我們的設計過程有所不同，但是萬變不離其宗，我們需要盡可能的明確業(yè)務側(cè)和用戶側(cè)不同需求目標，運用設計的手段將之轉(zhuǎn)化為用戶行為，進而反哺給業(yè)務目標和用戶體驗目標。明確好設計的本質(zhì)是服務，服務于我們的產(chǎn)品，服務于我們的用戶。

原創(chuàng)：李淳風