比起之前的圖標，Yosemite的圖標在屏幕看起來更有韻律。這組圖標設計之前并未在網(wǎng)上發(fā)布過，為了達到外觀上的一致性，是肯定有一套柵格系統(tǒng)來確保這一點的。我們先看看新版圖標的形狀。 當你目光從老版系統(tǒng)的Duck上掃過的時候，這些在不同時期加入OSX的圖標，擁有著不同風格，不同形狀和色彩，以及不同的尺寸，你的眼睛會捕捉到它們間的差異和不協(xié)調，所以老版的OSX系統(tǒng)還是非常兼容并蓄的。在新版的Yosemite中，圖標的尺寸大小更加協(xié)調，色調更一致，風格也更加統(tǒng)一了。 圖標造型與柵格 iOS7圖標設計的柵格系統(tǒng)已經(jīng)在icon設計圈中廣泛流傳了，但是很少有人會注意到它和Yosemite的圖標之間的關系。Andreas Wendker也僅僅只是在闡述圖標設計統(tǒng)一性的時候輕輕帶過。 實際上，蘋果的設計師已經(jīng)在為Yosemite重新設計圖標的時候用上了這套柵格系統(tǒng)。更準確的描述是：他們開創(chuàng)了一套新的圖標設計體系。（注：這些都基于Beta版的系統(tǒng)和剛剛發(fā)布的圖標設計，對于剛剛接觸Yosemite設計者而言，這套柵格是非常有助于理解它的設計思路的。） Yosemite的圖標系統(tǒng)可以分成3種基本的形狀，圓形，方形，和傾斜矩形。不同于移動端的iOS，Apple在MacOSX中，還是非常講究保持圖標的個性，只有極少數(shù)圖標的設計是出離于這套規(guī)律的。 為了讓你更清晰地看出這套圖標的規(guī)律，我將iOS7的柵格系統(tǒng)覆蓋在Yosemite的圖標之上，柵格尺寸是1024×1024。很明顯可以看出，圖標們是非常規(guī)則的。
毫無疑問，這些基本形狀和柵格系統(tǒng)對應起來非常不錯。接下來我們試試真實的圖標。
iBooks的圓形圖標和柵格系統(tǒng)完全對應了，接近方形的系統(tǒng)設置圖標和柵格系統(tǒng)雖未完全貼合，但是非常接近了。文本編輯器由于是傾斜的，圖標中的草稿本的中心與柵格的中心點重合，傾斜的自動鉛筆則幾乎貼著內(nèi)測兩個圓之間的間隙插了進去。如果你仔細觀察系統(tǒng)設置的圖標，你會發(fā)現(xiàn)它并非正方形，而是一個寬度比高度略大一點的長方形。Yosemite中的“方形”實際上分兩種，一種像系統(tǒng)設置圖標一樣，寬度僅僅只是略大于高度，F(xiàn)inder與系統(tǒng)設置的圖標均是如此。而另外一種則是終端和活動監(jiān)視器這樣的圖標，它們的寬度會明顯大于高度。 在看看App Store的圖標，內(nèi)側是筆和尺子組成的A，稍稍超出了圓形柵格的邊緣，這一點和嚴格遵循柵格的iBooks圖標不太一樣，這主要是因為這個A的的視覺元素并不如iBooks圖標里的圖書來的飽滿，所以這樣的調整會讓它們看起來更一致。Finder的圖標尺寸很規(guī)范，和之前的Finder圖標相比，Yosemite中Finder的笑臉看起來更快樂，更自然。 傾斜矩形的圖標值得特別關注，因為它是第三方圖標中最常見的類型。 以聯(lián)系人圖標為例，左側為老版的傾斜矩形圖標，它更像是處在一個三維空間中，符合透視規(guī)律，有消失點，整體看起來像是自然傾斜著。換句話說，你在制作這樣的圖標的時候，將一個矩形逆時針選擇11度之后，還需要根據(jù)透視規(guī)律調整邊緣角度。 Yosemite的圖標雖然保留了老版相似的正投影，但是并沒有透視，也沒有深度。所以，在制作Yosemite的圖標之時，新建一個矩形輪廓，逆時針旋轉11度之后，你就可以開始制作細節(jié)了。比起之前，你也無需繪制極為逼真的紋理，這種差異你在上圖中非常容易體會到。 很明顯，Yosemite中的圖標設計是有一套視覺規(guī)范的，尤其是圓形和方形的圖標。這套圖標均勻而規(guī)則地分布在二維平面上，如此一來Dock也無需制作成3D的樣子了。 所以，這套柵格就是準則，而你的雙眼可以清晰地判斷出來。 曾經(jīng)有很多人猜測Yosemite的圖標全會變成規(guī)則的圓形，值得慶幸的是，蘋果并沒有這么做（似乎很多奇葩的分析師喜歡會針對蘋果作出各種極端推測）。我認為蘋果的設計師們作出了一套靈活的系統(tǒng)，保留了干凈清爽額外觀，又賦予第三方的設計師們足夠的靈活性和自由度。 參考了Yosemite的圖標設計，我在iOS7的圖標柵格系統(tǒng)的基礎上，制作出一套符合Yosemite的圖標設計規(guī)范的新的柵格系統(tǒng)： 甭管你最后用不用它，你得知道它的存在。 層次 當一套新的視覺規(guī)范被創(chuàng)造出來的時候，大家通常會來嘗鮮，而規(guī)范也常常被曲解。因此，動手前先稍等一下，想想你的APP是拿來干什么的，用哪種圖標造型更能表情達意。 我并不認為形狀的選擇是死板的規(guī)則，即便是蘋果本身也常常借助現(xiàn)實生活中的事物的實際形體來設計圖標。我更傾向于深入理解這些基本圖形的功用，而不是生搬硬套。 圓形 圓形的圖標多用于偏娛樂、用戶常用且輕量級的程序。它們看起來非常漂亮，但是那些專業(yè)的應用大多不會使用這種造型的圖標。那么像游戲中心和聯(lián)系人這樣的程序是不是也需要設計成圓形的呢？也不是不可能，關鍵還是要看看Yosemite正式版的圖標設計。 方形 正方形的圖標多是與系統(tǒng)相關的應用程序。Finder，終端，系統(tǒng)設置，活動監(jiān)視器，Mission Control都在此之列。 傾斜矩形 自打MacOSX問世開始，這種傾斜矩形的圖標設計就是它的設計語言中的重要組成部分，很多工具類的應用都喜歡選用這種設計?，F(xiàn)如今系統(tǒng)版本都更新到10.10了，它依然存在，只不過簡化成2D平面的。 目前，傾斜矩形造型的圖標是三種型態(tài)中應用最廣泛的一種，那些帶有明顯工具屬性的應用尤其喜歡將圖標設計成這種造型?？赡苁且驗閮A斜矩形的圖標設計擁有更大的靈活性，經(jīng)常可以將一些擬物的實體元素加入到圖標中，讓它的外觀更有個性。 材質與高光 現(xiàn)如今，低飽和度的色彩已經(jīng)被溫暖明亮的色調所取代。在Yosemite中，設計師為帶有金屬材質的圖標，加上了橘黃色的柔光，在背景增添了偏藍綠色的陰影，讓它們看起來更有質感。它們并不是單純的色彩特效，這種色彩更接近于環(huán)境反光。 發(fā)布會上，Craig Federighi將Yosemite的Dock中的這種色彩稱為“半透明材質”。我剛剛看到他的Keynote的時候就笑了：“這不就是一個帶模糊濾鏡的白色半透明圖層疊加上去么？”當然，你可以將Craig的說法視作是為了方便營銷而創(chuàng)造出來的說法，但是Yosemite的圖標的確不是單純扁平化，也不是單純只是設計一套操作系統(tǒng)圖標而已，它們依然保留了材質和環(huán)境光——它們與系統(tǒng)有“互動”。 這種環(huán)境光的濾鏡并沒有打在每一個圖標之上，而是那些有著灰色金屬材質（全部或者部分）的圖標會呈現(xiàn)出這種環(huán)境光。 實際上你不用借助3D建模程序來創(chuàng)造環(huán)境光，PS也能做的出來，當然你非要用3D軟件來渲染環(huán)境光自然更好。在這個案例中，球體被放置在橙色的底板上，而底板和球都都置于樹下，渲染出來的環(huán)境光就和Yosemite的圖標的金屬部分的效果非常接近。 左側的球體是白色非拋光材質的，你可以在它的表面看到綠色、黃色和棕色的環(huán)境反射光。在球體的底部，可以看到橙色底板反射出來的橙色陰影。這種源自現(xiàn)實生活的色彩就是這樣和Yosemite中的扁平化的元素無縫地結合在一起。（扁平和擬物并非處處對立?。?右側的球體是鍍鉻的，它像鏡子一樣反映出周圍的環(huán)境。在Yosemite中，大塊的金屬都是在模擬金屬鋁的材質，而非鉻，所以它們的反光效果看起來更加虛幻和微妙。如果你將Yosemite的桌面背景更換一下的話，你會發(fā)現(xiàn)圖標的金屬部分環(huán)境光會隨著“環(huán)境”的改變而有著微妙的變化。所以，如果你愿意仔細去鉆研蘋果的圖標設計，你會發(fā)現(xiàn)很多令你驚訝的細節(jié)，開拓你的視界。 結語 圖標的形狀、柵格、光源、細節(jié)都很重要，但是請千萬記住它們都只是基本的準則而已，一個好的設計師應該明白什么時候遵守準則，什么時候打破常規(guī)。 請一定要注意圖標的整體造型、色調和材質，將它當作一個客觀實體來對待，合理地簡化，多參考其他的圖標的設計。坦率地講，圖標設計上并沒有發(fā)生翻天覆地的改變，比起之前，它們只是更加一致和協(xié)調了。依據(jù)這套設計準則來制作Mac應用的圖標是合乎情理的，如果你在這個前提下設計出更加清新脫俗的圖標的話，反而會從這套圖標系統(tǒng)中脫穎而出（小心被處女座or強迫癥用戶干掉?。５遣徽撊绾?，都一定要仔細打磨細節(jié)、角度和環(huán)境光。 
