在聊Dock上的圖標(biāo)之前，不妨先了解一下Dock設(shè)計(jì)本身。Dock最早的設(shè)計(jì)其實(shí)就是2D的樣式，之后隨著蘋果所推崇的擬物化設(shè)計(jì)的發(fā)展而進(jìn)而演化成3D的，而如今的Yosemite則重新回到了2D Dock。

比起之前的圖標(biāo)，Yosemite的圖標(biāo)在屏幕看起來(lái)更有韻律。這組圖標(biāo)設(shè)計(jì)之前并未在網(wǎng)上發(fā)布過(guò)，為了達(dá)到外觀上的一致性，是肯定有一套柵格系統(tǒng)來(lái)確保這一點(diǎn)的。我們先看看新版圖標(biāo)的形狀。

當(dāng)你目光從老版系統(tǒng)的Dock上掃過(guò)的時(shí)候，這些在不同時(shí)期加入OSX的圖標(biāo)，擁有著不同風(fēng)格，不同形狀和色彩，以及不同的尺寸，你的眼睛會(huì)捕捉到它們間的差異和不協(xié)調(diào)，所以老版的OSX系統(tǒng)還是非常兼容并蓄的。在新版的Yosemite中，圖標(biāo)的尺寸大小更加協(xié)調(diào)，色調(diào)更一致，風(fēng)格也更加統(tǒng)一了。

 

圖標(biāo)造型與柵格

iOS7圖標(biāo)設(shè)計(jì)的柵格系統(tǒng)已經(jīng)在icon設(shè)計(jì)圈中廣泛流傳了，但是很少有人會(huì)注意到它和Yosemite的圖標(biāo)之間的關(guān)系。Andreas Wendker也僅僅只是在闡述圖標(biāo)設(shè)計(jì)統(tǒng)一性的時(shí)候輕輕帶過(guò)。

實(shí)際上，蘋果的設(shè)計(jì)師已經(jīng)在為Yosemite重新設(shè)計(jì)圖標(biāo)的時(shí)候用上了這套柵格系統(tǒng)。更準(zhǔn)確的描述是：他們開(kāi)創(chuàng)了一套新的圖標(biāo)設(shè)計(jì)體系。（注：這些都基于Beta版的系統(tǒng)和剛剛發(fā)布的圖標(biāo)設(shè)計(jì)，對(duì)于剛剛接觸Yosemite設(shè)計(jì)者而言，這套柵格是非常有助于理解它的設(shè)計(jì)思路的。）

Yosemite的圖標(biāo)系統(tǒng)可以分成3種基本的形狀，圓形，方形，和傾斜矩形。不同于移動(dòng)端的iOS，Apple在MacOSX中，還是非常講究保持圖標(biāo)的個(gè)性，只有極少數(shù)圖標(biāo)的設(shè)計(jì)是出離于這套規(guī)律的。

為了讓你更清晰地看出這套圖標(biāo)的規(guī)律，我將iOS7的柵格系統(tǒng)覆蓋在Yosemite的圖標(biāo)之上，柵格尺寸是1024×1024。很明顯可以看出，圖標(biāo)們是非常規(guī)則的。

毫無(wú)疑問(wèn)，這些基本形狀和柵格系統(tǒng)對(duì)應(yīng)起來(lái)非常不錯(cuò)。接下來(lái)我們?cè)囋囌鎸?shí)的圖標(biāo)。

iBooks的圓形圖標(biāo)和柵格系統(tǒng)完全對(duì)應(yīng)了，接近方形的系統(tǒng)設(shè)置圖標(biāo)和柵格系統(tǒng)雖未完全貼合，但是非常接近了。文本編輯器由于是傾斜的，圖標(biāo)中的草稿本的中心與柵格的中心點(diǎn)重合，傾斜的自動(dòng)鉛筆則幾乎貼著內(nèi)測(cè)兩個(gè)圓之間的間隙插了進(jìn)去。如果你仔細(xì)觀察系統(tǒng)設(shè)置的圖標(biāo)，你會(huì)發(fā)現(xiàn)它并非正方形，而是一個(gè)寬度比高度略大一點(diǎn)的長(zhǎng)方形。Yosemite中的“方形”實(shí)際上分兩種，一種像系統(tǒng)設(shè)置圖標(biāo)一樣，寬度僅僅只是略大于高度，F(xiàn)inder與系統(tǒng)設(shè)置的圖標(biāo)均是如此。而另外一種則是終端和活動(dòng)監(jiān)視器這樣的圖標(biāo)，它們的寬度會(huì)明顯大于高度。

再看看App Store的圖標(biāo)，內(nèi)側(cè)是筆和尺子組成的A，稍稍超出了圓形柵格的邊緣，這一點(diǎn)和嚴(yán)格遵循柵格的iBooks圖標(biāo)不太一樣，這主要是因?yàn)檫@個(gè)A的的視覺(jué)元素并不如iBooks圖標(biāo)里的圖書來(lái)的飽滿，所以這樣的調(diào)整會(huì)讓它們看起來(lái)更一致。Finder的圖標(biāo)尺寸很規(guī)范，和之前的Finder圖標(biāo)相比，Yosemite中Finder的笑臉看起來(lái)更快樂(lè)，更自然。

