Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences.
這是Material Design官方網站上對Material Design的描述,MD在2014年的Google I/O首度被發表,自此成為Google至今的「設計語言」。
會寫這篇文是因為自己嘗試設計了網站的LOGO,因為從以前就聽說有這樣的東西,也很喜歡這樣的風格,之前有一陣子寫前端都用Materialize這套CSS框架,但其實一直不太了解MD是什麼。
我覺得MD與其説他是一種「風格」,「設計語言」(Design Language)這樣的稱乎似乎比較潮更能傳達他的理念,所謂的「語言」是一種共識,或者說是一套標準,來描述不同的形體、概念應該要用什麼樣的元素來表達,讓了解這套標準的人不用特別解釋就知道使用這些元素的人想要傳達的概念,例如自然語言,我們使用辭彙和文法來表達概念;程式語言用特定的syntax來表示某種操作;而設計語言則使用特定的顏色、形狀、材料、排版等等來表達。
維基百科上對Design Language有以下解釋
A design language or design vocabulary is an overarching scheme or style that guides the design of a complement of products or architectural settings. Designers wishing to give their suite of products a unique but consistent look and feel define a design language for it, which can describe choices for design aspects such as materials, colour schemes, shapes, patterns, textures, or layouts. They then follow the scheme in the design of each object in the suite.
MD的理念源自於近年開始流行的Flat Design以及最早用在Google Now卡片的設計,Google將這樣的風格延伸並制訂了一系列的設計原則,成為Material Design。和Flat Design不太一樣的地方是,MD將扁平化的概念和3D立體空間結合了,不再是完全的2D平面,而是透過光影讓平面的元素之間有了深度的差異。
Designer Matías Duarte explained that, “unlike real paper, our digital material can expand and reform intelligently. Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch.”
在MD的Guildline的一開始就先定義了產生這些空間的基本要素: Thickness, Shadows, Light and 3D world,不同距離所產生的陰影不同,且不同的光線條件也會對陰影造成影響
在色彩部份MD也定義了一套色彩標準,每個標準色都有14種深淺,並建議以中間色(500)做為主色,我的LOGO選用的是Blue Grey。
其他還有很多不同的設計元素,有靜態的,也有動態的,像是物體該如何變形、移動,移動的速度變化、方向等等,一些UI設計經常會碰到的情境都有被定義。
我現在所用的這套Hexo Theme - Material本身就是用Material Design設計出來的,我認為MD的優點是清楚、直覺,相比之下有時候我會覺得Apple的設計風格有點太過夢幻,空虛的感覺,但iOS的優勢在於UX設計,以前使用Android的經驗是,客製化的選項太多讓操作變得有點複雜,不過有些人就喜歡花時間研究最適合自己的配置,而且上一次用Android手機已經是一年前了,不知道現在的Android演變得怎麼樣了。
最近想買新手機,正在考慮下一隻要買Apple還是Android,之前看Essential ph-1感覺不錯,因為號稱鈦合金機框和陶瓷背板,但看了一些實測影片貌似沒有宣稱的那麼耐摔,Apple的話i8沒那麼吸引人,iX又太貴了,現在就等明天Pixel 2發表看看表現怎樣再決定囉。