交互界面竞品分析翻页

1、 2013 SUNING 易购 UED 规范管理部SUNING易购 UED界面规范管理部 顾巍界面规范竞品分析分页组件20130417 2013 SUNING 易购 UED 规范管理部SUNING易购 UED目录竞品分析的目的竞品目标及方法竞品分析分析结论 2013 SUNING 易购 UED 规范管理部SUNING易购 UED目的分页组件（Pagination），也称翻页组件，是为了在有限的空间内展示更多的同属性的信息，分页提供按顺序浏览这些信息的路径。针对分页组件的设计元素，参考各家竞品进行分析，得出结论。最后产出规范和组件库列表顶部什么情况下有翻页？分页的内容是什么类型？页面数量有多少？

2、查看最多的是哪些页面？手动全部翻一遍的几率？是否会不按顺序翻页，为什么？是否会查看已翻过的翻页？翻页是否在列表顶部和底部都出现？“最后一页”是否一定要有？ 2013 SUNING 易购 UED 规范管理部SUNING易购 UED目录竞品分析的目的竞品目标及方法竞品分析分析结论 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品目标、方法1、确定竞品（按照以下标准来筛选）电商类产品，参考意义最大搜索引擎和其他互联网突出产品产品/用研设计/交互方认为有竞争力或值得特别关注的产品 竞品竞品说明说明淘宝淘宝系典型产品，平台型天猫淘宝系新晋产品，平台型京东与苏宁易购定位类似，B

3、2C行业前列亚马逊与苏宁易购定位类似，B2C行业前列1号店与苏宁易购定位类似，B2C行业前列当当与苏宁易购定位类似，B2C行业前列一淘淘宝系新晋产品，导购型搜索引擎及其他包括百度，google，必应，新浪微博及博客，点点，豆瓣等竞品列表 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品目标、方法2、方法设计元素1.第一页2.最后一页3.上下页3.1 固定存在？3.2 样式文案4.当前页5.非当前页6.跳转功能7.尺寸间距7.1尺寸7.2间距8.对应高度 2013 SUNING 易购 UED 规范管理部SUNING易购 UED目录竞品分析的目的竞品目标及方法竞品分析分

4、析结论 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析1、第一页：形式A京东的收藏页一淘的收藏页B其他所有页面首页数字1PS：辅助翻页均无返回第一页的链接 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析没有此页面或无法调查没有此页面或无法调查不能返回第一页不能返回第一页1,2,N可以回到第可以回到第N页页苏宁苏宁淘宝淘宝天猫天猫京东京东亚马逊亚马逊1号店号店当当当当一淘一淘13级列表1,21,21111,21店铺列表1,21,21评价11,21111,2成交1,21,2订单记录1收藏1,2,31其他百度百度Google必应必应

5、豆瓣豆瓣1,21、第一页：页数微博搜索页微博搜索页1新浪博客新浪博客1点点点点1 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析1、第一页调查结果形式上绝大多数是固定第一页数字链接辅助的简版翻页均没有第一页链接电商中绝大部分页面均一直显示第一页的链接，搜索引擎均不显示淘宝系在很多场合使用同时展示前两页的功能 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析1、第一页结论主要翻页建议展示第一页链接，根据业务场景考虑第二页是否展示辅助翻页不使用第一页链接形式上使用固定第一页数字连接的方法在返回第一页的可能性非常小的情况下在希望用户注

6、意力保持在当前页面及周边页面的情况下可以省略第一页链接 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析2、最后一页A固定展示最后一页的数字链接PS：辅助翻页均无跳转最后一页的链接B只展示总页数B+总页数和跳转AB+既有最后一页数字链接 也有总页数和跳转无法跳转到最后一页 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析A 固定最后一页数字固定最后一页数字B总页数总页数B+总页数总页数+跳转跳转AB+数字数字+总页数总页数+跳转跳转苏宁苏宁淘宝淘宝天猫天猫京东京东亚马逊亚马逊1号店号店当当当当一淘一淘A3级列表B+B+AAAB+B

