恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
长滑动的最佳实践
0.0°
2017-01-22 自译外文 经验/观点 原作者: Nich Babich 举报 1317 2 3 0

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

(1)简化导航

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

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

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

屏幕越小,滑动越多

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



使用视觉暗示

告诉用户下面有更多内容


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

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

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


保证导航持续可见

使用粘性导航或跳页选择


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

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

滑动激活的粘性导航

滑动激活的粘性导航


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

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

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


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

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

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


将屏幕当做页面进行设计

让内容表示滑动长度


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

Image title


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



配合功能性动画

利用动画与用户建立联系


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

Image title

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


讲故事的视差效果

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

Image title

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

总结

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



P.S. 在《优秀无尽滑动的五个原则》一文中,你可以找到无尽滑动的最佳实践。

谢谢。

更新:2017-01-22

收藏

2人已收藏

  • 7

    作品

  • 3

    粉丝

  • 38

    关注

  • 打造好的产品
  • 移动端UX设计:关键原则
  • 2017年UI设计报告-自译
  • DAY3-【临摹练习】Principle 动效练习-1
相关标签

    猜你喜欢

      2017-01-22 自译外文 经验/观点 原作者: Nich Babich 举报 1317 2 3 0

      长滑动的最佳实践

      0.0°

      你确定要举报长滑动的最佳实践

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年01月22日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      3
      2
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录