上個月，我們發布了 Mac app 的 70 版，其中包含針對 macOS Big Sur 的重大 UI 更新。雖然我們的設計團隊花了很長時間研究如何在更新後的作業系統中讓 Sketch 看起來更棒，但他們還有另一個需要考慮的項目 — Mac app 的新圖示。
UI 需要數百個小時的工作才能達到像素級的完美，但重新設計一個可能每天都出現在你的 Dock（以及你的眼前）的圖示也不是一件小事。
本週我們與專案設計負責人 Prekesh 進行了訪談，了解他是如何為新時代重新構思 Sketch 圖示的，以及為什麼這絕不只是簡單地重新繪製我們著名的鑽石圖案。
實驗
重新設計一個在業界如此知名的圖示並非易事。對 Prekesh 來說，目標是在保留 Sketch 精髓的同時，嘗試一些新的東西。
他苦笑著說：「我記得我建立的第一個文件叫做『絕對不是白色方塊上的鑽石』。我們嘗試探索盡可能多的想法和選項，看看在新風格下能有什麼樣的成果。」他可不是在開玩笑。這個過程始於在 iPad 上使用 Apple Pencil 繪製的近 50 個概念。
他解釋說：「我只是開始 sketching 一些浮現在我腦海中的想法，無論多麼天馬行空。目標是集思廣益，看看哪些想法可行，哪些不可行，以及哪些可以繼續發展。」接下來，他將這些草圖導入 Sketch，並開始以更高的逼真度探索不同的方法。
Prekesh 在初步 sketching 階段嘗試了一些有趣的想法：「並非所有這些想法都能真正成為 app 圖示，但我將我最喜歡的一些想法帶入了 Sketch。」
當他在我們的內部 Slack 頻道發布更新時，大家開始感到興奮，他也從團隊中的其他設計師那裡獲得了許多有用的回饋。隨著 Prekesh 思考徹底改造 app 圖示的優缺點，一些更「天馬行空」的設計引起了大家的興趣。
在探索了一些整合向量編輯和鋼筆工具的方法後，Prekesh 發現隨著圖示縮小，這些想法會變得雜亂 — 此外，Sketch 不僅僅是一個向量編輯器。
Prekesh 很享受製作額外工具（例如鉛筆）的過程，但這些想法的色彩過於單調。
「我們嘗試過捨棄鑽石造型，但考量到它是我們品牌如此重要的元素，這麼做似乎有點傻，」他解釋道。「所以我們創造了一系列新的鑽石形狀——有些有透視感，有些沒有；有些面較多，有些則較少。」接下來的問題就是哪些效果最好，以及如何將這些元素與不同的背景融合。
他開始著手於以不同方式運用鑽石的想法。他採用了先前設計的俯視圖示，並稍作調整以使其融入圓角矩形形狀中。
取得平衡
在前景形狀和背景之間取得適當的平衡尤其困難。「我們很快就發現，圓角矩形背景和鑽石之間經常存在視覺上的衝突，」他說道。「我們知道需要找到一種方法讓它們相輔相成，而不是爭奪觀者的注意力。」
這些是首批將 Sketch UI 元素融入圖示的想法。Prekesh 嘗試在鑽石和側邊欄中加入一些透明度。
隨著概念設計的持續進行，視窗和鑽石的比喻持續存在。平衡背景和鑽石被證明是一項挑戰，這導致 Prekesh 略微簡化了背景。
隨著工作的推進，兩個領先方案脫穎而出，它們都採用了相似的背景——一個使用了非常接近我們目前鑽石的圖案，另一個則採用了更立體的3D 方式。
由於我們正在更新圖示，Prekesh 也製作了新的 3D 鑽石版本。您會在本頁的其他模型中看到這個略微傾斜的版本。
然後，他使用Blender 建立粗略的 3D 渲染圖，以作為光照參考。
最終，經過數週的內部測試以及來自公司各團隊的大量意見回饋，決定很明確。這將會是我們的最終圖示。
藉由將圖示背景簡化到最基本的元素，並在側邊欄中加入細微的透明度，我們認為它達到了良好的平衡。
細節決定成敗
對 Prekesh 來說，正是這些小細節讓我們的全新圖示與眾不同。「我喜歡它的細膩，」他說道。「其中有一些細節和改進更新了先前的圖示，但並沒有偏離讓 Sketch 圖示成為 Sketch 圖示的本質。」但在經過他所有天馬行空的草圖後，他會對我們最終選擇了一個讓人感到熟悉的設計而感到失望嗎？
「不會，在我們所有探索之後，這感覺才是正確的選擇，」他解釋道。「而且有一些我非常喜歡的細節。圓角矩形背景實際上是Sketch Big Sur 使用者介面的簡化呈現，左側的側邊欄具有透明度，這表示它會些微地呈現你桌布的背景顏色。」鑽石本身也獲得了一些改進——Prekesh 從頭重新繪製並重新上色，以改善對比度並使其更加鮮明。此外，一個新的、更深的陰影讓它感覺像是真的漂浮在 UI 的前面。
側邊欄中細微的透明度讓你的桌布色彩得以微微透出圖示。
Prekesh 表示，他的靈感來自 Big Sur 的新設計以及 Apple 自家的圖示——他非常喜歡這些圖示。「我喜歡這個新方向，」他說道。「對圖示採用圓角矩形的限制無疑會鼓勵人們更具創造性地運用這個空間。」
回顧重新設計如此知名圖示的過程，Prekesh 坦言他肩負著巨大的責任。「一開始感覺很不真實，因為在我的整個職業生涯中，我一直很敬佩先前圖示的設計師們，」他解釋道。「Emanuel Sá（我們的首席設計長）和 Marcelo Marfil（我們的設計總監）將探索和創造下一代應用程式圖示的任務託付給我，這感覺很棒。但壓力也很大！」他笑著說。
Sketch 電影宇宙
重新設計你每天都會在 Dock 中看到的圖示已經夠挑戰了，但这还不是旅程的終點。除了你使用的 Mac 應用程式版本外，我們還維護了幾個處於不同開發階段的測試版本。從品管團隊的「除錯」版本和早期的「實驗」版本，一直到我們的「私密測試」和「公開測試」版本，我們為每個版本都使用了不同的圖示，以便清楚地知道誰在測試哪些功能，以及測試的時間。
先前，每個發行版本都有一個不同顏色的鑽石。上排：正式版、測試版和私密測試版。下排：內部版、實驗版和除錯版。
以前，我們只是用不同顏色的鑽石來區分不同的版本。但對於 Big Sur，Prekesh 決定玩點不一樣的。「我想到了一些點子，讓圖示從『Xcode 建置』圖示一直到公開發行的圖示，都能呈現出視覺上的進展，並且講述一個故事，」他解釋說。「但这只有我們內部人員才能理解，對於這些版本來說，感覺不太合適。」
結果就是六個完全獨特的圖示，每個圖示都有自己的配色方案和風格。這讓 Prekesh 有機會將一些早期更天馬行空的想法付諸實現。
這個受到《駭客任務》啟發的設計差點就成為我們「除錯」版本的圖示。最終，團隊決定採用一個更接近 Xcode 藍色 macOS 圖示的設計。
「我們的『實驗』版本總是包含我們正在開發的最新功能，而 Glenn Hitchcock（設計團隊的另一位成員）想到了一個點子，試著展現它真的很『前衛』。所以，為什麼不把鑽石放到太空中呢？」
「實驗」版本圖示。在這種情況下，它確實名副其實。
那麼藏在幕後的圖示呢？「那個有點好笑。我們想在 Twitter 上預告新的圖示，所以我花了一天的大部分時間來繪製布料，而這原本只是要用在一張預告圖片上，」他笑著說。「在完成所有工作後，我意識到我們實際上可以把它用於我們的『私密測試』版本圖示。所以這幫我節省了一些時間！」
「Marcelo 特別告訴我不要在這上面花太多時間，因為它只是用於 Twitter，而我還有更多圖示的工作要做，」Prekesh 笑著說。
對 Prekesh 來說，挑戰在於賦予每個圖示獨特的個性，並確保它能傳達人們對該版本的預期。他對結果感到滿意。公平地說，它們在內部團隊中也獲得了很好的反響。
全員到齊。上排：正式版、測試版和私密測試版。下排：內部版、實驗版和除錯版。
「我猜有些人看到這些圖示後會想把它們用作他們主要的 Sketch 圖示，」他笑著說。「我能說的只有：我們正在招募人才——快來加入我們吧！」
我們很樂意讓您一窺 Sketch 幕後工作的點滴。您想看到什麼呢？請在社群媒體上告訴我們，我們會考慮將您的想法納入我們的下一個幕後花絮。現在，希望您喜歡使用最新的 Mac 版本。