7、+AB+A店铺列表B+A评价AAAB+A成交订单记录B+收藏AA其他百度百度Google必应必应豆瓣豆瓣A2、最后一页微博搜索页微博搜索页A新浪博客新浪博客B点点点点 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析2、最后一页调查结果浏览页面：电商主要分成淘宝系和当当的总页+跳转模式；京东，亚马逊的固定最后一页模式；以及1号店的两种都有的奇葩模式评价页面：淘宝系不提供最后一页的链接；存在链接的均采用固定最后一页模式；以及1号店的两种都有的奇葩模式搜索引擎不提供最后一页辅助的简版翻页均没有最后一页的链接，但普遍展示了总页数 2013 SUNING 易购 UED

8、规范管理部SUNING易购 UED竞品分析2、最后一页结论主要翻页在浏览页面，建议展示最后一页链接，建议使用固定最后一页链接的方式，减少相对于输入框+按钮的操作量辅助翻页不使用最后一页链接，但需要展示总页数在一些不推荐翻到后面或者靠后的内容质量较差的场景下，取消最后一页的链接不建议使用总页数，请使用最后一页的数字表明总信息量在页面数量频繁变更的场景下，会不会导致页面重复计算总页数导致性能降低？ 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析3.1、上一页 下一页：固定存在？AB按需展示固定展示 2013 SUNING 易购 UED 规范管理部SUNING易购

9、UED竞品分析A按需展示按需展示B固定展示固定展示苏宁苏宁淘宝淘宝天猫天猫京东京东亚马逊亚马逊1号店号店当当当当一淘一淘B3级列表BBBBABAB店铺列表BBBB评价BBABABA成交BBB订单记录ABBABAB收藏ABBABB其他3.1、上一页 下一页：固定存在？百度百度AGoogleA必应必应A豆瓣豆瓣B微博搜索页微博搜索页A新浪博客新浪博客A点点点点A 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析3.1、上一页 下一页：固定存在？调查结果70%左右的电商页面采取了上下页固定在页面上，存在可点击和不可点击两种状态30%左右的电商页面采取了按照需要展示上下

10、页，即首页时不显示上一页，尾页时不显示下一页其他类型的网站一般按需展示组件元素基本上以 上一页 页码 下一页 的版式排列辅助翻页中，上下页作为主体，100%存在 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析3.1、上一页 下一页：固定存在？结论建议在浏览页面等翻页频率较高的页面固定上下页按钮，建立心理模型我的易购等翻页频率较低的页面使用按需展示的简洁方式，优化版面版式采用 上一页 页面 下一页 排列辅助翻页中，固定上下页按钮需要注意的是 避免出现下图的情况建议不满1页就取消展示分页讨论：在翻页所对应的内容作为页面主体时，可否将键盘“”“”作为上下页的快捷键。

11、 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析3.2、上一页 下一页：样式文案只有单个符号标注文字只有文字文案+文字单个符号和文字的组合+文字双个符号和文字的组合 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析苏宁苏宁淘宝淘宝天猫天猫京东京东亚马逊亚马逊1号店号店当当当当一淘一淘+文字3级列表+文字+文字+文字+文字+文字文字+文字+文字店铺列表文字文字文字+文字评价+文字+文字文字+文字+文字文字+文字成交+文字文字+文字订单记录+文字+文字+文字文字+文字+文字收藏+文字+文字+文字+文字文字+文字其他3.2、上一页 下

12、一页：样式文案微博搜索页微博搜索页文字新浪博客新浪博客+文字点点点点文字百度百度+文字Google+文字必应必应文字豆瓣豆瓣+文字 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析3.2、上一页 下一页：样式文案调查结果在四种样式中，+文字的方案略占优各家网站使用的情况并不统一，也未发现规律可言90%以上使用的文案为 上一页 下一页 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析3.2、上一页 下一页：样式文案结论主要翻页建议统一使用 +文字 的方案，文案为上一页 下一页在辅助翻页或简化翻页时，从可能点击的频率考虑使用 方案或非

