在线界面设计插件-提供几款界面原型设计软件

一、UI设计插件

用于XD 的插画插件 unDraw

我想绝大多数的同学已经开始用上了这套素质非常高的在线插画工具了。unDraw 的素质相当过硬,如今它更新了最新的 XD 版的插件,使用 XD 设计 UI 和原型的同学可以好好享受了。(评论区有同学已经沦陷,大家谨慎测试吧~)

2. 协作设计系统插件 Zeroheight

Windows 平台上的原型工具 Figma 越来越普及了,而 Zeroheight 这款用于制作协作式设计系统文档的插件,则是专门针对 Figma 所开发的。这款工具是由 Robin Tindale 、Fabien Laborie 和 Jerome 所创造。

3. 效率工具 Runner Pro

Roy van Rooijen 和 Aby Nimbalkar 所开发的这款 Runner Pro 将你的工作效率提升到了一个极高的程度,装上这款插件,你几乎能在 Sketch 上执行任何操作。

二、配色和图标类工具

1. 配色方案生成器 Coolors

这款非常易用的配色工具是由设计师 Fabrizio Bianchi 所创造,只需要几秒钟就可以为你创造完美的配色方案。试试看!

2. SVG 配色修改工具 Colorizer

在如今的设计和技术领域中,SVG 是一个非常重要的工具。这款免费工具能够帮你自动更改任何 SVG 和 SVG 库的配色,并且保持它原有的阴影和高光。非常棒了吧!

3. 图标工具包 Dopeicon

Dopeicon 是一款素质极高的图标工具包,它完全是像素完美的,每周会更新新的图标素材,并且不断为用户提供新的选择。这款图标工具包包含免费和付费的进阶版,按需购买吧。

三、字体排版工具

1. 字体排版资源 Typography Resources

字体排版在网页中起到了极其关键的作用。正是出于对这种艺术设计的热爱,Amrit Pal Singh 精心制作了这套字体排版资源。分类明晰,确保能够生成足够优秀的排版。

2. Helvetica Now 字体

在历经 36 年的沉寂之后,Helvetica 字体家族终于迎来了新的成员。如今的 Helvetica 字体比以往任何时候都要强大,而它的设计者是这样说的:这套字体拥有我们所钟爱的关于 Helvetica 的一切。这不是复兴,也不是重现,我只是在陈述事实。

四、设计工具更新

1. 工具合集 Framer Bridge

Framer Bridge 是一款用来弥合设计和开发之间关系的工具,它汇集了一系列的功能和工具来促进项目中的协作。

2. BRAVO喝彩设计

喝彩设计是一个好用的模板下载网站,上面有很多优质模板。

Sketch-强大的矢量绘图工具

支持平台:只支持Mac

Sketch是一款强大的界面设计工具,专为UI设计师打造的软件,可让你的界面设计变得更简单,更高效。如果你是一个UX或者UI设计师,那么你一定知道Sketch这个强大的UI界面设计软件。如果你想转行做UI设计师,那么你一定不能错过这个好用的设计工具。

在Sketch中用户能轻松地设置图层面板,可批量命名图层、智能标注页面、填充头像和文字等,可实现多层式填充、渐变、噪点等操作功能;Sketch提供“全部导出”功能,因为它是基于矢量的,所以可导出PDF,JPG和PNG(可选择2x)等格式。不得不提的就是Sketch为设计师提供了丰富的插件,越来越能满足不同人群的设计需求,所有你需要的工具都触手可及。

特色:

出色的用户体验

非常简单易用

提供大量实用的插件

Sketch插件集合可戳:

2. Photoshop-强大的图片处理软件

请点击输入图片描述

支持平台:Windows&Mac

Photoshop是最流行的图像编辑器之一,UI设计师入门的必备界面设计工具。相信不是设计行业的小伙伴,也略知一二。PS作为UI界面设计神器,有着强大的图片编辑和处理功能,想要什么的图形都可以用PS来实现,可用于摄影的后期制作,可给图像添加各种滤镜,调整亮度,对比度等,生成高分辨的图形。借助图层面板可非常简单和高效的处理修复图片;并且PS提供了不同文件格式保存的选项,调整图像大小和分辨率也不会丢失图像质量。

PS:如果要制作图标,需要用到矢量绘图软件AI来制作,这样放大才不会失真。

