关于分页

作者:小F 来源:ue-ui 时间:2011-07-01 12:39:03 

今天小池提出一个问题讨论,如何使分页做的更友好。做了一些调研和思考,做了些总结。

分页在电商网站3级页、搜索结果页面等信息量大的页面是很重要的。我们在设计时要考虑:

  • 分页的长度

  • 首末页存在的必要

  • 自定义页面的必要

设置场景去验证可用性。

1  用户模糊搜索一个关键字,往往会出现很多相关的结果。用户会逐页的去翻页去寻找,此时用户会使用“上一页、下一页”或附近的数字进行逐页检索。
根据心智模型 ,保持用户点击的连贯性。“上一页、下一页”距离相对固定,让用户使用上一页下一页不断切换时很方便;分页长度不宜过长,过长会导致用户视线游离;也不宜过短,过短会导致页码显示过少,给用户造成网站信息较少的错觉。
京东这一点可用性较好,“上一页、下一页”距离相对固定。同时页码数量显示适中。新蛋、淘宝距离不定且距离较长,容易使用户实现游离,可用性不好。

2  用户往往会选择根据价格从低到高排列或销量从高到低排列来作为自己的购买参考。用户翻页到后面20几页发现销量越来越不好,价格越来越高,此时他会想返回第一页去看。此场景说明首页是有存在的必要
京东、苏宁没有给出回到第一页的快捷途径
上述例子中有2中快捷途径:
a / 第一页始终显示
b/给用户一个自定义页码,用户输入页码直达。

3  实际情况表明,在这种信息量大的页面上,用户往往不知道具体页码上的具体内容,不会去自定义某个页码去查看,会逐页或间隔两、三页去查看 ,翻到一定页数时用户发觉结果越来越背离自己的初衷,所以会返回第一页或重新检索。同时要显示出最后一页,系统需要计算出所有的页数,在商品很多时,会导致页面性能降低。

在设计时,我们要注意:

  • 少就是多,精简。避免花哨

  • 以方便用户使用最先。避免为交互而交互

优点,符合用户在模糊结果是翻页的情景,视觉焦点相随聚集;始终显示第一页,给用户快速回来的途径;用用省略号表示还有没有显示出来的页面,引导用户去查看;交互方式良好,做到了精简,没有附加花哨交互。

根据上述理由,以及苏宁VI色,给出苏宁易购分页的优化方案,抛砖引玉。求PK,求调教…

从谷歌图片检索的弱化分页,让用户顺着屏幕一直不间断的浏览下去,到轻博客点点网随着用户的滑动自动加载更多的内容,这些微妙的交互可以让我们的体验更加愉悦也使我坚信交互设计师是可以用户做更多的,是很有价值的。

标签:分页,设计
0
投稿

猜你喜欢

  • Python中如何替换字典中的值

    2022-10-04 21:21:35
  • Python+OpenCV 实现图片无损旋转90°且无黑边

    2021-11-09 17:04:12
  • Python 类的继承实例详解

    2021-04-30 15:54:09
  • 详解Python函数print用法

    2023-06-10 03:47:34
  • python提效小工具之统计xmind用例数量(源码)

    2021-11-26 21:42:44
  • MySQL 实现双向复制的方法指南

    2024-01-27 02:19:51
  • 基于Python制作打地鼠小游戏

    2022-04-07 09:13:34
  • JavaScript实现开关等效果

    2024-04-25 13:13:55
  • Django如何实现RBAC权限管理

    2021-05-20 19:14:27
  • Python 变量类型详解

    2022-06-23 00:44:55
  • 浅析mmdetection在windows10系统环境中搭建过程

    2022-05-03 17:37:37
  • Python-opencv实现红绿两色识别操作

    2021-05-04 18:35:51
  • python计算机视觉opencv卡号识别示例详解

    2023-04-14 13:58:25
  • python列表逆序排列的4种方法

    2022-09-19 18:26:21
  • python代码实现扫码关注公众号登录的实战

    2021-11-18 04:40:43
  • Python库安装速度过慢解决方案

    2023-09-14 14:57:30
  • 解决python通过cx_Oracle模块连接Oracle乱码的问题

    2023-04-30 23:25:45
  • Python 经典面试题 21 道【不可错过】

    2023-10-29 04:56:20
  • Python实现加密接口测试方法步骤详解

    2022-08-09 20:07:32
  • golang高并发的深入理解

    2023-06-19 09:12:01
  • asp之家 网络编程 m.aspxhome.com