近年来，界面设计工具不断推出。一些新兴的实用界面设计工具逐渐进入设计师的视野，逐渐改变着设计师的工作方式。作为互联网设计师，效率第一的工作原则促使我们不断尝试新的工具，建立新的工作模式。本文将回顾界面设计工具的发展历程，聚焦界面设计工具的发展趋势，为大家推荐一些新兴的、高效的界面设计工具，涉及UI和动效设计领域。希望对您有所帮助。界面设计工具的发展历程随着互联网行业的日益繁荣，界面设计领域逐渐走向成熟，界面设计工具也在以惊人的速度发展。界面设计工具的发展经历了三个阶段：第一个阶段是最早的界面设计领域刚刚起步，设计师普遍使用PS制作界面。但是，PS是一个综合性工具，而不是专门针对界面设计的工具，因此界面设计者在界面绘制和文件传递上存在一定的不便。第二阶段是Sketch的出现。Sketch虽然是一款Mac端软件，但作为一款专为界面设计而生的工具，它以高效、体积小的优势迅速占领了界面设计市场，并逐渐取代PS成为各大设计团队的首选。由于Sketch缺少动画效果，出现了Principle、Flinto、Protopie等设计界面动画效果的工具，是设计师常用的工具。现阶段，XD、Figma、FramerWeb等各种新兴的设计工具逐渐进入设计师的视野。他们专注于界面设计领域，不断挖掘和突破Sketch的不足，为设计师创造更好的用户体验。界面设计工具的未来趋势界面设计工具的发展正在改变设计师的工作方式。界面设计工具也从单一的专注于设计本身逐渐向云端化、协同化、多功能化发展，旨在实现更高效的设计和生产活动。1、云化随着云计算的发展，界面设计工具也逐渐云化。设计从本地转移到云端，不再依赖本地硬件的性能，云端的计算能力提升使用性能。设计不再受时间和空间的限制。只要有网络，设计师就可以随时随地工作。临时使用其他电脑，省去了安装软件和同步设计文件的麻烦。设计文件的分享由发送本地文件给对方，变成了给对方发送链接。前者消耗本地内存和下载时间，而后者可以在有网络的情况下打开。设计工具基于云的特性增强了设计灵活性，并大大提高了设计效率。2.协作注重不同工种之间的高效协作也是设计工具的发展趋势。新兴的设计工具（如Figma、FramerWeb）试图将产品、设计、开发和测试整合为一个整体，让不同类型的工作可以高效地讨论和同步设计方案。最大化整个团队的效率。利用技术降低重复沟通的成本，减少同步不一致的发生，为各工种之间的协作扫清障碍。3.Versatility今年9月Figma举办的第二届ConfigEurope大会的主题是让设计和代码更紧密地联系在一起。可见，设计工具越来越注重其通用性。设计工具不仅可以帮助设计师自己输出设计稿，还致力于打破设计与代码之间的壁垒，降低交接成本。使设计实施更轻松、更高效。界面设计工具推荐一、UI工具FigmaFigma是一款全平台通用的在线界面设计软件。2019年UXTOOLS设计工具使用报告显示，Figma的使用率从12%上升到26%。在今年的ConfigEurope大会上，Figma还预览了一些即将到来的功能迭代。其便捷高效的特点使其受到众多设计师的青睐。教师的追求，正在逐步抢占Sketch的用户市场。与Sketch相比，Figma有哪些亮点？Windows用户也可以随心所欲地使用它。与仅支持苹果生态系统的Sketch相比，Figma最大的优势在于Windows用户也可以使用。他支持在Mac、windowsPC甚至ipad上使用。理论上，只要能打开浏览器，就可以愉快地使用Figma进行设计。使用云文件不卡顿，支持离线编辑。Figma创建的所有文件都存储在用户的云端账户中，不占用本地内存。当文件太大时，草图会冻结，拖放图层会变得困难。但是Figma对本地资源的消耗非常小，大文件几乎没有卡顿。设计者最关心的是在无网络或网络连接的情况下使用Figma，Figma也提供了相应的解决方案。支持离线编辑，离线时会自动将内容保存到本地，网络恢复后自动同步到云端。一键导入sketch文件Figma可以导入Sketch文件，大大降低了文件迁移的成本。如果您想将所有工作迁移到Figma，那将非常方便快捷。更强大的组件功能Figma和Sketch都有组件功能。当原始组件发生变化时，复制的组件会同步变化，并且它们在这一点上是相同的。但Figma在组件逻辑上比Sketch更进了一步，复制的组件可以灵活处理与原组件的同步关系。当设计者修改复制组件的样式时，原组件不受影响。此时，两者之间的关联逻辑依然存在。当再次修改原始组件时，复制的组件仍然会同步变化。与Sketch相比，Figma让组件更加灵活，限制更少。同时，Figma也在不断优化其组件功能。在ConfigEurope大会上，Figma宣布将于今年11月正式推出组件Variants功能。该功能是将一系列相关的内容生成一个Variants组件，使用时可以通过标识的组件属性直接改变组件样式。它的好处是在使用组件时，更容易在所需组件的不同状态之间切换，不需要像sketch中那样一步步寻找。如下图的按钮组件所示，设计者可以列出所有的按钮状态，并按照级别、颜色、状态、大小来命名。然后选择所有的按钮，组成一个Variants组件。与代码紧密结合在使用sketch输出设计稿时，设计师往往需要使用BlueLake或者zeplin输出标注文件。Figma与代码紧密结合，自带交付功能。其文件中的每个模块都有一个代码模式。只需要打开开发同学的账号查看权限和发送链接，就可以直接获取设计文件上的注解，也可以自行导出需要的CSS、ios、Android样式。一键还原历史版本Figma会将设计师的每一次修改保存为对应的历史版本。当老板说要某个版本时，设计师只需要还原老板想要的版本即可。如果其他设计师不小心误删除或修改了文件，也有机会一键挽救。团队合作团队合作功能可谓是Figma最大的核心竞争力。当多个设计师需要维护同一个设计文件时，Figma可以支持多个设计师同时在线修改，只要相互共享文件链接并给予相应的权限（查看和编辑权限）即可。如果使用sketch，设计师一般会将源文件发给对方修改，达到协同效果。来回传输源文件不仅容易造成文件同步错误，而且有一定的下载时间成本和存储成本。相比之下，Figma的优势就很明显了。除了设计师之间的协作，Figma还有效提高了设计评审的效率。相比在工作组重新描述红色设计图标，Figma的评论功能可以让同事实时在设计文件中标记讨论计划，提高了在线评论的效率。总结设计人员受到文件本地存储的限制。工作期间，给同事发源文件，给产品设计稿，给开发剪图，都变得琐碎。一个简单的输出对接任务变得微不足道。Figma的出现打破了设计师长期以来各自为政的工作状态。设计师只需分享一个链接，同事就可以修改设计稿，产品可以审核，开发者可以查看接口模块的属性甚至查看代码，大大提高了设计师的工作效率。效率。如果你的团队正在考虑切换设计工具，Figma是一个不错的选择。2.动画工具篇FramerWebFramerWeb是一款在线动画设计软件。其正式版于今年5月推出。核心操作理念，上线的新版本更加人性化，对设计师友好。FramerWeb的核心亮点是什么？网页全平台可用相比于Framerclassic和FramerX作为仅支持Mac电脑的本地客户端软件，FramerWeb是一款基于浏览器的在线设计工具，windows用户也可以安心使用。同时个人版免费，大大降低了设计师的成本。文件导入FramerWeb可以通过导入选项导入Sketch甚至Figma文件，可以用Sketch和Figma快速创建高保真动效。轻松实现复杂的动态效果Framer一直专注于用代码实现复杂可控的交互动态效果。虽然可以保证输出高质量的动效，但是对设计者非常不友好，学习成本太高。为了解决这个问题，本次发布的FramerWeb增加了一个适合设计师控制动效的可视化界面。设计师可以通过MagicMotion轻松实现复杂的运动效果。MagicMotion原理和keynote动画实现原理类似。选择要添加交互行为的目标元素后，您可以在MagicMotion中选择一种过渡方式。只要两个画板中的元素名称相同，在不同面板中的形状不同，该元素就会生成一个补间动画，并在画板切换时相应地发生变化。同时，Framer还加入了一些特殊的交互控件来实现一些特殊的动画效果。例如内置控件中的视频本身就会有End、Pause、Play（播放、停止、暂停）等一些独特的交互行为。当执行这些操作时，会触发相应的页面变化。从设计到编码代码一直是Framer的一个核心功能。FramerWeb默认隐藏了代码面板，设计者在设置动画效果后仍然可以通过点击顶部的handoff调出相应的代码。如果你是一个需要使用代码的设计师，你仍然可以通过编辑代码来实现更复杂的动画。对于设计师来说，Framer提供的丰富的动效可以满足大部分需求。大部分设计师不再需要关注代码部分，可以通过可视化界面创造出丰富的交互效果。FramerWeb的终极抱负是希望设计师可以通过可视化界面设计参数化的动效，并可以直接导出相应的代码交付给制作端。目前FramerWeb已经可以导出对应的动态效果代码，但是导出效果还有待完善，只能导出Transiton的参数。EfficientCollaborationFramerWeb和Figma一样，也非常强调团队合作。设计师之间可以共享链接进行查看和编辑，方便多个设计师协作完成一个项目。与需要反复传输文件相比，FramerWeb省时省力，大大提高了设计师的工作效率。总结FramerWeb放弃了攻占界面设计领域的策略，转而与官方Figma达成积极的战略合作，专注于专业的动效设计软件。因此，FramerWeb非常适合与Figma配合使用。随着产品策略的调整，相信在不久的将来，FramerWeb将为设计师提供更丰富、更高效的动效设计功能，值得期待。3、插件虽然基于云端的设计工具逐渐兴起，但sketch仍然是主流的界面设计工具。因此，除了介绍一些可以提高工作效率的Figma插件外，我们还会介绍一些好用的sketch插件。大家可以根据自己的需要自行尝试。DesignLint(Figma)设计师在处理较大的项目时可能会绘制数十页，不可避免地会在界面上丢失元素。DesignLint可以帮助您解决这个问题。它可以在您工作的同时进行实时修正，检查不同界面之间的直接差异，包括颜色、字体、填充、半径值和其他样式差异并修正错误。如果你做了一些改动，DesgnLint也会根据你的改动实时更新。这个插件可以让你更专注于设计本身，而不用浪费时间检查不同页面上的元素是否被正确使用，大大提高了设计师的工作效率。https://www.figma.com/community/plugin/801195587640428208/Design-LintTinyImageCompressor(Figma)设计师在做大项目时导出的设计稿太大，存储和传播成本高。使用此插件，您可以导出比默认Figma导出文件小90%的文件。同时支持导出多格式文件，导出多张图片时会自动生成一个zip压缩包。https://www.figma.com/community/plugin/789009980664807964/TinyImage-CompressorlDesignSystemOrganizer(Figma)该插件帮助设计师在设计组件系统时对其进行管理。在设计组件系统时，会遇到如图所示的“Buttons-Small-Default...”这种组织形式。该插件可以管理组件，例如分组、取消分组、移动和重命名。当一个组重命名时，组内所有组件的名称都会随之改变，非常方便。https://www.figma.com/community/plugin/802579985985331070/Design-System-OrganizerJuuustHandoff(Figma)Figma本身自带投递功能，不过这个插件的好处是生成离线文件，导出的文件可直接交付开发。开发者可以随时查看间距、色值等信息，不受网络影响。https://www.figma.com/community/plugin/830051293378016221/Juuust-HandoffImageOptim(Sketch)设计师在导出设计稿时，有时图片太大。ImageOptim可以在导出图片时对图片进行压缩，但不会影响图片的质量。使用时需要先安装app，再安装Sketch插件。https://oursketch.com/plugin/imageoptimFontFinder(Sketch)设计师在处理较大的项目时可能会绘制几十页，难免会出现字体使用错误。FontFInder可以帮助您解决这个问题。它可以检测文件中的所有字体，您可以勾选要更改的字体，一键更改为目标字体。不再需要在几十个页面中一个一个的查找修改，大大提高了工作效率。https://oursketch.com/plugin/font-finderCraft(Sketch)Craft插件非常强大，填充功能可以大大提高设计师的工作效率。比如在设计一个列表页的时候，设计师需要为效果编辑不同的标题和图片，还要花时间去编辑内容。Craft可以一键填充文字，如姓名、文章、日期、邮箱、地址、国家等。不同类别下还有一些分类，方便设计师选择。此外，Craft还可以一键填入真实无重复的照片，为设计师节省大量时间。https://www.invisionapp.com/craftBaseAlign(Sketch)Sketch自带的对齐工具，对于形状非常有用，但是对于文本，一般是文本文本框的对齐，而不是文字的对齐本身。BaseAlign插件利用了文字本身的基线对齐方式，让不同大小的文字都能对齐，设计效果更完美。https://oursketch.com/plugin/basealign4。协同工具XSHOWXSHOW是ISUX开发的高效设计协同平台。XSHOW连接产品经理、开发人员等各工种，提高设计资源的输出和分配效率。设计师将设计文件上传到XSHOW后，可以将文件链接分享给产品经理、开发人员和其他同学。产品经理可以在手机小程序上预览方案，设计师每次更新方案也可以直接预览。开发者可以直接查看注解和切片。同组的设计师也可以直接下载源文件，甚至可以查看历史迭代。URL:https://xshow.tencent.comXSHOW如何实现高效协同？对于设计师：可视化上传文件。设计师首先在Sketch中安装XSHOW插件，可以使用快捷键或者直接点击需要上传的文件画板，然后在XSHOW中直接选择“导出”即可直观快速地将文件上传到XSHOW中。视频链接：https://v.qq.com/x/page/z3135fvf22r.html记录所有版本迭代，轻松找回初稿。设计师上传的每一个文件都会被记录在云端，设计师可以通过时间线轻松检索历史文件，轻松找回初稿。视频链接：https://v.qq.com/x/page/j3135ivya38.html灵活丰富的分享权限。对于项目共享权限，XSHOW的设置更加灵活。除了支持私有、公开、指定人员或团队可见性，还可以控制权限的时效性。视频链接：https://v.qq.com/x/page/h3135c9jrey.html供项目经理直观了解团队产出，形成团队展示能力空间。除了个人使用，XSHOW还可以组队。项目经理可以通过XSHOW直观查看整个团队设计稿件的输出和修改情况，同时展示组件团队的能力空间。视频链接：https://v.qq.com/x/page/c3202lstyp3.html方案有变动及时知晓。XSHOW具有记录所有版本迭代的能力，作为项目经理可以及时了解团队成员对计划的变更，解决了有时团队内部同步不及时的问题。轻松组建项目和管理团队成员。项目经理可以在XSHOW轻松设置项目和管理团队成员，大大提高了项目经理的管理效率。合作产品经理或甲方多终端查看更方便。XSHOW支持网页和小程序两种方式的沉浸式观看解决方案。在小程序上查看方案，方便合作伙伴在手机端直观体验方案的真实效果。如果伙伴没有电脑，也可以及时查看稿件。视频链接：https://v.qq.com/x/page/a3135laeftc.html2。查看历史变更XSHOW的历史变更功能可以让合作伙伴及时了解计划的变更情况，大大提高信息同步的效率。方便开发工程师查看注解和管理切片。设计师将文件上传到XSHOW后，只要把链接分享给开发者，开发者就可以直接查看文件注释并在线下载切片。视频链接：https://v.qq.com/x/page/m3135rq8fvp.html总结XSHOW作为高效的协作工具，可以大大节省设计师的稿件输出成本，提高工作效率。希望你能多体验一下。体验地址：https://xshow.tencent.com结语未来界面设计工具将继续向云化、协同化、通用化方向发展。大家可以根据自己的情况尝试使用Figma、FramerWeb等新兴工具来提高设计和协作效率，形成良性的协作体系，让自己更加专注于设计本身，创造更大的设计价值。
