iOS 7設計真有那麼爛?蘋果會這樣設計是有其根本與道理的

2013.06.21 12:07PM
是iOS 7設計真有那麼爛?蘋果會這樣設計是有其根本與道理的這篇文章的首圖

編輯註: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 要有統一調性的概念?

 

8fb18472edc1d257769c3f120a8be3b9
圖來自 Things I wish iOS7 to change by Zhusee


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

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

 

5865d6096fd0b3990978c6d861969872

via iOS 7 Redesign by Leo Drapeau


你會發現他們不約而同把 icon 內容縮回原本的大小、恢復統一漸層方向,甚至將彩度與明度下降,看似恢復以往榮光的好景象。

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

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

 

d762deba1cb767c1f4aabf1294771327

我們可以發覺過去 iOS 6 為了讓 icon 有凸出螢幕的錯覺,利用擬真的概念—反光以及陰影,讓使用者有這種感覺:

 

a5a5df5cdb8142d7055f6d8a59d67664

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

 

708194cadb94b1cea378f464a22ec3de

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

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

 

d6caf406841334bd3cbc1c4ca2858d3f

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

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

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

 

acae40f27146c468d79ce9973deeac0f

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

 

cd43e7ae118b2372df23e8c15e337e21

cfbd92896a56205ec96320ac14b610b8

568e0377de6f8493a9148cb31d9cdccc

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

 

9dfe70204bc9524f6f6963f73cc590fa

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

 

3a8a566cc0bf7a324de86f8e645628c1

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

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

 

1ef63007eeb2c48b1b1990ed2309a6c9

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

舉例就先到此為止,我認為 iOS 7 的多數設計都遠遠優於以前的版本。我們不必因害怕改變,就只看到不喜歡的點。更何況只單看設計外表的喜好,不如去探索整個設計背後支撐的整套邏輯,究竟是否對人們使用上有任何實際的幫助。

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

話說回來,大家對於小小螢幕中的改變,有這麼大的反應,為何對生活中各種的垃圾設計沒有反應呢?這更是一大謎題了!你尚未付費購買 iOS 7 ,但有些設計可是花了你辛苦繳的稅金。

 

a0e10c2ee010e615975e1d89af244cfc

7235543deacb9aed432ea680a7e135df

c1fab0aa51da44d6221fa5ca566ffc23

跟了解天空的漸層一樣,請多注意真實世界吧!

----

覺得本篇不錯的話,請幫原文按個讚

作者簡介:

Even 是專業的網頁設計師,同時也是 RGBA 活動創始人之一,有13年的網站設計和資訊架構經驗。喜歡宣導初學者應使用現代工具、提升設計品質、致力於設計師程式化能力。曾協助上百位平面網頁設計師從 Dreamweaver 或 GUI 工具轉換為手寫 HTML/CSS/JS 開發方式。

↓↓↓↓↓↓加入癮科技粉絲團,有更多歡樂有趣的科技新聞↓↓↓↓↓↓

 

