深圳企业网站制作：网站设计中滚动的新规则

曾经在网站设计了一个完整的复兴禁忌最流行的技术之一,近年来随着用户正在寻找一个新的爱和赞赏地点滚动是非常必要的。 脱落的旧观念,滚动是改头换面作为核心交互设计元素——这也意味着设计师需要学习新规则。

图片来源: Fitbit

在这篇文章中,我们将探索滚动的重生,讨论一些利弊,列出一些小贴士的技术。

为什么滚动是重生

简单的答案是移动设备。

自从 手机用户已超过桌面用户 ,UI设计人员都有相应的调整。 和这么多的用户在小屏幕上,滚动是变得越来越有必要:屏幕越小,滚动的时间越长。

但也有其他因素。 接入高速互联网可以在更多的地方,使滚动更快的方式获取信息,而不是从页面点击。 社交媒体网站也助长了国力的增强技术:用户生成内容的滚动自然地适应他们的财富。

导游解释说 网页设计趋势2015 & 2016 长和滚动发展 基于设计 。 结合时,让你的技术为用户提供无穷无尽的的内容(这是适合web特别是移动体验)。

与 明信片 你可以在线创建和编辑电子邮件模板没有任何编程技能! 包括100多个组件来帮助您创建自定义邮件模板的比以往任何时候都要快。 现在试一试 免费!

图片来源: Upworthy

另外,阻碍滚动的折叠线以上学说是现在被认为是神话。 真相, 根据实际研究 是,用户真的不介意。 的干扰的做法都是输给了距离沿着甚至和平滑滚动。

神话成为受欢迎的部分原因,当然,是滚动才认真考虑作为一个先进的Javascript和CSS后故意设计模式。 在此之前,它是更加困难使滚动通过视觉故事的“性感”。 正如你想象的,很长的页面的文本(偶尔打断了图片)并不是一个非常迷人的UI布局。

图片来源: 这艘船

但一旦你开始接近长期滚动画布,说明开始,中间,和结束(通过图形、动画、图标等),然后你开始看到它是片状的力量捕获用户的关注。

事实上,一些混合模式成为最新的趋势在滚动。 例如,我们使用的“固定的滚动”靠自己UXPin 访问页面创建相同的互动体验传统的长卷垂直网站网站不做伸展运动。

滚动是正确的吗?

每个设计技术和工具,有些人爱这个概念,讨厌它的人。 在大多数情况下,任何一方在本质上是对还是错; 这就是为什么重要的是要考虑所有因素之前解决这样的一个项目。

滚动的优点:

• 鼓励互动——永远不变的刺激变化的元素,它可以是一个有趣的讲故事的方法,鼓励用户交互,特别是 tastefully-executed视差滚动 。

• 快长滚动速度比点击是一个复杂的导航路径,不慢下来或限制用户体验。 中描述的交互设计的最佳实践 , 感知 时间往往比实际的时间更重要。

• 建议用户, 易用性促进互动,增加现场时间。 特别是无限滚动的网站,在那里你可以帮助用户发现相关内容,他们甚至可能没有想到。

• 响应设计, 页面设计可以在设备有不同的屏幕尺寸和功能复杂,但滚动有助于简化的差异。

• 姿态控制, 向下滚动似乎有机联系联系,因为刷容易得多比重复水龙头在屏幕的不同区域。 用户(特别是移动)通常接受这是一个显示信息的方法。

• 可爱的设计, 几个点击会导致更快的交互更应用或游戏的用户体验。

图片来源: 鲍尔

滚动的缺点:

• 顽固的用户, 别介意,为什么有些用户总是抗拒改变。 尽管如此,这项技术是现在普遍的(特别是在移动体验),这可能是有把握地说,大部分的用户都习惯了技术。

• SEO的缺点- 只有一页对网站的搜索引擎优化可能有负面影响。 (学习如何减少这些SEO缺点,看看这个 Moz视差滚动块 和 这对无限滚动Quicksprout块 )。

• 迷茫, 滚动和内容之间的分离会让用户混淆或脱节的。

• 导航困难- 会尴尬的“回去”之前的页面上的内容。 为了应对这一问题,你可以创建一个持久的顶部导航,每一项是固定在一个页面部分

• 网站的速度, 大块的内容,如视频或图像画廊可能会减慢网站的速度,尤其是parallax-scrolling网站,依靠Javascript和jQuery(查看 本教程 学习如何创建视差网站没有网站速度慢)。

• 没有页脚- - - - - - infinite-scrolling网站,我们推荐一个精益“粘性”页脚,这样你就不会牺牲适航性。 否则,用户可能被缺乏进一步导航页面的底部。

优点和缺点,长期滚动技术比别人更适合某些类型的网站。 不再滚动网站和最适合的内容和设计计划,…

• …要包括很大一部分移动交通(大多数用户)

• …包括频繁的更新或新内容(如博客)

• …有很多信息在一个奇异的方式理解(比如一个信息图表)

• …不含富媒体,因为排水这可能会导致加载时间

社会媒体网站,持续和广泛的用户生成内容,做好长期滚动(事实上,Facebook和Twitter帮助推广这项技术年前)。 另一方面,面向目标的网站更喜欢电子商务——要求一致的导航——往往对保守的页面长度。

图片来源: 亚马逊

中间地带将是一个网站像Etsy,在线商店为用户创造的产品,它使用一种混合解决方案:所谓的“无限”滚动几页,结束的文字-动作”给我。”

照片学分: Etsy

像所有的网页设计趋势,不使用长卷轴仅仅因为你见过其他网站遵循的模式。 确保你的网站符合我们讨论的标准,否则你可能会 体验更差的性能 。

滚动的最佳实践

长的滚动,视差效果和类似的机制仍然是相对较新的领域的设计(~ 4年),但仍然有一些基本的试错了一些基本的最佳实践。

总结了从 网页设计趋势2015 & 2016 ,这里有一些日常小贴士成功实施滚动。

1. 不要害怕替代长与短滚动。 让滚动的长度决定的内容,而不是相反。 很好(和非常流行)使用short-scroll主页和长卷着陆页面(如产品、旅游等)。

2. 考虑粘性的导航,比如使用的 自由放养的设计 ,这样用户可以迅速“回到”或从元素元素滚动反弹。

照片学分: 自由放养的设计

3. 建议与设计元素滚动或工具,每个用户可以快速查看这个网站是如何运作的。 箭头,动画按钮或相似的用户界面工具很有趣和简单的方法来帮助用户确定下一步做什么。 一些网站甚至包括一个小按钮指示“滚动的更多”或“开始”来帮助导航站点与非常规技术。

4. 明确区分滚动点击或水龙头和其他的号角,这样你的网站得到所需的交互。

5. 做一些研究,看看用户与之交互的滚动。 在谷歌分析,例如,你可以打开“页面分析”选项卡,查看有多少人点击以下褶皱。 基于数据,然后可以根据需要调整设计。

6. 不要走极端。 长滚动并不意味着500页的连续的内容——很长也可以简单的滚动。 告诉你的故事,然后停止。 不要强迫它。 十 下面的使用只有几页的滚动。

照片学分: Decasrl

7. 关注你的用户目标和接受,甚至无限滚动网站并不是无止境的。 当创建longer-scrolling网站,了解用户仍然需要一种取向(他们当前的位置)和导航(其他可能的路径)。

8. 包括东方视觉线索,帮助用户在滚动,如头盔使用左手边的图标” 七种类型的摩托车骑手 “下面的网站。

照片学分: MCaleicester

滚动可以是一把双刃剑,所以坚持其推荐使用,以避免它弊大于利。

Pageless未来的设计

长滚动网站是不会去任何地方。 当我们看到起伏(或增加和减少)在受欢迎的设备屏幕的大小,小的在这里在可预见的未来。 和小屏幕需要更多的滚动。

实际上,从long-scrolling过渡到“pageless”设计已经开始,和一些设计师(像那些数字心灵感应)甚至认为它是 未来的网络 。 随着网站继续流的一些约束用户如何思考和消费信息,设计师必须更彻底思考在不同环境中创建内容的最佳方式。

照片学分: Photohigh

交互设计 是长滚动网站设计的基础。 如果用户界面和直观的找到它和有趣的使用,那么他们不会介意滚动的长度(只要不是残酷地长)。

你并不总是需要缩短线——你可以等待更有趣。

如果你发现这篇文章有用,看看免费的电子书 网页设计趋势2015 & 2016 。 除了long-scrolling最佳实践之外,您还将得到小贴士9其他成功的网页设计的趋势。 的技术说明和160 +分析例子从一些最好的网站。