首页

不为动而动!聊聊动态效果在体验设计中的应用

纯纯

一、为什么动?

首先,为什么要动?可能你会想到以下几条理由:

  1. 这让我的作品看起来很炫酷,碉堡了!
  2. 动效会带来流量,助我完成KPI!
  3. 别人都这么做了,我也得做!
  4. 编辑让我这么干的!

呵呵,你要这么想就完了。

那么该如何衡量一个动效是否应该出现呢,我们认为有几个考核标准:

1. 这个动效是否会影响性能?

首先,这个动效是否会影响性能?这个是最重要的,添加任何动效前都要考虑是否会影响产品的性能,如果一个很酷炫的动效会拖累性能,使体验变得卡顿不流畅,那么必须毫不犹豫的砍掉或简化。

例子:化身间谍

不为动而动!聊聊动态效果在体验设计中的应用

比如这个例子,这是一个穿越情景的过场动画,随着年份的倒转背景出现各个历史大事件,给人以历历在目的感觉,设计师考虑到了多张图片会出现卡顿的可能性,所以特意降低了每张图的清晰度,因为内容本身就是老照片的风格,所以这种降低画质的手法反而增强了画面的真实感。

2. 这个动效是否会提高产品的可用性?

任何动效的出现都必须带有明确的目的性,能够解决用户在使用过程中的困惑,而不是炫技。单纯的炫技只会分散用户的注意力,弱化内容,变得适得其反。

例子:翻页提示

不为动而动!聊聊动态效果在体验设计中的应用

比如这个上滑提示。不用解释,用户一看知道该做什么。动效增加了产品的可用性,所以这样的动效是非常有意义的!

3. 这个动效是否会给你的产品带来独特气质?

这里所说的气质是动效本身会有助于增强用户对于产品的认知和情绪带入。一个相得益彰的动效会为你的产品锦上添花,深化你的主题和功能,注意,一定是与主题相关的,牵强的搭配只会叫人觉得莫名其妙,毫无意义。

例子:人生四时

不为动而动!聊聊动态效果在体验设计中的应用

再看这个例子,人生四时,四根火柴依次燃烧,慢慢燃尽,这种油尽灯枯的感觉很切合的体现了产品生老病死的主题。

4. 重新审视第一条,看你的动效是否影响性能

所以,合理的动效不应是花拳绣腿,而应该是解决问题的手段。

二、哪里动?

好,我们再看看哪里需要动效,这里举几个例子:

1. 加载

首先是出现在加载环境,不管是网页还是H5都不可避免的会出现让用户等待的情况,在等待的过程中为了让用户知道他的手机没有死机以及网络是通畅的,我们应该在这个时候加入一些与主题相关的动效来提醒他内容正在加载中。

例子:化身间谍H5 loading

不为动而动!聊聊动态效果在体验设计中的应用

这是一个穿越类的H5,所以设计师在设计loading的时候选用了虫洞的理念,与内容本身紧密贴合。

2. 转场

第二个情景是转场。具有意义的转场会降低产品割裂感,我们看两个例子就明白了。

例子:QQ会员观影特权

不为动而动!聊聊动态效果在体验设计中的应用

不为动而动!聊聊动态效果在体验设计中的应用

这个例子里元素在默认状态下会做上下浮动的效果,当我们滑动时候,元素很自然的做了一个出场入场的效果。很自然,没有割裂感。对吧?

3. 页面元素的互动

也可以为网页元素增加一些必要的动效。

例子:好声音第四季首页:

不为动而动!聊聊动态效果在体验设计中的应用

看下好声音的专题页面,在网页上的能够点击的按钮或者文字链,在鼠标经过时都有点变化,这个十分必要。因为表面上的变化会给用户一种心理暗示,那就是点击后也会有变化。

4. 心理需要

这里所说的心理需求是指气氛和情景的营造,例如节日,游戏活动等产品,是需要一些动效去满足用户心理需求的。大家都知道在微信里输入“生日快乐”是会掉下生日蛋糕的,这个动效就比干巴巴的文字有趣多了。

例子:一封家书

不为动而动!聊聊动态效果在体验设计中的应用

一封家书,注意看,背景有飘落的雪花,漫天大雪勾起思乡情,对吧,合情合理,有情有义!

三、怎么动?

好,说完哪里动,我们现在看看怎么动。

1. 基于真实形态的模拟

基于真实的动画会叫人看起来自然流畅,符合规律,比如物体运动时的加速度现象。

