項目背景

為了打造一站式綜合金融移動服務(wù)平臺，為用戶提供安全、便捷、全面的移動化金融服務(wù)，隨著互聯(lián)網(wǎng)保險日新月異的業(yè)務(wù)發(fā)展和產(chǎn)品需求的迭代，用戶增長遇到瓶頸，平均獲客成本不斷上升

同時用戶對產(chǎn)品的體驗升級的需求越來越強烈，希望從中獲取更多的福利信息和情感上的感知，同時基于保險業(yè)務(wù)的設(shè)計經(jīng)驗積累，我們發(fā)起了對保險板塊的新一輪設(shè)計迭代與體驗優(yōu)化，這一輪優(yōu)化原因主要是以下三個方面：

產(chǎn)品側(cè)

業(yè)務(wù)提出了新的業(yè)務(wù)目標，基于業(yè)務(wù)目標產(chǎn)品發(fā)起了這次改版，滿足用戶增長預(yù)期，提高新用戶的轉(zhuǎn)化率

用研側(cè)

現(xiàn)有的操作有很多不合理的地方，對于用戶不是很友好，需要強化用戶品牌心智，將統(tǒng)一的品牌語言貫穿整個交互路徑，凸顯產(chǎn)品可靠性。

設(shè)計側(cè)

隨著競品改版頻率提高，相比較現(xiàn)有的設(shè)計風格已無法滿足視覺需求，需要對整個板塊進行優(yōu)化

舊版頁面在視覺、結(jié)構(gòu)和運營層面都離行業(yè)競品有一定差距，造成了用戶信任的滑坡，進而影響保險服務(wù)的轉(zhuǎn)化率，通過分析舊版問題，進行針對性的改版

原型探索

首頁核心業(yè)務(wù)視覺層級重構(gòu)

對舊版的框架進行梳理，將我的保險入口和品類區(qū)合并成功能入口區(qū)，新增固定運營區(qū)、活動運營區(qū)、保險推薦和產(chǎn)品頁,將保險首頁轉(zhuǎn)為流量分發(fā)入口，提高轉(zhuǎn)化率

通過微信發(fā)放問卷調(diào)研，收集了65份反饋結(jié)果,并對5位用戶進行了半結(jié)構(gòu)式訪談，并進行新老用戶分類，了解首頁版塊功能的痛點

競品分析

基本功能

京東金融和螞蟻保險都把保單入口放在首頁頭部，而招行放在我的頁面，三個產(chǎn)品都有品類區(qū)，京東金融除了基本保險種類還有更多個性化的入口

活動運營

除了京東金融，招行和螞蟻保險都有Banner,位置都在品類區(qū)下方，三個產(chǎn)品都有推薦保險位，招行是大卡片只推薦一個產(chǎn)品，京東金融是橫向并列多款，左右滑動交互，螞蟻保險在左右滑動交互的基礎(chǔ)上增加Tab切換，提供更多產(chǎn)品

Tab

招行Tab在導(dǎo)航欄下方，京東金融和螞蟻保險都在底部，京東金融有首頁、產(chǎn)品我的，螞蟻保險多了個社群，招行只有產(chǎn)品和我的

圖標設(shè)計

現(xiàn)有問題

我們梳理了現(xiàn)有版本圖標的問題，歸為形狀和顏色兩個部分

形狀

體量不協(xié)調(diào)，點擊感差；相似元素樣式不統(tǒng)一；曲線轉(zhuǎn)角規(guī)則不統(tǒng)一

顏色

顏色與保險服務(wù)品牌調(diào)性不匹配；感光明度差異大；整體配色方案不協(xié)調(diào)

設(shè)計目標

本次圖標改版希望在滿足業(yè)務(wù)訴求和用戶訴求的基礎(chǔ)上，體現(xiàn)品牌感，深挖圖形表達，主要拆分為以下兩個部分。

業(yè)務(wù)表達

