編輯導語：Spotify作為一個正版流媒體音樂服務平台自發布以來，綠色就是品牌的代表色。本文作者分享了有關Spotify綠色按鈕的設計思考，感興趣的小夥伴們一起來看看吧。

Spotify 自 2006 年發布第一個版本以來，綠色就成為品牌的一個組成部分。你可以在很多的地方找到它，比如 logo，它貫穿在整個用戶體驗中。不過最引人注目的還是産品内的許多按鈕。

在 2015 年，Spotify 發布了新的品牌，介紹了獨特的 Spotify Green。

尴尬的是，在我們意識到它不能用于産品界面之前，我們早已在很多地方都用了這個綠色。這就是為什麼我們後來開發了 UI 綠，一個稍微深一點的版本。在 UI 綠上放白色圖标或文字時，可以保證對比度和可用性。

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

一、尋找方案

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

為了達到 4.5:1 的對比度，我們需要将這些顔色變暗很多。其結果是，明顯不像是 Spotify 綠色，而更像是聖誕樹的顔色。

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

二、回到黑色

當我們嘗試用黑色作為我們的背景色時，我們測得黑色與 Spotify 綠色的對比度為 10.9:1，這對任何文本或圖标的可讀性都是一個巨大的改進。

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

三、改進本地化

我們不僅改進了顔色，我們也利用這個機會讓按鈕更好地适應本地化。

我們的舊按鈕文案在按鈕内留有比較大的間距，并且文案使用全字母大寫，這可能會導緻某些語言的本地化問題。因為 Spotify 支持 60 多種語言，這意味着會存在字符串太長，導緻按鈕内空間不夠的情況。

我們隻将按鈕文案首字母改成大寫，并将内間距減小後，最終将空間減少了 20-30％。這使我們能夠在相同的空間内顯示更多的文字，有更好的可讀性。

總而言之，我們使文字更容易閱讀、按鈕更容易被發現，讓我們的體驗與品牌更加一緻。

我們想要創造包容性的體驗，這就是為什麼我們一直針對殘疾人，做用戶研究。此外，随着我們的設計系統 Encore 的發布，我們能夠更高效地設計出适合每一個人的 App。

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

原文作者：Spotify Design

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

譯者：阿餅講設計

本文由 @阿餅講設計 翻譯發布于人人都是産品經理，未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部