交互细节分析,网页滚动条

2019-11-08 作者:互联网   |   浏览(90)

Google尝试将浏览器的网址栏取消,苹果公司在OS X Lion系统中默认隐藏进度条,CSS(层叠样式表)的创始人维姆莱(Håkon Wium Lie)甚至希望完全取消滚动条,大家这是怎么了?

Vonnie | 2012-02-04 |交互设计

图片 1

说说目前常用的三种分类显示信息方法:

有人可能觉得维姆莱想要取消滚动条一定是疯了,毕竟改变用户操作网页的习惯是相当有挑战性的。维姆莱之所以支持此行为,有两个原因:网页内容无法恰好适合浏览器的窗口,顶部或底部的图片可能会被浏览器截断脖子;而且,打印网页会比较麻烦。维姆莱试图用CSS生成的分页媒体内容,也就是用页码翻页来取代滚动条。类似于苹果的iBooks应用的呈现方式、或者PPT幻灯片的动画切换,他们将内容完整的呈现在整个页面上,就像一本翻开的书,相比滚动条而言更加吸引人。

常规翻页          信息滚动翻页         滚动条

用翻页取代滚动条的方法可能存在一些问题。首先,用户无法快速浏览整体内容,滚动条可以让用户快速浏览网页内容筛选有效信息,浏览纸质书本是件很容易的事,但用翻页的方法浏览电子书就不那么容易了。另外,用户更希望在一个连续的流动的文本界面上看到自己搜索的全部内容。

前者是横向翻页方式,后两者是纵向的信息翻页。分页作为很小的一个组件,大多数网站都不会花费什么精力去设计,设计也大同小异,用户已经使用习惯学习成本为0,但如果能够在细节上做的更细致贴心一些,用户的使用体验会有所提升。

不过可能上面的问题并不是真的问题,因为维姆莱的方法仅仅改变的是网页排版,网页内容依然是个整体。把网页浏览改为翻页的形式实际上只是将纵向滚动变成了横向滚动。

一、 先来看常规翻页

“页码跳转”的浏览方式在平板电脑表现不错,但是想要在普通电脑上有所突破还有很多问题,至少首先要解决一个路径依赖的问题。作为用户,你更倾向于哪种浏览方式?

1) 组成结构

关于维姆莱的主张可以参考这个视频:

信息及图片来源: dvice

• 上页+页码+下页

原文作者对维姆莱的主张存在一些误解,相信看过视频的同学都能有所体会。感谢果壳网友“猪了个去”做出了澄清,有兴趣了解更多的同学可以阅读他的文章:

误解粉碎机:翻页浏览和滚动条 被虚构的恩怨情仇

•  跳转到__页/第__页”;

•  确认”按钮;

•  支持键盘操作;

2) 使用情景

当网页内容较多、不能在限定区域内显示完全时;

为了方便用户在多个页面间跳转和快速定位(尤其是按顺序翻页),通过翻页设计提供多个页面间的导航。

在电商网站3级页、搜索结果页面等信息量大的页面是很重要的。

•   分页的内容是什么类型?

•   页面数量有多少?

•   查看最多的是哪些页面?

•    手动全部翻一遍的几率

•   是否会不按顺序翻页,为什么?

•   是否会查看已翻过的翻页?

•   翻页是否在列表顶部和底部都出现?

•   “最后一页”是否一定要有?

•   列表顶部什么情况下有翻页?

按照用户心理模型,浏览邮箱内容时是反复浏览型,且页面较长,此时需要在顶部添加翻页,但电商网站搜索结果页和新浪微博的用户是在浏览到页面底部时才会有翻页动作,因此不必在顶部放翻页。

•   是否可以mouseover就显示页面内容?什么时候可以?

设计前考虑完以上问题,针对情况进行取舍设计。

3) 交互分析

•   Google翻页

搜索结果首次只提供10个页码;

设计猜想:google开发者认为一般用户在这10页内就能找到想要的内容。

点击任何一页码继续浏览,发现后续提供的页码是:当前页+9;

设计猜想:当用户往下点击页码时,google开发者认为前10页内容不能满足用户,于是将搜索范围放大。

但最多提供20个页码;

设计猜想:但考虑到网页宽度还是不能继续无限制增加页码个数,于是设定最多一次提供20个页码。

•   Baidu翻页

始终有第”1“页,中间用”…“表示未显示的页码;

设计猜想:用户翻到后面页码也找不到想要的内容时,会返回第一页重新查找,此时第“1”页是home的作用。

选中页码和mouseover页码样式始终在一个位置不变,不需移动鼠标就可点击下一页,而后页码自动替换状态;

设计猜想:瞄准页码点击较困难,可以减少用户瞄准位置的次数。但没有做完美,用户每刷新一个页面,还是要滚动浏览器条到下方瞄准页码位置。这个微小的友好交互可以运用到轮播图设计中,减少鼠标瞄准操作。

但也最多提供20个页码;

•   Sina微博小分页

滚动翻页与翻页的结合使用;

上页与下页放在一起更便于点击;

通常情况下用户按“下一页”的情况最多,那么上页样式可以更简单些;

4) 用户心智模型分析

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

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

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

本文由奥门金沙网址发布于互联网,转载请注明出处:交互细节分析,网页滚动条

关键词:

  • 上一篇:没有了
  • 下一篇:没有了