首页

从零开始设计产品的 10 个 UI/UX 启示

纯纯

Peter Drucker 说过:「量化才能管理。」这个格言后来成为了我的信条。我决定将我的目标量化,将它分解成为最基础的习惯来执行,并且以每天一定量的执行,来实现最终的目标。

从零开始设计产品的 10 个 UI/UX 启示

我们先构建了一个免费的 Chrome 插件 Confetti ,这是一个能够帮你追踪日常习惯的工具,每次完成一个任务,都会有五彩缤纷的纸屑效果出现,祝贺你守住了习惯,达成目标。

从零开始设计产品的 10 个 UI/UX 启示

以下见解希望对你有所帮助!

1、一开始就要界定好产品特性

从零开始设计产品的 10 个 UI/UX 启示

一开始,我和 Wilson 就决定使用3屏的主要功能,并构建了一个粗糙的原型。但是,我们没有足够的远见,无法设想我们的产品最终的方向,也没有对全部的想法进行深入的打磨。

最终,我们向后退了一步。我们回过头来,确定了最小可执行原型的发布日期,以及真正的核心功能。我们在 Notion 上创建了一个文档,并且开始梳理和管理哪些功能是「必需品」,哪些功能「如果有了会更好」。比如,登录、注册、新用户引导是必不可少的功能。但是,我们认为「重新排列习惯」是一个提升体验但是并不亟需的功能。

我们基于这一点,我们开始抓住核心功能,尽可能让它们足够易用,强化核心特性。通过确定核心功能的优先级,并且确定发布日期,借此缓解我们的精神压力,确定我们不会被成堆的功能所淹没。这也似地我们有足够的动力解决核心功能。

2、有很多流程和状态需要搞定

从零开始设计产品的 10 个 UI/UX 启示

在设计产品的时候,我经常被提醒要处理好每一个边缘情况,填好每一个坑,确保体验的顺畅。从零开始构建产品是一把双刃剑:基于自己的构想来创造产品是令人兴奋的,但是相应的,我需要经常在舒适区以外处理问题。

我一直在 Skookum 从事产品设计的工作,而这些工作通常都是在一定的约束条件下进行的,但是现在所要处理的产品则不同。之前的产品都可以借助现成的设计系统,有早已搭建好的设计语言,有完整的组件,有明确的 UI 状态,有非常明确的基础架构,但是这次是我自己的产品,所有的这些都没有。而且,这个产品还可能会存在几种极端的情况、流程和状态。

比如,在注册流程中,按钮会有默认、禁用、激活、填充、错误、悬停等几种状态,但是除了这些之外,我还需要考虑诸如密码重置的流程和体验,这可能会涉及到 6 个高度相似的 UI 界面状态:

  1. 输入 Email
  2. 重新发送 Email
  3. Email 通知设计
  4. 输入新的密码
  5. 错误界面
  6. 成功界面

这个过程中,有很多东西都令我一度感到迷惑,这也引发出我下一个要说的要点……

3、创建用户流程

从零开始设计产品的 10 个 UI/UX 启示

项目开始之后,我很快就遭遇了组织架构问题。因为我是在工作之余来创建这个产品,这导致我犯了一个非常严重的错误:我没有按照传统的产品流程来创建产品,这随后导致了一系列的问题。

按照标准的产品设计流程,我需要从用户流程开始创建,定义用户可能会执行的流程,并且针对主要的流程界面进行必要的总结说明。因为这个项目和之前的工作不一样,我一开始就忘记了遵循流程这件事情,我错误地将它视作为一个包含几个简单界面的简单项目(是不是听着特别耳熟?很多所谓的小项目翻车都是从这里开始的)。这样一来,当我开始处理诸多按钮的不同状态和界面变化的时候,整个用户流程变得混乱不堪,并且我很难确定其中的体验漏洞有哪些。

最终我停止了这种随性的设计方式,并且在 Whimsical 当中创建了完整的用户流程。于是我很快清楚了那些环节有所缺失,以及整个界面流程的走向。

按照用户流程来梳理界面的时候,可以对于整个产品的屏幕状态有所了解,并且随着产品的发展膨胀,用户流程的重要性会随之增长,成为至关重要的部分。

4、交互应该反馈到UI中

从零开始设计产品的 10 个 UI/UX 启示

的确,在完成整个 UI 之前,不应该开始向着项目当中添加动画。但是,不添加并不意味着你无需考虑。实际上,不同的微交互和动画对于实际的体验影响是巨大的。你在思考 UI 设计的时候,就应该考虑到微交互和动画的使用,避免在后续动效和交互落地的时候,进行不必要的修改。

比如,当我在设计「达成成就」这一体验的时候,我就考虑到了需要用到的微交互的效果,所以在我设计 UI 的时候可以顺着我自己的喜好来进行设计,并且将可能会用到的动效拖到某个角落暂时记下来,避免在设计 UI 的阶段,影响了整体的流程和效果。而后续加入动效的时候,就会方便很多。

我认为,将 UI 和交互结合起来考虑是非常重要的,因为两者共通塑造了体验。如果在设计 UI 的环节直接加动效,会让整个设计过程变得复杂臃肿。

5、尽早获得反馈

从零开始设计产品的 10 个 UI/UX 启示

其实这也是我在这个项目中犯的一个大错:等了太长时间才获得反馈。

我通常是在晚上回家和周末才有空推进这个项目,在很长的一段时间内,我没有真正告诉任何人。

当我终于同我的家人、朋友、用户以及网上乐于尝鲜的用户公布了这一产品之后,他们在使用过程中,开始注意到了很多细节上显而易见、但是我并没有发现的问题。我意识到我作为产品的设计者,是很容易陷入并沉迷用户体验当中比较孤立的一部分,反而会忽略很多显著的问题。

回想一下,如果我能尽早向用户和朋友展示设计和原型,那么我会在更早的时候发现问题,并且在获得反馈之后才进入开发阶段,弥补大量的损失。

6、在别处获得启发很重要

从零开始设计产品的 10 个 UI/UX 启示

很多设计师会认为,所有的想法都必须是原创的才行,否则就是欺诈。但是稍微想想,其实彻底的原创其实很少的。当你看到一个优秀的产品,它优秀的配色和恰到好处的交互可能会让你觉得:「已经有人做出来了,我的想法在它面前完全没法比拟。」

这种思维方式其实有着极大的缺陷,并且抑制了你的创造力。

当我发现我的设计有缺陷的时候,我会竭尽全力去搜索和了解更多网上已有的设计。我会观察和思考别的公司和产品是如何设计新用户引导流程的,如何管理用户个人信息的。我从来都没有复制被人的体验,但是会隔三差五去钻研别人所创造出来的优秀细节,然后将这些细节借鉴到我的设计当中。

我最喜欢的一个范例,是从模态状态下,旋转退出的效果。这是我偶然在一个网站上看到的效果,因此我决定将它添加到 Confetti 当中,我还在着陆页的按钮中加入了类似的特效。

