如何设计好的长页面

现如今长页面乃至瀑布流页面开始越来越受到用户的青睐，其突然的走红不是没有原因的。长页面允许用户在快速阅读的模式下在短时间内获取更多的信息，而且交互模式非常简单，用户只需滚动鼠标或者滑动手指，新的内容就会不断加载出来。

为什么是长页面? 长页面更能创建沉浸式用户体验，因为相比于点击“下一页”按钮，直接滚动或者滑动对于用户来说操作更加简单，而且滑动的精准程度远比点击链接和按钮要好得多。此外进入下一个页面，意味着用户进入了一个新的“环境”，重复的熟悉过程会分散用户的注意力。哪些产品适合长页面?1 长页面适合展示叙事性内容，内容都处于同一级别，而且可以线性排布。

展示连续冗长内容，而且被分为几个单独页面展示的用户体验比单页要差。其中最典型的一个例子就是教程页面。有的教程会比较长，而且上下步关联性强，如果分页展示会对理解造成障碍。比如你看到一个C4D教程，第5步会用到第4步里的知识，这时候如果要跳转页面回到第4步去看就会显得很麻烦。首屏设计长页面想要获得成功，就要鼓励用户往下拉，因为长页面的大部分信息需要用户不断下拉去获取。这个就意味着长页面的首屏要做的足够出色，这样才能吸引用户往下滑动。一般首屏我们会放banner，首屏设计其实主要就是banner设计。那么如何才能设计出优秀的长页面banner呢?

（1） 相关性这是最基本的，然而却是最容易被我们忽视的。我们做banner，除了手绘插画，还喜欢用摄影图来做背景。因为版权原因，我们更喜欢去国外网站找素材。我们会犯一个错误，就是只找那些好看。诚然好看的页面更能吸引用户驻足停留，但是图文不符会让用户感觉自己受到了欺骗。

（2） 功能性现在设计都讲究功能性，功能性插画，功能性动画。单纯意义上作为花瓶来进行点缀的设计元素很容易被用户忽视。我们尽量给页面中每一个元素都赋予其价值，具有存在意义。

情绪化设计首屏是用户对一个长页面的第一印象，第一印象所产生的情感会一直伴随你整个长页面的浏览过程。用户在进行决策的时候，情感往往会超越理性。

导航栏当我们创建一个长页面的时候，为了避免用户在使用过程中迷失，我们应该时刻给用户展示导航栏。让用户对于位置感(当前所处的位置)和方向感(可能的路径)有一个了解。但是传统导航栏有一个缺点，导航栏处于页面顶部，当向下滑动的时候，导航栏就会就移上去，用户就看不到了。为了解决这个问题，我们应该对导航栏进行浮动处理，无论你的页面如何滑动，导航栏所处的位置都是不变的

就像我前面说的，因为手机屏幕比较小，导航栏占据的屏幕空间相对来说就会比较大。在用户进行下拉浏览页面内容的时候，我们可以考虑隐藏导航栏，当用户向上滑动的时候，再显示导航栏。

返回按钮为了避免用户迷路，除了导航栏，我们还应该做到合理使用“返回”按钮。比如，我们在浏览一个电商网站，发现这个商品不错就点进去了解一下。感觉不太满意以后，我们点击页面左上角的“返回”按钮。这时我发现返回到了商品列表顶部，而不是我之前浏览到的位置。这意味着我又要重新下拉到之前浏览到的位置。这种反人类的设置很容易让用户抓狂。

相比而言，Flickr就做的很好。用户在浏览图片时看到一个自己感兴趣的，点进去之后用户再返回，系统会记住你之前浏览位置，并且返回到那个位置。跳转功能长页面的内容其实是可以被分为不同的模块的，比如操作教程类页面。这个情况下，用户需要一个跳转的功能。因为当内容可以准确的划分的时候，也就意味着用户对于不同模块的内容有着一定理解，他们也可以判断对这个模块的内容是否感兴趣。如果说普通的长页面是一篇长篇小说而已，那么加了跳转功能的长页面就是一本短篇小说集，用户可以不用一页一页的去翻就可以精准的到达他们感兴趣的章节。

当然在这里要提醒大家，跳转按钮尺寸和间距一定要注意，尺寸过小或者间距过窄都会增加用户的点击难度。提供视觉反馈良好的交互设计应该给用户的每一个操作都提供反馈，长页面中交互模式很简单，主要就是下拉加载新的内容。那么我们就要给用户直观的展示这个加载状态。在网络情况正常的情况下，新内容加载非常迅速，我们可以使用功能性动画来实现。

加载时间难题加载时间过长这几乎每个长页面的一个通病，这个问题亟需解决。因为根据调查研究发现，47%的用户对一个网页的加载时间的期望值是2秒内，如果3秒后页面还没有加载完成，57%的用户会选择离开。当然这个也不是我们设计师应该去解决的问题，但是多了解了解也是好的。标记服务(收藏)一个长页面里给用户提供的内容是很多的，我们应该考虑到有的情况下用户看到感兴趣的内容，但是碍于时间关系没有点击进去，这个时候我们提供标记服务，让用户可以在之后找到。标记服务可以理解为“收藏”。

展示内容数量以电商网站为例，你搜索西服，结果页面就是一个长页面。给用户展示搜索结果数量是很有必要的，让用户对内容有个了解，他们也会对浏览时间有一个预估。

总结这篇文章对长页面的设计套路做了一个归纳和总结，希望大家看完有所收获。

分享题目：如何设计好的长页面
标题来源：https://www.cdcxhl.com/news29/159579.html

成都网站建设公司_创新互联，为您提供网站内链、品牌网站制作、用户体验、网页设计公司、响应式网站、静态网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联