在这个社交网络盛行的时代,我们是不是真的还需要用这种陈旧的方式提交个人资料?社交登陆这一设计模式完全可以让用户轻松快捷的登陆,从而取代注册、填写表单之类的麻烦工作。
用户可以直接登陆自己的社交网络账号(Facebook、Twitter或者Google等),无需另外创建一个以后不太可能继续使用的账户,这样可以大大提高注册效率。除此之外,这一设计模式还有下列好处:
很多知名公司的移动应用采用了下列几种不同的方法实施其通知设计:
你可以模仿一下你最喜欢的解决办法,试试这个办法是否适合于你和你的用户。
下面是一些弹窗设计模式帮助解决问题的案例:
在习惯了使用Facebook、Twitter或Google等社交网站后,我们都会很自然的使用下拉手势进行内容更新。第一个使用这个设计模式的公司是Apple,在此之后这一设计就广为流行开来了。
当用户需要显示一列非静态,但不能自动刷新的内容时,就可以适用下拉刷新模式。下拉刷新时,屏幕会滚动到顶部,刷新完成后新内容将从顶部开始显示。这种设计模式可以节约空间(不需要使用按钮)而且简单易懂。这种方式还不仅局限于更新内容,其还可以用于在一系列短信、图片或资料更新中加载早先的内容。
iPhoneX在2017年上市以来,全面屏手机就开始逐渐普及。iPhone8的4.7寸屏幕到目前最新机型iPhone11的6.1寸屏幕,以及ProMax系列的6.5寸,各种各样的刘海屏、水滴屏、挖孔屏、折叠屏等等屏幕方式随之出现,物理Home键都被舍弃改成虚拟按键,甚至是没有虚拟按键的手势滑动操作。
想单手点击屏幕的操作,需要手足够灵活进行一轮操作才能够到屏幕上方,过程中稍有不慎,手机随时会砸地上。作者的手机屏幕已经修了几次,差不多赶上一台二手机的价格了。
据当时研究的数据可以看出,有近半的用户是单手使用手机(现在肯定不止)。当用户单手操作的时候,实际拇指可以触摸到的区域是如下图这样的。绿色区域是拇指的正常操作区域,黄色区域是拇指能触碰到的最大限度范围,红色区域是触摸比较困难的区域。
然而这份研究报告的数据是在2013年发布,当时还没有全面屏的出现,如果把上面研究结论的区域,套用到如今的手机屏幕尺寸上,顶部的红色区域会占更大比例。以iPhone11尺寸比例作为参考,如下图:
根据2020年手机UX设计趋势,大屏幕设计将会成为热点。根据数据报告中有说明,2018年10月使用大屏手机的用户比例是16.3%,到2019年12月,该数据已经上升到41%,并且会在未来更多新机型的出现中持续上涨。
那随着大屏幕手机的普及,就意味着设计师在设计界面的时候,要为大屏幕手机的使用场景进行界面调整,避免用户难以使用的体验问题。以下是我整理的一些设计建议方案:
1.头部区域设计更高
通过将标题栏的信息区域放大,尽量把主要操作内容向拇指区域靠近。
2.常用导航与操作居于底部
比起导航栏放在顶部,更适合大屏幕手机的方式是将导航和重要操作尽量往屏幕底部放置。
3.手势操作页面切换与返回
抖音和Instagramstory等短视频应用界面都是通过手势滑动屏幕的方式,对页面进行切换,操作的学习成本很低,而且主要操作也在屏幕底部。这种操作方式也会在今年越来越多地被使用。
4.提示弹窗从底部升起
常用的弹窗,很多是设计在屏幕中间弹出,为了适配大屏幕,不妨尝试从底部弹出,关键选项都能轻松选择,提高转化率。
5.使用大卡片
屏幕尺寸变大以后,使用整张大卡片可以让用户浏览内容更专注,大面积的配图和留白,也能提高用户的点击欲望。
除此以外,作为手机厂商,在发布大屏幕手机的时候,就有对界面操作做了一些对应系统级的设计调整,比如界面下拉悬停,键盘单手模式,屏幕边缘滑动返回等等。
PeterDrucker说过:「量化才能管理。」这个格言后来成为了我的信条。我决定将我的目标量化,将它分解成为最基础的习惯来执行,并且以每天一定量的执行,来实现最终的目标。
以下见解希望对你有所帮助!
一开始,我和Wilson就决定使用3屏的主要功能,并构建了一个粗糙的原型。但是,我们没有足够的远见,无法设想我们的产品最终的方向,也没有对全部的想法进行深入的打磨。
我们基于这一点,我们开始抓住核心功能,尽可能让它们足够易用,强化核心特性。通过确定核心功能的优先级,并且确定发布日期,借此缓解我们的精神压力,确定我们不会被成堆的功能所淹没。这也似地我们有足够的动力解决核心功能。
在设计产品的时候,我经常被提醒要处理好每一个边缘情况,填好每一个坑,确保体验的顺畅。从零开始构建产品是一把双刃剑:基于自己的构想来创造产品是令人兴奋的,但是相应的,我需要经常在舒适区以外处理问题。
我一直在Skookum从事产品设计的工作,而这些工作通常都是在一定的约束条件下进行的,但是现在所要处理的产品则不同。之前的产品都可以借助现成的设计系统,有早已搭建好的设计语言,有完整的组件,有明确的UI状态,有非常明确的基础架构,但是这次是我自己的产品,所有的这些都没有。而且,这个产品还可能会存在几种极端的情况、流程和状态。
比如,在注册流程中,按钮会有默认、禁用、激活、填充、错误、悬停等几种状态,但是除了这些之外,我还需要考虑诸如密码重置的流程和体验,这可能会涉及到6个高度相似的UI界面状态:
这个过程中,有很多东西都令我一度感到迷惑,这也引发出我下一个要说的要点……
项目开始之后,我很快就遭遇了组织架构问题。因为我是在工作之余来创建这个产品,这导致我犯了一个非常严重的错误:我没有按照传统的产品流程来创建产品,这随后导致了一系列的问题。
按照标准的产品设计流程,我需要从用户流程开始创建,定义用户可能会执行的流程,并且针对主要的流程界面进行必要的总结说明。因为这个项目和之前的工作不一样,我一开始就忘记了遵循流程这件事情,我错误地将它视作为一个包含几个简单界面的简单项目(是不是听着特别耳熟?很多所谓的小项目翻车都是从这里开始的)。这样一来,当我开始处理诸多按钮的不同状态和界面变化的时候,整个用户流程变得混乱不堪,并且我很难确定其中的体验漏洞有哪些。
最终我停止了这种随性的设计方式,并且在Whimsical当中创建了完整的用户流程。于是我很快清楚了那些环节有所缺失,以及整个界面流程的走向。
按照用户流程来梳理界面的时候,可以对于整个产品的屏幕状态有所了解,并且随着产品的发展膨胀,用户流程的重要性会随之增长,成为至关重要的部分。
的确,在完成整个UI之前,不应该开始向着项目当中添加动画。但是,不添加并不意味着你无需考虑。实际上,不同的微交互和动画对于实际的体验影响是巨大的。你在思考UI设计的时候,就应该考虑到微交互和动画的使用,避免在后续动效和交互落地的时候,进行不必要的修改。
比如,当我在设计「达成成就」这一体验的时候,我就考虑到了需要用到的微交互的效果,所以在我设计UI的时候可以顺着我自己的喜好来进行设计,并且将可能会用到的动效拖到某个角落暂时记下来,避免在设计UI的阶段,影响了整体的流程和效果。而后续加入动效的时候,就会方便很多。
我认为,将UI和交互结合起来考虑是非常重要的,因为两者共通塑造了体验。如果在设计UI的环节直接加动效,会让整个设计过程变得复杂臃肿。
当我终于同我的家人、朋友、用户以及网上乐于尝鲜的用户公布了这一产品之后,他们在使用过程中,开始注意到了很多细节上显而易见、但是我并没有发现的问题。我意识到我作为产品的设计者,是很容易陷入并沉迷用户体验当中比较孤立的一部分,反而会忽略很多显著的问题。
回想一下,如果我能尽早向用户和朋友展示设计和原型,那么我会在更早的时候发现问题,并且在获得反馈之后才进入开发阶段,弥补大量的损失。
很多设计师会认为,所有的想法都必须是原创的才行,否则就是欺诈。但是稍微想想,其实彻底的原创其实很少的。当你看到一个优秀的产品,它优秀的配色和恰到好处的交互可能会让你觉得:「已经有人做出来了,我的想法在它面前完全没法比拟。」
这种思维方式其实有着极大的缺陷,并且抑制了你的创造力。
当我发现我的设计有缺陷的时候,我会竭尽全力去搜索和了解更多网上已有的设计。我会观察和思考别的公司和产品是如何设计新用户引导流程的,如何管理用户个人信息的。我从来都没有复制被人的体验,但是会隔三差五去钻研别人所创造出来的优秀细节,然后将这些细节借鉴到我的设计当中。
我最喜欢的一个范例,是从模态状态下,旋转退出的效果。这是我偶然在一个网站上看到的效果,因此我决定将它添加到Confetti当中,我还在着陆页的按钮中加入了类似的特效。
事实上,一切设计都是混搭创造出来的。你借鉴细节并不意味着抄袭,不要害怕去发掘和学习别人的优势和亮点,你要学会有机地拆解和借鉴,灵活地运用到自己的设计当中,它就像调制鸡尾酒一样有趣。
当我们开始设计的产品的时候,我和Wilson头顶上的身份就一直在变。我们是UI设计师,要负责UX,要做交互,也制作动效,要进行平面设计,还要考虑市场营销,要管理产品,我们也要扮演其他的角色。
职责如此之多,以至于我们不可避免地遇到我们能力范围之外各种新问题。我们必须承认自己陷入了困境,寻求外部帮助成了必要的选择。
专注于自己专业的领域,其他不专业的方面来寻求外部帮助是非常合理的。比如在一个项目当中,一位艺术家负责了绝大多数的风景插画,另一位艺术家则完成了肖像画的部分,这很正常。
我希望产品的外观和功能能够保持高度的一致性,并且我确实做到了。但是不要误会我的意思,我并非是不敢走出舒适区去学习代码开发,而是在这样的项目当中,我并不适合从UI和UX领域延伸出去,毕竟完成项目的开发优先级比学习代码更高。
在发布新产品之前,我们必须考虑2个问题:
这些问题让我们最终能够达成目标,且按时发布,避免分心。专注交付最核心的功能,而不是被一堆冗余的次要特性所压倒。
在交接的过程中,我还做了一些优化:
在设计UI的时候,界面中的文案部分是临时编写的,这促使了一次设计完成之后,整体的文案是不一致、不协调的。
我很希望一开始就创建了一个单独的文档,一次性将文案部分全部重写,包括提醒、注释、标签、弹出框提醒等等。而实际上,我的文案都是在设计UI的时候附带着写下来的,导致整体的一致性严重缺乏。
这种文案本身在调性上的缺乏,导致了整个产品在语气和用词上是混搭式的,一致性很差。
所以,在产品上线发布之后,一直在对文案进行修修补补。
最近在阅读关于智能语音方面的书籍,将最近零零碎碎的笔记重新整理了一番,希望能让读者更加快捷、高效的认识智能语音方面的基础知识点。
智能语音对话系统
语音交互界面是近年来最重要的趋势之一,它不仅可以依托于智能手机而存在,而且可以和智能家居、车载导航、智能电视、智能音响等一系列产品结合到一起。越来越多的人更加频繁地使用Siri、GoogleAssistant、Cortana、小爱同学等。越来越多的应用也都已经涉及到智能语音技术。
1、语音和语言有何区别?
我们首先需要了解「语音」和「语言」的区别。
语音是语言的信号载体,语音是人的发音器官发出的,承载一定的语言意义,而语言才承载人类的智慧。通俗的讲,语音是天生就存在的,婴儿刚出生的哭喊声也算是语音。它是人的发音器官发出具有一定社会意义的声音。其物理基础主要有音高、音强、音长、音色四要素构成。而语言则是需要学习不断进化的。在智能语音中,我们需要考虑的是如何确保在复杂的现实环境下,把干扰信息过滤,获取到准确的信息。
2、语音界面之间的关联
唤醒:AmazonEcho和GoogleHome之类的语音驱动设备不断地在等待唤醒词(“Alexa...”或“OK,Google...”)从而进入唤醒状态。
反馈:一旦唤醒,设备会将随后接收到的音频发送到云端的AI平台。该平台使用自动语音识别(ASR)和自然语言理解(NLU)的组合来识别用户的意图并将其发送到支持应用程序。
回复:应用程序处理请求并通过文本进行响应(如果支持则提供可视化信息)。该平台将文本转换为语音并通过设备播放。
3、对话系统概述
对话系统:能够与人进行连贯对话的计算机系统,可以采用文本、语音、图形、触觉、手势及其他方式与人进行交互,常以语音交互为主。
而如今的智能设备能够“理解你所说的话并且采取行动”,是两个重要技术结合的结果:一个是自动语音识别(ASR),另一个是自然语言理解(NLU)。
自动语音识别(ASR)—通过声学模型和语言模型,将人的语音识别为文本的技术
自然语言理解(NLU)—对用户输入的文本进行语义理解,包括用户意图识别和语义槽填充
对话状态跟踪(DST)—根据所有对话历史信息推断当前对话状态St和用户目标
对话策略学习(DPL)—基于当前状态生成下一步操作
自然语言生成(NLG)—获取结果文本,主要依据模板或深度生成的模型生成用户可以理解的自然语言文本
从文本到语音(TTS)—结果播放给用户听,将自然语言文本转化成语言输出
4、语音交互设计需要遵循什么原则?
遵循合作原则:「听者」和「说话者」为了能够顺利交谈,必须互相合作。PaulGrice提出了这个观点,并将其分为以下4个准则。
质的准则:说真实信息,做不到的话不要说。
举例:对用户说:“有什么可以帮您的吗?”,而实际上整个VUI系统仅仅能提供查询话费余额。
量的准则:保持对话交流简洁,减少认知负荷。
解释:删除多余的措辞。比如“请您注意听,因为我们的选项可能已经变了”。
解释:比如用户想知道天气,你给他推荐旅游的地方。
方式准则:说话需清晰、明了,不要拐弯抹角。
解释:不要使用让用户难以理解的「专业术语」。
1、语音用户界面VUI简史
20世纪50年代:贝尔实验室建立了一个单人语音数字识别系统。
20世纪60、70年代:语音数字系统的这项研究仍在不断拓展可识别的词汇,并且致力于实现“连续语音”的识别。
20世纪80年代:技术进步让语音识别更具实用性,使日常语音的识别成为可能。
20世纪90年代:诞生了第一个可行的非特定人的语音识别系统。简称IVR
2、那什么是IVR系统?
交互模式的语音应答,简称为IVR。我们后续简称为:交互式语音应答(IVR)系统
IVR,即语音增值业务,是移动运营商由2002年开始启动的业务。移动的IVR分为两大品牌:音信互动和娱音在线,联通的IVR品牌为联通。
3、IVR系统设计与移动设备
移动VUI设计需要注意:
1、确定它是否需要一个视觉化的呈现,比如一个虚拟角色。
2、确定你的VUI在什么时候允许用户说话?可以被打断吗?是否需要按键功能?
4、VUI的优势是什么?
释放双手:释放双手与机器进行交互,比如驾驶状态下,通过语音输入完成用户需求,安全和便利。
直觉性:说话更自然,更容易。可以直接通过语音输入的方式来表达你的意愿。
同理心:语音包含了语气、音量、语调和语速,且传递了大量的感知信息,不仅仅是文字那么简单。
5、哪些场景不适合使用VUI?
公众场所:开放的环境办公,比如:咖啡馆、图书馆等。环境影响因素较大,不利于用户语音的录入和接收。
不适应对计算机说话:并不是每个人都喜欢对计算机大声说话,即使是在私人空间。
隐私安全:比如身份证、银行密码等。GUI比VUI更加适合高效安全输入。
6、哪些场景适合使用VUI?
使用场景需要腾出双手,比如车载导航、智能音响。
作为家庭的控制中心,打造智能家具居控制的切入点。
语音记录病历,不管对医生来说还是患者来说,都是提高看病效率的很好助手。
7、VUI设计师的工作内容
VUI设计师思考的是在系统和终端用户间,从开始到结束的整个对话过程。他们思考正在解决的问题以及用户需要什么来达成他们的目的。VUI设计师在项目中扮演着非常重要的角色。通常会参与项目全程的工作,并与团队合作完成在技术、体验、设计上的优化。
如果VUI需要与后端系统进行交互,他们要考虑需要处理的请求。如果流程中有人的因素,比如客服需要交接,那么设计师需要考虑如何进行交接,以及如何培训客服。
语音用户界面基本设计原则
1、对话式用户界面
对话式设计定义:思考如何与VUI系统进行一轮以上的交互。
因此,需要设计一轮以上的对话,并思考用户接下来可能会做什么。不要强迫用户展开新一轮对话,而是去尝试了解用户的意图并允许用户继续交谈,同时有必要为用户近期所说的话保留历史记录。
2、多模态界面
与IVR系统不同的是,在移动设备上我们可以增加一个可视化组件。
比如在向用户传达信息、确认信息,以及告诉用户什么时候轮到他们说话等。(比如:百度地图的小度,他会告诉用户什么时候可以说话,目前所处的状态,说完之后给予的反馈)
如果有一个可视化组件,则会让移动设备增强优势。允许用户同时使用语音和屏幕进行交互。(手机上虚拟助手,有些虽然以语音交互为主,但是在用户的智能手机上也会有一个配套的APP)。
3、设定用户期望
优秀的对话式设计不仅仅是精心制作的友好提示。Google交互设计师MargaretUrban建议:如果你不能理解答案,就不提问。
“当某个人成功完成了一次语音交互,伴随着脑内咖(endorphin)的升高,用户会获得一种成就感和满足感。此时正是一个绝佳的时机来告诉用户”你做的很棒,要不要再试试这个?”
是否让我们想到了网页登陆验证的时候,需要完成一块拼图,但是你再慢他也告诉你超越全球96%以上的人。
4、确定策略时需注意的几点
输入确认:必须确保用户感觉到自己是被理解的,同时有助于让用户知道,什么时候VUI不理解他们所说的话。
1、确认错误的后果是什么?比如:预定错误的航班?制定错误的任务?播放错误的歌曲?
2、系统将如何反馈?比如:会有音频提示吗?是否有视觉反馈吗?比如AmazonEcho上的光环。
3、是否拥有屏幕?比如:车载导航、手机屏幕、智能手表。
4、选择合适的确认形式?比如:明确确认、含蓄确认、混合式的确认。
5、确认策略的两种方案
显性确认:重要信息,需强制用户确认信息。
隐性确认:让用户知道他的话接收到了,但不需要他们确认。
6、确认信息的方式
三级置信度:
系统将在一定的阈值内,以明确的形式确认信息,拒绝较低置信度的信息,并以隐性确认来确认置信度超过80%阀值的信息。
1、80%以上,使用隐性确认。如果是误识别代价高的话,考虑采取显性确认。
2、45%-80%,使用显性确认,以明确的形式确认信息。
3、45%以下的,拒绝确认信息。
举例:用户:帮我再买一份口香糖。
VUI:(置信度大于80%,使用隐性确认)好的,已经为您再购买一份口香糖。
(置信度45%~79%,使用显性确认)您是想再多买一份口香糖,是吗?
(置信度小于45%)对不起,我没有听清您讲的话,您想买什么?
隐性确认:
1、只使用隐性确认,不要求用户进行操作。
2、将「答案」和连同「原始的问题的一部分」一同回复,让用户知道系统识别到的是哪个问题。
3、当置信度高的时候,也可以不用连同问题,这样更自然流畅。
非语言式确认:
1、仅需行动反馈,而不需要口头响应。
2、通过视觉确认,比如小米智能家居,可以通过语音交互打开灯光、电视、窗帘等。
a、如果没有延迟,没必要再对其回复。
b、如果有3-5秒延迟,需进行回复,让用户知道并不是设备没有听到她的声音。
3、使用一个“声音标识”,即简短的、有识别度的声音。这样有助于帮助用户快速知道他们已经到了哪一步。
通用确认:
1、在某些对话式系统中,最好不要询问用户具体说了些什么-哪怕是隐性确认。
视觉确认:
1、确认一个项目清单,通过屏幕显示进行沟通会更加有效。人的记忆有限,通常用户一次性不能记住超过大约7个听觉项目。
2、用来确认用户的选择。用户可以通过说话或按下按钮来回复。而GUI的反馈指令更加明确。
7、判断你的VUI适合哪种类型
目前大多数的VUI系统都是“命令-控制”模式,这意味着当用户想要说话时,必须给出明确的指示。
1、用户可以随时向系统询问/发出命令吗?
2、是否参与一个有明确开始和结束的封闭式对话?
8、命令-控制模式
唤醒系统方式:按键通话(车载导航、Siri等)、直接进行关键词呼叫(“OKGoogle”“小度”等唤醒词)。
唤醒系统反馈:系统检测到用户说话完成,通常会使用某种非语言的音效进行提示,然后做出相应处理(比如:“啵”的一声或者视觉反馈:声波线、点状动效、设备逐渐发光等)。
1、1250ms以内是用户认为响应速度较优的区间,其中650ms为最佳体验值。在450ms时,少量用户觉得响应速度太快了,用户会感觉到紧迫感和压力,难以接受。
2、在1450ms时,有53%的用户开始感觉响应有延时,但仍能够接受。
3、从2150ms开始,有20%的用户认为音箱响应太慢,不能够接受。我们认为20%的用户不满意,已经不足以被称为一个优秀的产品。
9、对话模式
1、不要强迫他们不断地去表明他们将要开始说话,自然地对话技巧进行话轮转换。
2、通过更精细的设计,使VUI系统可以处理一些常见的微妙表达方式。(用户处理完毕说“谢谢”,你可以设置系统忽略这种情况,或回复“不用客气”,而不是提示或者报错。)
3、不要问你都无法理解的反问句。
4、打破话轮转换的情况,用户在系统说完之前就进行提问。
5、在命令-控制模式和对话模式之间进行切换。唤醒之后进行自然的对话。
10、对话式标识
使VUI更加人性化、更具吸引力,对话式标识是让用户了解交谈进展以及进展情况的重要方式,当系统在对话中使用了一些基本的对话礼仪后,用户的参与度会更高,并且会以同样的方式进行回复。
反面案例:
虚拟助理:你昨晚你睡了几小时?
用户:大约7个小时。
虚拟助理:你昨天吃了几份水果和蔬菜?
用户:大概有4份。
虚拟助理:你昨晚吃药了吗?
用户:吃药。
虚拟助理:再见。
正确案例:
虚拟助理:我会问你几个有关你身体健康的问题。第一个问题,昨晚你睡了几小时?
虚拟助理:不错。你昨天吃了几份水果和蔬菜?
虚拟助理:了解了。最后一个问题,你昨晚吃药了吗?
虚拟助理:好的,暂时就这些了,我明天还会再问你的,回见。
11、异常处理
“当你与人类交谈时,永远不会出现不可恢复的错误状态。”
—ABIJONES,Google设计主管
“你偶尔因为犯错和不知道某些事情导致评分降低造成的影响,比你每次做对一件事情重要百倍。”
—英特尔语音助手部经理PilarManchon
如果处理的得很好,错误情况就不会影响用户,你可以让用户回到正常流程,并顺利完成任务。但如果处理不好,用户不仅这次无法完成任务,他们以后都可能再也不用你的产品了。
一个好的设计师应该知道,你不能只设计正常的情况,你还要对出错的情况做出设计。这对于VUI设计来说尤为重要,因为出错情况是家常便饭。
未检测到语音/检测到语音,但没有识别
1、什么情况下可以明确说出来?
a、你的系统只使用语音
b、用户没有其他的回复方式
c、必须要用户回复后,系统才能继续进行任务/对话
2、什么情况下可以什么都不做?
a、用户可以通过其他方式进行下一步操作(比如通过按键选择)
b、就算什么也不做,也不会中断对话
c、系统没有理解时,用视觉信息提示告诉用户,比如:提示列表等
d、利用虚拟表情形象反馈,疑问、微笑等动作表达
其他异常处理
1、当出现:语音被正确识别,但系统无法处理
a、程序对关键属性理解不明,写了错误的回复
b、没有针对一些情况的回复
解决:对用户可能会说到的所有情况做更完善的预测,通过数据收集来避免此问题
2、当出现:部分语音识别错误
a、什么也不去处理,因为这不是你想要的结果
b、匹配错误的行为
解决:可以用N-Best列表来智能匹配最有可能的识别结果
3、增强错误提示
a、当需要用户说话的时候,使用这种增强错误提示策略
b、必要的情况下,进阶错误行为提示可以更为详细,并提供更多的帮助
c、如果你正在设计一个可以提供真人辅助的系统,可以为错误数量设置一个阈值,当达到该阈值时,将用户转移给人工助手
12、新手和专家用户
如果你的用户会定期使用你的系统,那么在设计中就需包含不同的策略。
“务必确保你的目标不是简单的训练你的用户,应当适应用户的行为,而不是用已有的命令让用户感到厌烦。”
—Google交互设计师MargaretUrban
我们在VUI设计上该如何更好的交互设计?
1、减少冗长指令以及其他引导提示。通过计算APP使用次数和频率来确认是否切换模式。
2、缩短解释性提示。但是请务必使用“对话式标识”。
3、启动效应。
什么是启动效应?
指某人受到某种特定的刺激后(例如一个词语或者图像)会影响他们对之后刺激的反应。首先让用户预先知道你会问他们几个确定数量的问题,为后面会发生的事情提供了暗示,用户就会知道如何去准备。比如以下情况:
1、当给人们呈现一个还没完成的草图,随着这个草图越来越完整,人们就越来越辨认出这张图画的是什么。之后,再给他们呈现其他还没完成的草图时,他们会更早辨认出这张图画的是什么;
2、如果当给人们呈现一组汉字,假如里面含有“河”这个字,随后让他们写出部首是“氵”的字时,这些人回答“河”的几率会更大。
谈谈自己对新手和专家用户的理解
01、专家型用户:代表老用户且愿意探索你的产品或服务,有着很大的包容度。并会积极提出各种改进的建议和享受产品带来的惊喜感。
02、新手:什么叫新手,就是刚刚下载你的产品,准备使用的用户,对产品功能都还处于陌生摸索的阶段。他们不会因为你的技术而使用你的产品,使用你的产品目的是完成某项任务。他们有兴趣使用更高级更复杂的产品,但却不愿意接触全新的东西,要想让他们认可,那么产品就必须足够简单。
13、持续跟踪上下文
持续跟踪信息并不容易,但如果不跟踪这些信息,你的APP就只能做单轮的对话行为。
指代:用两个不同的词语指同一个东西。比如:“他”“哪些”
14、帮助和其他通用部分
我们在设计IVR系统时,我们会确保每个状态都包含一组通用组件:重复、主菜单、帮助、操作和再见。
15、延迟
产生原因:糟糕的连续性能、系统处理进程、数据库访问
处理细节:延迟的时长可能为0~10秒,在没有延迟的时候最好也插入几秒的延迟。因为如果在系统说“请稍等”之后,紧接着就继续对话的话,会给用户带来异样的感受。很多设备针对唤醒词采用了本地化识别的方式,这样唤醒的会更快。
16、消除歧义
举例:用户可能会询问某地的天气,而很多地方都有叫这个名字的地点,诸如“湖南路”那边的天气怎么样。
解决方案:
1、依靠任何已知的信息来确定答案,而不是再次询问用户。
2、根据上下文线索进行判断。
3、反问用户进行确认,确保系统对用户同一个问题的各种各样的回复形式都有良好的适应性。
5、用户回答的信息超初了你的VUI系统可以处理的范围时,你可能需要缩小范围消除歧义。
17、设计文档
我们需要制作:示例对话(sampledialogs)和会话流(dialogflow)文档外其他一些情况。例如:在设计过程中,你还需要创建提示列表、完善对话每个状态指定完整的语法规则等等。
18、无障碍设计
“一开始,我就很讨厌屏幕阅读器的工作方式。为什么它会被设计成这样?当以视觉的方式来展示信息没有任何意义时,屏幕阅读器只是简单地将文字转换成音频。所有那些应用花在创造完美用户体验的时候和精力此时都变得没有任何意义,甚至有的给盲人用户带来了更糟的体验。”—克里斯·莫里(ChrisMaury)
19、典型VUI项目交付项内容
示例对话:系统和用户之间可能产生交互行为的预设对话,对话看起来就像电影剧本一样,包括两个主要角色之间来回往复对话。
流程图:展示下一个状态分支的所有方式,不一定要罗列所有的交互或示例对话,也可以是功能的分组、文本的分组等。
提示列表:如果没有屏幕可以使用配音演员或语音合成来播放提示列表。
产品原型:如果这是一个多模态产品,有屏幕、支持触摸交互。
参考文献:
《语音用户界面设计:对话式体验设计原则》-【美】CathyPearl(凯瑟彼尔)
语音交互入门:从概念,原理到如何设计VUI产品-杜松
AI时代的语音设计经验漫谈-少夫白杰
语音用户界面设计-对话式体验设计原则-walle_x
半年前面试字节的时候,面试官问了我有关配色的定义,细节到为什么是这个色值。当时十分震惊于这么细节的问题,之后我就想起了之前有位朋友给我发送过一份有关支付宝「蓝」的定义pdf,洋洋洒洒几十页就是为了解释他们为啥用这个有点脏的蓝色#108ee9当主色。
所以其实APP的配色/图标与主品牌是一脉相承的,它是品牌的延续与象征。它以最直观的态度传达给用户,这个产品以及品牌的调性,并以此建立最强有力的视觉识别性。所以我觉得它是可以有条件地展示在我们设计方案里的,但一定注意它的篇幅和表达的方式,维度在品牌传达这一层就对了。
至于如何展示和定义你的APP配色,一般2类情况。
1.在品牌主视觉配色基础上的适配
这种情况一般适用品牌主视觉方案已经设计完毕,APP端作为延续。这个时候一般注意配色从CMYK模式到RGB的转换,所以作为APP的配色,具体色值上可以稍作调整,使它更适配于LED屏的用户感知与舒适度。
另外可以使用透明度进行色彩分阶段,一般从0-100%分为10阶就足够我们日常界面设计使用了。
2.0-1定义APP配色
这种情况下我们从感性和理性2个角度去定义颜色。
从感性的角度分析:情绪板应该大家都熟知的了,根据不同的行业和用户定位得到相应的关键词。对应不同的关键词再搜集对应的图片,从图片和自然感知中提炼出主色。
从理性的角度分析:我们把色彩分为对比色、近似色、复合色、单一色、三角对立色和渐变色六种。根据产品的类型和定位,我们决定使用什么样的配色。比如一个年轻大学生专用的社交型APP,我们可能就倾向更多地使用对比色这样的撞色得到更多潮流与青春的味道。
至于图标的话我就更不用多说了,大家肯定都记得那些非常基础的绘制图标的法则。个人认为图标也不太需要放一个单独的篇幅去展示,除非它有一些新奇有趣的亮点。
首先我们从宏观角度分析,一方面产品的业务线处于什么情况,是相对独立的业务主线产品(举例:拉勾)?还是平台级产品(里面包含了许多垂直的业务线,举例淘宝)?如果是平台级产品在整体框架设计时就需要考虑跨端跨业务的框架拓展型。
举个例子,就是在定义平台框架的时候要考虑这个框架与容器是不是同时适用于底下的子业务线,同时当这个框架到了H5、小程序、PC的时候需要做哪些适配调整,是否都可以很好地进行兼容适配。
另一方面,整体框架设计的类型是否符合设计目标。举个例子,无框式超大留白的框架设计虽然看上去很厉害,但在大部分商业产品中它的实用性却非常低的。假设说我们今天需要做一个电商类的app,设计目标是希望能够提升业务转化以及购买效率,那么展示效率与功能分区就显得尤为重要,它就更适合一个相对紧凑的卡片式为主的框架设计。
其次从微观的角度来说,遍地就都是细节了。舒适度美学这一说,其实难免有些抽象,我们把它转为相对合理一些的落地原理就会清晰很多,像大家熟知的间距4倍数原理、对齐原则等等。但是这些微观的内容不建议大家放到方案展示里,因为它并没有针对单个方案的特殊性,更像一种大众共识。
△多说无益,直接上最终的效果图,方便大家参考
我们特地把单独的容器部分拿出来解析,是因为自定义容器是展示核心业务最主要思考呈现,同时还可以配合运营做很多提升业务效率的配置。在做具体设计的时候,我们需要区分「端上固定」模块和「运营配置」模块之间的差别。
「端上固定」模块
顾名思义就是开发端上需要写死的模块。写死的模块意味着,无论一个配图还是一句文案,也只有开发童鞋修改后通过发版才能实现内容变更。一般适用于相对固定的产品功能以及UGC用户生产内容。比如:拉勾上传简历功能、斗鱼的直播间列表。
「运营配置」模块
相对「端上固定」,「运营配置」就不需要跟着发版,可以随时后台上传替换模块内的内容,适用于需要PGC生产的内容。说到这里很多童鞋可能马上就联想到banner,弹窗的运营位了,但其实除了这些之外还有很多容器模块是需要灵活配置为「运营配置」模块才能更有效地提升运营业务价值。
我们可以这样来区分「运营配置」模块类型。
一种是纯运营配置模块,即设计与开发输出框架、定好配置字段限制之后,运营可以独立完成后台配置的。比如:资讯app0-1前期的资讯列表内容。
在0-1的设计方案中,更推荐大家展示「运营配置」模块的内容与解析,因为0-1是个以拉新为主的阶段,运营显得尤为重要,所以我们的设计需要侧重考虑整体的运营效率与转化。
在我们概述完大部分的整体思考路径与设计方案后,我们需要由面到点,从全局提炼细节,突出自己的设计方案亮点。
而如何提炼这个亮点呢?是挑一个我设计的最好看的界面呢?还是直接放最复杂的那个流程?以下是推荐选择的亮点设计:
1.完成理论实践,并可以量化价值的设计case
虽然在0-1的项目里,我们基本不太用得上优化数据比对(因为产品初期用户数量少,产品体验路径也是一直处于不断试错阶段),但是我们还是可以借用上文所述的一些方法论或者A/Btest来完成我们的方案思考过程展示。
那些你在完成践行设计策略完成设计目标时获得的数据指标要提前预知,养成习惯之后,你就可以快速轻松地察觉到哪里有可以做A/Btest、进行埋点数据比对的地方了。
2.影响上中下游环节的设计case
除了对业务提升价值的项目外,我们有时候也需要注意对品牌设计、产品、运营、技术等上中下游造成影响力的设计项目。通常这类设计大部分也都是设计自驱发起的,能起到提升各方人效和业务效率的作用。
举例的话,我能马上联想到的就是多方协作的大型线上组件库,可以参考阿里的Antdesign、滴滴的魔方,在之后的版本拓展中甚至可以延展成功能更加强大的多方协作UX设计资源中心。
界面交互动效是展现界面间的转换和界面内元素变化的交互反馈。而效果就表现在触发与结束的过程中,表现清晰的层级关系,自然的引出与结束。交互动效有着承上启下的重要作用。
第一种:为衔接类型动画
主要针对不同界面直接的衔接,为带来更流畅的操作观感所做的设计,弥补两个界面直接的差异所带来的用户感知落差。
第二种:特效类动画
第一类:界面内的交互动效
第二类:界面间的交互动效
几个界面之间的的交互动效通常是平缓过渡到下一页。常见的有以下几类:
△硬切到下一页
△下一页从右往左推入(上一页从左往右推出)
△下一页从下往上弹出
△上一页的元素过渡到下一页
总结:
经过一些项目经验,结合几个方法论,我整理出了一个评估交互方案完整性的方法,也可以作为前期考虑方案的分析方式。下面就来介绍一下,希望能给大家帮助和启发。