經(jīng)過幾個月的努力，全新的58App icon視覺升級已經(jīng)完成，新版icon給了大家全新的感受，鮮明的風格使其在眾多App中脫穎而出，那么是什么推動我們做了這次改版設(shè)計，設(shè)計過程中又經(jīng)歷了哪些故事呢？今天就來跟大家分享一下這次icon升級的點點滴滴。

改版前提

首先，我們需要認識一點，即icon對于一款App的重要性，它主要體現(xiàn)在“助理解，吸引力，趣味性”等方面，因此，我們的設(shè)計也必須要體現(xiàn)這些特點。

前期調(diào)研

改版之前，我們進行了一定的用戶調(diào)研，用戶普遍反饋“用色略顯沉悶，缺乏吸引力，圖形辨識度不高”等問題，這與我們的改版想法不謀而合。

明確方向

基于用戶反饋的問題，以及對產(chǎn)品的理解，我們明確了此次改版的方向和目的：

1. 提高圖標辨識度，幫助用戶更加直觀的認識產(chǎn)品和功能；
2. 用色上更加大膽，使產(chǎn)品充滿活力和吸引力；
3. 努力與大眾App風格拉開差距，保持獨特性。

初期風格嘗試

設(shè)計初期，我們進行了眾多不同風格的嘗試，雖然略顯不成熟，但也為最終的成品提供了很多靈感：

風格確定

經(jīng)過不斷的風格嘗試和自我否定之后，我們終于確定了主icon的設(shè)計風格：

設(shè)計特點?

1.彩

基于58Logo的品牌色，將四種色彩元素運用到icon里，單個icon采用單一色系，這樣保證整體性的同時又將每個icon進行突出。

2.方

方形的icon可以增加體量感，提升App的辨識度，同時使得整體性更強。

3.透

icon基本采用兩層疊加的展現(xiàn)形式，深色層在底部，淺色層置于頂部且設(shè)置透明度，這樣的透明度疊加效果，為每一個icon增加了呼吸感，提供了生命力。

設(shè)計過程

設(shè)計的過程遵循了以下六個設(shè)計點，分別是形象、造型、表達、風格、調(diào)整及配色。

形象：顧名思義，就是能夠代表產(chǎn)品內(nèi)容的意向，一個準確生動的形象，十分有助于icon的可識別性。比如用購物袋表達二手物品，用貓咪表達寵物等等。

造型：造型是icon設(shè)計的筋骨，就好象一個人是健康的還是有缺陷的。一個icon有沒有美感很大程度就取決于造型是否優(yōu)美和諧。icon造型以方形為主，統(tǒng)一圓角尺寸，造型盡量做到細致考究。

表達：在表達定義的時候，首先要符合一般使用的行為習慣，UI本身的意義就在于附加到“功能”上的一個表現(xiàn)層，具備最直接的操作和交互的功能。

風格：彩，方，透。

調(diào)整：圖標設(shè)計完成之后要進行細節(jié)的調(diào)整。

配色：配色采用的是58Logo的四種配色，在明度和純度上加以調(diào)整，使各個圖標搭配起來更加和諧。

大類頁icon

主icon視覺風格確認了，接下來就是把這套設(shè)計語言推行到大類頁的icon中來。這時，我們把握的原則是icon在體量感上要低于首頁的主icon，做出區(qū)分度的同時，要做好大體的統(tǒng)一。

設(shè)計特點?

1.彩

色彩純度明度較主icon均作出調(diào)整，降低量級。

2.方

方形的icon可以增加體量感和整體性。

3.疊

保留疊加效果，但去掉了透明度的變化。

通過新舊版本的對比可以更直觀的發(fā)現(xiàn)，新版的icon彩色的搭配更加引人注目，造型上也更加考究。

小工具icon

在接下來就是小工具icon的設(shè)計，這類的icon是整個app中第三層級的icon，所以在視覺上需要與主icon做明顯的區(qū)分，以拉開主次。

設(shè)計特點?

1.線

線性圖標，量級繼續(xù)降低。

2.方

方形icon統(tǒng)一。

3.素

單色運用。

寫在最后

每一次圖標設(shè)計都是一次挑戰(zhàn)，要表意明確更要注重美感，風格上還要盡量獨樹一幟。統(tǒng)一性，差異性，識別性，趣味性，缺一不可。設(shè)計的過程也是一個不斷挖坑和填坑的過程，不經(jīng)過反復的思考和打磨，呈現(xiàn)出來的效果就不會理想。

不過這一切的折磨也好，挑戰(zhàn)也好，在最終成型的那一刻都變得微不足道了。呈現(xiàn)出最佳的視覺效果和體驗感受才是最重要的。

畢竟，每一個icon都是從設(shè)計師手上跳出的精靈。

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶體驗設(shè)計中心（微信公眾號@58UXD），作者@ 孫非

題圖來自PEXELS，基于CC0協(xié)議