包括業(yè)務(wù)訴求和用戶訴求，滿足業(yè)務(wù)需求并將其轉(zhuǎn)化為用戶服務(wù)，且符合用戶使用場景的圖形設(shè)計表達

品牌特征

突出平安保險專業(yè)度，同時還要有獨特的設(shè)計語言

視覺探索

在視覺探索環(huán)節(jié)，圍繞風格、形狀、顏色三個維度，我們進行了設(shè)計方案的嘗試。

風格

本次視覺升級希望能傳達給用戶3個核心點：（圖形）專業(yè)有態(tài)度、（內(nèi)容）簡潔舒適、（體驗）輕松可信賴。在圖形方面圍繞「專業(yè)有態(tài)度」的主題，我們進行了風格探索。

情緒版

圖標形式

在專業(yè)有態(tài)度主題的基礎(chǔ)上，我們分面形圖標、線形圖標、插畫圖標三類圖標形式進行風格探索的收集，并分析了每類圖標的優(yōu)缺點。

結(jié)合點擊感、整體性和識別度，選擇了面形圖標風格進行接下來的嘗試。

面形圖標：點擊感強，圖形識別度高

線形圖標：點擊感弱，視覺焦點分散

插畫圖標：主體弱化，識別度差

在此基礎(chǔ)上，我們也進行了多方案嘗試：

最后，經(jīng)過反復(fù)篩選及測試驗證，選定了以外部圓角內(nèi)部直角的視覺語言：通過轉(zhuǎn)角的對比結(jié)合利落的曲線切割關(guān)系和有規(guī)律的傾斜角度，突出品牌辨識度和圖形識別度，并對其進行深入的研討和細節(jié)的描繪。

統(tǒng)一體量：在確定圖標的基本形狀后，嘗試了圖標的比例，結(jié)合舒適度、點擊感，確定了圖標比例，然后把所有的圖標大小體量進行了統(tǒng)一

傾斜角度：規(guī)定了出現(xiàn)轉(zhuǎn)角的傾斜角度為15度的倍數(shù)

圓角：根據(jù)傾斜角度和表意本身的關(guān)鍵特征的不同，圓角也分為3像素和4像素

斐波那契數(shù)列：結(jié)合斐波那契數(shù)列圓規(guī)范設(shè)計圖形，可以一定程度的提高統(tǒng)一性和視覺美感

統(tǒng)一設(shè)計元素：減少不必要的基礎(chǔ)樣式，來保證圖標整體的一致性

調(diào)整配色

圖標形狀確定之后，就是顏色的部分。基礎(chǔ)配色延續(xù)平安銀行V3.36顏色色相，保持統(tǒng)一性。 確定了色相的范圍之后， 我們以基礎(chǔ)色為基準調(diào)整顏色飽和度，匹配品牌調(diào)性。

基礎(chǔ)配色確定之后，是配色表現(xiàn)形式的選擇，目前的幾種主要的形式包括純色、鄰近色漸變、純度漸變這四種。根據(jù)這三種表現(xiàn)形式，我們分別做了嘗試：

純色過于扁平?jīng)]有設(shè)計感，鄰近色漸變個性比較強，不符合我們風格調(diào)性。所以最后選擇了純度漸變，對統(tǒng)一度和設(shè)計感進行平衡。

頭像設(shè)計

優(yōu)化背景

經(jīng)過調(diào)研發(fā)現(xiàn)，83%的用戶一直都是使用默認頭像，默認頭像的優(yōu)化有助于提升用戶對品牌的認同度

視覺符號

曼狄諾定律（微笑效應(yīng)）指出信息的傳播80%以上是靠非語言方式實現(xiàn)的，視覺符號能利用人的原有記憶，使其與人體大腦進行快速鏈接。為了體現(xiàn)在設(shè)計語言中體現(xiàn) “微笑的心智 "，在頭像的設(shè)計元素中都植入了“最美弧線” 的符號表達。給用戶帶來正面情緒的暗示與模仿。

