第15期2023年8月无线互联科技
Wireless Internet Technology
No.15August,2023
作者简介：蒲伟生(1974 )，男，四川射洪人，助教，学士；研究方向：软件系统与应用，视觉与UI 设计㊂∗通信作者：季婷婷(1990 )，女，山东聊城人，助教，硕士；研究方向：数值模拟与高性能计算㊂
基于移动端UI 设计的工具选择研究
蒲伟生1，季婷婷1∗，解红梅2
(1.燕京理工学院，河北三河065201;2.北京像素软件科技股份有限公司，北京100107)
摘要:Photoshop ㊁Illustrator ㊁Sketch ㊁XD ㊁Figma 等诸多设计工具的制作功能各有特,UI 设计从业者面对诸多设计工具常常不知如何选择㊂市面上对众多工具研究㊁介绍的综合性文章较少，主要是单项工具介绍，阅读者无法短期内逐一读完㊂文章使用跨学科性研究㊁比较分析，实例与功能相结合，对UI 设计的关键指标进行对比，还纳入非技术因素进行综合考量，力图解决选择者的困惑，提高其学习和开发效率㊂研究结果表明，现阶段在UI 设计学习㊁工作㊁教学中,Adobe XD 工具更适合各方的需要㊂
关键词：移动端UI 设计；用户体验;UI 设计师中图分类号:TP302.7㊀㊀文献标志码:A
0㊀引言
㊀㊀纵观人类社会经历的工业化过程中，都能看到工业设计的身影㊂进入20世纪后，设计对象随着科技进步发生了各种变化㊂随着平板电脑㊁手机等载体的广泛使用，以移动屏幕为中心的设计把传统工业视觉设计细分为平面设计㊁图标设计㊁网页UI 设计㊁移动端UI 设计等㊂每一次设计领域的细分都是对从业者的进一步界定㊂同时，相关设计语言会发生变化，设计工具直接会受到影响㊂
移动终端设备以及其应用软件的商业模式，决定了App 设计应具有移动性㊁简洁性㊁交互性[1]㊂本文从视觉载体㊁工具的基础属性㊁上下游开发的兼容性㊁
模拟交互体验的能力㊁协作管理和交付的能力等指标出发，对新老UI 设计工具进行深入分析和差异对比㊂希望通过深入对比分析设计呈现载体㊁效率等系列指标具体的优缺点，能解决UI 相关从业者的选择困惑㊂1㊀设计工具难以选择的原因
㊀㊀项目开发常常会面对游戏㊁应用型等各类产品；移动端UI 会区分写实性㊁拟物化㊁扁平化等风格㊂由于这些设计工具跨度20余年，大多数开发从业者都没有使用过，也没有足够时间新去使用㊁体验并选择㊂因此，产品经理㊁设计者等开发者会对于如何选择设计工具感到困惑㊂
2㊀研究方向和解决策略
㊀㊀本文进行了从纸张到屏幕等跨学科的研究，对各软件的功能特点进行比较分析，并对图标制作的效率等进行了实例验证，力图通过这些研究方法核实效果，为从业者提供参考，解决选择困难的问题㊂本文主要从功能特点㊁呈现载体㊁兼容性㊁协作能力㊁交付效率等方面进行研究，除了研究软件功能指标，还必须了解和考量非技术的人为因素㊂2.1㊀不同视觉载体催生不同的工具2.1.1㊀印刷时代的视觉载体
㊀㊀(1)古代设计大师鲁班，能居于匠人之首，与其发明的特殊工具 锯子 有关㊂工具对设计师而言具有强大的辅助作用㊂若要探讨UI 视觉设计工具，必须了解屏幕技术的发展，特别是苹果公司的产品㊂早期苹果公司推出Macintosh 系列电脑和Mac OS 系统,
是基于20世纪90年代初美国的印刷工业发展需要，印前工作开始电脑化㊂传到国内后，苹果电脑成为中国各大印刷厂㊁设计机构㊁照排公司的标配[2]㊂
(2)苹果Macintosh 系列电脑凭借独特的图形操
作系统和对印刷的超强还原能力获得国内出版市场的认可㊂在出片打样前，设计师常用苹果电脑屏幕做最后效果比对㊂为了解决印刷分问题,Adobe 公司推出了illustrator㊁Photoshop 等系列设计软件，也成
为国内视觉设计工作者的必备工具㊂
(3)Adobe公司推出的illustrator主要基于制作矢量的图标㊁插画；而Photoshop软件主要处理由像素构成的数字图像㊂设计师可以有效地利用这些设计工具进行图片编辑和创造工作㊂CMYK分功能用以模拟印刷四效果和出片制版㊂illustrator㊁Photoshop 等软件工具是在20世纪90年代印刷工业发展背景下，为解决桌面印刷问题而产生的，视觉设计的效果主要在纸质等载体上呈现㊂
2.1.2㊀移动屏幕时代的新载体
㊀㊀(1)2007年，苹果推出了iPhone，设备出厂时搭载iOS系统㊂全触屏的界面㊁简洁的设计让这部手机一经推出就彰显出与当时的手机产品完全不同的个性，重新定义了 智能手机 ，彻底颠覆了人们的移动设备使用习惯㊂iOS系统后来陆续用到苹果的iPod touch㊁iPad等设备上㊂谷歌公司在2008年推出Android系统进行应对，为黑莓等手机争夺市场份额㊂摩托罗拉㊁三星㊁HTC等品牌手机相继搭载Android 系统㊂微软推出Windows Phone操作系统，后来华为推出HarmonyOS，突破了智能手机的边界㊂(2)围绕桌面印刷诞生的Photoshop㊁illustrator等软件功能，如:CMYK彩模式㊁分等特功能，在移动屏幕上已经不适用㊂苹果公司App Store的发布，改变了传统软件的交付和销售方式，也对软件的设计与生产有着很大的改变，从而也对图形用户界面设计提出了新的要求[3]㊂设计呈现的载体由电脑屏幕㊁印刷品㊁纸张变成了移动屏幕，于是Sketch㊁Adobe XD㊁Figma等专门解决移动端UI设计的工具应运而生㊂
2.2㊀UI设计工具的基础特性对比
2.2.1㊀属性统计表格
㊀㊀把Photoshop㊁illustrator㊁Sketch㊁XD㊁Figma等相关软件工具的基础特点进行比对，如表1所示㊂
表1㊀相关软件工具的基础特点对比
软件名称诞生时间
(年份)内存占用
(大/小)图形绘制
(复杂/简单)布局调整
(单个/批量)切图导出
(效率高/低)版本
(兼容性)
illustrator1986占内存大复杂图标插画逐一修改手动Mac及Windows Photoshop1987占内存大复杂图像处理逐一修改借助插件Mac及Windows Sketch2008占内存小简单矢量图形批量修改标注批量导出Mac XD2015占内存小简单矢量图形批量修改标注批量导出Mac及Windows Figma2015无需安装(小)简单矢量图形批量修改标注批量导出Mac及Windows
2.2.2㊀软件工具综合比较分析
㊀㊀从诞生时间上对比,Sketch㊁XD㊁Figma相对illustrator和Photoshop更年轻，更科学㊂安装运行时, Sketch㊁XD非常轻量化㊁启动速度和运行速度更快；而Figma更是无须安装客户端，打开网站即可使用㊂Sketch㊁XD㊁Figma都能绘制简单的图标和矢量图形，更专注于UI界面设计和网页设计㊂开发中重复修改文件时,Sketch㊁XD㊁Figma可设置㊁批量修改样式㊂XD甚至推出重复网格㊁批量填充图片等特功能，更加智能化㊂而导出切图时,Sketch㊁XD㊁Figma自带标注工具插件，能对切图标注，批量导出，效率更高㊂从基础选项统计比较得出,illustrator和Photoshop在设计效率㊁功能上已经不具优势㊂Sketch 不能跨系统使用，没有苹果电脑的用户会流失，发展会受限㊂Figma作为云工具，不用安装即可使用，发展前景不错，但会受到一些非技术因素限制，部分企业被限制[4]㊂在实际应用开发方面，现阶段XD的兼容性最佳，受限制最少㊂
2.3㊀从满足用户审美升级进行比较
㊀㊀智能手机以前，开发应用主要以PC端为主㊂以前风靡国内的网页游戏以写实风格为主，大批游戏的场景㊁界面㊁图标㊁角等都是拟物风格，把Photoshop 图像编辑㊁图像修饰的功能发挥到极致㊂拟物化设计风格虽然使人机交互中的学习成本更低，但繁复的外表设计在快速发展的社会中不利于信息的传递和人们对产品的使用㊂UI界面和图标越简单㊁抽象，越能减少视觉停留时间，用户的体验感越好㊂智能手机的需求促使UI视觉设计风格向极简㊁扁平化发展，更符合移动端界面设计的使用价值，减少用户的视觉负担和认知负担㊂智能手机的性能在不断迭代升级，推动
移动端UI界面设计向多样化方向发展，移动端UI设计范围也不再限于界面设计和图标设计，还延展到交互㊁音效㊁动效的呈现㊂传统Photoshop㊁illustrator等老牌软件固有的功能，无法满足审美升级需求㊂2.4㊀兼容性的重要指标比较
㊀㊀移动端UI设计流程中涉及很多环节，包含原型制作㊁版面布局㊁视觉设计㊁logo设计㊁音视频㊁交互等多种形式，部分功能需要不同的软件协作㊂移动端UI设计工具的兼容性越强，项目进展会越顺利㊂2.4.1㊀兼容性
㊀㊀文件格式之间的相互兼容㊂以Photoshop㊁illustrator等为代表的老牌UI设计工具，不能打开Sketch㊁XD㊁Figma等格式的文件㊂即使illustrator同为矢量设计软件，也不能打开Sketch㊁XD㊁Figma等矢量格式的文件㊂
新一代的UI设计工具中，以兼容性最佳的XD 为例㊂Sketch㊁Photoshop㊁illustrator㊁After Effects等文件均可导入XD，导入后，文件会自动转换为XD格式，正常保存编辑㊂例如：直接通过XD在Adobe Photoshop中打开和编辑图像㊂右键单击图像，在Photoshop中打开并编辑图像，然后单击 保存 ，所做的更改将在XD中自动更新㊂而illustrator㊁InDesign 等链接文件修订后，也需要手动去确认更新链接㊂XD文件导出至After Effects时的视觉保真度，并支持文字段落间距㊁内部和外部描边，并且能更好地处理Adobe XD图标㊂
2.4.2㊀插件支持
㊀㊀在Adobe系列软件的体系加持下,Sketch㊁XD㊁Figma有海量的第三方插件库支持㊂新一代UI设计工具都兼具平台属性，兼容性远远超过老牌设计工具㊂
2.5㊀比较还原用户交互体验的模拟能力
㊀㊀UI设计师也是工具的用户，要从满足用户需要的角度思考利用UI设计工具创建他人可用于测试㊁优化和完善用户体验的交互式原型方式㊂
2.5.1㊀用户体验的综合性要求
㊀㊀用户体验是应用开发中重点关注的内容㊂UI设计工具除了对场景的营造，还要再现用户常规操作习
惯，如：点击㊁拖动㊁滑动等，涉及用户可能使用的手势；模拟使用时的交互形态：悬停㊁触发㊁播放语音㊁音频㊁视频或Lottie；微动效：转场㊁渐入渐出㊁弹跳等效果㊂
Photoshop㊁illustrator的功能主要是提供解决图片修饰㊁分㊁平面的方案，不具备模拟㊁交互㊁音效㊁动效的功能；而Sketch㊁XD㊁Figma等新一代UI设计工具，可在设计中逼真地模拟滚动㊁制作原型动画㊁语音功能㊁创建锚点链接等㊂
2.5.2㊀满足用户操作流畅和无限制感
㊀㊀UI设计的一个重要原则是永远以用户体验为中心，操作上要让用户扮演主动角[4]㊂Photoshop㊁illustrator等专注平面，而新一代UI设计工具Sketch㊁XD㊁Figma等的主要功能除了视觉还包括交互㊂以XD为例,Adobe XD的定位就是一站式UX/UI设计平台㊂
新一代UI设计工具有模拟用户手指滑动㊁页面列表滚动等相应设置㊂XD是将选定元素固定在某个位置㊂页面对应元素能设置左右㊁上下滑动，体验时XD只需创建锚点链接，就能滚动到画板上的指定位置，几乎是为代码表现逻辑量身定制[5]㊂另外,XD还有原型交互㊁制作动画等功能㊂
2.5.3㊀能否创造用户沉浸式情感体验
游戏网页界面设计㊀㊀网游曾经在国内风靡一时，对场景再造㊁沉浸式场景有一定需求㊂沉浸式场景由动效㊁音效元素㊁
用户的互动等构成㊂Photoshop在其中只负责处理画面的效果，新一代UI设计工具能承载的更多㊂Adobe XD可创建微交互，给用户交互感㊂借助自动制作动画功能，创建短暂的沉浸式过渡，以便呈现内容在画板之间的移动㊁转换㊁过渡㊂甚至可将键盘和游戏手柄用作触发器来构建原型，使用键盘快捷键和游戏手柄触发器来模拟桌面应用程序，可构建丰富的游戏体验或设计原型㊂在连接原型时，从触发器下拉列表中选择按键和游戏手柄，并分配按键㊂新一代UI设计工具须具备易于使用㊁添加语音等功能，不需要UI设计师去学习语音技术或编写相关代码㊂
2.6㊀团队协助和交付效率的对比
㊀㊀每一个项目开发都有时间和预算限制，内部的协作和交付环节非常关键㊂UI设计师在开发环节，需要与产品经理㊁交互设计师㊁前端工程师等团队同事沟通，需要对UI设计工具有协作要求㊂
2.6.1㊀内部协作的能力
㊀㊀以Adobe Photoshop㊁Adobe illustrator等为代表的
软件，初衷是为传统印刷设计㊂设计师拿到文字和图片后设计，完稿后生成的是图片或PDF等文件，团队讨论㊁修订后再生成图片，再讨论；内耗拖延了周期㊂传给客户后，客户对图片的比例㊁字号没有概念，批注很难精准㊂成品印刷后，各方纠纷不断㊂
利用Sketch㊁XD㊁Figma等新一代UI设计工具，团队成员均可对UI设计师的设计和原型进行在线更改，使用预设轻松创建㊁修改㊁共享和管理可共享的设计效果链接，同时可在所有设备上实时预览更改㊂2.6.2㊀沟通和交付的效率比较
㊀㊀Sketch㊁XD㊁Figma等设计工具都是为在移动端设计而诞生，设计提案生成链接后，可直接在客户的移动端呈现，直观㊁冲击力强，瞬间增强信任感，随时沟通，提升交付效率㊂新一代设计工具以XD为代表，定义为一站式UX/UI设计平台，可使用 设计审阅  开发  演示  用户测试 和 自定义 等功能，内置预设共享文档和管理共享链接，有利于提高沟通和交付的效率㊂
3　结语
㊀㊀本文通过对移动端UI设计工具的呈现载体㊁兼容性㊁协作能力㊁交付效率等几个方面展开比较，并进行了跨学科综合分析㊂每款软件工具发展至今，有其独特的存在价值㊂不同工具解决不同的需求，在项目开发中可以优势互补，达到缩短开发周期㊁完成优秀产品的目标㊂根据以上研究,Sketch㊁XD㊁Figma等工具中,Figma开发方对中国国内企业的态度不友好, Sketch只有苹果版，二者的应用范围有限，而XD有Mac和Windows版本，对于初学者和开发者而言是一
个比较理想的选择㊂
参考文献
[1]刘彦.基于iOS环境的应用软件交互设计策略[J].信息化研究,2011(5):24.
[2]创天.Macintosh系列电脑[J].印刷信息,1996 (5):16-19.
[3]MOGGRIDG B.Designing media[M].Massachusetts: The MITPress,2010.
[4]王子纯.微软㊁苹果与谷歌的移动界面设计语言探究[J].艺术品鉴,2017(1):59.
[5]沈兰宁.基于用户体验的移动端UI交互设计探究[J].电脑知识与技术,2022(3):65.
(编辑㊀王雪芬)
Research on tool selection based on mobile UI design
Pu Weisheng1Ji Tingting1∗Xie Hongmei2
1.Yanching Institute of Technology Sanhe065201 China
2.Beijing Pixel Software Technology Co. Ltd. Beijing100107 China
Abstract Many design tools such as Photoshop illustrator Sketch XD and Figma have their own unique
production functions and UI design practitioners are unsure how to choose from many design tools.There are few comprehensive articles on the research and introduction of numerous tools on the market mainly focusing on individual introductory works which readers cannot read one by one in a short period of time.The article uses interdisciplinary research comparative analysis and a combination of examples and functions to compare key indicators of UI design and comprehensively consider non-technical factors in an attempt to solve the confusion of decision-makers and improve their learning and development efficiency.The research results indicate that Adobe XD tools are more suitable for various needs in UI design learning work and teaching at present.
Key words mobile UI design user experience UI designer

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。