上個月蘋果發布了最新操作系統OSX Yosemite 的預覽版，界面的視覺設計與iOS7的設計語言更加接近了。那些熟悉的模糊背景和半透明材質被添加到UI中，更加的簡潔漂亮的界面布局，和全新的圖標和字體也都出現新版的系統中。

Yosemite的變化是可喜的。我打算在這篇文章中說說Yosemite中的圖標設計。在Yosemite發布之前，Apple在Mac系統上的圖標設計規范并不明確，只是提出過一組粗略的List，并在官方的人機交互界面準則（HIG）中提出了一些簡單的建議。在Yosemite發布之后，這套設計規范更加精準、一致了，不過新的HIG對于設計細節依然沒有過多涉及。

如果要完全對比Mavericks和Yosemite之間的圖標設計，需要對比的東西有很多。當我們從頭討論新的圖標設計的時候，總是從它的外觀和它給人的感受開始的。相比之下，Yosemita的圖標更為整潔清爽，移除了高光，色彩飽和度更高，并且依然保留很多擬物化（特指skeuomorphic）的元素。

讓我們接著看下去。這些圖標并不是單純優化了一下外觀，實際上設計師們在這一版視覺語言上的探索遠不止這一星半點。秋季正式發布之后，大家就可以享用Yosemite了。與其簡單的評論圖標的好壞，我更愿意去剖析新版的系統構想，設計語言與以及令Yosemite驚艷的小細節。在過去的幾周里面，我花費了大量的時間來研究Yosemite，嘗試去理解它的新設計，解構它的視覺語言。以下就是我的發現。

Dock（停靠欄）

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

比起之前的圖標，Yosemite的圖標在屏幕看起來更有韻律。這組圖標設計之前并未在網上發布過，為了達到外觀上的一致性，是肯定有一套柵格系統來確保這一點的。我們先看看新版圖標的形狀。

當你目光從老版系統的Dock上掃過的時候，這些在不同時期加入OSX的圖標，擁有著不同風格，不同形狀和色彩，以及不同的尺寸，你的眼睛會捕捉到它們間的差異和不協調，所以老版的OSX系統還是非常兼容并蓄的。在新版的Yosemite中，圖標的尺寸大小更加協調，色調更一致，風格也更加統一了。

 

圖標造型與柵格

iOS7圖標設計的柵格系統已經在icon設計圈中廣泛流傳了，但是很少有人會注意到它和Yosemite的圖標之間的關系。Andreas Wendker也僅僅只是在闡述圖標設計統一性的時候輕輕帶過。

實際上，蘋果的設計師已經在為Yosemite重新設計圖標的時候用上了這套柵格系統。更準確的描述是：他們開創了一套新的圖標設計體系。（注：這些都基于Beta版的系統和剛剛發布的圖標設計，對于剛剛接觸Yosemite設計者而言，這套柵格是非常有助于理解它的設計思路的。）

Yosemite的圖標系統可以分成3種基本的形狀，圓形，方形，和傾斜矩形。不同于移動端的iOS，Apple在MacOSX中，還是非常講究保持圖標的個性，只有極少數圖標的設計是出離于這套規律的。

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

毫無疑問，這些基本形狀和柵格系統對應起來非常不錯。接下來我們試試真實的圖標。

iBooks的圓形圖標和柵格系統完全對應了，接近方形的系統設置圖標和柵格系統雖未完全貼合，但是非常接近了。文本編輯器由于是傾斜的，圖標中的草稿本的中心與柵格的中心點重合，傾斜的自動鉛筆則幾乎貼著內測兩個圓之間的間隙插了進去。如果你仔細觀察系統設置的圖標，你會發現它并非正方形，而是一個寬度比高度略大一點的長方形。Yosemite中的“方形”實際上分兩種，一種像系統設置圖標一樣，寬度僅僅只是略大于高度，Finder與系統設置的圖標均是如此。而另外一種則是終端和活動監視器這樣的圖標，它們的寬度會明顯大于高度。

再看看App Store的圖標，內側是筆和尺子組成的A，稍稍超出了圓形柵格的邊緣，這一點和嚴格遵循柵格的iBooks圖標不太一樣，這主要是因為這個A的的視覺元素并不如iBooks圖標里的圖書來的飽滿，所以這樣的調整會讓它們看起來更一致。Finder的圖標尺寸很規范，和之前的Finder圖標相比，Yosemite中Finder的笑臉看起來更快樂，更自然。

傾斜矩形的圖標值得特別關注，因為它是第三方圖標中最常見的類型。

以聯系人圖標為例，左側為老版的傾斜矩形圖標，它更像是處在一個三維空間中，符合透視規律，有消失點，整體看起來像是自然傾斜著。換句話說，你在制作這樣的圖標的時候，將一個矩形逆時針選擇11度之后，還需要根據透視規律調整邊緣角度。

