flickr使用教程

翻页设计的分析带页码体验与比较

-flickr翻页 -链接 -页码 -提供

flickr翻页

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 页之后的内容大概可以调换KeyWords重新搜索,但是没有提示。
小结(引用)
  1. 必须提供“上一页”和“下一页”的链接,并根据状态和使用率区分计划;
  2. 数据量大且更新快的环境下,而且当列表根据特定排序时,肯定要提供返回“第一页”的链接;“最后一页”的链接根据访问环境而定;
  3. 突出当前页的数字,而且尽量使页码轻易点击(没关系紧地靠在一起),也不要一下子把全部页码都表现出来;
  4. 一样平常不需要在列表的上下都提供翻页,增长程序包袱而且滋扰视觉;淘宝列表顶部提供的简化的翻页想法不错,但不知道使用率怎样;
  5. 对于“第一页”和“最后一页”的链接,假如是在页码序列中表现,一样平常会附带表现第二页和最后第二页的链接,好比本文中的淘宝翻页的截图,表现为“1 2 ... 96 97”。假如单独提供,大概视觉上会以为这不是页码序列的一部分,特殊是最后一页的数字,用户大概没有观点;
  6. 对于用户比较认识的内容,要么用户自己的内容,尽量提供“最后一页”的链接,好比 Flickr 对于个人照片就是这样处置的(文中的翻页取自某个 tag 的照片)。

假如可以通过数据确定用户的行为是较为随意和没有目标性的欣赏,那么提供多种方法的翻页很有须要。

别看翻页就占那么点儿地方,它表现的是市场的策略、程序的算法和交互计划。我选择了

Amazon

Google

Flickr

新浪

淘宝

这五个网站,体验他们的翻页计划。这几个站点应该还算有代表性,Amazon 是海外购物网站,Google 是SearchEngine,Flickr 是 Web 2.0 和 Yahoo 的代表,新浪是中国流派,淘宝是国内购物站点(同时还拥有良好的计划团队)。

Amazon 商品列表页的翻页
  • 是五个网站中唯逐一个区分访问过、没访问过的链接的颜色;
  • 不需要“上一页”、“下一页”的时间就不表现;
  • 第一页的链接永久存在;
  • 告知用户列表总数目和当前表现的数目(Amazon有些页面将数目表现在列表顶部);
  • 不提供全部的页,上图中 400 页是极限,400 页之后的内容可以通过度类选择来缩小范畴(同时给出提示)。
Google 搜索结果的翻页
  • 富有创意的计划;
  • 不需要“上一页”、“下一页”的时间就不表现;
  • “上一页”“下一页”的链接地区很大,轻易点;
  • 不提供全部的页,上图中 100 页是极限,100 页之后的内容 大概 可以调换KeyWords重新搜索,但是没有提示。
Flickr 照片列表的翻页
  • “上一页”“下一页”永久表现,但差别环境表现差别样式;
  • 按了“上一页”或“下一页”之后则边框加粗(成为重点),引导你继续往下点;
  • 告知用户列表的总数目;
  • 数目少得环境下,提供了“最后一页”的链接(图上没有);
  • 可以访问到全部的页,惋惜如上图所示超越肯定的页码,表现上有问题(IE 和 FF 都这样)。
新浪文章留言部分的翻页
  • 新浪评述部分的翻页,Ajax 可以拖动翻页(显摆用的);
  • 永久提供“第一页”“最后一页”“上一页”“下一页”的链接,但是样式基本同等没有差异;
  • 告知用户列表的总数目;
  • 提供批量翻页(“上 10 页”)。

但是在新浪博客(新浪比较有代表性的新产品)中,我们也可以看到以下相对比较粗糙的翻页:

新浪博客的翻页
  • 给出了“最后一页”的链接,直接表现为“第 n 页”,如上图中的“第 7 页”;
  • 在单个博客页面上的翻页,以“>>”作为下一页,而不是常见的“>”;
  • 提供了批量翻页(“上 5 页”)。
淘宝商品列表的翻页
  • 永久表现“上一页”“下一页”,而且状态和外形有区分;上一页使用率较低,以是计划的较小;
  • 永久提供“第一页”“最后一页”的链接;
  • 提供页面的跳转,但是默认值为当前页;
  • 在列表的顶部右侧提供了一个简化的翻页,而且与底部的翻页计划同等。

