等等

选择对的工具,就成功了一半。可是很多人并没有意识到这一点,还是习惯于用自己最顺手的,不愿意去改变。换个角度想想,互联网发展的这么快,很多跟不上时代发展的东西都会淘汰,在没有 Sketch 之前,大家用 PS 做 UI ,有了 Sketch 之后,工作效率提升很多,既然迟早都会改变,那为什么我们不做最早吃螃蟹的那一拨人呢?

那么下面就从几个方面来分别介绍一下好用的软件,这些都是实际工作会遇到的。

  • 在线协同 —— 石墨文档
  • 图片管理工具 —— Eagle
  • 云存储 —— 坚果云
  • 高保真交互原型 —— Protopie
  • 动效制作+输出 —— AE+Lottie

 

在线协同——石墨文档

1. 安利介绍

石墨文档是一款轻便、简洁的在线协作文档工具,PC端和移动端全覆盖,支持多人同时对文档编辑和评论,让你与他人轻松完成协作撰稿、方案讨论、会议记录和资料共享等工作。

 

2. 如何使用

1)下载并安装客户端

支持 macOS 和 Windows 系统、移动端(iPhone、、Android、微信小程序)。有免费版的和付费版 (高级版/企业版),付费版比免费版多一些功能。

 

2)协同合作

可以把自己文件分享给其他人,协作者相较于分享权限会好一点,不过针对单个文件来说,添加协作者和分享差不多。

当需要协作的是文件夹时,没有分享功能,只能对当前文件夹添加协作者,添加后文件夹的所有者可以设置他人的权限,协作者删除文件只会退出文件共享,对原文件没有任何影响。后续文件夹内新增内容,也会直接同步给所有拥有该文件的协作者。

 

图片管理工具 —— Eagle

1. 安利介绍

图片收集软件,相当于本地的花瓣,安装浏览器扩展插件后,无需下载图片,只需要简单的下拉拖拽就可以完成图片的收集。加上图片是保存在本地,所以即使没有网络的时候也能查看,配合坚果云使用,可以让两台电脑之间的文件实时同步。

 

2. 如何使用

1)下载并安装客户端

支持 macOS 和 Windows 系统,安装完成后第一次登录会让选择文件保存的位置,自己选一个就好。不过这个是付费软件,30天试用,199 购买序列号后可终身使用,支持同时激活2台设备,并且随时可以切换激活的设备,只需要在第三台设备加入时,把前两台设备删除一个,第3台设备就能加入了。

 

2)安装浏览器插件

点击官网上方的浏览器扩展,给自己常用的浏览器安装 Eagle 插件。添加完成后浏览器顶部标签栏处就会有一个 Eagle 的 Logo,表示已经安装成功。安装成功后,网站上的图片就可以通过拖拽的方式收集了。收集完的图片会自动保留原文链接,这样等以后看到这张图片的时候,还可以点进原页面查看同类型的图片了。

3. 导入花瓣画板

可以一键导出花瓣里的图片。不过需要注意的是右图的花瓣地址必须写单个画板的地址,不然会显示网址无效。

在这里偷偷说一句哦,不只是可以导入自己的单个画板,还可以导入别人的哦,要是看到哪个花瓣大牛的图片特别好,可以直接一键将整个花瓣的图片都下下来。

 

4. 整理素材库

1)文件夹

采集好的图片可以按照文件夹的形式进行整理,下图是我自己所列的文件夹目录。还可以为文件夹选择不一样的颜色。且支持多重条件筛选图片。

2)自动识别重复文件

当我们重复收集一张图片的时候,Eagle 会自动帮我们识别出来,就不用浪费空间了。

 

云存储 —— 坚果云

1. 安利介绍

云盘同步软件,堪比百度云盘的升级版。可以同步电脑任何位置的文件夹,不用像 icloud 一样,要把文件夹拖到制定地方才能同步。而且还支持协作,和其他人共同维护一个文件夹。实时同步修改内容。

 

2. 如何使用

1)下载并安装客户端

支持 macOS 和 Windows 系统、移动端(iPhone、ipad、Android)。有免费版的和付费版 (团队版/企业版),两者最大的区别就是流量限制。

 

2)如何让两台电脑文件实时同步

安装后坚果云,电脑内的任何一个文件夹右键都会出现坚果云的选项,点击同步到个人空间,等待同步完成,完成后就可以在客户端内看到该文件夹。

当另外一台电脑想要保持同步的时候,点击客户端的对应文件夹后面的设置,选择一下同步到本地的路径(红框处)。这样以后文件里的内容,一个设备的修改就会实时同步到另一个设备上。

