全国免费咨询热线:

400-611-9921

 
无限滚动的设计原则

2016-07-15

1156

1、保持导航栏可见当你设计无限滚动方案时,最好保持导航栏始终可见,使得用户能更快更容易的前往网站/App的不同区域。如果导航栏超出了一定范围后不再显示,那么用户将不得不在滚出范围之外时再往回滚才能重新看到...


1、保持导航栏可见

当你设计无限滚动方案时,最好保持导航栏始终可见,使得用户能更快更容易的前往网站/App的不同区域。如果导航栏超出了一定范围后不再显示,那么用户将不得不在滚出范围之外时再往回滚才能重新看到导航栏。

Facebook的顶部导航栏始终可见

仅对移动设备有效:因为移动设备屏幕更小,而导航栏会占用一定的屏幕空间。如果屏幕内容是滚动式的信息流,导航栏可以在用户向上滚动出新内容的时候隐藏掉,并在他们向下滚动试图重新返回到顶部的时候再显现出来。

Facebook依照滚动方向可以节省一部分屏幕空间

2、如果你有页脚的话可以使用一个“加载更多”按钮

无线滚动的方式阻碍了用户到达页脚位置。事实上这也正是这种设计的最主要的挑战之一:因为信息在用户接近底部的同时不断加载,用户只能在下一拨信息加载出来之前看到页脚一两秒钟,之后页脚就会被挤出视野。这就阻碍了用户到达页脚位置。

拿Bing图片来举例。其页脚位置包含诸如“了解更多”和“帮助”等这样的链接,但是实际上用户很难点击到这些链接,除非当前页面停止滚动,然而这可能会花一些时间。

Bing图片

如果你的网站/App有一个页脚,那对你很重要(或者对你的用户更为重要)的一条原则是,你应该使用“加载更多”这种方法。新的内容在你点击“加载更多”按钮之前不会自动加载。这种界面设计简单,又能够让用户更轻易的认识到加载更多内容的方法。

Instagram使用“加载更多”按钮来让用户能更容易的前往页脚位置,并不会迫使用户一次又一次的点击“加载更多”按钮。

Instagram使用一个“加载更多”按钮,使页脚保持可见

3、使用后退按钮将用户带回以前的位置

无线滚动方案有时被认为有一个最主要的可用性缺点是:滚动位置没有像一个状态一样被记录下来。如果用户顺着信息列表中某个位置点的链接前往了另一个页面,再去点击后退按钮,他们期望的是回到信息列表中的同一位置处。但是用户在列表中的位置点并没有被记录,这就意味着用户浏览器中的后退按钮将会带他们重新回到列表顶部位置。这样的做法之下,也就不用奇怪用户会失望于所谓的后退按钮并没有起到实质上的作用。

Safair中的后退按钮

Flickr使得浏览器的后退按钮触发的行为跟用户的期望一致。它记录用户在列表中滚动到的位置,因此用户点击后退按钮后会回到同一位置。

4、使添加书签功能成为可能

无线滚动的最为人诟病的缺点之一是你不可能将出现的信息添加进书签。将喜欢的结果创建一个简单的书签(或者“收藏”下来),待以后使用,这种做法对用户来讲会是一个非常强大的功能。如果你的网站/App值得,用户确实是会创建标签的。例如Pinterest,使用一个标签工具让用户保存下创造性的想法。

Pinterest用户可以收藏信息到标签或者进行分享

5、加载新内容的时候提供一个视觉反馈

当新的内容在加载的时候,用户需要一个清晰的指示告诉他们网站正在加载。你应该使用进度指示器告诉用户新内容正在加载并且很快就会出现在屏幕中。

因为加载新内容通常很快(它不应该花费超过2 – 10秒的时间),你可以使用一个环形动画告诉用户系统正在响应。

设计精细的动画(如Tumblr的加载指示器)告诉用户“我正在给你加载更多内容”

如果指示器中国包含一些文本说明告诉用户为何他们需要等待(如“加载评论中”),这对用户清晰的理解当前状态会有额外的帮助。

纺车动画

结论

如果无线滚动方案应用恰当,它能营造一种流畅一体的体验。希望你通过本文了解到该如何设计一个友好的无限滚动方案,这将帮助你建立完美的用户体验。


本文来自广州品牌网站建设网站设计制作公司-纵天科技 


标签:纵天,高端网站建设,企业网站建设,广州响应式网站



关注我们:在查找公众号中搜索:zomsky1688,或者扫描下方二维码快速关注。
广州市纵天信息科技有限公司公众号
热门标签
房地产网站建设汇景网站建设汇景网站开发汇景控股新能源网站开发新能源网站制作奥动新能源网站建设奥动官网网站改版石油公司网站建设广州网站搭建广州市网站制作生物网站建设珠海方正官网建设方正官网建设日本YKK官网建设骏丰频谱官网建设斯帝罗兰官网建设高新兴官网建设三盟科技官网建设赛立信官网建设福美控股官网建设德国商会官网建设皇朝家具官网建设皇朝定制官网建设百利官网建设广芯微官网建设物联网网站建设芯片网站建设网站开发日本YKK官网百利网站建设办公家具网站建设广州建站公司广州做网站营销型网站建设柏洪集团网站集团网站建设新元素网站教育网站德胜教育集团德国商会网站建设品牌网站建设赛立信网站建设智能家居网站运动网站建设贸易网站建设玩具网站建设化工网站建设日化网站建设家电网站建设音响网站建设物流网站建设旅游网站建设酒店网站建母婴网站建设珠宝网站建设钟表网站建设培训网站建设教育网站建设建材网站建设装饰网站建设机械网站建设美妆网站建设展览网站建设皮具网站建设五金网站建设仪器网站建设照明网站建设水电网站建设咨询网站建设法律网站建设家具网站建设家居网站建设服装网站建设服务网站建设食品网站建设金融网站建设餐饮网站建设环保网站建设政府网站建设科技网站建设地产网站建设医药网站建设数码网站建设营销型网站广州网站制作广州网站建设公司建网站广州网站设计公司建站优必思官网英文版网站定制网站广州网站建设中服装网站设计服装网站制作防火板网站大数据网站科技网站制作物联网网站人工智能网站防火板网站制作家居网站制作枕头网站电器网站制作电器网站家具网站家居网站网站建设公司​手机网站建设响应式网站企业官方网站网站策划官网改版企业网站建设网站制作网站设计建站公司网站建设公司企业网站网站建设费用网站建设广州企业网站建设企业建站官网建设广州建站广州网站建设纵天科技
点击展开
关于纵天
广州市纵天信息科技有限公司成立于2008年,是中国领先的整合式互联网应用服务商。12年专业历程,坚持以科技创新为先导的网络服务,服务超过8000+知名品牌与创新客户,涉及网站设计、APP应用开发、微信开发、平面设计、视频拍摄、互联网整合营销等多个领域。
微信咨询
官方微信
联系方式

地址1:广州市天河区珠江新城邦华环球广场16F

地址2:杭州市滨江区滨安路1190号智汇中心B308

业务 QQ: 3561401262

E-mail: sales@zomsky.com

电话咨询 在线咨询 QQ咨询 官方微信
官方微信
TOP

立即与纵天项目顾问通话

400-611-9921

您也可以咨询我们的在线客服或预约资深顾问

信息保护中,请放心填写
关闭