
课程咨询: 400-996-5531 / 投诉建议: 400-111-8989
认真做教育 专心促就业
相信每位设计师在进行网页设计的时候都会考虑到关于用户点击某些交互按钮之后出现的等待期的用户体验度。那么,我们如何才能减少用户的等待焦虑呢?除了服务器、网络等硬性条件以外,我们今天给大家简单介绍一下关于如何提高响应时间和降低加载时间的问题。
如果你对如何进行网页设计等相关技术感兴趣的话,欢迎与我们的在线咨询联系的哦。下面就开始今天的主要内容吧。
时间是动效核心元素,设计动效时需要考虑两类时间——响应时间与持续时长
1、响应时间
响应时间指从用户执行操作到反馈出现的间隔时间。触发机制不同,响应时间的限制也不同:
对于由用户操作直接触发的反馈,理想的响应时间应该控制在100毫秒内
对于由用户操作间接触发的反馈,响应时长可允许达到1秒左右,不可超过2秒无反馈
当超过2秒才能获取反馈结果时,须设计加载动效(loading):
当反馈时间为2-9秒时,可使用循环的加载样式(如常见的菊花转)
当反馈时间超过10秒时,须使用带有进度指示的加载样式(如已加载了60%,还剩30秒)
2、持续时间
交互微动效的持续时间不宜过长,以避免浪费用户时间,影响用户的阅读和操作效率,其持续时间一般不超过500毫秒(加载动效除外)。
若你希望用户能清晰地捕捉到元素的渐进变化,持续时须大于200毫秒;若你不介意用户认为元素的改变是瞬间的,希望尽量节省用户时间,持续时间也可设计在200毫秒以内(如hover到按钮上颜色瞬间发生微妙改变)。
具体的持续时间的取值,一方面会受到元素的大小、动效的复杂程度影响;另一方面也会受到动效的目标和运行动效的设备的影响:
小元素的轻微变化效果(如渐隐渐现、大小变化等小范围变化),一般在200~300毫秒以内
较大元素的复杂变化效果(如包含大范围缓动位移),可长达400-500毫秒
较快的动效更容易吸引用户注意力,也更节省时间。若动效元素在用户的视线之外,为了吸引用户注意并采取行动,可使用在短时间内变化较大的动效(如发生位置移动和速率改变);若动效元素已经在用户的注意范围内,为了保持视觉连续性,完成必要的过渡(如渐隐渐现)后即可结束。
较慢的动效较少分散用户注意力,更适用于非用户直接触发的场景。若动效不是用户直接触发的,不希望用户注意力被转移,可使用在长时间内变化较小的动效(一般不会出现位置移动)
不同设备的屏幕尺寸和特性不同,理想的持续时间也不一样。一般来说,对于移动设备而言,屏幕越大往往动效的位移也越大,因此持续时间也应该越长(可穿戴设备上的持续时间大约比手机上快30%,平板电脑上的持续时间大约比手机上慢30%)。而台式设备的动效设计往往比移动设备中的动效设计更简单快速(150毫秒~200毫秒间较为常见),这是因为复杂的动效在台式设备场景下容易出现掉帧、卡顿的情况,瞬时响应的动效能避免这一点。
出场动效一般比入场动效更快(如当入场动效设置为230毫秒时,出场动效可设置为200毫秒)这是因为元素入场时用户一般需要阅读并处理新出现的信息,而元素出场时通常表明用户在此元素上的任务已完成,不需要再关注了,快速出场能够节省用户更多时间。
达内时代科技集团致力于培养面向电信和金融领域Java、C++、C#/.Net、3G/Android、3G/IOS、PHP、嵌入式、软件测试、UID、网络营销、网络工程、会计、UED、web、Unity3D、大数据、童程童美、VR、产品经理等几大方向中高端软件人才课程与少儿教育课程。选择太原网页设计培训,不再孤军奋战,轻轻松松做IT高薪白领。太原达内培训带领有明确目标的学子迈向成功之路!想找工作的求职者可以加QQ:3373924515(太原达内就业服务部)咨询了解。