58UXD：經(jīng)過幾個月的努力，全新的58App icon視覺升級已經(jīng)完成，新版icon給了大家全新的感受，鮮明的風(fēng)格使其在眾多App中脫穎而出，那么是什么推動我們做了這次改版設(shè)計，設(shè)計過程中又經(jīng)歷了哪些故事呢？今天就來跟大家分享一下這次icon升級的點(diǎn)點(diǎn)滴滴。
首先，我們需要認(rèn)識一點(diǎn)，即icon對于一款A(yù)pp的重要性，它主要體現(xiàn)在“助理解，吸引力，趣味性”等方面，因此，我們的設(shè)計也必須要體現(xiàn)這些特點(diǎn)。
改版之前，我們進(jìn)行了一定的用戶調(diào)研，用戶普遍反饋“用色略顯沉悶，缺乏吸引力，圖形辨識度不高”等問題，這與我們的改版想法不謀而合。
基于用戶反饋的問題，以及對產(chǎn)品的理解，我們明確了此次改版的方向和目的：
設(shè)計初期，我們進(jìn)行了眾多不同風(fēng)格的嘗試，雖然略顯不成熟，但也為最終的成品提供了很多靈感：
經(jīng)過不斷的風(fēng)格嘗試和自我否定之后，我們終于確定了主icon的設(shè)計風(fēng)格：
設(shè)計特點(diǎn)
基于58Logo的品牌色，將四種色彩元素運(yùn)用到icon里，單個icon采用單一色系，這樣保證整體性的同時又將每個icon進(jìn)行突出。
方形的icon可以增加體量感，提升App的辨識度，同時使得整體性更強(qiáng)。
icon基本采用兩層疊加的展現(xiàn)形式，深色層在底部，淺色層置于頂部且設(shè)置透明度，這樣的透明度疊加效果，為每一個icon增加了呼吸感，提供了生命力。
設(shè)計的過程遵循了以下六個設(shè)計點(diǎn)，分別是形象、造型、表達(dá)、風(fēng)格、調(diào)整及配色。
形象：顧名思義，就是能夠代表產(chǎn)品內(nèi)容的意向，一個準(zhǔn)確生動的形象，十分有助于icon的可識別性。比如用購物袋表達(dá)二手物品，用貓咪表達(dá)寵物等等。
造型：造型是icon設(shè)計的筋骨，就好像一個人是健康的還是有缺陷的。一個icon有沒有美感很大程度就取決于造型是否優(yōu)美和諧。icon造型以方形為主，統(tǒng)一圓角尺寸，造型盡量做到細(xì)致考究。
表達(dá)：在表達(dá)定義的時候，首先要符合一般使用的行為習(xí)慣，UI本身的意義就在于附加到“功能”上的一個表現(xiàn)層，具備最直接的操作和交互的功能。
風(fēng)格：彩，方，透。
調(diào)整：圖標(biāo)設(shè)計完成之后要進(jìn)行細(xì)節(jié)的調(diào)整。
配色：配色采用的是58Logo的四種配色，在明度和純度上加以調(diào)整，使各個圖標(biāo)搭配起來更加和諧。
主icon視覺風(fēng)格確認(rèn)了，接下來就是把這套設(shè)計語言推行到大類頁的icon中來。這時，我們把握的原則是icon在體量感上要低于首頁的主icon，做出區(qū)分度的同時，要做好大體的統(tǒng)一。
設(shè)計特點(diǎn)
色彩純度明度較主icon均作出調(diào)整，降低量級。
方形的icon可以增加體量感和整體性。
保留疊加效果，但去掉了透明度的變化。
通過新舊版本的對比可以更直觀的發(fā)現(xiàn)，新版的icon彩色的搭配更加引人注目，造型上也更加考究。
在接下來就是小工具icon的設(shè)計，這類的icon是整個app中第三層級的icon，所以在視覺上需要與主icon做明顯的區(qū)分，以拉開主次。
設(shè)計特點(diǎn)
線性圖標(biāo)，量級繼續(xù)降低。
方形icon統(tǒng)一。
單色運(yùn)用。
每一次圖標(biāo)設(shè)計都是一次挑戰(zhàn)，要表意明確更要注重美感，風(fēng)格上還要盡量獨(dú)樹一幟。統(tǒng)一性，差異性，識別性，趣味性，缺一不可。設(shè)計的過程也是一個不斷挖坑和填坑的過程，不經(jīng)過反復(fù)的思考和打磨，呈現(xiàn)出來的效果就不會理想。
不過這一切的折磨也好，挑戰(zhàn)也好，在最終成型的那一刻都變得微不足道了。呈現(xiàn)出最佳的視覺效果和體驗感受才是最重要的。
畢竟，每一個icon都是從設(shè)計師手上跳出的精靈。
