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

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

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

一、常见的内容拓展方式

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

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

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

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

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

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

二、X轴滑动优缺点分析

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

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

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

图为某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