最美UI

交互设计,论UI滚动交互巧妙运用

你在设计中使用过几种滚动交互呢?其中巧妙运用的有多少?接下来我为大家分析三种不同的滚动交互,并告诉大家他们使用的场景以及规则。我希望这些可以在实际工作中,帮助你构建设计。

 

规则1:次只在一个轴上交互滚动

通常,该轴是垂直或水平的。垂直滚动是现在app的主流交互形式,水平滚动可以有效的利用信息空间,显示更多的内容。但是,如果将滚动手势应用于多个轴,则会打破边界。

 

上面的例子(红色方块)显示了一个能够垂直和水平滚动的对象。它成为一个自由形式的对象,比起滚动交互的说法,他应该被称为拖动交互。

 

小贴士

自由形式对象的滚动也是一个常见的交互。比如我们常用的手机地图,这里我们不做过多延展。今天的主题是如何整合和扩展更传统的滚动手势。向上/向下,左右。

 

嵌套式滚动,我们可能无法改变单轴的规则,但是我们可以让他错位。将滚动交互扩展到单个轴之外的最稳定的方法是合并滚动组。滚动组允许您同时将垂直和水平滚动手势应用于单个对象。

 

实际上,嵌套的功能是将两个独立对象的滚动交互应用于第三个对象。下面的案例结构允许“水果”组与“蔬菜”组分别进行滚动,下方接收来自两个滚动交互的手势。

实质上,嵌套滚动使用父子级转换来绕过规则#1。在上面的例子中,'水果'组垂直滚动,而父级'水果蔬菜'组水平滚动。如果两个组以相同的方向滚动,比如说垂直方向,那么这两个组合就会发生冲突。系统将无法将区分手势。这就是我要讲的滚动交互的第二条规则。

 

规则2:一个元素上不用两个同向滚动

复合滚动不是专注于实际的滚动交互,而是将该交互扩展到设计的其余部分。

他涉及到动画停止时,滚动交互的位置。在底部示例(左)中,嵌套滚动组允许您滚动浏览不同的鞋子,并滚动浏览每只鞋子的描述。鞋的缩略图随着卷轴滚动。我将鞋子缩略图设置在特定滚动位置。这样一个手势控制着几个不同的设计。

 

看看另一个例子(右)。同样的动态正在发生,但相反。鞋子图标位于嵌套滚动组中,而鞋子描述不是。你可以看到交互不像左边那样平滑,并且需要更大的手势来激活交互。我可以告诉你,这种特殊的互动经常发生。发生什么时滚动交互不会触发手动动画?假设鞋子出现的触发器是从0px-66px的滚动位置。如果我以某种方式从5px-66px滚动,那么手动动画不会触发。

 

规则3:不要做太多滚动交互

主动操作,那么滚动与滑动的区别是什么呢?是主动操作。滑动开始并结束。滚动始终处于活动状态。以前的设计大量使用分页滚动来消除这种活跃的动作。下一个设计,试图突出它。

 

重新设计了Medium中的交互体验,将所有的类别内容包含在卷轴抽屉中。您可以下拉打开抽屉,或将其收起,保留信息空间。

 

我很喜欢这种设计,但是你可能注意到他已经违反了第二条规则。用于打开抽屉的垂直滚动位于主内容的顶部。有时当我向下滚动时,手势打破了内容的边界,导致抽屉自发地打开。

文章来源: TKback

原文链接: https://www.jianshu.com/u/0c41cd58e6e2

微信公众号微信公众号:zuimeiui

扫一扫 关注公众号

0

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
APP图标:精选APP图标,看看各大app图标的设计风格提升设计感! → 猛戳这里
【原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!】

上一篇
每个UI/UX设计师都要懂的心理学原则
下一篇
2018 UI设计师不可不看的设计趋势