13、对称方案 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析4、当前页调查结果：各家网站均采用了和非当前页不同的形式，一般都使用了hover，点击无反应的交互形式一般为纯数字和外框+数字两种方案 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析4、当前页结论：建议使用无边框的版本，加强无法点击的含义 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析5.1、非当前页：当位于首页时2可直接跳转至第2页3可直接跳转至第3页4可直接跳转至第4页N可直接跳转至第N页 2013 SUNING 易购 UED 规范管

14、理部SUNING易购 UED竞品分析苏宁苏宁淘宝淘宝天猫天猫京东京东亚马逊亚马逊1号店号店当当当当一淘一淘43级列表53334674店铺列表9937评价5552429成交22订单记录5收藏3其他百度百度10Google10必应必应10豆瓣豆瓣95.1、非当前页：当位于首页时微博搜索页微博搜索页6新浪博客新浪博客10点点点点 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析5.1、非当前页：当位于首页时调查结果根据业务和场景的不同，非当前页的展示数量差异很大各家网站基本在不同的模块使用的数字不同电商一般在2-9之间，3-5居多多为外框+数字形式 2013 SUNI

15、NG 易购 UED 规范管理部SUNING易购 UED竞品分析5.1、非当前页：当位于首页时结论主要翻页中，建议使用5方案在不鼓励向后跳转的场景中，建议使用2方案简化翻页中，建议使用7方案，弥补无法跳转的缺陷hover时应与当前页、非当前页的普通样式有明显的区分 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析5.2、非当前页：当位于中间页2,4向前可跳2页，向后4页3,2向前可跳3页，向后2页1,1向前可跳1页，向后1页x,y向前可跳x页，向后y页 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析苏宁苏宁淘宝淘宝天猫天猫京东京东

16、亚马逊亚马逊1号店号店当当当当一淘一淘1,13级列表2,42,23,21,13,33,23,31,1店铺列表2,42,42,22,4评价2,12,23,21,13,31,14,4成交2,12,1订单记录1,2收藏1,1其他百度百度10,9Google5,4必应必应5,4豆瓣豆瓣4,45.2、非当前页：当位于中间页微博搜索页微博搜索页2,2新浪博客新浪博客4,4点点点点 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析5.2、非当前页：当位于中间页调查结果根据业务和场景的不同，非当前页的展示数量差异很大各家网站基本在不同的模块使用的数字不同之前一般在1-3之间，之

17、后一般在1-4之间多为外框+数字形式 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析5.2、非当前页：当位于中间页结论主要翻页中，建议使用2,3方案在不鼓励向后跳转的场景中，建议使用2,1方案简化翻页中，建议使用2,3方案hover时应与当前页、非当前页的普通样式有明显的区分 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析6、跳转功能跳转 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析苏宁苏宁淘宝淘宝天猫天猫京东京东亚马逊亚马逊1号店号店当当当当一淘一淘有3级列表有有无无有有有有店铺列表有有无

18、有评价无无无无有无无成交无无无订单记录有无无有无无无收藏有无无有有无其他百度百度无Google无必应必应无豆瓣豆瓣无6、跳转功能微博搜索页微博搜索页无新浪博客新浪博客无点点点点无 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析6、跳转功能调查结果淘宝系和当当采取根据场景决定是否使用京东、亚马逊在各场景均不使用；调查到的电商以外的竞品均不使用1号店均使用在浏览型页面和有需求跳转的页面（收藏）使用较多大部分提供Enter键翻页功能文案方面，大多数为 到第X页 确定；一淘为 向第X页 跳转 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品

19、分析6、跳转功能结论主要翻页中，使用跳转功能，但是建议逐渐减少此功能的使用，降低用户操作复杂度，符合互联网趋势其他情况不使用跳转功能提供Enter键触发翻页的功能文案方面个人偏向于一淘 向第X页 跳转一淘会将跳转的文本框里默认输入下一页的数字，建议推广也可以将数字替换为未展示的下一个数字（图例中也可以考虑替换成第8页） 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析7.1、尺寸WH2826W H 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析苏宁苏宁淘宝淘宝天猫天猫京东京东亚马逊亚马逊1号店号店当当当当一淘一淘25 263级列