配色規(guī)范

根據(jù)品牌色進行飽和度的調(diào)整，搭配發(fā)色，提升品牌認知

設(shè)計推導(dǎo)

確定人體的輪廓和細節(jié)，組件化發(fā)飾、服裝，保持整套頭像的統(tǒng)一性和可復(fù)用性

模塊優(yōu)化

層級構(gòu)成

保險列表的圖片統(tǒng)一使用插畫繪制，為了達到風格的統(tǒng)一性，我們進行了三層結(jié)構(gòu)處理，分別是標簽層、主體人物層和背景層，標簽層用于特別推薦的保險服務(wù)，吸引用戶點擊

統(tǒng)一列表設(shè)計語言，增強產(chǎn)品感知力

• 列表圖片統(tǒng)一成扁平背景和人物摳圖樣式，提升統(tǒng)一度，保證上線稿的最終效果

• 將舊版的圖文分開的排版改成左圖右文，減少用戶視線路程，提高點擊率

• 方案A多個卡片樣式過于分割，不利于用戶視線集中

• 方案C豎向排列信息密度過大，不利于突出產(chǎn)品特征

• 方案D靜態(tài)只能展示3個產(chǎn)品，曝光度不理想

列表優(yōu)化

舊版首頁列表

篩選功能單一，列表設(shè)計老舊

篩選選項只有3個選項，細分程度不夠?qū)е铝斜磉^長，不利于用戶做出選擇

左圖右文的排版不利于視線的專注，文案信息沒有突出賣點，圖片沒有加工，轉(zhuǎn)化率較低

運營規(guī)范

關(guān)鍵詞提取

保險的購買的行為很少是沖動性行為，更多情況下，它是經(jīng)過反復(fù)決策的結(jié)果,因為購買的產(chǎn)品需要長期投入，并期望使用較長的時間，從我們行業(yè)入手，聯(lián)合互聯(lián)網(wǎng)特性，定義出以下關(guān)鍵詞：專業(yè)、品質(zhì)、沉穩(wěn)

核心用色

根據(jù)情緒版制定以下主要色彩搭配建議（建議為多色搭配，選取一個主色進行同類色設(shè)計也可）

圖形元素

以下為常用場景配圖，之后的設(shè)計保持一致，輸出風格一致的運營設(shè)計這里的圖形元素只列舉一部分，這些圖形元素是我們設(shè)計工作的積木，隨著設(shè)計庫的不斷擴充，減少了重復(fù)性的工作，有更多的時間去產(chǎn)出創(chuàng)意

設(shè)計規(guī)范

安全距離的規(guī)范能保證設(shè)計產(chǎn)出主題設(shè)計元素不會過大或過小破壞視覺感受，預(yù)留距離讓畫面具有呼吸感，規(guī)范的距離讓設(shè)計產(chǎn)出具有一致性

尺寸

設(shè)計排版

主要排版方式分兩種，左右布局和居中對齊，根據(jù)設(shè)計內(nèi)容而定，一般情況下選擇左右布局模式進行設(shè)計

游戲化設(shè)計

設(shè)計背景

我們分析數(shù)據(jù)發(fā)現(xiàn)，總的用戶量很多，但是日留存率和留存用戶的活躍度卻不高。因此現(xiàn)階段的業(yè)務(wù)目標是提升留存率和用戶活躍度

我們通過一套游戲化任務(wù)體系，促進各個業(yè)務(wù)線多點互動，給業(yè)務(wù)線帶去價值的同時，提升保險頁面的活躍留存

圖形、配色和質(zhì)感越往右邊走，我們的視覺感官就會愈發(fā)真實。但100%的真實往往細節(jié)過多、成本高昂，對產(chǎn)品設(shè)計來說未必是好事。因此，經(jīng)過多版本嘗試，我們把改版的視覺風格定位在了“微質(zhì)感”上。

