2021-11-08 16:18发布
人对等待的忍耐是有限度的,当一个操作需要等待较长时间时,用户会产生焦虑感,也更容易放弃这个操作甚至放弃整个产品,所以系统在适当的时机向用户反馈当前的进度就十分必要。
根据《可用性工程》一书中的研究:
0.1 秒大约是让用户感觉到系统正在立即做出反应的极限,这意味着除了显示结果之外不需要任何特殊的反馈。
1.0 秒大约是用户思想流保持不间断的极限,即使用户会注意到延迟。正常情况下,大于 0.1 秒但小于 1.0 秒的延迟不需要特别的反馈,但用户确实失去了直接对数据进行操作的感觉。
10 秒大约是将用户的注意力集中在对话上的限制。对于更长的延迟,用户将希望在等待计算机完成的同时执行其他任务,因此应向他们提供反馈,指示计算机预计何时完成。如果响应时间可能变化很大,则延迟期间的反馈尤其重要,因为用户将不知道会发生什么。
由于数据量大或网络原因,不可避免地会出现等待时间长的情况。以下是常见的例子:
对大文件的操作。如打开大文件、复制大文件、删除大文件等。
软件启动过程。如一些大型游戏、Adobe软件等。
需联网的操作。如上传、下载、播放等。
搜索。无论联网与否,只要数据量太大,都可能出现等待时间长的情况。
安装软件。
所以,如何通过进度指示来解决用户焦虑的问题,就是用户体验设计需要考虑的了。
当说到进度指示时,你的第一反应可能就是一个条形进度条,其实除了条形进度条,进度指示的表现形式还有很多种。
这是大多数人能想到的一种形式,细分的话还可以分为条形进度条、环形进度条、步骤进度条、水波进度条(如手机充电效果)等。进度条通常会与百分比一起使用。
progress bar
循环加载动画,最常见的样式是菊花型。循环加载动画能让用户知道程序现在还在运行,而不是误以为页面卡住或死机。用于加载中状态。但在加载过程中用户无法进一步操作,需等待加载完毕后才能继续操作,所以更适用于加载过程中用户不需继续操作的情况。
loading
也叫加载占位图。是在页面数据加载前,在需要等待加载内容的位置,先用占位图形给用户展示出页面的大致结构,等到数据请求返回后再显示具体数据内容。
skeleton screen
将某项流程拆分为具体的几个步骤,引导用户按流程完成任务。
step
进度指示的方法这么多种,具体的场景我们应该如何运用,需要注意哪些问题呢?
针对上面提到的那些不可避免的等待时间长的情况,推荐使用这些方法。
有时文件过大时,打开的时间会很长,这时就可以用一个条形进度条显示当前的状态。
打开文件进度条
一次性拷贝或删除多个文件时,常常也需要很长的时间,比较好的显示当前状态的方式是,明确告知用户一共有多少个文件,现在已经进行到多少百分比了,甚至还可以告知大概还需多长时间。
拷贝或删除文件
有些软件的启动时间会很长,比较正面的做法是在启动画面中根据软件的特性向用户展示软件相关的图像。
比如Adobe Illustrator启动时会展示由设计师或插画师精心设计的图像,这不仅缓解用户在等待加载时的焦虑感,还能提高用户对软件特性的印象,一些游戏软件在启动画面也做了很好的示例,例如在启动时通过游戏中的相关动画来增加趣味感(前提是不要牺牲加载时间),或者提供一些游戏中的小技巧。
一个负面的例子就是很多手机APP的启动画面,满屏都是广告,非常影响用户体验,对于一些年纪大的人来说,还很容易误点进自己根本不需要的网站。
AI启动画面
条形进度条 + 网速 + 预估时间
经常使用云盘的话,会发现在云盘上进行上传与下载操作时,常会遇到因为网络差或文件太大而造成等待时间过长的情况。所以云盘一般会实时显示网络速度和文件大小。
上传与下载
在网络较慢或图文数据较多时可使用骨架屏来渲染列表,比Loading视觉效果好,也可以适当使用一点动画效果,缓解用户的焦虑感。
骨架屏渲染列表
步骤条
如过注册操作需要的信息很多,可以把信息分类,每一类为一个步骤,用户就按照顺序完成整个操作, 步骤条一般不得少于 2 步。
可后台进行;
可控制,如可暂停、可取消。
在任何一个时期,都会出现这样的情况,当用户发出某个操作命令后,由于问题的复杂性,在当时的技术条件下,计算机系统无法立刻给出用户所需要的结果。此时,用户就会有等待感。在大多数情况下,等待感是一种负面情绪,有时还会伴随焦虑。因此,作为软件设计人员,我们应当设法减轻用户的等待感。心理学实验表明,负面情绪会导致人在从事智力活动时效率降低、出错率提高。尽管我们可能无法减少绝对的等待时间,但是通过采用一些界面设计技巧,我们将能够有效地减轻等待感所带来的负面情绪,从而保证用户使用软件完成任务时的效率以及主观满意度。
增加开场动画、动态页面等,用动态页面降低用户等待焦虑感
一般在交互设计中,为了减少用户的等待时间,一般会选择用一些小动画,来代替loading的界面。网站上的案例有很多,建议可以搜寻各大奢侈品牌的官方网。
界面内容可以丰富一下,文字内容可以多一些,这样用户阅读文字可以耗费一定的时间
读秒是降低焦虑感的设计方式之一
你好:关于需要学习几个月能找工作,我的理解和建议如下:1. 首先要确认自身是否有相关的专业积累?因为UI只是设计者手中的工具,它是内在设计思想有效的表达途径。学习软件很容易,但只是掌握工具的运用是远远不够的。2. 如果有相关专业的知识积累,那么工具...
哈哈哈哈 看你是想成多少资产的富婆喽能担起富婆这个称号起码要过百吧UI设计的平均工资是挺高的月入过万不是梦但是在现在这个高消费的社会环境下光靠这个还不够毕竟你一年不吃不喝才12万你可以做UI多赞些钱,然后再做副业...
UI是英文User Interface的缩写。翻译成中文就是:用户界面,也称人机界面。是指用户和某些系统进行交互方法的集合,这些系统不单单指电脑程序,还包括某种特定的机器,设备,复杂的工具等。UE是英文User Experience的缩写,翻译成中文就是用户体验。是指用户...
不麻烦 首先把这个部分解组 快捷键是 CTRL+SHIFT+G 然后点这个区域 如果点到不需要的元素 就CTRL+3 锁定隐藏,然后再继续点 点到只剩下需要的元素, 把元素弄出来 然后 CTRL+SHIFT+3 显示锁定隐藏,把没用元素删除就可以了。 如果直接点到了需要的元素 同样CT...
学会到就业的程度 一般时间为4个月左右,120天时间。 这里说的4个月时间,并不是所有人都是4个月可以学会的, 和学习方法,学习用心程度,学习时间都有关。 如果用错误的学习方法,学4个月是不可能学会的。...
对于UI设计来说,更加看重的是个人的设计能力和理念,以及操作能力,和男女的性别没有太大的关系。
靠谱肯定都靠谱的,就看你自己的兴趣爱好,发展前景都很好,大前端是一种网站搭建,小程序开发等用户端口开发的技术,UI设计就是纯纯的设计师岗位,将设计思维和理念融入到产品运营的每一个交互环节中...
其实生活中也有交互性,比如两个人之间的聊天沟通,带有双方的互动都叫做交互。互联网中的交互更多体现在任何互联网设备之间的使用和反馈。
1、初步调查 前期调研对于LOGO设计非常重要。具体周期看项目规模和预算。免费提供logo设计建议和各行业logo设计参考案例。一般情况下,这个时间大约是3天,我们会详细了解企业,对竞争对手的企业logo进行调查分析,这样可以更准确的控制方向,避免logo设计...
永远不要忘记调研 好的设计总是从调研开始。品牌创建需要你预先考虑到所有的细节。 创建品牌、设计LOGO之前需要进行广泛的调研。考虑到在这个过程中你需要对环境和背景中所有的细节都有所掌控,在预算上就一定要留下足够的余地。 此外,你的解...
一、具象表现形式: 具象表现是忠实于客观物象的自然形态,对客观物象采用经过高度概括与提炼的具象图形进行设计的一种表现形式。它具有鲜明的形象特征,是对现实对象的浓缩与精炼、概括与简化,突出和夸张其本质因素。标志设计的形态不可能像绘画的形式...
1.设计应在详尽明了设计对象的使用目的、适用范畴及有关法规等有关情况和深刻领会其功能性要求的前提下进行。2.设计须充分考虑其实现的可行性,针对其应用形式、材料和制作条件采取相应的设计手段。同时还要顾及应用于其它视觉传播方式(如印刷、广告、映像...
Looka Smashinglogo Freelogodesign Hatchful
1、沟通收集信息 在标志设计开始之前,充分与委托方沟通交流,了解委托方对于标志设计的要求。通过与委托方的沟通,尽可能收集诸如企业文化、企业面向的用户群体、企业类型等;在与委托方的沟通交流中,我们可以得知需要通过设计解决委托方的那些需求。为...
Naldzgraphics这个网站据说是个人创办的网站,上面所有的内容都是站主本人在日常中通过手机整理上传的。不过就算如此,网站还是收集了大量的平面设计素材。 Brandsof theWorld是世界知名LOGO资源库网站。上面收录了海量的世界知名Logo图标,而且还提供EP...
最多设置5个标签!
一、为什么需要进度指示?
人对等待的忍耐是有限度的,当一个操作需要等待较长时间时,用户会产生焦虑感,也更容易放弃这个操作甚至放弃整个产品,所以系统在适当的时机向用户反馈当前的进度就十分必要。
根据《可用性工程》一书中的研究:
0.1 秒大约是让用户感觉到系统正在立即做出反应的极限,这意味着除了显示结果之外不需要任何特殊的反馈。
1.0 秒大约是用户思想流保持不间断的极限,即使用户会注意到延迟。正常情况下,大于 0.1 秒但小于 1.0 秒的延迟不需要特别的反馈,但用户确实失去了直接对数据进行操作的感觉。
10 秒大约是将用户的注意力集中在对话上的限制。对于更长的延迟,用户将希望在等待计算机完成的同时执行其他任务,因此应向他们提供反馈,指示计算机预计何时完成。如果响应时间可能变化很大,则延迟期间的反馈尤其重要,因为用户将不知道会发生什么。
由于数据量大或网络原因,不可避免地会出现等待时间长的情况。以下是常见的例子:
对大文件的操作。如打开大文件、复制大文件、删除大文件等。
软件启动过程。如一些大型游戏、Adobe软件等。
需联网的操作。如上传、下载、播放等。
搜索。无论联网与否,只要数据量太大,都可能出现等待时间长的情况。
安装软件。
所以,如何通过进度指示来解决用户焦虑的问题,就是用户体验设计需要考虑的了。
二、进度指示的表现形式
当说到进度指示时,你的第一反应可能就是一个条形进度条,其实除了条形进度条,进度指示的表现形式还有很多种。
1. 进度条 Progress
这是大多数人能想到的一种形式,细分的话还可以分为条形进度条、环形进度条、步骤进度条、水波进度条(如手机充电效果)等。进度条通常会与百分比一起使用。
progress bar
2. 加载 Loading
循环加载动画,最常见的样式是菊花型。循环加载动画能让用户知道程序现在还在运行,而不是误以为页面卡住或死机。用于加载中状态。但在加载过程中用户无法进一步操作,需等待加载完毕后才能继续操作,所以更适用于加载过程中用户不需继续操作的情况。
loading
3. 骨架屏 Skeleton Screen
也叫加载占位图。是在页面数据加载前,在需要等待加载内容的位置,先用占位图形给用户展示出页面的大致结构,等到数据请求返回后再显示具体数据内容。
skeleton screen
4. 步骤条 Step
将某项流程拆分为具体的几个步骤,引导用户按流程完成任务。
step
三、进度指示的应用场景
进度指示的方法这么多种,具体的场景我们应该如何运用,需要注意哪些问题呢?
针对上面提到的那些不可避免的等待时间长的情况,推荐使用这些方法。
1. 打开大文件
有时文件过大时,打开的时间会很长,这时就可以用一个条形进度条显示当前的状态。
打开文件进度条
2. 拷贝文件、删除文件
一次性拷贝或删除多个文件时,常常也需要很长的时间,比较好的显示当前状态的方式是,明确告知用户一共有多少个文件,现在已经进行到多少百分比了,甚至还可以告知大概还需多长时间。
拷贝或删除文件
3. 启动画面
有些软件的启动时间会很长,比较正面的做法是在启动画面中根据软件的特性向用户展示软件相关的图像。
比如Adobe Illustrator启动时会展示由设计师或插画师精心设计的图像,这不仅缓解用户在等待加载时的焦虑感,还能提高用户对软件特性的印象,一些游戏软件在启动画面也做了很好的示例,例如在启动时通过游戏中的相关动画来增加趣味感(前提是不要牺牲加载时间),或者提供一些游戏中的小技巧。
一个负面的例子就是很多手机APP的启动画面,满屏都是广告,非常影响用户体验,对于一些年纪大的人来说,还很容易误点进自己根本不需要的网站。
AI启动画面
4. 上传与下载
条形进度条 + 网速 + 预估时间
经常使用云盘的话,会发现在云盘上进行上传与下载操作时,常会遇到因为网络差或文件太大而造成等待时间过长的情况。所以云盘一般会实时显示网络速度和文件大小。
上传与下载
5. 渲染列表
在网络较慢或图文数据较多时可使用骨架屏来渲染列表,比Loading视觉效果好,也可以适当使用一点动画效果,缓解用户的焦虑感。
骨架屏渲染列表
6. 填写表单
步骤条
如过注册操作需要的信息很多,可以把信息分类,每一类为一个步骤,用户就按照顺序完成整个操作, 步骤条一般不得少于 2 步。
四、缓解用户等待焦虑问题的其他Tips
可后台进行;
可控制,如可暂停、可取消。
在任何一个时期,都会出现这样的情况,当用户发出某个操作命令后,由于问题的复杂性,在当时的技术条件下,计算机系统无法立刻给出用户所需要的结果。此时,用户就会有等待感。在大多数情况下,等待感是一种负面情绪,有时还会伴随焦虑。因此,作为软件设计人员,我们应当设法减轻用户的等待感。心理学实验表明,负面情绪会导致人在从事智力活动时效率降低、出错率提高。尽管我们可能无法减少绝对的等待时间,但是通过采用一些界面设计技巧,我们将能够有效地减轻等待感所带来的负面情绪,从而保证用户使用软件完成任务时的效率以及主观满意度。
增加开场动画、动态页面等,用动态页面降低用户等待焦虑感
一般在交互设计中,为了减少用户的等待时间,一般会选择用一些小动画,来代替loading的界面。网站上的案例有很多,建议可以搜寻各大奢侈品牌的官方网。
界面内容可以丰富一下,文字内容可以多一些,这样用户阅读文字可以耗费一定的时间
读秒是降低焦虑感的设计方式之一
相关问题推荐
你好:关于需要学习几个月能找工作,我的理解和建议如下:1. 首先要确认自身是否有相关的专业积累?因为UI只是设计者手中的工具,它是内在设计思想有效的表达途径。学习软件很容易,但只是掌握工具的运用是远远不够的。2. 如果有相关专业的知识积累,那么工具...
哈哈哈哈 看你是想成多少资产的富婆喽能担起富婆这个称号起码要过百吧UI设计的平均工资是挺高的月入过万不是梦但是在现在这个高消费的社会环境下光靠这个还不够毕竟你一年不吃不喝才12万你可以做UI多赞些钱,然后再做副业...
UI是英文User Interface的缩写。翻译成中文就是:用户界面,也称人机界面。是指用户和某些系统进行交互方法的集合,这些系统不单单指电脑程序,还包括某种特定的机器,设备,复杂的工具等。UE是英文User Experience的缩写,翻译成中文就是用户体验。是指用户...
不麻烦 首先把这个部分解组 快捷键是 CTRL+SHIFT+G 然后点这个区域 如果点到不需要的元素 就CTRL+3 锁定隐藏,然后再继续点 点到只剩下需要的元素, 把元素弄出来 然后 CTRL+SHIFT+3 显示锁定隐藏,把没用元素删除就可以了。 如果直接点到了需要的元素 同样CT...
学会到就业的程度 一般时间为4个月左右,120天时间。 这里说的4个月时间,并不是所有人都是4个月可以学会的, 和学习方法,学习用心程度,学习时间都有关。 如果用错误的学习方法,学4个月是不可能学会的。...
对于UI设计来说,更加看重的是个人的设计能力和理念,以及操作能力,和男女的性别没有太大的关系。
靠谱肯定都靠谱的,就看你自己的兴趣爱好,发展前景都很好,大前端是一种网站搭建,小程序开发等用户端口开发的技术,UI设计就是纯纯的设计师岗位,将设计思维和理念融入到产品运营的每一个交互环节中...
其实生活中也有交互性,比如两个人之间的聊天沟通,带有双方的互动都叫做交互。互联网中的交互更多体现在任何互联网设备之间的使用和反馈。
1、初步调查 前期调研对于LOGO设计非常重要。具体周期看项目规模和预算。免费提供logo设计建议和各行业logo设计参考案例。一般情况下,这个时间大约是3天,我们会详细了解企业,对竞争对手的企业logo进行调查分析,这样可以更准确的控制方向,避免logo设计...
永远不要忘记调研 好的设计总是从调研开始。品牌创建需要你预先考虑到所有的细节。 创建品牌、设计LOGO之前需要进行广泛的调研。考虑到在这个过程中你需要对环境和背景中所有的细节都有所掌控,在预算上就一定要留下足够的余地。 此外,你的解...
一、具象表现形式: 具象表现是忠实于客观物象的自然形态,对客观物象采用经过高度概括与提炼的具象图形进行设计的一种表现形式。它具有鲜明的形象特征,是对现实对象的浓缩与精炼、概括与简化,突出和夸张其本质因素。标志设计的形态不可能像绘画的形式...
1.设计应在详尽明了设计对象的使用目的、适用范畴及有关法规等有关情况和深刻领会其功能性要求的前提下进行。2.设计须充分考虑其实现的可行性,针对其应用形式、材料和制作条件采取相应的设计手段。同时还要顾及应用于其它视觉传播方式(如印刷、广告、映像...
Looka Smashinglogo Freelogodesign Hatchful
1、沟通收集信息 在标志设计开始之前,充分与委托方沟通交流,了解委托方对于标志设计的要求。通过与委托方的沟通,尽可能收集诸如企业文化、企业面向的用户群体、企业类型等;在与委托方的沟通交流中,我们可以得知需要通过设计解决委托方的那些需求。为...
Naldzgraphics这个网站据说是个人创办的网站,上面所有的内容都是站主本人在日常中通过手机整理上传的。不过就算如此,网站还是收集了大量的平面设计素材。 Brandsof theWorld是世界知名LOGO资源库网站。上面收录了海量的世界知名Logo图标,而且还提供EP...
1、沟通收集信息 在标志设计开始之前,充分与委托方沟通交流,了解委托方对于标志设计的要求。通过与委托方的沟通,尽可能收集诸如企业文化、企业面向的用户群体、企业类型等;在与委托方的沟通交流中,我们可以得知需要通过设计解决委托方的那些需求。为...