Spotify 對(duì)于「綠色」按鈕的一些思考
編輯導(dǎo)語(yǔ):Spotify作為一個(gè)正版流媒體音樂(lè)服務(wù)平臺(tái)自發(fā)布以來(lái),綠色就是品牌的代表色。本文作者分享了有關(guān)Spotify綠色按鈕的設(shè)計(jì)思考,感興趣的小伙伴們一起來(lái)看看吧。
Spotify 自 2006 年發(fā)布第一個(gè)版本以來(lái),綠色就成為品牌的一個(gè)組成部分。你可以在很多的地方找到它,比如 logo,它貫穿在整個(gè)用戶體驗(yàn)中。不過(guò)最引人注目的還是產(chǎn)品內(nèi)的許多按鈕。
在 2015 年,Spotify 發(fā)布了新的品牌,介紹了獨(dú)特的 Spotify Green。
尷尬的是,在我們意識(shí)到它不能用于產(chǎn)品界面之前,我們?cè)缫言诤芏嗟胤蕉加昧诉@個(gè)綠色。這就是為什么我們后來(lái)開(kāi)發(fā)了 UI 綠,一個(gè)稍微深一點(diǎn)的版本。在 UI 綠上放白色圖標(biāo)或文字時(shí),可以保證對(duì)比度和可用性。
然而,我們最近決定進(jìn)一步提高綠色按鈕的對(duì)比度。如果對(duì)比度不夠高,可能會(huì)對(duì)那些視力低下或有視力障礙的用戶造成很大的不便。如果在光線不好的地方,視力正常的人也會(huì)看不清。
一、尋找方案
事實(shí)證明,讓我們的綠色與白色完美結(jié)合并不容易。我們探索了不同的解決方案,比如用高對(duì)比度的綠色來(lái)襯托白色的文字或圖標(biāo),或者完全不用我們中意的綠色。但這兩種方法都不太行得通。
為了達(dá)到 4.5:1 的對(duì)比度,我們需要將這些顏色變暗很多。其結(jié)果是,明顯不像是 Spotify 綠色,而更像是圣誕樹(shù)的顏色。
我們對(duì)這個(gè)綠色并不滿意,與我們的品牌顏色相去甚遠(yuǎn),我們需要想出更好的辦法。
二、回到黑色
當(dāng)我們嘗試用黑色作為我們的背景色時(shí),我們測(cè)得黑色與 Spotify 綠色的對(duì)比度為 10.9:1,這對(duì)任何文本或圖標(biāo)的可讀性都是一個(gè)巨大的改進(jìn)。
這意味著我們將能夠使用原來(lái)的 Spotify 綠色,而不是 UI 綠。在灰色背景上時(shí),Spotify 綠色有 9.7:1 的對(duì)比度,比 UI 綠的 7.2:1 要好。
三、改進(jìn)本地化
我們不僅改進(jìn)了顏色,我們也利用這個(gè)機(jī)會(huì)讓按鈕更好地適應(yīng)本地化。
我們的舊按鈕文案在按鈕內(nèi)留有比較大的間距,并且文案使用全字母大寫(xiě),這可能會(huì)導(dǎo)致某些語(yǔ)言的本地化問(wèn)題。因?yàn)?Spotify 支持 60 多種語(yǔ)言,這意味著會(huì)存在字符串太長(zhǎng),導(dǎo)致按鈕內(nèi)空間不夠的情況。
我們只將按鈕文案首字母改成大寫(xiě),并將內(nèi)間距減小后,最終將空間減少了 20-30%。這使我們能夠在相同的空間內(nèi)顯示更多的文字,有更好的可讀性。
總而言之,我們使文字更容易閱讀、按鈕更容易被發(fā)現(xiàn),讓我們的體驗(yàn)與品牌更加一致。
我們想要?jiǎng)?chuàng)造包容性的體驗(yàn),這就是為什么我們一直針對(duì)殘疾人,做用戶研究。此外,隨著我們的設(shè)計(jì)系統(tǒng) Encore 的發(fā)布,我們能夠更高效地設(shè)計(jì)出適合每一個(gè)人的 App。
當(dāng)你為超過(guò) 3.56 億人而設(shè)計(jì)時(shí),設(shè)計(jì)的包容性就很重要。即使是一個(gè)相對(duì)較小的變化,也能大大改善許多人的生活。
原文作者:Spotify Design
原文鏈接:https://spotify.design/article/better-in-black-rethinking-our-most-important-buttons
譯者:阿餅講設(shè)計(jì)
本文由 @阿餅講設(shè)計(jì) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash,基于 CC0 協(xié)議
記得有個(gè) 測(cè)試前景色 背景色對(duì)比度的網(wǎng)站
這個(gè)可以測(cè)試 https://accessible-colors.com/