说明：喜欢翻译国外交互设计经验设计网站的优秀文章案例。仅供相互学习和讨论。翻译受版权保护。如有错误还请指正~前言随着社交网络的流行，无限滚动刷新feed流已经成为探索更多内容的必要交互方式，就像Flickr和Facebook所做的那样。用户愿意浏览大量的内容来寻找自己感兴趣的内容。用户会先关注内容，然后才是其他，无限滚动的形式让用户能够找到自己想要的内容。此外，无限滚动的线性结构使得网页编辑器易于操作。随着用户向下滚动页面，不同的布局可以与各种微动画效果相结合，营造出一种让用户想知道“接下来会发生什么”的氛围。船就是一个很好的例子。无限滚动增强了故事并创建了一种新的视觉副本布局形式。无线滚动形式为设计师打开了一扇新的大门，但它也有缺点。它要求设计师关注内容、导航和动画。如果无线滚动是你唯一的选择，那么最好牢记以下几点：1.引导用户滚动2.调整导航形式以适应滚动3.使用动画增强滚动形式1.引导用户滚动，尽管用户通常在页面加载完成后，开始向下滚动查看。首屏的内容还是很重要的——首屏的内容会造成第一印象，让用户对后续内容的质量有相应的期待。只有当首屏的内容足够吸引人时，用户才会愿意滚动查看更多内容。无论是在手机、平板电脑还是PC上都是如此：只有当用户认为值得滚动时才会进行滚动。1-1。为用户提供有趣的内容1-2。避免错误的底部页面显示1-1。给用户有趣的内容——用户不需要支付任何运营成本的内容才是让用户向下滚动的动力。如果要保证用户下拉看到更多内容，就必须提供用户感兴趣的内容。因此，最吸引人的内容必须放在首屏：好的页面介绍。一个好的页面介绍是内容的缩影，帮助用户理解这个页面是干什么的。有趣而真实的内容。真实丰富的内容可以吸引用户不断生成有吸引力的图片（内容和质量）用户非常关注包含他们感兴趣的相关信息的图片。Tips：使用一个功能叫折叠在哪里？1-2。避免错误的底部页面显示——首屏的内容会影响其余的内容，首屏的内容应该提醒用户滚动后有更多有价值的内容。当你错误地显示了首页的底部，或者当显示了首屏的内容时，下面似乎没有更多的内容，那么用户就没有理由相信下面还有更多的内容，所以用户很少滚动。避免错误的主页底部显示实际上非常简单——只需在视觉上提示用户下面有更多信息。例如，可以在第一个屏幕的末尾剪裁网格或卡片布局，以告诉用户滚动到哪里以及还有更多内容，或者您??可以只告诉用户他们可以滚动。一个明显的提示，比如指向屏幕下方的箭头或者“向下滑动查看更多”的文案，都可以清楚地提醒用户下面还有更多内容。2.调整导航形式以适应滚动导航对网站的用户体验有好有坏的影响。一个好的导航是至关重要的，因为用户必须能够快速定位他们在页面上的位置，并且知道如何到达他们想要的页面。2-1.使用固定导航（栏）2-2。考虑使用导航按钮2-3。确保后退按钮易于使用2-1。使用固定的导航（栏）——长时间滚动会使导航变得笨重：如果用户在页面深处滚动后看不到导航栏，那么他们必须一直滚动到页面顶部。一个非常直接的解决方案是固定导航栏：它使导航栏始终可见，从而使用户可以轻松快速地导航到不同的页面或区域。但是，如果您想节省有限的屏幕空间，您可以在视图更多滚动方向隐藏导航栏，并使其在相反方向可用。这种方式在移动端尤其适用：由于手机屏幕比平板、笔记本、PC小很多，所以导航栏会占据相当一部分的屏幕空间。如果屏幕显示滚动瀑布，则可以在用户滚动查看新内容时隐藏导航栏，并在用户准备返回顶部时显示导航栏。2-2。考虑使用导航按钮——无限滚动的另一个常见问题是它会导致用户迷失方向：用户可能很难在页面上找到之前查看过的内容。这个问题（用户迷路）在页面内容被分成许多同样重要的部分或块时（比如一个很长的用户引导页面）尤为明显。使用页面快速导航按钮可以解决这个问题。页面定位其实就是一系列的页内链接，可以让用户快速跳转到页面上的相关内容。它实际上与内容目录几乎相同。例如，在Tumblr上，用户可以直接跳到页面底部，也可以在迷路时跳回顶部。页面内容分为不同的块，容易区分，并在屏幕左侧固定了大锚点。2-3。确保后退按钮易于使用——当用户打开页面中的链接（无需跳转）然后单击后退按钮时，他们希望能够返回到上一页的相同位置，但如果链接在如果页面位置没有保留，那么使用浏览器的后退按钮会将位置重置为页面顶部，失去之前的阅读位置并迫使用户滚动他们已经看到的一段内容。用户在这种情况下很容易感到沮丧，因为没有返回到原始位置的功能。Flickr的后退按钮是用户期望的一个很好的例子，它会记住用户向下滚动的位置，因此当用户点击后退按钮时，他将返回到他在上一页中的原始位置。3、用动画强化滚动形式考虑到用户可以在一个页面上专注8秒左右，非常愉悦的滚动体验可以显着延长用户的停留时间。正确使用动画可以很好地引导用户完成滚动体验。3-1.滚动激活的动画3-2.视差效果3-3。加载3-4时提供视觉反馈。避免过渡使用滚动3-5。减轻SEO缺点3-1。滚动激活的动画效果-考虑将页面分成可滚动的部分，每个部分都可以动画来介绍其内容。当用户滚动时，动画通过创建内容的运动轨迹将用户的视线转移到下一个屏幕。这是向用户展示内容流的一种非常有效的方式，可以让用户对接下来发生的事情保持兴趣（动画内容的不同部分并保持用户的兴趣）。3-2.视差效果——当你的网站想要讲述一个流畅的故事时，长滚动加上视差效果可以创造一种完全身临其境的浏览体验。视差滚动意味着背景内容相对于前景元素移动得稍微慢一些，这可以在您向下滚动页面时创建3D效果。如果使用得当，它可以营造出非常好的深度感。这种格式非常适合讲故事的网站，使用良好的视觉元素来创造更加身临其境、有趣和令人兴奋的体验。Tips：关于视差网站代码开发，可以阅读DaveGamache写的《ParallaxDoneRight》一文。当你设计一个带有长滚动和动画的网页时，你必须考虑用户加载页面所需的CPU和内存消耗。滚动多个页面和内容，包括不需要重新加载的各种图片、GIF和视频，会占用大量系统资源。您可以在不同的设备上进行测试，并使用一些技巧，例如在用户滑动时不播放动画和视频，以减少这种内存资源的浪费。3-3。加载时提供视觉反馈——这种方法特别适用于无限滚动的页面，对于内容很多的长滚动页面也很有用。当有新内容加载时，用户需要网站传递一个明确的加载信号，通过进度信号来显示新内容正在加载，并会很快显示在页面上，让用户知道。由于加载新内容是一个非常快速的动作（通常不超过2-10秒），您可以使用小圆圈动画作为系统正在运行的反馈信号——诚然，此类动画非常短，可以重复使用。也可以添加额外的信号来通知用户，包括使用副本来解释用户等待的原因。3-4。避免过度使用滚动——被滚动劫持的网站忽略了网站浏览的基本功能。被滚动劫持的体验非常糟糕，因为用户无法完全预测自己的操作行为和结果。用户对网站滚动交互的期望不应被狭窄的体验所劫持。Tumblr在他们现在的主页上使用了滚动劫持这里把tumblr做成反面教材，大意应该是批评tumblr滚动画面太多，一共6个画面3-5。缓解SEO的缺点（SEO=SearchEngineOptimization，这部分我不是很懂）长滚动会对SEO产生负面影响，但是如果你能按照Google的建议去做，这种情况是可以避免的。进行用户行为分析，了解您设计的网站实际运作情况。让我们看看他们是怎么说的：（这里指的是谷歌推荐）确定每个屏幕有多少内容：1.确保如果搜索者直接来到这个页面，他们可以很容易地找到他们想要的东西（在Don'tscrolltoomuchbefore找到所需的内容）；2.使用合理的页面（分屏）加载时间?分配内容，使每个分屏不重叠4.结论在网页设计中，用户的浏览过程应该和目标内容一样有趣。长滚动可以创建完全身临其境的浏览体验。正如JoshPorter所说：“滚动是过程，点击是决定。”如果用户喜欢页面的UI，那么他们就不会关心滚动的长度。因此，关注用户目标并使页面浏览更容易。附上原文地址：http://www.uxbooth.com/articl...
