搞定长滚动网页设计的四个技巧

长滚动页面和无限滚动式的网页已经彻底流行开来了,甚至可以说它已经脱离趋势,成为了一种常规的设计,它们的流行并不是巧合。当用户向下滚动的时候页面的时候,所需要的内容与信息会自然的呈现出来,在此过程中通常不会涉及到额外的、多余的交互。


长滚动页面和无限滚动式的网页已经彻底流行开来了,甚至可以说它已经脱离趋势,成为了一种常规的设计,它们的流行并不是巧合。当用户向下滚动的时候页面的时候,所需要的内容与信息会自然的呈现出来,在此过程中通常不会涉及到额外的、多余的交互。

搞定长滚动网页设计的四个技巧

长滚动式的页面有着如下的优势:

  • 更为精简的导航
  • 更容易呈现故事,拥有吸引用户的潜质
  • 与移动端设备的良好兼容性

长滚动页面的流行和移动端设备的广泛普及有着直接的因果关系:屏幕越小,相同内容所需要展现的页面就越长。

移动端设备目前几乎全都是使用触摸屏,交互方式也是以触摸和手势为主。当然,长滚动式页面并非没有缺点,但是接下来的案例和最佳实践,将会帮你在设计长滚动页面的时候,尽量满足用户的期望。

一、使用视觉线索

通过视觉线索的暗示,让用户明白绝大多数的内容都位于首屏。

作为一个长滚动页面,想要让用户快速的明白它的运作方式,应该合理地运用元素来呈现它的原理。诸如向下的箭头或者“向下滚动”的文本都是可用性良好的视觉线索,告知用户只需要向下滚动便可。

搞定长滚动网页设计的四个技巧

向下的箭头在向用户暗示,绝大多数的内容都在下方。

二、让导航选项始终可见

长滚动页面对于用户最大的障碍在于,用户很容易在页面浏览过程中迷失。造成这种状况的原因很多,缺少导航以及导航元素的混乱都有可能损害浏览体验,让用户感到迷惑或者烦躁。

在创建长滚动页面的时候,请始终记住,用户是需要在浏览过程中保持“方向感”的,也就是说,需要导航来确定浏览的所在位置。对此,悬浮导航栏其实是一个很不错的解决方案,它会显示当前的位置,并且始终悬浮在屏幕特定的位置,让用户看见。

搞定长滚动网页设计的四个技巧

如果受限于屏幕空间,无法添加导航栏,那么你应该优先考虑跳转式的导航设计:

搞定长滚动网页设计的四个技巧

置于屏幕右侧的跳转链接

由于移动端屏幕的尺寸较小,固定的导航栏会占据屏幕较大的空间。所以,比较合理的设计是用户向下浏览的时候隐藏导航,而当用户打算回到顶部、向上浏览的时候,让导航栏展现。

搞定长滚动网页设计的四个技巧

Facebook 客户端当中,向下浏览的时候会隐藏导航,向上浏览则显现。

三、设计分页

决定你的页面长度的因素应该是你所提供的内容,而不是让页面长度来决定需要填充内容的多寡。

长滚动式的网页和其他的网页一样,它可以用来讲述故事,而它所呈现出来的故事应该更加平滑、线性。以往传统的页面当中,页面的框架下,不同的内容被折叠起来,隐藏在不同的链接和按钮后面,用户总能先看到整个页面的组织架构。而在长滚动页面当中,你需要的是将内容以不同的页面的形式呈现出来,随着用户滚动逐步展现。就像 Le Mugs 这个网站,每个分页都包含了信息,这些内容结合动画效果,随着滚动而触发,让整个长滚动网页显得非常有趣。

搞定长滚动网页设计的四个技巧

小贴士:尽量降低分页数量,这样能让整个导航更加简化。即使是长滚动式的页面,也不能够包含100多个分页吧?

四、结合动画效果

有趣的动画效果是让你的设计同用户产生情感联系的重要手段。长滚动页面的设计可以复杂也可以简单,好的交互能够让长滚动特效化腐朽为神奇,而动效则是最重要的粘合剂。动画效果让用户可以让整个网站显得更有吸引力,增加了用户探索过程中的乐趣,提升整体的体验。

比如,长滚动式页面当中能够加入视差滚动的动画特效,或者加入滚动触发式的动效,让滚动浏览本身成为一个有趣的东西,让用户知道接下来会发生什么。

搞定长滚动网页设计的四个技巧

五、用视差特效来讲故事

视差滚动通常是让前景和背景的元素之间产生速度差,从而营造出动态的视觉效果。视差的效果本身并不复杂,但是涉及到不同的元素,加上不同运动方式、速度带来的不同效果,视差滚动能够带来的效果各式各样,各不相同。当你使用长滚动页面来讲述故事的时候,中间适时适当地加入视差滚动特效,能够让整个叙事更加平滑自然,最重要的是,它会强化用户的参与感。

搞定长滚动网页设计的四个技巧

视差滚动能够创造出一种迷人的3D的视觉体验。

六、结语

