网页中的分页设计

  说说目前常用的三种分类显示信息方法:

  常规翻页 信息滚动翻页 滚动条

  前者是横向翻页方式,后两者是纵向的信息翻页。分页作为很小的一个组件,大多数网站都不会花费什么精力去设计,设计也大同小异,用户已经使用习惯学习成本为0,但如果能够在细节上做的更细致贴心一些,用户的使用体验会有所提升。

  一、 先来看常规翻页

  1) 组成结构


  • 上页+页码+下页

  • 跳转到__页/第__页";

  • 确认"按钮;

  • 支持键盘操作;

  2) 使用情景

  当网页内容较多、不能在限定区域内显示完全时;

  为了方便用户在多个页面间跳转和快速定位(尤其是按顺序翻页),通过翻页设计提供多个页面间的导航。

  在电商网站3级页、搜索结果页面等信息量大的页面是很重要的。

  • 分页的内容是什么类型?

  • 页面数量有多少?

  •查看最多的是哪些页面?

  • 手动全部翻一遍的几率

  •是否会不按顺序翻页,为什么?

  •是否会查看已翻过的翻页?

  •翻页是否在列表顶部和底部都出现?

  •"最后一页"是否一定要有?

  •列表顶部什么情况下有翻页?

  按照用户心理模型,浏览邮箱内容时是反复浏览型,且页面较长,此时需要在顶部添加翻页,但电商网站搜索结果页和新浪微博的用户是在浏览到页面底部时才会有翻页动作,因此不必在顶部放翻页。

  •是否可以mouseover就显示页面内容?什么时候可以?

  设计前考虑完以上问题,针对情况进行取舍设计。

  3) 交互分析

  •Google翻页


  搜索结果首次只提供10个页码;

  设计猜想:google开发者认为一般用户在这10页内就能找到想要的内容。


  点击任何一页码继续浏览,发现后续提供的页码是:当前页+9;

  设计猜想:当用户往下点击页码时,google开发者认为前10页内容不能满足用户,于是将搜索范围放大。

  但最多提供20个页码;

  设计猜想:但考虑到网页宽度还是不能继续无限制增加页码个数,于是设定最多一次提供20个页码。

  •Baidu翻页


  始终有第"1"页,中间用"…"表示未显示的页码;

  设计猜想:用户翻到后面页码也找不到想要的内容时,会返回第一页重新查找,此时第"1"页是home的作用。


  选中页码和mouseover页码样式始终在一个位置不变,不需移动鼠标就可点击下一页,而后页码自动替换状态;

  设计猜想:瞄准页码点击较困难,可以减少用户瞄准位置的次数。但没有做完美,用户每刷新一个页面,还是要滚动浏览器条到下方瞄准页码位置。这个微小的友好交互可以运用到轮播图设计中,减少鼠标瞄准操作。

  但也最多提供20个页码;

  •Sina微博小分页


  滚动翻页与翻页的结合使用;

时间: 2024-09-07 11:26:30

网页中的分页设计的相关文章

《秩序之美——网页中的网格设计》——第一章 引言

第一章 引言 从某种层面上讲,设计可被看做一种利用创造力将想法强加于这个世界的方式,但并非传统意义上的强加于世界,而是以一种更恰当,更人性化的尺度. 在由问题出发,沿着思路解决问题的过程中,设计师可以从商业(业务需要,技术限制)或者艺术(美学,易用性,人文因素)的角度来阐述自己的作品.无论如何,最成功的设计可以简化为一种最本质的目的:在混沌中创造秩序. 怎样的秩序?当然是一种能准确反映设计师世界观的秩序.世界应如何运转,设计师有着自己独特的见解和表达方式,由此创造出不同的秩序.它的力量微弱而有限

《秩序之美——网页中的网格设计》——第二章 网格的基本概念

第二章 网格的基本概念 在为各式多媒体工作的经验丰富的平面设计师中,众所周知的是:使用网格进行设计具有多种优势.其中主要的优势有必要在这里重述一下. 网格为信息的展示增添秩序.连续性和和谐性. 网格可向读者预示出信息的所在,更有助于信息的交流. 在保持与原先展示内容总体一致的前提下,网格可使添加新内容变得更容易. 网格促使各个设计方式彼此协作而不是相互削弱. 这些只是你将读到的支持网格设计观点的一部分内容,但是到目前为止,它们已被主要写入网格如何有利于传统平面设计的读物中.而让我感到困惑的事实是

《秩序之美——网页中的网格设计》——导读

