Odin is misleading you!
Odin is misleading you!
Odin is misleading you!
Navigation
  • 關於Odin
  • 正文
  • 短文
  • 訂閱正文
  • 訂閱全文
You are here: Home › Article › iOS 7 與 Skeuomorphism 的未來(二):擬真的末路與重生?
← iOS 7 與 Skeuomorphism 的未來(一):蘋果的擬真問題
Odin略評MacBook Air、Time Capsule、OS X Mavericks →

iOS 7 與 Skeuomorphism 的未來(二):擬真的末路與重生?

2013/06/06 | Filed under: Article and tagged with: Apple, Design, UI
Odin 按:由於意外的關係,這兩篇文章結果遲了接近一星期才刊出,雖然很多本來屬於 Odin 的「想法」,結果因為太遲刊登而變成「馬後炮」,不過也讓我有充裕的時間修修補補,多添了一些內容。對,現在看起來真的好像「馬後炮」了,大家當成「想法」也好、「馬後炮」也好,自己惦量惦量看吧。

先前Odin說過,蘋果的介面在堅持擬真的同時,也有嘗試卡片式、扁平化等設計,特別是一些不容易被具體化的概念,例如 Siri 、例如 iCloud 。而另一方面,蘋果的 UI 被垢病,其實與「擬真」的關係也不是太大。

但是,為甚麼 iOS 的介面變革會如此的慢?為甚麼不就像媒體所說的,乾脆直接走「扁平化」路線?

扁平VS擬真?

「擬真」是否真的很差?最少專家的評論也不覺得,但「扁平化設計」呢?

扁平化在本質上是對擬真的一種反動,所以很多人都會選擇把這兩種設計對立起來。專家對「扁平化」的定義是:

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

扁平化設計的 Windows 8 真的很好看嗎?好不好看真的不知道,但是好不好用?最少坊間真的是劣評如潮,難用之聲不絕。是讓消費者滿意度「回復」到 Windows Vista 的 Windows 8 團隊,應該是心中有數。

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

如果蘋果真的要像媒體所說,一口氣全部「扁平化」又如何? Windows 8 的殷鑑不遠,就成為蘋果為甚麼不能把介面急速改變的原因。著名蘋果 Blogger , Daring fireball 的 John Gruber 就這樣說:

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

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

相比起過度設計的 UI 來說,非常「扁平」的 UI 只是一個沒意義的時尚回應。好的設計師不會被風格所局限,而只會被品味和是否考慮周詳所局限。

對於蘋果來說,「擬真」已經成為了蘋果的一個標記,先前 Simply Zesty 給 iOS 7 造了一個概念影片,雖然媒體好評如潮,但讀者毀譽參半,不少評論都指這個「扁平化」設計太 Android ,反而失卻了 iOS 的特色。


Simply Zesty 的扁平化 iOS 7 概念影片。影片來源: Simply Zesty

何況,全面扁平化也不見得就是好事。就連蘋果的死對頭, Android 用戶體驗主管 Matias Duarte 也這樣說:

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

好吧, Google 目前的 UI 好不好看?我不評論。 Matias Duarte 能否突破這個框架?我不知道。問題重點是: Google 其實也不是真正的 Very Flat 風格,當中仍然有大量的陰暗、素材等視覺暗示 (Virtual Metaphor) 元素,有人稱之為: Almost Flat Design。

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

既然 iOS 介面的「過時」其實並不因為「擬真」;既然 iOS 的介面不適合完全的去「擬真」;既然完全的去「擬真」亦不見得是好;那麼,為甚麼 iOS 要扁平化?要與擬真說再見?

究竟 Jony Ive 是否真的很討厭擬真?不知道,我們只知道 Jony Ive 喜歡極簡設計。

然而從上述的例子裡,我們也知道其實擬真未必違背極簡的原則。

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

關於這方面, Medium 的作者 Tim Green 在 “The future of iOS design” 一文有很獨特的見解:

上回選錄了一些在 iOS 上最流行、最著名的 App icon 。我們幾乎在它們上面都沒見到任何高光、背景素才或紋路。對,我們可以見到部份有隱含了一這種暗示性元素(例如 Evernote、Path 和 Spotify ),但主流都改為不同的趨向。這仍然是高光和漸變仍然健在的證據,但是變得更隱晦,放射狀曲面( Facebook 、 Google Drive 、 Dropbox 、 Flipboard )將會取代舊式光面,來暗示透視或立體效果。

