iOS7 諭示的未來:從去擬物化看未來科技產品設計




編按:有不少人對 iOS7 的設計很不習慣,甚至到感冒的地步,但你知道蘋果設計團隊背後的真正巧思嗎? 本文作者 Howlin Yang 帶你從他的觀點看 iOS7 設計在行動裝置上的變革,以及思考背後對未來科技產品的洞見

 
又是一篇 iOS7 的罵文嗎?不是的。讚美文?應該也不是。在 Even wu iOS 7 的設計和 David Chen「扁平化是假議題」 兩篇大作之後,還敢寫這類文章真是找死。

本篇想探討的是,為什麼 iOS7 會變成這個樣子,Apple 到底看到了甚麼樣的 Vision?

iOS7究竟好不好用?看看身邊的朋友吧,通常是哀嚎的多:

「怎麼這麼醜啊!」 (視覺出包)
「按鈕和內容全混在一起了!」(易用性不佳)
「媽啦!螢光色,我要瞎了!」(視覺出包)
「這根本是 Android 啦 」(品牌辨識度混淆)

…族繁不備其載

 

更新 iOS 7 有這麼慘? 4 歲男孩痛哭流涕

iOS7 用了各種新設計,卻造成一場災難,酸民罵聲一片,但我是設計師,儘管不喜歡,在地上痛哭 + 咒罵 + 打滾完之後,爬起來除了要接受,還得學習如何使用 iOS7 的設計語言。

如 Tapity 這個 Blog 寫的:「大家都可以說它很糟,但我決定先研究它兩週後再下定論

Good!!,這心態我欣賞。於是我也催眠自己:「它沒那麼糟,它沒那麼糟,它沒那麼糟….」最後真的發現, iOS7 想描述的東西並不簡單。希望不是我的幻覺,在此分享:

 

Flat Design means more than you think.

什麼是扁平化?是不是沒有陰影?沒有框?沒有漸層?沒有材質?就是扁平化?

如果是的話…
巨匠可就樂歪了,Photoshop 只要教兩堂就可以結業了。(大誤)
老闆也樂翻了,因為 PPT 也可以做出扁平化設計,人人都是設計師啊!(攤手)

為什麼 iOS7 要做這種愚蠢的設計?Apple 不行了嗎?
我想,它是看到了更遠的未來。

扁平化設計,指的不單視覺上,更是資訊架構上。從 2010 年 Mobile First 一書,不停強調的 Content First 到 win8 UI Guideline 中,進一步禁止了三層以上的樹狀選單及 iOS Human Interface Guideline 中,一再宣揚的幾個準則:

 

1. Landing Page 不重要,要打開 app 馬上可以用,別廢話,快上菜。

As much as possible, avoid displaying a splash screen or other startup experience.
It’s best when users can begin using your app immediately.

iOS7-future-1

 

2. 貴寶號是啥,Brand Name 為何,公司理念、老闆妄想… 阿撒不魯的都不重要,重點是使用者。行銷手段,應該低調的,偷偷的、置入性的、暗示的。只有貴族懂得低調奢華,暴發戶卻會唯恐人不知。

Incorporate a brand’s assets in a refined, unobtrusive way.
People use your app to get things done or be entertained; they don’t want to feel as if they’re being forced to watch an advertisement. For the best user experience, you want to quietly remind users of the brand identity through your choice of font, color, and imagery.

iOS7-future-2

 

這一切在都在告訴你,行動介面裝置,For users, By users — Made for users, Refined by users.

你的公司不重要,使用者最大。你想做甚麼也不重要,重要的是使用者想做甚麼。

 

儘管 iOS7 沒有明講,但透過介面改造,告訴你就是非得這麼做不可,扁平設計 (flat design) 不適合複雜、多層次的介面。我們先回到 2009 年,當 iPhone 上市時,常看到老闆拿著網頁,就想把內容都塞到 app 裡,那時候設計師還勉強能處理,頂多就是導覽蠢一點,顏色多一點,陰影多幾層,icon 都擬物設計,倒也混過去了。

