UI设计师必须会用的几款软件，你都会了吗

工具的重要性对于设计师来讲不言而喻。任何想法都需要借助工具来实现。想要成为一名出色的UI设计师，你需要多掌握一些技能，才能增强自身竞争力。同时也给那些想转行做UI设计师的朋友一些工具建议，接下来我们就来盘点一下那些UI设计师必须学会的设计工具。

Sketch-强大的矢量绘图工具支持平台：只支持Mac

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

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

特色：

出色的用户体验

非常简单易用

提供大量实用的插件

Sketch插件集合可戳：sketchim

2 Photoshop-强大的处理软件

支持平台：Windows＆Mac

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

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

特色：

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

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

批量处理照片

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

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

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无缝兼容

加分工具-Dreamweaver

支持平台：Windows＆Mac

Dreamweaver是一款网页代码编辑器，帮助设计师和程序员快速制作和进行网站建设。为什么要把它单独列出来，是因为我觉得UI设计师不仅仅需要掌握一些界面设计工具，还需要学习和了解一些前端的布局和设计，才能够更好的配合前端工程师们做好产品开发的工作。UI设计师如果了解一些基础的代码知识，可作为一个加分项在面试中脱颖而出。

1、组件库不同

墨刀：内置丰富原型组件及页面的素材模式，包含基础、高级、发现三个分类。简单组件可以使用文字、矩形、圆形、线条、等，复杂组件可以使用表格、批注、地图、动态组件、轮播图等，直接拖入原型图即可使用。

在打造组件库时，便于管理和设计，不需要重新定义组件。素材库包含了所有的墨刀官方自制的素材，通过搜索关键字即可展现出所有的相关内容。另外还可以进入素材广场查找更多素材。

Axure：素材组件库有限，需要自己重新组建一个素材库。组件制作依赖编辑功能，不能一键拖入使用，需要通过一定的制作过程。在时间上花费较多。

2、交互效果不同

墨刀：大量常见交互组件已经封装，可以直接使用，非常方便快捷。还可以创建自定义交互组件库，支持超链接、设置字体。输出的原型图高度仿真，可快速测试UI元素和交互。不用从头开始一步一步做交互效果，提高工作效率。

Axure：主要通过动态面板、函数、条件判断、中继器等功能实现交互效果，需要学习大量教程慢慢积累交互设计的 *** 作。

3、高保真模型输出不同

墨刀：由于有强大的组件库和素材模板，市面上常见的app客户端和网页端都有相应的模板可以引用和参考。即使从零到一设计一个原型图，也可以借助丰富的封装功能 *** 作快速制作，可以非常快捷高效地输出一个高保真模型。时间短、质量高，高保真模型的设计规范应有尽有。

Axure：需要自己先定义原型图的设计规范，再进行优化，输出高保真模型。如果高保真模型质量提高导致文件过大，软件还会有打开过慢或卡死的情况。

墨刀，一款在线的移动应用原型与线框图工具。借助于墨刀，创业者、产品经理及UI/UX设计师能够快速构建移动应用产品原型，并向他人演示。
墨刀对于APP的原型设计真的是体验非常好，怎么说呢就像有一个无形的人在帮助你，和你一起打造你的原型APP。(当然以后也适用微信小程序的设计)，其控件的拖拉、大小的调整，都会自然地去匹配相应的母版大小。无需去担心有多移动一点或多 选择一点。并且墨刀的系统控件都是基于APP，以及系统平台IOS和安卓，因此在里面可以首先选择相应的设备布局，减少了不少工作环节。
墨刀的缺点就是相应的就是不自由啦，首先这也于墨刀的产品定位有关，清晰定位为移动端原型设计工具，因此在交互效果上、控件组合上， *** 作面板的选择上都不如AXURE 灵活，并且效果切换因为是采用连线的方式，有时候会让使用者脑子错乱的感觉。并且目前原型的交互效果系统自带的还比较少，但基本满足日常所有原型的使用。另外需要充费才能够使用更强大的共享创建功能。
总的来说墨刀和Axure就像美图秀秀和photoshop。前者都是简化了基础的 *** 作，很像封装好了一个函数，你直接调用就可以了。大部分小伙伴外出拍了照片肯定是美图秀秀，选选效果，感觉不错之后立即分享。但是真的设计到很多的图层组合，可控地调整页面元素，还是会用到photoshop这就涉及到不同的需求，你用这个软件是想达到什么目的。是更想研究逻辑结构还是更像展现原型效果。

打开Sketch文档，选中你要导入的artboards。点击“Plugins”——“MockingBot”——“Export to MockingBot”。

登陆墨刀账号后，选择想要上传的「应用名称」或者「新建项目」，完成设计稿导入。导入成功后，点击“直接查看”即可查看进入墨刀的原型预览页面。

1

新建一个母版命名为“滚屏”，复制状态1，分别命名为“状态2”和“状态3”。

2

在3个状态不同的位置放入3个工具。

3

在状态1添加“全局手势”链接到状态2，设置移入方式，动效时长以及定时器。

4

在状态2添加“全局手势”链接到状态3，设置移入方式，动效时长以及定时器。

墨刀怎么把立体化
要想画出立体感，就要掌握三维视图的绘制方法和技巧。
绘制三维图行要有三坐标思维，把物体放入三维空间思考他在三维空间中的利益图像，然后逐步绘制出来。我们要画出磨刀的愣线和立体光影，就能展现出磨刀的立体感。

---