如何设计好的长页面

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

为什么是长页面?

长页面更能创建沉浸式用户体验,因为相比于点击“下一页”按钮,直接滚动或者滑动对于用户来说操作更加简单,而且滑动的精准程度远比点击链接和按钮要好得多。此外进入下一个页面,意味着用户进入了一个新的“环境”,重复的熟悉过程会分散用户的注意力。

 

哪些产品适合长页面?

1 长页面适合展示叙事性内容,内容都处于同一级别,而且可以线性排布。

Image title

2 展示连续冗长内容,而且被分为几个单独页面展示的用户体验比单页要差。其中最典型的一个例子就是教程页面。有的教程会比较长,而且上下步关联性强,如果分页展示会对理解造成障碍。比如你看到一个C4D教程,第5步会用到第4步里的知识,这时候如果要跳转页面回到第4步去看就会显得很麻烦。

 

首屏设计

长页面想要获得成功,就要鼓励用户往下拉,因为长页面的大部分信息需要用户不断下拉去获取。这个就意味着长页面的首屏要做的足够出色,这样才能吸引用户往下滑动。一般首屏我们会放banner,首屏设计其实主要就是banner设计。那么如何才能设计出优秀的长页面banner呢?

1 相关性

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

 

2 功能性

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

Image title

 

3 情绪化设计

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

Image title

 

导航栏

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

Image title

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

Image title

 

返回按钮

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

Image title

相比而言,Flickr就做的很好。用户在浏览图片时看到一个自己感兴趣的,点进去之后用户再返回,系统会记住你之前浏览位置,并且返回到那个位置。

 

跳转功能

长页面的内容其实是可以被分为不同的模块的,比如操作教程类页面。这个情况下,用户需要一个跳转的功能。因为当内容可以准确的划分的时候,也就意味着用户对于不同模块的内容有着一定理解,他们也可以判断对这个模块的内容是否感兴趣。如果说普通的长页面是一篇长篇小说而已,那么加了跳转功能的长页面就是一本短篇小说集,用户可以不用一页一页的去翻就可以精准的到达他们感兴趣的章节。

Image title

当然在这里要提醒大家,跳转按钮尺寸和间距一定要注意,尺寸过小或者间距过窄都会增加用户的点击难度。

 

提供视觉反馈

良好的交互设计应该给用户的每一个操作都提供反馈,长页面中交互模式很简单,主要就是下拉加载新的内容。那么我们就要给用户直观的展示这个加载状态。在网络情况正常的情况下,新内容加载非常迅速,我们可以使用功能性动画来实现。

Image title

 

加载时间难题

加载时间过长这几乎每个长页面的一个通病,这个问题亟需解决。因为根据调查研究发现,47%的用户对一个网页的加载时间的期望值是2秒内,如果3秒后页面还没有加载完成,57%的用户会选择离开。当然这个也不是我们设计师应该去解决的问题,但是多了解了解也是好的。

 

标记服务(收藏)

一个长页面里给用户提供的内容是很多的,我们应该考虑到有的情况下用户看到感兴趣的内容,但是碍于时间关系没有点击进去,这个时候我们提供标记服务,让用户可以在之后找到。标记服务可以理解为“收藏”。

Image title

 

展示内容数量

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

Image title

 

总结

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

 

原文地址:UI中国

作者:王M争

 

 

0

评论0

站点公告

 

AI创作与绘画大师,国内版chatGPT在线版本免费使用哦

点击打开: https://ai.uiya.cn

   
显示验证码
没有账号?注册  忘记密码?

社交账号快速登录

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码