萬一再碰到這種需求,設計師真的要哭了,轉成扁平化的過程會相當困難。不再有陰影、不再有漸層,內容和按鈕混在一起… 要知道,表現技法都是設計師的武器呀,我們宛如被剝得精光,被丟到籠子裡徒手博獸。為什麼會這樣子?

因為設計不再只是視覺問題,扁平化設計和資訊架構牢牢綁緊,要簡單,明快,直覺,打開就可以用,比以前更強調 Right Here, Right Now。

iOS7 假定使用者都是明確的目的導向,對 affordance 依賴降低,甚至, 不可以有 affordance。

什麼是 affordance?有些中文翻作承載性,我喜歡的翻譯是「可預示性」,表示一個好的介面,必須要提供足夠的線索,讓人一眼就能看出它是怎麼操作的。例如設計按鈕時,會把它畫成是漸層的,暗示它是一個突起的立體物,按下去之後,漸層會上下反轉,表示已經被按下去了。

pressed-button-state

又例如,卷軸上的拖拉條,中間通常會有三條槓的突起,代表是可以拖拉的,這也是擬物設計,用真實世界的經驗,推知該介面要怎樣操作。affordance 連結了擬物設計、圖形介面、以及 Don’t Let Me Think 等的設計準則。

 

為什麼?這在人機互動上並不科學啊!

行動介面的設計體驗有三種:

  • 沉浸式,如遊戲,進入另一個世界,這個 app 與系統是隔離的,有自己的設計準則。
  • 表格式,著重資料類型的 app,資料一層層 drill down 下去,通常有 spring board 的選單頁。
  • 擬物,用真實物件暗示該按鈕的功能,如:齒輪代表設定 、垃圾桶代表刪除等等。

iOS7 改變了後兩者,把擬物減弱,簡化成線條狀,僅提供你最少的線索,著重在內容表現,視覺上干擾的東西全沒了,也可以說介面變得毫無個性。

 

iOS7-future-3

 

這代表 Apple 諭示的使用情境將會是:

 

iOS7-future-4

iOS7-future-5

 

是的,在穿戴式情境下,Flat Design 不是選項,而是唯一辦法!
擬物設計反而造成困擾。除了穿戴式裝置呢?

 

iOS7-future-6

iOS7-future-7

 

這支老影片暗示了 Flat Design 與透明螢幕將改變世界:

 

新海誠為野村不動產設計的動畫,裡面有很多 flat design 的介面風格,如 04’33” :

 

很遙遠的未來嗎?不,友達已經做到了,跟進者還有 LG 和 Samsung,透明螢幕結合實體的展示櫃已經上市了。包括我也規畫過的這一類專案 :

 

iOS7-future-8

iOS7-future-10

iOS7-future-9

 

甚至是來自電影的暗示:

 

iOS7-future-11

iOS7-future-12

 

iPhone 6 的概念機,請注意到,Apple 試著拿掉邊框,事實上,它們想打造的是一塊可透明也可不透明的「神奇玻璃」:

 

iOS7-future-13

 

Transparent Cell Phone Concept,可看到,材質渲染、陰影表現等,在透明材質上效果不好,也沒有意義:

 

iOS7-future-14

 

以上,為什麼 iOS7 要做出這麼大的改變,應該不是老賈死了所以內鬥,聽說 iOS7 的設計方向也是他拍板的,更不是 Jonathan Ive 吞了 LSD (大笑)…

 

iOS7-future-15

 

而是 Apple 看到了未來 –「人們會活在資訊的洪流裡,資訊,存在各個地方、隨時隨地,虛擬與真實結合,以無接軌的方式和人互動」他非得這樣做,只怕,還晚了 Android 一步呢。因此,這些困擾我很久的問題 (一堆朋友常問呀問的),都有合理的解答了。

 