傾斜矩形的圖標(biāo)值得特別關(guān)注，因?yàn)樗堑谌綀D標(biāo)中最常見(jiàn)的類型。

以聯(lián)系人圖標(biāo)為例，左側(cè)為老版的傾斜矩形圖標(biāo)，它更像是處在一個(gè)三維空間中，符合透視規(guī)律，有消失點(diǎn)，整體看起來(lái)像是自然傾斜著。換句話說(shuō)，你在制作這樣的圖標(biāo)的時(shí)候，將一個(gè)矩形逆時(shí)針選擇11度之后，還需要根據(jù)透視規(guī)律調(diào)整邊緣角度。

Yosemite的圖標(biāo)雖然保留了老版相似的正投影，但是并沒(méi)有透視，也沒(méi)有深度。所以，在制作Yosemite的圖標(biāo)之時(shí)，新建一個(gè)矩形輪廓，逆時(shí)針旋轉(zhuǎn)11度之后，你就可以開(kāi)始制作細(xì)節(jié)了。比起之前，你也無(wú)需繪制極為逼真的紋理，這種差異你在上圖中非常容易體會(huì)到。

很明顯，Yosemite中的圖標(biāo)設(shè)計(jì)是有一套視覺(jué)規(guī)范的，尤其是圓形和方形的圖標(biāo)。這套圖標(biāo)均勻而規(guī)則地分布在二維平面上，如此一來(lái)Dock也無(wú)需制作成3D的樣子了。

所以，這套柵格就是準(zhǔn)則，而你的雙眼可以清晰地判斷出來(lái)。

曾經(jīng)有很多人猜測(cè)Yosemite的圖標(biāo)全會(huì)變成規(guī)則的圓形，值得慶幸的是，蘋果并沒(méi)有這么做（似乎很多奇葩的分析師喜歡會(huì)針對(duì)蘋果作出各種極端推測(cè)）。我認(rèn)為蘋果的設(shè)計(jì)師們作出了一套靈活的系統(tǒng)，保留了干凈清爽額外觀，又賦予第三方的設(shè)計(jì)師們足夠的靈活性和自由度。

參考了Yosemite的圖標(biāo)設(shè)計(jì)，我在iOS7的圖標(biāo)柵格系統(tǒng)的基礎(chǔ)上，制作出一套符合Yosemite的圖標(biāo)設(shè)計(jì)規(guī)范的新的柵格系統(tǒng)：

甭管你最后用不用它，你得知道它的存在。

 

層次

當(dāng)一套新的視覺(jué)規(guī)范被創(chuàng)造出來(lái)的時(shí)候，大家通常會(huì)來(lái)嘗鮮，而規(guī)范也常常被曲解。因此，動(dòng)手前先稍等一下，想想你的APP是拿來(lái)干什么的，用哪種圖標(biāo)造型更能表情達(dá)意。

我并不認(rèn)為形狀的選擇是死板的規(guī)則，即便是蘋果本身也常常借助現(xiàn)實(shí)生活中的事物的實(shí)際形體來(lái)設(shè)計(jì)圖標(biāo)。我更傾向于深入理解這些基本圖形的功用，而不是生搬硬套。

圓形

圓形的圖標(biāo)多用于偏娛樂(lè)、用戶常用且輕量級(jí)的程序。它們看起來(lái)非常漂亮，但是那些專業(yè)的應(yīng)用大多不會(huì)使用這種造型的圖標(biāo)。那么像游戲中心和聯(lián)系人這樣的程序是不是也需要設(shè)計(jì)成圓形的呢？也不是不可能，關(guān)鍵還是要看看Yosemite正式版的圖標(biāo)設(shè)計(jì)。

方形

正方形的圖標(biāo)多是與系統(tǒng)相關(guān)的應(yīng)用程序。Finder，終端，系統(tǒng)設(shè)置，活動(dòng)監(jiān)視器，Mission Control都在此之列。

傾斜矩形

自打MacOSX問(wèn)世開(kāi)始，這種傾斜矩形的圖標(biāo)設(shè)計(jì)就是它的設(shè)計(jì)語(yǔ)言中的重要組成部分，很多工具類的應(yīng)用都喜歡選用這種設(shè)計(jì)。現(xiàn)如今系統(tǒng)版本都更新到10.10了，它依然存在，只不過(guò)簡(jiǎn)化成2D平面的。