在这个内容为王的时代,长滚动页面提供了更加沉浸式的用户体验,它让UI设计更好的服务于内容,并且将许多新的技术、思路都纳入到设计当中来,更加专注于用户的目标,让网页兼顾到内容的直接性、丰富性和多样性。

 

原文作者:Nick Babich

原文地址:uxplanet

译者:@陈子木

译文地址:http://www.uisdc.com/best-practices-for-long-scrolling

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/24775/

(0)
CatherineCatherine
上一篇 2017-05-09 15:58
下一篇 2017-05-09 17:50

相关推荐

  • 坚持梦想选择学UED设计,斩获13K月薪

    达内UI设计,中国UID课程标准制定者当你选择一家餐馆吃饭,你有没有想过是什么让你选择这家餐馆?刚进去的时候,餐馆给你的第一印象是什么?服务员够不够勤快体贴?你是否还想去这家餐馆吃?......这一系列发生在你生活中,你留意或不留意的问题, 就是一个完整的用户体验,这种用户体验设计也称作UED。小王是达内UED学员,经过四个月培训,成功成为一名UED设计师,月薪13k。四个月,她如何实现成功?我毕业后一直在一家公司做产品工作,由于一个偶...

    2018-01-31
  • 轮播图这样的交互方式,真的有效吗?

    轮播图(Carousels)这样的交互方式,在web时代似乎已经司空见惯。当一群人在会议室里争夺首屏焦点图的优先级时,使用轮播图,似乎能够不费吹灰之力地解决这场争端,没有人是输家。然而,轮播图这种方式真的有效吗?如何设计才能带给用户更好的体验呢?
    固定静止的banner图比自动切换的banner图能带来更高的有效点击率。如果你还不够了解你的用户,投放100%符合他们预期的内容几乎是不可能的,这时似乎在内容上给他们提供更多选择=更多点击率=更多销售额。这实际是行不通的。
    —— 电商专家 Depesh Mandalia

    2017-05-15
  • (干货)关于进度指示器,这一篇就够了!

    当前状态的可视性 是UI设计规范中最重要的一点之一,这样是为了最大程度的减少用户的紧张感。当用户在操作一个APP的时候,你需用告诉他们在操作后的一段时间内会发生什么事情,而不是让用户去猜想。对于这种反馈,…

    2016-04-03
  • 交互设计的未来!视觉设计师的末日!意念交互!

    家要知道随着科技发展迅猛,那些电影中见到的交互都慢慢变成现实,并且普及到我们的生活中。先看看我们到底历经了多少次交互的升华,为什么又说是交互设计的未来,视觉设计师的末日呢? 按键交互 诺基亚手机相信大…

    2015-11-17
  • 18个UI demo设计实例,深挖让用户愉悦的小惊喜

    文章分享了对话框及模态窗口、注册与登录页面、导航及菜单、滑动条和切换开关等UI设计实例,希望对大家有所启发。

    2017-05-11
  • 一个精美的手机的原型怎么产生的-第二集

    阿西录了下视屏尝试下最直接的方式 ,你看着阿西怎么做原型设计的。最简单方式往往最有效。 这段是:安卓手机,Axure手机框组件的视屏教程-2 在线播放! 第二集: 第一集下载地址:点我点我 第二集下载地址:点我点…

    交互设计 2014-09-06
  • 交互设计套路之——导航设计

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放Five Hundred MilesThe Shadows - Dance With The Shadows/The Sound Of The Shadows亲爱的小伙伴们好久不见啦你们的涂涂回来啦!!不知是时间太快还是指缝太粗总是留都留不住总之感谢小伙伴们的不离不弃话不多说赶快准备好小板凳和瓜子嗑着瓜子咱们就开聊吧下面开始分享app的套路之一导航设计一、导航的分类1.标签式导航...

    2018-02-11
  • 设计师要懂心理学の周边视觉还是中央视觉?

    人有两种视觉,中央视觉和周边视觉。中央视觉用来直视事物观察细节,而周边视觉则展现视野中的其他区域,也就是人眼能看到的周边区域。人可以用眼角的余光观察事物,这当然很有用,不过,堪萨斯州立大学最新研究表…

    2014-11-28
  • 【每天一小讲】便捷的用户体验才是命题简化之根本!(语音版)

    如何进行命题简化?来自盯盯学院00:0001:24命题简化是让产品或者服务的水平超出竞争对手一大截。根本是要让顾客用的特别方便,特别爽。命题简化瞄准的是优质市场,一般来说这个市场比较小。当然也有特例,比如苹果手机,既存在于高收益的优质市场,同时也创造出了一个全新的大规模市场。一个优秀的命题简化者根本不需要花多少钱做宣传,用户会主动向周围的人推荐,实现爆炸式增长。如何进行命题简化?产品设计几乎是命题简化的全部。目标就是让产品具有使用上的愉...

    2018-04-09
  • 基于数据的可用性研究

    小编语:这是一篇关于交互设计与可用性研究的古老的文章,今天小编翻出来给新交互师们看一下~ Thomas Baekdal在The Battle Between Usability and User-Experience中提到,可用性较高的产品并不一定带来好的用户体…

    2015-01-24