首页 客户案例 品牌营销网站建设 微信小程序开发 网络营销 APP开发 终端形象 商业摄影 动态 联系

1对1定制服务,PC端+手机端+小程序多端应用

网页中的长滑动设计

2017年01月24日浏览:

“上一屏”的时代已经过去了。最近,长滑动和无尽滑动页面越来越流行,这不再是趋势或巧合了。允许用户在没有任何中断或额外交互(用户向下滑动页面时信息自动出现)的情况下滑动信息内容,有许多好处:

(1)简化导航

(2)吸引更多用户浏览内容

(3)向移动设备转化方便

移动界面使用的增多在这个技术的广泛接受中起到了关键作用:

屏幕越小,滑动越多

另外,移动设备的手势控制让滑动更直接和有趣。然而,长滑动并不是没有缺点。以下是一些让你的长滑动更符合用户期待的最佳实践。



使用视觉暗示

告诉用户下面有更多内容


利用设计元素暗示用户滑动,这样可以保证每一个用户都可以快速了解页面。一个小的视觉提示,比如一个指向页面外的箭头或者一个向下滑的文案,都可以告诉用户下方有更多内容。


data-file-2-1-3-977312.jpg

指向屏幕外的箭头可以告诉用户更多内容在下方


保证导航持续可见

使用粘性导航或跳页选择


长滑动的最大风险是失去导航性——用户会在浏览时迷失。这种无法找到当前位置和其他导航选项的情况会让用户产生烦躁和困惑,从而影响整体的用户体验。

设计长滑动页面时,必须记住:用户仍然需要方向感(他们的当前位置)和导航(其他可能的导航选择)。这个问题有一个明显的解决方案,那就是一个粘性导航菜单,可以展现当前位置,并一直停留在屏幕的相同位置。


977316.gif

滑动激活的粘性导航


如果因为屏幕空间有限,没法添加导航条时,你可以考虑一个跳转到页的选择:


data-file-8-1-3-977318.jpg

屏幕右侧的“跳转到页”选项


仅限移动设备:因为移动设备的屏幕都小一些,可见的导航条可能会占据比较大的空间比例。那么你可以在用户向下滑动查看新内容时隐藏导航条,当他们向上滑动尝试回到顶部时显示导航条。


977319.gif

Facebook通过向下滑动时隐藏导航条的方式节省了垂直空间


将屏幕当做页面进行设计

让内容表示滑动长度


页面想要一个顺滑、线性的讲故事方式。你必须保持页面整洁有序,为了让用户理解它们,你需要将每一屏当成一页进行设计。例如,Le Mugs网站的每一部分都包含自己独特的信息,这些信息都由生动的动画展现。


977321.gif

小贴士:将页面总数量压缩到最小以简化导航。长滑动并不意味着100页不间断的内容!



配合功能性动画

利用动画与用户建立联系


董小设计是长滑动页面设计的基础,动画也是设计的核心部分。动画有他们自己独特的功效和吸引力,他们为用户提供了一个更顺滑更舒服的探索方式。长滑动让创意元素变为可能,例如视差滑动和滑动出发的动效。他们把滑动变得更有趣,让用户们好奇“接下来会有什么?”


977323.gif

动效让滑动在视觉上更有趣


讲故事的视差效果

视差滑动包含比前部内容移动更慢的背景移动,创造了一种深度和沉浸式的错觉。视差不仅仅是一个娱乐性的视觉效果。使用适当的话,他可以创造一种顺滑的视觉叙事性,让用户沉浸其中。



977330.gif

时差效果创造了令人影响深刻的三维感受


总结

长滑动可以创造一种完全的沉浸式浏览体验。如果用户喜欢这个UI,并觉得它很直观,那么他们不会那么介意滑动的长度的。因此,专注于你的用户目标,为用户打造更方便的体验。

在线提交您的需求

*我们会在24小时内回复您,节假日除外。
线上服务咨询微信二维码18628098709获取解决方案