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

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

項(xiàng)目背景?

為什么要做改版？

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

產(chǎn)品層面：

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

交互層面：

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

視覺層面：

樣式陳舊，視覺信息無(wú)層級(jí)區(qū)分，風(fēng)格冗雜，缺乏一致性和設(shè)計(jì)精細(xì)度

設(shè)計(jì)探索歷史

目標(biāo)用戶

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

以上三點(diǎn)用戶特征，我們可以對(duì)應(yīng)到不同的設(shè)計(jì)策略上來(lái)，比如：

根據(jù)基本社會(huì)特征分析，可以對(duì)應(yīng)到視覺上減少圖標(biāo)的使用，用文字來(lái)代替圖標(biāo)，降低用戶理解成本；

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

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

改版目標(biāo)

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

解決方案

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

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

細(xì)化頁(yè)面框架布局-探索更合適的方式

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

布局層級(jí)分析-判斷合理性

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

情緒版分析

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

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

色彩系統(tǒng)

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

? ? ?

?品牌元素滲透

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

頭部信息區(qū)

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

? ?

功能入口區(qū)

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

? ?

精細(xì)化設(shè)計(jì)

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

? ? ?

?運(yùn)營(yíng)瓷片區(qū)-品牌化表達(dá)

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

品牌設(shè)計(jì)

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

運(yùn)營(yíng)規(guī)范

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

動(dòng)態(tài)解決方案

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

結(jié)尾感悟

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

原創(chuàng)：李淳風(fēng)