sketch 将动图转换为json_UI设计师如何创建sketch设计样式、库和UI套件
使用Sketch来创建UI风格设计的样式,将受益匪浅。使用本教程构建UI套件,并同时创建自定义(可重复使用)库,以提高设计效率与质量。
无论是Sketch专家还是Sketch的新手,设计师都会发现:Sketch中所创建的设计样式是项目的宝贵资源,能节省大量的设计时间。
设计样式不仅可以使内容保持一致,还可以轻松地更新多个文档中的颜色和图标等元素。本教程分步介绍了创建设计样式和UI套件的过程,并将使设计人员对Sketch symbol有更好的理解。
创建UI样式
“UI样式是一个全面的“使用文档”,可跟踪项目的所有重复元素,从品牌规则到文本用语的使用规范”
一个风格指南可以包括从简单的视觉元素的词汇和批准图像什么。本教程涵盖组织,颜色,图标,字体,文本样式和资产。
第一步:整理
1. 创建一个主文件夹来保存sketch文件,插件和其他必要的资源,例如字体和图标。(插件将在本教程的最后进行讨论。)
2. 启动一个新的Sketch文件,并将其命名为“ 项目名称库”。例如,如果您的项目是Toptal,则您的文件应命名为“ Toptal库”。
第二步:颜色
如果已经选择了颜色,则下一步是将颜色转换为symbol。
1. 为此,制作相同大小的正方形,并相应地更改其颜色。单击“创建symbol”,然后使用颜色/ @ color-name标签系统保存这些元素。颜色/ @粉色,颜色/ @背景灰色或颜色/ @ FFFFF 等标签的示例。标签的命名对UI样式的整理很重要,因此应从一开始就建立并遵循命名格式。
2. 完成后,将它们添加到UI样式页面。
3. 将色样保存在调色板的“文档”部分中。
有用的快捷键:R-矩形工具,T-文本工具,alt-测量距离。
将色样保存在调色板中。
第三步:图标
将图标变成动态symbol可以使它们的颜色轻松更改为上面第二步中保存的任何颜色。这意味着在将图标放入设计后,可以使用画布右侧的“检查器”通过一个简单的下拉菜单(称为“替代”)来更改颜色。
1. 将图标另存为符号(如果可能,请坚持使用.svg文件格式)。
2. 进入符号页面,找到图标,并使用以前保存的颜色中的默认颜色对其进行遮罩。为此,将颜色symbol覆盖在图标上方,然后在工具栏中单击“蒙版”(或右键单击并从弹出菜单中选择“蒙版”)。
3. 屏蔽图标后,通过取消选中检查器中“填充”部分下的复选框来删除填充。
4. 建立UI风格样式的图标。为图标指定颜色以及任何其他重要的颜色设定, 这种规范对于设计师很有帮助。
首先,使图标成为symbol。
接下来,使用先前的颜色symbol创建遮罩。
必要时,使用[替代]下拉菜单更改图标的颜色。
第四步:文字样式
一旦选择了字体,就该指定文本样式了:H1,H2,H3,H4,H5,正文,链接,标题,标签等。
1. 根据需要,选择多种样式的大小、粗细、字符和行距。
2. 写出一个单词(当您按下文本工具T时会自动显示“ Type Something”)并对其进行格式化参数以反映所选样式的详细信息。
3. 点击“创建新的文字样式”。
4. 在UI风格样式指南中整理文本样式。
创建文本样式可使UI风格样式保持一致。
第五步:设计工作
现在该结合所有前面的步骤来做一些设计了。如果已经以此来开展工作,则为了保持一致性,最好使用已经选择的文本样式,图标和颜色来重新创建设计资源。例如,在设计工作中可能有许多不同的灰色未曾考虑到,因此重新创建资源将保证所选颜色的一致性。不要忘记保持命名的一致性,并确保在工作时将其添加到风格样式指南页面中。
以下是一些工作建议:
按钮
1. 通过将按钮设为默认颜色并删除填充,可以使这些动态symbol像图标一样。
2. 若要始终使文本居中,请将文本框的宽度与按钮设为相同,然后使文本居中。
3. 为确保一致性,请使用已保存的文本样式。
4. 系统地给按钮命名,将这些元素另存为symbol。
5. 使用替代功能更改标签和颜色。
搜索栏
1. 将应用于搜索字段以及该字段本身中使用的图标和文本做大小约束。
2. 不要忘记使用以前保存在文档调色板中的文本样式和颜色。
3. 使用搜索作为标题将此元素另存为symbol,或者,如果您具有不同类型的搜索,请遵循标签命名系统,例如:搜索/标准、搜索/无图标。
单选按钮和复选项
1. 可以在symbol中包含一个symbol,可以创建一个智能单选按钮和复选项来进行进行测试。
2. 首先,在设计按钮时。使用复选框/选中的和复选框/取消选中,作为示例标签将该元素另存为symbol。
3. 创建输入时。在复选框符号旁边添加占位符文本,然后将整个设计转换为symbol。由于现在是输入,还需要设计:输入/复选框/选中并输入/复选框/取消选中等样式。
第六步:使用UI风格指南!
一旦创建了所有设计样式,就可以将库应用于要设计的文档了。在Sketch中,转到“首选项->添加库…”,然后添加库文档。
将库添加为项目设计文件后,即可在“symbol”部分中访问该库及其symbol。您会看到Sketch中的库,附带有iOS UI设计库,以及最近导入的设计库。
您可以在设计文档的symbol部分中找到所有库。可以根据需要,任意添加和删除设计库。
如果要更新symbol,请双击symbol本身,然后将显示库文档。进行更改后,请返回设计文档,然后单击右上角的更新按钮。
“可用的库更新”将出现在Sketch的右上角。
当库更新可用时,将显示库中已更改的符号。单击“更新符号”将批准更改。
导入/导出文本样式
文本样式不会随库一起保存,但是Sketch 的“ 共享文本样式”插件可以解决该问题。下载插件后,转到库文档,然后进入菜单:“插件->共享文本样式->导出...”。将此文件保存为库文档所在的文件夹。然后,在设计文档中再次转到菜单:“插件->共享文本样式->导入文本样式...”,然后导入刚刚保存的文件。您的文字样式将会出现。
导入/导出调色板
与文本样式类似,文档颜色不会保存在Sketch库中,但是Sketch Palettes插件可以解决该问题。与上面的基本相同,使用“插件->草图调色板->文档颜色->保存调色板”导出调色板,并使用“插件->草图调色板->文档颜色->加载调色板”导入调色板。请记住将其与其他库文档保存在同一文件夹中。
字体
InVision Craft是一套插件套件,可将Sketch软件提升到一个新的水平。Craft可让您用库存照片,原型替换图像,并同步到InVision,创建库等。如果下载了Craft,请在文档中单击“ cmd-shift-C”,然后将生成样式表。字体将在这里列出。
遵循上面概述的六个步骤,将使大型和小型设计项目的运行更加顺畅,最终结果将更加优美。如果它们是独特的或非常特定的,则样式指南,库和UI套件可用于一个客户端,如果不断创建标准UI元素(例如线框和原型),则可用于许多项目。
在项目开始时,投入时间来正确创建这些Sketch UI组件将节省大量时间,并可能在以后的许多项目中节省大量时间。
sketch 将动图转换为json_UI设计师如何创建sketch设计样式、库和UI套件相关推荐
- sketch 将动图转换为json_开源 | Picasso:sketch设计稿智能解析工具
开源二期项目专题系列(一) 1. 开源项目名称:Picasso 2. github地址: https://github.com/wuba/Picasso 3. 简介:Picasso是58同城推出的一款 ...
- 教你将GIF动图转换为JPG图片
在平时工作学习时,会遇到需要将gif动图转换为jpg格式图片的时候,jpg格式为静态图片,是不能动的,那么该如何操作呢?小编分享一个方法,感兴趣的一起来看看吧. 进入软件,在"文件批量重命名 ...
- R语言gganimate包创建可视化gif动图、可视化动图:、gganimate包创建动态线型图动画基于transition_time函数、使用geom_point函数显示动画移动的数据点
R语言gganimate包创建可视化gif动图.可视化动图:.gganimate包创建动态线型图动画基于transition_time函数.使用geom_point函数显示动画移动的数据点 目录
- 使用python将动图转换为视频
使用到的库 import os import shutil from PIL import Image from moviepy.editor import * import requests imp ...
- 只需三行代码轻松实现酷炫gif动图转换为mp4视频
前两天有同学在群里发问如何把自己的gif动图转换成mp4视频格式,据她说转换软件太麻烦,我想万能的python或许可以一战,查了一番资料后发现只需三行代码即可实现,以下为具体方法. 安装第三方包mov ...
- 神奇视觉效果动图_使用视觉效果图创建爆炸性视觉效果
神奇视觉效果动图 At Unite LA 2018 we unveiled the Visual Effect Graph, a tool for building real-time visual ...
- 怎样快速制作GIF动图?教你一分钟在线制作GIF
相信有不少新媒体行业的伙伴们在平时写文章的时候,都喜欢在文章中插入好玩的GIF动图来给文章增加趣味.但是当我们想要将自己拍摄制作的图片制作成GIF的时候,应该如何制作gif动图呢?这时候,大家就可以使 ...
- 在安卓项目中使用gifsicle编辑GIF动图-Android NDK 编译 gifsicle 为可执行文件记录
一.前言 最近项目中有需要压缩GIF的需求,最开始时试图使用FFmpeg通过降低GIF的分辨率和帧率的来减少GIF文件体积,但实际测试下来,大多数情况下压缩效果并不理想,甚至会出现降低分辨率后导出的G ...
- 怎么把多张动图拼在一起?怎样制作动态拼图?
现在的人们都很喜欢使用gif动图,由于gif动图相比于普通的静态图片画面更加丰富生动,所以深受大众的喜爱.那么,如果我们将多张动图拼接在一起时,会有什么样的效果呢?这时候,可以使用**在线拼接动**图 ...
最新文章
- 如何用计算机画立方体,画立方体-计算机图形学实验.doc
- 5G 承载网 — 基于 SDN 的 5G 承载网
- 填充一个池需要多少个线程?
- 螺旋矩阵 java实现(待消化)
- 【Android】14.2 外部文件存储和读取
- Redis之缓存设计
- 前端每日实战:47# 视频演示如何用纯 CSS 创作一个蝴蝶标本展示框
- 回忆我的军训,好怀念那时啊!
- 暴雪总裁总结游戏十条经验
- Auto CAD标注形位公差的方法
- php公告滚动源码,如何利用JavaScriptjQuery实现滚动公告栏(代码实例)
- Tkinter教程之Label篇
- 计算机的二三事——软件篇
- 优客365网站导航开源版 v1.5.2
- DOS命令字典..收藏
- ASIC芯片设计生产流程
- 变量被重复定义的问题
- Python 凯撒密码
- 设置SecureCRT来正确显示彩色
- Echarts绘制不均匀数据轴(y)
热门文章
- Boost正则表达式库regex常用search和match示例 - 编程语言 - 开发者第2241727个问答
- 美国政府在将Web业务赶出美国
- ES terms多值搜索及范围过滤深入剖析-搜索系统线上实战
- 无重复字符串的最长子串 python
- 使用VSCODE开发UE4
- java基础面试题总结
- systemtap notes
- unixlinux大学教程学习 第七章
- Yii2 composer更新后报错: Calling unknown method: yii\web\UrlManager::addRules()
- MySQL的InnoDB和MyISAM比较