Q: 為什麼 iOS7 不建議多層次的資訊架構,卻在介面上保留了多層 layer 的概念?
A: 彌補 affordance 的不足,沒有材質陰影,卻更強調用過場動畫帶出資訊

 

iOS7-future-16

 

Q: 為什麼 iOS 7 是白色底?毛玻璃效果?
A 它在模擬透明螢幕效果 (儘管有時候很糟糕…),手機不再是手機,而是一個透明介面,透過這個介面,在真實場景中得到更多資訊。

 

iOS7-future-17

 

Q: 為什麼顏色那麼螢光,我要瞎了!
A: 如果不用這顏色,根本看不見,請想想飛行員用的抬頭顯示儀 (HUD),廠商正千方百計要把它應用在車子上,筆者在規畫時也曾碰過透明螢幕的限制:像是最深黑色只能到 alpha 50%,如果用中明度、低飽和顏色,很容易和背景混在一起,一定得用高明度、高彩度的設計。

 

iOS7-future-18

 

Q: 字體太細了,我看不見!
A: 掛在透明螢幕上,字體太粗,會檔住視線…. 請回想公車玻璃上的電腦割字,多半是粗體字,是否檔住了乘客的視野?是否惱人?廣告是為了由外能清楚看到,如果由內往外看呢?

 

iOS7-future-19

 

Q: iOS7 我就是不喜歡…
A: 但你還是會買 iPhone 呀,也許 iOS 7 不適合現在的硬體,但 Apple 需要做實驗…. 就算他把使用者當小白老鼠,你也無法抗拒呀。Apple 目前只在行動裝置上嘗試扁平設計,我不認為它會擴展到 Mac 系統,因為沒必要。但它有必要將各種行動裝置的介面體驗一致化,扁平化就是最大公約數。

 

iOS7 做對了嗎?

方向對了,和事情做對了,是兩回事。目前來看,Apple 很多地方還沒做好,來自使用者的回饋是最準的。Flat design 並不適合設計多層次的介面,萬一再加上淺色配色,結果會更糟,如 iOS7 的 app store,把顏色玩死了。像是一堆糖果紙混在一起,無外框設計,無法有效歸類資訊,白色也壓不住各產品,形成零碎的視覺。icon 圓角與圓角之間的空間更形尷尬。

 

iOS7-future-20

 

同為扁平設計,Android Market 就比他強:

 

iOS7-future-21

 

同為白底設計,Acer 也優秀得多,就算把陰影漸層等拿掉也是的:

 

iOS7-future-22

 

iOS7 設計是革命的,卻也是有漏洞的,倒希望許多把 iOS UI kit 奉為圭臬的設計師,其實別那麼緊張,Apple 也會犯錯,行動裝置扁平化是個全新挑戰,還沒成熟,任何人都來得及作定義,dribble 上還有許多 redesign 的好作品,只要看見 Apple 的看見,了解其心中的「大蘋果」,即可隨心所欲,也不逾矩了,甚至能做出比它優秀的介面呢。

 

◎ 本文獲原作者授權幹誌,轉載自「iOS7 諭示的未來

關於作者

hlyangsterHowlin Yang,視覺設計師,兩年前被朋友拉去創業,經歷IDEA Show、資訊月、愛玩客、創投等經驗,從此踏上產品設計的不歸路。目前在 BenQ Guru 工作,從事介面設計。

本文著作權由 幹誌 及作者 幹誌編輯部 共同擁有(商業登記公司網站請勿任意轉載
著作在非商業使用條件下係採創用 CC「姓名標示-非商業性-禁止改做 3.0 台灣版」授權條款釋出。

About The Author

幹誌編輯部

幹誌是線上的文化創意誌,內容包含藝術人文娛樂科技影音等最新最酷的資訊,加入我們粉絲頁即時收到最新消息!

支持作者

喜歡這篇文章請給作者一個讚
 加入幹誌!