事实上,一切设计都是混搭创造出来的。你借鉴细节并不意味着抄袭,不要害怕去发掘和学习别人的优势和亮点,你要学会有机地拆解和借鉴,灵活地运用到自己的设计当中,它就像调制鸡尾酒一样有趣。

7、勇敢面对身份的变换

从零开始设计产品的 10 个 UI/UX 启示

当我们开始设计的产品的时候,我和 Wilson 头顶上的身份就一直在变。我们是 UI设计师,要负责UX,要做交互,也制作动效,要进行平面设计,还要考虑市场营销,要管理产品,我们也要扮演其他的角色。

职责如此之多,以至于我们不可避免地遇到我们能力范围之外各种新问题。我们必须承认自己陷入了困境,寻求外部帮助成了必要的选择。

专注于自己专业的领域,其他不专业的方面来寻求外部帮助是非常合理的。比如在一个项目当中,一位艺术家负责了绝大多数的风景插画,另一位艺术家则完成了肖像画的部分,这很正常。

我希望产品的外观和功能能够保持高度的一致性,并且我确实做到了。但是不要误会我的意思,我并非是不敢走出舒适区去学习代码开发,而是在这样的项目当中,我并不适合从UI和UX领域延伸出去,毕竟完成项目的开发优先级比学习代码更高。

8、保持简单更重要

从零开始设计产品的 10 个 UI/UX 启示

尽管给 MVP 安排好了发布时间,可以防止这个项目被无限膨胀的功能特性和工作量所淹没,但是这样依然无法防止我们基于已有的功能进行改进。

很多人都喜欢 Reid Hoffman 的一句话:「如果你对于产品的第一版感觉不尴尬,那你一定是发布晚了。」不过,我们正式发布的第一版的产品,并不会显得太尴尬,但是目前来看,当时那种简单直观的状态,比起再花费好几个月时间反复打磨之后再发布,来得更好。

在发布新产品之前,我们必须考虑2个问题:

  1. 我们是否相信我们所构建的产品,能够为用户带来价值?
  2. 我们是否竭尽全力了?

这些问题让我们最终能够达成目标,且按时发布,避免分心。专注交付最核心的功能,而不是被一堆冗余的次要特性所压倒。

9、良好的交接更加省事省时

从零开始设计产品的 10 个 UI/UX 启示

从项目一开始我就一直在做项目的管理和组织设计素材,以便后面进行开发。不过,由于我一开始就使用了 Zeplin 这样的协同工具,确保了我可以轻松地将所有的素材都顺畅地交给负责开发的 Wilson。作为一款设计系统工具,Zeplin 让我无需浪费时间对素材进行分类,非常便捷。

在交接的过程中,我还做了一些优化:

  1. 将所有的界面都组织到了 Zeplin 当中,并且进行了处理
  2. 我给所有的画板进行了针对性的命名,方便检索
  3. 我在 XD 中标注了需要导出的素材
  4. 我保留了旧有的界面存档,并且确保交付的新版界面是最新的

10、一次写明所有的UX文案

从零开始设计产品的 10 个 UI/UX 启示

在设计 UI 的时候,界面中的文案部分是临时编写的,这促使了一次设计完成之后,整体的文案是不一致、不协调的。

我很希望一开始就创建了一个单独的文档,一次性将文案部分全部重写,包括提醒、注释、标签、弹出框提醒等等。而实际上,我的文案都是在设计 UI 的时候附带着写下来的,导致整体的一致性严重缺乏。

这种文案本身在调性上的缺乏,导致了整个产品在语气和用词上是混搭式的,一致性很差。

所以,在产品上线发布之后,一直在对文案进行修修补补。



文章来源:优设(陈子木)   作者:Danny Sapio





分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


语音用户界面设计 - 对话式体验设计原则

博博

文章包括三部分:1.智能语音对话系统;2.了解 VUI 相关知识;3.语音用户界面基本设计原则。

最近在阅读关于智能语音方面的书籍,将最近零零碎碎的笔记重新整理了一番,希望能让读者更加快捷、高效的认识智能语音方面的基础知识点。



智能语音对话系统


语音交互界面是近年来最重要的趋势之一,它不仅可以依托于智能手机而存在,而且可以和智能家居、车载导航、智能电视、智能音响等一系列产品结合到一起。越来越多的人更加频繁地使用 Siri、Google Assistant、Cortana、小爱同学等。越来越多的应用也都已经涉及到智能语音技术。





1、语音和语言有何区别?


我们首先需要了解「语音」和「语言」的区别。


语音是语言的信号载体,语音是人的发音器官发出的,承载一定的语言意义,而语言才承载人类的智慧。通俗的讲,语音是天生就存在的,婴儿刚出生的哭喊声也算是语音。它是人的发音器官发出具有一定社会意义的声音。其物理基础主要有音高、音强、音长、音色四要素构成。而语言则是需要学习不断进化的。在智能语音中,我们需要考虑的是如何确保在复杂的现实环境下,把干扰信息过滤,获取到准确的信息。




2、语音界面之间的关联



唤醒:Amazon Echo 和 Google Home 之类的语音驱动设备不断地在等待唤醒词(“Alexa ...”或“OK,Google ...”)从而进入唤醒状态。


反馈:一旦唤醒,设备会将随后接收到的音频发送到云端的AI平台。 该平台使用自动语音识别(ASR)和自然语言理解(NLU)的组合来识别用户的意图并将其发送到支持应用程序。 


回复:应用程序处理请求并通过文本进行响应(如果支持则提供可视化信息)。该平台将文本转换为语音并通过设备播放。




3、对话系统概述


对话系统:能够与人进行连贯对话的计算机系统,可以采用文本、语音、图形、触觉、手势及其他方式与人进行交互,常以语音交互为主。



而如今的智能设备能够“理解你所说的话并且采取行动”,是两个重要技术结合的结果:一个是自动语音识别(ASR),另一个是自然语言理解(NLU)。


自动语音识别(ASR) — 通过声学模型和语言模型,将人的语音识别为文本的技术

自然语言理解(NLU)— 对用户输入的文本进行语义理解,包括用户意图识别和语义槽填充


对话状态跟踪(DST) — 根据所有对话历史信息推断当前对话状态St和用户目标

对话策略学习(DPL) — 基于当前状态生成下一步操作

自然语言生成(NLG) — 获取结果文本,主要依据模板或深度生成的模型生成用户可以理解的自然语言文本

从文本到语音(TTS) — 结果播放给用户听,将自然语言文本转化成语言输出




4、语音交互设计需要遵循什么原则?


遵循合作原则:「听者」和「说话者」为了能够顺利交谈,必须互相合作。Paul Grice 提出了这个观点,并将其分为以下4个准则。


质的准则:说真实信息,做不到的话不要说。

举例:对用户说:“有什么可以帮您的吗?”,而实际上整个 VUI 系统仅仅能提供查询话费余额。


量的准则:保持对话交流简洁,减少认知负荷。

解释:删除多余的措辞。比如“请您注意听,因为我们的选项可能已经变了”。


