交互细节分析——分页
交互细节分析——分页-移动阅读二维码

4) 用户心智模型分析

•   以Taobao搜索结果列表页为例:


用户输入关键词进行模糊搜索,然后出现相关结果列表,用户需要逐页翻看查找,此时“上一页”“下一页”使用最多,因此要设计的便于点击切换;或间隔两三页查看,因此样式上要区分查看过的页码和未查看过的;前几页浏览的几率最大,当翻到后面相关内容越来越少,用户会想要返回第一页,因此最好一直显示首页;页码数量不宜过长,不要导致用户视觉辨识困难;也不宜过短,以免给用户造成网站信息较少的错觉。

•   新浪微博信息列表翻页用户心智模型:

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

5) 总结

缺点是会打断用户阅读,影响用户关注的主要内容。
优点是条理清晰,便于分段查找信息,后台请求压力小;

与别的组件一样,分页不是单独存在的也要结合使用环境来交互设计。

二、 信息滚动翻页

 

GOOGLE图片

•    “无限滚动翻页”,当用户浏览到页面底部,自动刷新页面展示新的信息;

•    连续翻过很多页后,当再无内容可以展示时,自动出现关联信息按钮“查看更多信息”,引导用户去浏览其他相关信息;

•    或需要点击一下才可翻页;

•   页面过长时须提供“回到顶部”按钮;

更多贴近用户心智模型,方便阅读浏览。缺点是当一段信息不能及时刷新出来时,无法跳跃浏览其下面的信息。

三、 滚动条

1) 滚动条与横向分页优先级

当同时使用滚动条和翻页时,该如何设计。
翻页与滚动条的相辅相成,都是页面过长,为分段呈现内容的方法;

•   翻页在滚动条内部

设计猜想:滚动条到最底部方出现翻页。大概出自浏览器,滚动条内放页面翻页;

QQ邮箱

例如浏览器,是因为软件与其内容的嵌套关系;

•   有翻页也滚动条,滚动内容不宜过长(PC端产品)

设计猜想:滚动条需要拖动滑块浏览,如果滑块过短便更不容易操作;统计过IE、FF、Office等常用软件,一般滑块高度到8px时就不再缩小。当滑块高度只剩8px时,滚动条的拖动体验就相当的差。

•   移动端产品则貌似无限制

设计猜想:不需拖动鼠标,移动端上手动点击是最方便常用的操作;

2) 分页不一定是click跳转的

有上下翻页同时能快速拖动浏览不同页的信息,适用于内容能够粗略浏览的页面;

本文链接:http://www.mobileui.cn/interaction_detail_paging.html
本文标签: , ,