登录界面ui设计_UI界面的进度条设计!

0b8356724db55a6cad33334c7b5585cb.gif

d9f5d51cad472f6c43a87f32830a89c9.gif

进度条也被称为进度指示器、向导、剩余步骤。通俗来讲,进度条即程序在处理任务时,实时的、以图形形式显示处理任务进度、速度、剩余未完成量的界面元素。一般以长条状呈现。3f1a10b8b1d91aae4d0c8094b19a2360.png

进度条可以让用户预估整个处理流程的速度状态,对于全部处理过程有一个预知,并时刻提醒用户当前状态是个什么样子。8e3b2014e49314be608b40228dc47237.png

进度条的设计提供了清晰的体验概念模型。概念模型可以让令人迷惑的产品或者设计转化为条理清晰易于理解的产品。周围环境的语义符号可以让我们明白下一步需要完成的任务是什么。7481cce0152fdab42bd8a168dbe65db0.png

98805273362a70d862d7d90a42ac7544.gif

界面设计中,在向导中会经常用到进度条设计。另外还有预先设计好的,用户可能需要完成次或在个别情况下需要完成多个步骤的时候我们需要用到进度条的提示。7305827698d6cab10beb486ae62629e0.png

3aa81a4af0a009acca71100dc106af3a.gif

①进度条的最后一步应该反映出会进行必要的操作的最后一项,如完成注册、提交订单、邮件已发送等。9a170d92c78ff731511aeb002829f129.png

②进度条的流程需要合理地分解成多个步骤。

③每个步骤的名称要短,且命名要准确。

④进度条的设计不要让人误会。577253c959aba000073bc24dab320316.png

648154c35106ef14f4688087e05c4422.gif

进度条一旦出现,其作用一是告知用户进度,二是分散用户的注意力,化解用户在等待过程中产生的焦躁感,增强体验愉悦感。推荐阅读:UI界面设计基本原则!7350a82ca43756e9963828586c71ab65.png

2483de30aca7a4a347b7bcbba4e43fef.gif

生活中我们在排队等待的过程中时常会有消极的情绪产生,会觉得等待会是一个漫长的过程。也为此进度条的设计需要提供实时信息给用户,让用户知道自己等待的时间有多长,尽可能地弱化用户的负面情绪。2075bee90455471fe1b209c81f20f33a.png

9a009f8a4fd5858c6fa6fd93f1b5eb42.gif

当加载、等待、更新时间长的时候,我们就需要通过其他的途径吸引用户的注意力,弱化因等待带来的负面情绪。3276670f23713dde25ac942e13f2fbe6.png

917001d4be5ec464b71906f8a4e11b5f.gif

扁平化设计是当前比较流行的一种设计趋势,多采用单色、无装饰的手法来完成设计。扁平化进度条的设计给人以简单、干净的视觉体验。推荐阅读:APP开发中的UI设计!6da3d7af7ddd2903ece80d43ae284404.gif6132a81acc998cd367277fa6577e4c22.png8d42a7ad04b264607ab7e5b55d632287.png2b243e38130b0a6743c177f26a15ea13.gif

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值