《Qt:2023智能家电的用户界面设计白皮书(30页).pdf》由会员分享,可在线阅读,更多相关《Qt:2023智能家电的用户界面设计白皮书(30页).pdf(30页珍藏版)》请在三个皮匠报告上搜索。
1、Qt 公司 智能家电的用户界面设计 1新一代用户体验无限的可扩展性白皮书心之所向,全屋智能互联:智能家电的用户界面设计紧跟用户界面(UI)和用户体验(UX)开发的最新趋势,并保持整条产品线统一的品牌外观和使用体验,将帮助您培养忠实的客户群体。制造商们面临的挑战通常采用迥异的技术开发不同产品,从而增加了开发时长和维护成本。为了展示如何创建新一代用户体验,我们基于UI/UX的最新趋势设计、开发了四个烤箱演示原型,涵盖四个产品系列。这些原型在多台设备上复用代码,并遵循最佳的软件和硬件架构实践,以展示如何缩短产品的上市时间。Qt 公司 智能家电的用户界面设计 2目录1.执行摘要.32.消费类电子产品
2、UI 的最新趋势.5 2.1.技术和显示屏.6 2.2.图形化趋势.7 2.3.用户交互趋势.103.方法论.12 3.1.设计系统.12 3.2.特性.144.烤箱演示.15 4.1.Qt for MCUs 运行在低端控制设备上.15 4.2.Qt for MCUs 运行在中端控制设备上.18 4.3.完整 Qt 框架运行在高端控制设备上.21 4.4.完整 Qt 框架运行在移动应用程序中.23 4.5.开发规范.265.用户视角.27 5.1.测试方法.28 5.2.测试结果与重新设计.286.高性能、低占用.30 6.1.总论.30参考文献.30Qt 公司 智能家电的用户界面设计 3在激
3、烈的市场竞争中,用户界面正在成为一种区分手段1.执行摘要在过去十年中,家电市场已成为 UX/UI 设计师、开发者和从业者竞相参与研究、实验的领域。家电制造商已开始专注于为其终端用户提供超凡的交互体验。这一趋势一方面是由于用户希望在使用设备时找到熟悉的“类似智能手机”的互动感;另一方面则是由于嵌入式技术变得日益强大,可用性及可扩展性也得到进一步提升。这两股力量的推动意味着潜在应用的用户界面系统将呈指数级增长,涉及的产品从厨房电器到洗涤设备,从家用运动产品到整个智能家居。在竞争激烈的市场中,用户界面正成为一种区分手段,家电制造商正利用它们来提高自身辨识度、打造品牌知名度。此外,用户界面正成为公司在
4、各细分市场中突显其产品的一种方式:这意味尽管产品界面设计不同,但因其统一的核心组件设计风格和辨识度而相关联。另一个即将到来的趋势是对“现实世界”(如家用电器)和“虚拟交互”之间的整合需求越来越大。具体来说,比如物体(和界面)与移动应用的结合;这些系统间的顺利整合是一个方兴未艾的设计领域,也为开发能够吸引用户、可靠、具有创新性的交互系统创造了机会。由于各种外部因素的影响,这些趋势正变得日益显著。例如,新冠疫情改变了人们的日常生活和购物偏好,芯片短缺也限制了部分行业的生产。这些与其他外部因素相结合可能对消费品的生产和销售产生深远影响。这些新趋势的出现正挑战家电生产商,不仅要制定产品线延展的策略,还
5、要应对软、硬件的成本和风险。本白皮书介绍了在考虑到这些因素的情况下,如何使用 Qt 软件开发平台设计、开发一个烤箱的界面项目。在部署四种针对不同细分市场的原型时,大部分图形、交互模式和软件都被充分地复用,在保持用户体验高标准的同时,保证不同型号拥有统一的风格和体验。下文将介绍这四种原型机(一个低端嵌入式设备/显示界面、一个中端嵌入式设备/显示界面,一个模拟“厨房中心”的高端屏幕一一次次设设计计,全全面面部部署署Qt 公司 智能家电的用户界面设计 4以及一个能在不同操作系统上运行的配套移动应用程序),并突出不同型号所使用的共同元素。本白皮书还着重介绍了家电领域的相关趋势,包括技术、功能、用户界面
6、等方面,并对应用市场进行了系统性分析。本书还介绍了设计方法。我们称之为一次设计、全面部署,展现了如何以用户为中心的灵活设计方法结合恰当的 Qt 框架,可减少开发时间和成本。此外,我们将介绍由真实用户测试所得到的易用性测试结果。这种方法在人机交互(HMI)研究中很普遍,常被用于收集潜在用户的反馈以对迭代升级原型设计。12345Qt 公司 智能家电的用户界面设计 52.消费类电子产品 UI 的最新趋势要开发一个新的交互系统,首先要深入分析市场上最相关的趋势和现有功能。如前所述,消费类电子产品(尤其是白家电)的 HMI 设计正在迅速发展。在不同层面上持续创新;重点强调以下三类趋势。技术层面的趋势(如
7、显示器和控制器)图形层面的趋势(针对可视化 UI)功能层面的趋势,技术进步和变化带来的新功能和应用 从 UI/UX 的角度看,我们基于这三类趋势的创新组合罗列了五个值得考虑的主要趋势:混合式交互 语音、手势与视觉辅助、传统触摸控制器相结合的混合互动。高度个性化与定制化服务不同,个性化服务会使用户觉得内容是为自己量身打造的。UX/UI 的简化与优化从减少操作时的思考转变为自然行为,提高用户的满意度和易用性。动画和过渡类似于手机的动画互动,平滑和令人愉悦的过渡,能够促进用户互动并有助于导航。引入 3D 元素用 3D 图形和元素来吸引用户,采用虚拟方式呈现物体以创造沉浸式体验。Qt 公司 智能家电的
8、用户界面设计 62.1.技术和显示屏最小的紧凑型显示屏嵌入式应用越来越依赖小而复杂的显示器,能够以高分辨率显示广域色彩,并具有丰富的细节层次。这些紧凑型显示屏现在也被用于低端和中端系统。大型触摸屏更大的显示屏也正变得更普遍。这些屏幕现在由低功耗、高性能的电子装置控制。在过去十年中,这些电子装置随着尺寸的缩小,也在提高成本效益。厨房中心除了传统的显示系统外,近年来控制多台设备并保持统一显示模式和风格的家庭中心也越来越受欢迎。安装在 SMEG 烤箱上的 VIVOscreen 4.3 LED屏和 VIVOscreen Max高端屏安装在 GE Profile 30 上的 7 英寸触摸式全高清显示屏G
9、E 厨房中心配备 27 英寸触屏和通风的组合,能够控制和监测所有厨房电器,并与最流行的家庭自动化系统(如Amazon Alexa 和 Google Home)集成。Qt 公司 智能家电的用户界面设计 7 2.2.图形化趋势新拟态设计也被称为“新拟物设计”,其特点是设计简化,压塑型外观,模仿塑料和金属的物理纹理。这种风格的主要特点是现代风,为界面赋予新鲜感的同时,使其脱颖而出。然而,这种风格的可视性和易用性偏弱。玻璃拟态设计特点是柔和的阴影、图层和浮动元素。赋予 UI 深度,通过透明度和鲜艳色彩的组合来突出模糊的透明底和半透明物体上的微妙、浅显边框。非常适合创造类似手机的外观和体验。新拟态设计示
10、例https:/ 公司 智能家电的用户界面设计 83D 元素这一趋势并不新鲜,但更具易用性,也更加适合运行在低能耗 CPU/GPU 上的嵌入式系统中。应用中包含图标,产品展示和过渡。排版样式和缩微文字总的来说,字体和排版正日益重要。这意味着对字符的使用应更具表现力,更注重字体与应用类型的匹配。此外,对字符可读性以及阅读时间与理解效果之间关系的研究也会影响字体和应用之间的匹配度。3D 模型示例排版示例https:/ 公司 智能家电的用户界面设计 9深色模式/自适应亮度深色模式已在应用程序中普及,并正扩展到其他领域,如消费类电子产品。其特点是高对比度设计,以最大限度地提高可读性,并赋予现代化外观。
11、移动浏览总体而言,移动应用的风格正延申到所有行业。人们习惯使用与最熟悉模型的设计意图和风格相似的视觉系统。由于电子设备能够处理复杂图形,家用电器上也能找到类似移动应用中的动画、过渡效果和 UI。该趋势预计将在接下来的几年里进一步扩大。Anova 烤箱用户界面 深色模式示例Qt 智能烤箱 UI类似于在手机上浏览食谱的互动示例(触屏水平移动)Qt 公司 智能家电的用户界面设计 102.3.用户交互趋势触屏互动具有增强图形和 UI 的数字触屏也正在家电行业蔓延。现代烤箱和其他家电通常配备有触屏,取代了传统的机械控制。应用程序和控制中心用配套应用对嵌入式显示器进行虚拟拓展的趋势,使自然互动变得越来越频
12、繁。此外,在控制所有厨房设备的同时还能与其他数字服务(YouTube、Spotify、Amazon Alexa、Google Home 等)互动的厨房中心将在未来的几年中愈发流行。引导式烹饪引导式食谱和操作说明被公认为是创新电器最受欢迎的应用之一。Qt 公司 智能家电的用户界面设计 11增强互联性和社交互动与其他家电(如冰箱、搅拌机等)互联,与他人就烹饪相关话题(如虚拟烹饪体验、教程、大师班、远程烹饪等)进行互动是家电业的主要趋势之一。Qt 智能烤箱应用程序 UIMID-END1024x600pxHIGH-ENDLOW-END440 x270px1920 x1080pxQt 公司 智能家电的用
13、户界面设计 123.方法论3.1.设计系统开发设计系统应遵循两个关键点:响应性和可复用性。响应性我们的目标是创建一个能够适应三种目标屏幕尺寸的界面(包括移动应用程序)且无需缩放,而是重新配置图形元素以适应每个目标显示器。为此,我们首先创建了界面线框图,作为设计系统行为的参考方案。烤箱 UI 响应概念图烤箱 UI 线框概念图COMPONENTSOven programs and functionsRegulatorsTemperatureTimer220Navigation buttons MORE.PRE HEATPIZZADEFROSTWARMERFANSTATICAUTO CLEAN MO
14、RE.PRE HEATPIZZADEFROSTWARMERFANSTATICAUTO CLEANStart/StopSTARTSTOPSTOPsetMinusPlusBackWifiLightGrillSteamDefrostWaterLockBluetoothHubInactiveActiveInactiveInactiveActiveActiveForwardStatus iconSettings00:0004:49Qt 公司 智能家电的用户界面设计 13烤箱 UI 图形资源不同目标显示器中的相同元素低端中端高端移动应用可复用性所有 UI 的图形资源,如按钮、指示灯、图标、滑块等,仅需创建
15、一次,然后放在不同目标显示器中显示。Qt 公司 智能家电的用户界面设计 143.2.特性下方列举了凸显 Qt 价值定位的关键特性,这些特性能够帮助烤箱制造商削减的物料清单(BOM)并创建惊艳的图形 UI。这些特性是从趋势分析中最相关特性中挑选而出,趋势分析还推导出各演示中实现这些功能的硬件组件(显示器、连接模块等)。每个演示所选择的硬件组件也决定了如何选择支持这些特性的嵌入式主板。烤箱用户界面设计特性板卡选择低端基础 UI 设计Qt for MCUs低端Qt for MCUsSTM32F7508无连接4.3 英寸 480 x272 像素触摸屏中端Qt for MCUsMX RT1176蓝牙和
16、Wi-Fi7 英寸 1200 x600 像素触摸屏高端完整 Qt 框架Raspberry Pi 4 4GB RAM 蓝牙和 Wi-Fi15.6 英寸 1920 x1080 像素触摸屏中端增强 UI 设计Qt for MCUs高端/移动应用高级 UI 设计完整 Qt 框架现代美学 定制图标纹理平滑过渡照片/图像3D 微动画视频现代美学 定制图标纹理平滑过渡照片/图像3D 微动画视频现代美学定制图标纹理平滑过渡照片/图像3D 微动画视频Qt 公司 智能家电的用户界面设计 154.烤箱演示4.1.Qt for MCUs 运行在低端控制设备上硬件规格Qt 框架 Qt for MCUs板卡 STM32F
17、469I连接无数据连接显示器 4.3 英寸 480 x272 触摸屏UX 设计低端显示屏直接安装在烤箱控制面板上。显示屏的尺寸及其分辨率经过优化,以节省空间且不影响易用性。低端界面支持的操作手势包括点击和滑动。UI 设计界面的图形组件被设计为 45-58 像素宽的触摸目标,这使得手指可以恰到好处地放在目标区域。当用户轻按目标时,目标的边缘仍然可见。这为用户提供了清晰的视觉反馈,显示用户正准确地点击目标。为在界面中容纳烤箱的所有演示功能,一些功能和选项被划分在不同的画面中,以便所有组件都有能舒适触控的大小。Qt 公司 智能家电的用户界面设计 16低端 Qt 烤箱演示界面待机界面带有活动程序的控制
18、面板展示功能使用中和待用的页面Qt 公司 智能家电的用户界面设计 17低端 Qt 烤箱演示界面可水平滑动的程序界面定时器设置温度设置Qt 公司 智能家电的用户界面设计 184.2.Qt for MCUs 运行在中端控制设备上硬件规格 Qt 框架Qt for MCUs板卡i.MX RT1176连接蓝牙和 Wi-Fi显示器7 英寸 HDMI 显示器UX 设计中端显示屏的尺寸允许在同一屏幕中容纳更多功能。与低端显示屏相比,用户点击操作次数更少、也能实现相同的功能。中端界面支持的操作手势包括点击、滑动和轻扫。UI 设计如上所述,中端显示屏比低端版本更大,可通过更少的屏显数实现更多功能。在本演示中,还有
19、浅色模式可供选择。Qt 公司 智能家电的用户界面设计 19中端 Qt 烤箱演示界面带有启动烹饪模式的控制面板食谱列表食谱概览(右侧支持 GIF 动画)Qt 公司 智能家电的用户界面设计 20中端 Qt 烤箱演示界面烹饪步骤设置浅色模式下的控制面板Qt 公司 智能家电的用户界面设计 214.3.完整 Qt 框架运行在高端控制设备上硬件规格 Qt 框架 完整 Qt 框架板卡Raspberry Pi 4 4GB RAM 连接蓝牙和 Wi-Fi显示器Gechic OnLap M505T 15.6 英寸触摸显示屏UX 设计高端显示屏的尺寸能将智能烤箱应用中的所有功能纳入主控制面板屏幕。高清触摸屏设备被设
20、计为厨房中枢,可通过简单、快捷的手势在一个地方控制、调节所有电器。通过 Wi-Fi 和蓝牙连接,可轻松在智能手机和高端显示器间切换,以便浏览互联网(在演示中为 YouTube)寻找有用的食谱和教程。UI 设计由于单个屏幕能显示多项功能,因此必须在同一层级中清楚识别这些元素:烤箱的主要功能在中心位置,而且占用面接较大,启用的程序按钮明亮,而待用程序的按钮灰暗。Qt 公司 智能家电的用户界面设计 22高端 Qt 烤箱演示界面启动食谱程序的控制面板烹饪视频列表视频播放器(来自 Youtube)Qt 公司 智能家电的用户界面设计 234.4.完整 Qt 框架运行在移动应用程序中硬件规格 Qt 框架 完
21、整 Qt 框架设备 Motorola G 5G 运行 Android 10 系统连接蓝牙和 Wi-Fi显示器 2400 1080 像素UX 设计配套应用程序的主要目的是在烹饪时关注烤箱的状态。但不止于此:该应用程序能够为智能厨房(和智能家庭)的生活体验增加关键的流行功能,如食谱推荐、连接其他应用程序(例如 Google Health)。UI 设计应用程序界面保持了与整体设计系统相同的外观和体验,允许用户在设备之间无缝切换。Qt 公司 智能家电的用户界面设计 24配套应用程序演示界面带启动程序的主屏幕带食谱模式的烤箱屏幕Qt 公司 智能家电的用户界面设计 25食谱详情带推荐食谱的 Health
22、页面 配套应用程序演示画面Qt 公司 智能家电的用户界面设计 264.5.开发规范 工作流为了贴近时下热门的设计趋势以机符合UI/UX最佳设计规范,演示的实际设计开发流程,即图形素材的设计和代码库开发,非常简单明了、节约时间。为取得效果,所选择的软件工具应当具有以下特点:相互兼容,允许设计者和开发者在项目的不同层面(图形和代码)互动,直接处理文件,并减少/消除对规范的需求;从 Photoshop Sketch Figma 和第三方工具中直接导入设计可以加速工作流。我们将通过本案例讲解团队如何使用 Photoshop 创建电子产品。UI 素材使用 Adobe Illustrator 以矢量格式绘
23、制草图、设计图形资源。然后将按钮、滑块、图形、图标等 UI 元素作为高级对象导入 Adobe Photoshop,并将其摆放在尺寸和最终布局与目标显示方案一致的画板中。UI 导出Photoshop 文件中的每个对象都包含着一个或多个图层,所有已创建的图层都可以通过 Qt Design Studio 导出、选择以及编辑。Qt Bridge for Photoshop 被用于导出 PNG 格式的 PS 素材和可被 Qt Design Studio 读取的元数据文件。Qt Design Studio 导入从 Qt Design Studio 导入之前步骤中创建的图形资源。这将为此前使用 Photos
24、hop设计的所有可随时部署的屏幕界面创建声明性 QML 文件。部署最后,对于编译和部署,低端和中端目标设备需使用 Qt for MCUs 工具链,配套应用程序需要使用 Qt for Android,高端目标设备则应使用 Qt for Device Creation和 Boot to Qt 软件栈。Qt 公司 智能家电的用户界面设计 275.用户视角以用户为中心的设计方法的关键就是,在设计初期就邀请真实用户参与其中。这种方法可以在设计早期就从潜在客户样本中获得反馈,围绕以结构化方法收集的需求进行有针对性的设计选择。现在人们普遍认为,与传统的瀑布式设计模式相比,这种方法(尽管需要在设计初期就对系统
25、进行测试)可以降低设计总成本,主要是因为可以减少返工,并且降低了在市场上推出没有经过优化或不符合用户需求的产品的风险。但是,为了确保用户所需的修改能够很容易地整合到增量原型中,应当在系统设计时就允许轻松执行图像和逻辑调整。就这方面而言,Qt 平台使原型的更新更为便捷。利用 Qt 工具链可以让替换图形资源像替换建筑模块一样简单。下文描述了真实用户测试,以及整合所需改进而采取的主要措施。Qt 公司 智能家电的用户界面设计 285.1.测试方法烤箱的 UI 测试是在主要概念和素材就位时进行的。测试的主要范围是评估用户的满意度(包括审美和易用性因素)和对烤箱 UI 的接受度。这些指标也常作为关键绩效指
26、标出现在 UX/UI 科学文献中。此外,我们还考虑了其他因素;例如,UI 资源(即图标)和基本功能(如定时器和食谱)同样进行了测试,以收集反馈和改进建议。最后还测试了深色/浅色模式,以评估两种模式的实用性。为了测量这些指标,我们为调研用户选用标准的测试技术和问卷。例如,用户接受度方面,使用了范德兰调查问卷1,审美和其他主观项目则使用了李克特量表 2。此外,以市场为导向的评估参数(即用户购买和为系统付费的意愿)也被纳入了测试,以便分析交互系统为最终产品提供的附加值。此外,我们还采用了有声思维 3,即要求用户明确说出自己每步操作以及每个步骤背后的动机,以收集定性评价。12 位用户(七位女性和五位男
27、性)参与了这项测试。要求参与的条件是要熟悉烤箱系统并有现代可视化交互系统的经验。由四位专家(即 UX、市场营销和文案写作方面的专业人士)组成了一个小组,负责将结果与总体样本进行比较,并检查可能的差异。5.2.测试结果与重新设计从用户接受度的角度来看,该系统的用户接受度极高。具体来说,用户的整体接受度得分为+1.44(分值区间在-2和+2 之间,接受度阈值为 0)。用于评估该指标的单项得分为有用性(+1.67)、无障碍性(+1.67)、舒适度(+1.58)以及满意度(+1.50)对于单项图标素材,测试的范围是衡量主视觉效果的易用性和满意度,以改进那些没有达到接受度阈值的图标。这一点尤其重要,因为
28、烤箱的 HMI 通常安装在小屏幕上,展示图标和程序额外细节的空间有限。因此,象形图应尽可能一目了然。大多数 UI 素材得到好评,并评价为使用舒适且易于理解。部分素材未达到接受度阈值,已被重新设计。Qt 公司 智能家电的用户界面设计 29深色与浅色模式能够切换不同背景的用户界面日益普遍。对比深色和浅色模式的测试被分成两个部分:收集有关每种模式的易读性和舒适度的主观反馈,并计算长文本段落(如食谱)的阅读时间。主观因素方面,用户认为深色模式的易读性为比浅色模式略高(+2.00 对+1.67),而在舒适度方面没有差异(两者均为+1.50)。阅读时间也很接近(深色模式平均 24.68 秒,浅色模式 25
29、.49 秒)。总体而言,用户认为可切换两种模式是一项实用功能(中端原型设备实际也拥有该功能)。以市场为导向的评估参数以市场为导向的评估参数方面,我们发现用户非常乐意购买配备分析中 UI 的烤箱(+1.75)。用户平均愿意支付687.91 欧元购买配备该界面的烤箱,若显示屏/UI 是“可选项”,用户平均愿意支付 154.58 欧元。这些结果证实了最初的假设,即用户界面能够增强家电的品牌辨识度,也是影响顾客选择和购买产品的参数。整体而言,在专家和普通用户之间没有发现明显差异。但是,专家们提供的定性评价通常作为特殊意见考虑,用于向设计者和开发者提供建议。结论总而言之,通过测试获得的主要结论证实了设计
30、方法的有效性(例如,通用设计风格,深色/浅色模式的使用,交互模式等),并允许及时改进不足之处。使用 Qt 工具链使原型设计的迭代更便捷,而无需在软件开发层面上进行干预,能够节省大量时间和精力,印证了 Qt 平台为用户界面的设计和开发所提供的重要附加价值。Qt 公司 智能家电的用户界面设计 306.高性能、低占用6.1.总论消费类电子设备制造商历来将软件视为硬件的次要部分。他们现在必须重新审视这一观点,及其传统开发方法,因为软件现在是产品开发组合的主要价值驱动因素。使用现代方法设计产品系列,可以让设计师专注于 UI/UX 的最新趋势,高效地与开发者合作。软件工程师可以使用单一代码库,而无须为不同
31、平台配备专业开发者。成功的软件团队可以根据客户反馈有效地调整和修正项目代码。公司可以提升竞争时的底气,降低资源限制。使用单一技术解决方案来简化复杂产品线架构的价值在于,使公司能够使用统一的 HMI 解决方案来提高管理品牌统一性和知识转移时的成本效率。参考文献1 Van Der Laan,J.D.,Heino,A.,&De Waard,D.(1997).A simple procedure for the assessment of acceptance of advanced transport telematics.Transportation research.Part C,Emergin
32、g technologies,5(1),1-10.2 Forrester Consulting(2021).Smarter Product Development for Smarter Team.The Qt Company.https:/www.qt.io/forrester-smarter-product-development-study.Page 9-13.3 Preedy V.R.,Watson R.R.,(2010)5-Point Likert Scale.In:(eds)Handbook of Disease Burdens and Quality of Life Measures.Springer,New York,NY.https:/doi.org/10.1007/978-0-387-78665-0_6364 Flaherty,E.G.(1975).The thinking aloud technique and problem-solving ability.The Journal of Educational Research,68(6),223-225.