技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> 信息和交互 --> 纠结的翻页设计

纠结的翻页设计

浏览:3232次  出处信息

1.什么时候需要进行翻页设计

    当网页内容较多、不能在限定区域内显示完全时,需要进行分页呈现。为了方便用户在多个页面间跳转和快速定位(尤其是按顺序翻页),通过翻页设计提供多个页面间的导航。

2.设计翻页要考虑的问题

  • 分页的内容是什么类型?
  • 页面数量有多少?
  • 查看最多的是哪些页面?
  • 手动全部翻一遍的可能性有多大?
  • 是否会不按顺序翻页?为什么?
  • 是否会查看已翻过的页面?
  • 翻页是否需要在列表顶部和底部都出现?
  • ……
  • 3.好的翻页设计要点

  • 扩大可点区域
  • 不要使用下划线
  • 清晰标识当前页面
  • 给页面链接之间留出足够间距
  • 提供上一页/下一页链接
  • 如果需要,使用首页和末页链接
  • 将首页和末页链接放在翻页区域之外
  • 提供上一页/下一页链接位置保持固定
  • 页码数量不宜过长(用户视线游离)或过短(页面数量显示太少)
  • 4.设计元素讨论

    1)第一页

        Q:是否应一直显示第一页链接?

         A:大部分的翻页都保持第一页链接可见。如果返回第一页的可能性很小,或者希望将用户注意力保持在当前页面以及周边页面,则不保留第一页链接,如google搜索结果页面。

        

        Q:如果一直显示第一页链接,如何返回第一页?

         A:一种是固定第一页的数字链接,一种是提供“<<第一页”/”<<首页”/”<

    2)最后一页

        Q:是否应一直显示最后一页链接?

         A:显示最后一页链接的好处是,告诉用户页面数量,使其能够评估网站内容丰富程度,并且提供从后往前翻页的捷径(适用于用户熟悉的内容)。如果靠后的内容质量较差,或者不鼓励逆向翻页的操作,可以不提供最后一页的链接。

        

         如果不显示最后一页链接,应提供其他的线索提示页面数量,否则可能造成仅有当前显示页数的误解。

        

        Q:如果一直显示最后一页链接,如何跳转?

         A:一种是固定最后一页的数字链接,一种是提供“最后一页>>”/”末页>>”/”Last>>”链接或按钮

    3)上一页/下一页(翻页)

        Q:上一页/下一页是否必需?

         A:一般而言,如果翻页操作较频繁,应提供上一页/下一页链接(注意保持位置固定),方便快速翻页。翻页链接常用尖括号+文字表示:

         <

         Next>> >下一页

        Q:上一页的位置与下一页紧邻还是分离?

         A:大部分的翻页将上一页链接放在页码条的左侧。如果前后来回翻页的操作较频繁,可以将上一页放在页码条右侧,紧邻下一页链接。

        

        Q:上一页下一页的样式是否需要区别设计?

         A:根据使用的频率,可以对两者进行区别设计,例如下一页使用比较多,可以设计得更突出一些。

        

    4)当前页

        当前页的样式应与其他页样式有明显区别,并且hover样式不改变、不可点击。

        

         上面的例子是通过“强调”进行区分(更强调当前页,增强位置感)

        

         上面的例子是通过“弱化”进行区分(更强调hover页,增强点击行为引导)

    5)非当前页

        Normal:多设计为外框+数字的样式,能更容易识别翻页区域

        

         Hover:应与当前页、非当前页的普通样式有明显的区分

         (不易识别)

         (易识别)

         Click:一般不对点击样式另行设计

         Visited:一般不对访问过的样式另行设计

    6)总页数

        建议提供总页数,可以告知用户明确的信息量和翻页范围;但如果总页数很多或者总页数变化很频繁的情况下,系统需要计算出所有的页数,可能会导致页面性能降低。

        

    7)页码间距

        为页码之间留出足够的间距,减少误点的可能性。为页码加外框能较好地保证页码之间的区隔,外框之间最好也留出一定间隔。

    8)可点区域

        根据费茨定律 ,扩大可点区域,可以减少鼠标移动、点击链接的时间。为页码加外框能有效地扩大可点区域。还可以通过其他设计达到这一目的,如google搜索结果的翻页:

        

    9)手动输入页码进行快速跳转

        何时需要?

  • 增加后面页面的曝光需求(如淘宝)
  • 内容与用户关系较密切,是用户所熟悉的(如个人图片库)
  • 用户可能按照大致的线索(如时间),跳转到某些页面查看(如邮件列表页面)
  •     有哪些跳转方式?

  • 下拉列表,适用于页数较少的翻页
  •     

  • 输入框+按钮
  • 5.参考文章

  • Pagination Gallery: Examples And Good Practices
  • Making pagination meaningful
  • Pagination in Web Forms | Evaluating the Effectiveness of Web Forms
  • Some styles for your pagination
  • 关于分页
  • 关于网站分页的那点事儿
  • 带页码的翻页体验与设计比较
  • 建议继续学习:

    1. 为什么长尾数据的翻页技术实现复杂    (阅读:3302)
    2. 不一样的交互组件(下)    (阅读:2361)
    3. 为什么超长列表数据的翻页技术实现复杂(二)    (阅读:2397)
    QQ技术交流群:445447336,欢迎加入!
    扫一扫订阅我的微信号:IT技术博客大学习
    © 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

    京ICP备15002552号-1