例子:Look

不为动而动!聊聊动态效果在体验设计中的应用

注意看这个笔画的动势,是有快有慢的,模拟了写字时起笔收笔的那种节奏感,所以看起来是自然真实的。

2. 人物动作夸张化

在H5的设计中,经常会出现各种各样的人物形象,夸张的人物动作会生动你的形象,增加趣味性,给用户以惊喜。

例子:巴菲特这一年

不为动而动!聊聊动态效果在体验设计中的应用

巴菲特老爷爷,动作很亲切。

3. 给元素赋予弹性

有弹性的物体会叫用户觉得具有生命感和真实性,弹的程度取决于你对元素软硬度的设定。

例子:拍个大头鬼

不为动而动!聊聊动态效果在体验设计中的应用

三个小鬼一跳一跳,弹性赋予了他们顽强的生命力。

4. 蒙太奇

这是一种类似蒙太奇的手法,通过快速切换的画面来形成一种奇妙后现代感觉。

例子:传奇硬箱

不为动而动!聊聊动态效果在体验设计中的应用

炫酷了,节奏很快,提气!

好,以上只是一些基本的动效手法,在实际的应用中其实有很多手段,在这里我建议大家可以去看看迪士尼和皮克斯的动画,应为动画本身是一种对于动作行为高度概括的手段。虽然这些都是电影,但是他们使用的手段和遵循的理念是非常值得我们去学习和借鉴的。注意观察这些大牛们的作品,你会发现他们的作品中充满了走心的细节。

四、结语:

简单来说,当用户打开一个界面,注意力首先会被动态的物体吸引,然后才会把注意力转向颜色对比强的部分,最后才是形状。这一过程是人在进化过程中形成的本能反应,基本适用所有用户。同时一个非常重要且容易被忽略的原则:用户的注意力是有限的,而且越来越少。很可能在用户注意到一段动效之后,注意力和耐心已经用尽,无法看到其他内容就着急去下一个界面了。

所以,对于动效这样一个非常强势的工具,一定要用在希望用户注意的部分,并且认真打磨。真正做到“不为动而动”。



文章来源:优设   作者:程远


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

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

超全面的UI界面字体选取与使用指南

纯纯

最初的图形界面

文字和排版可以追溯到五千年前,而图形化界面仅仅只有40年的历史。最关键的转折点出现在1973年的施乐,最早的图形化界面出现在了他们的Alto电脑上,而这个设计就是现如今图形化界面设计的基础。在Alto 的界面诞生后的10年里,几乎是它一家独大,并且它也被大家视作为数字技术的未来。

绝对专业!超全面的UI界面字体选取与使用指南

早期的Alto 在80年代进化为著名的施乐之星,而施乐的这个设计方案也成为了第一个商用的操作系统图形化界面。

绝对专业!超全面的UI界面字体选取与使用指南

不过不论是Alto 还是施乐之星,都没能真正意义上崛起。不过施乐的图形化界面最终深深的影响了苹果和微软的道路,比尔盖茨和乔布斯先后在施乐的研发中心观摩了施乐之星的运作,而乔布斯更是在1984年先人一步发布了著名的Macintosh 系统,也就是后来我们所熟知的Mac OS。

绝对专业!超全面的UI界面字体选取与使用指南

Macintosh 的发布不仅仅意味着相对成熟的GUI的出现,而且它为大众带来了真正意义上的自定义字体的功能。这款系统内置了许多以著名城市命名的字体,也正是在此之后才有越来越多的著名字体的数字版本在数字平台上发布并应用。

绝对专业!超全面的UI界面字体选取与使用指南

仔细观察这些早期的字体,我们能够发现,虽然已经是图形化的界面,但是其中绝大多数的界面元素都还是以纯文本的形式而存在,它们以一种奇妙的方式被整合到一个界面当中。循着界面的发展历程沿路看过来,不难发现,文本和排版几乎是贯穿始终的主线,它是一个不容忽视的核心类别。

文本即界面

界面中的每一个文字、每一个字符都很重要。好的文本是好的设计。文本是最根本的界面,是我们设计师来塑造和打磨这些信息。

看看下面的天气界面的设计,想象一下将所有界面元素都摆在桌上会是什么样的效果:无非就是两张图,几个图标和一大堆文本。

绝对专业!超全面的UI界面字体选取与使用指南

