小型分页的设计

  通常,当一个页面有太多信息要显示,而一页塞又不下所有信。为了请求速度、美观以及其他的各种理由,分页就会被我们请过来。让我们的用户可以选 择是否继续前行或者后退,去找到他想要的东西。比如我们在淘宝搜索“衬衣”,这时通常会有 100 页的信息(当然不止 100 页,只是其实用户通常不需要那么多东西)。如下:


  一、小型分页的原始设计方案

  分页的作用说起来有很多,特别是从性能的优化上,但最重要的原因是,让用户可以找到自己想要的东西。这点页面比较多的分页上,淘宝已经做得很 好。但在小分页上,上次和一帮设计师在评审一个小分布设计方式的时候,有了一些不同的意见。先看一下这个小型分页(这里定义的是页面小于或等于5页的分页 设计)的原始设计(交互白板,非视觉终稿)方案:


  看起来挺熟悉的,huh?是的,很多网站其实都采用了这种类型的显示方式。这里有设计师说,会不会把“上一页”和“下一页”放在一起,用用户按起来比较方便。就像这样:


  Hmmm,确实,这样比原来的好挺多的。至少用户可以更省力去翻页。这是有另外一个设计师就跳出来了,说,我们是不是还可以做进一步的优化?因为通常来说,我们按“下一页”的情况会比较多,“上一页”这些历史会比较少见。这时他提出的方案是:


  当然,这样也挺好的,理由也说得过去。就是有一种说不清的东西在里面,类似于技术和艺术究竟那种更重要,懂得的汉字和能写出好文章之间的关系。 其实问题就出在,一是用户需要去做一个“猜”的过程,猜这个左向的指示符究竟是不是代表向上翻页;一是设计的不一致让心理有不和谐的感觉。特别是在中国在 种“好事成双”,什么都要成一对的文化下,更明显。

  二、我的方案

  不过,对于个人来说,我并不赞同上面的这些做法。既然这个分页是小型的,一个小位置就能全列在上面的,那我们为什么还要去复杂化这个用户去选择的过程,而不直接提供一种更便捷的达到目的的方式?我的想法是小分页就应该把他们全显示出来,让用户操作更方便。如下:


  这种展开式的分页设计与原始方案的对比:

  从空间上

  展开式显示更省像素。有很多好的设计师会考虑留白,更会考虑如果去合理地利用这些宝贵的空间,省像素。

  从实用性上

  如果看到第3页,突然想回到第1页,按照原来的设计,是不是得按两次“上一页”?如果有5页呢?我如何保证更快地在各页之间切换?展开式的设计可以更好地解决这样的问题。

  三、结语

  当然,并不是说这样的展开式分页就是更好的。还有可能要结合场景,比如像微博这些允许随时间线无限下拉的地方,我们完全可以让用户忽略“分页” 这样的概念,只要用户向下拉,我们就提供信息的自动加载,以更方便用户的查阅。应用场景总是在变,但不变的是,我想自己应该继续这样:

  一、去积累。有时候总有这样的小纠结,也可以说是一种小洁癖,像代码总追求最优的解决方案。虽然这样的纠结并不会对用户有多大的影响 ,但当你在一个项目中有10个,30个,100个这样的优化时,相信网站的体验将会超出用户的预期。当然,对于自己在这方面的能力,也将会有质的提升。所 以,去积累吧。

  二、超出设计去思考。对于交互,其实我们的最终目标是用户的使用方便与否(不是用户,有时候用户他可能需要的只是很简单的东西,比如一辆更快的马车,但如果你给他一辆福特汽车呢?),所以,应该跳出设计本身去思考,才更有可能得到满意的结果。

  原文地址:http://sofish.de/1859

时间: 2024-10-22 19:40:22

小型分页的设计的相关文章

小型分页的设计方案改进和设计思路

文章简介:小型分页的原始设计方案 通常,当一个页面有太多信息要显示,而一页塞又不下所有信.为了请求速度.美观以及其他的各种理由,分页就会被我们请过来.让我们的用户可以选择是否继续前行或者后退,去找到他想要的东西.比如我们在淘宝搜索"衬衣",这时通常会有 100 页的信息(当然不止 100 页,只是其实用户通常不需要那么多东西).如下: 一.小型分页的原始设计方案 分页的作用说起来有很多,特别是从性能的优化上,但最重要的原因是,让用户可以找到自己想要的东西.这点页面比较多的分页上,淘宝已

深入实践Spring Boot3.1.3 分页查询设计

