GUI界面如何设计??|Mixlab指南推荐

2023-11-01 21:20

本文主要是介绍GUI界面如何设计??|Mixlab指南推荐,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

GUI设计

本文将重点介绍语音交互的GUI。设计的对象主要包括语音助手的GUI容器语音助手和用户之间的对话流、语音助手的当前状态和播报内容,以及显示用户说话内容的ASR区域。

干货提前收藏!公众号改版后推送不会按顺序展示。把mixlab设为星标,每一期干货,都会被微信置顶!

⬇️ 点击下方,即可关注星标 ⬇️

总的来说,无论是手机、带屏智能音箱、智能电视或者车载系统,显示语音交互任务的GUI容器分为两种设计方式,分别是占满全屏和不占满全屏,以iOS 13和iOS 14的Siri为示例,请看图1:

图1 iOS 13(左)和iOS 14(右)

 

图1的左侧两张图中,iOS 13的Siri占据了整个屏幕大小,该设计被笔者称为“应用级语音交互”。语音交互容器占据整个屏幕的好处是语音交互流程和其他界面分隔开,实现逻辑相对简单,同时能有更多的空间显示语音播报内容和对话流。在2018年以前的大部分智能手机和带屏智能音箱的语音助手都采用了该设计方式,还有本书出版前的蔚来汽车、荣威汽车等车载系统的语音助手也是如此。

 

图1的右侧两张图中,iOS 14的Siri占据了屏幕的一部分显示相关内容,它的好处是比占满全屏的语音助手看起来轻量得多,但是它跟后者没有本质差别,因为它还是和其他的界面分隔开,双方的数据和交互任务基本做不到互通。最早采用该设计方式的设备是大屏设备和电脑设备,例如Android TV上的Google Assistant和MacOS上的Siri,因为语音助手显示的内容较少,无需占满整个屏幕,相关细节请看下图2和图3。由于绝大部分的语音交互任务无需显示太多信息,所以截至本书出版前,iOS 14的Siri、Android10版本以上的Google Assistant、MIUI 12版本以上的小爱同学以及带屏智能音箱的小度在家和天猫精灵都采用了该设计方式。

图2 位于Android TV底部的Google Assistant

 

图3 位于MacOS右上角的Siri

 

是否需要展示用户和语音助手的对话流会直接影响语音助手的当前状态、播报内容和显示用户ASR内容的界面布局。最常见的对话流设计是社交应用常用的左右结构布局,即界面左右两侧分别显示对方输出的内容以及用户自己输入的内容;而最新消息显示在界面底部,包括用户即将输入的内容,以图4 Google Allo中的Google Assistant为例。

图4 Google Allo中的GoogleAssistant(左)和用户(右)的对话流

 

在Google Allo中,Google Assistant的播报内容显示在左侧,用户敲打键盘或者语音转换的文字显示在界面的右侧,如果需要用户交互或者确认的内容例如选项列表,则通过另外一种显示形式穿插在双方的对话历史中,该显示方式更多是单张卡片或者由多张卡片组合而成的列表。

 

另外一种对话流的设计可以参考iOS 13的Siri设计。Siri可以通过上下滑动的方式查看历史对话记录,但整个设计弱化了“你问我答”的方式,并强调Siri给出的对话结果;即使对话结果不需要一屏展示,Siri也会将上一轮对话内容顶上去,如图5所示。这样设计的好处是对话结果有更大的面积展示,同时减少上一轮对话对当前的干扰,但缺点也很明显,如果上一轮对话和当前对话处于同一任务中,两轮对话之间的关联会被削弱,如图6所示,图6-1和图6-2之间的关系明显不如图6-1和图6-3。该问题在iOS 14中尤其明显,因为在iOS 14中,Siri的容器不占满全屏,同时Siri会将上一轮对话出现的卡片直接消失,如图7所示。

图5 iOS 13 Siri 对话流1

 

图6 iOS 13 Siri 对话流2

 

图7 iOS 14 Siri 对话流

 

这里有个细节需要注意的是,前文提到语音交互是线性不可逆的,所以一般而言对话流只做对话历史展示,没有其他作用。如果双方进行了好几轮对话后,用户回过头对之前的ASR或者某个卡片进行编辑和选择,整个对话的上下文很可能发生改变,后续的对话内容会直接作废,所以读者在设计对话流时需要考虑是否将对话流中的操作选项置灰并且设置不可操作。

 

语音助手的状态类型包括唤醒状态、聆听状态、网络等待状态、语音播报状态、长连接通信状态和结束至默认状态,具体的视觉和动效设计请参考Siri、Google Assistant、小爱同学等语音助手的设计。手机、电视的语音助手当前状态一般显示在界面底部,这能降低状态切换时动画效果对用户的干扰,让用户保持良好的阅读体验;相反,车载系统的语音助手当前状态一般放在对司机来说一眼就能看到的区域,例如蔚来汽车的语音助手除了在中控屏幕上方显示当前状态,还会在座舱前方中央放置一个实体机器人Nomi;而小鹏汽车G3和P7的语音助手小P也会显示在中控屏幕的上方。

 

