翻页设计的分析
来源:百度文库 编辑:神马文学网 时间:2024/04/28 23:11:59
Flickr 照片列表的翻页
Flickr翻页的问题分析:
1、用户不能清晰的知道当前浏览的具体情况,不知道究竟看完了多少页,也不知道究竟还要看多少图片。对自己目前所处的位置一无所知。
2、flickr的翻页区域只提供了总共多少图片,一排非常小的字,大概是因为这些图片的具体数值不是用户最关心的吧,但是那排小字很容易被人忽略,用户几乎会无意识的选择性回避。
3、对于“上一页”、“下一页”,不知道在这种多页可供用户选择的设计中,其意义何在?如果仅仅有“上一页”、“下一页”的两个按钮的话估计用户会不加思索的点击,但是加入了提供给用户能够进入7个页面的连接选择,那么是否用户还会去有意识的去点“上一页”、“下一页”呢?
4、对于“7”的页码的选择,不清楚是否有什么具体的含义?为什么是7而不是5或9?再或是8或10?是因为被点击的页面前后都有相同的三个页面吗?要平衡?
优点分析:
1、按了“上一页”或“下一页”之后则边框加粗(成为重点),引导你继续往下点;
2、数量少得情况下,提供了“最后一页”的链接(图上没有);
3、颜色,给人反馈比较明显。用偏暖但是靠近冷蓝的亮丽的枚红色突出了当前正在显示的页面。非常醒目。而且选中和不选中还有图形的区别,给一些色盲的用户提供了区分的方便。
新浪文章留言部分的翻页
优点分析:
1、有人说新浪评论部分的翻页是显摆用的,我到不认为如此,因为既然用户本身来浏览评论也是随便翻翻的,抱着目的要一页一页翻阅的用户毕竟是少数,那么这样的一个滚动条式的翻页正好满足了用户的需要,用户不需要去想要翻到哪个页面,随便拉拉,随便看看就完成了目的。而对于一些抱着一定要翻到某个页面的用户,上面的可按页码点击的设计就可以满足其需要了。
2、滚动条式的翻页设计,可以明显让用户直观的感觉到自己浏览了多少了,还有多少没有浏览。尤其对于页面数量非常多时,如上百页以上的时候就更显得重要了。
3、共多少条留言的设计明显。
4、提供了最后的页码显示,和最初的页面显示,方便了用户的使用,并且最后页码的提供也能提供给用户一个明确的量的信息。
缺点:
1、选中的当前页的页码反馈不足,明显看出设觉设计的缺陷。
2、没有提供用户直接跳到某个页面的页面设计,造成了一些用户的适用不方便。
3、如果滚动条上能够提供鼠标反馈就更好了。
4、提供批量翻页(“上 10 页”)。
淘宝商品列表的翻页
优点:
1、永远显示“上一页”“下一页”,并且状态和形状有区分;上一页使用率较低,所以设计的较小; 这种设计虽然是好的,但是上一页、下一页在这种情况下的必要性如何?还需要经过用户的使用分析。
2、永远提供“第一页”“最后一页”的链接
3、提供了页面跳转
4、在列表的顶部右侧提供了一个简化的翻页,并且与底部的翻页设计一致。
缺点:
1、由于设计的可变性太多,可能不利于页面的排版设计,比如当翻页用于小的、空间有局限的地方时由于长短不一的可变性比较大,会影响到一些页面放不下这样的翻页设计。
2、桔红色的图标的颜色的运用是不错的,但是却用在不是经常点击的上一页、下一页的设计上,当前的页面页码设计确是最普通的黑色。
3、光靠颜色的区分是国内设计的通病。
Amazon 商品列表页的翻页(引)
是五个网站中唯一一个区分访问过、没访问过的链接的颜色; 不需要“上一页”、“下一页”的时候就不显示; 第一页的链接永远存在; 告知用户列表总数量和当前显示的数量(Amazon有些页面将数量显示在列表顶部); 不提供所有的页,上图中 400 页是极限,400 页之后的内容可以通过分类选择来缩小范围(同时给出提示)。
Google 搜索结果的翻页(引)
富有创意的设计; 不需要“上一页”、“下一页”的时候就不显示; “上一页”“下一页”的链接区域很大,容易点; 不提供所有的页,上图中 100 页是极限,100 页之后的内容或许可以更换关键词重新搜索,但是没有提示。
小结(引用)
必须提供“上一页”和“下一页”的链接,并根据状态和使用率区分设计; 数据量大且更新快的情况下,并且当列表按照特定排序时,一定要提供返回“第一页”的链接;“最后一页”的链接根据访问情况而定; 突出当前页的数字,并且尽量使页码容易点击(不要紧紧地靠在一起),也不要一下子把所有页码都显示出来; 一般不需要在列表的上下都提供翻页,增加程序负担并且干扰视觉;淘宝列表顶部提供的简化的翻页想法不错,但不知道使用率如何; 对于“第一页”和“最后一页”的链接,如果是在页码序列中显示,一般会附带显示第二页和最后第二页的链接,比如本文中的淘宝翻页的截图,显示为“1 2 ... 96 97”。如果单独提供,可能视觉上会以为这不是页码序列的一部分,特别是最后一页的数字,用户可能没有概念; 对于用户比较熟悉的内容,或者用户自己的内容,尽量提供“最后一页”的链接,比如 Flickr 对于个人照片就是这样处理的(文中的翻页取自某个 tag 的照片)。
如果可以通过数据确定用户的行为是较为随意和没有目的性的浏览,那么提供多种方式的翻页很有必要。
Flickr翻页的问题分析:
1、用户不能清晰的知道当前浏览的具体情况,不知道究竟看完了多少页,也不知道究竟还要看多少图片。对自己目前所处的位置一无所知。
2、flickr的翻页区域只提供了总共多少图片,一排非常小的字,大概是因为这些图片的具体数值不是用户最关心的吧,但是那排小字很容易被人忽略,用户几乎会无意识的选择性回避。
3、对于“上一页”、“下一页”,不知道在这种多页可供用户选择的设计中,其意义何在?如果仅仅有“上一页”、“下一页”的两个按钮的话估计用户会不加思索的点击,但是加入了提供给用户能够进入7个页面的连接选择,那么是否用户还会去有意识的去点“上一页”、“下一页”呢?
4、对于“7”的页码的选择,不清楚是否有什么具体的含义?为什么是7而不是5或9?再或是8或10?是因为被点击的页面前后都有相同的三个页面吗?要平衡?
优点分析:
1、按了“上一页”或“下一页”之后则边框加粗(成为重点),引导你继续往下点;
2、数量少得情况下,提供了“最后一页”的链接(图上没有);
3、颜色,给人反馈比较明显。用偏暖但是靠近冷蓝的亮丽的枚红色突出了当前正在显示的页面。非常醒目。而且选中和不选中还有图形的区别,给一些色盲的用户提供了区分的方便。
新浪文章留言部分的翻页
优点分析:
1、有人说新浪评论部分的翻页是显摆用的,我到不认为如此,因为既然用户本身来浏览评论也是随便翻翻的,抱着目的要一页一页翻阅的用户毕竟是少数,那么这样的一个滚动条式的翻页正好满足了用户的需要,用户不需要去想要翻到哪个页面,随便拉拉,随便看看就完成了目的。而对于一些抱着一定要翻到某个页面的用户,上面的可按页码点击的设计就可以满足其需要了。
2、滚动条式的翻页设计,可以明显让用户直观的感觉到自己浏览了多少了,还有多少没有浏览。尤其对于页面数量非常多时,如上百页以上的时候就更显得重要了。
3、共多少条留言的设计明显。
4、提供了最后的页码显示,和最初的页面显示,方便了用户的使用,并且最后页码的提供也能提供给用户一个明确的量的信息。
缺点:
1、选中的当前页的页码反馈不足,明显看出设觉设计的缺陷。
2、没有提供用户直接跳到某个页面的页面设计,造成了一些用户的适用不方便。
3、如果滚动条上能够提供鼠标反馈就更好了。
4、提供批量翻页(“上 10 页”)。
淘宝商品列表的翻页
优点:
1、永远显示“上一页”“下一页”,并且状态和形状有区分;上一页使用率较低,所以设计的较小; 这种设计虽然是好的,但是上一页、下一页在这种情况下的必要性如何?还需要经过用户的使用分析。
2、永远提供“第一页”“最后一页”的链接
3、提供了页面跳转
4、在列表的顶部右侧提供了一个简化的翻页,并且与底部的翻页设计一致。
缺点:
1、由于设计的可变性太多,可能不利于页面的排版设计,比如当翻页用于小的、空间有局限的地方时由于长短不一的可变性比较大,会影响到一些页面放不下这样的翻页设计。
2、桔红色的图标的颜色的运用是不错的,但是却用在不是经常点击的上一页、下一页的设计上,当前的页面页码设计确是最普通的黑色。
3、光靠颜色的区分是国内设计的通病。
Amazon 商品列表页的翻页(引)
是五个网站中唯一一个区分访问过、没访问过的链接的颜色; 不需要“上一页”、“下一页”的时候就不显示; 第一页的链接永远存在; 告知用户列表总数量和当前显示的数量(Amazon有些页面将数量显示在列表顶部); 不提供所有的页,上图中 400 页是极限,400 页之后的内容可以通过分类选择来缩小范围(同时给出提示)。
Google 搜索结果的翻页(引)
富有创意的设计; 不需要“上一页”、“下一页”的时候就不显示; “上一页”“下一页”的链接区域很大,容易点; 不提供所有的页,上图中 100 页是极限,100 页之后的内容或许可以更换关键词重新搜索,但是没有提示。
小结(引用)
必须提供“上一页”和“下一页”的链接,并根据状态和使用率区分设计; 数据量大且更新快的情况下,并且当列表按照特定排序时,一定要提供返回“第一页”的链接;“最后一页”的链接根据访问情况而定; 突出当前页的数字,并且尽量使页码容易点击(不要紧紧地靠在一起),也不要一下子把所有页码都显示出来; 一般不需要在列表的上下都提供翻页,增加程序负担并且干扰视觉;淘宝列表顶部提供的简化的翻页想法不错,但不知道使用率如何; 对于“第一页”和“最后一页”的链接,如果是在页码序列中显示,一般会附带显示第二页和最后第二页的链接,比如本文中的淘宝翻页的截图,显示为“1 2 ... 96 97”。如果单独提供,可能视觉上会以为这不是页码序列的一部分,特别是最后一页的数字,用户可能没有概念; 对于用户比较熟悉的内容,或者用户自己的内容,尽量提供“最后一页”的链接,比如 Flickr 对于个人照片就是这样处理的(文中的翻页取自某个 tag 的照片)。
如果可以通过数据确定用户的行为是较为随意和没有目的性的浏览,那么提供多种方式的翻页很有必要。
翻页设计的分析
带页码的翻页体验与设计比较
带页码的翻页体验与设计比较
带页码的翻页体验与设计比较
自动翻页的名画
设计流程的研究分析
设计流程的研究分析
Amazon Kindle 的设计分析
精彩的翻页连环画 MV
可以翻页的毛泽东诗词
可以翻页的毛泽东诗词
Spring 框架的设计理念与设计模式分析
家庭财务软件的概要分析设计
对一个网站设计调查报告的分析
XX公司的薪酬设计案例分析
国内报表设计器的分析
面向服务的分析与设计原理
家庭财务软件的概要分析设计
对一个网站设计调查报告的分析
电子商务网站的基本设计分析
XX公司的薪酬设计案例分析
国内报表设计器的分析
面向服务的分析与设计原理
nPVR业务的分析与设计(1)