揭秘蘋果最新操作系統YOSEMITE的圖標設計

 

　　@陳子木 上個月蘋果發布了最新操作系統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的圖標在屏幕看起來更有韻律。這組圖標設計之前並未在網上發布過，為了達到外觀上的一致性，是肯定有一套柵格系統來確保這一點的。我們先看看新版圖標的形狀。

　　當你目光從老版系統的Duck上掃過的時候，這些在不同時期加入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問世開始，這種傾斜矩形的圖標設計就是它的設計語言中的重要組成部分，很多工具類的應用都喜歡選用這種設計。現如今系統版本都更新到10.10了，它依然存在，只不過簡化成2D平面的。

　　目前，傾斜矩形造型的圖標是三種型態中應用最廣泛的一種，那些帶有明顯工具屬性的應用尤其喜歡將圖標設計成這種造型。可能是因為傾斜矩形的圖標設計擁有更大的靈活性，經常可以將一些擬物的實體元素加入到圖標中，