IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> 10分钟了解下这个Sketch插件,高效工作,快乐摸鱼 -> 正文阅读

[移动开发]10分钟了解下这个Sketch插件,高效工作,快乐摸鱼

上班摸鱼算是打工人们每天最喜欢做的事了,最近我看到了一则新闻,一位设计师竟因为上班摸鱼被开除了!

? ? ? ? ? ? ? ? ?

? ? ??

要说,公司后台监控软件不足为奇,毕竟可能出于安全防范的考量。不过,居然还统计鼠标点击次数和键盘敲击次数,合着没事用ipad练会画图也不行?!

于是,我不禁陷入沉思:同样身为一名设计师,我该如何高效摸鱼不被公司干掉?

思考良久后,我得出一个结论:即使摸鱼,但一定要有高质量产出,你总不能指望老板招你来上班是做慈善吧?

在此,大家要明确一个观念,高质量的产出和摸鱼并不矛盾,毕竟你摸不摸鱼,高质量产出都是必需品,不然被公司干掉那也是迟早的事!

? ? ? ? ? ? ? ? ?

? ? ??

于是,我开始搜索:设计师摸鱼工具推荐。

在浏览了众多摸鱼必备工具后,我种草了摹客,在一番深入了解后,发现Sketch有摹客插件。安装下载使用了半个月后,我终于实现了“高效工作,快乐摸鱼”的愿望!

摹客插件起到的是连接作用,将Sketch与摹客平台连接起来,把你Sketch中的设计稿上传至摹客平台,这样很大一部分工作,就能在摹客平台中高效完成。

话不多说,【高效工作,快乐摸鱼】的课程即将开始啦!

一、摹客能做什么?

  1. 在线评审

初版设计稿完成后,首先需要提交评审。之前给Leader评审时,经常双方聊着聊着就跑偏了,耽误时间不说,还容易忘记有哪些内容要进行修改。现在在线评审就能很好地解决这个问题!

你只需要通过摹客插件将设计稿上传至平台,通过分享按钮,就能一键分享设计稿给Leader审核了。

? ? ? ? ? ? ? ? ?

? ? ??

Leader打开链接后就能开始评审,除了常规的文字评论外,还可搭配矩形、圆、直线、箭头多种图标,并且能引用网址或文件辅助说明。在Leader评审的过程中,设计师就能着手修改,节省时间,提高效率。

? ? ? ? ? ? ? ? ?

? ? ??

2、标注

标注可以说是设计师们最头疼的工作了。标注不仅很花时间,而且很难实现面面俱到,总会有那些被忽略的小细节!而摹客的自动标注和手动标注,能帮你减轻80%的工作量!

  • 超省心的自动标注

在进入摹客的开发模式中,鼠标移到对应的设计组件上,就能自动显示该模块的长宽、边距等信息。这个功能相当贴心,大部分的标注工作都不需要手动完成了!

除了会显示基础的信息,摹客还可以将某个图层设置为百分比参照,当鼠标点击、hover设计图上其他图层,就会自动以该区域作为参照计算百分比,这样查看标注信息更加便捷了!

? ? ? ? ? ? ? ? ?

? ? ??

  • 配合说明的手动标注

虽然自动标注可以完成大部分的标注工作,但手动标注可以标识一些细节内容。摹客共有五种手动标注的方式,分别是文字标注、坐标标注、尺寸标注、区域标注、颜色标注等。

设计师在定稿模式中,只需要点击页面左侧对应的标注按钮,即可编辑相关标注内容,相当简洁方便了!

? ? ? ? ? ? ? ? ?

? ? ??

而且针对市面上常见的协作软件来说,摹客的标注种类最为齐全,所以利用摹客,不仅能快速完成标注工作,而且还能交出一份完美的答卷,这可真是摸鱼的最高境界!

? ? ? ? ? ? ? ? ?

? ? ??

3、切图

我通常是在Sketch中将所有素材都做好标记切图,然后再将设计稿同步至摹客平台中。整个过程其实也就只需要几分钟吧,所有切图工作就已全部完成了。

? ? ? ? ? ? ? ? ?

? ? ??

完成上传后,我会再检查下所有素材的情况,是否能正常显示,设计倍率和分辨率等是否正确。

全部做完后,就可以交付给前端啦!当然,前端在这份设计稿中,可以根据自己的需要,自主下载不同平台、不同倍率、不同格式的图片,甚至样式代码,也能一键copy,对他们而言,也能省事不少!

? ? ? ? ? ? ? ? ?

? ? ??

4、版本对比

改稿是每个设计师的伤,摹客贴心的配备了四种版本对比查看方式:双栏、蒙版、扫描、差异。双栏对比比较适合改动较大的设计稿,比如颜色对比、字体对比、布局变化等,能快速看出设计稿的区别。另外三种对比,适合查看设计稿中的细节修改。

? ? ? ? ? ? ? ? ?

? ? ??

要说交付前改稿,还只是折腾下自己,如果是在交付后再改稿,还会大大伤害前端的感情,你总不想每次改完稿,再给前端描述一遍吧。

所以,当设计稿迭代后,对于细微的变化,前端能使用版本对比,快速发现修改的位置,从而在他的代码中进行调整。这样你岂不是还能省出一部分与前端沟通的时间用来快乐摸鱼?!

二、如何使用摹客?

step1:搜索摹客,打开官网,在顶部下载摹客插件,将插件安装在Sketch上,登录摹客账号就能开始使用了。打开要上传的设计稿,点击顶部菜单栏【插件】,选择【Mockplus】;

? ? ? ? ? ? ? ? ?

? ? ??

step2:根据弹框提示,选择对应信息,点击【上传】,即可将设计稿上传至摹客平台。

? ? ? ? ? ? ? ? ?

? ? ??

写在最后

摹客插件让只能单兵作战的Sketch也拥有了强大的“团战”能力,从此可以和Sketch Measure之类的单机切图导出插件说拜拜啦。有了成熟的线上协作平台,能让很多需要多次沟通的工作更高效地完成,把大把的撕X ?沟通的时间省下来,网上冲浪,带薪如厕是不香吗?

咳咳,别忘了,我们的宗旨是高效工作,快乐摸鱼!最后,使用Sketch的小伙伴们别忘了下载插件:https://www.mockplus.cn/download/idoc-sketch

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2021-10-13 11:33:29  更:2021-10-13 11:34:57 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 23:22:12-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码