作为设计师,工作并不是将一堆随机的内容和元素排布在屏幕上,让它们看起来够漂亮就行了。真实的情况是,我们要从最核心的内容和文本开始着手,然后从这里着手细化,并完善出其他的部分。这就是我们工作的核心。

文本的清晰度同样扮演着关键性的角色。如果我们的大脑花费一两秒钟单纯只是分辨一个字形,那么清晰度上的微小差异是无伤大雅的。可是当它们组合成为大段的文本,不同的字母组合构成不同的词汇、段落的时候,清晰度的影响就更大了,排版的重要性也显得更加明显了。

当然,影响界面设计的文本属性还有很多,比如平衡性,定位和层次结构,但是好的文案和排版的影响至少占据整体影响的95%。

在伟大的设计师眼里,文本不仅承载内容,而且可以构成界面。
– Oliver Reichenstein

我们如何阅读

既然屏幕上的文本显示是如此的重要,那么我们应当先了解人们是如何阅读的,而文本显示又是如何影响我们设计决策的。

读过Billy Whited 的文章《Setting Type for User Interface》之后,让我对于文本阅读的效率有了更深的认知。一个少于20个字母的独立单词放在句子中会更快被理解,而单独放置的时候我们需要耗费更长的时间来识别。

其实这个研究结果也表明我们阅读较长句子的时候,并非是逐个单词地阅读,而是跳跃着阅读功能性的词汇,我们将这种阅读方式称为离散跳跃式阅读,俗称扫视。

绝对专业!超全面的UI界面字体选取与使用指南

扫视让我们的阅读能力更强,我们甚至会跳过短的功能性词汇。

我们应当记住这一关键特征,因为我们的界面中所承载的词汇大多是孤立的单词。简单说来,界面是无法利用扫视这种方式来获取信息的。

总的来说,单词在阅读中发挥着无比重要的作用,无论是作为内容还是作为界面元素,均是如此。无疑,选择合适的字体就相当重要了。

绝对专业!超全面的UI界面字体选取与使用指南

过去,人们常常认为眼睛和大脑是通过单词的外轮廓(Bouma Shape)来识别单词,当然,后来的研究证明这个想法是错的,单词的可读性和易读性的影响因素不止是外轮廓,字母本身的形态、细节和清晰度同样深入的影响着它的识别度。

是什么让字母清晰可读?

其实这个问题一开始并不是那么好回答。阅读很大程度上依赖于我们的习惯,越常见的内容对我们而言越容易识别。这样一来,我们就不那么容易判断让字母清晰易读的影响因素了。为了了解这一点,我们需要将句子分割为单词,分解单词为字母,在字母中查看细节。

早在2008年,维多利亚大学心理学系根据测试结果得出结论,大写和小写的拉丁文字母是最容易识别的,也最易于阅读。

绝对专业!超全面的UI界面字体选取与使用指南

这项研究有趣的地方在于,它揭示了一个事实:每个字母延伸出来的线性端点是最易于识别的地方,也是每个字母的特点所在。

绝对专业!超全面的UI界面字体选取与使用指南

上面的图片标识出了这些最易于识别的部分。每一款字体在这些部分应当设计为最通用、最为人所熟悉的样式,同样的,它们也应该强调每个字母的差异。

在2010年的时候,另一项由 Sofie Beier 和 Kevin Larson 开启了一个新的研究项目,这项研究专注于测试经常被误读的字母和字符的识别度。

绝对专业!超全面的UI界面字体选取与使用指南

这项研究表明,在相同的字体和相同的尺寸、相同字重的情况下,有些字体或者变体的细节确实比其他的更加清晰、更易于识别。这项研究的结果说明,纤细的字体加粗之后识别度效果会明显会增强,而字母的X高度如果能够占据上伸区或者下探区的空间,识别度会更好。

绝对专业!超全面的UI界面字体选取与使用指南

为了更好的理解字体的清晰度的概念,你可以下载我所开发的这款工具 Legibility APP 来测试不同字体在模糊、炫光等多种不同情况下的清晰度和辨识度。这是一款处于测试阶段的工具,可以在Chrmoe、Opera和Safari 中运行。

UI中的字体使用

理解了用户阅读的方式和字体可读性的影响因素之后,我们应当开始了解UI中的字体的几个关键因素。下面是UI中字体使用的10个关键因素。

1、可读性