相关准则:所说的话需与当前对话有关,不干扰当前任务进行。

解释:比如用户想知道天气,你给他推荐旅游的地方。


方式准则:说话需清晰、明了,不要拐弯抹角。

解释:不要使用让用户难以理解的「专业术语」。







了解 VUI 相关知识


语音交互界面(VUI)指的是为用户提供可进行语音交互的计算机平台,它能够实现自动化的服务并且提供完整的相关流程。而设计 VUI 的时候,设计师需要侧重于用户的语音交互过程,并设计出相应的语音应用系统。由于 VUI 是面向用户的交互界面,因此满足用户的实际需求是至关重要的。




1、语音用户界面 VUI 简史


20世纪50年代:贝尔实验室建立了一个单人语音数字识别系统。


20世纪60、70年代:语音数字系统的这项研究仍在不断拓展可识别的词汇,并且致力于实现“连续语音”的识别。


20世纪80年代:技术进步让语音识别更具实用性,使日常语音的识别成为可能。


20世纪90年代:诞生了第一个可行的非特定人的语音识别系统。简称 IVR


21世纪初期,IVR 系统成为了主流,任何人都可以通过一个普通的固定电话和语音进行股票询价、机票预定、银行转账、处方药品预定、本地电影排片查询以及收听交通信息等。




2、那什么是 IVR 系统?


交互模式的语音应答,简称为 IVR。我们后续简称为:交互式语音应答(IVR)系统


它可以通过电话线路理解人们的话并且执行认为,一般都广泛的应用在运营的客服方面,即使是现在三大运营上的机器客服还是采用了这种语音应答的方式。但是通过电话拨号的方式开始语音的问答还存在很多的缺点,例如只能应用在单轮任务的问答,交互方式比较单一,不能进行中途打断等缺点。


IVR,即语音增值业务,是移动运营商由2002年开始启动的业务。移动的 IVR 分为两大品牌:音信互动和娱音在线,联通的 IVR 品牌为联通。





3、IVR 系统设计与移动设备


21世纪初,IVR 系统已逐渐普及。起初“按键+语音”的混合形式(请按“1”或者说“1”),是很常见的模式,比如10086的查询功能。人们创造了 IVR 系统,希望它可以自动处理一些事物,这样客户就不会总是需要找一个真人来解决问题了。相比与真人客服交谈,很多用户实际上更喜欢使用 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 交互设计师 Margaret Urban 建议:如果你不能理解答案,就不提问。


“当某个人成功完成了一次语音交互,伴随着脑内咖(endorphin)的升高,用户会获得一种成就感和满足感。此时正是一个绝佳的时机来告诉用户”你做的很棒,要不要再试试这个?”


是否让我们想到了网页登陆验证的时候,需要完成一块拼图,但是你再慢他也告诉你超越全球96%以上的人。


“如果你已经设计了一个设置闹钟的功能,但是你没有提供用户取消设置的方式,这就像给人一条浴巾但是没给他香皂一样。如果你设置了可以完成某项任务的语气,请务必考虑与之相关的任务。”





4、确定策略时需注意的几点


输入确认:必须确保用户感觉到自己是被理解的,同时有助于让用户知道,什么时候 VUI 不理解他们所说的话。


1、确认错误的后果是什么?比如:预定错误的航班?制定错误的任务?播放错误的歌曲?


2、系统将如何反馈?比如:会有音频提示吗?是否有视觉反馈吗?比如Amazon Echo上的光环。


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、在某些对话式系统中,最好不要询问用户具体说了些什么 - 哪怕是隐性确认。

2、通用确认可以让用户分享更丰富的体验,因为这类反馈能适应用户输入的各种信息,并让对话继续进行。通常人与人之间的对话,也不会句句必回复,也会有 “嗯” “哦 ”“啊” “然后呢”等。 



视觉确认:


1、确认一个项目清单,通过屏幕显示进行沟通会更加有效。人的记忆有限,通常用户一次性不能记住超过大约7个听觉项目。

2、用来确认用户的选择。用户可以通过说话或按下按钮来回复。而 GUI 的反馈指令更加明确。




7、判断你的 VUI 适合哪种类型


目前大多数的 VUI 系统都是“命令 - 控制”模式,这意味着当用户想要说话时,必须给出明确的指示。


1、用户可以随时向系统询问 / 发出命令吗?


2、是否参与一个有明确开始和结束的封闭式对话?




8、命令-控制模式



唤醒系统方式:按键通话(车载导航、Siri等)、直接进行关键词呼叫(“OK Google”“小度”等唤醒词)。


唤醒系统反馈:系统检测到用户说话完成,通常会使用某种非语言的音效进行提示,然后做出相应处理(比如:“啵”的一声或者视觉反馈:声波线、点状动效、设备逐渐发光等)。


系统聆听时间:用户说出唤醒词或按下按钮后,系统保持聆听状态的时长,根据经验来看,10秒 是个不错的起始时间段。



唤醒响应时间与反馈方式


唤醒响应时间与唤醒反馈方式有关,不同唤醒反馈方式下,最佳响应时间不同:


1、当唤醒反馈为"灯光"反馈时,唤醒响应速度越快越好,在200ms时,用户响应舒适度最高(对响应时间评价为刚刚好的用户比例),73%的用户对速度满意。


2、当唤醒反馈为"灯光+音效"时,唤醒响应速度的舒适时间为300ms左右,76%的用户对速度满意。


3、当唤醒反馈为"灯光+人声"时,唤醒响应速度的舒适时间为500ms左右,74%的用户对速度满意。


数据来源:百度人工智能交互设计院智能音响时间测试实验



唤醒等待时间体验感


用户请求及反馈阶段响应时间对等待体验的影响:


1、1250ms以内是用户认为响应速度较优的区间,其中650ms为最佳体验值。在450ms时,少量用户觉得响应速度太快了,用户会感觉到紧迫感和压力,难以接受。


2、在1450ms时,有53%的用户开始感觉响应有延时,但仍能够接受。


3、从2150ms开始,有20%的用户认为音箱响应太慢,不能够接受。我们认为20%的用户不满意,已经不足以被称为一个优秀的产品。


数据来源:百度人工智能交互设计院智能音响时间测试实验




9、对话模式


1、不要强迫他们不断地去表明他们将要开始说话,自然地对话技巧进行话轮转换。


2、通过更精细的设计,使 VUI 系统可以处理一些常见的微妙表达方式。(用户处理完毕说“谢谢”,你可以设置系统忽略这种情况,或回复“不用客气”,而不是提示或者报错。)


3、不要问你都无法理解的反问句。


4、打破话轮转换的情况,用户在系统说完之前就进行提问。


5、在命令 - 控制模式和对话模式之间进行切换。唤醒之后进行自然的对话。




10、对话式标识


使 VUI 更加人性化、更具吸引力,对话式标识是让用户了解交谈进展以及进展情况的重要方式,当系统在对话中使用了一些基本的对话礼仪后,用户的参与度会更高,并且会以同样的方式进行回复。



