网页设计滚动显示 第1篇
撇开优点和缺点不谈,某些类型的网站更适合长滚动设计。更长的滚动网站更适合……
社交媒体网站带有不断和广泛的用户生成的内容,可以很好的进行长滚动设计(事实上,早在几年前,Facebook和Twitter就帮助推广了这项技术)。另一方面,像电子商务这样的目标导向的网站——需要连贯的导航——更趋向于保守的页面长度。
Photo credit: Amazon
处于中间处境的是像Etsy这样的网站:一个用户生成产品的网上商店,它使用混合解决方案:几页所谓的”无限”滚动,最后以”显示更多”的号召性用语结束。
Photo credits: Etsy
与所有 Web 设计趋势一样,不要仅仅因为看到其他网站遵循该模式而使用较长的滚动。确保您你的网站符合我们讨论的标准,否则实际上你可能会体验到更差的性能。
滚动最佳实践
长滚动、视差效应和类似机制在设计领域中仍然比较新(约4年历史),但仍从试错经验中可以获取一些基本的最佳实践。
从 2015 和 2016 的 Web 设计趋势总结,以下是成功实现长滚动的一些日常技巧。
Photo credits: MCaleicester
滚动可能是一把双刃剑,所以坚持使用它的建议用法,以避免它弊大于利。
未来的无页面设计
长滚动网站不能适应所有的情况。尽管我们已经看到流行设备上屏幕大小的起伏和流动(或增加和减少),但在可预见的将来,屏幕尺寸很小。小屏幕需要更多的滚动。
事实上,从长滚动到 “无页面” 的设计的过渡已经开始,一些设计师(如数字远程技术设计师)甚至相信这是网络的未来。随着网站不断摆脱用户思考和使用信息的一些限制,设计人员必须更彻底地思考在不同环境中创建内容的最佳方式。
Photo credits: Photohigh
交互设计是长滚动网站设计的基础。 如果用户喜欢这个界面,并且发现它直观且有趣,那么他们就不会真正关注滚动的长度(只要它不是夸张地很长)。
你并不总是需要缩短滚动长度 – 你还可以让滚动过程更有趣。
看完这篇文章,你开始对滚动设计感兴趣了吧?那么就快去试一试啦~
产品经理和UI设计师们都可以使用墨刀,很方便地对产品进行滚动设计:把鼠标放在页面最底部区域,拖动即可调整页面长度。
本文由墨刀翻译自 Jerry Cao 的The New Rules for Scrolling in Web Design。
网页设计滚动显示 第2篇
Proud and Torn()是一个关于匈牙利历史的网站,使用水平滚动来突出它所涵盖的不同时代。
回顾我们之前讨论过的艺术网页设计和艺术史——我们使用水平滚动作为另一种让人们保持活跃和参与的方式。
我们这边有给出一个关于水平滚动的教程() 将让能设计出属于自己的网站。
Pudding是Ali Wong的喜剧作品原创网站,上面有关于如何设计“粘性定位”的教程()。粘性定位是将一个元素暂时放在一个设计中,引起人们的注意,继续滚动一会儿,它就会固定在页面的某一个位置。我们都是上面那份教程的粉丝,它以一种容易理解的方式分解了这个过程,这些都是通过滚动来实现的效果。
(译者注:sticky 是css position中的一种新增属性,相当于relative和fixed的结合体。这个属性的表现就是现实中你见到的吸附效果。)
我们刚才讨论了粘性定位,那做出一个粘性侧边栏效果又会如何呢?
滚动一段时间后,侧边栏就会固定在某一个位置,用这种效果来做导航实在是非常好用。
这里也提供一个小教程给大家作为参考,以方便在自己的项目中使用这种效果:
网页设计滚动显示 第3篇
Ali Wong Structure of Stand-Up Comedy() 是对Ali Wong最新脱口秀《Baby Cobra》的分析,它分析节目中的每一个瞬间,每一个笑话,以显示最大的笑点到底在哪里。这是一个关于时间和节奏如何能够带来更好效果的有趣研究,同时也让我们了解到Ali Wong为什么能成为如此出色的作家和演员。
我们已经了解了如何使用不同滚动效果来讲述不同类型的故事,以及其中包含的一些设计方法。为了帮助大家能做出自己的滚动视差效果,我收集了一些工具来帮助你。如果想在设计工作时进行尝试,Webflow()可能是最好的选择。
滚动时以不同的速度移动元素是创建视差的一种方式。视差是一个简单的效果,在故事中创造多维度的动画,促使人们继续阅读。
在“网页设计和艺术史”的网页中使用了视差效果来展现这些几何图形。
打开这个教程() 来开始制作这个效果。
在设计中使用滚动触发的进度条是一种向人们展示所处位置并不断推动他们前进的方式。这个蓝色进度条固定在页面的顶部,平滑的动画从0扩展到100%。它提升了阅读体验,也成为了更好的导航。
当一个设计有太多的静态内容时,阅读起来会很累。在滚动模式下,长篇故事讲述的过程中,动画提供了一个很好的休息时间,随着内容的淡入淡出,在阅读体验上做到了最好。
这种效果可以应用于文本或者视觉效果,我们在Graphic design archive中使用这种效果,标志着一个新的内容块的开始。
我们在这里提供了一份教程() 帮助大家理解这种效果的实现方法。
当页面上有一个闲置的设计元素时,比如标题,为什么不给它一些活力呢?水平动画唤醒了这些沉睡的设计元素,给予它们新的生命。以上面给出的例子来说明,水平移动标志着故事的开始,“Let\’s go outside”更具有吸引力。
这里我们也提供了一份教程().