3)文件共享

除了自己同步文件,还可以邀请他人与自己同步同一个文件夹,文件夹的拥有者可以设置他人的共享权利,比如只能查看不能上传下载、可上传下载等。

 

4)历史版本

当我们文件误删找不见的时候,可以通过坚果云的历史版本去恢复,坚果云会为我们保留3个月内的历史文件。

5)文件夹名称变动

当我们把一个文件夹的名称修改后,坚果云会让我们自己判断是修改命名了还是删除文件了,当我们选择修改命名后,识别后会自动更新文件名。

6)Eagle 、坚果云 配合

我们可以把 Eagle 的本地同步文件夹放到坚果云里同步,然后在另外一台电脑上把 Eagle 的文件夹同步下来,这样我们的 Eagle 素材库也能实现云同步了。

 

高保真交互原型 —— Protopie

1. 安利介绍

让你的原型自己说话,无须代码就可以实现几乎所有交互效果。操作原理:交互=对象+触发动作+反应动作,非常适合做高保真 Demo 用于设计稿演示,且支持传感交互,比如麦克风、3D Touch 等。

 

2. 如何使用

1)下载并安装客户端

支持 macOS 和 Windows 系统,而且还支持移动端(iPhone、ipad、Android)。10天试用期,99美元终身。

 

2)操作原理

先选择触发动作的对象,也就是说页面上的那个元素进行操作,会发生交互行为;然后再选择触发交互行为的动作,点击或者下拉等等;最后再选择发生交互行为后的参数以及图层,比如放大至500px,X轴移动至281px等。

3)手机实时预览

手机下载客户端之后,可直接预览到制作的效果,能百分比模拟开发实现后的效果。

 

动效制作+输出 —— AE+Lottie

1. 安利介绍

Adobe After Effects简称“AE”是Adobe公司推出的一款图形视频处理软件,虽说特长在于制作视频动画,对于 UI 动效来说有点大材小用,有点繁琐且没有交互行为。但它配合 Airbnb 的 Lottie 使用,可以将动效直接导出 json 文件,开发可直接调用,能有效减少动效输出的成本以及开发的成本。

 

2. 如何使用

1)下载按照客户端以及插件

安装好 AE 客户端以及插件 bodymovin.zxp 和 ZXP Installer 之后,点击 AE 的窗口-扩展会新增一个 bodymovin ,如果没有就表示没有安装成功。

确定插件安装成功后,打开AE编辑 > 首选项 > 常规 > 界面勾选允许脚本写入文件和访问网络(否则后面导出时会报错),完成这一步之后就可以开始正常制作动效了。

 

2)结合 Lottie 导出 json 文件

点击扩展里的 bodymovin 插件,就会出现所做的动效,勾选需要输出的动效,以及选择文件保存的地址;然后再点击设置 icon ,选择输出的格式,自己勾选第 2 个和倒数 2 个并保存。

点击 Render 输出文件即可,最终输出的文件包含 json 文件、可直接预览的 demo 以及使用的素材文件夹。

 

总结

以上介绍了一些好用的软件,包括在线协同 —— 石墨文档、图片管理工具 —— Eagle、云存储 —— 坚果云、高保真交互原型 —— Protopie、动效制作+输出 —— AE+Lottie。这些都能帮我们在一定程度上提高工作效率,减少重复性工作,非常值得大家一试。

 

原文地址:海盐社(公众号)
作者:橙子的橙子

转载请注明:学UI网 » 选择好的工具才能事半功倍

登录收藏
 
你可能喜欢的:
重新认识Quick Look,设计师和程序员应该必备的8个Quick Look插件重新认识Quick Look,设计师和程序员应该必备的8个Quick Look插件
从设计到开发的完美交付(工具篇)从设计到开发的完美交付(工具篇)
物体尺寸比例百科全书!物体尺寸比例百科全书!
作品展示样机神器:Design Camera作品展示样机神器:Design Camera
花瓣挂了之后我发现了两个神器花瓣挂了之后我发现了两个神器
巧用Keynote,为你的演示锦上添花巧用Keynote,为你的演示锦上添花
盘点 | 2018最受欢迎的网页设计软件集合!盘点 | 2018最受欢迎的网页设计软件集合!
在Affinity Designer设计UI界面在Affinity Designer设计UI界面
设计师必备的XD插件合集设计师必备的XD插件合集
设计师必备的AE插件合集设计师必备的AE插件合集