UI设计师的「武器库」

如今,越来越多的软件插件可以很好的帮助我们在设计工作上缩短时间,提高效率。比如:之前需要我们手动标注的环节,现在一个html文件就可以全部搞定;原来用AE制作动效需要我们导出批量图片交给开发,现在一个代码文件就可以解决。

不仅如此,很多优秀的网站都在源源不断地给我们提供优质的素材或灵感,帮助我们完成作品。下面就是我日常使用的一些工具和网站分享。


一、插件:

1.AE插件:GifGun

目前,我所知道的最简单快速导出GIF格式文件的方法,就是使用这款GifGun插件。

在使用这款插件之前,导出GIF最常见的方法一是通过AE导出视频,后用PS进行再次导出。缺点是操作繁琐,而且文件很大的情况下非常吃内存。第二种是借助Adobe自家的media encoder进行导出。缺点是你需要再装一个软件,并且要导出最终满意的效果需要反复调试,操作并不简单。

而这款插件完全傻瓜式操作,还可以导出高质量的GIF文件。


2.AE插件:Motion 2

MG动效神器。不过,我个人最常用的功能却是“锚点设置“。软件提供了九个位置的锚点选择。无论是做MG动效还是UI动态演示稿,在固定中心点位置时候非常的实用。而且其他功能也非常强大。比如:弹性动效、爆炸效果、复制关键帧、批量命名等等,功能非常全面。    


3.AE插件:Bodymovin

设计师在设计如下拉刷新或是loading等UI动效时会有很多的想法。不过,用AE软件可以轻松制作出来的效果,在开发同学那里可就不一定了。在工期紧张的情况下,耗费大量精力和时间去还原这些动画效果,显然有些不切实际。

不过,当Airbnb开发出Lottie并开源之后,这种情况就不同了。设计师可以通过Bodymovin这款插件导出JSON格式文件,让工程师放入APP项目中,就可以百分百还原AE中所制作的效果了。

虽然插件还并不是十分的完善,一些复杂的效果还无法实现。但项目中百分之90的效果都是可以转化导出的。


4.PS插件:Cutterman、GuideMe、Parker、psmirror四件套

Cut君开发的几款PS插件。Cutterman切图工具;GuideMe自定义参考线工具,个人网页端常用;Parker支持全方位标注的插件;psmirror个人最常用的实时预览工具。以上几款插件有三款是收费软件。不过,考虑到都没过百元,可以购买永久且免费升级,还是非常划算的。插件均为中文,并且有使用说明,非常良心。


5.PS插件:蓝湖

蓝湖本身的功能就非常强大。插件主要功能包括上传设计稿和标记切图。制作完成的设计稿上传之后可以和团队其他成员共享。并且网页端会自动标注,十分方便。标记切图功能也很简单。将要切图的元素添加标记,上传之后开发人员可以一键下载切图,非常高效。使用蓝湖插件可以大大提高工作效率。


6.Sketch插件:AutoFixiOSTextLineHeight

在公众号中找到的一枚插件,充分解决了页面开发过程中字体还原度不高的问题。设计中,字体默认会产生行高。为了使字体行高更加精准,也为了避免反复调节,可以使用这款插件,能够很好地帮助我们解决此类问题。



7.Sketch插件:Sketch Measure

高效的切图标注工具,和sketch软件十分匹配。有各种标注功能和切片功能,可直接导出html格式,里面包含全部规范细节和css格式。


二、软件:

1.坚果云

非常适合快速存储需求。界面简洁,功能强大,操作简单,可全平台同步。甚至不用打开客户端,右键即可同步云端,非常适合团队协作。


2.MindNode

一款思维导图软件。我选择它的理由很简单,“颜值够高”。


3.有道云笔记

各种平台均可同步,界面简洁清爽,功能丰富。本人经常把他当做学习工具来使用、整理笔记的首选软件。


4.字由

