火星网校
横滑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
-
2101期学员李思庭作品
-
2104期学员林雪茹作品
-
2107期学员赵凌作品
-
2107期学员赵燃作品
-
2106期学员徐正浩作品
-
2106期学员弓莉作品
-
2105期学员白羽新作品
-
2107期学员王佳蕊作品
热门课程
专业讲师指导 快速摆脱技能困惑
相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题，火星帮你解答-
深入探讨火星3D动画培训课程，解析3D动画制作的技术要素，助力学员成为专业的动画制作者。
-
深入解析网页UI设计培训的优劣,并对火星时代教育进行初步介绍。
-
探索并深度理解Unreal Engine培训机构的优势，包括课程内容，教学方法，以及如何选择最适合你的培训机构。
-
本文讨论了UE设计的重要性，以及如何选择一门UE设计的网络培训课程，其中，火星时代教育是一个值得考虑的选项
-
探索UE5设计全日制课程的奥秘，并了解火星时代教育如何通过专业的教学内容和独有的教学方法，帮助学员提升设计技能
-
探索游戏开发培训课程的重要性，是如何为真正热爱游戏开发的人打开新的职业机会的门.