可读性是UI中字体所需考虑的首要因素。字母字形必须清晰可辨,作为UI元素,其中不同的字母必须可以被用户轻松辨别出差异。许多经典的字体,甚至包括 Helvetica ,都没办法清晰分辨 字母 i 的大写形态 I,和大写字母 L的小写形态 l,这在界面设计中无疑是有影响的。

绝对专业!超全面的UI界面字体选取与使用指南

上图中,左边的字体为 Source Sans Pro , 右边为 Helvetica,无疑对于 Illiterate 这个词Helvetica 字体下前三个字母完全无法分辨。有部分用户也同意Helvetica 并不适合作为UI界面的显示字体而存在,因为这款字体终究是为平面印刷显示而设计的,并非为屏幕而生。

在iOS 7 时代,苹果短暂地将 Helvetica 作为系统的主要显示字体的时候,曾对特定的用户群体造成过信息识别的困扰。这也最终催生了我们现在所看到的苹果官方字体 San Francisco。旧金山是为UI界面而生的字体,它的x高度比Helvetica 更高,字母间距更宽,字母间的识别度更高。

绝对专业!超全面的UI界面字体选取与使用指南

2、适度

一款理想的UI界面所用的字体,不应当过于“显眼”,而该是悄无声息,“隐型”的。当用户在试图完成某项任务的时候,字体不应当给用户以“出戏”或者“显眼”的感觉,也就是说,字体不应当超出用户的认知负荷,而内容和信息才应该成为真正的关注点。

绝对专业!超全面的UI界面字体选取与使用指南

3、灵活

给UI界面使用的字体应当具有灵活性。我们曾经为 Medium 做过用户体验设计,作为一个网页博客平台,我们很难去控制用户的能力、内容、浏览器、屏幕尺寸、网络带宽和连接速度,包括输入法。

所以我们最终为它所选取的字体应当支持大量不同的内容,在不同的尺寸下拥有良好的识别度,能够兼容不同的设备,尤其是在小屏幕上。Sans serifs 字体就是专门为小尺寸低分辨率屏幕而定制的。

绝对专业!超全面的UI界面字体选取与使用指南

4、x高度的上限

x高度的参考标准是小写字母x的高度,同等尺寸下,x高度更大的字体更易于识别。不过x高度也不是越大越好,当x高度超过一定限度的时候,小写字母n和小写字母h就很难分辨了,这一点应当注意。

绝对专业!超全面的UI界面字体选取与使用指南

5、更大宽高比

字母的宽度和高度的比例也是相当重要的一个属性。宽度和高度比例越高,字母在小屏幕上的识别度就越高。

绝对专业!超全面的UI界面字体选取与使用指南

6、宽松的字间距

字母之间的间距和字母内部的空间同样是影响字母可读的因素。字母间距太小同样会影响整体的可读性,而好的显示字体会更好的控制字母间距,确保单词在视觉上的“透气性”,甚至可以营造出一种韵律感。

不过字间距不是越宽松越好,太过宽松会让整个单词看起来过于松散。有一个值得参考的标准,就是字母之间的间距应当比字母内的开口缝隙略小一点。

绝对专业!超全面的UI界面字体选取与使用指南

7、低笔触对比度

许多字体不同的笔画粗细不同,而对于UI界面而言,笔触间的对比度越小识别度越好。较大的笔触对比度下,字体在小尺寸屏幕上,较细的笔画会难于分辨。

绝对专业!超全面的UI界面字体选取与使用指南

8、OpenType 功能

OpenType 功能对于字体而言是相当重要的。支持OpenType的字体拥有更大的灵活性,对于不同的语言和特殊的字符有着更为优良的兼容性。

绝对专业!超全面的UI界面字体选取与使用指南

9、备用字体

接下来要说的情况可能大家多少都碰到过。网页在完全加载出来之前,部分内容因为字体没有加载而无法显示。

绝对专业!超全面的UI界面字体选取与使用指南

其实这可以通过先加载本地字体,显示内容,等网页字体加载好了之后再行替换,以达到无阻塞显示。这种方法的缺陷是需要预先设定一个可调用的本地备用字体。

绝对专业!超全面的UI界面字体选取与使用指南

10、Hinting

Hinting 指的是为了字体为了保证最大的可读性而针对显示器状况进行调整的过程。Hinting 可以通过匹配显示器的像素栅格让字体显示更加清晰,降低误读的可能性。

这项技术最初是由苹果公司所提出的,不过因为TrueType 字体技术的出现,Hinting 正在消失。

绝对专业!超全面的UI界面字体选取与使用指南

未来

