蘋果重返榮耀的武器:減法美學?

蘋果重返榮耀的武器:減法美學?

上一篇我們說過,蘋果的介面堅持擬真的同時,也嘗試了卡片式、扁平化等設計,特別是一些不容易具體化的服務,例如 Siri、iCloud。但是,為甚麼 iOS 的介面變革如此的慢?為甚麼不乾脆直接走 Windows 8 的扁平化(flat design)路線?

扁平 vs 擬真

扁平化在本質上是對擬真的一種反動,所以很多人選擇將這兩種設計對立看待。扁平化設計的定義:

一種強調使用性的極簡設計,它代表了潔淨、開放的空間、乾脆的邊緣、亮麗的顏色和二維/平面的表達手法。微軟是其中一個使用這種設計的介面,被視為對當時流行的擬真設計的一種反動。扁平化設計的支持者認為一個 App 的設計應該是簡單的、圖標化的(icon-like),而不是像現實世界的事物,例如是把日記變成一個小型的真實版本。相較於把現實世界帶到介面裡,這種設計清楚的把科技事物和感覺事物清楚的對立。

扁平化設計的 Windows 8 真的好看嗎?好用嗎?至少坊間劣評如潮、難用之聲不絕。成功讓消費者滿意度「重回」Windows Vista 程度的微軟管理層,對扁平化設計的良窳應該心中有數。

Windows 8 的純粹扁平介面。圖片來源: Gizmodo

Windows 8 的殷鑑不遠,因此蘋果不可能急速改變介面。著名蘋果部落格 Daring fireball 的 John Gruber 就提醒

. . . . 當你已經建立了像 iOS 一樣的大量用戶基礎,你需要保持一份熟悉。如果用戶問:「這是甚麼?我在哪裡?我平常用的東西都跑哪裡去?」的時候,將會是一場災難。

設計師 Sebastiaan de With 也這樣評價坊間呼籲蘋果應該「扁平化」的說法:

. . . . 非常「扁平」的 UI 只是一個沒意義的時尚回應。好的設計師不會被風格所局限,只會被品味和謹慎所局限。

對於蘋果來說,擬真已經成為一個標記,不容易放下。先前網友曾為 iOS 7 作了一支概念影片,讀者卻毀譽參半;不少評論認為這個扁平化的網友想像太 Android,反而失卻了 iOS 的特色。