15 則回應

  • 「不滿意時,試圖換一個信仰,或創造另一個公司文化、語言,而不是老是做一些小部分的 redesign 到處取暖」.

    沒能力做這種事情又必須使用iPhone的人來說,連婊達不喜歡的權利都沒有嗎?

    「請提醒自己並沒有任何損失。...你尚未付費購買 iOS 7」.
    iOS 的更新是屬於售後服務的一部分,這不是 "你尚未付費購買 iOS 7" 的問題,而是 " i裝置售後服問很差" 的問題,就好像你購買了三年分的雜誌(據很多粉絲表示,蘋果連三年前的裝置都支援),結果一本出的比一本爛,難到不心急?

    「大家對於小小螢幕中的改變,有這麼大的反應,為何對生活中各種的垃圾設計 (按:公設) 沒有反應呢?」.
    1. 即便公設施的設計爛,別忘記我們的注意力花在公設路牌的時間比手機短多了,「這種東西沒人看」怎麼會有很多人反應。
    2. 何況,蘋果是設計出名的公司,很多人會買他的東西是因為設計,但是並不是多數的納稅人都會在意設計,這是基數的不同
    3. 台灣百姓納稅錢所分配到設計路牌的部分,應該養不起蘋果設計團隊吧...
     
    2013-06-24
  • 別忘了賈伯斯有多麼崇尚日本的藝術及設計,

    而這個新的介面設計,也許也要參考一下日本版畫的線條以及漸層色彩。

    2013-06-24
  • 很多人喊醜,所以蘋果需要聽你們的嗎?

    就像文章最後一段,蘋果只是間公司,你不喜歡可以不買單,可是政府文案、道路指標有很多更需注意的,卻沒人在意。

     

    2013-06-22
  • 真是噁爛到我已經吐了一地了,一堆神明互相吹捧,這個大神,那個大神... XD

    我是很不想回應這種文章,但自從 iOS 7 面世,就一堆這種噁爛文章,真是有夠受不了的,我實在忍不住要開炮。XD

    iOS 7 美不美觀是主觀意識,使用者自己各有心證,設計師自己覺得好就算了,我們也不用多加批評,但刻意去吹捧,實在是看不下去。

     

    講一句實在話,今天 iOS 7 何必要換 Icon?延用原來的圖示,加上 iOS 7 的新功能不就是完美之作,換 Icon 只是換個 Skin,實在沒什麼好吹的,因為本質上根本就沒變,如果照這個邏輯,一堆防毒軟體每個都是神作,因為每年都會換 Skin,但功能不變。

    Apple 的設計一向引領潮流,OS X 的 Aqua Style 一直延伸應用到各個層面,結果現在 iOS 7 要叫什麼風??也可以看得出來,他們現在是沒什麼方向感了,這才是 Apple 的危機。

    2013-06-22
    • 如果有開發者就會知道蘋果不是光把icon跟內部圖案改一改那麼簡單,

       

      至於設計本來就很主觀,很多人嫌畢卡索的話很醜可是人家卻賣到天價。

       

       

      這世界上本來就有不同的審美觀。

       

      「如果他能從這扇門望見日出的美,景你又何必要他走向那扇窗去聽鳥鳴呢?

      你聽你的烏鳴,他看他的日出,彼此都會有等量的美的感受。」

       

       

      2013-06-25
    • 首先,我和 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 的整體風格變化仍是正確的,至少是「驚艷」的。能夠比以往更能引起話題,這就足夠了。

      2013-06-22
  • 不敢苟同

    2013-06-22
  • 真的就醜一個字

     

    講那麼多 只要看的人沒感 那些道理就是錯的!!!

     

    說扁平反而會讓icon有跳出螢幕的感覺? 並不會好嗎..

     

    這種程度的扁平設計我已經做很久了..

     

    人是視覺動物 道理說的再好再有理 看起來沒那麼一回事就是錯的

    2013-06-21
  • 蘋果的產品給人的「想要」遠大於「需要」

    從擬物到扁平化設計的過程,正產生了「需要」提高了但「想要」卻降低了的結果。

    2013-06-21
  • 整個就是抄襲Android & WindowsPhone概念,還弄了Windows7的毛玻璃。

    在果蠅口中又成了蘋果創新的經典設計......

    提到的這些icon設計的好處,老早就在WindowsPhone上實現了。

     

    最後再扯個現實生活的爛設計來模糊焦點,手段高明啊~

    2013-06-21
  • 有夠古怪的,這只是個 Beta 版,不知道為何就有一堆奇奇怪怪的人冒出來,解釋個沒完,最後 iOS 7 上市了,結果完全不是現在的樣子,那這些不知哪來的人又何必解釋個半天呢?

    不停地一直吹噓 Ivy 有多神!他棒到快變成上帝了,是曠古絕今的設計之神,根本無法用言語形容他有多厲害,現在一票人又替他解釋個沒完,真是超古怪的現象。

     

    平常心看待不就好了,等真的正式版了,真的醜成這樣,要解釋再來解釋也不遲吧。以上個人淺見。

    2013-06-21
  • 對於ios7──丑 就一個字,還需要解釋這麼多?

    2013-06-21
    • 果然是 Even 大神的文章,懂設計的想法就是不一樣!

       

      iOS 7 改變設計風格是否正確?看過今年WWDC 直播的人都應該清楚的記得,在播放介紹影片的時候,台下觀眾此起彼伏的掌聲,播放完畢之後很多人起立鼓掌致敬!在 Steve Jobs 去世之後,已經很少出現這樣的情景了!Ive 和 Federighi 讓今年的WWDC不再沈悶!
      雖然 ios 7 的 icon 並不是每一個都完美,但整體效果還是值得稱讚的。Jony Ive 的過人之處就在於很好的平衡了平色亮色與漸變透明。無論圖示如何排列,無論和什麼圖示放在一起,都不會對整體效果產生太大的影響。icon 與 icon 之間彼此獨立但又使用同一套框架。第三方app開發者也可以使用相同的框架模式來設計icon。
       
      真要說ios 7值得改進的設計大概就是「訊號條」改成了「訊號圈」這一變化了。本來iPhone頂部的空間就比較不夠用:wifi,vpn,bluetooth,音樂播放,加上電信業者文字⋯⋯現在的訊號圈感覺太浪費空間了。
       
      另一個問題就是,既然要更改icon文字為細體,為什麼不直接換用類Myriad字體?是因為字母間距嗎?還是版權問題?Even 怎麼認為?
      2013-06-22
  • 買產品(iphone)不就支付了設計費......不懂你的邏輯@_@?

    2013-06-21
  • IOS 6 美多了。道理撑不起美感啊。呵呵。

    2013-06-21