浅谈交互设计中的分页设计技巧

2016-02-17 01:55 6 1 收藏

今天给大家分享的是由图老师小编精心为您推荐的浅谈交互设计中的分页设计技巧,喜欢的朋友可以分享一下,也算是给小编一份支持,大家都不容易啊!

【 tulaoshi.com - 平面设计 】

浅谈交互设计中的分页设计技巧,PS教程,图老师教程网

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

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

浅谈交互设计中的分页设计技巧,PS教程,图老师教程网

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

(场景1)19楼论坛:

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

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

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

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

浅谈交互设计中的分页设计技巧,PS教程,图老师教程网

(场景2)微博:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

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

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

浅谈交互设计中的分页设计技巧,PS教程,图老师教程网

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

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

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

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

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

浅谈交互设计中的分页设计技巧,PS教程,图老师教程网

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

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

更人性化了

浅谈交互设计中的分页设计技巧,PS教程,图老师教程网

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

浅谈交互设计中的分页设计技巧,PS教程,图老师教程网

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

浅谈交互设计中的分页设计技巧,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

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

来源:http://www.tulaoshi.com/n/20160217/1577413.html

延伸阅读
设想并构建出区别于常见网站布局的创新式设计是一件很难的事情,但是一旦把这件事做好,就可以设计出那些最富有趣味又令人着迷的网站。 你几乎每天都可以见到这些网站,每次看到他们,你都会感慨到:多希望我当初能够想到这个点子。设计师们正在完成一项了不起的工作,设计出一系列精美的网页元素并将其组合在一起,这些网页不但具备可用性...
很有幸能看到这篇文章,作者见证了腾讯CDC从寥寥数人变成一个成熟团队的整个过程,成长经历相当有可读性,且值得设计师学习反思的地方太多,无论是哪个领域的同学,都推荐阅读收藏。 前言:今年同时是我工作的第十个年头,今天也是我的生日,如果一路往上回顾,应该是有不少故事的,如果要讲,我总是习惯性从我工作的第5个年头开始,一方面 5...
网上有很多现成的交互设计实例,只要细心观察总结,可以发现许多常用的技巧,本文总结三个在许多网站上都能见到的交互设计方法,如果经常关注交互设计的话,你一定见到过这些类型的交互应用。 交互设计,表现出来的呈现方式可谓是多种多样, 不过你只要掌握好了以下三点的使用技巧,同样可能轻松打造出良好的交互设计效果。 1.响应 对即将...
在设计师中,灰色被应用的场合十分广泛,由于颜色本身的性质决定,使得灰色能与任何其他颜色相搭配。同样在web交互设计中我们也会十分关注颜色对于用户的影响。其中灰色也就成为关注度较高的颜色之一,虽然在很多场合它并不起眼,但确实很多应用中都离不开它。 在进行Web的交互设计中,颜色信息的传达也是不可或缺的一部分。我们常会发现许多...
今天的交互,就像是引诱小孩子吃药的方糖,不但味道得甜,过程还要润物无声,是个不小的考验。今天网易的美女交互设计大神@子木yoyo 分享了6个最流行的交互设计方法,附优秀案例,通俗易懂,可以帮你尽快实现这个目标,来加油吧。 有了好的创意,我们还需要有好的方法去表现它,下面就来介绍一下娱乐化设计的方法。 一、目标的激励 在游戏中...

经验教程

469

收藏

82
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部