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

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

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

尷尬的是，在我們意識(shí)到它不能用于產(chǎn)品界面之前，我們?cè)缫言诤芏嗟胤蕉加昧诉@個(gè)綠色。這就是為什么我們后來開發(fā)了 UI 綠，一個(gè)稍微深一點(diǎn)的版本。在 UI 綠上放白色圖標(biāo)或文字時(shí)，可以保證對(duì)比度和可用性。

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

一、尋找方案

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

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

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

二、回到黑色

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

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

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

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

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

我們只將按鈕文案首字母改成大寫，并將內(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)你為超過 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)載

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