随着新的UI标准、排版技术的提升,字体技术也在不断的进步,在不远的未来,字体会从传感器获得信息,更好的兼容不同的环境、随着亮度、设备、距离而进行智能化的调整,甚至复杂而庞大的中文字体,也可能作为灵活的网页字体而存在。

绝对专业!超全面的UI界面字体选取与使用指南

字体会让我们的工作更加便捷

绝对专业!超全面的UI界面字体选取与使用指南

让界面交互更快,更加触手可及

绝对专业!超全面的UI界面字体选取与使用指南

让UI更加易用

绝对专业!超全面的UI界面字体选取与使用指南

更加便捷

绝对专业!超全面的UI界面字体选取与使用指南

也更加清晰而高效





文章来源:优设  作者:陈子木

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


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

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

数字金融产品的安全感设计探究

ui设计分享达人

当互联网不断的深入到我们的生活中,我们对安全感的需求也延续到了互联网使用中,特别体现于互联网金融产品。由于其具有风险性、收益性、流动性等特点,用户对于资产安全的掌控感更为关注,产品使用体验欠佳也直接影响客户安全感。


以下将基于自身工作总结和行业经验,聚焦互联网金融产品分享和总结如何向用户营造安全感。


目录:

一、需要什么样的安全感?

二、如何传达出安全感?

三、怎样体现出安全感?




需要什么样的安全感?


安全感是人类最底层的需求,但不同类用户群体需要的安全感也各有千秋,我们参考第一财经商业数据中心×蚂蚁财富的2019线上理财人群报告,将线上理财的人群分为四类:

分别是初入职场的95后、职场新兴力量的90后、理财中坚力量的80后和经历风雨的70后。其中近一年的新增移动互联网基民中超五层为90后、95后,成为金融移动互联网的中坚力量。


这类型的投资者由于具有碎片化处理事务的习惯和金融知识不足、理财经验不丰富、资金的抗风险能力不高的特点,当市场普遍行情下跌时,更容易产生焦虑的情绪而导致“割韭菜”,进而可能会影响到卸载APP的行为。根据Mob研究院的数据显示,在2021年3月天天基金日均卸载用户规模为前两个月的6倍,而当时对应的市场行情正为基金普遍大跌。

因此从安全感的需求上他们更侧重高效的信息降维、足够的理财产品的风险提示、合理的预期收益宣传以及投后亏损及时的内容陪伴


而根据腾讯理财通×国家金融与发展实验室出品的2021年互联网理财行为与安全研究报告显示,理财知识更充足,理财经验更丰富的80后、70后在安全感的维护上则更关注理财产品的信息披露风险、信息不透明风险、市场政策风险、个人信息泄露风险此类问题。




如何传达出安全感?


安全感是一种感性的心理感受,而人类的情感由本能、行为、反思三个层面共同决定的。

这三个层次作为人类大脑的运作的规律,映射到设计当中,同样是可供遵循、值得探究的。



本能层

先于意识和思维,它是外观要素和第一印象形成的基础,着重于产品的外观、触感等。“美观即实用原则”人们会潜意识里认为好看的东西也是好用的,所以在界面设计当中,主要设计对象是视觉设计。


而金融产品中,常用蓝、绿等冷色调的色彩,给人以冷静,稳定的感觉,表现金融产品的科技感和可靠性;常用红、黄、橙等暖色调,代表着热情、温暖与责任。


行为层

是人类身体日常行为的运作,行为层的设计与产品使用过程中的愉悦感和效率有关。好的行为层设计对应产品功能传达、易学性与易用性,以及正面的心情感受。在界面设计当中,主要设计对象是交互设计。(将在下文通过投资场景详细分析)



反思层

超越了本能层和行为层,存在意识和更高级的感觉、情绪及知觉。对应的是产品的情感温度,主要的设计对象是正向情感的结果反馈以及品牌信任。


良好的企业品牌形象和口碑很大程度上会给用户带来认知上的安全感。用户在初次选择购买金融产品时,往往强大的品牌背书起到了关键作用,即使是同一只基金,用户也会选择在自己信赖的平台里购买。

我们可以通过在页面设计中加入更多的品牌元素,如品牌主题色、LOGO、品牌IP形象、品牌slogan等,来潜移默化地让用户感受企业的价值:


另一种常见于一些平台利用强大的背书以及所获的成就,清晰地向用户展示可以提供的保障权益,责任条款及资质介绍等来传达企业对用户负责的态度,提升用户对产品乃至对企业的信任感:




如何体现出安全感?


我们将金融的生命周期分为三个阶段,分别可以概括为:投资前(产品选择)、投资中(产品交易)、投资后(产品管理),不同阶段的关注点不同,而对于安全感需求各不相同:



投资前

结合文章一开始对人群的分析,由于投前的行为特点更多聚焦于产品的选择,因此从理财小白的角度对于安全感的缺乏更集中于“买了会不会亏钱?”、“产品买对了吗”、“看不懂规则”、“这个适合我吗”等,尤其存在于一些新形式的理财组合产品和策略智能投产品中。


在这个阶段的安全感维护,除了相关页面的信息降维、必要的投教启蒙以外,还需要考虑用户疑问的快速解答、合理的预期收益宣传等。另外投钱的启蒙教育更可以考虑结合一些运营活动,让小白用户通过更有趣的方法了解产品,了解自己适合的产品。

而对于较有经验的理财“老司机”而言,安全感的缺乏更集中于“过往表现怎么样,如最大回撤率等”、“市场行情、政策是否利好”、“基金经理的资历”等,而更需要考虑信息的多维度展示、信息披露、行情资讯的展示、甚至是产品的对比等来表达产品的未来盈收能力可期。


投资中

当投资者已经选择好信任的理财产品时,在产品交易的各个界面也需要关注交易流程中安全感的反馈。

其中包括正向反馈和负向反馈。正向反馈是指用户跟产品发生正确的交互时,系统给予用户的正确引导,可以帮助用户打消顾虑,建立信心,让用户感受到一切都在顺利地进行着,这对那些在设备操作方面缺乏信心的用户来说尤为重要,用户不会对自己的操作或对平台产生质疑,如:专属的密码输入键盘、正向反馈如金额输入时的金额提示、特别提出易误解的交易规则等


反向反馈是指用户在操作过程中出现或疑似出现误操作时,系统向用户展示提示或二次确认以促进错误的纠正或确保此操作无误。它能确保在第一时间告知用户出现了不正确操作,及时更改,使流程顺利进行,尤其是对于一些理财小白而言,合理的容错设计更促进有效投资,提高未来的盈利体验。如撤销操作二次确认、购买超出风险承受能力的产品、输入错误金额时的反馈。

引起思考:

虽然天天基金的撤单确认展示了退回帐户,但是此弹窗的取消按钮引导性过强,首次操作仅通过银行卡的列表的箭头较难联想到是确认撤单的下一步操作(还以为是可选择退的帐户)。



投资后

产品交易成功后,投资者的关注会更集中于自己的资产的变化,产品的未来走势等,因此在安全感的提供上,需要向投资者传达准确的交易状态、资产状态、资产的保护等,甚至可以在产品购买的完成页设置快捷加入自选和涨跌提醒等

引起思考:

在支付宝的基金总金额中,存在交易进行中的提示文案为“买入待确认*元”,但不少小白会产生疑问,当前展示的基金总金额是否包含提示的待确认金额,此时是否可将文案改为“含买入待确认*元”(毕竟也有部分直销app并不会将待确认金额包含进产品的总金额中)


另一方面的更需要考虑当基金产品存在亏损时,及时向投资者传达情感陪伴和合理的投资交易,以促进投资者优化持仓或保持中长期持有,避免频繁的短期交易而导致不良的盈利体验。

文章来源:站酷   作者:陈皮红豆沙

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


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

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


交互小科普!你了解这5项最常用的交互模式吗?

纯纯

为大家概括性地介绍5种流行移动应用中常见的界面设计模式以供大家在自己的项目中参考。这些设计模式有助于大家提高设计的可用性,让界面变得更加直观。文章将侧重介绍能够帮助大家进行下列各方面设计的模式:

  1. 社交分享
  2. 通知
  3. 弹窗
  4. 内容更新
  5. 用户互动(滑动、点击等)

一、社交登陆

在这个社交网络盛行的时代,我们是不是真的还需要用这种陈旧的方式提交个人资料?社交登陆这一设计模式完全可以让用户轻松快捷的登陆,从而取代注册、填写表单之类的麻烦工作。

交互小科普!你了解这5项最常用的交互模式吗?