云字库功能非常方便,省去了找字体,下载字体的麻烦。一键同步,就可以搞定。PS、AI、sketch多软件可用。


5. Design Camera

当我们设计好界面之后,总是喜欢套上各种样机,让我们的设计更出彩。这款软件可以节省我们去找样机的麻烦。将我们的设计稿拖入界面中的3D样机当中就完成了。手机颜色、背景颜色、灯光、画面比例均可调节。同时,软件还可以录制视频,自定义视频。当插上数据线,软件当中还可以实时显示我们在手机上的操作。


三、网站:

1.图库

① Unsplash--https://unsplash.com/

免费可商用


② PIXABAY--https://pixabay.com/

免费可商用


③ Pexels--https://www.pexels.com/

免费可商用


④ UI Faces--https://uifaces.co/

UI头像图库。有丰富的内容,和多样的筛选功能。保存图片直接右键保存即可。


2.压缩

① TinyPNG--https://tinypng.com/

个人认为最好用的图片压缩网站。支持.png和.jpg文件格式的导入。


② Smallpdf--https://smallpdf.com/

pdf格式文件压缩网站。 操作简单,文件拖入即可压缩。同时还支持其他格式文件转pdf格式的功能。


3.字体

① 字客网--https://www.fontke.com/


② 站长素材--http://font.chinaz.com/


4.矢量图标

① easyicon--https://www.easyicon.net/


② iconfont--https://www.iconfont.cn/


③ FLATICON--https://www.flaticon.com/


5.颜色

① Color Hunt--https://colorhunt.co/

提供了多种高质量的配色方案。还可通过搜索得到与自己想法匹配的颜色。


② Adobe Color CC

https://color.adobe.com/zh/create/color-wheel/

Adobe官方色盘


③ COOLORS+SKILLSHARE--

https://coolors.co/

配色方案生成器,每次只能提供一种配色方案。


6.规范

顶级互联网公司设计规范网站。

① Apple--https://developer.apple.com/design/resources/


② Material Design--https://www.material.io/design/


③ Microsoft--https://www.microsoft.com/design/


④ 蚂蚁金服--http://design.alipay.com/


⑤ 微信小程序--https://weui.io/

除此之外,还有Airbnb、Facebook、Uber等大厂。可以登录他们的设计网站,去了解世界顶级的互联网的产品规范。


7.可用性测试网站

https://webaim.org/resources/contrastchecker/

可以测试字体颜色在强光下是否清晰可见。数之比大于等于4.5:1为正常。


8. 缓动函数速查表

https://easings.net/zh-cn

动效设计工作中,可以作为动态曲线的参考。


9.学习

① 腾讯ISUX--https://isux.tencent.com/


② Nick Babich的个人博客-http://babich.biz/


③ 简书--https://www.jianshu.com/


10.素材下载

① 设计小咖--https://www.iamxk.com/


② 美工云--http://www.meigongyun.com/


③ Mockupworld--https://www.mockupworld.co/


11.赏析

1.pinterestbehancedribbble 设计网站三件套不必多说了。

2.http://4db.cc/  


3.https://muuuuu.org/


4.http://reeoo.com/


5.https://vimeo.com  优质的视频素材网站


四、浏览器插件(Google Chrome)

1.muzli

设计灵感插件。安装之后,每次打开浏览器,你就能从各大设计网站看到每日的精选推荐。


2.Site Palette

可以快速分辨当前网页的主色,中间色调和MD配色搭配等。同时,可以下载色板供PS或Sketch等软件使用。


3.截图大师

非常方便的网页端截图插件。


到这里,我个人平时常用的设计软件、插件、网站大部分都总结完毕了。后面有新的发现,或是好用的软件我也会陆续分享,来不断扩充自己的「武器库」。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,491评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,856评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,745评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,196评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,073评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,112评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,531评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,215评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,485评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,578评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,356评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,215评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,583评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,898评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,497评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,697评论 2 335

推荐阅读更多精彩内容