反面案例:

虚拟助理:你昨晚你睡了几小时?

用户:大约7个小时。

虚拟助理:你昨天吃了几份水果和蔬菜?

用户:大概有4份。

虚拟助理:你昨晚吃药了吗?

用户:吃药。

虚拟助理:再见。


正确案例:

虚拟助理:我会问你几个有关你身体健康的问题。第一个问题,昨晚你睡了几小时?

用户:大约7个小时。

虚拟助理:不错。你昨天吃了几份水果和蔬菜?

用户:大概有4份。

虚拟助理:了解了。最后一个问题,你昨晚吃药了吗?

用户:吃药。

虚拟助理:好的,暂时就这些了,我明天还会再问你的,回见。




11、异常处理


“当你与人类交谈时,永远不会出现不可恢复的错误状态。”

— ABI JONES, Google 设计主管


“你偶尔因为犯错和不知道某些事情导致评分降低造成的影响,比你每次做对一件事情重要百倍。” 

— 英特尔语音助手部经理 Pilar Manchon


如果处理的得很好,错误情况就不会影响用户,你可以让用户回到正常流程,并顺利完成任务。但如果处理不好,用户不仅这次无法完成任务,他们以后都可能再也不用你的产品了。


一个好的设计师应该知道,你不能只设计正常的情况, 你还要对出错的情况做出设计。这对于 VUI 设计来说尤为重要,因为出错情况是家常便饭。



未检测到语音 / 检测到语音,但没有识别


1、什么情况下可以明确说出来?

     a、你的系统只使用语音

     b、用户没有其他的回复方式

     c、必须要用户回复后,系统才能继续进行任务 / 对话


2、什么情况下可以什么都不做?

     a、用户可以通过其他方式进行下一步操作(比如通过按键选择)

     b、就算什么也不做,也不会中断对话

     c、系统没有理解时,用视觉信息提示告诉用户,比如:提示列表等

     d、利用虚拟表情形象反馈,疑问、微笑等动作表达



其他异常处理


1、当出现:语音被正确识别,但系统无法处理

     a、程序对关键属性理解不明,写了错误的回复

     b、没有针对一些情况的回复

解决:对用户可能会说到的所有情况做更完善的预测,通过数据收集来避免此问题


2、当出现:部分语音识别错误

     a、什么也不去处理,因为这不是你想要的结果

     b、匹配错误的行为

解决:可以用 N-Best 列表来智能匹配最有可能的识别结果


3、增强错误提示

     a、当需要用户说话的时候,使用这种增强错误提示策略

     b、必要的情况下,进阶错误行为提示可以更为详细,并提供更多的帮助

     c、如果你正在设计一个可以提供真人辅助的系统,可以为错误数量设置一个阈值,当达到该阈值时,将用户转移给人工助手  




12、新手和专家用户


如果你的用户会定期使用你的系统,那么在设计中就需包含不同的策略。


“务必确保你的目标不是简单的训练你的用户,应当适应用户的行为,而不是用已有的命令让用户感到厌烦。”

— Google 交互设计师 Margaret Urban


我们在 VUI 设计上该如何更好的交互设计?


1、减少冗长指令以及其他引导提示。通过计算 APP 使用次数和频率来确认是否切换模式。


2、缩短解释性提示。但是请务必使用“对话式标识”。


3、启动效应。



什么是启动效应?


指某人受到某种特定的刺激后(例如一个词语或者图像)会影响他们对之后刺激的反应。首先让用户预先知道你会问他们几个确定数量的问题,为后面会发生的事情提供了暗示,用户就会知道如何去准备。比如以下情况:


1、当给人们呈现一个还没完成的草图,随着这个草图越来越完整,人们就越来越辨认出这张图画的是什么。之后,再给他们呈现其他还没完成的草图时,他们会更早辨认出这张图画的是什么;


2、如果当给人们呈现一组汉字,假如里面含有 “河” 这个字,随后让他们写出部首是 “氵” 的字时,这些人回答 “河” 的几率会更大。



谈谈自己对新手和专家用户的理解


01、专家型用户:代表老用户且愿意探索你的产品或服务,有着很大的包容度。并会积极提出各种改进的建议和享受产品带来的惊喜感。


02、新手:什么叫新手,就是刚刚下载你的产品,准备使用的用户,对产品功能都还处于陌生摸索的阶段。他们不会因为你的技术而使用你的产品,使用你的产品目的是完成某项任务。他们有兴趣使用更高级更复杂的产品,但却不愿意接触全新的东西,要想让他们认可,那么产品就必须足够简单。




13、持续跟踪上下文


持续跟踪信息并不容易,但如果不跟踪这些信息,你的 APP 就只能做单轮的对话行为。


指代:用两个不同的词语指同一个东西。比如: “他”  “哪些”





14、帮助和其他通用部分


我们在设计 IVR 系统时,我们会确保每个状态都包含一组通用组件:重复、主菜单、帮助、操作和再见。





15、延迟


产生原因:糟糕的连续性能、系统处理进程、数据库访问


处理方式:告知用户关于延迟的情况(比如:“请稍等,正在查找相关记录”)、非语音和视觉的提示(比如:延迟提示音以及加载状态)、可视化效果(比如:加载中的动态图标)


处理细节:延迟的时长可能为0~10秒,在没有延迟的时候最好也插入几秒的延迟。因为如果在系统说“请稍等”之后,紧接着就继续对话的话,会给用户带来异样的感受。很多设备针对唤醒词采用了本地化识别的方式,这样唤醒的会更快。




16、消除歧义


问题来源:用户只会提供执行命令所需的部分信息,而没有提供所有的细节。


举例:用户可能会询问某地的天气,而很多地方都有叫这个名字的地点,诸如“湖南路”那边的天气怎么样。


解决方案:


1、依靠任何已知的信息来确定答案,而不是再次询问用户。


2、根据上下文线索进行判断。


3、反问用户进行确认,确保系统对用户同一个问题的各种各样的回复形式都有良好的适应性。


4、指令不明确。比如“给胡歌打电话,拨打工作电话还是家庭电话?”,系统以隐性的形式对名字进行了确认,系统对这个名字有很高的置信度,并且仅有一个胡歌。


5、用户回答的信息超初了你的 VUI 系统可以处理的范围时,你可能需要缩小范围消除歧义。




17、设计文档


我们需要制作:示例对话(sample dialogs)和会话流(dialog flow)文档外其他一些情况。例如:在设计过程中,你还需要创建提示列表、完善对话每个状态指定完整的语法规则等等。





18、无障碍设计


“一开始,我就很讨厌屏幕阅读器的工作方式。为什么它会被设计成这样?当以视觉的方式来展示信息没有任何意义时,屏幕阅读器只是简单地将文字转换成音频。所有那些应用花在创造完美用户体验的时候和精力此时都变得没有任何意义,甚至有的给盲人用户带来了更糟的体验。”    — 克里斯·莫里(Chris Maury)





19、典型 VUI 项目交付项内容