目前，傾斜矩形造型的圖標(biāo)是三種型態(tài)中應(yīng)用最廣泛的一種，那些帶有明顯工具屬性的應(yīng)用尤其喜歡將圖標(biāo)設(shè)計(jì)成這種造型?？赡苁且?yàn)閮A斜矩形的圖標(biāo)設(shè)計(jì)擁有更大的靈活性，經(jīng)?？梢詫⒁恍M物的實(shí)體元素加入到圖標(biāo)中，讓它的外觀更有個(gè)性。

材質(zhì)與高光

現(xiàn)如今，低飽和度的色彩已經(jīng)被溫暖明亮的色調(diào)所取代。在Yosemite中，設(shè)計(jì)師為帶有金屬材質(zhì)的圖標(biāo)，加上了橘黃色的柔光，在背景增添了偏藍(lán)綠色的陰影，讓它們看起來(lái)更有質(zhì)感。它們并不是單純的色彩特效，這種色彩更接近于環(huán)境反光。

發(fā)布會(huì)上，Craig Federighi將Yosemite的Dock中的這種色彩稱為“半透明材質(zhì)”。我剛剛看到他的Keynote的時(shí)候就笑了：“這不就是一個(gè)帶模糊濾鏡的白色半透明圖層疊加上去么？”當(dāng)然，你可以將Craig的說(shuō)法視作是為了方便營(yíng)銷而創(chuàng)造出來(lái)的說(shuō)法，但是Yosemite的圖標(biāo)的確不是單純扁平化，也不是單純只是設(shè)計(jì)一套操作系統(tǒng)圖標(biāo)而已，它們依然保留了材質(zhì)和環(huán)境光——它們與系統(tǒng)有“互動(dòng)”。

這種環(huán)境光的濾鏡并沒(méi)有打在每一個(gè)圖標(biāo)之上，而是那些有著灰色金屬材質(zhì)（全部或者部分）的圖標(biāo)會(huì)呈現(xiàn)出這種環(huán)境光。

實(shí)際上你不用借助3D建模程序來(lái)創(chuàng)造環(huán)境光，PS也能做的出來(lái)，當(dāng)然你非要用3D軟件來(lái)渲染環(huán)境光自然更好。在這個(gè)案例中，球體被放置在橙色的底板上，而底板和球都都置于樹(shù)下，渲染出來(lái)的環(huán)境光就和Yosemite的圖標(biāo)的金屬部分的效果非常接近。

左側(cè)的球體是白色非拋光材質(zhì)的，你可以在它的表面看到綠色、黃色和棕色的環(huán)境反射光。在球體的底部，可以看到橙色底板反射出來(lái)的橙色陰影。這種源自現(xiàn)實(shí)生活的色彩就是這樣和Yosemite中的扁平化的元素?zé)o縫地結(jié)合在一起。（扁平和擬物并非處處對(duì)立?。?/p>

右側(cè)的球體是鍍鉻的，它像鏡子一樣反映出周圍的環(huán)境。在Yosemite中，大塊的金屬都是在模擬金屬鋁的材質(zhì)，而非鉻，所以它們的反光效果看起來(lái)更加虛幻和微妙。如果你將Yosemite的桌面背景更換一下的話，你會(huì)發(fā)現(xiàn)圖標(biāo)的金屬部分環(huán)境光會(huì)隨著“環(huán)境”的改變而有著微妙的變化。所以，如果你愿意仔細(xì)去鉆研蘋果的圖標(biāo)設(shè)計(jì)，你會(huì)發(fā)現(xiàn)很多令你驚訝的細(xì)節(jié)，開(kāi)拓你的視界。

結(jié)語(yǔ)

圖標(biāo)的形狀、柵格、光源、細(xì)節(jié)都很重要，但是請(qǐng)千萬(wàn)記住它們都只是基本的準(zhǔn)則而已，一個(gè)好的設(shè)計(jì)師應(yīng)該明白什么時(shí)候遵守準(zhǔn)則，什么時(shí)候打破常規(guī)。

請(qǐng)一定要注意圖標(biāo)的整體造型、色調(diào)和材質(zhì)，將它當(dāng)作一個(gè)客觀實(shí)體來(lái)對(duì)待，合理地簡(jiǎn)化，多參考其他的圖標(biāo)的設(shè)計(jì)。坦率地講，圖標(biāo)設(shè)計(jì)上并沒(méi)有發(fā)生翻天覆地的改變，比起之前，它們只是更加一致和協(xié)調(diào)了。依據(jù)這套設(shè)計(jì)準(zhǔn)則來(lái)制作Mac應(yīng)用的圖標(biāo)是合乎情理的，如果你在這個(gè)前提下設(shè)計(jì)出更加清新脫俗的圖標(biāo)的話，反而會(huì)從這套圖標(biāo)系統(tǒng)中脫穎而出（小心被處女座or強(qiáng)迫癥用戶干掉?。?。但是不論如何，都一定要仔細(xì)打磨細(xì)節(jié)、角度和環(huán)境光。

英文原文：INSPECTING YOSEMITE’S ICONS? ?翻譯：優(yōu)設(shè)網(wǎng)@陳子木