20、表28 2637 4030 2821 3025 2625 2425 2525 26店铺列表21 2019 2226 2625 2725 2525 26评价28 2639 4030 2816 2422 2222 2327 25成交28 2639 4025 26订单记录27 2530 2821 2228 3021 2325 16收藏29 2229 2222 2222 2329 34其他7.1、尺寸 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析7.1、尺寸调查结果尺寸主要分大小两种情况：天猫的无间隙大框（37-40）样式，可点面积约为1500px2其他家的间隙分小

21、框（25-28）样式，可点面积约为650750px2 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析7.1、尺寸结论从互联网趋势和后期多终端方面考虑，建议可点尺寸增大大尺寸翻页定为 32x32 可点面积1024px2小尺寸翻页定位 26x26 可点面积676px2 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析7.2、间距M4M 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析苏宁苏宁淘宝淘宝天猫天猫京东京东亚马逊亚马逊1号店号店当当当当一淘一淘43级列表4-1245535店铺列表5310536

22、评价3-125565成交3-16订单记录328867收藏52553其他7.2、间距 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析7.2、间距调查结果尺寸主要分大小两种情况：天猫的无间距版本其他主要集中在：3px-8px，使用最多的为5px。 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析7.2、间距结论两种方案供讨论AB无间距5px 间距 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析8、对应高度H3086px 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析

23、苏宁苏宁淘宝淘宝天猫天猫京东京东亚马逊亚马逊1号店号店当当当当一淘一淘30863级列表90246010285329433799485676251748店铺列表1510209317121153评价33981989229418468777683043成交94612161653订单记录2500139933066681164收藏3162368045201450其他8、对应高度 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析8、对应高度调查结果3级列表浏览页范围在30009000之间，淘宝系一般6000以上，其他30004000。其他页面一般在10003000之间 20

24、13 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析8、对应高度结论浏览页面建议保持在30004000高度其他页面建议保持在10002000高度 2013 SUNING 易购 UED 规范管理部SUNING易购 UED目录竞品分析的目的竞品目标及方法竞品分析分析结论 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析组件设计 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析组件设计 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析组件设计翻页后定位到所对应的主体内容位置.跳转功

25、能获得焦点时自动全选数字内容超过一页时才显示分页 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析1、第一页结论主要翻页建议展示第一页链接，根据业务场景考虑第二页是否展示辅助翻页不使用第一页链接形式上使用固定第一页数字连接的方法在返回第一页的可能性非常小的情况下在希望用户注意力保持在当前页面及周边页面的情况下可以省略第一页链接 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析2、最后一页结论主要翻页在浏览页面，建议展示最后一页链接，建议使用固定最后一页链接的方式，减少相对于输入框+按钮的操作量辅助翻页不使用最后一页链接，但需要展示

26、总页数在一些不推荐翻到后面或者靠后的内容质量较差的场景下，取消最后一页的链接不建议使用总页数，请使用最后一页的数字表明总信息量在页面数量频繁变更的场景下，会不会导致页面重复计算总页数导致性能降低？ 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析3.1、上一页 下一页：固定存在？结论建议在浏览页面等翻页频率较高的页面固定上下页按钮，建立心理模型我的易购等翻页频率较低的页面使用按需展示的简洁方式，优化版面版式采用 上一页 页面 下一页 排列辅助翻页中，固定上下页按钮需要注意的是 避免出现下图的情况建议不满1页就取消展示分页讨论：在翻页所对应的内容作为页面主体时，可否将键盘“”“”作为上下页的快捷键。 2013 SUNING 易购 UED 规范管理部SUNING易购 UED竞品分析3.2、上一页 下一页：样式文案结论主要翻页建议统一使