編輯導(dǎo)語：Spotify作為一個正版流媒體音樂服務(wù)平臺自發(fā)布以來，綠色就是品牌的代表色。本文作者分享了有關(guān)Spotify綠色按鈕的設(shè)計思考，感興趣的小伙伴們一起來看看吧。

Spotify 自 2006 年發(fā)布第一個版本以來，綠色就成為品牌的一個組成部分。你可以在很多的地方找到它，比如 logo，它貫穿在整個用戶體驗(yàn)中。不過最引人注目的還是產(chǎn)品內(nèi)的許多按鈕。

在 2015 年，Spotify 發(fā)布了新的品牌，介紹了獨(dú)特的 Spotify Green。

尷尬的是，在我們意識到它不能用于產(chǎn)品界面之前，我們早已在很多地方都用了這個綠色。這就是為什么我們后來開發(fā)了 UI 綠，一個稍微深一點(diǎn)的版本。在 UI 綠上放白色圖標(biāo)或文字時，可以保證對比度和可用性。

然而，我們最近決定進(jìn)一步提高綠色按鈕的對比度。如果對比度不夠高，可能會對那些視力低下或有視力障礙的用戶造成很大的不便。如果在光線不好的地方，視力正常的人也會看不清。

一、尋找方案

事實(shí)證明，讓我們的綠色與白色完美結(jié)合并不容易。我們探索了不同的解決方案，比如用高對比度的綠色來襯托白色的文字或圖標(biāo)，或者完全不用我們中意的綠色。但這兩種方法都不太行得通。

為了達(dá)到 4.5:1 的對比度，我們需要將這些顏色變暗很多。其結(jié)果是，明顯不像是 Spotify 綠色，而更像是圣誕樹的顏色。

我們對這個綠色并不滿意，與我們的品牌顏色相去甚遠(yuǎn)，我們需要想出更好的辦法。

二、回到黑色

當(dāng)我們嘗試用黑色作為我們的背景色時，我們測得黑色與 Spotify 綠色的對比度為 10.9:1，這對任何文本或圖標(biāo)的可讀性都是一個巨大的改進(jìn)。

這意味著我們將能夠使用原來的 Spotify 綠色，而不是 UI 綠。在灰色背景上時，Spotify 綠色有 9.7:1 的對比度，比 UI 綠的 7.2:1 要好。

三、改進(jìn)本地化

我們不僅改進(jìn)了顏色，我們也利用這個機(jī)會讓按鈕更好地適應(yīng)本地化。

我們的舊按鈕文案在按鈕內(nèi)留有比較大的間距，并且文案使用全字母大寫，這可能會導(dǎo)致某些語言的本地化問題。因?yàn)?Spotify 支持 60 多種語言，這意味著會存在字符串太長，導(dǎo)致按鈕內(nèi)空間不夠的情況。

我們只將按鈕文案首字母改成大寫，并將內(nèi)間距減小后，最終將空間減少了 20-30％。這使我們能夠在相同的空間內(nèi)顯示更多的文字，有更好的可讀性。

總而言之，我們使文字更容易閱讀、按鈕更容易被發(fā)現(xiàn)，讓我們的體驗(yàn)與品牌更加一致。

我們想要創(chuàng)造包容性的體驗(yàn)，這就是為什么我們一直針對殘疾人，做用戶研究。此外，隨著我們的設(shè)計系統(tǒng) Encore 的發(fā)布，我們能夠更高效地設(shè)計出適合每一個人的 App。

當(dāng)你為超過 3.56 億人而設(shè)計時，設(shè)計的包容性就很重要。即使是一個相對較小的變化，也能大大改善許多人的生活。

原文作者：Spotify Design

原文鏈接：https://spotify.design/article/better-in-black-rethinking-our-most-important-buttons

譯者：阿餅講設(shè)計

本文由 @阿餅講設(shè)計 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

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