谷歌新出的这款 Material Theme Editor 神器,让你做设计又快又好! - 优设-UISDC

谷歌新出的这款 Material Theme Editor 神器,让你做设计又快又好!

2018/06/03 43460评论区

本篇文章主要是详细介绍 Material Theme Editor 这款工具如何使用,让大家快速熟悉和了解 Google 的这款工具,希望对大家能够有所帮助!

△ Google 官方 Material Theme Editor 的操作视频

一、Material Theme Editor —「一款强大的主题编辑器」

在2018年5月份的 Google I/O 大会上,Google 设计团队一款叫做 Material Theme Editor 工具,可以帮助开发者更轻松地制作既符合自身品牌又符合 Material Design 风格的应用。这款全新的工具可以简化工作流程并提升团队工作效率!

本篇文章主要是详细介绍这款工具如何使用,让大家快速熟悉和了解 Google 的这款工具,或许在工作中能够用的上。

二、简介

简单来说,这是一款能够在 Sketch 上快速生成:基于 Material Design 设计规范的控件库,并且让用户能够最大程度的自定义组件样式的插件!(Tips:只能进行符合 Material Design 规则的更改)

三、下载

下载链接:https://material.io/tools/theme-editor

安装插件后,在 Plugins — Material — Open Theme Editor 中打开。

四、Material Theme Editor操作面板

这就是主题编辑器的操作面板了:

这款主题编辑器有内置四套不同产品类别的主题,其中,Baseline 是 Material Design 基础设计组件主题,另外三个主题是 Google 基于 Material Design 设计语言创造出的不同产品类别的主题。

五、Material Studies

其实 Google 这次有基于 Material Design 语言设计创建了餐饮、旅行、新闻、购物、教育、金融等7款不同产品类别的主题,Google 称之为「 Material Studies 」,链接:https://material.io/design/material-studies/about-our-material-studies.html

在这个网站中,Google 有向你呈现每个主题整体设计思路,从产品架构、布局、色彩、字体排版、图标、组件、动效、设计与品牌的结合度等维度,非常详细,大家可以去看一下,相信会有很多的收获!

Material Studies 是为了向大家展示 Material Design 设计语言的灵活性,证明 Material Design 是可以创建出独特的以及富有表现力的产品的!让你了解 Material Design 并不是一个刻板不变的设计规范,而是能够基于其中的设计理念做非常多创造的设计体系!建议去看一下。

六、Baseline——Material Design基础设计组件库

好,我们打开第一个 Baseline (也就是 Material Design 基础设计组件主题),这个是最常用到的!

打开后会进入 Sketch 界面,看右上角,内置了五个页面,分别是:

  • Cover 封面
  • Getting Started 入门介绍
  • Material Theme 主题库(主要控件、字体、颜色以及示例界面展示)
  • Material Components 组件(全部的组件展示)
  • Symbols(Sketch 默认生成的组件库)

现在,让我们来具体了解 Material Theme Editor 的四个功能。

功能一:颜色 Color

通过该插件我们能够快速对组件中的主色、次级色以及背景色进行全局替换,它还会根据(WCAG)2.0 的规范对你选取的颜色做可视性校准(WCAG是指:Web无障碍指南,能够帮助残疾人士「学习障碍、认知障碍、光过敏等患者」更方便地使用。)

在颜色控制的面板左下角有三个色块,分别对应主色、次及色、背景色的调整。

任意点开一个色块,会弹出另外一个操作面板,在这里可以选取颜色,「Custom」和「Material」 ,可以进行自定义,也可以在 Material 色板库里选取颜色。

这里我有录制一段视频,可以帮助大家更了解具体每一个色块对应调整的组件:

△ 视频链接:https://www.bilibili.com/video/av23926642

可以看出:

  • 主色 — 应用程序栏、按钮、选中样式;
  • 次级色 — FAB、底部导航、滑块、单选/复选框;
  • 背景色 — 页面背景色。

功能二:字体 Typography

通过该插件,能够设置默认 Font Family,并且能够对每个字体层级设置字重,不过暂时不能修改字体大小,并且字体层级名称不能修改。

△ 视频链接:https://www.bilibili.com/video/av23926503

功能三:图形 Shape

有「Curved」 、「Angied」两个选项,通过这个插件可以全局设置卡片、按钮等的四个角形式,可以自定义直角、圆角或「折角」的形状。

△ 视频链接:https://www.bilibili.com/video/av23926276

功能四:图标 Iconography

Material Design 新推出了多种图标风格(填充,圆角,锐利,描边和双色),能够通过该插件快速下载不同图标风格的 Icons Symbol 以供使用。

这里的功能和官方宣传介绍的不一样,并不是直接点击就可以进行切换,而是会自动为你下载 icon 的 sketch 文件。

那难道不可以快捷更换 icon了吗?不,还是有办法的!

△ 视频链接:https://www.bilibili.com/video/av23926183

这是我在 sketch 中新建了一个页面,用组件设计了三个页面,当你点击任何一个组件的时候,右侧会出现快捷操作栏让你更改组件,分类很详细,点开「icon」可以看到五种风格的 icon 都在里面,选择就可以快捷替换了,而且还可以更改 icon 的颜色,还是很方便的。

总结

Material Theme Editor 这款主题编辑器的功能我已经介绍完了。

总的来说,Material Theme Editor 还是一款让人比较惊喜的工具,会简化我们的工作流程并提升团队工作效率。它也表明 Material Design UE 设计工具已经全面转向 Sketch 了!

欢迎关注作者的微信公众号:「野驴少女」

「提升效率的Sketch技巧与插件」

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/google-material-theme-editor-artifact

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 转场动效 优设大课堂 设计师 扁平化设计 交互设计师 界面设计 排版布局 职场 平面设计 配色 设计师专访 视觉设计 素材下载 web前端开发 设计流程 AI教程 用户体验设计 设计理论 神器下载 字体下载 海报设计 设计趋势 设计规范 psd下载 动效设计 图标设计 产品设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里