首页
业务
关于
客户
服务
联系
13520390899
资 深 的 互 联 网 开 发 服 务 商
专注于 网站开发 / 小程序开发 / APP开发 / 软件开发
网十科技 > 动态

通州APP开发阐述: 如何设计好的长页面

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

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

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

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

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

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

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

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

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

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

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

7x24
售后服务支持
10
故障时长赔付
16
16年行业服务经验
20
售后服务人员
70
设计、开发团队
10
国内顶尖技术专家
1000
大型及上市企业
版权所有 © 北京网十互动科技有限公司 网站 APP 小程序 软件 备案号:京ICP备16050073号-2

电话咨询