某 APP 改版設計過程總結

9月至11月，眾安AppV2.2及小版本迭代陸續上線，首頁、發現、我的和很多主要頁面全新改版，為用戶提供了全新的體驗。新版本在流程、功能、界面上都進行了極大優化。

眾安作為第一家互聯網保險公司，產品分布于各個互聯網平臺，如微信、網站、合作平臺等，而App作為眾安獨立的平臺之一，想象和發揮的空間更大，因此也承載了更高的目標。這次改版的原因主要有以下幾點：

1. 公司戰略調整

戰略調整為改版提供了大量的人力物力支持，也意味著更高的要求。

2. 設計體驗不統一

由于產品模塊多，接手的人多，且沒有規范進行統一，整個app的體驗相差很大。在設計上，我們需要從交互和視覺層面做到統一化、規范化。

3. 視覺風格過時

2.1版本的視覺形象混亂，設計語言陳舊。這次改版希望重新定義視覺風格，打造全新的視覺設計系統。

4. 不滿足現有產品和業務要求

APP以往的改版更加注重業務需求，對整體架構和體驗考慮較少。隨著更多功能和業務的拓展，我們需要重新梳理產品結構和信息層級，以滿足未來的發展。

除了以上的問題，設計同事與產品一起收集了一系列體驗細節方面的需求。經過整理歸納，我們確立了這次改版的設計目標： 產品結構清晰化、重塑產品視覺形態、統一規范化、提升細節體驗

1. 精簡信息架構

從以往的產品數據來看，App用戶最主要的目標是了解保險并購買保險，其次是尋求保單與理賠相關的基礎服務。因此，在產品上，突出保險產品及服務等主要功能、刪減或整合其他次要功能，將產品以前的4個底部導航精簡至3個模塊，使用戶一目了然。

首頁應該簡單清晰，對于有目標用戶快速導流，模糊目標用戶提供特色推薦及隨意瀏覽。發現模塊重在通過積分和資訊內容增加用戶粘性；我的頁面突出理賠和服務相關功能。

2. 梳理信息層級

眾安App作為垂直類產品，產品展示模塊相對簡單，但理賠服務等模塊信息繁多。因此，在梳理這些功能的時候，將信息分級，模塊化處理，按用戶的使用習慣和頻率排布信息優先級，將低頻功能適當隱藏，突出更多重要的功能。

3. 統一頁面元素

設計過程中，我們根據使用場景統一頁面元素，將元素分為產品展示類，內容展示類，文字信息展示類，操作與輸入類。統一流程中的文案描述、表現形式；統一列表信息、卡片信息布局及展示規則。

4. 增加細節體驗

V2.1及以前的版本，細節很少，總有種難用的感覺，因此，這次改版增加了更多細節的體驗。例如：主要頁面原生化，增強產品流暢感；增加微動效，強化引導；增加手勢操作，使用更自然流暢；優化網絡故障、空白內容時的體驗等等。

上個版本的App已經被很多人吐槽：內容雜亂、視覺風格過時、過于花哨…… V2.2的改版中，我們需要探尋全新的視覺形態，改變以往的形象。

眾安用戶

從《眾安保險白皮書》的數據來看，眾安的目標用戶男女比例基本相同，80/90后年輕群體為主要消費者，用戶特征可以概括為：中性化、年輕化。

基于以上的用戶數據，以及眾安作為互聯網保險公司的特點，我們得到了一些視覺設計的方向：

經過多次討論，我們將改版的視覺設計關鍵詞確定為： 年輕、簡潔、輕快

根據設計關鍵詞，我們重新定義了色彩、圖標及界面元素和整體視覺風格。

1. 強調品牌色，減少輔助色，明晰色彩層級

眾安品牌的綠色是生命、健康與活力的隱喻，同時也是年輕向上的體現，視覺方面決定沿用綠色的主色調。參考流行色趨勢，明亮的色彩更吸引用戶注意力，營造輕快的感覺，因此我們進行了適當微調，提高色彩明度，讓產品看起來更加輕盈。

減少主要色彩數量，增加主色調的顯示比例，強化品牌感受；多層級的文字色階用于適配多樣的內容與信息。

2. 圖標輕量化、統一化

改版過程中，我們對App內圖標進行了梳理和再設計。設計過程中，為了達到簡潔易識別的目標，對圖標的造型、風格、質感進行了很多探索。

為了打造產品的統一感，所有圖標都沿用了相同的視覺元素，統一的圓角使圖標有一定活潑感，不生硬，又保持了中性的感覺。

另外，根據應用場景定制不同的設計策略，如一級導航、分類導航、輔助圖標。

3. 化繁為簡，減少頁面元素種類

迎合現在的設計趨勢，去除所有裝飾元素，減少不必要元素，適當增加留白，保持頁面干凈、清晰。作為保險產品，為了達到清晰易懂的目的，增加大量圖片和圖形化內容，提高用戶的理解效率。

4. 統一視覺規范，提升工作效率

在完成主要頁面設計的同時，統一的視覺規范不僅能提高相關設計師的工作效率，也能更清晰的傳達給開發，提高整個團隊的效率，同時，也為App中其他業務線的設計師提供規范，保持App內不同產品風格一致。

規范化的輸出內容

不管是交互還是視覺，都需要在有限時間內提供規范化的輸出文檔，開發才能有條不紊的進行后續的工作。另外，設計文檔的管理及命名也非常重要，合理的命名及清晰化的文檔存儲能極大提高團隊協作效率。

及時走查與反饋

實際工作中，雖然文檔提供了絕大多數內容，但難免會有遺漏、修改或者是理解偏差，人與人的對接能夠保證及時的反饋，隨時了解開發進度，便于及時走查。一些特殊情況，還需要設計師坐到開發旁邊，實時溝通修改，直到達到標準。

工作流程中的溝通與協作

在中型或大型團隊中工作，工作流程規范與否直接影響產品的實現效率與結果。項目開始的時候由于有很多新加入的同事，互相之間的工作方式都需要互相溝通磨合，當時踩過的坑、犯過的錯很多，比如：需求的變更頻繁、正式郵件溝通與私下溝通不清晰、信息不同步等種種問題，好在所有同事都有一致的目標，大家都努力去溝通改善，流程已逐步規范，團隊也變得越來越高效。

App2.2及小版本迭代陸續上線，不僅得到了內部同事的肯定，也收獲了很多用戶的支持，為產品接近KPI目標增加了一些助力。

總結，是為了吸取經驗教訓，更好的指導今后的工作。改版過程中，我們發現了很多自身的不足，比如缺少數據、用研支持，設計流程和規范有待完善……但有了這次新的開始，相信我們以后能做的更好。

 

 

 

來自：http://mp.weixin.qq.com/s?__biz=MzIyMDUyNTEzMw==&mid=100000007&idx=1&sn=1450e64ce0626e4db170f2da17f8e4dd&chksm=17cbe62520bc6f335a67e8cc28b4292051503df2e880d4def16afb1fdf536f6e390fed3b1310&scene=20#rd