示例对话:系统和用户之间可能产生交互行为的预设对话,对话看起来就像电影剧本一样,包括两个主要角色之间来回往复对话。


流程图:展示下一个状态分支的所有方式,不一定要罗列所有的交互或示例对话,也可以是功能的分组、文本的分组等。


提示列表:如果没有屏幕可以使用配音演员或语音合成来播放提示列表。


产品原型:如果这是一个多模态产品,有屏幕、支持触摸交互。




参考文献:

《语音用户界面设计:对话式体验设计原则》-【美】Cathy Pearl(凯瑟 彼尔)

语音交互入门:从概念,原理到如何设计VUI产品 - 杜松

AI时代的语音设计经验漫谈 - 少夫白杰

语音用户界面设计 - 对话式体验设计原则 - walle_x






文章来源:站酷   作者:Sabaku_no_Gaara

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、
BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

UX设计全方案思考与呈现

纯纯


配色/图标什么的是基础吗?

之前一直没有太多关注过如何定义一个 APP 的配色,或者如何画一个漂亮的 icon。曾经的上级指示都是这些基础对商业的不可量化。于是我在思考一个问题,就是没有直观商业价值的设计要素都失去了意义变成了所谓基础的事情吗?

半年前面试字节的时候,面试官问了我有关配色的定义,细节到为什么是这个色值。当时十分震惊于这么细节的问题,之后我就想起了之前有位朋友给我发送过一份有关支付宝「蓝」的定义 pdf,洋洋洒洒几十页就是为了解释他们为啥用这个有点脏的蓝色#108ee9 当主色。

所以其实 APP 的配色/图标与主品牌是一脉相承的,它是品牌的延续与象征。它以最直观的态度传达给用户,这个产品以及品牌的调性,并以此建立最强有力的视觉识别性。所以我觉得它是可以有条件地展示在我们设计方案里的,但一定注意它的篇幅和表达的方式,维度在品牌传达这一层就对了。

至于如何展示和定义你的 APP 配色,一般 2 类情况。

1. 在品牌主视觉配色基础上的适配

这种情况一般适用品牌主视觉方案已经设计完毕,APP 端作为延续。这个时候一般注意配色从 CMYK 模式到 RGB 的转换,所以作为 APP 的配色,具体色值上可以稍作调整,使它更适配于 LED 屏的用户感知与舒适度。

另外可以使用透明度进行色彩分阶段,一般从 0-100% 分为 10 阶就足够我们日常界面设计使用了。

从零到一系列:UX设计全方案思考与呈现

2. 0-1定义APP配色

这种情况下我们从感性和理性 2 个角度去定义颜色。

从感性的角度分析:情绪板应该大家都熟知的了,根据不同的行业和用户定位得到相应的关键词。对应不同的关键词再搜集对应的图片,从图片和自然感知中提炼出主色。

从理性的角度分析:我们把色彩分为对比色、近似色、复合色、单一色、三角对立色和渐变色六种。根据产品的类型和定位,我们决定使用什么样的配色。比如一个年轻大学生专用的社交型 APP,我们可能就倾向更多地使用对比色这样的撞色得到更多潮流与青春的味道。

从零到一系列:UX设计全方案思考与呈现

至于图标的话我就更不用多说了,大家肯定都记得那些非常基础的绘制图标的法则。个人认为图标也不太需要放一个单独的篇幅去展示,除非它有一些新奇有趣的亮点。

界面框架,只是框架而已吗?

在之前的文章中有写过,匹配产品定位的界面框架一旦输出,对整个 APP 之后的迭代与功能设计都有很直接的影响。定义整体的UX 框架方案,是实践设计目标与策略的过程,基本围绕着这 3 个出发点:匹配产品定位、满足业务拓展性、符合舒适度美学 。

1. 定义整体框架

首先我们从宏观角度分析,一方面产品的业务线处于什么情况,是相对独立的业务主线产品(举例:拉勾)?还是平台级产品(里面包含了许多垂直的业务线,举例淘宝)?如果是平台级产品在整体框架设计时就需要考虑跨端跨业务的框架拓展型。

举个例子,就是在定义平台框架的时候要考虑这个框架与容器是不是同时适用于底下的子业务线,同时当这个框架到了 H5、小程序、PC 的时候需要做哪些适配调整,是否都可以很好地进行兼容适配。

另一方面,整体框架设计的类型是否符合设计目标。举个例子,无框式超大留白的框架设计虽然看上去很厉害,但在大部分商业产品中它的实用性却非常低的。假设说我们今天需要做一个电商类的 app,设计目标是希望能够提升业务转化以及购买效率,那么展示效率与功能分区就显得尤为重要,它就更适合一个相对紧凑的卡片式为主的框架设计。

其次从微观的角度来说,遍地就都是细节了。舒适度美学这一说,其实难免有些抽象,我们把它转为相对合理一些的落地原理就会清晰很多,像大家熟知的间距 4 倍数原理、对齐原则等等。但是这些微观的内容不建议大家放到方案展示里,因为它并没有针对单个方案的特殊性,更像一种大众共识。

从零到一系列:UX设计全方案思考与呈现

△ 多说无益,直接上最终的效果图,方便大家参考

2. 具体容器解析

我们特地把单独的容器部分拿出来解析,是因为自定义容器是展示核心业务最主要思考呈现,同时还可以配合运营做很多提升业务效率的配置。在做具体设计的时候,我们需要区分「端上固定」模块和「运营配置」模块之间的差别。

「端上固定」模块

顾名思义就是开发端上需要写死的模块。写死的模块意味着,无论一个配图还是一句文案,也只有开发童鞋修改后通过发版才能实现内容变更。一般适用于相对固定的产品功能以及 UGC 用户生产内容。比如:拉勾上传简历功能、斗鱼的直播间列表。

「运营配置」模块

相对「端上固定」,「运营配置」就不需要跟着发版,可以随时后台上传替换模块内的内容,适用于需要 PGC 生产的内容。说到这里很多童鞋可能马上就联想到 banner,弹窗的运营位了,但其实除了这些之外还有很多容器模块是需要灵活配置为「运营配置」模块才能更有效地提升运营业务价值。

我们可以这样来区分「运营配置」模块类型。

一种是纯运营配置模块,即设计与开发输出框架、定好配置字段限制之后,运营可以独立完成后台配置的。比如:资讯 app 0-1 前期的资讯列表内容。

另一种是运营设计配合模块,即需要设计配合运营输出一定的设计图才可以进行后台配置的。比如:常见的 banner、弹窗、热门推荐专题等。

在 0-1 的设计方案中,更推荐大家展示「运营配置」模块的内容与解析,因为 0-1 是个以拉新为主的阶段,运营显得尤为重要,所以我们的设计需要侧重考虑整体的运营效率与转化。

从零到一系列:UX设计全方案思考与呈现

如何展示亮点设计?

在我们概述完大部分的整体思考路径与设计方案后,我们需要由面到点,从全局提炼细节,突出自己的设计方案亮点。

