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

蒲伟生,季婷婷*,解红梅

(1.燕京理工学院,河北 三河 065201;2.北京像素软件科技股份有限公司,北京 100107)

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 相关软件工具的基础特点对比

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版本,对于初学者和开发者而言是一个比较理想的选择。