进度条设计:进行多页面(multi

文章描述:进度条(Progress Bar)_Yahoo_Pattern(翻译).

进度条(或进度表)可以帮助用户对过程的长度和步骤有个预期,并且知道自己当前在哪个步骤。也被称作”进度指示器(Progress Indicator)”,”多步骤进度条(Multi-step Progress Bar)”,”向导(Wizard Steps)”,”进度表(Progress Train)”,”剩余步骤(Steps Left)”

解决什么问题?

用户需要意识到他们正在进行一个多页面(multi-screen)的流程(比如付款或注册)

什么时候用?

在向导中应该使用;在那些预先设计好的,用户可能只需完成一次或顶多在个别情况下需要完成的多步骤流程中需要使用。在常规的任务中就不要用了,因为那种笨重的,一步一步的手把手式(handholding)的方式最终会变得讨人厌

具体解决办法是什么?

由一个持续的,显示一系列步骤 ,高亮当前的步骤,并可以显示目前的完成度或百分比的导航条,来作为进度条(或进度表)。

当用户决定开始流程时进度条就该显示

进度条上的最后一步应该反映出会进行必要操作的最后一页(比如:完成注册,提交订单)。在进度条上不要使用冷冰冰的”确认”或者”收据页(receipt page)”

将流程按照用户的心智模型分解成步骤。很显然,每个步骤指的是操作而不是单独的页面,所以没有必要非要将步骤与页面1:1的对应上。比如:”登录”会涉及到一个登录页和注册页。

步骤名字要短,并且是排比结构的。”以行动导向”(Action-oriented)的动词比较好,但是只有在每一个步骤都能很恰当的通过这种方式描述的时候再用。

确保进度条对每一个用例都是精确和可信的。用户不该跳过步骤或忽然碰到进度条没显示出来的步骤。确保只有在必要的情况下才包含”登录”(的步骤)。如果有必要,需要为不同的用例设计不同的进度条。

要确保进度条的视觉设计不会被误认为是可点击的导航条

为什么使用这个组件?

进度条可以让用户预估整个流程的长度,对于全部流程有个预览,并时刻告诉他们在整个流程中已经完成多少了。

答疑

“进度条”也可以用来表示”动态显示系统更新进度的动画条”(就像YUI2中的进度条组件)

这个组件可以解决相关联的多步栏或者作为逐步显示用户控制过程的指示器(译者注: 这句我真翻译不好,欢迎高手来指教…This pattern deals with an articulated, multi-step bar or indicator showing stepwise user-controlled progress.)

时间: 2024-11-02 11:47:55

进度条设计:进行多页面(multi的相关文章

用户体验分析:从排队等待谈进度条设计

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 排队等待是一种日常中常见的现象,例如新年领开工利是.去排队购买首发的苹果产品.每天中午去食堂排队购买午餐.排队等待在我们的生活中无处不在且看似是一个简单的现象.即使是种简单的存在,但也有其复杂的一面,当存在着很多条队列时,确定每条队列是做什么的就变得困难了;在加入队列后,人们会产生:大概要等多久?为什么队伍很久没有往前移动?等诸多疑问.无法解

从排队等待谈进度条设计

排队等待是一种日常中常见的现象,例如新年领开工利是.去排队购买首发的苹果产品.每天中午去食堂排队购买午餐.排队等待在http://www.aliyun.com/zixun/aggregation/32533.html">我们的生活中无处不在且看似是一个简单的现象.即使是种简单的存在,但也有其复杂的一面,当存在着很多条队列时,确定每条队列是做什么的就变得困难了:在加入队列后,人们会产生:大概要等多久?为什么队伍很久没有往前移动?等诸多疑问.无法解释的等待是令人烦躁的,不公平的等待则可能引发人

网页进度条设计:全兼容且自适应的进度条

文章简介:网页进度条设计:全兼容且自适应的进度条. 在做这个东西之前,我们需要了解基本的信息: 是否为静态加载?(是) 有多少种状态?(三种基本状态:默认.当前.已完成) 是否使用JS程序实现状态的更改?(否) 使用的频率?(高) 更新的频率?(低) 在了解这些基本信息后,我们还需要关注: 效果的完整性 性能的优越性 代码的可移植性及复用 兼容性 易维护 易扩展 这些条件有助于我们所作出的东西更加优秀. 先看一下我们以前的做法: 此做法使用了一张背景图片. 效果的完整性(很好的展示了其效果) 性

40个最新的创意进度条设计

  以前的进度条设计以拟物化为主,现在扁平化风格流行,连进度条也改变咯.这是40款最新收集的进度条设计,很多是Dribble上的作品,应潮流而生,想瞧瞧扁平化风格的进度条是怎样的,就来看看吧. Progress by yasir wadood Circular progress bar by Alexandr Ivanov Action buttons by Anton Bodryashkin Progress Bar by Lder Vilela Secret Mail Client – Se

网页设计技巧:网页的loading进度条设计

文章描述:虽然加载在整个页面来看是一件小事,但是因为加载在不经意间导致的用户流失却是大事.在加载页中显示进度,给出承诺,增加信息量或者幽默内容都能使用户潜移默化减少"觉察"正在加载的时间.但是真正可以减缓的办法还是加载的速度增快;别致的设计虽可以治标,但加载速 对于加载(loading),想必大家都不陌生.每当看到加载页中那个不停转啊转的圈圈,或者是 "Loading-"后面不停闪动的三个点点,心里都会涌起各种焦躁反感.根据一份调查得出,用户能够忍受加载的最长时间在

网页进度条设计:关于讨论loading加载后的一些心得

文章描述:Loading,让烦躁少一些. 前一阵子,接到一个app切图制作加载圆形进度条的任务,看到那个小进度条转啊转的,我若有所思-同时,一个做印象派制作间控件设计的同学最近做了改版,那个控件登陆需要一些时间,看到他对loading加载条进行了优化,然后就一起交流了一下.作为一个刚毕业入行不久的新人,请允许我分享一下关于讨论loading加载后的一些心得- 这是一个浮躁的年代,长听到这样的抱怨"好慢!""等到死!",每次看到那个转啊转的圈圈,或者是那个"

JSP编程进度条设计实例

许多Web应用.企业应用涉及到长时间的操作,例如复杂的数据库查询或繁重的XML处理等,虽然这些任务主要由数据库系统或中间件完成,但任务执行的结果仍旧要借助JSP才能发送给用户.本文介绍了一种通过改进前端表现层来改善用户感觉.减轻服务器负载的办法. 当JSP调用一个必须长时间运行的操作,且该操作的结果不能(在服务器端)缓冲,用户每次请求该页面时都必须长时间等待.很多时候,用户会失去耐心,接着尝试点击浏览器的刷新按钮,最终失望地离开. 本文介绍的技术是把繁重的计算任务分离开来,由一个独立的线程运行,

超有趣网站进度条设计

  人们讨厌等待,特别是加载网站的时候,可有些时候由于网速或者浏览器的原因,等待总是不可避免,如果在网站中也能像移动应用一样,有创意的进度条,会很大地减少人们的焦虑,还能避免因等待过久放弃进入这种不幸的事故. 相对于移动端,在网站中使用进度条不常见,该用哪种方式呈现给访客也是一个考验设计师的难题.现在你可以来看看这10个在网站中创意运用进度条的设计,它们既带给访客乐趣,也不妨碍内容阅读,学习一下,让它们在无形的展示中留住网速拙急的访客!(大多数提供源码,你可以很方便地学习它们) Creative

JSP编程进度条设计实例 jsp网页进度条

      许多Web应用.企业应用涉及到长时间的操作,例如复杂的数据库查询或繁重的XML处理等,虽然这些任务主要由数据库系统或中间件完成,但任务执行的结果仍旧要借助JSP才能发送给用户.本文介绍了一种通过改进前端表现层来改善用户感觉.减轻服务器负载的办法. 当JSP调用一个必须长时间运行的操作,且该操作的结果不能(在服务器端)缓冲,用户每次请求该页面时都必须长时间等待.很多时候,用户会失去耐心,接着尝试点击浏览器的刷新按钮,最终失望地离开. 本文介绍的技术是把繁重的计算任务分离开来,由一个独立