热门标签 | HotTags
当前位置:  开发笔记 > 开放平台 > 正文

网站交互设计:分页浅谈案例分析不同分页形式

作用:跳转到上一个页面或下一个页面。元素:分类的基本元素有:上页+页码+下页(如标注1);总页码(如标注2);跳转页(如标注3);确认按钮(如标注4);场景:根据以上这些...SyntaxHighlighter.all();

 

  

\

 

  作用:跳转到上一个页面或下一个页面。

  元素:分类的基本元素有:上页+页码+下页(如标注1);总页码(如标注2);跳转页(如标注3);确认”按钮(如标注4);

  

\

 

  场景:根据以上这些基本元素在不同的场景会有不同的组合

  (场景1)19楼论坛:

  论坛页面数量多的时候会达到上千页;分页的内容多数是顶贴或者是原创陆续更新帖子所以一般用户都会查看首页原创帖,然后又选择性地查看些留言页面。手动全部翻一遍的几率几乎为0;所以论坛性的分页会又以下特点:

  1.多数用户会在看了原创帖后直接翻页或选择回到贴子列表所以除底部还在顶部添加翻页并设置了“返回列表”的快捷操作

  2.所以第“1”页是home的作用,始终有第”1“页,中间用”…“表示未显示的页码;

  3.只提供"首页1+5个连续页码+最后一页"页码;开发者应该是考虑一般用户最多连续查看5页的内容。或者就直接跳至最后一页查看所以显示最后一页页码和直接跳至最后一页的快捷按钮;

  

\

 

  (场景2)微博:

  用户浏览的信息是关注的信息,会像读报纸一样逐页的浏览下去,因此“上一页”“下一页”用的次数最多;其次是跳转翻页,为体现轻量微博的概念,将传统翻页的中间页码部分简化成下拉菜单,既能标识当前页位置又能翻页切换跳转;

  新浪weibo:一页45条微薄,更多则翻页,上一页、下一页及第几页,默认推送10页

  

\

 

  (场景3)百度搜索页面:

  1.搜索结果首次只提供10个页码;一般用户在这10页内还没找到想要的内容应该会更换搜索内容。脚印图形和下面页码对应都可点击翻页,增加了页面趣味性

  2.因为搜索页面用户一般不会回到首页所以页面只有上一页和下一页的快捷按钮

  3.点击任何一页码继续浏览,发现后续提供的页码是:当前页+9;便于用户扩大搜索范围放大。

  4.最多提供20个页码;比较适于页面宽度

  

\

 

  (场景4)信息滚动翻页:

  1.腾讯weibo:一页45条微薄,更多默认显示更多按钮,点击后下面又多显示45条,以此类推;同时腾讯还推出页码翻页模式供用户选择

  更人性化了

  

\

 

  2.花瓣 “无限滚动翻页”,当用户浏览到页面底部,自动刷新页面展示新的信息;连续翻过很多页后,当再无内容可以展示时,自动出现关联信息按钮“查看更多信息”,引导用户去浏览其他相关信息;页面过长时提供“回到顶部”按钮;

  

\

 

  拓展:以下为其他不同的分页形式

  

\

 

  以上是交互团队对分页的小小分享。

        原文:http://www.lpued.com/?p=1447


推荐阅读
  • 在Windows系统上安装VMware Workstation 2022的详细步骤
    本文将详细介绍如何在Windows系统上安装VMware Workstation 2022。包括从官方网站下载软件、选择合适的版本以及安装过程中的关键步骤。此外,还将提供一些激活密钥供参考。 ... [详细]
  • 360SRC安全应急响应:从漏洞提交到修复的全过程
    本文详细介绍了360SRC平台处理一起关键安全事件的过程,涵盖从漏洞提交、验证、排查到最终修复的各个环节。通过这一案例,展示了360在安全应急响应方面的专业能力和严谨态度。 ... [详细]
  • 根据最新发布的《互联网人才趋势报告》,尽管大量IT从业者已转向Python开发,但随着人工智能和大数据领域的迅猛发展,仍存在巨大的人才缺口。本文将详细介绍如何使用Python编写一个简单的爬虫程序,并提供完整的代码示例。 ... [详细]
  • 通过与阿里云的合作,牛客网成功解决了跨国视频面试中的网络卡顿问题,为求职者和面试官提供了更加流畅的沟通体验。 ... [详细]
  • 本文探讨了如何在 PHP 的 Eloquent ORM 中实现数据表之间的关联查询,并通过具体示例详细解释了如何将关联数据嵌入到查询结果中。这不仅提高了数据查询的效率,还简化了代码逻辑。 ... [详细]
  • 揭秘:为何我的网名是老紫竹
    本文详细解释了作者为何选择“老紫竹”作为网名,从个人喜好到网络经历,以及与紫竹植物的渊源。 ... [详细]
  • 本文将深入探讨PHP编程语言的基本概念,并解释PHP概念股的含义。通过详细解析,帮助读者理解PHP在Web开发和股票市场中的重要性。 ... [详细]
  • 本文介绍了一种有效的方法来检测硬盘上的视频文件是否损坏或存在缺帧问题。虽然一些常见的搜索引擎并未提供专门的工具,但通过使用FFmpeg等专业软件,可以全面验证各种视频格式的数据完整性,包括较为古老的AVI格式。 ... [详细]
  • 本次考试于2016年10月25日上午7:50至11:15举行,主要涉及数学专题,特别是斐波那契数列的性质及其在编程中的应用。本文将详细解析考试中的题目,并提供解题思路和代码实现。 ... [详细]
  • 爱奇艺视频下载指南
    随着百度在视频领域的不断扩展,爱奇艺的内容库日益丰富,涵盖了大量新番动画、电影、电视剧和综艺节目。本文将详细介绍如何通过爱奇艺客户端下载视频,帮助用户轻松实现离线观看。 ... [详细]
  • TCP长连接设备管理平台:架构与功能概览
    本文介绍了基于TCP长连接的设备管理平台的设计理念、技术选型及主要功能模块。最初,项目旨在实现简单的协议测试,但随着需求扩展,逐步演变为一个完整的前后端分离系统。 ... [详细]
  • 脑机接口(BCI)技术正逐步将科幻变为现实,从帮助听障人士恢复听力到使瘫痪者重新站立,甚至可能将多年的学习过程压缩至瞬间。本文探讨了这一前沿技术的现状、挑战及其未来前景。 ... [详细]
  • 本文介绍了一种解决二元可满足性(2-SAT)问题的方法。通过具体实例,详细解释了如何构建模型、应用算法,并提供了编程实现的细节和优化建议。 ... [详细]
  • Python入门:第一天准备与安装
    本文详细介绍了Python编程语言的基础知识和安装步骤,帮助初学者快速上手。涵盖Python的特点、应用场景以及Windows环境下Python和PyCharm的安装方法。 ... [详细]
  • 自己用过的一些比较有用的css3新属性【HTML】
    web前端|html教程自己用过的一些比较用的css3新属性web前端-html教程css3刚推出不久,虽然大多数的css3属性在很多流行的浏览器中不支持,但我个人觉得还是要尽量开 ... [详细]
author-avatar
大爱保罗2502904621
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有