Yosemite的圖標雖然保留了老版相似的正投影，但是并沒有透視，也沒有深度。所以，在制作Yosemite的圖標之時，新建一個矩形輪廓，逆時針旋轉11度之后，你就可以開始制作細節了。比起之前，你也無需繪制極為逼真的紋理，這種差異你在上圖中非常容易體會到。

很明顯，Yosemite中的圖標設計是有一套視覺規范的，尤其是圓形和方形的圖標。這套圖標均勻而規則地分布在二維平面上，如此一來Dock也無需制作成3D的樣子了。

所以，這套柵格就是準則，而你的雙眼可以清晰地判斷出來。

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

參考了Yosemite的圖標設計，我在iOS7的圖標柵格系統的基礎上，制作出一套符合Yosemite的圖標設計規范的新的柵格系統：

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

 

層次

當一套新的視覺規范被創造出來的時候，大家通常會來嘗鮮，而規范也常常被曲解。因此，動手前先稍等一下，想想你的APP是拿來干什么的，用哪種圖標造型更能表情達意。

我并不認為形狀的選擇是死板的規則，即便是蘋果本身也常常借助現實生活中的事物的實際形體來設計圖標。我更傾向于深入理解這些基本圖形的功用，而不是生搬硬套。

圓形

圓形的圖標多用于偏娛樂、用戶常用且輕量級的程序。它們看起來非常漂亮，但是那些專業的應用大多不會使用這種造型的圖標。那么像游戲中心和聯系人這樣的程序是不是也需要設計成圓形的呢？也不是不可能，關鍵還是要看看Yosemite正式版的圖標設計。

方形

正方形的圖標多是與系統相關的應用程序。Finder，終端，系統設置，活動監視器，Mission Control都在此之列。

傾斜矩形

自打MacOSX問世開始，這種傾斜矩形的圖標設計就是它的設計語言中的重要組成部分，很多工具類的應用都喜歡選用這種設計?，F如今系統版本都更新到10.10了，它依然存在，只不過簡化成2D平面的。

目前，傾斜矩形造型的圖標是三種型態中應用最廣泛的一種，那些帶有明顯工具屬性的應用尤其喜歡將圖標設計成這種造型?？赡苁且驗閮A斜矩形的圖標設計擁有更大的靈活性，經?？梢詫⒁恍M物的實體元素加入到圖標中，讓它的外觀更有個性。

材質與高光

現如今，低飽和度的色彩已經被溫暖明亮的色調所取代。在Yosemite中，設計師為帶有金屬材質的圖標，加上了橘黃色的柔光，在背景增添了偏藍綠色的陰影，讓它們看起來更有質感。它們并不是單純的色彩特效，這種色彩更接近于環境反光。

發布會上，Craig Federighi將Yosemite的Dock中的這種色彩稱為“半透明材質”。我剛剛看到他的Keynote的時候就笑了：“這不就是一個帶模糊濾鏡的白色半透明圖層疊加上去么？”當然，你可以將Craig的說法視作是為了方便營銷而創造出來的說法，但是Yosemite的圖標的確不是單純扁平化，也不是單純只是設計一套操作系統圖標而已，它們依然保留了材質和環境光——它們與系統有“互動”。

這種環境光的濾鏡并沒有打在每一個圖標之上，而是那些有著灰色金屬材質（全部或者部分）的圖標會呈現出這種環境光。

實際上你不用借助3D建模程序來創造環境光，PS也能做的出來，當然你非要用3D軟件來渲染環境光自然更好。在這個案例中，球體被放置在橙色的底板上，而底板和球都都置于樹下，渲染出來的環境光就和Yosemite的圖標的金屬部分的效果非常接近。

左側的球體是白色非拋光材質的，你可以在它的表面看到綠色、黃色和棕色的環境反射光。在球體的底部，可以看到橙色底板反射出來的橙色陰影。這種源自現實生活的色彩就是這樣和Yosemite中的扁平化的元素無縫地結合在一起。（扁平和擬物并非處處對立！）

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

結語

圖標的形狀、柵格、光源、細節都很重要，但是請千萬記住它們都只是基本的準則而已，一個好的設計師應該明白什么時候遵守準則，什么時候打破常規。

請一定要注意圖標的整體造型、色調和材質，將它當作一個客觀實體來對待，合理地簡化，多參考其他的圖標的設計。坦率地講，圖標設計上并沒有發生翻天覆地的改變，比起之前，它們只是更加一致和協調了。依據這套設計準則來制作Mac應用的圖標是合乎情理的，如果你在這個前提下設計出更加清新脫俗的圖標的話，反而會從這套圖標系統中脫穎而出（小心被處女座or強迫癥用戶干掉?。５遣徽撊绾?，都一定要仔細打磨細節、角度和環境光。

英文原文：INSPECTING YOSEMITE’S ICONS? ?翻譯：優設網@陳子木