對我來說,這是很明顯指向一個獨特設計風格的趨勢,如果蘋果真的看不出,我將會感到很詫異。這不是本質上的「扁平化」,也與一般人所謂要追隨的「 Metro 」風格完全不同,但這是一些可以指向點擊元素 (tappable element) 的令人愉悅的視覺暗示。為甚麼?因為這不在是 2007 年了,我們都會完全留意到那些中介元素和過程,我們手上不再需要一些花哨的指引。當然,這些設計仍然有一些深度和連繫可觸性的內容,但它的提示元素都被更佳的提煉過,對大家在觸控螢幕上的互動感知的改變變得更敏銳。

這是 Tim Green 的概念圖:

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

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

對,其實以極簡設計馳名的 RSS 軟件:Reeder,就是這種「帶出 Skeuomorphic 元素,但又沒有犧可用性」( Loyal 3 人機互動設計師 Ben Dansby語 )的設計。

Reeder for Mac的極簡設計

Reeder for Mac 的極簡 Skeuomorphism 設計。圖片來源:  Reeder

同樣地,雖然 iPhoto for iOS 也有大量的擬真元素,但它可同是個很典型的例子 --當大家把注意力集中於 iPhoto 極大量的玻璃架和畫筆上,但其實它當中也混雜了不少「很不 iOS 」的元素,大幅砍掉了玻璃質感和和誇張的按鈕,立體效果也變成了更隱晦的表達手法:

iPhoto for iPad 。圖片來源:  Mac News World

那如果說 iPhoto ,不,甚至是蘋果一直都在 iOS 5 和 iOS 6 上嘗試新的效果,其實我們可以在 iOS 5/6 裡找到一些 iOS 7 的蛛絲馬跡嗎?

iOS 6 裡的「 iOS 7 」

在我們從 iOS 6 裡看 iOS 7 之前,我們先重溫一下由 9 to 5 Mac 傳出的最新 iOS 7 傳聞:「消息形容 iOS 7 為『黑、白和完全扁平化』,這相對於會放棄大量的背景素材,和加入幾乎新的黑、白使用者介面元素。」

對, iOS 7 的關鍵詞可能是:黑、白和扁平。

碰巧地… iPhoto for iOS 就是用黑、白的使用者介面元素:

iPhoto for iOS的黑、白元素。

iPhoto for iOS 的黑、白元素。

當中的重點是頂部的標題列和底部的工具列,均由原來蘋果常用的藍色,改成黑、白色。

如果說 iPhoto 的標題列和工具列的顏色改動,若干程度上能反映了未來 iOS 7 的介面風格,那我們更必須提及至 iOS 6 開始的幾個重要的介面改動: Music App 、 App Store 、 Podcast 和 iTunes U 。對,它們的標題列和底部的工具列也分別是白色和黑色的,而且,它們的介面變化比 iPhoto 更明顯:

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

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

如果說使用了黑、白二色作主調的 Music App 和 App Store 可以若干程度上反映了 iOS 7 的新特徵,我們可以再看看它的新細節:

最初的 iOS 工具列:

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

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

新版的 App Store 和 Music App 工具列:

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

iOS App Store 在最近的更新後,改用新式的工具列,取消玻璃高光,改用下沉式的按鈕。

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

iOS 6 的全新 Music App ,加入了以往 iOS 未曾採用過的淺色調工具列。

music

Music App 的播放工具列。使用的介面與被 9to5Mac 形容為「 Flat Design 」的 iTunes Player 一樣,都是沒玻璃反光,但這次沒有「下沉式」按鍵。

更重要的是:這種蘋果官方網站上的按鈕設計是呼應的﹣﹣而蘋果官方網上零售店才剛剛在 5 月尾把設計改成這個新風格。

事實上,上述特徵與蘋果官網近期的變動很相似,也與 9 to 5 Mac 的消息頗為脗合。但是,考慮到蘋果近年不斷的偷偷修改 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)。

我們再看看標題列:

螢幕快照 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 的標題列,但漸變效果更輕微,而所用的黑色字和黑色按鈕,亦沒有 iOS 5 深色標題列的純黑,而是鐵灰色,黑白反差亦不大。

然後再看看表列:

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

iOS 5 的 iPod 音樂列表倒是最普通的 Flat Design ,背景都是純白色的。

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

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

上述的風格都帶有一些特徵:

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

正如先前 Tim Green 所指:「這仍然是高光和漸變仍然健在的證據,但是變得更隱晦,放射狀曲面將會取代舊式光面,來暗示透視或立體效果。」

當然, Odin 不敢是說「這就是 iOS 7 的介面」,但它可能反映了 iOS 介面未來走向。

 

iOS 7 的未來方向

基本上,最新一批蘋果出品的 Apps 都已放棄了 iMac G3 年代的舊派介面,改為更新式的 Mountain Lion 風格,主要的變化如下:

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

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