如果不考虑对话流,语音助手显示在顶部或者底部都没问题,一旦考虑对话流,语音助手显示在顶部会存在一个问题:对话流中的最新内容是从上往下排序,还是从下往上排序?一般而言,用户在社交应用的界面底部输入内容,从就近原则来说,刚发出去的内容显示在对话流底部以及输入框的附近比较符合用户的心理预期。现有绝大部分语音助手的状态显示会和ASR在位置上强绑定,因此它们相当于一个输入框。如果输入框显示在上方,而最新的内容显示在底部,用户很有可能会觉得困扰。如果最新内容显示在输入框的下方,最新内容从上往下排序,这样的设计很有可能不符合用户的心理预期,因为笔者暂时没有看到有这样的对话流设计。目前只有新闻的信息流会将最新信息显示在界面顶部,但概念上和对话流有着较大的差异。因此,笔者不建议将语音助手的当前状态和ASR内容显示在界面顶部的同时加入对话流的设计。

 

在2021年以前,无论是手机、带屏智能音箱、电脑、电视或者车载系统,绝大部分的语音助手附近都会显示ASR内容,除了iOS 14的Siri以及苹果历代Carplay中的Siri。是否一定要显示ASR内容?答案是否定的,因为不带屏的智能音箱没办法显示ASR内容也能正常使用。在带屏设备上,显示ASR内容是否会更佳?笔者认为是的,主要原因如下:第一,用户能更清晰地知道对话上下文是什么,详情请对比图6和图7。第二,当语音交互任务无法如愿完成,用户检查ASR可以知道问题出自哪。如果ASR和用户说的内容不一致,说明有可能是自己的发音或者环境噪音的问题导致语音识别出错,用户可以重新发起语音或者直接编辑ASR中的内容;如果ASR和用户说的内容一致,说明是语音助手自身的问题,与用户无关。因此,在带屏设备上显示ASR内容有利于对话的推进。在界面设计时,通常做法会在语音助手的状态显示附近预留1-2行的位置显示ASR内容,如果内容超出了预留空间,系统会自动对ASR的前面内容做截断处理。

 

以图8为例,我们参考一下Google Assistant是如何设计ASR的。当用户激活Google Assistant时,由于用户还没开始说话所以ASR内容为空。从体验和商业两个维度进行考虑,这时候为用户提供一些提示词是有好处的;而且提示词也属于用户想说的内容,所以提示词可以直接利用显示ASR的区域,如图8中的第一张图。当用户不点击提示词而开始说话的时候,ASR区域内的提示词会自行消失并实时显示用户说的内容,如第二张图。当发现用户停止说话时,系统会将ASR内容和搜索结果一并显示在第三张图中,此时ASR区域会清空文字并显示相关的提示词引导用户发起下一轮对话。

图8 Google Assistant的ASR设计

 

语音助手播报的内容分为两种类型,第一种类型是播报并跳转到其他应用,后续交互流程由该应用承接;第二种是在语音容器中播报并显示内容,它们分别为纯文本、图片、图文并排的内容、选项列表和网页五种形式。iOS 13的Siri通过卡片样式承载了图片、图文并排的内容、选项列表和网页四种内容,有效统一了容器中整体的设计风格,视觉效果如图9所示。

图9 iOS 13 Siri的对话以纯文本和卡片的形式展示结果

 

有些语音交互的GUI设计还会考虑其他细节,例如智能座舱的语音交互存在双音区、四音区和全音区三种概念。双音区是指语音助手识别到语音交互发起人为驾驶员时,车内的麦克风阵列会将拾音方向设定为左侧方向,这时候即使右侧的副驾和后排乘客发出指令,麦克风也无法获取他们的声音。四音区是指车内的麦克风阵列会锁定主驾、副驾、后排左侧和后排右侧四个方向,锁定后其他用户无法发出指令。全音区是指麦克风不会锁定某个方向,所有乘客都能发起语音指令。双音区和四音区能有效避免其他乘客或者车外环境产生的噪音对当前语音交互流程的影响,但有些时候其他乘客想加入到对话过程中却无法进行对话,这会引起该用户的困扰,因为这种定向声场对他们来说是无形的。为了解决该问题,小鹏汽车P7在语音交互过程中,界面底部的左、右两侧和中间分别显示蓝色波浪效果,以表示当前处于锁定左、右音区和不锁区即全音区的状态,效果如图10所示。除此之外,当语音助手小P完成一系列交互任务后,如果头顶上还显示着拾音图标和“继续说”时,说明小P仍处于聆听状态,这时候用户无需通过唤醒词即可继续发起新一轮语音对话。

