iOS7 設計的真相，讓大師來告訴你！

iOS 7 的設計

2013 June 20, evenwu

轉載自: http://blog.evendesign.tw/post/53428379353/ios-7

Apple 日前在 WWDC 2013 公開 iOS 7 的設計，是 iOS 有史以來最大幅度的改版，包含最令人注目的全新 UI 設計，但之後馬上蜂擁而來一片批評與反感。

其實過去 Apple 公司只要大幅更動了任何產品的設計，都有相同的狀況發生。包含一開始 MBP 使用玻璃螢幕變成黑眼圈外框、iPhone 4 變得方正、iMac 從白色 pizza 盒變為鋁殼，都有大量的批評聲浪出現。但你只要回想這些問題，就會發現久了、理解後都不是問題，改版帶來的好處大過於不習慣，搶購缺貨、財報新高、人手一隻、愛不釋手。

而這次 iOS 7 也面臨了相同的狀況，有許多人覺得 app icon 設計語言沒有統一，但你為何會有 app icon 要有統一調性的概念？

圖來自 Things I wish iOS7 to change by Zhusee

事實上，絕大多數人幾乎都是從 OS X Human Interface Guidelines 學到這些 icon 設計概念，即使是在別的地方學到，概念也幾乎都源自於 apple 早期的資產。當我們從 apple 學了這麼多 GUI 設計理念，只覺得被表了一道。用 apple 過去的理念反 apple 的新設計，自相矛盾。

扁平與擬真並不互斥，只是過度擬真 UI 設計，漸漸失去了在背後支撐的理論。而為了扁平而扁平，也不是好現象，如同 dribbble 那一堆自認為很好的 redesign 事實上只是在緬懷老 HIG 走一些回頭路的好處而已。

via iOS 7 Redesign by Leo Drapeau

你會發現他們都一致很得意的把 icon 內容縮回原本的大小、恢復一致方向的漸層，甚至將彩度與明度下降，看似恢復以往榮光的好景象。

難道 apple 內部或 Ive 找的設計團隊做不到這些？就我看來，做到 dribbble 上面那些看似美好的 redesign 們反而是一件簡單在不過的事情，我花個一小時也能做出有上百人按讚、一堆人說你做的比 iOS 7 還好的取暖假象。

所以這次 apple 在幹嘛？讓我們來回顧一下 iOS 6 的 home screen:

我們可以發覺到過去 iOS 6 為了讓 icon 有突出螢幕的錯覺，在 icon 上利用擬真的概念，加了反光以及陰影，讓使用者有這種感覺：

而新的 iOS 7 home screen icon 也是一樣的道理，只不過他使用了更高階的平面設計技巧，讓你以為 icon 是浮出來的。

是否覺得右邊 iOS 7 版本的 icon 更有凸出螢幕的感受？

除了 icon 從原本 114 × 114 放大到 120 × 120 以外，在圓角的繪製上，使用了類似於字型設計、工業設計、道路設計上常用的羊角螺線、超級橢圓或 G2 過度曲線，緩和了直線與圓角線之間變化幅度。

圖來自 Wikipedia 羊角螺線常見於字型設計、工業設計、道路設計上

如此一來解決了人類在視覺上會誤認兩個圓角之間的直線被凹陷的錯覺，不只這樣，還變本加厲的把主視覺的圓形參考線，膨脹加大至幾乎碰到 icon 邊緣，製造出icon 幾乎要跳出螢幕的感受。

因為在 icon 形狀上的特殊規範，就能夠達成很尖銳的設計語言，我們便不需要在內容多加限制，而能夠根據不同的應用，來做不同的設計，像是最多人反對的兩個 icon 漸層方向：

這兩個 icon 的漸層方向，是暗示了這兩個背景是天空，幾乎所有天空的照片都是上面較暗、下面較亮的：

而天空暗示了雲端的概念，所以我們可以推斷，iCloud 這次的 icon 也是一樣的狀況，果不其然：

如何從規則中解放，卻又不致於造成亂象，就是新的 grid icon design 語言的用意。而在易讀性方面，也因為使用更簡潔的設計語言，達到更高的易讀性，這邊用分享功能的 icon舉例：

上方為 iOS 6 下方為 iOS 7 的分享按鈕

人眼錐狀細胞集中在視網膜小窩，幾乎只有 1° 視野能夠辨識形狀與閱讀，因此需要不斷的掃瞄場景，在辨識完成之前，所有的東西都是模糊不清。而且手持裝置會因行走或行車的關係而有移動。所以下面這張圖做了三個特效：模糊、移動模糊、對比降低：

圖中上方 iOS 6 的版本幾乎看不清楚 icon 內容是什麼了，而 iOS 7 依然可以辨識 icon 形狀。而這只是我們在電腦上觀看，若是在 iPhone 的高解析度螢幕，會更加銳利而明顯。

這邊舉例就到此為止，事實上 iOS 7 的多數設計都遠遠優於以前的版本，我們不必因害怕改變，只看到不喜歡的點，更何況只單看設計外表的喜好，不如去探索整個設計背後整套視覺溝通設計語言，究竟對我們使用上是否有任何實際的幫助。

Apple 只是一間也會犯錯的公司。當某公司換了整套設計語言，你只是嚇到了，請提醒自己並沒有任何損失。就像當初 IKEA 把年度型錄使用的 Futura 字體改為 Verdana，你也可以不買單。不滿意時，試圖換一個信仰，或創造另一個公司文化、語言，而不是老是做一些小部分的 redesign 到處取暖，得到短暫「喔，你做的比較好」又如何呢？

話說回來，大家對於小小螢幕中的改變，有這麼大的反應，為何對生活中各種的設計不滿，卻沒有反應呢？這更是一大謎題了！你尚未付費購買 iOS 7 ，但有些設計可是花了你的稅金。

跟瞭解天空的漸層一樣，請多注意真實世界吧！

全文轉載自: http://blog.evendesign.tw/post/53428379353/ios-7