Google Material System 2018

Wayne Chen
AppWorks School
Published in
5 min readMay 14, 2018

Google 從 2014 推出 Material Design 開始,圍繞在這系統不斷地推出新的設計及規範,就在上週 Google IO 釋出了 Material Theme Editor、Gallery、Icons 以及 Color Tool 等工具,幫助開發者及設計者們更容易去協作 Material Design。

在此同時,重新設計過後的 Material Design 網站 Material.io 上線啦!

Make beautiful products, faster. Material is a design system — backed by open-source code — that helps teams build digital experiences

Google 其實沒有對整體設計做重大的改變,這次的改變的重點是,讓開發人員們,更輕鬆地將 Material Design 應用到產品上。

首先是 Material Theming

Material Theming is the ability to systematically customize Material Design to better reflect your product’s brand.

能夠透過修改顏色及版型等自定義項目,直接應用到產品的主題上。

Goolge 本身已經在使用這套系統,並表示任何公司可以輕鬆將系統修改為自家品牌的 Guideline,為此另外提供了一套工具,幫助開發人員完成修改的工作:Material Theme Editor

The Material Theme Editor helps you make your own branded symbol library and apply global style changes to color, shape, and typography.

可以使用編輯器進行設計,之後還能將設計輸出為 Material Theme,未來也會繼續釋出更多自定義元件。此功能目前只能在 Sketch 上使用,可以在網站中下載套件。

另一個大亮點 Material Gallery

Gallery is a collaborative tool for uploading design work, getting feedback, and tracking revisions — quickly and efficiently. Optimized for Material, Gallery generates redlines and connects to developer resources for implementing Material Components.

這也是 Google 使用多年的工具,用於內部協作及共享。開發人員可以將各自的設計發佈至 Gallery,其他人可以對設計做審查及評論,並且可以將 Gallery 上的設計帶入 Material Theme Editor。Material Galley App 現在已經上架到 Google Play 及 App Store 上,有興趣不妨下載來試用。

Icons

Material icons are delightful, beautifully crafted symbols for common actions and items.

這次還釋出了新的圖示集,這些圖示都可以自定義主題,修改輪廓、銳利等細項。

Color Tool

Create and share color palettes for your UI, and measure the accessibility of any color combination.

可以在網頁工具上,設計及共享你的 UI 色彩設定。

Material System 大致上就介紹到這邊,想知道更詳細的 Material System 的話,Google 把一切都放在那裡了!Material.io

想知道更多 Google 新花樣的話,請繼續鎖定 Google I/O 2018

--

--