js 月份加一个月_近一个月使用的设计工具记录

最新推荐文章于 2023-08-29 09:47:37 发布

weixin_40008969

最新推荐文章于 2023-08-29 09:47:37 发布

阅读量144

点赞数

文章标签： js 月份加一个月

本文链接：https://blog.csdn.net/weixin_40008969/article/details/112078589

版权

步行上班以后，微信阅读时间停止不前，手机少看了以后脖子都好多了。

我的dribbble主页也没更新几个月了。

我发现我之前更新的网格是有问题的，有对也有不对的，更准确的不是我那样，本来想找sky写的总结贴上链接，但是看到他已经在个人主页删除了，就没法分享了，推荐可以加入sky的小密圈，东西都在他小密圈里。

不会用的话倒是可以这样：让设计更高效！正式为大家安利这个好用的「8点栅格」

这个月我主要涉及的工作有图标，界面，小图标动效，用到的设计工具有：Sketch、Zeplin、Bodymovin。

1、Sketch

大名顶顶的sketch不用多说了，我记得我还在大二大三时候，也就是2014年就开始频繁的出现在UI这行业里面，高效，轻量是sketch给我最深印象。我现在主要介绍最近一个月用的功能，非常简单。

Sketch里面的Create Symbol可以帮助你做出自己的组件库，当你在界面上画好一个元素，例如Navigation Bar,你画好标题字号大小以后，可以选中这个bar，利用Create Symbol按钮生成到Symbols里面，之后你可到各个页面去粘贴这个bar，在页面里面单独修改标题的内容文字。要修改字体大小或者对齐颜色等等，只需到Symbols里面，修改一下这个控件，其他页面使用到这个控件的样式属性也会跟着变化。

另外粘贴不是像ps里面，你需要去找到这个元素，进行复制，选择画板，再去那个画板对齐，sketch里面你点了Create Symbol以后，东西会出现在工具栏那里的Symbol里面，如下：

你对这些控件命名好有助于更加高效的使用这个功能，例如Bars，你再新建一个Navigation的时候，命名为Bars/Navigation，那么在Symbol里面就会自动帮你分类出来，Navigation会分在Bars下面，以此类推。

另外，像是字体样式，颜色样式都是可以做组件，进行高效使用

然后是Sketch的插件，好用的插件太多了，我安装的第一个插件是Sketch Runner，它可以帮助你安装其它插件，可以查找各种功能。

还有：Craft For Sketch

效率提升！Craft For Sketch 强火力插件入门

2、Zeplin

将你从切图标注中解放出来的Zeplin，你需要在sketch里面安装这个插件，然后自己电脑下载这个软件。

这个只需要你在做完界面以后，选择你的画板，上传，上传到你建立好的目录，OK了，所有切图标注的工作你就不需要做了。zeplin会自动生成这个界面的标注和切图，开发gg那边会打开zeplin网页，点哪里哪里就会出现标注和样式属性，并且sketch的字体渲染和ios一致，字行高都很完美。如果是ps用Zeplin，在这块还会出现问题。

不够方便的是sketch在画图标这一块，图标还是用ai绘制，完了可以粘贴到sketch，你需要整理好路径。

3、BodyMovin

BodyMovin是AE里面的插件，通过这个插件可以输出路径动画，生成一个json文件，这个文件给到开发gg，就完事了，目前最方便快捷的插件了。

Web页面，以svg/canvas/html+js的形式。Bodymovin自己提供了作为Player的js库——bodymovin.js Android原生，通过Airbnb的开源项目“lottie-android”实现； iOS原生，通过Airbnb的开源项目“lottie-ios”实现； React Native，通过Airbnb的开源项目“lottie-react-native”实现。