恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Material Theme Editor 主题编辑器
0.0°
2018-06-04 原创文章 教程 举报 10368 16 14 11

Google官方Material Theme Editor的操作视频


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


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操作面板

江江江江, 这就是主题编辑器的操作面板啦!

Image title


这款主题编辑器有内置四套不同产品类别的主题,其中,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

Image title


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


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


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

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


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

1、Cover 封面

2、Getting Started 入门介绍

3、Material Theme 主题库(主要控件、字体、颜色以及示例界面展示)

4、Material Components 组件(全部的组建展示

5、Symbols(Sketch默认生成的组件库)

Image title



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


功能一:颜色  Color 

Image title

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


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

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


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

Image title

由于UI 中国只能上传一个视频,可前往B站观看:

https://www.bilibili.com/video/av23926642


可以看出:

主色 — 应用程序栏、按钮、选中样式;

次级色 — FAB、底部导航、滑块、单选/复选框;

背景色 — 页面背景色



功能二:字体  Typography 

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

Image title

由于UI 中国只能上传一个视频,可前往B站观看:

https://www.bilibili.com/video/av23926503



功能三:图形  Shape

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

Image title

由于UI 中国只能上传一个视频,可前往B站观看:

https://www.bilibili.com/video/av23926276



功能四:图标  Iconography

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


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


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

Image title

由于UI 中国只能上传一个视频,可前往B站观看:

https://www.bilibili.com/video/av23926183


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



总结

好啦,Material Theme Editor这款主题编辑器的功能我已经介绍完啦!

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


(我已经将Material Theme Editor添加到附件里了,大家可以下载试试吧,或许在工作中能够用的上哦~)


不明白的地方也可以文章留言或私信我,我会及时回复你的~

如果有不对的地方,欢迎大家留言纠正哦  (^_^)v


Image title

让我们一起变的更好吧!


更新:2018-06-04

下载
收藏

16人已收藏

Alebrije

任何值得去的地方都没有捷径。

  • 11

    作品

  • 150

    粉丝

  • 121

    关注

  •  【界面设计】必须了解的Android设计规范
  • 一致性原则
  • 学会 “ 聪明地工作 ”
  • 提高你的行动力

    猜你喜欢

      2018-06-04 原创文章 教程 举报 10368 16 14 11

      Material Theme Editor 主题编辑器

      0.0°

      你确定要举报Material Theme Editor 主题编辑器

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年05月26日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      14
      16
      11

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录