196
屏幕越小,卷轴就越长。
这一真理解释了长期滚动的兴起:移动浏览超越桌面浏览小屏幕的流行促使设计师重新思考它们的过时。“褶皱上方“心态。
长滚动为讲故事、导航、创意视觉和更沉浸式的整体体验创造了许多新的机会。因此,我们发现一些共同的技术和战略开始出现:
·
视差图形-
· 借鉴电子游戏行业,这种策略,移动背景在不同的速度创造了3D效果和刺激的视觉效果,是更愉快的互动。
·
屏幕作为页面-
· 在单个页面上组织信息的一种重要方式,通常通过改变背景,将概念区分为屏幕大小的部分,从而使站点更有凝聚力。
·
粘性导航-
· 长滚动的最大缺点之一是使用户迷失方向,因此,拥有一个始终停留在屏幕上相同位置的导航系统可以为用户提供控制和安全,以防止迷路。
·
动画互动-
· 滚动触发的动画增加了一个有趣的互动水平,吸引用户到一个点,他们喜欢滚动,无论内容。
·
非典型方向-
· 由于最近的趋势,长滚动,网站可以把自己的滚动左,右,或上。
·
指标-
· 有些用户不会认为自己会滚动,所以像“向下滚动”或另一个指示符这样的快速指令避免了混淆-只需确保将它们与其他链接或调用区分开来。
如上文所述2015年和2016年网页设计趋势这些技术使得下面的站点成为了长滚动站点中最好的例子。
作为打破逐页模式的先驱之一,twitter仍然是当今最优秀、最受认可的长滚动网站之一。这种格式允许按时间顺序排列推文,同时仍然看起来新的和新鲜的。
定州企业网站设计对于社交媒体网站和其他拥有用户生成内容的网站来说,长滚动不仅是一种时尚的选择,也是一种实用的选择。永无止境从无限滚动加载新内容允许组织其他混乱的内容。
新西兰慈善组织“心童”全力以赴。该长滚动网站结合动画(一些滚动激活),惊人的颜色使用,尖锐的图像,和光标的交互性,以推广其救生信息。
请注意着陆屏幕上不显眼的“滚动”图标和指示,以及始终位于顶部的粘性动作呼叫。
长滚动最具创造性的用途之一是SBS的船就像一本互动小说。当新的内容出现时,持续的动画和巧妙的运动和角度的使用会吸引用户/读者进入传统的、停滞不前的滚动站点无法比拟的沉浸体验。
这个分支站点MCA莱斯特演示一种表示滚动而不实际滚动的平滑方法。左边的灰色头盔垂直堆叠,表示用户只需向下滚动即可看到更多内容。
另一种策略是巧妙的动画呈现每一个新的屏幕,使网站有点长滚动/逐页导航混合。
自然风格的长滚动,不同的部分和概念是内在地结合在一个连续的流,使他们伟大的信息图形。
正如你的大脑渴望信息图形的十三个原因所显示的那样,单一的页面格式允许设计者以更小的、可消化的位元流畅地呈现大量信息。
此外,滚动激活的动画,如眼睛移动与滚动以及背景动画,否定了有时枯燥的方面的学习信息。
另一个SBS站点,俊子故事将长卷的故事和信息图形混合起来,讲述幸存者在广岛爆炸中幸存下来的令人不寒而栗的故事。
由于庄重的性质,该网站保持了传统的格式,纯文本与图形点缀。然而,该网站保留了一种新的和现代的感觉,滚动激活的图像,如上面的金属头盔,淡入视野中的边缘。
这些展示了有关广岛的文物和事实信息图-比如爆炸半径的地图-可以点击获取更多细节。
Podio的Beagle工具站点设置一个逐页导航到长滚动格式。
其价值主张中的每一点都有自己的屏幕/页面,然而,所有这些都可以通过一个线性滚动来访问,并通过将用户注意力从一个屏幕转移到另一个屏幕的动画结合在一起,例如从屏幕移动到屏幕上面的一张纸。
定州企业网站设计就像上面的比格,转轮利用长滚动来逐点显示它的价值主张-尽管是针对单一产品。该网站使用动画,如淡出和幻灯片,以保持内容的吸引力。
并不是所有的长滚动网站都是浮华的。伦敦酒吧国王的武器使用简单的背景分割,没有花哨的动画转换之间的屏幕。
然而,视差运动在背景上,手机和额外的游标动画(更不用说美学布局)防止网站显得乏味。
与之形成对比的是,墙冰淇淋与空气清新剂的合作是非常浮华的。除了标志性的冰棒图片外,这个长滚动网站还在屏幕之间提供了有趣的动画,值得一看。
注意左边站点的粘性导航和底部的进度栏(这会改变颜色)。
披头士乐队的长滚动网站为长滚动提供了一些实验功能,包括自动播放视频和水平图像旋转木马。
这个西雅图太空针站是典型滚动方向的完美例子。在太空针(及更远)上移动的借口下,用户向上滚动而不是向下滚动是有意义的。
正如上面的站点所证明的,长滚动最成功的应用是因为它的实际好处,而不是出现趋势的一部分。
长滚动有许多有用的优点:统一杂乱无章的信息、交互性、导航自由、令人惊叹的视觉效果、显示广泛的内容(无限滚动)、线性讲故事等等。然而,考虑到诸如迷失方向和偶尔加载时间等缺点,您不应该轻率地切换。了解最好的技术,以最大限度地利用它。
最新文章
随机推荐