欢迎来到安徽智投网络信息技术有限公司官网 www.zhi-tou.cn!

收藏本站 联系我们 关于我们
当前位置: 首页 > 新闻资讯  > WEB技术 > 谷歌新出的这款 Material Theme Editor 神器,让你做设计又快又好!

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

发表日期: 2018/06/12 文章编辑:智投网络 浏览次数:999 标签: TAG1    TAG2    TAG3   

本篇文章主要是详细介绍 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 了!


如没特殊注明,文章均为智投网络原创,转载请注明来自 "http://www.zhi-tou.cn/news/view-42.html"
相关新闻

Validform表单验证总结

近期项目里用到了表单的验证,选择了Validform_v5.3.2。先来了解一下一些基本的参数:通用表单验证…

日期: 2018/06/28 浏览次数:10

在UI设计中色彩的运用

颜色和其他东西一样,使用起来需要适度。在一个界面中颜色过多会让人找不到重点,而太少友让画面太…

日期: 2018/06/27 浏览次数:4

IIS7 / IIS7.5 URL 重写 HTTP 重定向到 HTTPS

1、购买SSL证书,参考:http://www.cnblogs.com/yipu/p/3722135.html2、IIS7 / IIS 7.5 下绑定 HT…

日期: 2018/06/25 浏览次数:6

氛围独特情绪深沉的深色系网站,设计上有什么讲究?

在设计中,情绪的传达和氛围的营造通常是要看设计项目的目的是什么,而不同的配色和不同的元素组合…

日期: 2018/06/17 浏览次数:19

百度编辑器UEditor不能插入视频的解决方法

xssFilter导致插入视频异常,编辑器在切换源码的过程中过滤掉img的_url属性(用来存储视频url)_src/…

日期: 2018/06/12 浏览次数:18

谷歌所说的“整体网页设计”到底是什么概念?

Google 所提出的「整体网页设计」最近被越来越多地提起。对于设计师和开发者而言,它所涉及到的内…

日期: 2018/06/02 浏览次数:22

是时候让你的品牌LOGO也动起来了!

很多设计趋势的诞生,和技术本身的发展是分不开的。趋势和趋势之间的互相影响,也会不断催生出新的…

日期: 2018/06/02 浏览次数:18

如何优化操作流程,提升用户体验?

一、什么是操作流程?操作流程指的是用户为了达到某个目标所需要经历的操作和场景转换。举个生活中…

日期: 2018/05/28 浏览次数:23

百度图片搜索收录展现基础要求

一直有站长通过各种渠道向百度站长平台询问百度图片搜索收录排序的问题,为此我们专程采访了图片搜…

日期: 2018/05/28 浏览次数:24

好的搜索体验,就是好的用户体验

一. 前言搜索就像是用户与app或者网站之间的对话:用户通过提问表达信息需求,app或者网站通过展示…

日期: 2018/05/28 浏览次数:15