我們終于在本周更新了Spotify的系統(tǒng)圖標(biāo),自從項(xiàng)目開(kāi)始到最后我們共耗費(fèi)了四個(gè)多月科吭,并為了保證整個(gè)產(chǎn)品和功能看起來(lái)協(xié)調(diào)囤萤,期間繪制了超過(guò)600個(gè)Icon。
重新設(shè)計(jì)一套系統(tǒng)Icon(此前已經(jīng)有三年沒(méi)有更新了)難度遠(yuǎn)遠(yuǎn)超出我們的預(yù)期褪测,在設(shè)計(jì)它們的過(guò)程中猴誊,主要遇到了來(lái)自三個(gè)方面的挑戰(zhàn)潦刃。
視覺(jué)
剛開(kāi)始我們打算設(shè)計(jì)一套比較傳統(tǒng)而又很大膽的系統(tǒng)Icon,從而更好的反映出品牌調(diào)性懈叹,同時(shí)又希望Icon看起來(lái)保持足夠的優(yōu)雅而又極簡(jiǎn)乖杠。
新Icon的形狀可以很好的反映出我們的圓型字體的特點(diǎn):其更加尖銳又很清晰的表達(dá)Icon的整體樣式,從而創(chuàng)建具有Spotify特性的一套Icon墨状,同時(shí)還確保這些Icon是以最簡(jiǎn)單的形式繪制的卫漫,因?yàn)檎嬲紤]的是Icon背后所傳達(dá)的的含義具有最低識(shí)別度的限度。
功能
Spotify在越來(lái)越多的平臺(tái)和屏幕尺寸上使用镐确,隨著業(yè)務(wù)需求量的增長(zhǎng)包吝,我們需要考慮的是創(chuàng)建一個(gè)靈活的Icon庫(kù)來(lái)滿(mǎn)足需要。以前的Icon太過(guò)于復(fù)雜了源葫,視覺(jué)上的隱喻對(duì)于用戶(hù)而言比較難以理解诗越,并且在不同的屏幕尺寸上使用時(shí)有面臨著各種問(wèn)題。相反息堂,新的icon采用的簡(jiǎn)單形狀組合使我們更加的容易在任何大小尺寸的屏幕和平面中使用嚷狞。
適應(yīng)性
最后的挑戰(zhàn)是確保每個(gè)icon都能在不同的頁(yè)面端口和平臺(tái)中適應(yīng)持隧。剛開(kāi)始時(shí)即硼,我們會(huì)繪制Spotify中所有會(huì)使用到的icon,之后圍繞著其適用性來(lái)單獨(dú)設(shè)計(jì)每個(gè)icon屡拨,同時(shí)還需要花幾個(gè)星期在團(tuán)隊(duì)和工程師進(jìn)行交流只酥,了解彼此之間的具體需求細(xì)節(jié)。
通過(guò)這種方式可以看到在不同的背景下呀狼,以前的Icon在視覺(jué)和交互上存在的一些問(wèn)題裂允,此外極簡(jiǎn)的響應(yīng)式icon庫(kù)可以有助于幫助我們改善產(chǎn)品中的一些核心的交互方式,例如上圖例子中在新的導(dǎo)航欄中哥艇,使它們更加方便友好的訪問(wèn)绝编。
設(shè)計(jì)約束
然而,在這個(gè)項(xiàng)目過(guò)程中最值得學(xué)習(xí)的地方就是:我們需要強(qiáng)迫自己在非常具體的設(shè)計(jì)、技術(shù)與產(chǎn)品需要中時(shí)刻保持創(chuàng)造性和開(kāi)放性十饥。
上面我們討論了技術(shù)和產(chǎn)品的限制秉氧,并以此為出發(fā)點(diǎn)而設(shè)計(jì)。在幫助用戶(hù)節(jié)省時(shí)間以及更易于識(shí)別上蜒秤,Spotify會(huì)與其他的功能之間建立某種聯(lián)系:我們是做什么的汁咏,并幫助創(chuàng)建一種圖形語(yǔ)言,在視覺(jué)和功能之間保持平衡關(guān)系作媚。
https://medium.com/@andrealimjoco/redesigning-the-spotify-icon-suite-63f16853ba00#.5gea4cnm3