圖示演變之旅
2017年10月24日 Chris Dias,@chrisdias
總結
感謝所有熱情的反饋。這些反饋非常有用、令人痛苦,同時也很有趣。我們將穩定版(Stable)的橙色圖示改為藍色,並將預覽版(Insiders)保持為綠色。
![]()
你最喜歡的顏色是什麼?
在《巨蟒與聖盃》中,守橋人問蘭斯洛爵士三個問題,然後才允許他穿過死亡之橋。如果蘭斯洛爵士全部答對,他就可以透過。如果答錯,就會過早死去。蘭斯洛爵士在被問到最喜歡的顏色時回答了藍色,並被允許透過。
我們回答的是“橙色”。
致歉與透明度
首先,為延遲迴復表示歉意。我們一直在關注反饋,閱讀了每一條意見,並就下一步措施進行了“熱烈”的討論。我們相信我們有了一個合理的計劃,希望與大家分享,並期待就這個我們現在知道的極具爭議性的話題繼續對話。
為了完全透明,我們想分享一些歷史背景,我們認為這有助於理解我們當初是如何選擇橙色的。
歡迎加入這個大家庭
早在三月份,我們(更廣泛的 Visual Studio 團隊)就著手為我們生產的所有開發工具建立一種“家族”感覺。如果你再讀一遍那篇部落格文章,你會發現我們必須在一套“具有挑戰性”的公司品牌指南(例如,單一顏色)內進行工作。
把責任歸咎於指南很容易,但同時,擁有一套易於識別且廣為人知的產品是一種寶貴的資產。相反,我們承擔了在約束內工作的挑戰,同時也與公司上下合作,發展指南並解決我們面臨的問題。
當我們看到對第一套圖示的負面反饋時,我們一頭扎進了 VS Code 圖示的設計。我們希望設計出一個能讓廣大社群和我們自己都覺得即時、視覺上和情感上都具有吸引力的圖示。
這是一些早期的設計

除了右上角那個,這些設計都沒有真正讓我們眼前一亮。
![]()
這個被否決了,因為它不包含任何摺疊,而摺疊是家族設計的一個組成部分。回到畫板。
我們對無限標誌迭代了一段時間,例如

包括一個會讓你眼睛疼的設計

直到我們確定了當前的“魚”形,這個設計在數量有限的開發人員中測試良好。
旋轉
我們在 macOS(和 Linux)上有更多的設計自由,這就是為什麼我們在那裡有不同的圖示。雖然我們想保持相同的圖示形狀,但我們不限於單一顏色,並且可以透過將圖示安裝在深色面板上解決對比度問題。旋轉實際上遵循了蘋果設計指南。
話雖如此,關於旋轉過時以及安裝使得圖示在 Dock 中看起來比其他圖示小很多的反饋是完全合理的。
疲勞
到仲夏時,圖示疲勞感襲來。我們已經進行了如此多的迭代,最終我們決定採用當前的形狀,並將“預釋出”設計用於 Insiders。預釋出由右側和底部的雜湊框表示

雜湊框在尺寸較大時看起來不錯(例如在 PowerPoint 幻燈片上),但在尺寸較小時,框會非常模糊,圖示也會變得不清晰。我們迭代了許多白色、黑色以及不同深淺的橙色和綠色的輪廓。這裡將它們放大以檢視邊緣。

為了解決這個問題,我們還嘗試了 Windows 上的 macOS 版本,但這看起來格格不入,在小尺寸下甚至更糟。最後,我們決定放棄預釋出設計,轉而為 Insiders 使用不同的顏色。綠色是可用的,而且是現有的 Insiders 顏色,所以我們就採用了綠色。
瞧,Insiders 版

圖標占用
在 VS Code 出現之前,有 Visual Studio Monaco,這是我們完全基於瀏覽器的 Workbench,讓你可以即時編輯 Azure App Service Web 應用。由於它是一個線上產品並且我們需要一個圖示,我們“借用”了藍色的無限符號。
當我們第一次釋出 VS Code 時,一切都發生得很快,圖示是我們最不關心的問題。不管你對新圖示有什麼看法,舊圖示在桌面上和工作列及 Dock 中看起來都相當糟糕,它最初真的是 meant to be 一個網站圖示。
![]()
後來,當我們決定家族中的每個產品都有自己的顏色時,由於藍色已經被佔用,我們不得不拿出別的東西。此外,我們是從他們那裡偷來的,所以把它還回去似乎是正確的 :)
南瓜香料
此時,我們幾乎用完了家族調色盤中的顏色,只剩下了現在臭名昭著的橙色。有人擔心與 Sublime Text 的調色盤相似,但在我們測試時沒有人提出異議。老實說,我們對最新的 Sublime 使用摺疊綵帶感到更加驚訝。
如何快速產生大量反饋...
Insiders 版本使用橙色和綠色圖示大約兩個月,因為我們迭代了上面概述的問題,但並沒有太多負面反饋。
也許我們的擔憂是沒有根據的。也許使用者真的會喜歡新圖示,而對一些問題的焦慮不值得失眠。我們決定不對可能不是問題的事情大做文章。我們推出了更改,並在發行說明中對新圖示進行了少量提及。
然後問題和評論開始湧入。
![]()

每天都有額外的評論,每條評論都以新的有趣方式表達對新圖示的不滿。在前幾天之後,我們以為反饋會放緩,我們將能夠解決個別問題。事實證明,我們錯了。反饋源源不斷。新的問題被開啟,評論湧入的速度快於我們能回應的速度。Hacker News、Visual Studio Magazine。高中朋友在 Facebook 上發表評論。太棒了。
你是我的男孩,藍色!
這就把我們帶到了今天。
我們回顧了自從我們釋出 1.17.0(其中引入了穩定版橙色圖示)以來所有已開啟和評論的問題的全部反饋。很明顯,VS Code 的萬聖節釋出對很多人來說效果不佳,為此我們深表歉意。
巧合的是,在我寫這篇文章時,mdb07a很好地總結了 Windows 上的反饋和問題。我是在轉述,還有更多問題,但最主要的問題是
- 顏色變化太過劇烈,橙色與藍色是相反的顏色,使得以前看起來不錯的東西現在看起來很糟糕。
- 一個完全依賴透明度來建立負空間的扁平單色圖示使其辨識度降低,加劇了區分性問題。
- 新邊框又大又粗,比無限符號更引人注目。
在 macOS 上,最普遍的反饋是傾斜看起來過時,使得圖示的重要部分在 Dock 中看起來比其他圖示小。
所有這些反饋都敦促我們回去看看是否可以在繼續建立產品家族的同時做得更好。因此,我們將把穩定版圖示更改為備受喜愛的藍色。
![]()
這與狀態列和編輯器中的其他藍色搭配得很好

對於難以區分穩定版和預覽版的使用者,綠色和藍色搭配在一起效果更好。這是使用 Sim Daltonism 應用程式(紅色盲)檢視的兩個圖示

不可避免的是,我們將有多個產品共享顏色,所以我們不再擔心 VS Code 共享藍色。
我們正在探索為 macOS 使用非傾斜圖示,基於 @donysukardi 在這裡的評論。我們還不能說我們一定會這樣做,但我們正在探索它,無論如何,我們都會在該問題中釋出更新。
展望未來
從橙色改為藍色並不能解決所有問題,但這向前邁出了一步。我們確實希望圖示設計能夠繼續發展,並願意接受家族內 VS Code 的新想法。
我們吸取了關於如何演變和推出圖示更改的艱難教訓,所以謝謝你們。對於那些喜歡橙色圖示的人,我們希望你們更喜歡藍色。
謝謝,Chris