上個月，Sketch發(fā)布了Mac應用程序的版本Sketch 70，其中包含針對macOS Big Sur的UI更新。盡管Sketch的設計團隊花了很長時間研究最佳方法，以使Sketch在更新的OS中看起來很棒，但他們還有另一個項目需要考慮-Mac應用程序的新圖標。 

UI設計師需要數(shù)百小時的工作才能獲得完美的像素體驗，但是要重新設計一個可能整天都放在Dock中（并且在您眼前）的圖標，不是一件容易的事。

本周，我們與項目的設計負責人Prekesh進行了座談，以了解他如何重新構想一個新時代的Sketch圖標，以及為什么它從來沒有像重新創(chuàng)建我們著名的sketch鉆石圖標那樣簡單。

重塑

整個行業(yè)內(nèi)如此知名的圖標絕非易事。對于Prekesh，目標是嘗試做一些新的事情，同時保持Sketch的自身特色。 

他笑著說：“我想我的第一份圖標設計文件絕對不是白盒子上的鉆石。” “我們嘗試探索盡可能多的想法和選擇，以了解我們可以使用Big Sur的新樣式做什么?！?他不是在開玩笑。該過程從他在iPad上使用Apple Pencil繪制的近50個概念開始。

他解釋說：“無論多么古怪的念頭我都有想過?！?“目標是將想法都拿出來，看看有什么是可行的，哪些是不可行的?！?接下來，他將這些圖紙放入Sketch中，并開始以更高的保真度探索不同的方法。

在最初的素描階段，Prekesh有一些有趣的探索想法：“并不是所有這些想法實際上都能真正變成應用程序圖標，但是我將最喜歡的圖標帶到了Sketch中?！?/span>

當他在我們內(nèi)部的Slack頻道發(fā)布更新后，新的點子越來越多，這讓他從團隊中的其他設計師那里獲得了大量有用的反饋。普雷克斯（Prekesh）考慮了徹底重塑該應用程序圖標的利弊。

在探索了將矢量編輯和鋼筆圖形結合的設計后，Prekesh發(fā)現(xiàn)，隨著圖標的縮小，這些想法變得混亂了-此外，Sketch遠不止矢量編輯這一項功能。

Prekesh在制作諸如鉛筆之類的額外工具上也花費了大量時間，但是這些想法太過單一了。

他解釋說：“我們嘗試過遠離鉆石，但考慮到它是我們品牌的重要組成部分，所以放棄了這樣的想法?！?“因此，我們創(chuàng)建了一堆新的鉆石形狀-有些具有透視圖，有些沒有透視圖；有些面多一些，有些少一些?！?于是，這就成了一個問題，如何讓他們與背景有機的結合起來。

他開始轉向使用鉆石的想法，但方式不同。通過采用舊的自上而下的替代圖標，他進行了研究并對其進行了調(diào)整，以使其適合于松鼠形狀。

平衡

在前景形狀和背景之間取得平衡非常困難。他說：“我們很快發(fā)現(xiàn)，在圓角矩形背景和鉆石之間經(jīng)常存在視覺上的沖突感?！?nbsp;

這些是第一個在圖標中包含Sketch UI元素的想法。普雷克斯（Prekesh）嘗試在菱形和側邊欄中增加一些透明度。

隨著概念工作的不斷進行，窗戶和鉆石的隱喻一直存在。平衡背景和菱形被證明是一個挑戰(zhàn)，這讓Prekesh略微簡化了背景。

隨著工作的進展，兩個設計映入了我們的眼簾，兩者的背景相似-一個使用與我們目前的鉆石非常接近的元素，另一個使用更立體的方法。

自從圖標重繪工作開始以來，Prekesh還致力于開發(fā)新的3D鉆石版本。您將在此頁面上的其他所有模型中看到這個稍微傾斜的變體。

然后，他使用Blender創(chuàng)建了粗糙的3D渲染。

最后，經(jīng)過數(shù)周的內(nèi)部測試以及公司各團隊的大量投入，這一決定很明確。這將是我們的最終圖標：

通過將圖標的背景還原為基本內(nèi)容，并在側邊欄上添加微妙的透明度，我們認為它實現(xiàn)了很好的平衡。

一切都在細節(jié)中