前言怎样才能设计出简洁大方而不落于俗套的超人气网站? 纽约时报网站的资深设计师Khoi Vinh 在本书中将为你 揭示其中的奥秘. 本书将源自传统平面设计.被众多平面设计大师推崇的 网格设计方法应用于网页设计,向读者详细介绍了网格 设计成熟而经典的设计模式,并以整个网站的设计为例, 对工作流程.设计工具和方法进行了系统而全面的介绍, 手把手教读者从零开始,完成网站主要页面的设计. 本书为所有网站设计人员提供了一个完美的设计参考. 在阅读并实践本书的内容后,读者不但可以开拓眼界,更 能提升自己的设

网页中表格的设计:网页表格设计的细节技巧

文章描述:看似简单的表格真要设计好还是需要花些气力的,看看下面这些细节设计点,你是否也知道? 想必多数同学曾经学习计算机就是从Word开始,其中一项重要的学习任务就是创建表格,如今在网络页面里表格随处可见,尤其是商业产品里充满了大量的数据,要没有这些表格估计看内容得吐血-- 表格形形色色,默默无闻的呈现着数据,阅读起来如何最为顺畅,如何才能从表格里发掘出重要信息,有哪些可以对表格进行的操作,梳理一下以供参考. 1.行高是表格浏览时的重要参数 行高是表格非常重要的参数,行高间距直接影响着阅读的体验

网页banner设计理论:工作中对banner设计的理解

网页制作Webjx文章简介:Banner广告条中的字体设计. 由于banner一般用于专题类网站,在门户网站的二级页面,用户进来之前,在首页已经对主题有一定的了解和认识,所以banner的作用是在二级页面中起到包装页面的同时增加内容的趣味度和内容方向引导:所以这也是和传统广告中普遍要求第一感官视觉冲击力来强奸眼球所不同的地方 本来想写"Advertisemen中的字体结构分析",后来发现这个标题写得有点大,偏离了在目前工作中的针对性,因此缩小到banner的范围,以下内容仅个人在目前工

Javascript设计网页中的下拉菜单

javascript|菜单|设计|网页|下拉 在网页制作时,为了更好地组织信息,使显示的信息分类明确.层次清晰,网页制作者往往费尽心机.常用的方法有用树型结构显示信息,用表格进行网页布局,用框架(frame)组织页面等等.但对于习惯了Windows操作系统的用户来说,利用菜单操作可以算是最自然的方法了.下面我们就来看一下怎样在网页中设计下拉式菜单. 下拉式菜单由若干个显示在窗口顶部的主菜单条和各个菜单条下面的子菜单组成.每个子菜单往往还包含几个子菜单项.通常,只有菜单条显示在窗口中,并且当鼠标指

&#106avascript设计网页中的下拉菜单

菜单|设计|网页|下拉 在网页制作时,为了更好地组织信息,使显示的信息分类明确.层次清晰,网页制作者往往费尽心机.常用的方法有用树型结构显示信息,用表格进行网页布局,用框架(frame)组织页面等等.但对于习惯了Windows操作系统的用户来说,利用菜单操作可以算是最自然的方法了.下面我们就来看一下怎样在网页中设计下拉式菜单. 下拉式菜单由若干个显示在窗口顶部的主菜单条和各个菜单条下面的子菜单组成.每个子菜单往往还包含几个子菜单项.通常,只有菜单条显示在窗口中,并且当鼠标指针指向菜单条时,菜单条

网页设计技巧:网页中动感线条使用

文章描述:想让网站动感十足?试试网页设计中的韵律线条. 在网页设计中,横向和竖向的直线非常常见,利用整齐的线条可以打造出有序的视觉路径以及信息层级.当然,有些时候,可以不按理出牌,设计一些倾斜的线条,让你的网站不拘一格,更加与众不同. 打破传统布局,创造动态的自由视感,让构成更加复杂--无论是利用简约的几何图形,或是精致的倾斜图像.让你的设计更具吸引力,不妨试试斜线. Paseo Itaigara 形状感很强,整体设计的很成功,显得并不杂乱.菱形无处不在,拼嵌式的菱形,装饰性的菱形,按钮的菱形,

手机网页设计原则:移动网页中的基础元素

文章描述:移动网页设计应该包含的5个基本元素. 大部分人都认为手机网页设计与电脑网页设计有很大不同,其实不是,手机网页除了小且可以触摸外,很多设计原则与电脑网页设计是共通的.这里有 5 个基本的元素,希望对设计师有所帮助. 1. 有意义的导航 在移动设备上获取信息实际上是有趣的体验,因此,令用户在使用过程中感到愉快很有必要,简单地删除屏幕上的链接(或taps)并不能达到用户友好体验的目的.导航应该包含用户需要的内容,并提供明确的路径.如果用户知道跳转的具体页面,就会进行点击. 首先,确保导航在用