我們終于在本周更新了Spotify的系統(tǒng)圖標(biāo)，自從項目開始到最后我們共耗費(fèi)了四個多月，并為了保證整個產(chǎn)品和功能看起來協(xié)調(diào)，期間繪制了超過600個Icon。

重新設(shè)計一套系統(tǒng)Icon（此前已經(jīng)有三年沒有更新了）難度遠(yuǎn)遠(yuǎn)超出我們的預(yù)期，在設(shè)計它們的過程中，主要遇到了來自三個方面的挑戰(zhàn)。

視覺

剛開始我們打算設(shè)計一套比較傳統(tǒng)而又很大膽的系統(tǒng)Icon，從而更好的反映出品牌調(diào)性，同時又希望Icon看起來保持足夠的優(yōu)雅而又極簡。

核心的改進(jìn)：（1）保持行高一致性；（2）極簡又細(xì)致的輪廓；（3）實心的；（4）扁平和3D的結(jié)合

新Icon的形狀可以很好的反映出我們的圓型字體的特點(diǎn)：其更加尖銳又很清晰的表達(dá)Icon的整體樣式，從而創(chuàng)建具有Spotify特性的一套Icon，同時還確保這些Icon是以最簡單的形式繪制的，因為真正要考慮的是Icon背后所傳達(dá)的的含義具有最低識別度的限度。

在繪制icon時，我們從圓型字體的字符、字形中尋找靈感：（1）圓角和尖角的組合；（2）使用常用的形狀來定義icon的整體風(fēng)格

功能

Spotify在越來越多的平臺和屏幕尺寸上使用，隨著業(yè)務(wù)需求量的增長，我們需要考慮的是創(chuàng)建一個靈活的Icon庫來滿足需要。以前的Icon太過于復(fù)雜了，視覺上的隱喻對于用戶而言比較難以理解，并且在不同的屏幕尺寸上使用時有面臨著各種問題。相反，新的icon采用的簡單形狀組合使我們更加的容易在任何大小尺寸的屏幕和平面中使用。

我們在整個產(chǎn)品中確定常見的icon大小，并適當(dāng)?shù)恼{(diào)整了錨點(diǎn)位置以確保像素完美的切合屏幕，每個icon都創(chuàng)建了5個自定義的尺寸，在這套尺寸組合的基礎(chǔ)上，我們一共繪制單獨(dú)了繪制了600個icon

適應(yīng)性

最后的挑戰(zhàn)是確保每個icon都能在不同的頁面端口和平臺中適應(yīng)。剛開始時，我們會繪制Spotify中所有會使用到的icon，之后圍繞著其適用性來單獨(dú)設(shè)計每個icon，同時還需要花幾個星期在團(tuán)隊和工程師進(jìn)行交流，了解彼此之間的具體需求細(xì)節(jié)。

通過這種方式可以看到在不同的背景下，以前的Icon在視覺和交互上存在的一些問題，此外極簡的響應(yīng)式icon庫可以有助于幫助我們改善產(chǎn)品中的一些核心的交互方式，例如上圖例子中在新的導(dǎo)航欄中，使它們更加方便友好的訪問。

設(shè)計約束

然而，在這個項目過程中最值得學(xué)習(xí)的地方就是：我們需要強(qiáng)迫自己在非常具體的設(shè)計、技術(shù)與產(chǎn)品需要中時刻保持創(chuàng)造性和開放性。

我們探索了主頁中icon的形狀的不同變化，但是最終只選擇了最簡單的一個，并始終牢記這一點(diǎn)。

上面我們討論了技術(shù)和產(chǎn)品的限制，并以此為出發(fā)點(diǎn)而設(shè)計。在幫助用戶節(jié)省時間以及更易于識別上，Spotify會與其他的功能之間建立某種聯(lián)系：我們是做什么的，并幫助創(chuàng)建一種圖形語言，在視覺和功能之間保持平衡關(guān)系。

作者：Andrea Limjoco

https://medium.com/@andrealimjoco/redesigning-the-spotify-icon-suite-63f16853ba00#.5gea4cnm3