聊聊减少页面跳转的方法

标签: 闲话杂谈 | 发表时间:2013-02-04 10:52 | 作者:wangyuanyuan03
出处:http://mux.baidu.com

在标签页还没有诞生的时候, 浏览器对关键词的搜索似乎只能另起窗口显示搜索结果。且这些结果页散乱无序,假若再返回某一页面,就要从桌面一堆窗口里或者一长串任务栏内去翻找,相信现在用惯有标签页浏览器的同学,应该没有谁会愿意再去用这样的产品。这是一个典型的页面跳转例子,并且散乱无序是用户很头痛的事情。在用户对操作体验越来越重视的今天,让用户无形中享受我们精心设计的操作体验越发显的重要。通过减少页面跳转,减少用户的重复操作就是其中重要的一点,下面列举了一些常见的交互展现形式。

1.浮动弹窗

为了避免跳转页面,弹窗是最常见的一种形式;最大的特点就是a.它一般只覆盖设备全屏的部分区域,使上一操作的一些内容可见;b.操作完成弹窗关闭,还保持在原界面,可继续对本页进行其他操作。
例如:百度手机输入法,进入背景商店,选择一款背景下载,以弹窗形式进行,可以预览到背景上的其他皮肤,用户在等待下载过程中可以考虑是否需要下载其他合适背景,关闭弹窗还可以继续下载,而不必跳转至另一界面,下载完成再返回。


2.内容扩展

还有的呈现形式是对当前页的内容扩展,帮助用户了解的更为详细,因为用户的记忆是有限的,记忆还是有时效的,跳转出去,可能对上一页内容记忆不完整,或者不知道从哪一分类进入的,所以此类交互方式同样是在帮助用户减少跳转。


3.多态按钮

第一次见到这个专业名词,不知道大家是否闻其名,解其意。其实多态按钮就存在于众多应用中。
在我们的移动设备中,正常情况下,用户界面控件,应该只进行单一的目的操作。比如进行某一项操作完成后出现“完成”按钮,点击触发完成。然而,多状态按钮是一个例外。尤其在小屏幕手机上,按钮动作能够被触发,同时得到物理反馈是很重要的。

例如时下很火的某唱歌应用,进入点歌台会看到每首歌曲后都有一个“免费点歌”按钮,单击后触发下载,该按钮出现提示正在缓冲,同时告知下载进度,完成后该按钮又变更为“演唱”。



又例如某阅读应用按钮使用此模式,点击“+ 号”执行添加至书架动作,点按后以转菊花的形式反馈给用户动作在执行中,当动作完毕, “√”提示添加完成,最后再次单击“√”书从书架中移除。



另一种常见的多态按钮的情况,比如删除或删除对象。它会中断用户当前的操作,弹出一个确认删除。但它的出现是有道理的,无法挽回的某些操作是一定需要用户亲自来确认的。



多态按钮的好处一个是在有限的空间内,扩展了界面空间,另外就是操作流程不出现跳转,不打断用户操作同时减少操作步骤。

4.批量操作

大家都知道移动设备的内存容量是有限的,对一些不想要的图片、视频、信息或应用,单个删除处理适合少于1-5个来操作,如果数十个、上百个大批量的操作就不太适合这种单选删除,所以对类似这种处理方式的批量操作是很重要且必须的。

批量操作的重要意义就是给用户建立效率型的交互模式,减少重复操作的成本。

常见的批量操作包括:选择,添加/删除或重新排序等。

4.1选择、添加


4.2删除、重新排序






我们可以看到,不同的需求,应景而生减少跳转的交互方式也不同,但是要达到的目的却是不经相同。综上几种形式,尤其在移动设备小小的方寸间,我们应当思考如何在有限的空间内合理布局。要勇于尝试,敢于打破常规,让控件创造更多的可能性。当然啦,不同的用户会有不同的操作习惯,尽量找到最佳的平衡点,为普遍用户提供最舒适的操作环境,给用户提供最便捷的操作流程,让操作更合理,更流畅。


转载请注明出自”百度MUX”

相关 [页面 方法] 推荐:

移动Safari中内嵌页面的翻页方法

- Coolxll - Tip4Mac
这是一个比较简单的技巧,熟悉的同学可以直接忽略掉. 我们在移动设备的Safari里面浏览某些网站时候会遇到一些页面内再内嵌网页的情况. 就是当前浏览的页面上有一部分内是另外一个页面. 比如如果在iPad上打开Google Reader以后用启用桌面模式的时候文章页面就是内嵌形式. 这时候如果你想看下面的文章的话发现用一只手指移动页面是外面的框架移动而不是框架内.

Flash遮盖页面元素的解决方法

- - 我爱互联网
在做web开发中可能会遇到flash遮挡页面中元素的情况,无论怎么设置flash容器和层的深度(z-index)也无济于事,现有的解决方案 是在插入flash的embed或object标签中加入”wmode”属性并设置为wmode=“transparent”或”opaque”,但 wmode属性到底是什么意义,为什么可以解决这个问题呢.

聊聊减少页面跳转的方法

- - 百度MUX
在标签页还没有诞生的时候, 浏览器对关键词的搜索似乎只能另起窗口显示搜索结果. 且这些结果页散乱无序,假若再返回某一页面,就要从桌面一堆窗口里或者一长串任务栏内去翻找,相信现在用惯有标签页浏览器的同学,应该没有谁会愿意再去用这样的产品. 这是一个典型的页面跳转例子,并且散乱无序是用户很头痛的事情. 在用户对操作体验越来越重视的今天,让用户无形中享受我们精心设计的操作体验越发显的重要.

父子页面之间跨域通信的方法

- - TID-财付通设计中心
由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案. 之前也有小网同学分享过一篇“ 跨域,不再纠结” 开始照着尝试时还是有些不够明白的地方,深入了解之后,这里给大家补充一点更具体的做法. 先来看看哪些情况下才存在跨域的问题:.

保障任务流畅的IA设计方法-页面简图法

- 小趴 八足趴 八足 ramener - 所有文章 - UCD大社区
关于“为任务而设计”和“为结构而设计”的问题,之前曾经反复阐述过,如果你没印象了,可以先看下:《设计原则VS实际情况》和《为产品结构的设计,为用户任务的设计》. “设计时,既应该关注让任务流畅,又需要让结构清晰. 如果你认同了这个观点,那么,接下来的问题就是:应该怎么做呢. 下面介绍一个设计方法,这是一个用于兼顾“为流程”与“为结构”的信息架构(IA)的设计方法.

超链<a>标签响应onclick事件时,防止页面跳动方法

- - BlogJava-首页技术区

用JavaScript探测页面上的广告是否被AdBlock屏蔽了的方法

- - Web骇客
看电视、看电影、看优酷、看网页时,对满天飞的广告也是深恶痛绝. 但是,对一个中小网站站长/博客主来说,广告几乎是唯一的能成支持网站/博客正常运转的资金来源. 如果一个博客主,只是无私发布稿件,能坚持几年的,很少. 火狐浏览器和谷歌浏览器里都有能够屏蔽页面给广告的插件,最有名的是AdBlock和AdBlock Plus.

jQuery实现页面内平滑回到顶部的过程分析及实现方法

- - 奶牛博客
jQuery可以实现一些很绚丽的网页效果,比如淡入淡出还有滑动效果等,它的动画自定义也很强大,animate()功能很出色,今天奶牛跟大家一起来看看那些网页中的回到顶部或者回到底部如何用jQuery来实现平滑滚动. 首先,我们需要知道,我们的滚动要到达的目的地,比如一个页面内的元素,我们要知道它距离窗口顶部的位置.