原标题:快速生成Material 原生组件 | Sketch 技能分享
Android 的设计师福利到!
今天要介绍一个快速生成复杂 Material 组件的Sketch 插件—— Sketch Material。在介绍每个组件的生成方式同时会给出对应组件的 Material Design官方开发设计规范链接。
全文阅读时长:5分钟
多图
官方下载:https://websiddu.github.io/sketch-material/
GitHub下载:https://github.com/websiddu/sketch-material
安装
下载安装包
双击 Sketch Material.sketchplugin 完成安装
完成安装后的插件会在 Sketch Plugins 中显示
各组件具体操作解析
Sketch Material 一共有10个组件功能,可以帮助设计师快速的组建 Material Design 风格的组件,每次操作成功会生成该视觉样式分组,便于查找和多次使用。
1、生成 Buttons(按钮)
在 Sketch 中输入 button 所需文本,选中文本执行 Sketch Material Button...
共 6 种 Button(如下图左侧),由上到下依次对应右侧Button的样式。英文状态下生成的 button 文案会自动将小写转换为大写。
Material Design Button 规范
https://material.io/guidelines/components/buttons.html#buttons-raised-buttons
2、生成 Chips
和 Button 操作不同,需要Chips 样式可直接执行 Sketch Material Chip... 调出 Chips Generator(Chips 控制面板)。
控制面板分为左右两侧,左侧为6种 Chips 样式,右侧为 自由编辑区域,可添加和更改Chips所需要文案。选择和编辑完成后,点击Generate将会生成所需的 Chips 样式。
Material Design Chips 规范
https://material.io/guidelines/components/chips.html
3、生成 Diglogs
Diglogs 操作面板分左右两个区域。
左侧视觉样式选项,提供了 mobile 和Desktop 两种屏幕尺寸的样式,同时也可以选择是否显示弹窗顶部标题;
右侧为 Diglogs 文本输入区。
Material Design Diglogs规范
https://material.io/guidelines/components/dialogs.html
4、生成 Form(表单)
表单的功能样式使用率很高,在很多地方都会出现。
表单操作面板左侧为样式视图,可选择操作ADD 横向或者+纵向添加表格,或者 hover 进行删减。
右侧为左侧选中的表格编辑器。共有 6 种表单样式可以选择。
在表单设置中还可以导入和导出 JSON 文件,便于开发人员直接使用哟。
Material Design Form 规范
https://material.io/guidelines/components/dialogs.html
5、生成 Icon
Sketch Material icon,调出icon库。输入关键词可以搜索到想要的icon。
同样也可以切换 icon 的颜色,在查看模式下切换,icon颜色不会有变化,选中所需icon,将其拖出icon 库,形成所需icon。
Material Design Icon 规范
https://material.io/guidelines/style/icons.html
6、生成 Snackbars
Snackbars 的操作面板和Diglogs 很像,同样提供了两个平台的尺寸,也可以对Button进行选择性隐藏。
Material Design Snackbars 规范
https://material.io/guidelines/components/snackbars-toasts.html
7、生成 Table (表格)
表格操作面板左侧为表格的基本选项,选择性生成需要的效果。也可以选择 table 尺寸。
同时,也可以直接在外部复制需要Excel 和 Number 内容,黏贴到操作面板右侧,很贴心哦~
Material Design Table 规范
https://material.io/guidelines/components/data-tables.html
8、生成 Tooltips (提示)
和生成 Button 一样,选中文本后执行命令可以直接生成。
Material Design Tooltips 规范
https://material.io/guidelines/components/tooltips.html
9、生成 Typography (文本)
同样,选中文字后,选中文本后执行命令即可调出文字面板进行更改,这些都是 Material Design 中规定的样式哦。
Material Design Typography 规范
https://material.io/guidelines/style/typography.html
9、生成Elevations(投影高度)
共有7个投影值:0dp、1dp、2dp、4dp、6dp、8dp、16dp。
选中需要投影的图层,选择所需的投影高度即可完成设置。Material Design规范
https://material.io/guidelines/material-design/elevation-shadows.html
最后一点,规范是官方设定出来的,给予我们在设计过程中的参考目标,但是我们在使用的过程中,还是可以根据发挥自己的创意,推陈出新,规范应该使得我们的设计更加统一和完整,不应该成为我们达到设计目标的束缚。
本文由波普先生编辑/原创返回搜狐,查看更多
责任编辑: