高端响应式模板免费下载

响应式网页设计、开放源代码、永久使用、不限域名、不限使用次数

什么是响应式网页设计?

2024年滚动网页设计(实用3篇)

滚动网页设计 第1篇

正如《2015-2016 年网页设计趋势》指南中所解释的,长滚动与基于卡片的设计一起演变。结合后,这些技术就可以为用户提供源源不断的小容量内容(这非常适合web,尤其是移动体验)。

此外,把内容都集中在一屏里而不是使用长滚动的原则被认为是一种迷信。根据实际研究,事实是用户真的不介意滚动。当然,这个迷信之所以流行,部分原因在于,在Javascript和CSS的进步之后,滚动只被认为是一种有意义的设计模式。 在此之前,通过视觉讲故事使滚动 _有趣_ 要困难得多。可以想象,包含文本的长页(偶尔被图像打断)并不是一个非常吸引人的 UI 布局。

但是一旦你尝试使用长滚动作为画布来展示开头,中间和结尾(通过图形,动画,图标等),那么你就会开始看到它在吸引用户注意力方面具有电影般的力量。

事实上,一些混合模式正在成为滚动的最新趋势。 例如,我们在自己的UXPin游览页面上使用的 “原地固定滚动” 创建了传统长滚动网站的相同交互式体验,而无需垂直拉伸网站。

滚动网页设计 第2篇

长滚动、视差效应和类似机制在设计领域中仍然比较新(约4年历史),但仍从试错经验中可以获取一些基本的最佳实践。

从 2015 和 2016 的 Web 设计趋势总结,以下是成功实现长滚动的一些日常技巧。

不用担心短滚动和长滚动交替使用。 让内容决定滚动长度,而不是反过来。 使用短滚动主页和长滚动着陆页(如产品,旅游等)非常好(并且非常受欢迎)。

考虑粘性导航,以便用户始终可以快速_返回_或从滚动中的元素跳转到另一个元素。

将滚动与设计元素或工具结合,以便每个用户都能快速了解网站的工作方式。箭头、动画按钮或类似的用户界面工具是帮助用户确定下一步操作的有趣且简单的方法。有些网站甚至包含一个小按钮,其中包含_滚动更多_或_开始_等说明,来提高页面的导航性。

不要过分。长滚动并不意味着 500 页的连续内容 - 长滚动也可以很简单。讲述你的故事,然后适可而止,不要喋喋不休 。下面的 Deca 网站只使用了几页长的滚动。

专注于用户目标,并接受即使是无限滚动网站也不是真正无穷无尽的。 创建长滚动网站时,要了解用户仍需要方向感(当前位置)和导航(其他可能的路径)。

包括有助于在滚动中定位用户的视觉提示,例如左下方用于“七种类型的摩托车骑手”站点的头盔图标。

Photo credits: MCaleicester

滚动可能是一把双刃剑,所以坚持使用它的建议用法,以避免它弊大于利。

滚动网页设计 第3篇

长滚动网站不能适应所有的情况。尽管我们已经看到流行设备上屏幕大小的起伏和流动(或增加和减少),但在可预见的将来,屏幕尺寸很小。小屏幕需要更多的滚动。

事实上,从长滚动到 _无页面_ 的设计的过渡已经开始,一些设计师(如数字远程技术设计师)甚至相信这是网络的未来。随着网站不断摆脱用户思考和使用信息的一些限制,设计人员必须更彻底地思考在不同环境中创建内容的最佳方式。

交互设计是长滚动网站设计的基础。 如果用户喜欢这个界面,并且发现它直观且有趣,那么他们就不会真正关注滚动的长度(只要它不是夸张地很长)。

你并不总是需要缩短滚动长度 - 你还可以让滚动过程更有趣。

看完这篇文章,你开始对滚动设计感兴趣了吧?那么就快去试一试啦~

产品经理和UI设计师们都可以使用墨刀,很方便地对产品进行滚动设计:把鼠标放在页面最底部区域,拖动即可调整页面长度。

本文由墨刀翻译自 Jerry Cao 的The New Rules for Scrolling in Web Design。

猜你喜欢