基于移动端UI设计的工具选择研究.pdf

第 15 期2023 年 8 月无线互联科技Wireless Internet TechnologyNo.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 文献标志码:A0 引言 纵观人类社会经历的工业化过程中,都能看到工业设计的身影。进入 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 等系列设计软件,也成401第 15 期2023 年 8 月无线互联科技技术应用No.15August,2023为国内视觉设计工作者的必备工具。(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 及 WindowsPhotoshop1987占内存大复杂图像处理逐一修改借助插件Mac 及 WindowsSketch2008占内存小简单矢量图形批量修改标注批量导出MacXD2015占内存小简单矢量图形批量修改标注批量导出Mac 及 WindowsFigma2015无需安装(小)简单矢量图形批量修改标注批量导出Mac 及 Windows2.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 视觉设计风格向极简、扁平化发展,更符合移动端界面设计的使用价值,减少用户的视觉负担和认知负担。智能手机的性能在不断迭代升级,推动501第 15 期2023 年 8 月无线互联科技技术应用No.15August,2023移动端 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 等为代表的601第 15 期2023 年 8 月无线互联科技技术应用No.15August,2023软件,初衷是为传统印刷设计。设计师拿到文字和图片后设计,完稿后生成的是图片或 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.3MOGGRIDG B.Designing mediaM.Massachusetts:The MITPress,2010.4王子纯.微软、苹果与谷歌的移动界面设计语言探究J.艺术品鉴,2017(1):59.5沈兰宁.基于用户体验的移动端 UI 交互设计探究J.电脑知识与技术,2022(3):65.(编辑 王雪芬)Research on tool selection based on mobile UI designPu Weisheng1 Ji Tingting1 Xie Hongmei2 1.Yanching Institute of Technology Sanhe 065201 China 2.Beijing Pixel Software Technology Co.Ltd.Beijing 100107 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 designer701