UI设计基础知识：新手该用哪款UI设计软件

谈起UI设计软件，相信很多设计师首先想到Sketch，与曾经设计界的一个Photoshop相比，Sketch虽功能不够强大，但胜在更轻量，更高效。但时至今日，每年都有不同的设计软件、动效工具、标注工具、原型工具问世，UI设计软件也层出不穷。Sketch的缺陷逐渐暴露，让不少粉丝「移情别恋」到其他UI设计软件上。

为什麽愈来愈少人用PS/AI进行UI设计?

什麽是UI设计?UI设计(User Interface)是指对软件的人机交互、操作逻辑、界面美观的整体设计。理论上，所有可以进行平面设计、排版设计的软件都可以做UI设计，也就是说只要你乐意，拿Word、Excel都是可以的，但至於合不合适，好不好用那就另当别论。

UI设计基础知识

在Adobe系列称霸平面软件的背景下，Sketch、Figma、XD等轻量UI设计软件能异军突起，主要是因为PS、AI、ID等软件对UI设计来说太臃肿了。这就好比欧洲重卡和超市购物车的区别，虽然都可以装货送货，但没有人会开重卡进入超市里购物。

在实际应用中，UI设计需要应用到的视觉功能大概只占PS/AI的1%，多出来的99%并不是额外附赠，而是需要承担对应代价的：

• 启动和关闭软件所需时间长，速度慢。

• 生成的文件体积大，更占空间。

• 对电脑的CPU和内存消耗大，更占资源。

• 图层计算量较大，经常出现延迟、卡机等情况。

• 经常出现奇怪的Bug和闪退等问题。

……

UI设计基础知识

所以很多新手设计师在刚开始用PS/AI做界面时，只做几个界面对问题感知并不是很明显。但一个完整的UI项目，页面数并不是个位数，往往总量达到三位数，加上页面内容、样式等还需要反复调整，经过一系列操作後，上述问题会被无限放大，而PS/AI自身的缺陷也会严重影响工作进度和增加工作量，这是完全无法避免的。

而Sketch/XD/Figma这类轻量UI设计软件，不仅能提高我们的设计效果，还会针对项目的使用提供丰富功能，包括样式批量的修改、自动布局、复用组件、团队协作以及线上分享等等。

正式这些种种的问题，导致愈来愈少人用PS/AI进行UI设计。

Sketch or Figma谁才是UI设计软件的未来?

虽然Adobe XD是Adobe旗下的一款适用於网站和应用程序等的快速且功能强大的 UI/UX 设计解决方案;并且，XD的外观和使用观感都与Adobe其他产品类似，因此熟悉Adobe系列工具的用家不用花费太多时间就能熟悉软件。

UI设计基础知识

但同样Adobe XD也有不少不靠谱的问题，比如：

① 可以绘制基本形状，但不能选择自定义形状;

② 可以导出设计，但如果插件就无法获得CSS;

③ 需要不断更新，但每次更新都会有机会出现Bug;

④ 采用WinAPP格式，兼容性极差，在Win10不同版本会产生各种奇怪的问题，最後只能重装系统。

对此，新手朋友可以直接略过XD，将学习注意力放到其他软件上，比如Sketch、Figma。下面，小编就来说说这两款UI设计软件哪个比较好?

UI设计基础知识

一、兼容性

一直以来，UI设计工具似乎对Windows并不是十分友好，比如Sketch压根没有开发Windows版本;Adobe XD虽然有Windows版本，但实际使用体验还是与Sketch有明显差距。

相反，Figma基於Web平台开发，只要有「浏览器+互联网」，就能享受Sketch的极佳体验且不受系统约束。

二、操作体验

Sketch虽然相较於PS有极大的优化，但性能也有明显的上限，如果界面页数太多，长时间工作同样会出现卡机情况。

UI设计基础知识

但Figma是基於Web开发的，并不怎麽消耗本地资源。同样大小的项目文件，Figma能将缓存控制在极低并保持流畅的60帧渲染，可以说是真正的「如丝般顺滑」。

UI设计基础知识

三、组件系统

Symbol曾经是Sketch最为称道的杀手级组件功能，但Figma的Component不仅继承Symbol的优点，功能上更是青出於蓝，更符合设计师需求。

比如，

在Sketch创建Symbol时会将所有属性保存其中，当用家修改Symbol属性时，需要以覆盖形式对应用该Symbol文件进行同步;若Symbol有不同对齐方式或颜色，需要提前预设好或解决Symbol关联後再修改(解除後不能同步Symbol样式)。

UI设计基础知识

相反，在Figma创建Component会相对更加自由，其强大之处在於Component的属性存在父子级关系，可以任意调整子属性而不干扰父级样式，同时修改父级属性又能修改全局。

UI设计基础知识

此外，用家可在Figma新建专门文件定义组件(Component)或样式(Style)，再将其发布到库(Library)，这样团队中所有成员就可以在团队中任意文件调用这些组件。这主要得益於Figma是基於Web开发，组件可实时同步更新。当成员修改某组件时，团队中所有项目内用到该组件的地方，都能选择是否需要同步更新。

四、协同办公

Sketch由於是客户端，协助需要藉助其他插件，例如一款名叫Abstract的版本管理插件，可允许设计师在类似Github这样的项目分支中设计，然後合并分支，解决冲突，但操作较为麻烦。另外，Sketch还有Cloud功能进行交付，但功能并不完善，需要利用插件解决这一需求，以及上传指定的设计稿自动标注切图交付开发。

UI设计基础知识

同样是基於Web开发的先天优势，因此Figma允许所有设计师同一时间，同一个文件上同时工作，不必保存後再相互发送，极大地提高效率;Figma还支持评论留言，只需要增加批注就能提醒团队中其他成员需要留意修改的地方，评审也变得更加简单高效。但Figma的内置标注工具存在一个问题就是只能生成整个项目连结发送给程序员，让程序员自己找标注页面。不仅玛法，而且项目很大时载入时间也会比较长。