編輯導語：在日常項目中我們經常會遇到改版或者優化體驗向的設計需求。本次作者通過一個案例來說明怎樣通過業務訴求和用戶反饋來升級體驗。并且用體系化的***優化了現有設計規范。
01改版背景長城云保是通過客戶端小程序向用戶提***品查詢、線上投保、理賠指引、保單查詢及其他客戶端服務，致力于便捷、高效為客戶提供保險相關的線上服務。
隨著產品發展以及業務訴求反饋用戶反饋舊版首頁問題逐漸暴漏出來，為了給用戶更好使用體驗和瀏覽體驗推動了改版設計。
02現存問題1.業務&用戶（基于業務訴求&用戶反饋）業務：提升各保險模塊的分發效率，并且主打熱銷產品的銷量。
用戶：產品是否可信？怎樣買適合自己的保險？保險之間有什么差異？想了解保險具體信息找誰問？
2.視覺問題（歷史遺留問題）模塊之間區分不明顯、界面沉悶、設計維護成本高。
熱銷產品區與其他內容堆疊產品操作和展示效率低。
03設計策略高效分發：突出首屏業務功能區保險模塊的識別效率，提升業務曝光率。框架重構：各模塊之間區分不明顯，將每個模塊獨立展示。內容重構：減少冗余元素、定制更符合用戶認知的信息，讓用戶更聚焦于主任務。1.高效分發舊版業務功能區用戶認知成本較高基于產品核心流程來說，產品首頁對于用戶來說屬于最重要的頁面也是短暫停留思考的頁面，盡快讓用戶看懂并找到自己所需的才是產品首頁要完成的主目標。本次我們通過根據不同保險模塊、強化視覺區分來提升業務曝光率，為用戶提供更直觀、更高效的選擇路徑。
2.框架重構1.從框架層和層級進行梳理，將首頁模塊進行優化提煉，將每個模塊獨立展示，保持相對一致的外觀，讓頁面看上去更加清晰且提升瀏覽效率。
2.在首頁中展示真實投保案例模塊，加強產品對于用戶的信任度。
3.內容重構在內容呈現上需要更加突出重點信息，在內容化設計上需要更明確的認知。在屏效上有不錯的提升，并且對其他模塊提高了空間容錯率。
1.在新版的保險列表中增加保險特性和相對易理解的的保障信息。
2.在同類型內容模塊的設計表現也需一致，刪除無用字段、弱化次要信息。給用戶提供豐富內容但結構簡明的視覺認知。
3.將推薦閱讀等內容獨立出來放到發現頁優化操作效率，讓用戶任務更聚焦在熱銷產品模塊。
4.每個保險產品圖從復雜的視覺圖形轉換成真實的人物圖來降低用戶認知成本。
5.從原來的3個產品列表增加到5個加強熱銷產品展示效率。
減少頁面中冗余信息展示
1.產品豐富模塊與底部標簽保險功能是跳轉同一頁面，操作雷同以及關于平臺介紹入口在首頁展示過于冗余取消在首頁中展示移入到個人中心。
2.根據用戶反饋我們增強經紀人服務模塊，幫助用戶及時了解到保險相關疑惑。
04視覺升級目前視覺上存在的細節問題：
1.模塊之間區分不明顯、元素間距缺乏一致性。
2.舊版的圖標樣式及文字層級相對違和且卡片投影較重導致界面沉悶。
3.缺乏提效的組件庫導致后期設計維護成本高。
1.卡片容器優化為了整體視覺體體量更加輕量化、背景色采用較深的灰摒棄原有的重投影。并且統一卡片容器，用卡片化區分不同模塊和內容減少用戶認知負擔。聚焦核心信息展示，加強設計統一性。
優化后的卡片容器???
2.圖標樣式換新1.業務功能區圖標-運用晶白的的設計手法以及圓潤的設計語言、通過四種不同的的漸變背景對應不同業務，提升視覺辨識度。
2.Tabbar、Navbar-簡化圖標造型，未選中狀態減輕過重的差異化呈現。
3.系統化設計規范柵格系統
全新采用12列網格系統布局，元素均基于合理的排版、網格、間距和比例進行設計。
此柵格以750x1624（iPhoneX@2x）分辨率為基準設定；能被2、3、4等分的12柵格體系；邊距（M=32）自適應，內容區自動適配不同分辨率；元素間距以4為最小單位；
4.文字系統在設計時中英文默認使用蘋方字體，重要數據展示使用D-Din，強化頁面信息節奏感。
頁面信息通過字號、字重和字色的差異，明確信息層級，為用戶提供更流暢閱讀體驗。
5.圖標系統統一的網格背景底板；
遵循清晰、簡潔、圓潤的設計語言來設計圖標；
為了保持圖標的韻律感和統一性，圓角規律設置為4、2、1；
05組件規范為了提高設計協作效率和一致性打造通用組件庫，方便團隊內部使用和管理，提高開發還原度、開發效率。
06效果展示設計稿中的圖片來源于網絡在次僅作為展示、學習用，不作為商業用途。
07總結以上是此次改版升級的主要思路。從前期發現問題、定義問題、制定設計策略、設計執行，并建立了相應的設計規范。對之前的歷史遺留問題以及業務和用戶需求分析后推動了此次項目改版。目前項目還在重構，且還有不足點，后續也會在改版中持續優化，讓產品有更好的體驗。
感謝讀到這里的小伙伴。謝謝～～?
作者：KG公眾號：KG的設計沉淀
本文由@KG原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協議
