@Sophia的玲珑阁 :作为交互设计师具体的工作内容包含几个方面,一是绘制线框图,二是制作动态Demo,三是团队协作。网络上每天都会推出新的工具,能留在电脑里面的不过几款,能经得住时间考验的才是最好的。

小伙伴咨询工具类的问题也不少,于是罗列出一些,不定期进行更新吧(我自己的偏向,供参考,网站链接很多需要搭梯子访问)。

我按照工作需求分类,将电脑上的工具分为这几类:方案绘制、图片处理、动效原型、视频相关、思维整理、储存、Mac系统相关。

方案绘制

Sketch

在方案绘制这个环节,大家应该不陌生。首推的是Sketch,配合它使用的还有插件CraftManage,在绘制图片时使用它custom这个功能,可以随机更换填充图片,在做用户头像和APP里面的图片时特别方便。

Photoshop

Photoshop的功能在这里不再强调,在交互设计中,用来绘制方案没有sketch高效(原因我在之前的文章强调过多次)。但它强大的处理图片的功能,让人也忽视不了,经常能帮忙解决一些关于图片的裁切、格式调整、颜色等等的一系列问题。

图片处理

这里的图片处理主要是指在导出供程序员使用的APP图片资源。为了降低图片所占内存大小,需要进行压缩,ImageOptim 是个不错的选择,但它有时候压缩的大小并不是很大,因为是对图片基本是无损压缩。另外一个是在线工具TinyPNG,但对图片耗损比较大,适合图片透明区域比较多的情况。

gif制作主要是将一些小视频(主要是APP的demo)其中的某一小段做成图片,方便和运营的童鞋们进行沟通,他们在发文时有时候需要用到。GIPHY Capture,操作简便,对录制的gif也可以进行编辑,使用非常方便。

动效原型

Flinto

动效原型我试过很多种,最后剩下的是这三种,当然只供大家参考。Flinto是制作demo非常高效的工具,支持sketch导出。只要在sketch做好原型图然后通过插件就可以导入到Flinto。但Flinto的缺点在于,它缺少逻辑判断的功能。比如说点击一个区域可能有两张状况出现,此时Flinto并不能表现出这种逻辑关系,于是有了Origami作为补充。

Origami

Origami是Facebook开发的一款动态工具,它的优点是能很细致地表达一款动效的状态出来,支持各种逻辑的跳转,并且可以调动手机摄像头,模拟拍照功能,可以调用JS代码。但它的缺点在于不能做太多的页面,二十个页面以上的效果就会卡,不支持sketch的导入,需要手动拷贝文件夹。对设计师来说,因为代码思维操作,学起来也稍微显得有点困难。

Framer

Framer比Origami更接近代码。兼容sketch和ps的文件导入,熟悉以后按照适合Framer的操作来组织sketch图层在导入Framer的话,非常便捷。有些重复的事情用结构控制使用代码更方便,可实现的效果跟Origami差不多。程序员学起来特别容易上手。这个我也才刚接触,很感兴趣,希望有一天也能成为大神。

视频相关

1. 视频制作

动效demo有时候需要输出视频文件,想我做视频类的APP也经常接触到视频,所以这一块也有些鸡肋。视频制作软件功能最强大的就是Adobe After Effects,简称AE。学习成本不太高,跟其他视频制作软件的原理比较相似,就是在某个时间段内,将每个元素每个属性的变化进行拆分,一个个进行实现。

Final Cut 是Apple公司开发的视频软件,它更偏向于视频的拼接与合成,作为交互设计师,并不像动画师那样去制作,在视频这一块很多功能它就可以搞定。但Final Cut做出来的视频内存会非常大,一般5s左右1280x720px的视频可能就有200MB。

2. 视频压缩

别担心,与它配套的有视频压缩和格式转化软件,即 Compressor,压缩完成之后恢复正常,成了1~2MB。另外一款视频压缩软件叫HandBrake,该软件量感较轻,压缩速度比较快,操作更简便,功能没有Compressor强大,也是一个不错的选择。

3. 音频处理

对,声音的事情也会遇到,比方说按钮在按下去的时候有类似“咔哒”声音,这些也需要接触到声音的编辑。Adobe Audition 就是最强大的声音处理软件,对声音的时长、高低、格式、批量处理等都非常强大,操作也不难。

思维整理

脑图试用过很多种,最后锁定在MindNode 不换了,它是我见过最好的脑图绘制软件,没有之一。但没有Windows版,Windows的用户可以使用Xmind,也是很好用的一款工具。

邮件接收我也归类为思维整理这一块,推荐Spark,它能帮助用户自动分类邮件,颜值也高,还支持emoji的回复,可以体验一下。

储存

储存类我分为记录和保存两大块。记录呢,主要是印象笔记Evernote,国内的为知笔记WizNote也做得不错,两者选其一就行。大家都很熟悉,功能我就先不介绍了,主要来说说用法。两个笔记选一种就行,分散到两地笔记不统一,不方便进行整理。主要用于浏览网页时一些有用的材料收集。但能把Evernote玩出花的教程网上也有不少,可以搜搜看。

保存这方面,Dropbox 的对团队协作更为有利,企业版的Dropbox方便将一个文件夹分享给团队所有人,并且分配不同的权限,同时APP也行进行本地的同步,体验流畅,爱不释手。百度网盘作为国内一些资料的补充。

系统相关

OmniDiskSweeper

用来清理系统内存,我Mac是250G的空间,系统就占了将近100G,说起来都是类,这个我也上网查过,貌似没有什么特别好的方法去解决,通过这个软件能有所缓解。再就是在用sketch的时候将自动保存的功能关掉会省不少空间的。

Sublime Text

在与工程师交接的过程中有项任务是整理好APP里面的多语言翻译文件。即,一个button上中文是“完成”,英文变成“Done”,整体进行整理完善后再发给对方,有时候这项工作由PM(产品经理)来完成。但多方进行沟通的过程中免不了要打开或者编辑一些这样的文档。Sublime Text对于批量查找和编辑来说,对设计师是比较友好的。

总结,每款软件和工具都有它主要的特色,基本上没有一款软件能解决所有问题的情况,所以我在某一个方面的软件时,经过时间的沉淀都会剩下两到三款。这两到三款就是精华所在了。但市场瞬息万变,长江后浪推前浪,所不定会有更好的适合阶段性的工具存在。但咱们的宗旨是,主要的还是自己的想法,能实现自己目的的工具就是好工具,在上面所费的时间适可而止。

作者简介:Sophia的玲珑阁,一枚爱折腾,爱健身的交互设计妹纸。

职场设计技能,更多教程抢先看,请关注作者的微信公众号:「Sophia的玲珑阁」

「设计师必备软件合集」

  1. 动效设计丨《新人手册!动效设计几乎都是这10个软件做的(内附教程)》
  2. 工作流程丨《毕业生必备软件!6套APP构建我的产品设计工作流》
  3. 软件学习丨《从零基础到高手!教你一个快速学会软件的万能方法》

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量190万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

点赞
收藏 11
继续阅读相关文章

发表评论 已发布 1

还可以输入 800 个字
 
 
载入中....
1 收藏