在〈Scaffold 與 MaterialApp〉中,初次使用了 MaterialApp
,當時簡單談到:
*Material Design 是一套設計指南,目的是為了介面設計可營造最佳的使用者經驗,簡單來說,對於平面螢幕裝置的介面設計(手機 App、Web 網頁,甚至是桌面應用程式),Material Design 主張不侷促於實體元件的模擬(例如在手機螢幕中模擬實體世界的立體按鈕),畢竟電子螢幕中的數位元素,本質上不存在於實體世界中,應該要去重新定義數位元素本身應有樣貌、彈性與屬性的一種設計。 *
如果想詳細瞭解 Material Design,當然是詳閱官方文件〈Material Design〉,不想看英文的話,也有正體中文版的版本,只不過,對於開發者來說,這份指南也太詳細了…
要談到 Material Design,必須回頭看看 Google 過去的產品設計,每個產品之間設計風格上往往各不相同,Google 提出 Material Design 目的之一就是為了統一日後產品的設計風格。
另一個目的得從 iPhone/iPad、Windows Phone 的 App 設計風格來談,首先,iPhone 無疑地是智慧形手機、平版的濫觴之始,而在那個大家還不怎麼熟悉如何使用智慧型手機、平版的年代,將實體世界中人們熟悉的實物,在手機、平板的螢幕中模擬出來,令使用者可以借鏡過去實物的操作經驗,來熟悉手邊(當時)新穎的數位產品,成了當時 iPhone/iPad 的設計準則。
(其實擬物的設計,在個人電腦圖形化介面上早就玩過一輪了,想想看「資源回收桶」!XD)
之後隨著智慧形手機、平版的逐漸普及,不僅中、老年人,就連年輕人甚至小孩,也開始手機、平板不離手了,在設計上的一個問題就漸漸浮現了,擬物的經驗來自於誰?哪個時間點?哪個產品?整現實生活的實物經驗,每個人都不相同。
例如,國外曾經有個實驗,找了一群年輕人,要他們用傳統轉盤式電話打電話,結果一群人摸索了老半天,因為完全沒有使用過的經驗,根本無法成功撥號,這雖然是個較極端的例子,不過,如果智慧形手機的年代再早一些,設計介面的人,若在手機中擬物轉盤式電話的這件事,也許是有可能發生的。
2010 年推出的 Window Phone,不採用擬物的設計方式,而採扁平化的設計風格,基本上就是,完全以平面來呈現視覺元素,去除不必要的 3D 立體感(浮凸、陰影等),通常採用高對比的色塊之類的設計。
某些程度,就是減少擬物會因經驗差距而帶來的操作問題,不過,個人電腦的使用者太過擬物設計了,使得基於微軟扁平化的 Metro UI 設計,在 Windows 8 被罵到臭頭,微軟在後來的版本還得改回來,提供使用者自行選擇 Metro UI 或是傳統設計,倒是後來的 iPhone/iPad/Android 進一步將扁平化發揚光大,雖然 iOS7 剛換設計風格時,也是一度引來果粉們的躂伐,不過因為使用經驗上沒那麼深,後來倒也是順利推廣開來了。
只不過 Andorid/iOS/Windows Phone 等,因平台特性的不同,對各自對扁平化的設計,都有不同的詮譯;因此,Google 在提出 Material Design 時,就又有了一項神聖目的,跨平台的設計準則,希望這項設計準則,不會因為到了不同平台,而會有不同的詮譯。
(當然,技術上也得配合,才能令設計語言也能跨平台就是了,否則最後就像扁平化設計,也是各平台各自詮譯了,Flutter 在設計上,就是準備好畫面,然後丟給裝置的畫布元件,因此只要畫得出來就可以了,也就可以克服跨平台的問題。)
Material Design 的 Material 該怎麼翻呢?質感?物質?本質?Android 使用者經驗總監 Matias Durate,在 2014 年 Google 發佈 Material Design 的議程上說過:
We imagined… what if pixels didn’t just have color, but also depth? What if there was a material that could change its texture? This lead us to something we call ‘material design…
也就是說,想像一下…若像素不只有顏色,還可以擁有深度等其他資訊,就像材質(material)可以更換貼圖(texture)的話,結果就會產生 Material Design 這樣的東西…
這就是文件一開始談到的「電子螢幕中的數位元素,本質上不存在於實體世界中,應該要去重新定義數位元素本身應有樣貌、彈性與屬性」,電子螢幕中最基本的就是像素,從像素為出發點,把像素當成材質,賦予它顏色、深度等數位世界中應有的屬性,就可以衍生出屬於電子螢幕真正該有的設計。
好吧!這麼說還是有點抽象,每個人對 Material Design 的解釋其實也是有點不同的,就我個人這邊閱讀相關資料後,就開發者這方面,主要是可以先知道以下幾點:
使用者操作的是平面
正視操作的對象就是平面的事實,設計上最重要的就是如何在平面展現資訊,這方面可借鏡紙張的概念,例如大區塊化、高對比、標題與內容的區隔等,簡單來說,從各式印刷品中構思設計靈感。
資訊有層級關係
雖說是在平面上操作、獲取資訊,然而資訊其實是有層次關係的,在印刷品上,層次關係主要來自於列印段落、縮排、提示文字、引言等,或來自於頁與頁之間的轉換;然而,電子螢幕除了 X、Y 之外,還可以有顏色、深度、陰影等方式來塑造層次關係,雖然 Material Design 不強調擬物,但若可以適當展現層次,並不排斥必要的 3D 效果。
層次間的關係順序、往來也是重點,這一層次的資訊與前、後、上、下等層次之間如何轉換至關重要,應運用適當的動畫、轉場效果,來突顯層次間的關係。
善用材質(material)特性
Material Design 的 material,就如 Matias Durate 說的,就是將像素視為材質,只要是像素可以呈現的效果,必要時就加以善用,方才談到的顏色、深度、陰影等,就像是為像素這個材質更換貼圖。
例如,就按鈕這個概念來說,沒必要單純模擬實體世界的按鈕,數位世界中的按鈕可以做到什麼,適當的時候就讓它做到什麼,因此按鈕可以浮動、無邊框甚至與使用者進行對話,在 Material Design 中,也有不少卡片(chip)類的設計,也是類似道理,本質上是像素構造出來,只存在於數位世界中的東西,只要畫得出來,可以適當展現資訊,要擺哪都可以。
與傳統桌面 UI 不同,手機、平板這類數位產品,在應用程式開發時,設計風格會是必要的考量之一,Flutter 的起手式,幾乎都是從 MaterialApp
開始(如果是 iOS 開發,堅持 iOS 風格,是也有 Cupertino
可以使用),也是暗示了這一張,雖說 Material Design 應該是 UX/UI 設計師的職責,不過現實生活中,有時開發者本身也得處理這件事,若是如此,認識 Material Design 的基本出發點,對於 UI 元件的選用,應該也有一定的幫助。