用户可以直接登陆自己的社交网络账号(Facebook、Twitter或者Google等),无需另外创建一个以后不太可能继续使用的账户,这样可以大大提高注册效率。除此之外,这一设计模式还有下列好处:

  • 使用现有社交网络账号登陆用户就不用再多记一套用户名密码了。
  • 用户无需被迫在自己刚刚下载还不熟悉如何使用的应用中输入信息,从而简化注册流程。
  • 让用户通过现有社交网络账号注册也许能让你获得一些有关他们的基本资料。这样你就能更加有效的根据用户的实际需求调整应用。

注:在国内这一设计演变成了:您可以使用QQ/微博合作帐号登录,然后给你绑定,继续回到注册界面  – –

二、通知

通知功能可突出显示近期的活动和操作。我们每天要接触大量的信息,但百忙之中却没有时间(或者不愿意把时间)花费在手机上。我们都喜欢在尽可能短的时间内完成要做的事,然后马上知道是否有新的活动或者情况能够引起自己的关注。因此,对于通知设计模式的透彻理解和妥当实施非常重要。

交互小科普!你了解这5项最常用的交互模式吗?

很多知名公司的移动应用采用了下列几种不同的方法实施其通知设计:

  • LinkedIn在有更新内容的标签上放置标有数字的徽标。
  • Twitter则在时间轴图标顶部放置一个小点指示有新活动。
  • Facebook使用一个会在应用内垂下的弹出条幅显示新鲜事推送中的新内容通知。

你可以模仿一下你最喜欢的解决办法,试试这个办法是否适合于你和你的用户。

通知栏该怎么设计,具体方法右戳学习:《怕打扰用户?来看看怎样设计通知栏不会讨人厌》

三、弹窗和层叠窗口

弹窗(也叫层叠窗口)是一种常用于互联网广告的方法。弹窗会在不创建新窗口的情况下遮盖住主要内容,无法使用拦阻软件进行拦截,因此用户非看不可。一般来说这种情况很让用户讨厌,但在有些情况下,弹窗打断用户的使用反而能给用户带来帮助。例如,用户可能会希望在不丢失当前用户界面的情况下查看某些信息。

交互小科普!你了解这5项最常用的交互模式吗?

下面是一些弹窗设计模式帮助解决问题的案例:

  • 在用户在应用中执行特定操作或达到特定时点时弹出并显示与特定操作或场景相关的信息/控制方法。
  • 应用中原来的内容或场景仍然在背景中显示,但弹窗可以让用户选择是否要了解接下来要出现的内容。
  • 弹窗可以吸引用户的注意力并在必要时提供重要通知。在使用完成后,用户可以点击或滑动屏关闭弹窗返回先前活动状态。

四、下拉刷新

在习惯了使用Facebook、Twitter或Google等社交网站后,我们都会很自然的使用下拉手势进行内容更新。第一个使用这个设计模式的公司是Apple,在此之后这一设计就广为流行开来了。

交互小科普!你了解这5项最常用的交互模式吗?

当用户需要显示一列非静态,但不能自动刷新的内容时,就可以适用下拉刷新模式。下拉刷新时,屏幕会滚动到顶部,刷新完成后新内容将从顶部开始显示。这种设计模式可以节约空间(不需要使用按钮)而且简单易懂。这种方式还不仅局限于更新内容,其还可以用于在一系列短信、图片或资料更新中加载早先的内容。

五、用户交互(滑动、点击等)

除了下拉刷新手势外,滑动也是智能手机上最为常用的手势之一。很多应用都允许用户在文章上左右滑动来了解详细信息或执行其他操作。与依赖于点击鼠标的传统web应用相比,这一方法充满创新意义。

交互小科普!你了解这5项最常用的交互模式吗?

在Android和iOS上有大量采用了滑动、点击及其他特定用户交互方式的移动应用,你可以在自己的项目过程中予以参考。每个应用对于自己的用户来说都有不同的意义和价值。你应当在画线框图的过程中做好规划再投入设计或开发流程。在测试过程中花点时间思考用户的反馈、建议和批评。



文章来源:优设   作者:程远



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


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

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

手机屏幕越来越大,UX设计师面临哪些挑战?

纯纯

iPhone X 在 2017 年上市以来,全面屏手机就开始逐渐普及。iPhone 8 的 4.7 寸屏幕到目前最新机型 iPhone 11 的 6.1 寸屏幕,以及 Pro Max 系列的 6.5 寸,各种各样的刘海屏、水滴屏、挖孔屏、折叠屏等等屏幕方式随之出现,物理 Home 键都被舍弃改成虚拟按键,甚至是没有虚拟按键的手势滑动操作。

