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

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
Inspirr的头像Inspirr订阅用户
上一篇 2022年6月23日 16:31
下一篇 2022年6月25日 01:24

相关推荐

  • 网页设计中,如何通过色彩创造更优质的用户体验

    色彩几乎是所有设计体系中不可忽略的组成部分,而在网页设计中,色彩本身所发挥的作用并不单一,除了最基本的着色构成色彩搭配的作用之外,色彩能够通过对比创造视觉焦点,构建信息层次,影响用户情绪,甚至引导访…

    2022年6月25日 建站资讯
    0121
  • 垂直双栏式布局,让网页双面一体

    什麽是垂直双栏式布局?其实就是将一个网页页面风格成两栏,但这不是均分。这种网页设计的布局形式一般是需要按照垂直方向来进行,常见的是平均分配,但是视觉焦点没有那麽出色。 这种垂直双栏式布局能够让网页呈现…

    2022年6月25日
    0152
  • 如何设计折叠屏?超详细的折叠屏设计指南。

    最近做了HUAWEI Mate Xs手机折叠屏的相关设计,借此机会「趁热打铁」分享一手界面操作体验、适配技巧分享给大家,希望对各位设计师同学有所帮助和参考。在这里我使用的是华为折叠屏(HUAWEI Mate Xs 上市时间2020年…

    2023年3月1日 SEO操作
    06
  • 界面的动效需要呈现哪几点特徵?

    1、 响应:能够迅速、精确地对用户的操作行为进行响应。一般来说,移动端的界面设计大约是300-400ms,短的动画在150-200ms。2、 自然:动效元素的设计需要通过对真实世界和物理规律的参考和模仿,无论是造型还是运…

    2022年6月14日
    0132
  • 我来教你网页设计模版的流行趋势是什么。

    现在有很多的网站在设计的时候更加的注重简约风格,设计师们作为白色的代替,已经开始使用一些色彩更加鲜艳的网页设计模板,在网站背景上也出现了不少酷炫的几何图形以及一些比较抽象的图案。下面我们就来看下目前…

    2023年6月13日
    01
  • 极简主义网页设计案例:看看 Aesop如何利用网站连获三奖

    不知道大家有没有听说「Aesop」这个澳洲护肤品牌呢?Aesop是以天然有机植物草木为卖点的澳洲知名护肤品牌,价格亲民,深受不少当地女性喜爱。 除此之外,该品牌网站上线後更是连获三奖,这可能是因为Aesop一直清楚产…

    2022年6月23日 建站资讯
    0132
  • 如何拯救尴尬的交互体验?  

      界面设计当中的交互流程出现问题并不罕见,主因当然是无法很好地在兼顾到细节。在界面设计过程当中,大多都是使用宏观框架,要细致到使用用户体验地图、卡片分类等方法去进行细节设计显然并不是那麽显示! …

    2022年6月25日
    0107
  • 2021年要知道的6种网页设计趋势。

    企业或个人若想让自己的官方网站更加吸引人,就需要做好网页设计与制作,尽量给访客留下深刻印象。在设计网页时,要注意符合当前审美趋势。那么2021年网页设计趋势是什么呢? 1.注重移动端展现 移动营销是未来互联…

    2022年7月4日 建站资讯
    0140

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息