編輯導語：在日常項目中我們經(jīng)常會遇到改版或者優(yōu)化體驗向的設(shè)計需求。本次作者通過一個案例來說明怎樣通過業(yè)務訴求和用戶反饋來升級體驗。并且用體系化的方法優(yōu)化了現(xiàn)有設(shè)計規(guī)范。

01 改版背景

長城云保是通過客戶端小程序向用戶提供產(chǎn)品查詢、線上投保、理賠指引、保單查詢及其他客戶端服務，致力于便捷、高效為客戶提供保險相關(guān)的線上服務。

隨著產(chǎn)品發(fā)展以及業(yè)務訴求反饋用戶反饋舊版首頁問題逐漸暴漏出來，為了給用戶更好使用體驗和瀏覽體驗推動了改版設(shè)計。

02 現(xiàn)存問題

1. 業(yè)務&用戶（基于業(yè)務訴求&用戶反饋）

業(yè)務：提升各保險模塊的分發(fā)效率，并且主打熱銷產(chǎn)品的銷量。

用戶：產(chǎn)品是否可信？怎樣買適合自己的保險？保險之間有什么差異？想了解保險具體信息找誰問？

2. 視覺問題（歷史遺留問題）

模塊之間區(qū)分不明顯、界面沉悶、設(shè)計維護成本高。

熱銷產(chǎn)品區(qū)與其他內(nèi)容堆疊產(chǎn)品操作和展示效率低。

03 設(shè)計策略

1. 高效分發(fā)：突出首屏業(yè)務功能區(qū)保險模塊的識別效率，提升業(yè)務曝光率。
2. 框架重構(gòu)：各模塊之間區(qū)分不明顯，將每個模塊獨立展示。
3. 內(nèi)容重構(gòu)：減少冗余元素、定制更符合用戶認知的信息，讓用戶更聚焦于主任務。

1. 高效分發(fā)

舊版業(yè)務功能區(qū)用戶認知成本較高基于產(chǎn)品核心流程來說，產(chǎn)品首頁對于用戶來說屬于最重要的頁面也是短暫停留思考的頁面，盡快讓用戶看懂并找到自己所需的才是產(chǎn)品首頁要完成的主目標。本次我們通過根據(jù)不同保險模塊、強化視覺區(qū)分來提升業(yè)務曝光率，為用戶提供更直觀、更高效的選擇路徑。

2. 框架重構(gòu)

1.從框架層和層級進行梳理，將首頁模塊進行優(yōu)化提煉，將每個模塊獨立展示，保持相對一致的外觀，讓頁面看上去更加清晰且提升瀏覽效率。

2.在首頁中展示真實投保案例模塊，加強產(chǎn)品對于用戶的信任度。

3. 內(nèi)容重構(gòu)

在內(nèi)容呈現(xiàn)上需要更加突出重點信息，在內(nèi)容化設(shè)計上需要更明確的認知。在屏效上有不錯的提升，并且對其他模塊提高了空間容錯率。

1.在新版的保險列表中增加保險特性和相對易理解的的保障信息。

2.在同類型內(nèi)容模塊的設(shè)計表現(xiàn)也需一致，刪除無用字段、弱化次要信息。給用戶提供豐富內(nèi)容但結(jié)構(gòu)簡明的視覺認知。

3.將推薦閱讀等內(nèi)容獨立出來放到發(fā)現(xiàn)頁優(yōu)化操作效率，讓用戶任務更聚焦在熱銷產(chǎn)品模塊。

4.每個保險產(chǎn)品圖從復雜的視覺圖形轉(zhuǎn)換成真實的人物圖來降低用戶認知成本。

5.從原來的 3 個產(chǎn)品列表增加到 5 個加強熱銷產(chǎn)品展示效率。

減少頁面中冗余信息展示

1.產(chǎn)品豐富模塊與底部標簽保險功能是跳轉(zhuǎn)同一頁面，操作雷同以及關(guān)于平臺介紹入口在首頁展示過于冗余取消在首頁中展示移入到個人中心。

2.根據(jù)用戶反饋我們增強經(jīng)紀人服務模塊，幫助用戶及時了解到保險相關(guān)疑惑。

04 視覺升級

目前視覺上存在的細節(jié)問題：

1.模塊之間區(qū)分不明顯、元素間距缺乏一致性。

2.舊版的圖標樣式及文字層級相對違和且卡片投影較重導致界面沉悶。

3.缺乏提效的組件庫導致后期設(shè)計維護成本高。

1. 卡片容器優(yōu)化

為了整體視覺體體量更加輕量化、背景色采用較深的灰摒棄原有的重投影。并且統(tǒng)一卡片容器，用卡片化區(qū)分不同模塊和內(nèi)容減少用戶認知負擔。聚焦核心信息展示，加強設(shè)計統(tǒng)一性。

優(yōu)化后的卡片容器???

2. 圖標樣式換新

1.業(yè)務功能區(qū)圖標-運用晶白的的設(shè)計手法以及圓潤的設(shè)計語言、通過四種不同的的漸變背景對應不同業(yè)務，提升視覺辨識度。

2.Tabbar、Navbar-簡化圖標造型，未選中狀態(tài)減輕過重的差異化呈現(xiàn)。

3. 系統(tǒng)化設(shè)計規(guī)范

柵格系統(tǒng)

全新采用12列網(wǎng)格系統(tǒng)布局，元素均基于合理的排版、網(wǎng)格、間距和比例進行設(shè)計。

• 此柵格以 750 x 1624（iPhoneX @2x）分辨率為基準設(shè)定；
• 能被2、3、4等分的12柵格體系；
• 邊距（M=32）自適應，內(nèi)容區(qū)自動適配不同分辨率；
• 元素間距 以 4 為最小單位；
  

4. 文字系統(tǒng)

在設(shè)計時中英文默認使用蘋方字體，重要數(shù)據(jù)展示使用D-Din，強化頁面信息節(jié)奏感。

頁面信息通過字號、字重和字色的差異，明確信息層級，為用戶提供更流暢閱讀體驗。

5. 圖標系統(tǒng)

統(tǒng)一的網(wǎng)格背景底板；

遵循清晰、簡潔、圓潤的設(shè)計語言來設(shè)計圖標；

為了保持圖標的韻律感和統(tǒng)一性，圓角規(guī)律設(shè)置為 4、2、1；

05 組件規(guī)范

為了提高設(shè)計協(xié)作效率和一致性打造通用組件庫，方便團隊內(nèi)部使用和管理，提高開發(fā)還原度、開發(fā)效率。

06 效果展示

設(shè)計稿中的圖片來源于網(wǎng)絡在次僅作為展示、學習用，不作為商業(yè)用途。

07 總結(jié)

以上是此次改版升級的主要思路。從前期發(fā)現(xiàn)問題、定義問題、制定設(shè)計策略、設(shè)計執(zhí)行，并建立了相應的設(shè)計規(guī)范。對之前的歷史遺留問題以及業(yè)務和用戶需求分析后推動了此次項目改版。目前項目還在重構(gòu)，且還有不足點，后續(xù)也會在改版中持續(xù)優(yōu)化，讓產(chǎn)品有更好的體驗。

感謝讀到這里的小伙伴。謝謝～～??

作者：KG? ?公眾號：KG的設(shè)計沉淀

本文由 @KG 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自?Unsplash，基于 CC0 協(xié)議