編者按：新人設(shè)計師求職時經(jīng)常苦于項目經(jīng)驗匱乏，但如果你學(xué)會講述自己的重設(shè)計思路，成功率肯定能提高很多。今天這個實戰(zhàn)案例就為你全面展現(xiàn)了，如何講好一個重設(shè)計作品？

眾安ZED ?@lostbau：9月至11月，眾安AppV2.2及小版本迭代陸續(xù)上線，首頁、發(fā)現(xiàn)、我的和很多主要頁面全新改版，為用戶提供了全新的體驗。新版本在流程、功能、界面上都進行了極大優(yōu)化。

需求背景

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

1. 設(shè)計體驗不統(tǒng)一

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

2. 視覺風(fēng)格過時

版本的視覺形象混亂，設(shè)計語言陳舊。這次改版希望重新定義視覺風(fēng)格，打造全新的視覺設(shè)計系統(tǒng)。

3. 不滿足現(xiàn)有產(chǎn)品和業(yè)務(wù)要求

APP以往的改版更加注重業(yè)務(wù)需求，對整體架構(gòu)和體驗考慮較少。隨著更多功能和業(yè)務(wù)的拓展，我們需要重新梳理產(chǎn)品結(jié)構(gòu)和信息層級，以滿足未來的發(fā)展。

除了以上的問題，設(shè)計同事與產(chǎn)品一起收集了一系列體驗細節(jié)方面的需求。經(jīng)過整理歸納，我們確立了這次改版的設(shè)計目標(biāo)：產(chǎn)品結(jié)構(gòu)清晰化、重塑產(chǎn)品視覺形態(tài)、統(tǒng)一規(guī)范化、提升細節(jié)體驗

交互層面

?1. 精簡信息架構(gòu)

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

首頁應(yīng)該簡單清晰，對于有目標(biāo)用戶快速導(dǎo)流，模糊目標(biāo)用戶提供特色推薦及隨意瀏覽。發(fā)現(xiàn)模塊重在通過積分和資訊內(nèi)容增加用戶粘性；我的頁面突出理賠和服務(wù)相關(guān)功能。

2. 梳理信息層級

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

3. 統(tǒng)一頁面元素

設(shè)計過程中，我們根據(jù)使用場景統(tǒng)一頁面元素，將元素分為產(chǎn)品展示類，內(nèi)容展示類，文字信息展示類，操作與輸入類。統(tǒng)一流程中的文案描述、表現(xiàn)形式；統(tǒng)一列表信息、卡片信息布局及展示規(guī)則。

4. 增加細節(jié)體驗

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

視覺層面

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

眾安用戶

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

基于以上的用戶數(shù)據(jù)，以及眾安作為互聯(lián)網(wǎng)保險公司的特點，我們得到了一些視覺設(shè)計的方向：

經(jīng)過多次討論，我們將改版的視覺設(shè)計關(guān)鍵詞確定為：年輕、簡潔、輕快

根據(jù)設(shè)計關(guān)鍵詞，我們重新定義了色彩、圖標(biāo)及界面元素和整體視覺風(fēng)格。

1. 強調(diào)品牌色，減少輔助色，明晰色彩層級

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

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

2. 圖標(biāo)輕量化、統(tǒng)一化

改版過程中，我們對App內(nèi)圖標(biāo)進行了梳理和再設(shè)計。設(shè)計過程中，為了達到簡潔易識別的目標(biāo)，對圖標(biāo)的造型、風(fēng)格、質(zhì)感進行了很多探索。

為了打造產(chǎn)品的統(tǒng)一感，所有圖標(biāo)都沿用了相同的視覺元素，統(tǒng)一的圓角使圖標(biāo)有一定活潑感，不生硬，又保持了中性的感覺。

?另外，根據(jù)應(yīng)用場景定制不同的設(shè)計策略，如一級導(dǎo)航、分類導(dǎo)航、輔助圖標(biāo)。

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

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

4. 統(tǒng)一視覺規(guī)范，提升工作效率

在完成主要頁面設(shè)計的同時，統(tǒng)一的視覺規(guī)范不僅能提高相關(guān)設(shè)計師的工作效率，也能更清晰的傳達給開發(fā)，提高整個團隊的效率，同時，也為App中其他業(yè)務(wù)線的設(shè)計師提供規(guī)范，保持App內(nèi)不同產(chǎn)品風(fēng)格一致。

?設(shè)計跟進

?規(guī)范化的輸出內(nèi)容

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

及時走查與反饋

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

工作流程中的溝通與協(xié)作

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

用戶反饋

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

最后

?總結(jié)，是為了吸取經(jīng)驗教訓(xùn)，更好的指導(dǎo)今后的工作。改版過程中，我們發(fā)現(xiàn)了很多自身的不足，比如缺少數(shù)據(jù)、用研支持，設(shè)計流程和規(guī)范有待完善……但有了這次新的開始，相信我們以后能做的更好。

歡迎關(guān)注作者：眾安ZED原創(chuàng) （ 微信號zhongan_zed ）

「用一個案例教你學(xué)東西系列」

1. 智能對象丨《用一個實戰(zhàn)教程，讓你學(xué)會智能對象》
2. 直方圖丨《用一個后期教程，幫你學(xué)會利用直方圖破解圖像的方法》
3. 圖層樣式丨《做一個實戰(zhàn)教程，讓你學(xué)會圖層樣式9大技能》
4. 設(shè)計流程丨《用一個實戰(zhàn)案例，幫你認(rèn)識完整的設(shè)計流程》
5. 總監(jiān)思考方式丨《用一個簡單的體重記錄功能，揭秘UI設(shè)計總監(jiān)的思考過程》
6. 交互思考方式《用一個文本框，讓你學(xué)到交互設(shè)計師的邏輯思考方法》
7. 交互面試題丨《用一個框架，幫你學(xué)會這個最常見的交互面試題》
8. 數(shù)據(jù)驗證交互丨《用一個實戰(zhàn)案例，幫你學(xué)會用數(shù)據(jù)驗證產(chǎn)品設(shè)計》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量190萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com