小结

  1. 必须提供“上一页”和“下一页”的链接,并根据状态和使用率区分计划;
  2. 数据量大且更新快的环境下,而且 当列表根据特定排序 时,肯定要提供返回“第一页”的链接;“最后一页”的链接根据访问环境而定;
  3. 突出当前页的数字,而且尽量使页码轻易点击(没关系紧地靠在一起),也不要一下子把全部页码都表现出来;
  4. 一样平常不需要在列表的上下都提供翻页,增长程序包袱而且滋扰视觉;淘宝列表顶部提供的简化的翻页想法不错,但不知道使用率怎样;
  5. 批量翻页是偶然义的(但是可以增长 PageView),可以通过优化页码分列来替换;好比在当前页的左右两侧各提供肯定数目的页码;
  6. 对于“第一页”和“最后一页”的链接,假如是在页码序列中表现,一样平常会附带表现第二页和最后第二页的链接,好比本文中的淘宝翻页的截图,表现为“1 2 ... 96 97”。假如单独提供,大概视觉上会以为这不是页码序列的一部分,特殊是最后一页的数字,用户大概没有观点;
  7. 对于用户比较认识的内容,要么用户自己的内容,尽量提供“最后一页”的链接,好比 Flickr 对于个人照片就是这样处置的(文中的翻页取自某个 tag 的照片)。

假如可以通过数据确定用户的行为是较为随意和没有目标性的欣赏,那么提供多种方法的翻页很有须要,好比提供跳转到固定页码。比较理性的行为,不会使用直接跳转到某页,由于无法知道那边是什么。

shark在白鸦的那篇淘宝的体验文章中回答到“!有些工具出如今页面上是有很长的故事的,不便多说了。”我想来想去,写本文而且截图只是看看这些公司在细节上面是怎么处置的、是否专心计划,不存在绝对的对错。

数据很重要,我曾经做过一个活动广告,点击率约莫是 1%,后来在广告上增长了“点击察看详情”,而且接纳默认的蓝色加下划线的链接情势,点击率进步到了 10% 左右。

Anchor 是一款可自定义的 Mac 菜单栏、通知中心小工具合集,你可以将 Anchor 内置的番茄钟、计时器、网速表现、剪贴板历史、

文件共享、日历、制止休眠等功能放置在状态栏、通知中心使用,还可以在付费解锁后添加自定义功能。@Appinn 来自觉现频道,有一段视频,先看看: 能在 Mac 菜单栏输出任意脚本内容的小工具 BitBar 曾经红极一时,没想到近来更新也是 2016 年了。青小蛙以为重要缘故是使用门槛太高了。 Mac 顶部菜单栏的位置是名贵的,当你想给状态栏减负的时间,可以试试老牌工具 Bartender 3,它能帮你隐蔽状态栏上不常用的图标、调整图标次序,而且在图标有新通知时主动表现,尔后又主动隐蔽。 而 Anchor,为菜单栏和通知中心提供了更多功能。默认自带的功能如下: 番茄钟 怀念日提示 计时器 网速表现 剪贴板历史 文件共享 日历 制止休眠 青小蛙以为 Anchor 的菜单栏样式,可以再美化一些。相比于系统原生的状态栏菜单,对好比下: Anchor 的种种小功能都可以选择放置到菜单栏要么通知中心,也可以同时放置在两个地方,而且每一个小功能都能自定义图标和名称: 下图从左至右,分别是放置了怀念日提示、计时器、日历: 别的关于自定义程序功能,青小蛙并没有内购解锁此功能,列位可以参考开发者博客上的文章:Anchor 专业版手册。 Anchor 可以在 Mac App Store 安装,免费版支持最多启用三个小工具。 相关阅读 Anchor Pointer – 基于 GPS,可离线使用的找人、找车、找点导航应用 [iPhone 限免] 数据管理工具与与团队协作工具『!简道云』公布钉钉专属版 Product Hunt 精选 3 – 播客制作,日志,地图丈量,换脸,给网站制作桌面应用 Adobe 软件的替换品们 34 个大类,超越 400 个「macOS 绝赞开源应用」列表 ©2019 青小蛙 for 小众软件 | 参加我们 | 投稿 | 订阅指南 3659b075e72a5b7b1b87ea74aa7932ff 点击这里留言、和原作者一起评述收藏0 See more

本文网址: http://www.diminga.com/w/2020822112315_6581_3806617753/home