百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程字典 > 正文

UI设计师常用的设计工具和网站,看了都会收藏

toyiye 2024-06-21 11:57 11 浏览 0 评论

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

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

插件

1.AE插件:GifGun

目前,我所知道的最简单高效的视频转GIF的插件。

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

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

2.AE插件:Motion 2

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

3.AE插件:Bodymovin

设计师在设计动效时会有很多想法。不过,用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/

③ 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. 缓动函数速查表

http://www.xuanfengge.com/easeing/easeing/

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

9.素材下载

① http://www.uibaba.com

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

11.赏析

1.pinterest、behance、dribbble 设计网站三件套不必多说了。

2.http://4db.cc/

3.https://muuuuu.org/

4.http://reeoo.com/

5.https://vimeo.com

浏览器插件(Chrome)

1.muzli

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

2.Site Palette

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

3.截图大师

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

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

相关推荐

为何越来越多的编程语言使用JSON(为什么编程)

JSON是JavascriptObjectNotation的缩写,意思是Javascript对象表示法,是一种易于人类阅读和对编程友好的文本数据传递方法,是JavaScript语言规范定义的一个子...

何时在数据库中使用 JSON(数据库用json格式存储)

在本文中,您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?,Devops,敏捷?,测试?以及?项目?管理?最新?,最热门?的?文章?,每天?花?...

MySQL 从零开始:05 数据类型(mysql数据类型有哪些,并举例)

前面的讲解中已经接触到了表的创建,表的创建是对字段的声明,比如:上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...

JSON对象花样进阶(json格式对象)

一、引言在现代Web开发中,JSON(JavaScriptObjectNotation)已经成为数据交换的标准格式。无论是从前端向后端发送数据,还是从后端接收数据,JSON都是不可或缺的一部分。...

深入理解 JSON 和 Form-data(json和formdata提交区别)

在讨论现代网络开发与API设计的语境下,理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里,特别值得关注的是两种主流数据格式:...

JSON 语法(json 语法 priority)

JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...

JSON语法详解(json的语法规则)

JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意:json的key是字符串,且必须是双引号,不能是单引号...

MySQL JSON数据类型操作(mysql的json)

概述mysql自5.7.8版本开始,就支持了json结构的数据存储和查询,这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库,在处理json这种非结构化的数据...

JSON的数据模式(json数据格式示例)

像XML模式一样,JSON数据格式也有Schema,这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...

前端学习——JSON格式详解(后端json格式)

JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...

什么是 JSON:详解 JSON 及其优势(什么叫json)

现在程序员还有谁不知道JSON吗?无论对于前端还是后端,JSON都是一种常见的数据格式。那么JSON到底是什么呢?JSON的定义...

PostgreSQL JSON 类型:处理结构化数据

PostgreSQL提供JSON类型,以存储结构化数据。JSON是一种开放的数据格式,可用于存储各种类型的值。什么是JSON类型?JSON类型表示JSON(JavaScriptO...

JavaScript:JSON、三种包装类(javascript 包)

JOSN:我们希望可以将一个对象在不同的语言中进行传递,以达到通信的目的,最佳方式就是将一个对象转换为字符串的形式JSON(JavaScriptObjectNotation)-JS的对象表示法...

Python数据分析 只要1分钟 教你玩转JSON 全程干货

Json简介:Json,全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...

比较一下JSON与XML两种数据格式?(json和xml哪个好)

JSON(JavaScriptObjectNotation)和XML(eXtensibleMarkupLanguage)是在日常开发中比较常用的两种数据格式,它们主要的作用就是用来进行数据的传...

取消回复欢迎 发表评论:

请填写验证码