設(shè)計目標

游戲的魅力對于用戶來說，相比于現(xiàn)實社會很多努力成果反饋的延時滿足，它的魅力更多可能在極致的即時滿足上，包含可控感、成就感、得失感的3方面。

可控感

為了減少游戲的跳出率，游戲一開始就需要滿足用戶的第一層心理需求控制欲，而這體現(xiàn)在漸進式的上手和清晰的游戲路徑。

漸進式的上手

在游戲的初始時通過簡單的任務(wù)引領(lǐng)讓用戶邊了解游戲的操作，邊提升等級邊建立自己的“王國”。 而且在游戲中的每個操作都會得到即時的視覺化、數(shù)據(jù)化的顯示出來。這些都會讓用戶在游戲初期就感到一種都在我控制之中的感受，漸漸的熟悉和享受游戲帶來的喜悅感。之后游戲任務(wù)的難度才會逐漸升級

清晰的游戲路徑

漸進式的上手只是讓用戶不立馬退出游戲場景，在度過初期的新鮮感之后用戶的疲勞和厭倦感隨之而來，需要將更多的長遠任務(wù)或者未來的場景展現(xiàn)在用戶眼前。解除這種“迷?！备?。 最終讓用戶對這個游戲產(chǎn)生了不是簡單的任務(wù)完成所帶來的表層控制感，而是一種很清晰的對游戲的把控感。

游戲化設(shè)計

成就感

可控感讓用戶在游戲中扎根，成就感讓用戶沉浸，游戲?qū)τ诮^大多數(shù)的用戶而言就是滿足自己在現(xiàn)實世界所無法獲得尊重，亦或是虛榮等方面的要素

榮譽機制

成就感除了游戲日常所獲取金幣、裝備等物質(zhì)獎勵外，名譽、稱號、人脈等成就系統(tǒng)也同樣重要。 一款好游戲一定會不斷的在游戲過程中去激勵用戶，在用戶合適的成長等級生成相應(yīng)的榮譽標識，讓用戶可以感受到榮譽感

多樣小目標

游戲需要清晰的長遠路徑引導(dǎo)用戶，更需要多樣的小目標鼓勵用戶，讓用戶總能找到一個可預(yù)見的小目標，不斷去完成它，獲得完成時的成就感

得失感

人都厭惡損失，當用戶給小樹澆越多水，小樹越來越大的時候，便越難割舍與這個小樹的聯(lián)系；長期不登錄這個游戲會讓他失去所耗費眾多時間與精力打造的世界，自然而然的產(chǎn)生一種心有不甘的得失感。 如果用戶長期不澆水，小樹就會枯萎，讓用戶產(chǎn)生損失感，基于可控感吸引用戶參與，通過成就感持續(xù)讓用戶沉溺，最后讓得失感成為制約玩家不活躍的門檻。

資源位展示

• 文案底框支持多色選擇，背景底框外描邊為固定樣式，氛圍元素不得超過安全區(qū)域

• 外部底框不得有任何修改，詳見源文件規(guī)范，標紅區(qū)域不可更改，標綠圖層可更改

• 文案區(qū)域字符為5字以內(nèi)，字體為：方正準圓，字號：18（素材包已提供，請自行安裝），如文案過長，后期會選用動態(tài)展示

夜間模式

根據(jù)現(xiàn)實世界的光線變化增加夜間場景，提升游戲世界的代入感

消息通知

提醒用戶打開消息通知，提高產(chǎn)品活躍度

1.場景定制化設(shè)計，提升用戶代入感

2.擬人手勢與通知界面的結(jié)合可以非常清楚的告知用戶打開通知的方法，提高通知打開率

3.用健康金獎勵刺激用戶打開通知，比沒有獎勵的打開率高很多

4.按鈕文案由確定改為去打開，動作傾向更明顯