上個(gè)月，Sketch發(fā)布了Mac應(yīng)用程序的版本Sketch 70，其中包含針對(duì)macOS Big Sur的UI更新。盡管Sketch的設(shè)計(jì)團(tuán)隊(duì)花了很長(zhǎng)時(shí)間研究最佳方法，以使Sketch在更新的OS中看起來(lái)很棒，但他們還有另一個(gè)項(xiàng)目需要考慮-Mac應(yīng)用程序的新圖標(biāo)。 

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

本周，我們與項(xiàng)目的設(shè)計(jì)負(fù)責(zé)人Prekesh進(jìn)行了座談，以了解他如何重新構(gòu)想一個(gè)新時(shí)代的Sketch圖標(biāo)，以及為什么它從來(lái)沒(méi)有像重新創(chuàng)建我們著名的sketch鉆石圖標(biāo)那樣簡(jiǎn)單。

重塑

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

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

他解釋說(shuō)：“無(wú)論多么古怪的念頭我都有想過(guò)。” “目標(biāo)是將想法都拿出來(lái)，看看有什么是可行的，哪些是不可行的?！?接下來(lái)，他將這些圖紙放入Sketch中，并開(kāi)始以更高的保真度探索不同的方法。

在最初的素描階段，Prekesh有一些有趣的探索想法：“并不是所有這些想法實(shí)際上都能真正變成應(yīng)用程序圖標(biāo)，但是我將最喜歡的圖標(biāo)帶到了Sketch中。”

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

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

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

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

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

平衡

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

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

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

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

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

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

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

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

一切都在細(xì)節(jié)中

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

側(cè)邊欄中的微妙透明性意味著您可以通過(guò)圖標(biāo)觀察到墻紙的顏色。

普雷克斯（Prekesh）說(shuō)，他從Big Sur的新設(shè)計(jì)以及Apple自家的圖標(biāo)中汲取了靈感。他說(shuō)：“我喜歡這個(gè)新方向。” “對(duì)圖標(biāo)的圓角矩形的限制無(wú)疑將鼓勵(lì)人們更創(chuàng)造性地使用該空間?！?nbsp;

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

Sketch隱藏圖標(biāo)展示

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

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

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

結(jié)果是六個(gè)完全獨(dú)特的圖標(biāo)，每個(gè)圖標(biāo)都有自己的配色方案和風(fēng)格。對(duì)于Prekesh來(lái)說(shuō)，這是一個(gè)將這些早期的，更古怪的想法變?yōu)楝F(xiàn)實(shí)的機(jī)會(huì)。

這種受Matrix啟發(fā)的設(shè)計(jì)幾乎成為了Debug版本的圖標(biāo)。最后，團(tuán)隊(duì)決定設(shè)計(jì)一種更接近Xcode的藍(lán)色macOS圖標(biāo)的設(shè)計(jì)。

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

實(shí)驗(yàn)版本圖標(biāo)，它確實(shí)做到了名副其實(shí)

那么隱藏在窗簾后面的圖標(biāo)呢？“這件事說(shuō)起來(lái)挺有趣，我們?cè)鞠朐赥witter上發(fā)布這個(gè)新圖標(biāo)，所以我花了整整一天的時(shí)間畫(huà)出要用于預(yù)告片圖像的布料，”他笑著說(shuō)?！巴瓿伤羞@些工作后，我意識(shí)到我們可以將其實(shí)際用于Private Beta圖標(biāo)。這樣就節(jié)省了我一些時(shí)間！”

“ Marcelo明確地告訴我不要花太多時(shí)間，因?yàn)槟鞘墙oTwitter使用的，但我仍然需要在圖標(biāo)上做更多的工作，” Prekesh笑著說(shuō)。

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

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

相關(guān)閱讀文章推薦：

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

譯者：靜電