什么是sketch Libraries？如何使用？

2019-07-0514:58:26UI设计Comments5,068 views字数 1491阅读模式

什么是Libraries

Libraries是帮助我们更方便使用组件的工具。先看一下如果不使用Libraries的时候是怎么解决这个问题的。 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/13972.html

我们可能会有一个专门的sketch文件，里面是各种各样已经确定下来的组件，需要用的时候，打开这个文件复制粘贴到你要用的文件里。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/13972.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/13972.html

其实这里我们离Libraries已经不远了，因为Library的前身也是一个普通的sketch文件，只不过是把需要用到的图标、按钮、文字等都预设整理成symbol，然后添加到sketch系统中。所以没有想象中的麻烦，只需要加上几步，就可以省去每次都打开文件复制粘贴的步骤，随时使用了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/13972.html

什么是sketch Libraries？如何使用？
下面就来看一下我们怎么来建立自己的组件库吧。

如何使用

1.顺序第一步可以确定一下建立的顺序，避免因为没有规律而造成一些重复工作。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/13972.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/13972.html

这里我们需要先考虑一下“颗粒度”的概念。大家应该都玩过1024这个游戏，游戏里2合成4，4合成8，8合成16……，“2”就是这个游戏的最小颗粒度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/13972.html

什么是sketch Libraries？如何使用？
同样在搭建自己的组件库的时候，我们也应该从最小的颗粒度入手，逐渐合成更高级的组件。比如我是从“颜色→图标→文字→按钮→组件 ”，这样当你建按钮的时候，就可以直接使用之前已经建好的颜色和文字。
什么是sketch Libraries？如何使用？
2.命名命名按照自己的习惯中英文都可以，关键是整理时要有清晰的思路。从命名开始，建立清晰的分组，以便之后的查找使用。这里是用“/”来分层级，比如“按钮/主要操作/常态”。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/13972.html
什么是sketch Libraries？如何使用？
什么是sketch Libraries？如何使用？
3.建立有了清晰的思路，就可以按照定好的顺序逐步建立了。下面以颜色和图标来举例。首先我们建立好颜色的symbol，如下图。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/13972.html
什么是sketch Libraries？如何使用？
接下来开始建立是图标的，将图标图层设置为蒙版后选择插入颜色的symbol，这样图标和颜色就发生了嵌套关系，切换图标的颜色非常方便。同样如果修改了颜色，那么所有使用该颜色symbol的元素也会一起改变。
什么是sketch Libraries？如何使用？
4.导入添加准备好文件后下一步是将文件导入，选择sketch→preferences，中文是“偏好设置”。打开后选择Libraries→Add library，把文件添加进入。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/13972.html
什么是sketch Libraries？如何使用？
添加成功后新建一个文件看看成果吧。点击symbols，找到我们刚才添加的文件就可以插入使用我们预设好的组件了，到这一步我们已经完成了自己本地组件库的建立和使用。
什么是sketch Libraries？如何使用？
5.共享和同步建好了自己的组件库，也可以把它分享给别人，关于共享和同步有很多方法，比如……不过大多都有一些技术门槛，使用起来比较麻烦。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/13972.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/13972.html

下面只介绍两种我认为操作简单、好控制，不需要过多设置和管理的方法，分别是：人工同步和sketch cloud 同步（个人觉得可以满足多数使用需要了，对其它方法有兴趣的小伙伴可以研究一下相关资料）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/13972.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/13972.html

· 人工同步文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/13972.html

每次更新后的sketch文件发送给大家，由大家自己添加到Libraries，把旧文件删除就可以了，虽然每次需要手动添加删除，但是这个方法不需要设置什么没有技术门槛，对于更新不那么频繁的中小团队使用没什么问题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/13972.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/13972.html

· Sketch Cloud 同步文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/13972.html

这个方法是把sketch文件传到Sketch Cloud，然后开放该文档或者分享给指定的人，接受分享的人将文件添加到Libraries，之后的更新Sketch就会自动下载了，是比较方便的方法了。不过这相当于把文件存在了云，需要注意信息安全，如果是保密的项目就需要评估一下是否使用了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/13972.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/13972.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/13972.html

以上就是我建组件库的过程和思路了，这也是我第一次系统的整理使用，希望和大家一起学习讨论，如果有推荐的方法欢迎留言讨论哦~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/13972.html

不少APP都选择了较写实的图标。
划重点
· 顺序建立，从最小的颗粒度入手，逐渐合成更高级的组件。· 建组件的时候要有清晰的思路。命名以“/”来分层级，建立清晰的分组。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/13972.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/13972.html
  • 本站内容整理自互联网，仅提供信息存储空间服务，以方便学习之用。如对文章、图片、字体等版权有疑问，请在下方留言，管理员看到后，将第一时间进行处理。
  • 转载请务必保留本文链接：https://www.cainiaoxueyuan.com/ui/13972.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定