[youtube http://www.youtube.com/watch?v=ESivYZXYqYE]

就連蘋果的死對頭,Android 用戶體驗主管 Matias Duarte 也說

现在的使用者界面的設計裡正在發生一種束縛我們的事情:假木頭標板的潮流、像機場廁所指示板的潮流 . . . 這些潮後背後的大問題不是因為它們的美學素質,更大程度上是他們加之於任何事物上的框架。

事實上 Google 其實也不是完全的 Very Flat 風格,當中仍然有大量的陰暗、素材等視覺暗示(virtual metaphor)元素,有人稱之為 Almost Flat Design

Google 的 Almost Flat Design 仍然有陰影和背景素材。圖片來源: Smashing Hub

既然完全的去擬真亦不見得好,那麼 iOS 為何要扁平化?

究竟 iOS 7 會怎樣走?擬真是否真的末路了?

關於這方面,Tim Green 在「The future of iOS design」一文有很獨特的見解:

. . . . 一些在 iOS 上最流行、最著名的 App 圖標,幾乎已見不到任何高光、背景素材或紋路。有些仍隱含這些暗示性元素(例如 Evernote、Path 和 Spotify 的 App 圖標),但主流的方向已變。高光和漸變仍然健在,但是變得更隱晦,用放射狀曲面暗示透視或立體效果(Facebook、Google Drive、Dropbox、Flipboard)將會取代舊式光面。

. . . . 這些是令人愉悅的指向點擊元素(tappable element)的的視覺暗示。為甚麼?因為現在不是2007年了,我們都會注意到那些元素和流程,不再需要一些花哨的指引。當然,這些設計仍然有一些深度和連繫可觸性的內容,但它的提示都更洗煉,讓使用者在觸控螢幕上的互動感更敏銳。

這是 Tim Green 的概念圖:

以隱晦方式表達Skeuomorphism的概念iOS 7圖標。圖片來源: Medium

左:原來的 iOS 7 訊息 App 圖標;
右:以隱晦方式表達擬真設計的概念 iOS 7 圖標。圖片來源: Medium

以極簡設計馳名的 RSS 軟件 Reeder 也是這種「帶出擬真元素,但不犧牲可用性」的設計。

Reeder for Mac的極簡設計

Reeder for Mac 的極簡擬真設計(點擊圖片放大)。圖片來源: Reeder

另一個例子是 iPhoto for iOS,雖然其中有也大量的擬真元素,但它大幅砍掉了玻璃質感和和誇張的按鈕,立體效果也用更隱晦的手法表達:

iPhoto for iPad(點擊圖片放大)。圖片來源: Mac News World

既然蘋果不停在 iOS 5 和 iOS 6 上嘗試新的效果,我們可否從 iOS 5 和 iOS 6 中找到 iOS 7 的蛛絲馬跡?

從 iOS 6 預測 iOS 7

著名蘋果網站 9 to 5 Mac 預測最新的 iOS 7 將是:「『黑、白和完全扁平化』. . . 放棄大量的背景素材,和加入幾乎新的黑、白使用者介面元素。」

對,iOS 7 的關鍵詞是黑、白和扁平。碰巧地,iPhoto for iOS 就是廣泛使用黑與白的介面設計。重點是頂部的標題列和底部的工具列,均由原來蘋果常用的藍色,改成黑、白色。

iPhoto for iOS的黑、白元素。

iPhoto for iOS 的黑、白元素。

iOS 6 另外幾個重要的程式,包括 Music App、App Store、Podcast 和 iTunes U,它們的標題列和底部的工具列也分別變成白色和黑色的,而且它們的變化比 iPhoto更明顯:

iOS原有的邦迪藍Taskbar(左),Music App的白色Taskbar(中),App Store的黑色Taskbar(右)

iOS 原有的藍色標題列(左),Music App 的白色標題列(中),App Store 的黑色標題列(右)

我們可以再看看這幾個 App 的細節。最初的 iOS 標題列:

螢幕快照 2013-06-02 上午11.24.01

Apple Store App 工具列,是典型的 iOS 5 工具列設計,用的是 iMac G3 式的玻璃反光,按鈕浮在工具列上。

但新的按鈕少了許多高光效果:

螢幕快照 2013-06-02 上午11.31.45

iOS App Store 最近的更新後,少了玻璃高光,改用放射狀曲面立體和下沉式的按鈕。

螢幕快照 2013-06-02 上午11.34.52

iOS 6 的全新 Music App,加入了從未出現過的淺色調工具列。

music

新的 Music App 播放工具列也沒有玻璃反光,但這裡沒有「下沉式」按鍵。

這些按鈕設計與蘋果官方網上零售店5月底的新設計風格相同。考慮到蘋果近年不斷修改 iOS 的介面,這些新的變化暗示了 iOS 將怎樣走。特別是蘋果官網的評價不錯,因此上述風格可能將成為蘋果 iOS 7 的主調

螢幕快照 2013-06-02 上午11.43.16

蘋果官方網站的 iTunes 頁面工具列。圖片來源:Apple.com

不論 Music App 也好、App Store 也好,新的按鈕設計都與傳統的 iOS 按鈕不同。沒有了玻璃質感的反光,但加入了很特別的放射狀曲面;按鈕也由早前 Aqua 介面的「依附式」(sit on top of the windows)變成「下沉式」(Sunken into windows)。

以下我們比較幾個 App 的標題列,可以清楚看出各時期的不同設計語言:

螢幕快照 2013-06-02 下午12.11.20

相簿 App 用的是 iOS 5 系統預設深色標題列,採用淺黑色的半透明玻璃效果,中間玻璃反光。

螢幕快照 2013-06-02 下午12.11.32

新版 App Store 取消半透明玻璃效果,加重黑色、漸變效果滅少。白色文字亦沒有以往的亮白,使反差明顯降低。

螢幕快照 2013-06-02 下午12.16.40

iOS 5 的設定中的標題列,用的仍然是iMac G3 時期的淺色效果。

螢幕快照 2013-06-02 下午12.20.44

Music App 的標題列實際上是淺灰色,看似 OS X Mountain Lion的標題列,但漸變效果更輕微。字和按鈕其實是淺灰色而非黑色,反差不大。

然後再看看表列:

螢幕快照 2013-06-02 下午01.04.54

iOS 5 的 iPod 音樂列表倒是最普通的扁平化設計,背景都是純白色的。

螢幕快照 2013-06-02 下午01.05.15

iOS 6 的 Music App 音樂列表的白色接近銀灰色的,邊線統一使用輕微立體效果。

上述的風格都有共同特徵:

  1. 以偏黑/偏白色調為主
  2. 光暗對比和漸變的色調降低
  3. 玻璃質感不見了

換句話說,正如 Tim Green 所指:「高光和漸變仍然健在的證據,但是變得更隱晦,放射狀曲面將會取代舊式光面,來暗示透視或立體效果。」Odin 相信這可能反映了 iOS 介面的未來走向。

iOS 7 的未來方向

首先,iOS 7 將更趨向現今 OS X的工業風格。新的 iOS 7可能會放棄假木頭、假皮革的新古典主義,亦不再使用 iPhone 4、iMac G3 時代的玻璃風。

使用鋁合金背板的工業風格 iPhone 5(左),脫離了 iPhone 4(右)和 4S(中)的玻璃背板時代。

螢幕快照 2013-06-02 下午01.41.35

iOS 著名的新聞軟件 Zite (左)與 iOS 6 的 Music App(右) 都採用了簡潔的工業味設計語言。

隨著 iPhone 5 改用鋁質背板,將會跟隨 iMac Aluminium 簡潔、工業化的包浩斯風格,並配合 Mountain Lion 的金屬風格和下深式按鈕,由原來「標準條紋」的藍色風,改為黑、白色的陰影風格。原來的藍色「標準條紋」很可能會從 iOS 上絕跡,玻璃質感的反光亦會大幅減少。

螢幕快照 2013-06-02 下午01.51.29

著名工業設計軟件 Autodesk 的官方網頁工具列,同樣採用工業味重低對比的的漸變銀色。圖片來源:Autodesk

螢幕快照 2013-06-02 下午01.54.24

Adobe 官網所使用的鐵灰色的漸變工具列,色調與 iOS 的新 App Store 十分相似。圖片來源:Adobe

其次,將保留擬真設計,但降低擬真的幅度。以往 iOS 的擬真特色是玻璃反光、誇張的陰影、明顯的按鈕、甚至是近年的手繡線等,大量的細節滿佈表面,無不故意強調自己的存在。新版的擬真介面會更收歛,比較平面,但絕不是像扁平化的單調;大量細節仍然在暗地裡存在

螢幕快照 2013-06-02 下午02.13.15

Awwward 網頁設計獎官方網站(上),使用了與 iOS 6 Music App(下)的放射狀曲面的設計來構成立體格線。

螢幕快照 2013-06-02 下午02.07.45

Mailbox 這個後起之秀,頂部的工具列也用上與 iOS 6 Music App 相似的「下沉式」按鈕。

但是這些細節並不會像以往的玻璃反光一樣直接有明顯的界線在你面前、或像過去用大面積漸變或明顯差距來惹起你的注意,反而大量的細節都會收藏在更細微、更隱蔽的細節裡。設計將大得讓我們清楚地意識到它們的存在,或小得讓我們看不見它們的存在

也就是 Tim Green 所指的:「這不是本質上的「扁平化」,也與一般人倡導的「Metro」風格完全不同,而是一些令人愉悅的可指向點擊元素(tappable element)的視覺暗示。」

這可以算是擬真設計的浴火重生。

不是為 Less 而 Less,而是用 Less 去做到 More

當然,這些只是猜想,實際如何有待6月10日揭曉。

但盲目地追求扁平化設計,不像是設計天才 Jonathan Ive 的作風。最少,Jonathan Ive 對光影的追求也是很著名的。如果只是 Very Flat 就行,蘋果早就用一堆白塑膠做出像 Chromebook Pixel 一樣的 Boxy 風格了。

Jonathan Ive 設計的 MacBook Air 與 Chromebook Pixel 並列,Pixel 外表方正,不像 Air 隱含不同的曲面,能產生獨特的高光效果。顯示出 Ive 講究光影的層次。圖片來源: The Verge

Jonathan Ive 也是 Dieter Rams 的信徒,一直緊守著「Less is More」的原則。他不會加入無謂的裝飾。

Odin 不敢斷言蘋果將怎樣改介面設計,但重點顯然不是為 Less 而 Less,而是如何利用 Less 去做到 More。同樣地,重點不是擬真,也不是完全否定擬真,而是如何把「過度的、過時的」擬真消除。

圖片來源:Floriana

→現在就加入有物報告,觀看更多言之有物的文章。

«

»

科技島讀-你的未來趨勢嚮導

有物推出新產品囉!

由有物報告團隊製作的最新產品-科技島讀

透過閱讀科技島讀,你將能夠掌握科技趨勢,從更高的視角觀察科技將如何改變世界。

現在就前往 >> 科技島讀