用一個實戰案例,幫你學會講述重設計作品的思路

編者按:新人設計師求職時經常苦于項目經驗匱乏,但如果你學會講述自己的重設計思路,成功率肯定能提高很多。今天這個實戰案例就為你全面展現了,如何講好一個重設計作品?

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

用一個實戰案例,幫你學會講述重設計作品的思路

需求背景

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

1. 設計體驗不統一

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

2. 視覺風格過時

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

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

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目標增加了一些助力。

用一個實戰案例,幫你學會講述重設計作品的思路

最后

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

歡迎關注作者:眾安ZED原創 ( 微信號zhongan_zed

「用一個案例教你學東西系列」

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

【優設網 原創文章 投稿郵箱:yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/
設計微博:擁有粉絲量190萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

收藏 43
點贊 1

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。