左邊的是 iOS 裡著名的新聞軟件「 Zite 」,右邊的是 iOS 6的 Music App ,兩者都採用了簡潔的工業味設計語言。

首先,是趨向現今 OS X 的 Bauhaus 工業風格。新的 iOS 7 可能會放棄使用用假木頭、假皮革的新古典主義,亦不再使用 iPhone 4 、 iMac G3 時代的玻璃風,隨著 iPhone 5 改用鋁質背板,將會跟隨 iMac Aluminium 簡潔、工業化的金屬風格和下深式按鈕,由原來「標準條紋」的藍色風,重點改為黑、白色的陰影風格,而原來的藍色「標準條紋」很可能會從 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 這個以巧妙的 To-do 的設計而馳名的 iOS 電子郵件應用,頂部的工具列也用上與 iOS 6 Music App 相類似的「下沉式」按鈕。

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

這恰好就達到了 Tim Green 所指的:「這不是本質上的「扁平化」,也與一般人所謂要追隨的「 Metro 」風格完全不同,但這是一些可以指向點擊元素 (tappable element) 的令人愉悅的視覺暗示。」

這可以算是「擬真化」的浴火重生。

蘋果的官方網上零售店已換了新設計,包含了上述的各種要素:黑、白、去高光、放射狀曲面、下沉式按鈕等等。圖片來源:Apple Store。

蘋果的官方網上零售店已換了新設計,包含了上述的各種要素:黑、白、去高光、放射狀曲面、下沉式按鈕等等。圖片來源: Apple Store。

 

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

當然,這個只是個猜想,實際上如何還有待本年6月10日才能知曉。但是,盲目地追求 Very Flat Design ,不像是設計天才 Jony Ive 的手筆。

最少, Jony Ive 除了是以極簡設計而馳名之外,他對光影的追求也是很著名的。如果 Very Flat 就拉倒,蘋果一早就用一堆白塑膠來做像 Chromebook Pixel 一樣的 Boxy 風格了。

Jony Ive 重視光影效果,他設計的 MacBook Air 與 Chromebook Pixel 比較下, Chromebook Pixel 的外表比較方正,不像 MacBook Air 隱含不同的曲面,能產生獨特的光影效果。圖片來源: The Verge

Jony Ive 是 Dieter Rams 的信徒,一直緊守著「 Less is More 」的原則。

他不會加入無謂的裝飾,但是,他也不會作出無謂的「修飾」。

Odin 真的不知道蘋果怎樣改介面的設計,但是重點不是為 Less而Less ,而是如何利用Less 去做到 More。

同樣地,重點不是「擬真」,也不是把「擬真」整盤端走,而是如果把「過度的、過時的」「擬真」砍掉。

 


延伸閱讀:iOS 7 與 Skeuomorphism 的未來(一):蘋果的擬真問題

Share the post "iOS 7 與 Skeuomorphism 的未來(二):擬真的末路與重生?"

  • Facebook
  • Twitter
  • Google+
  • Pinterest
  • LinkedIn
  • Weibo
  • E-mail

Did you like this article? Share it with your friends!

Tweet
← iOS 7 與 Skeuomorphism 的未來(一):蘋果的擬真問題
Odin略評MacBook Air、Time Capsule、OS X Mavericks →

Odin’s splits…

@odin_asgard的推文

WP Man

  • 登入
  • 訂閱網站內容 RSS 資訊提供
  • 訂閱網站留言 RSS 資訊提供
  • WordPress 台灣繁體中文

Recently split to Odin

  • 「livestock」於〈傻瓜公告:Odin 今天被「拍扁」了!〉發佈留言
  • 「iOdin」於〈傻瓜公告:Odin 今天被「拍扁」了!〉發佈留言
  • 「David」於〈傻瓜公告:Odin 今天被「拍扁」了!〉發佈留言
  • 「X」於〈Odin笑談iPad mini(三):蘋果的最大敵人〉發佈留言
  • 「Eason」於〈短文:被遺忘的可穿戴設備--智能耳機〉發佈留言

What a Mess

android announcement Apple Apps Article Blackberry Borrowing Gadgets Carrier Chromebook Cloud Design Facebook Google HTC Industry Internet iOS iPad iPhone Link blog Mac MadeWithPaper Maps Media Microsoft miscellaneous Netbook Nokia Patent PC Review Samsung Search siri SmartDevice Smartphne smartphone Social Network SoLoMo SteveJobs Tablet Twitter UI wearable Web

© 2023 Odin is misleading you! - 分享授權:CC 姓名標示-相同方式分享 4.0