而如何提炼这个亮点呢?是挑一个我设计的最好看的界面呢?还是直接放最复杂的那个流程?以下是推荐选择的亮点设计:

1. 完成理论实践,并可以量化价值的设计case

大家应该都了解,一些和设计息息相关的数据 UV/PV/GMV/ 相关业务指标等,以及一系列在实践中很好应用来解释设计方案的理论支撑比如 5W1H、GSM 与五度分析……这些数据和理论是支撑我们设计更饱满更有说服力的重要支点。

虽然在 0-1 的项目里,我们基本不太用得上优化数据比对(因为产品初期用户数量少,产品体验路径也是一直处于不断试错阶段),但是我们还是可以借用上文所述的一些方法论或者 A/B test 来完成我们的方案思考过程展示。

从零到一系列:UX设计全方案思考与呈现

那些你在完成践行设计策略完成设计目标时获得的数据指标要提前预知,养成习惯之后,你就可以快速轻松地察觉到哪里有可以做 A/B test、进行埋点数据比对的地方了。

2. 影响上中下游环节的设计case

除了对业务提升价值的项目外,我们有时候也需要注意对品牌设计、产品、运营、技术等上中下游造成影响力的设计项目。通常这类设计大部分也都是设计自驱发起的,能起到提升各方人效和业务效率的作用。

举例的话,我能马上联想到的就是多方协作的大型线上组件库,可以参考阿里的 Ant design、滴滴的魔方,在之后的版本拓展中甚至可以延展成功能更加强大的多方协作 UX 设计资源中心。

从零到一系列:UX设计全方案思考与呈现

规范与组件库的定义真的备受关注?

感觉近期面过的 80% 的公司都对组件库的定义非常关注,所以我们要做的不仅仅只是放一个视觉规范或者组件库的全景图,而需要对组件库进行拆解。



文章来源:优设(土拨鼠)   作者:Nana的设计锦囊



分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


界面交互动效核心知识的分类与总结

纯纯

一.  什么是界面交互动效?

界面交互动效是展现界面间的转换和界面内元素变化的交互反馈。而效果就表现在触发与结束的过程中,表现清晰的层级关系,自然的引出与结束。交互动效有着承上启下的重要作用。

二. 界面交互动效是用来干什么的?

  • 让用户清晰地感受到当前所处场景和层级关系。
  • 多种UI元素之间的相互转换。
  • 给用户制造惊喜感使用户愉悦。

三. 界面交互动效五大注意点

  • 避免动效过于花哨、酷炫、标新立。
  • 在效率型应用中,过度、无意义的动画只会阻塞任务流程。
  • 动作动效不超过1秒。
  • 用户专注内容时,不要用吸引注意的动画去打扰。
  • 出现频率高的操作动效,避免用户反感,延迟操作时间。

四. 如何设置缓动曲线与时间让动效更加自然,可以看下面的一些总结

  • linear曲线(匀速运动)除了一些特殊场景如加载、很少被使用。
  • easeIn(先缓后快)使用场景较少,主要在掉落、中使用。
  • easeInOut(头尾缓、中间快)通常在轮转切换的动画中使用,这类动画的触发对象与运动对象并不是同一个元素。
  • easeOut(先快后缓)最常见的效果,其触发对象与运动对象往往是同一个。主要用在展开、收起、出现、移动等动画中。当不知道用哪个缓动曲线时,用这个一般不会错。
  • 曲度主要表现运动过程的力的大小,曲度越大,启示力或阻力越大。
  • 回弹则表现的是运动的剧烈程度及对象的质地。
  • 运动时间一般都控制在0.3s-0.8s之间,过长的时间会让人感觉拖沓,不自然。

超全面!界面交互动效核心知识的分类与总结

五. 界面交互动效如果以动效的表现属性来分可以分为两种

第一种:为衔接类型动画

主要针对不同界面直接的衔接,为带来更流畅的操作观感所做的设计,弥补两个界面直接的差异所带来的用户感知落差。

第二种:特效类动画

特效的核心目的是为了吸引用户的注意力,提高信息敏感度,在游戏界面设计当中使用更为广泛,能够带来更加绚丽的动态画面。

六.界面交互动效如果以界面的维度来说可以分为以下两类

第一类:界面内的交互动效

在一个界面内的交互动效特别多,例如点击加号出现下拉菜单,出现浮层动画提示,点击舵式导航出现选择类型和遮罩,点击按钮出现评论点赞,当前页面的展开收起,加载等等。如下图所示:

超全面!界面交互动效核心知识的分类与总结

超全面!界面交互动效核心知识的分类与总结

超全面!界面交互动效核心知识的分类与总结

超全面!界面交互动效核心知识的分类与总结

超全面!界面交互动效核心知识的分类与总结

超全面!界面交互动效核心知识的分类与总结

超全面!界面交互动效核心知识的分类与总结

第二类:界面间的交互动效

几个界面之间的的交互动效通常是平缓过渡到下一页。常见的有以下几类:

超全面!界面交互动效核心知识的分类与总结

△ 硬切到下一页

超全面!界面交互动效核心知识的分类与总结

△ 下一页从右往左推入(上一页从左往右推出)

超全面!界面交互动效核心知识的分类与总结

△  下一页从下往上弹出

超全面!界面交互动效核心知识的分类与总结

△  上一页的元素过渡到下一页

总结:

  • 动效创意方面的创新要依据用户的认知模型。单纯很炫很酷的动效如果脱离了用户的认知模型,那么这样的交互动效对于整个产品来说是有害的。
  • 做界面交互动效的目的是为了更好地落地。如何更好地高效地表现我们设计的动效。同时使得我们制作的动效可以很好的运用到实现落地中,这是很重要的,不然所有的一切都是海市蜃楼。
文章来源:优设  作者:程远

分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


超长篇干货!如何从交互维度量化用户体验?

周周

这篇文章,和大家分享一些在产品和交互设计中的一些自己的方法。

怎样才算一个好的交互设计方案?做好这5个维度就够了!

周周

经过一些项目经验,结合几个方法论,我整理出了一个评估交互方案完整性的方法,也可以作为前期考虑方案的分析方式。下面就来介绍一下,希望能给大家帮助和启发。

快速提升 UI 设计效果的 7 个小技巧

周周

在创建实用、可访问性良好且视觉效果颇为出彩的 UI 界面的时候,我们大多只需要进行有限度的微调,即可达到颇为不错的效果。在之前,我已经撰写了很多实用的 UI & UX 优化小贴士(看完文章在文末获取),这篇文章继续增加 7 条实用的建议,一起来看看吧!

B端设计基础指南:网格系统

周周

B端设计基础指南:网格系统

从3个方面,帮你掌握时间显示的设计细节

纯纯

背景

“时间”作为人机交互界面中经常出现的元素,本质上都是为了去传递时间维度的信息。但是我们平时在使用一些互联网产品时会发现,关于“时间”的显示状态或形式在不同场景、不同页面里往往是不太一样的,这是出于怎样的考虑呢?今天我们就来聊一聊,如何在产品设计中把握“时间”显示的诀窍,让其在页面中发挥最大的作用。

