Material Design
中文常譯為「卡片式設計」或「實感設計」
也看過材料設計、元素風格等等
這個是Google 2014年提出的設計準則
是一種設計風格、理念以及設計基本原則
當然一個重要的原因就是google常被詬病的UI拉
過去大家都覺得google的設計風格是個空白
然而google也一直在調整屬於他們自己的設計
從過去的擬物化、3D立體 一直到近年的扁平化
我覺得google走出了一條新的路
是一條先進與開創的路
因為Materialize Design不只是扁平化
不只是為了美觀、為了吸引眼球
更多的是數位元素與人的互動
什麼叫數位元素與人的互動
先講幾個概念
第一點，行動裝置崛起
我們以前可以利用大量的navbar、sidebar
或是我們稱bread crumbs的東西
或是用不同的layout、圖片、顏色
讓user可以知道現在在哪裡、在做什麼
也就是呈現user目前在網站上瀏覽的位置
但是行動裝置崛起
你光是圖片跟文字都嫌太多了
哪有地方來放這些原本應該存在的元素
所以現在很多行動裝置版的網頁都會有的問題
要不就是你的sidebar難用、階層混亂
就是你真正放內容的地太小、雜訊太多
所以必須要深刻思考
怎麼樣能簡潔設計、專注在內容上
又要能有良好的使用者體驗(清楚、明白的功能)
第二點，重新正視平面螢幕的事實
因為無論是電腦螢幕、或行動裝置螢幕
我們都知道是一個平面
近年內立體投影、3D螢幕也不可能突然普及
再者，直接在螢幕做3D內容
軟硬體的效能發展也並非如預想中的順利
所以繞了一圈
最方便、最有效率的方式就是不要再想3D拉
乖乖的把2D發揮最大的效益才是王道
當然這也包含利用設計讓2D具有微立體感的處理
近年網站設計在CSS、JavaScript的主流下
老實說也沒有太多3D的內容可以操作
即便是3D特效，也是2D變形模擬出來的
所以過去曾經發展擬物化、立體化的網頁元素
也慢慢地沒落，因為立體的東西如果也只能2D操作
實在是沒什麼意義
第三點，數位元素
Material Design是智利的設計大師Matias Duarte所推動
他說當初設計這個元素的互動，參考了紙墨的概念
這邊不會深入介紹這個”紙”的概念
可以參考下列連結
https://article.pchome.net/content-1733990.html
我想要講的是時代的更迭
會使得事物被重新定義
譬如 按鈕
對於有些年紀的人，可能會想到CD Player上的按鈕
按這個鍵播放、另一個鍵調整音量、另一個鍵換曲
這個是從機電時代起所賦予我們的”按鈕”概念
一個按鈕給我們一個功能
但是現在呢？我們慢慢地減少實體按鈕
就像手機，按鍵從十來個，減少到兩三個
甚至是許多無按鍵的概念機
所以我們現在/未來的”按鈕”概念又是什麼？
不再是一個單獨功能，可以是一個可變的組合
也可以跳出一個列表、跳出一個對話框、提示
這個概念叫FAB(floating action button)
再來，按鈕就是要像一個實體按鈕嗎？
有個圓圓的框框，裡面有文字或圖示說明動作
這也是我們受實體框架所侷限的想像力
我們可以利用有無外框、有無底色，
來顯示這個按鈕的層級；區別出功能的重要性差異
再來，『chips』常翻譯為紙片或晶片
是一個像是字母卡的元素
可以輕易透過手勢、按壓來執行排列、編輯或刪除的動作
chips可以很輕鬆的達成訊息＋指令
增加互動程度，並在有限的空間內簡潔的呈現出來
以上這些只是列舉幾個
Material Design所建議的幾個原則
帶給我們許多關於人機介面的思考
總結而言，Material Design要定義的東西叫做數位元素
幫助擺脫我們受實體物件框架所侷限的想像力
不要因為數位的東西容易創作、改變
就讓我們的網頁被設計的一團糟
所謂一團糟指的是降低網頁的易用性
譬如A網站設計的按鈕都要點兩下才會執行功能
B網站的要點三下、C網站的點四下還要往右拉
(這個舉例比較誇張拉…不過可以套用到其他地方想想)
這樣對於使用者體驗當然是悲劇
不過 換位思考
當然這樣也會有些缺點
因為Material Design實在是寫得很細很細
反而對工程師來說是一項負擔、也失去彈性
最後，再補充提幾個我比較有印象的點
第一個 減少不必要的動畫
這個比較好理解，畢竟把元素概念解釋完了
對於這個元素不合理的動畫，就要去掉
第二個 使用大量ICON
使用ICON有許多好處，譬如簡化畫面
也讓按鈕的動作看起來比較生動
越來越多瀏覽器支援svg格式的圖案了，應該是趨勢
不失真、且容易搭配CSS與JavaScript
至於實作嘛～
現在有些套件，套上去就變成material design了
推薦下面這個給大家試試
參考資料
最後的最後，雖然Material並不是多時尚，但很簡潔有力
但還是要知道”設計”這件事情就是不斷地變化
說不定不久的將來，就可以寫另一篇文來打臉這篇～
這篇就醬～
