咨询电话:400-810-1418服务与监督电话:400-006-6572
×

提交成功
我们会有专属的教育顾问联系您,请保持手机畅通。

横滑or竖滑?教你如何选择正确的交互方式

发布时间:2020-02-06 14:27:58

如何在移动端有限的屏幕内向用户有效的展示传达更多的信息内容,是UI/UE设计师们的重点研究方向。在实际工作与生活中,我们见到了太多左右横向滑动交互设计,基本上第一感觉都是“哇,好酷!交互方式多样性好灵活!”然后纷纷相仿,却很少去考虑这种交互设计的科学性与实用性。

设计是理性的科学,而非感性的艺术。用户行为和用户喜好是可以通过用户行为数据进行推演。能客观,绝不主观;能简单,绝不过于复杂;能理性,绝不过于表达感性。

一、常见的内容拓展方式

在有限的屏幕内将大量的资讯内容进行合理的依次展示,我们称之为内容拓展设计。常见的内容拓展样式有X轴横向滑动、Y轴纵向滑动、Z轴的垂直长按交互三种。

X轴横向滑动,即在X轴水平方向扩展内容,英文名叫“Horizontal Scrolling Lists",直译为水平滚动列表。这种交互方式适用于单页多维度内容聚合的展示。

1.webp.jpg

如上图淘票票案例,将 Banner、热映影片、即将上映等不同维度的内容整合在一个页面,每个维度单独占一个卡片并列展现内容。

Y轴纵向滑动,即我们最常见的传统的下滑式List,英文名叫“Vertically Scrolling Lists",直译为垂直滚动列表。只需要不断往下滑动屏幕,就能加载展示更多的内容,用户学习成本几乎为0。主要适用于单维度内容,如抖音、知乎、朋友圈、微博等,【刷】是个重复上下滑动的动作,即所谓的【刷】抖音、【刷】知乎、【刷】朋友圈,【刷】微博,刷的都是同属性内容。

2.webp.jpg

Z轴方向的内容拓展设计,即我们说的长按操作,如iOS系统的3D Touch,根据不同力度反馈和不同时长反馈来判断具体的交互内容。Z轴交互方式较为隐蔽,有一定学习成本,主要适用于以下场景:1.方便用户快速打开某个高频次功能;2.对于入口较深的功能可以用3Dtouch来作为快捷入口;3.针对某些涉及到个人隐私的产品或功能可以用3Dtouch实现入口替代。

3.webp.jpg

本篇文章主要讲横滑和竖滑的优缺点以及项目中如何抉择的问题。

二、X轴滑动优缺点分析

如果一个app全是纵滑或全是横滑,是没有什么问题的,用户只要习惯一种交互方式即可,如漫画软件与阅读软件,通常都会提供横滑与竖滑两种交互方式。坑的是横滑竖滑两种交互穿插在一起,这就有些不够优雅了。

前面说过,X轴横滑交互适用于一个页面有多种维度信息的场景,Y轴适用于一个页面都是单维度信息的场景。

4.webp.jpg

4-2.webp.jpg

如上图所示,无论是小米应用商店还是淘票票,页面的核心内容都是由一个个的“泳道”(参考7.webp.jpg

图为某app单个推荐模块的点击率与转化率曲线图。从曲线可以看到,位置越靠后,点击与转化效果越差,几乎是递减的趋势。至于0号位和1号位为什么不如2号位3号位的点击高呢?这个跟0号位和1号位推荐的产品也有一定的关系,同样的曝光率,优质的产品点击率自然更高。这也从侧面说明一个问题,X轴横向的排列资源位,无法适用于竞价排位。对于盈利性的软件来讲,资源位很重要,是对接商户的筹码,有效的资源位才能让金主爸爸掏钱掏的干脆痛快啊。

对于Y轴垂直的交互方式来说,一个位置一个价码,明码标价童叟无欺,毕竟排位非常明确的有先后顺序,先看到谁后看到谁完全可以预期。而X轴横向交互呢?到底哪个才是第一资源位呢?是0号位?1号位?还是第一排显露出来的都是?优先级很混乱,通常连商务都难以合理给横向位置定价,因为横向交互的触发率太低了。

最后,横滑or竖滑?怎么选?

横滑

横滑很酷,滑动过程中会有一种特殊的纵深感。

适用于多维度的信息整合,即专题归纳展示,一个专题卡片相当于多个信息也的合集。

固定的空间内可展示更多的商品。

有一定学习成本,优先级不清晰,曝光率与转化率整体呈递减趋势,不适合用在竞价排位的场景下。

竖滑

1. 几乎没有学习成本,优先级明确,适合用于竞价排位的场景。

2. 适合单维度信息展示,最常见的形式是feed流的信息展示。

会选了吗?

原文地址:https://www.zcool.com.cn/article/ZOTkxNDQ0.html

作者:MoeDesigner