“时间”元素的分类

按照“时间”元素在页面中的出现场景和所起到的作用,可以大致归为以下几类:

A. 事件的关键构成要素

时间作为描述整个事件的重要组成部分,缺失后会对原本所要传达的内容产生严重的影响,进而影响用户的使用预期和结果,比方说用户可能不能以一个较低的价格完成商品购买,或错过了产品发布会的时间。

从3个方面,帮你掌握时间显示的设计细节

B. 行为的时间标记

指用户本人作为行为主体或行为的接收对象,在某一动作发生后为其所打上的时间标记,比方说“我”购买商品下单的时间或收到一封邮件的时间。

从3个方面,帮你掌握时间显示的设计细节

C. 内容的附属信息

用户在使用产品进行内容消费时,时间作为该条内容的附属信息,起到补充说明的作用,比方说一条短视频或新闻的发布时间。

从3个方面,帮你掌握时间显示的设计细节

在上面的案例中,我们会发现“时间”在对应场景里所发挥的作用不同,用户在使用产品时往往对时间存在不一样的关注程度。因此我们在做页面设计时,要根据具体场景和用户诉求判断“时间”元素的重要性和优先级,通常情况下:时间作为事件的关键构成要素>行为的时间标记>内容的附属信息,之后再思考用什么样的设计形式去展示来达到我们的目标。

“时间”的呈现方式和运用技巧

在讨论“时间”元素的设计之前,我们先共识一些有关时间的理解和概念。时间可以划分为“时间点”和“时间段”两个维度,类似我们高中物理时学过的“时刻”和”时间间隔“的概念。

拿开会举例子:“下午 4:30 会议开始”、“下午 6:00 会议结束”描述的是事件开始、结束的时间点,而“整个会议持续 1.5 小时”、“会议时间为下午 4:30-6:00”描述的是事件过程的时间段;但是,我们在会议开始时也可以这样讲“会议将在 1.5 小时后结束”。

通过上面的例子我们可以发下,同样是描述一件事情,运用不同的时间点、时间段的方式去表达,意思一样但却传递出不一样的情感,并且两者存在如下的“换算”关系:

1)时间段加上定语会变成时间点(但同样是时间点,“下午 6:00”是绝对时间,而“1.5 小时后”是相对时间,刚好对应到我们设计时两种时间戳类型);

2)两个时间点之间则表示时间段。

所以,我们在平时表达或设计时,要先想清楚用“时间”是想侧重表达某一事件、动作发生的即刻时间节点?还是想描述其所持续的时间过程?之后我们再针对不同语境去选取合适的文案和呈现方式。

从3个方面,帮你掌握时间显示的设计细节

时间的呈现方式离不开:时间戳类型、时间显示格式、时间颗粒度。其中,时间颗粒度指的是描述时间的最小单位,往往颗粒度越细,给用户传达的确定感越强(如转账时间是 12 日 15:15:20),对用户的激励作用越明显(如距抢购结束仅剩 00 时 01 分 23.6 秒)。

1. 绝对时间戳

绝对时间可理解为事物发生时的确切时间,由具体日期(年、月、日)和时间(时、分、秒)组成。使用绝对时间戳的优势是信息传达精准,显得正式,给人确定感和安全感,同时排布规整,便于形成认知习惯;但缺点是内容显示过长不利于阅读,并且占用空间较大。

从3个方面,帮你掌握时间显示的设计细节

在时间显示格式的选择上,为了避免混淆,推荐使用文字格式或“-”分隔符来分隔日期,而“/”分隔符在不同国家有不同的展示顺序习惯,容易造成误解,尽量少用。

从3个方面,帮你掌握时间显示的设计细节

时间颗粒度的选择依情况而定,一般场景总结如下:

从3个方面,帮你掌握时间显示的设计细节

2. 相对时间戳

相对时间在产品设计领域通常是指内容生产、到达、或状态发生改变时,距当前时间点的时间差值,多用于 push 通知、信息流产品,侧重强调内容的时效性;而“倒计时”也算相对时间的一种,侧重营造时间的紧迫感。使用相对时间戳的优势是用户辨识、理解成本低,不用通过计算来判断时间过去或还剩下多久;缺点是不够精确、正式,并很难衡量两个时间点的临近性。

从3个方面,帮你掌握时间显示的设计细节

在使用相对时间时,要注意格式友好。时间单位可随着时间的推移自动改变;数字不要过多,尽量取整;并且可设置其与绝对时间转换的临界点。

从3个方面,帮你掌握时间显示的设计细节

总结

在设计界面中的“时间”元素时,要遵循场景贴合、便于阅读理解的总体原则;之后根据场景和目标,再选取合适的“时间”呈现方式(包括时间戳类型、时间显示格式、时间颗粒度)。

当时间作为“A.事件的关键构成要素”时

一般情况下使用绝对时间,并且要看是为了强调某一关键时间节点,还是侧重表达整个持续过程。此外,选用关联场景的文案或者运用倒计时(相对时间)的形式,可一定程度上促进用户更加集中注意力,提升对信息的关注度,并达到特殊的激励作用和转化效果。

当时间作为“B.行为的时间标记”时

该场景通常是为了追求确定感,通过提供精准的时间和日期便于用户定位到过去或将来的某个时间点(段)去查找、回顾相应内容,因此大多数采用绝对时间,时间颗粒度依具体情况而定。

当时间作为“C.内容的附属信息”时

如果所设计的产品供给内容的更新速度快,用户活跃度高,并且此时内容的时间信息准确性不那么重要反而更侧重于内容的时效性,那么通常会使用相对时间。部分信息流产品(比如新闻资讯类、社区类)会在列表页使用相对时间,在详情页使用绝对时间,时间颗粒度也是依情况而定;并且会随着时间推移,在某一时间节点前把相对时间转换为绝对时间。

文章来源:优设 (VMIC UED)

分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


复杂UI界面的8个核心设计法则

纯纯

复杂应用大多情况下是偏专业和B端的一些UI界面,它们大多出现在桌面端使用环境,并且终端用户类型多样,涉及流程、链条、业务也大多呈现出多变复杂的特征。这篇文章,来自UX设计领域的顶级存在NNGroup,作者为凯特·卡普兰。

到底什么是复杂应用?

我们之前将「复杂应用」界定为特定专业领域当中,需要经过广泛培训之后使用的,有着非结构化目标、非线性工作流程的任何应用程序。这个概念可能听起来有点抽象,不过这么说你可能会 更容易理解:从科学研究到专业人员,诸如金融分析师,它们常用的那些专业软件应用。这类应用通常有着这些特点:

  • 为有专业知识和训练有素的用户提供支持
  • 帮助用户浏览、管理大型数据库,并提供高级的数据分析和处理的功能
  • 通过可变和多样的基础任务功能来解决问题或者达成目标
  • 需要在多个角色、工具、平台之间进行协作或者切换
  • 可以用来减轻高影响力/高价值任务的风险,降低损失

