58UXD：經過幾個月的努力，全新的58App icon視覺升級已經完成，新版icon給了大家全新的感受，鮮明的風格使其在眾多App中脫穎而出，那么是什么推動我們做了這次改版設計，設計過程中又經歷了哪些故事呢？今天就來跟大家分享一下這次icon升級的點點滴滴。
改版前提
首先，我們需要認識一點，即icon對于一款App的重要性，它主要體現在“助理解，吸引力，趣味性”等方面，因此，我們的設計也必須要體現這些特點。
前期調研
改版之前，我們進行了一定的用戶調研，用戶普遍反饋“用色略顯沉悶，缺乏吸引力，圖形辨識度不高”等問題，這與我們的改版想法不謀而合。
明確方向
基于用戶反饋的問題，以及對產品的理解，我們明確了此次改版的方向和目的：
- 提高圖標辨識度，幫助用戶更加直觀的認識產品和功能
- 用色上更加大膽，使產品充滿活力和吸引力
- 努力與大眾App風格拉開差距，保持獨特性
初期風格嘗試
設計初期，我們進行了眾多不同風格的嘗試，雖然略顯不成熟，但也為最終的成品提供了很多靈感：
風格確定
經過不斷的風格嘗試和自我否定之后，我們終于確定了主icon的設計風格：
設計特點
- 彩
基于58Logo的品牌色，將四種色彩元素運用到icon里，單個icon采用單一色系，這樣保證整體性的同時又將每個icon進行突出。
- 方
方形的icon可以增加體量感，提升App的辨識度，同時使得整體性更強。
- 透
icon基本采用兩層疊加的展現形式，深色層在底部，淺色層置于頂部且設置透明度，這樣的透明度疊加效果，為每一個icon增加了呼吸感，提供了生命力。
設計過程
設計的過程遵循了以下六個設計點，分別是形象、造型、表達、風格、調整及配色。
形象：顧名思義，就是能夠代表產品內容的意向，一個準確生動的形象，十分有助于icon的可識別性。比如用購物袋表達二手物品，用貓咪表達寵物等等。
造型：造型是icon設計的筋骨，就好像一個人是健康的還是有缺陷的。一個icon有沒有美感很大程度就取決于造型是否優美和諧。icon造型以方形為主，統一圓角尺寸，造型盡量做到細致考究。
表達：在表達定義的時候，首先要符合一般使用的行為習慣，UI本身的意義就在于附加到“功能”上的一個表現層，具備最直接的操作和交互的功能。
風格：彩，方，透。
調整：圖標設計完成之后要進行細節的調整。
配色：配色采用的是58Logo的四種配色，在明度和純度上加以調整，使各個圖標搭配起來更加和諧。
大類頁icon
主icon視覺風格確認了，接下來就是把這套設計語言推行到大類頁的icon中來。這時，我們把握的原則是icon在體量感上要低于首頁的主icon，做出區分度的同時，要做好大體的統一。
設計特點
- 彩
色彩純度明度較主icon均作出調整，降低量級。
- 方
方形的icon可以增加體量感和整體性。
- 疊
保留疊加效果，但去掉了透明度的變化。
通過新舊版本的對比可以更直觀的發現，新版的icon彩色的搭配更加引人注目，造型上也更加考究。
小工具icon
在接下來就是小工具icon的設計，這類的icon是整個app中第三層級的icon，所以在視覺上需要與主icon做明顯的區分，以拉開主次。
設計特點
- 線
線性圖標，量級繼續降低。
- 方
方形icon統一。
- 素
單色運用。
總結
每一次圖標設計都是一次挑戰，要表意明確更要注重美感，風格上還要盡量獨樹一幟。統一性，差異性，識別性，趣味性，缺一不可。設計的過程也是一個不斷挖坑和填坑的過程，不經過反復的思考和打磨，呈現出來的效果就不會理想。
不過這一切的折磨也好，挑戰也好，在最終成型的那一刻都變得微不足道了。呈現出最佳的視覺效果和體驗感受才是最重要的。
畢竟，每一個icon都是從設計師手上跳出的精靈。
歡迎關注58UXD 的公眾號：
「最近有哪些值得關注的改版？」
【優設網 原創文章 投稿郵箱：yuan@uisdc.com】
================明星欄目推薦================
優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。
設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
標志設計標準教程
已累計誕生 729 位幸運星
發表評論
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