手机屏幕越来越大,UX设计师面临哪些挑战?

而这些手机都有一个共同的特点,就是屏幕尺寸越来越大。屏幕尺寸变大后,手握手机的方式和界面交互操作方式也随之改变,那对于设计而言,是否也应该随之进行改变呢?

拇指的操作范围

想单手点击屏幕的操作,需要手足够灵活进行一轮操作才能够到屏幕上方,过程中稍有不慎,手机随时会砸地上。作者的手机屏幕已经修了几次,差不多赶上一台二手机的价格了。

在 2013 年,国外设计师 Steven Hoober 发表了一篇《手机界面设计》的研究报告中,对一千三百名手机使用者进行量化研究数据:

手机屏幕越来越大,UX设计师面临哪些挑战?

据当时研究的数据可以看出,有近半的用户是单手使用手机(现在肯定不止)。当用户单手操作的时候,实际拇指可以触摸到的区域是如下图这样的。绿色区域是拇指的正常操作区域,黄色区域是拇指能触碰到的最大限度范围,红色区域是触摸比较困难的区域。

手机屏幕越来越大,UX设计师面临哪些挑战?

然而这份研究报告的数据是在 2013 年发布,当时还没有全面屏的出现,如果把上面研究结论的区域,套用到如今的手机屏幕尺寸上,顶部的红色区域会占更大比例。以 iPhone 11 尺寸比例作为参考,如下图:

手机屏幕越来越大,UX设计师面临哪些挑战?

拇指可操作范围大约在 3 分之 2 的区域,可见想要触碰到红色区域是有一定难度的。也正是因为这份报告只适合当时的手机市场情况,在当今已经不适用了,因此需要重新去考虑如何为大屏幕手机进行界面设计

为拇指区域设计

根据 2020 年手机UX设计趋势,大屏幕设计将会成为热点。根据数据报告中有说明,2018 年 10 月使用大屏手机的用户比例是16.3%,到 2019 年 12 月,该数据已经上升到 41%,并且会在未来更多新机型的出现中持续上涨。

那随着大屏幕手机的普及,就意味着设计师在设计界面的时候,要为大屏幕手机的使用场景进行界面调整,避免用户难以使用的体验问题。以下是我整理的一些设计建议方案:

1. 头部区域设计更高

通过将标题栏的信息区域放大,尽量把主要操作内容向拇指区域靠近。

手机屏幕越来越大,UX设计师面临哪些挑战?

手机屏幕越来越大,UX设计师面临哪些挑战?

2. 常用导航与操作居于底部

比起导航栏放在顶部,更适合大屏幕手机的方式是将导航和重要操作尽量往屏幕底部放置。

手机屏幕越来越大,UX设计师面临哪些挑战?

3. 手势操作页面切换与返回

抖音和 Instagram story 等短视频应用界面都是通过手势滑动屏幕的方式,对页面进行切换,操作的学习成本很低,而且主要操作也在屏幕底部。这种操作方式也会在今年越来越多地被使用。

手机屏幕越来越大,UX设计师面临哪些挑战?

4. 提示弹窗从底部升起

常用的弹窗,很多是设计在屏幕中间弹出,为了适配大屏幕,不妨尝试从底部弹出,关键选项都能轻松选择,提高转化率。

手机屏幕越来越大,UX设计师面临哪些挑战?

5. 使用大卡片

屏幕尺寸变大以后,使用整张大卡片可以让用户浏览内容更专注,大面积的配图和留白,也能提高用户的点击欲望。

手机屏幕越来越大,UX设计师面临哪些挑战?

除此以外,作为手机厂商,在发布大屏幕手机的时候,就有对界面操作做了一些对应系统级的设计调整,比如界面下拉悬停,键盘单手模式,屏幕边缘滑动返回等等。

总结

大屏幕尺寸已经是趋势,屏幕大意味着内容可以更大限度地得到展示,有利于产品提供更多的服务,不再纠结首屏无法展示完主要内容。在这个信息爆炸的时代,用户也不再满足于小屏幕的浏览方式。可以说,大屏幕已经是无法改变的趋势。与其担心问题到来,设计师更应该思考如何去适应产品的快速迭代,不断更新自己的设计思维模型,更全面思考问题,产出更合理、体验更好的设计方案。

文章来源:优设   作者:布莱恩臣

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


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

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


从零开始设计产品的 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


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

周周

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

日历

链接

个人资料

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

存档