网站设计分页的那点事儿
电子商务网站的产品分页设计是很小块的设计,绝大多数的网站不会在这里花费什么精力,但是,如果能在细节上做的更贴心一些,对用户的购买体验还是有所提升的,毕竟用户每次购买都会多次使用该功能模块。
首先要说的是,分页是用户普遍接受的产品页面浏览方式,设计也是大同小异,用户的学习成本为零。
现在的电商网站通常选择在产品页的上下部分均放置分页,下面是完整的分页功能,上面是简化功能。产品页下面需要完整的分页功能很好理解,因为用户都是浏览完该页产品再翻页,所以把完整功能置于底部。那什么时候用户需要在产品页上面使用分页功能呢?那是在用户不想看产品页内容就翻页的时候,是在用户想了解自己所处位置的时候,另外由于产品页上部的分页模块常常和产品筛选条件模块放于一处,所以这里的功能需要尽量简化、节约空间,好的设计可参照下图中的乐淘,如果用户体验做的更好一点,这里可以再加入产品页第一页的链接,毕竟用户返回第一页的需求是硬性需求。
对于产品页下部的分页设计,各个网站最大的区别就是是否放置自定义选择页的设计。用户看页面的习惯分两种,一种是按照顺序往后看的,另一种是挑页面去看的。由于现在电商网站的产品筛选条件比较丰富,用户很少从后面的产品页往前面的产品页浏览或是直接看中间的产品页,如果网站没有要增强后面产品的曝光需求,可以拿掉自定义选择页模块(注:淘宝应该还是很需要这个模块的)。
在产品页比较多的情况下,用户浏览到中间的页面会出现如何进行分页导向的问题。解决办法分两种,一种是中间放置五个页码,两边是开始页和最后页,中间省略号,此类做法可以参照下图中的乐淘分页设计,令一种做法是类似淘宝、当当的设计,由于已经有自定义选择页设计,可以简化前面页码,省略掉一个省略号以及第一页的页码。两者的结合体可以参见下图中的1号店和凡客,看起来元素有点冗余了。
另外,从方便用户使用的角度来说,分页的页码点击区域应该大一些,反例请参考下图的凡客,在凡客你必须把鼠标移到页码的数字上面才可以点击,悲剧。
产品分页可以说的内容不是太多,暂时先说到这里,关于电商网站的设计文章会陆续出炉,欢迎关注:)

本文地址:http://tuquu.com/tutorial/di980.html
-
Macaron 马卡龙系色谱 ;附HC(16进制码)
Macaron 马卡龙系颜色表 色谱/色卡/色表 扩展阅读:马卡龙原指(Macaron
-
@media适配不同尺寸的手机
当下,不同分辨率,不同尺寸的移动设备越来越多,自适应也成了最热门的话题,下面就是图趣网整理到的
-
干货分享!推荐8个高清无水印无版权可商用图
在我们写文章的时候经常需要给文章配一个好图,或者是bannar等等,这就需要我们寻找一些好的无水印
-
国外黄色网站系列欣赏之一
黄色也是一个暖色。它有大自然、阳光、春天的涵义,而且通常被认为是一个快乐和有希望的色彩,黄色
-
CutterMan-一个好用的ps切图插件
cutterman--ps切图工具,方便快捷的用于网页开发/IOS/Android切图功能
-
ps像素图放大边缘模糊?一步搞定
ps像素图放大边缘模糊?我们将分享一个ps无损放大二维码的更方便快捷的实例...
-
庞门正道:好好玩耍的点线面(上)
庞门正道:好好玩耍的点线面(上)
-
经典网页配色方案之无色系
今天跟大家分享无色系配色---指除了彩色以外的其它颜色,常见的有金、银、黑、白、灰。明度从0变化