對于Prekesh來說，正是這些小細節(jié)使我們的新圖標變得與眾不同。他說：“我喜歡它的微妙之處?！?“有些細節(jié)和迭代會更新前一個圖標，但這不是非常大的變動。” 但是，在他繪制了所有古怪的草圖之后，他是否對我們最終設計出讓人感到熟悉的設計感到失望？他解釋說：“并非如此。經(jīng)過我們的所有探索，這是正確的選擇?！?“而且我喜歡一些細微的細節(jié)。圓角矩形背景實際上是Sketch的Big Sur用戶界面的簡化表示，左側的側邊欄具有透明性，這意味著它會略微呈現(xiàn)墻紙的背景顏色。” 鉆石本身也是一種傳承-Prekesh對圖標進行了重新繪制，以改善對比度并使其更具活力。另外，新的，更深的陰影使它感覺好像真的在UI前面浮動。

側邊欄中的微妙透明性意味著您可以通過圖標觀察到墻紙的顏色。

普雷克斯（Prekesh）說，他從Big Sur的新設計以及Apple自家的圖標中汲取了靈感。他說：“我喜歡這個新方向。” “對圖標的圓角矩形的限制無疑將鼓勵人們更創(chuàng)造性地使用該空間。” 

在重塑這樣一個著名圖標的過程中，Prekesh承認他感到肩負著巨大的責任。他解釋說：“起初想的有點多，總想做大的改變?！?“對于Emanuel（Sá，我們的首席設計官）和Marcelo（Marfil，我們的設計總監(jiān)）委托我探索和創(chuàng)建應用程序圖標的下一個版本，我感到非常棒。但是壓力實在是不小！” 他笑了。

Sketch隱藏圖標展示

除了你在Dock中每天看到的金黃色鉆石圖標，以及您使用的Mac應用程序的版本，我們還維護多個測試版本，每個版本都處于不同的開發(fā)階段。從質(zhì)量檢查小組的Debug版本和早期的實驗版本，一直到我們的Private和Public Beta版本，我們對每個版本的程序使用不同的圖標。

以前，每個發(fā)行版本都有不同的彩色鉆石。第一行：Release，Beta和Private。第二行：內(nèi)部版本，實驗版本和調(diào)試版本。

以前，我們只是使用不同顏色的鉆石來表示不同的版本。但是對于Big Sur來說，普雷克斯（Prekesh）決定找點樂子。他解釋說：“我想到了從Xcode build圖標一直到公開發(fā)布圖標的文字視覺上的進步，并且它們講述了一個故事?！?nbsp;

結果是六個完全獨特的圖標，每個圖標都有自己的配色方案和風格。對于Prekesh來說，這是一個將這些早期的，更古怪的想法變?yōu)楝F(xiàn)實的機會。

這種受Matrix啟發(fā)的設計幾乎成為了Debug版本的圖標。最后，團隊決定設計一種更接近Xcode的藍色macOS圖標的設計。

“我們的實驗版本始終包含我們正在開發(fā)的最新功能，Glenn （設計團隊的另一位成員）想到嘗試一些表明它確實在“那里”的東西。為什么不把鉆石放到太空呢？”于是，太空版本的鉆石出現(xiàn)了。

實驗版本圖標，它確實做到了名副其實

那么隱藏在窗簾后面的圖標呢？“這件事說起來挺有趣，我們原本想在Twitter上發(fā)布這個新圖標，所以我花了整整一天的時間畫出要用于預告片圖像的布料，”他笑著說?！巴瓿伤羞@些工作后，我意識到我們可以將其實際用于Private Beta圖標。這樣就節(jié)省了我一些時間！”

“ Marcelo明確地告訴我不要花太多時間，因為那是給Twitter使用的，但我仍然需要在圖標上做更多的工作，” Prekesh笑著說。

對于Prekesh而言，挑戰(zhàn)在于為每個圖標賦予其自己的身份-并確保它傳達了人們對該版本的期望。

第一行：Release，Beta和Private。第二行：內(nèi)部版本，實驗版本和調(diào)試版本。

相關閱讀文章推薦：

本文譯自：https://www.sketch.com/blog/2020/12/02/how-we-redesigned-the-sketch-icon-for-big-sur/

譯者：靜電