3.1.3 分页查询设计 对于新型的Neo4j数据库来说,由于它的资源库遵循了JPA的规范标准来设计,在分页查询方面有的地方还不是很完善,所以在分页查询中,设计了一个服务类来处理,如代码清单3-3所示.其中,使用Class<T>传入调用的实体对象,使用Pageable传入页数设定和排序字段设定的参数,使用Filters传入查询的一些节点属性设定的参数. 代码清单3-3 Neo4j分页查询服务类 @Service public class PagesService<T> {    

EasyJWeb Tools业务引擎中分页的设计及实现

web|分页|设计 在Web应用开发中,不管是有没有数据库,经常要用到分页处理问题.EasyJWeb中通过引入IPageList接口来轻松解决我们的遇到的各种分页问题,包括对数据库记录分页.文件目录分页.数组或者Java对象分页等. EasyJWeb作为一个Web框架,其MVC核心中本身没有包含分页的内容,我们这里所说的分页设计是指在EasyJWeb Tools业务引擎中关于分页需求应用的设计. 1.应用示例代码 首先们看看该分页设计的有关应用示例代码,该示例的完整代码可在http://www.

小型关系型数据设计的实用经验方法

每年在带毕业设计时,学生设计数据库都有不少问题.在应用软件的开发中,数据库设计是个要紧的工作.数据库原理中学过数据库设计,在一些相关的实践环节中,数据库设计也是重要的环节.其中,重描述(语言层面的),轻设计的成份很明显.而作为一个软件工程师,实际上,设计能力还是首要的.这是大学生学习中必须要注意的事. 关系数据库的设计有一套成熟的做法,也有很完善的理论支持.所谓成熟的做法,要经过需求分析.概念结构设计.逻辑结构设计.物理结构设计.数据库实施.运行和维护等多个步骤完成,前人开发出了各种工具支持这一

Hibernate分页的设计和编码

1. 当前页码的表单参数 listuser.do?page=2 同时转换成一个 int 类型的页码变量 int currentPage = Integer.parseInt( request.getParameter("page");// 当前页 2. 下一页 listuser.do?page=${currentPage+1} 上一页 listuser.do?page=${currentPage-1} 3. 一页显示多少数据 int pageSize = 5;//每页显示的数据数 4.

交互设计:分页还是加载 这是一个问题

本文作者@子木yoyo 发布于其个人博客.无论是在web页面还是手机应用,信息往往无法在一个页面全部展示,这就需要用到一些可以扩展页面信息的交互模式:分页 (Pagination)和加载(Continuous Scrolling).分页和加载都是非常常见的交互模式,我们每天都会遇到,也正是因为太常见,我们甚至感觉不到它们的存在,浏览到页面的底部时,看到分页就顺手点一下,自动加载了就继续阅读. 但正是这小小的一点,也会带给用户很不同的微妙感受.本文就来聊聊这些小差异带来的大不同. 分页 分页可以将

设计观点:非设计人员对设计师的左右

非设计人员主要是说那些不直接从事设计执行的人,往小了看,其实今天聊的主要是做"视觉设计执行"的朋友们的一个困惑.如果你是一名策划师,我觉得也是属于"设计"范畴的,只是你没把最后的结果"做"出来 - 让想法变成界面.网页.平面或者电视短片. 当然,在"做"本身上就会有很多小细节需要研究,其中特别容易引起我们注意的就是非设计人员对设计师的左右,比如:你的某位客户经常喜欢叫你过去他们公司,在他面前做设计,然后他搬个小板凳在后面看着.

小型网络两个模块安全设计和配置

小型网络有两个模块:公司互联网模块与园区模块.公司互联网模块拥有与互联网的连接,同时也端接VPN与公共服务(DNS.HTTP.FTP.SMTP)信息流.园区模块包含第2层交换功能与所有的用户以及管理与内部网服务器.关于这种设计的讨论的前提是小型网络用作企业的头端.(学电脑) 互联网模块 互联网模块为内部用户提供了与互联网的连接并使用户能够通过互联网访问公共服务器上的信息,同时还为远程地点和远程工作人员提供了VPN访问能力.这种模块不适用于电子商务类型的应用. 互联网模块涉及的关键设备有:SMTP

一份简单明了的网页设计用色指南

  其实今天网页设计中的配色和用色方式,是一件非常有趣又值得思考的事情.尽管绝大多数的网站看起来非常相似,但是巧妙的用色会让布局平庸的网站显得不同凡响. 其实我并不是想说某种革命性的用色技巧或者某个全新的发现,但是绝大多数的网站配色看起来确实非常相似.那么配色的意义又何在呢?如果全世界所有的网站都采用五彩缤纷的配色,那么不会有任何网站从中脱颖而出.当然,今天的网页设计界已经很接近这个状况了.从这个角度上来看,柔和的色调会更容易让用户眼前一亮. 用色彩引导用户注意力 绝大多数网站在布局设计之初,通