編輯註:iOS 7在發表之後,無論國內或國外都出現了不少批評浪潮,相信大家也看過了不少。但iOS 7可是蘋果在iOS作業系統中有史以來最大幅度改版,真的就一無是處?如果不探求根源以及背景環境因素,對於iOS 7可能就流於過淺的理解。本文作者是Even,在對iOS 7有深入的觀察後提出他對iOS 7設計的看法。原文標題為「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 有凸出螢幕的錯覺,利用擬真的概念—反光以及陰影,讓使用者有這種感覺:
而新的 iOS 7 home screen icon 也是一樣的道理,只不過使用了更高階的平面設計技巧,讓你以為 icon 是浮出來的。
是否覺得右邊 iOS 7 版本的 icon 更有凸出螢幕的感受?
除了 icon 從原本 114 × 114 放大到 120 × 120 以外,在圓角的繪製上,使用了類似於字型設計、工業設計、道路設計上常用的羊角螺線、超級橢圓或各種過度曲線方法,緩和了直線與圓角線之間變化幅度。
圖來自 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 ,但有些設計可是花了你辛苦繳的稅金。
跟了解天空的漸層一樣,請多注意真實世界吧!
----
覺得本篇不錯的話,請幫原文按個讚吧
作者簡介:
Even 是專業的網頁設計師,同時也是 RGBA 活動創始人之一,有13年的網站設計和資訊架構經驗。喜歡宣導初學者應使用現代工具、提升設計品質、致力於設計師程式化能力。曾協助上百位平面網頁設計師從 Dreamweaver 或 GUI 工具轉換為手寫 HTML/CSS/JS 開發方式。
↓↓↓↓↓↓加入癮科技粉絲團,有更多歡樂有趣的科技新聞↓↓↓↓↓↓
15 則回應
「不滿意時,試圖換一個信仰,或創造另一個公司文化、語言,而不是老是做一些小部分的 redesign 到處取暖」.
「請提醒自己並沒有任何損失。...你尚未付費購買 iOS 7」.
iOS 的更新是屬於售後服務的一部分,這不是 "你尚未付費購買 iOS 7" 的問題,而是 " i裝置售後服問很差" 的問題,就好像你購買了三年分的雜誌(據很多粉絲表示,蘋果連三年前的裝置都支援),結果一本出的比一
「大家對於小小螢幕中的改變,有這麼大的反應,為何對生
別忘了賈伯斯有多麼崇尚日本的藝術及設計,
而這個新的介面設計,也許也要參考一下日本版畫的線條以及漸層色彩。
很多人喊醜,所以蘋果需要聽你們的嗎?
就像文章最後一段,蘋果只是間公司,你不喜歡可以不買單,可是政府文案、道路指標有很多更需注意的,卻沒人在意。
真是噁爛到我已經吐了一地了,一堆神明互相吹捧,這個大神,那個大神... XD
我是很不想回應這種文章,但自從 iOS 7 面世,就一堆這種噁爛文章,真是有夠受不了的,我實在忍不住要開炮。XD
iOS 7 美不美觀是主觀意識,使用者自己各有心證,設計師自己覺得好就算了,我們也不用多加批評,但刻意去吹捧,實在是看不下去。
講一句實在話,今天 iOS 7 何必要換 Icon?延用原來的圖示,加上 iOS 7 的新功能不就是完美之作,換 Icon 只是換個 Skin,實在沒什麼好吹的,因為本質上根本就沒變,如果照這個邏輯,一堆防毒軟體每個都是神作,因為每年都會換 Skin,但功能不變。
Apple 的設計一向引領潮流,OS X 的 Aqua Style 一直延伸應用到各個層面,結果現在 iOS 7 要叫什麼風??也可以看得出來,他們現在是沒什麼方向感了,這才是 Apple 的危機。
如果有開發者就會知道蘋果不是光把icon跟內部圖案改一改那麼簡單,
至於設計本來就很主觀,很多人嫌畢卡索的話很醜可是人家卻賣到天價。
這世界上本來就有不同的審美觀。
「如果他能從這扇門望見日出的美,景你又何必要他走向那扇窗去聽鳥鳴呢?
你聽你的烏鳴,他看他的日出,彼此都會有等量的美的感受。」
首先,我和 Even 根本不認識。其次,我還覺得 Even 設計過的那個 iOS app icon 很爛,所以不會存在互相吹捧的嫌疑。
我看到 Even 設計過的 Tapexpense iOS app icon 本就是擬真風格,但他在這篇文章中還是大讚 iOS 7。所以,Even 只是說了很多公道話而已。
雖然我也覺得 iOS 7 的某些 icon 的確有待改進,例如 Settings。但更改個 icon 對於 Apple 來說只是微不足道的事情,從第一代 iPhone OS 到 iOS 6,不是也有不少內建 icon 獲得了更新嗎?但 iOS 7 的整體風格變化仍是正確的,至少是「驚艷」的。能夠比以往更能引起話題,這就足夠了。
不敢苟同
真的就醜一個字
講那麼多 只要看的人沒感 那些道理就是錯的!!!
說扁平反而會讓icon有跳出螢幕的感覺? 並不會好嗎..
這種程度的扁平設計我已經做很久了..
人是視覺動物 道理說的再好再有理 看起來沒那麼一回事就是錯的
蘋果的產品給人的「想要」遠大於「需要」
從擬物到扁平化設計的過程,正產生了「需要」提高了但「想要」卻降低了的結果。
整個就是抄襲Android & WindowsPhone概念,還弄了Windows7的毛玻璃。
在果蠅口中又成了蘋果創新的經典設計......
提到的這些icon設計的好處,老早就在WindowsPhone上實現了。
最後再扯個現實生活的爛設計來模糊焦點,手段高明啊~
有夠古怪的,這只是個 Beta 版,不知道為何就有一堆奇奇怪怪的人冒出來,解釋個沒完,最後 iOS 7 上市了,結果完全不是現在的樣子,那這些不知哪來的人又何必解釋個半天呢?
不停地一直吹噓 Ivy 有多神!他棒到快變成上帝了,是曠古絕今的設計之神,根本無法用言語形容他有多厲害,現在一票人又替他解釋個沒完,真是超古怪的現象。
平常心看待不就好了,等真的正式版了,真的醜成這樣,要解釋再來解釋也不遲吧。以上個人淺見。
對於ios7──丑 就一個字,還需要解釋這麼多?
果然是 Even 大神的文章,懂設計的想法就是不一樣!
買產品(iphone)不就支付了設計費......不懂你的邏輯@_@?
IOS 6 美多了。道理撑不起美感啊。呵呵。