尽管不同的复杂应用之间差异很大,但是他们的共同点是,专业的从业人员对于这类工具有着极强的依赖性。

考虑到设计师和开发者在面对这类工具的时候的挑战,我梳理总结了 8 个复杂应用的设计原则和指南。

1、采用边做边学的用户流程

很多研究表明,对于复杂的应用和工具,用户更加青睐可以立刻上手开始使用而不受它复杂度影响的那类工具。

与大量的教程、文档、帮助和设置说明相比,能够立刻开始的任务和项目,对于用户有着莫大的吸引力。这种现象被称为「活跃用户悖论」。

虽然在专业领域当中,倚靠摸索和试错学习是不恰当也不安全的,但是一定程度的边做边学是必须的,因为不可能在培训和手册当中涵盖所有的使用场景。

所以,在设计的时候应该提供「跳过教程」的直接上手的偏好设置,同时进行相应的安全性设置,避免新手的莽撞操作导致损失。比如可以限制这个阶段的用户执行长流程多任务的操作,让控制面板实时显示操作结果或者预览结果,这样用户无需执行全部操作就可以知道大概的结果。

顶级团队出品:复杂UI界面的8个核心设计法则

在 Salesforce 控制面板当中,就可以实时预览面板编辑的效果。

2、为用户提供有效的方法和建议

绝大多数用户都不是进阶的专家级用户,他们在绝大多数时候会使用基础但是效率没那么高的操作和执行方案。很多用户形成习惯之后,通常不会主动做出改变,而这在日积月累之后导致大量的时间浪费,效率低下。

值得一提的是,这个时候依赖冗长的文档和教程其实很难达成效果,更合理的方式是结合用户所处的上下文环境,通过界面工具提示的方式,适时地告知用户「有更高效方便的方法」。

通常,可以使用悬停提示,或者是弹出式工具提示来实现这一功能。

顶级团队出品:复杂UI界面的8个核心设计法则

ArcMap 是一款地理信息系统类工具,它通常会通过上下文环境下的信息引导,来帮助用户了解技巧。

3、提供灵活而流畅的功能路径

复杂的应用程序,通常会有很多功能是分散的而非线性的,不同的功能组合起来可以实现特定的功能。在这类工具当中,用户日常可能也不是很确切知道最终的目标是什么,而需要通过数据分析来逐步推进,同时,在知道确切目标的情况下,也应该可以遵循不同的路径灵活地达成目标。

设计师这些应用的时候,设计师应该避免使用固定、唯一、 僵化的实现路径,迫使用户必循严格按照某一固定路径来做事情。一方面,允许用户跳过某个步骤,或者回滚到更早的路径,另一方面,允许用户遵循不同的方式和路径来达成目标。

顶级团队出品:复杂UI界面的8个核心设计法则

比如万事达卡的自助服务就可以通过交互式的图表来引导用户完成不同的任务。

4、 帮助用户跟踪行为和思考过程

复杂的任务,通常意味着它需要很多步骤,不同的环节,而在实际的应用场景中,某个分析步骤耗费几个小时甚至几天,都是有可能的。在高度复杂的现实生活中,某个步骤可能会换人接手,可能会因为硬件、 网络等问题而暂停甚至丢失,这也意味着「可追溯性」是很重要的。

所以,在这样的复杂应用当中,应该允许用户在使用过程中,可以便捷清晰地记录、保存、 导出内容和记录,允许用户中断,中断后可以恢复特定的任务。在任务进行过程中可以进行注释、保存相关的说明。

顶级团队出品:复杂UI界面的8个核心设计法则

在决策建模软件TreeAge 当中,用户可以在分析和建模过程中进行开放式的注释,可以后续在底部快速访问这些笔记。

5、可以协调多工具并且在工作空间之间转换

复杂的应用通常还会面临一个状况,就是工具本身的不足,用户需要在多个工作空间上使用工具和内容的时候,它需要具备切换的功能。对于不具备的功能,应用程序应该允许使用第三方的应用来作为补充。

比如当软件不支持某个操作的时候,应该允许用户从线上的其他数据库中获取并导出数据来使用,可以依托外部文档作为支持,允许用户在应用中做注释和评论。

减轻工作负担的一个要点,是尽量使用通用的API、接口和标准,尽量兼容行业标准软件,比如 Excel、Powerpoint ,尽量使用标准格式,等等。

顶级团队出品:复杂UI界面的8个核心设计法则

微软的商业分析软件 PowerBI 就提供了标准化的导出和复制功能,非常方便

6、减少混乱而不影响功能

复杂应用通常旨在保持泛用性。使用场景多样,多种不同的功能,一家汽车生产厂家,可能会和蜜蜂养殖机构采用同样的工具和软件来监测机器故障。但是,这种泛用性的另外一面,就是混乱性。复杂的应用可能会同时兼顾到基础型的小白用户和进阶型的专家用户,而后者用到的功能很小概率会被基础用户用到。

所以,设计者需要在不降低功能性的情况下,基于应用场景、 用户需求来进行简化和优化,在保持功能完整易用的前提之下,降低复杂度和混乱度。

分阶段和层级展现就是一种降低混乱度但是不影响功能性的一种常见策略。当用户进行到特定任务、特定阶段、特等级别之后,再呈现特定功能,是有效的设计方法。

顶级团队出品:复杂UI界面的8个核心设计法则

7、主次信息之间要能平稳过渡

即使降低了混乱度,在复杂应用当中,信息量可能依然是过载的。通常,对于这种情况可以通过区分信息层级的主次来进行快速的区分,不过,从交互上来说,这可能依然不够。

对于诸如控制面板一样的界面,用户可能需要时刻查看面板上的信息,需要了解次级信息但是又不能离开界面,这就体现出主次信息之间的过渡呈现的重要性了。

一般而言,使用类似与悬停显示的方式,能够比较柔和地将次级信息呈现出来,允许用户查看详细的定量数据。下面这个案例当中就是,悬停显示更多次级信息。

顶级团队出品:复杂UI界面的8个核心设计法则

8、在视觉上突出关键信息

复杂应用通常在界面上包含由大量的信息,而这个时候关键性的数据如果不在视觉上做突出显示,会被用户错过。通过视觉区分、提示警报的方式,让用户及时注意到,才有可能规避可能存在的问题。

值得注意的是,让关键信息和元素凸显的方式,并不一定非得是使用鲜艳的色彩和较粗的字体,简单的放大呈现,使用图形化的元素辅助提示,或者是提供足够的留白都可以达到目的,就像下面的案例一样:

顶级团队出品:复杂UI界面的8个核心设计法则

结论

复杂的应用多种多样,支持的服务和功能也千差万别,但是无论如何呈现,此类复杂应用的设计都是非常挑战设计师的设计功底的,需要设计师了解业务,了解用户,并且能够通过设计更好地提供服务。

文章来源:优设(陈子木)   作者:Kate Kaplan

分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档