Breaking News
Tappier 輕鬆觸控,精采生活!

從易用性看 iOS7 扁平化設計

扁平化設計(flat design)近來成為顯學,像是微軟的 Metro 風格、Facebook 與 Google 的網站設計,現在則輪到了 Apple iOS 7 粉墨登場。簡單來說,扁平化設計就是去除掉設計中的”3D”成份,像是光影效果、浮雕、斜角、漸層等等,這些都是用來製造立體感常用的手法。扁平化設計試 圖把這些多餘的元素去除,呈現出簡約的美感。這篇文章並非要討論 iOS 7 美或醜、是否”參考”別人的設計,而是試圖從易用性角度來檢視新版設計。

iOS7

首先讓我們來看看 iOS 7 的 Control Center,如果你曾經用過 Android 手機或是 SBSetting 就會很熟悉,這是一個可以快速調整常用設定的介面。

ios7_controlcenter

看起來如何?易用性有甚麼問題?

能辨識出哪些地方是可以按的嗎?上面的五個按鈕可以快速開關某些功能,最下方可以打開常用的 App,還有 AirDrop、AirPlay、調整亮度、音量……等一下,那個音樂播放進度是可以拖曳的嗎?播放進度只有一根細細的白色棒子,跟亮度、音量的小圓鈕不 同,大概是無法拖拉的吧?但是以往的 iOS 音樂播放 App 是可以拖曳調整播放進度的,這樣的經驗不一致可能會讓使用者困惑。歌名跟專輯名稱是可以按的嗎?不確定,要按了才知道-這就產生問題了。

能一眼就認出各個按鈕的用途嗎?最上方的按鈕大致都是常用的功能,所以沒有問題。下方左二的 App 就有點讓人困惑了:只有一根指針,所以不是時鐘?不是羅盤?所以是碼錶嗎?又一個讓人困惑的地方。

再來看看顏色與背景。背景是很大的問題,半透明的效果加上五顏六色的桌布,結果造成 Control Center 看起來也五顏六色,讓人容易混淆視覺重點。文字的顏色未統一,選擇淺色背景時就不好閱讀白色文字,選擇深色背景時則不好閱讀黑色文字,如果背景不是透明 的,這個問題會小一些。如果參考其他扁平化設計的範例,則大多是用鮮明的單一色彩為背景,讓文字有足夠的對比,方便閱讀,如微軟的 Metro 風格。同一區塊中的文字,除非有特殊功能,也大多是同一色系。

windows_phone

前面有提到扁平化設計中,有時會減少文字的陰影,所以背景常用鮮明的色彩製造對比。下面這張圖可以看到,如果你選擇淺色背景的話,主畫面中 App 的名稱就很難辨識了。是不是應該考慮加些陰影呢?(有些示範影片中是黑色字,但遇到深色背景則會有同樣問題)

iOS7_Mainscreen

此外,所有圖示都重新設計了,但有些似乎過於抽象,較難從圖示中辨識出其功用,像是 Photos、Game Center 這兩個;Newsstand 的圖示看起來較花,我個人認為辨識度也較低。這些圖示除了設計上較為扁平之外,使用的色彩也較為”清淡”,飽和度跟對比都降低了。這樣的風格改變,對於辨 識度是否有影響,可能需要進一步的研究才能確定;只是跟第三方的立體 App 圖示排在一起時,多少是會感到突兀、較不明顯的。

除了主要介面之外,所有 App 介面全部都改採扁平式設計了。其中氣象 App 也有前面提到的背景對比不足問題,如果在陽光強烈的地方恐怕更是看不清。如果能夠依背景自動調整字體色彩,或許可以解決這個問題。

ios7_weather

別人怎麼做呢?最近頗受好評的 Yahoo! 氣象 App,則是把背景加深、部分文字加點陰影來維持易讀性。

yahoo_weather1

由下往上拖曳,會有模糊背景的效果,下方資訊區塊則有較暗的背景。資訊越多,閱讀起來就越困難,必須降低背景的干擾。

yahoo_weather2

回到 iOS 7 的部分。其他 App 的背景就很單純了,所以資訊呈現也很明確,沒甚麼會讓人混淆的地方。像是日曆、郵件等等,看來都很精美。

前面提到的問題,大多是從靜態畫面來看易用性,但實際上應該把動態的互動效果一併考量進來,才能完整評估一個介面好用與否。但是手機跟網站的一個重 大不同之處在於,少了 mouseover(滑鼠滑過)的互動,也少了一些跟使用者溝通的機會(如:mouseover 時出現底線或底色,表示這裡有超連結/按鈕);也因此我覺得靜態畫面的設計,在手機介面設計上是較為重要的。設計風格如果忽略掉易用性,很可能會做出一些 好看而不好用的產品。iOS 7 跨出了新的一步,但目前看來是有好有壞。希望未來的 Apple 能持續往好的那個方向走!

一些關於扁平化設計的參考文章:

Inside上的翻譯文章:淺析扁平化設計
前篇文章作者 Carrie Cousins 的另一篇文章:Principle of Flat Design(英文)
justfont:扁平化設計與字型學
集結扁平化設計作品的網站

☆ 感謝作者授權轉載,原文出自我是就吉http://georgechang.im/2013/06/12/usability-of-ios7-flat-design/

台灣科技大學MBA碩士班學生,來自文化氣息濃厚的台南,對於社會創新、互動設計與服務設計有興趣,目前努力學習中。Just do it!