图10 小鹏P7 语音交互流程展示

 

以上是公众号发布关于语音交互的所有内容,内容较多需要读者的慢慢消化。总体而言,语音交互除了考虑对话的设计,还需要考虑语音助手的人设、声音、GUI等问题,设计师需要思考的问题和设计的内容远多于移动互联网应用。无论是国内还是国外,当前语音交互处于发展前期,现阶段仍有太多问题需要探索和解决,所以它对设计师的综合素质要求较高。如果读者对语音交互感兴趣,不妨多了解这方面的知识和设计,为后续基于多模交互的体验设计提前做好准备。

*待续

一个人的探索有些孤单,

一群人的探索会更有意思。

  关注本号,加入社群

参与更多跨界交流

这篇关于GUI界面如何设计??|Mixlab指南推荐的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/325813

相关文章

创建Java keystore文件的完整指南及详细步骤

《创建Javakeystore文件的完整指南及详细步骤》本文详解Java中keystore的创建与配置,涵盖私钥管理、自签名与CA证书生成、SSL/TLS应用,强调安全存储及验证机制,确保通信加密和... 目录1. 秘密键(私钥)的理解与管理私钥的定义与重要性私钥的管理策略私钥的生成与存储2. 证书的创建与

Python包管理工具pip的升级指南

《Python包管理工具pip的升级指南》本文全面探讨Python包管理工具pip的升级策略,从基础升级方法到高级技巧,涵盖不同操作系统环境下的最佳实践,我们将深入分析pip的工作原理,介绍多种升级方... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

PowerShell中15个提升运维效率关键命令实战指南

《PowerShell中15个提升运维效率关键命令实战指南》作为网络安全专业人员的必备技能,PowerShell在系统管理、日志分析、威胁检测和自动化响应方面展现出强大能力,下面我们就来看看15个提升... 目录一、PowerShell在网络安全中的战略价值二、网络安全关键场景命令实战1. 系统安全基线核查

Java操作Word文档的全面指南

《Java操作Word文档的全面指南》在Java开发中,操作Word文档是常见的业务需求,广泛应用于合同生成、报表输出、通知发布、法律文书生成、病历模板填写等场景,本文将全面介绍Java操作Word文... 目录简介段落页头与页脚页码表格图片批注文本框目录图表简介Word编程最重要的类是org.apach

Knife4j+Axios+Redis前后端分离架构下的 API 管理与会话方案(最新推荐)

《Knife4j+Axios+Redis前后端分离架构下的API管理与会话方案(最新推荐)》本文主要介绍了Swagger与Knife4j的配置要点、前后端对接方法以及分布式Session实现原理,... 目录一、Swagger 与 Knife4j 的深度理解及配置要点Knife4j 配置关键要点1.Spri

Python设置Cookie永不超时的详细指南

《Python设置Cookie永不超时的详细指南》Cookie是一种存储在用户浏览器中的小型数据片段,用于记录用户的登录状态、偏好设置等信息,下面小编就来和大家详细讲讲Python如何设置Cookie... 目录一、Cookie的作用与重要性二、Cookie过期的原因三、实现Cookie永不超时的方法(一)

Linux中压缩、网络传输与系统监控工具的使用完整指南

《Linux中压缩、网络传输与系统监控工具的使用完整指南》在Linux系统管理中,压缩与传输工具是数据备份和远程协作的桥梁,而系统监控工具则是保障服务器稳定运行的眼睛,下面小编就来和大家详细介绍一下它... 目录引言一、压缩与解压:数据存储与传输的优化核心1. zip/unzip:通用压缩格式的便捷操作2.

Qt QCustomPlot库简介(最新推荐)

《QtQCustomPlot库简介(最新推荐)》QCustomPlot是一款基于Qt的高性能C++绘图库,专为二维数据可视化设计,它具有轻量级、实时处理百万级数据和多图层支持等特点,适用于科学计算、... 目录核心特性概览核心组件解析1.绘图核心 (QCustomPlot类)2.数据容器 (QCPDataC

Java内存分配与JVM参数详解(推荐)

《Java内存分配与JVM参数详解(推荐)》本文详解JVM内存结构与参数调整,涵盖堆分代、元空间、GC选择及优化策略,帮助开发者提升性能、避免内存泄漏,本文给大家介绍Java内存分配与JVM参数详解,... 目录引言JVM内存结构JVM参数概述堆内存分配年轻代与老年代调整堆内存大小调整年轻代与老年代比例元空

深度解析Java DTO(最新推荐)

《深度解析JavaDTO(最新推荐)》DTO(DataTransferObject)是一种用于在不同层(如Controller层、Service层)之间传输数据的对象设计模式,其核心目的是封装数据,... 目录一、什么是DTO?DTO的核心特点:二、为什么需要DTO?(对比Entity)三、实际应用场景解析