那些讓人困惑的新設計潮流:不像按鈕的按鈕、模糊焦點的霧化背景

那些讓人困惑的新設計潮流:不像按鈕的按鈕、模糊焦點的霧化背景

扁平化設計(Flat design)大概是近年來最熱門的一個詞彙,這種特殊的設計趨勢最早應該能從微軟的 Windows Phone 7 開始算起,接著是 Windows 8、iOS 7、Android L 開始了全面扁平化時代,平面化的標示似乎無所不在。所謂扁平化指的就是去除掉設計中的立體成分,像是光影變化、按鈕設計等等,讓一切的元素都變成平面,許多評論家稱之為更簡約的設計,不過你對於扁平化的看法呢?

按鈕不再可以「按」,純文字按鈕才是最新流行 

姑且不論到目前為止累積的 3C 常識,單看 iOS 播放介面你覺得那些地方是可以點選的呢?就筆者而言直覺想到有陰影的音量調節鈕應該可以左右移動,不過對於最上面以粉紅色直條紋表示的撥放進度鈕就不是這麼確定了;一般來說暫停、快轉、倒帶三個按鈕應該是可以點的,不過最下方那三個粉紅色字體呢?大概要真的按按看才能確定,這就是扁平化設計的問題之一。

那些讓人困惑的新設計潮流:不像按鈕的按鈕、模糊焦點的霧化背景

國外的 Apple 觀察網站 Daring Fireball 曾指出這個令人困惑的問題,從 iOS 7 之後最常見的按鈕設計就是純文字按鈕,有別於以往用陰影或是線條創造出的按鍵效果,新的純文字按鈕容易讓人和單純的文字內容混淆,有些介面還將純文字按鈕與按鍵式按鈕放在一起,更是讓人不知道到底哪個才是真的可以點選的。

讓介面也能呼吸,增加間距和圖片大小的設計

現代的介面設計都會談到一個重要的設計理念,那就是讓介面「呼吸」,像是段落間距放大、每個頁面容納的圖像變少等等,以 Android 上的 Youtube 應用程式為例,雖然早期的設計的確是擁擠得令人難受,不過最新的 Youtube 5.0 中,每個頁面最多只能顯示一個半的影片,似乎這個呼吸的空間又太大了點。

那些讓人困惑的新設計潮流:不像按鈕的按鈕、模糊焦點的霧化背景

除了 Youtube 之外,像是 iOS 的資料夾設計也是增加呼吸空間的一個例子,iOS 6 中每個資料夾可以顯示 20 款應用程式,不過在 iOS 7 中一頁僅能顯示 9 款應用程式,想要找更多 app 嗎?那就只能向左滑切換到第二頁才行。整體而言,雖然增加了滾動次數,不過換來一個清爽的介面,感覺似乎是挺划算的,當然如果有辦法讓介面看起來一樣舒適,但又不需要額外的滑動似乎能更加完美。

半透明霧玻璃設計

前一段提到目前的介面設計潮流正朝著能有呼吸空間的方向邁進,不過對於蘋果卻又在某些部分反其道而行,例如霧玻璃化設計的控制中心。雖然這個霧玻璃設計在 iOS 剛更新時讓許多日本網友創造出了令人遐想的畫面,不過撇除掉這個用途,背景霧化的效果有時會讓使用者介面變得混亂,難以找到需要的訊息。

那些讓人困惑的新設計潮流:不像按鈕的按鈕、模糊焦點的霧化背景

舉例來說,若使用淺色的背景,霧玻璃化之後會讓白色的字體變得難以辨識;反之,若使用深色背景則會讓黑色字體看不清楚;彩色的背景霧化後,那些亮色的部分就會產生強調的效果,無意間混亂介面的重點,如果適用單一色彩為背景,或是去除掉霧化的效果這些問題就會小一些。

文字在叫囂,全大寫的英文字母選單

那些讓人困惑的新設計潮流:不像按鈕的按鈕、模糊焦點的霧化背景

這個問題台灣的使用者應該會比較少遇到,那就是英文字母全大寫的介面,對於外國的使用者來說,全大寫的選項簡直像那些文字在吶喊一般,而微軟的 Office 系統就這麼設計了。Ars Technica 的資深編輯表示,微軟說大寫的英文字母為了要讓選項更能清楚辨識,這簡直是太可笑的理由,有更多更好的方式可以改善這個問題,微軟卻選擇了這個降低閱讀舒適性的方式,他們實在該將這個提出全大寫主意的人給開除。

資料來源:arstechnica

延伸閱讀:

專業設計師告訴你 iOS 7 不為人知的設計細節

Google 談 Andorid L 「素材設計」新介面:透過設計師角度,提供使用者更直覺的體驗

Windows Phone 8 登場:Metro 介面、電子錢包等 8大重點整理

iOS、Android 原型介面設計工具:在你的筆記本上,還附有像素比例尺

洪詩詩
作者

PC home雜誌、T客邦產業編輯,長期報導手機、行動裝置、電信商以及行動支付、電商相關領域,負責手機平板器材、5G網路、無線耳機等產品評測,以及相關教學報導。

使用 Facebook 留言
水鬼
1人給推

1.  水鬼 (發表於 2014年7月14日 16:10)
文字按鈕好醜╯-__-)╯ ╩╩

那乾脆回到純文字介面就好啦

講這麼好聽扁平化設計╮(╯_╰)╭
小維
2.  小維 (發表於 2014年7月14日 17:47)
JB第一件要做的就是把霧化全砍掉
為什麼要去學那個硬不起來的公司平面霧化樣樣來╮(╯_╰)╭
三十二朔月
3.  三十二朔月 (發表於 2014年7月14日 18:40)
※ 引述《小維》的留言:
> JB第一件要做的就是把霧化全砍掉
> 為什麼要去學那個硬不起來的公司平面霧化樣樣來╮(╯_╰)╭

首先,Live Blur功能不用JB就可以關掉了,只需要去設定「輔助使用」把高對比打開。

再者,蘋果於1998年推出第一代Mac OS X 1.0的時候,就有這種Live Blur效果,微軟還停留在Windows 98,不要說Live Blur或美觀的GUI了,連圖示都是點陣圖。

霧化玻璃效果本來就是微軟抄蘋果的╮(╯_╰)╭
小維
4.  小維 (發表於 2014年7月14日 18:43)
調對比下面那排是直接變灰色...實在是不能看
JB能直接取消霧化但不要那種死灰色
發表回應
謹慎發言,尊重彼此。按此展開留言規則