特色:

照片处理技术(剪裁背景,裁剪,调整光线,调整颜色,过滤,消除红眼等功能)

强大的图层功能 处理副本时保存原件

批量处理照片

兼容其他Abode套件程序,如After Effect,InDesign,Illustrator

Photoshop可以将图像保存为各种格式

PS插件集合:2018最新PS插件合集 原来成为PS大神可以如此简单

3. 摹客原型-快速的在线原型界面设计工具

请点击输入图片描述

支持平台:Windows&Mac

强大的高保真原型设计,和协作平台完全融合。快速产出和精细设计两不误:产品经理、UX设计师可快速完成交互原型设计,轻松制作流程图;UI设计师可做到像素级的保真度。

特色:

全新的主辅画板模式,可以灵活创建不同的交互效果。

支持多人同时在线编辑同一项目,共同完成APP原型设计。

自带钢笔工具、铅笔工具、布尔运算、响应式布局等特色功能,设计创作自由随心

支持页面交互、状态交互、命令交互,以及设置多种触发方式和曲线,快速制作交互原型。

设计稿中支持直接绘制流程图,清晰呈现项目逻辑。

适用情景:中高保真原型,快速原型, WEB/移动端/平板原型,线框图,视觉稿

4. Zeplin-强大的协作工具

请点击输入图片描述

支持平台:Windows&Mac

专为UI设计师与开发工程师量身打造的协作型界面设计工具。作为一名UI设计师,你需要把你的设计传达给开发团队,而Zeplin的设计是为了实现这一目标。Zeplin操作很简单,设计师直接从Sketch上传制作的UI界面设计,应用会自动生成一些注释,在面板右侧会直观的看到每个元素的大小,颜色,边距甚至是某些元素的代码信息。

另外,UI设计师还可以直接在UI界面上给开发人员添加注释,标记,备注等。填补了开发与设计之间的沟通障碍,为设计师和开发人员节省了大量宝贵的时间。

特色:

良好的用户体验

轻松查看界面的间距,尺寸,颜色等

创建样式,帮助设计团队保持一致。

通过插件快速同步Sketch中的项目

支持PS,Sketch,Adobe等工具

5. AE-强大的动效视觉处理软件

支持平台:Windows&Mac

请点击输入图片描述

Adobe After Effects简称“AE”是Adobe公司推出的一款关于图形和视频处理的界面设计工具,如今动效设计在UI界面设计中的应用已经越来越广泛,而且国内许多公司开始重视动效设计了,所以作为UI设计师,也应该掌握一些动效设计。动效在UI设计中的应用其实比我们想象中的还要强大,好的动效设计可以给用户提供一个良好的视觉感受,从而加强与用户之间的交互体验。

AE这款界面设计工具可以帮助UI设计师对图像视频进行任何特效处理,是一个灵活的基于层的2D和3D后期合成软件,包含了上百种特效及预置动画效果,可与Premiere,Photoshop,Illustrator等软件无缝结合,创建无与伦比的视觉效果。它还借鉴了许多优秀的软件的成功之处,将图像视频特效合成技术推到一个新的高度。

特色:

震撼的视觉效果

与Premiere,Photoshop,Illustrator无缝兼容

Axure

Axure RP是美国AxureSoftware Solution公司旗舰产品,是一款快速的产品原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的APP原型设计工具,它比一般创建静态的原型设计工具要快速、高效。

Mockplus

Mockplus(摹客)是一款简洁快速的原型设计工具。适合软件团队、个人在软件开发的设计阶段使用。其低保真、无需学习、快速上手、功能够用。并能够很好地表达自己的设计,满足众多用户群体的工作需求。有别于Axure的繁复,Mockplus致力于快速构建和迭代原型,为设计者提供简洁高效的设计方式。如果说Axure是一头大象,那么Mockplus就是一只轻快的小鹿。

从学习曲线来看,较为专业的UI/UX设计师或者时间充足的设计师可以考虑使用Axure;如果设计新手确实想要尝试这款工具,建议先下载中文版进行使用。设计新手或专业设计师都可以考虑使用Mockplus,一款简洁高效的App原型设计工具。使用该软件完成原型设计只需“拖”“放”两个操作,学习曲线基本为零。

、