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

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

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

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

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

UI设计基础知识

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

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

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

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

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

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

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

……

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

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设计基础知识:新手该用哪款UI设计软件

UI设计基础知识

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

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

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

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

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

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

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

UI设计基础知识

一、 兼容性

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

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

二、 操作体验

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

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

UI设计基础知识

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

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

UI设计基础知识

三、 组件系统

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

比如,

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

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

UI设计基础知识

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

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

UI设计基础知识

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

四、 协同办公

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

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

UI设计基础知识

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

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

UI设计基础知识

近年很多公司都开始尝试远程办公,远程协作也成为了摆在台面上的刚需,因此跨平台且拥有相对完善云端协作体验的Figma无疑是UI设计软件中最耀眼的新星和趋势。当然这并非绝对,具体操作还需要基於设计师的熟悉度,以及具体的操作环境等因素而定。

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处:https://www.cwhello.com/42097.html

(0)
上一篇 1天前
下一篇 9小时前

相关推荐

  • 浅谈线框图

    线框图其实就是网站设计的低保真设计图,主要作用有这三个部分: 1、 网站设计的内容大纲; 2、 网站设计的信息结构; 3、 用户的交互行为呈现。 线框图其实就是网站设计的骨干与核心,能够帮助平衡设计的保真度,以...

    2022年6月11日
    0260
  • 网站设计最常见的失败案例

    创建一个赏心悦目和高转换网站设计并不是一件容易的事。设计人员经常发现自己出现一些很简单的错误,但并没有理会它们。殊不知这些错误都对网站的效率产生巨大的影响。这里有8个最常见最“持久”的设计失败案例,希望...

    2019年10月23日
    01590
  • 界面动效设计的状态:独立、进入与退出

    1、 独立运动 也就是动效作为一个独立的元素,进入和退出界面时,都不会对界面上其他元素有影响,尤其是位置方面的影响。 2、 进入界面 一般来说,动效元素进入界面是以减速的曲线形式进入。又或者是以做大的速度进...

    2022年6月16日
    0170
  • UI设计技巧:如何为UI选择正确的颜色?

    如何为UI选择正确的颜色?颜色在UI设计中拥有着神奇的力量,既能改变图片的基调,起到增强、减轻、突出、说服、呼吁等作用;还能和文字相互辅助,使它们更有力量;更可以在没有任何文字情况下,向用户传达自己的情感。 ...

    9小时前
    050
  • 分享常用的UI设计排版技巧和知识点 让UI产品增添异彩

    在UI设计中,合理的排版布局能突出界面重要信息,处理不必要的元素,提升产品的可读性和可访问性,从而降低用户在使用产品时的障碍和摩擦,以及减少他们对产品的认知负荷。 今天,小编将为大家总结一些常用的UI设计...

    3天前
    090
  • 网页设计新知:企业网页设计选择单页设计好还是多页设计好

    随着移动端和社交媒体的兴起,操作简单响应迅速的单页网站,一时间成为众多设计师的宠儿;另一方面,大众已经习惯传统多页设计的习惯,因而被他们广泛认知和认可。企业网页设计选择单页设计好还是多页设计好?影响企业...

    9小时前
    010
  • 网页设计趋势:2020年值得关注的UI设计趋势

    企业想要设计出能吸引大众眼球的网页设计,留意UI设计的流行趋势是非常重要的。下面,南宁网页集团分享「2020年值得关注的UI设计趋势」,当中着重介绍的主要是偏向UI视觉方面,体验和交互的设计流行趋势会相对较少。...

    9小时前
    050
  • 如何恰到好处地抓住对比那个点?

    增强界面设计的对比效果能够让用户更加注意到那些通过精心设计想要突出给他们的元素、内容、数据等。而对比需要用心的布局和合理的留白才呈现,你可以试试下面几点: 要实现和增强对比不仅仅只有色彩上的对比,还可...

    2022年6月10日
    0310