如何在移动端有限的屏幕内向用户有效的展示传达更多的信息内容，是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轴适用于一个页面都是单维度信息的场景。

如上图所示，无论是小米应用商店还是淘票票，页面的核心内容都是由一个个的“泳道”（参考https://medium.muz.li/the-horizontal-scroll-interface-46b8f69f54ff）构成，竖滑切换泳道（不同维度的内容）,横滑切换同一泳道的不同内容。而微博、朋友圈、抖音、快手等国民级应用，都是通过竖滑在一条泳道上一滑到底。

如何划分泳道

这么多的泳道怎么区分不同内容呢？标题。所以我们会看到上图所示的小米应用商店、淘票票、Tumblr，都给不同的泳道的左上角设置了一个大大的标题，通过标题文字来直接传达给用户不同泳道的内容概要。早些年间还有给泳道做氛围图的方式，即下图的图片+文字方式，这样处理有利有弊，好处是图搭配的到位可以更好的强调主题，缺点则是浪费空间和展示效率。

左图是应用汇15年的版本效果图，用的是底图强调分氛围的方式。右图为现行版本改版后类似模块的处理方式，取消了氛围图，增加了可见展位，原来一行只能展示出两个应用，改版后一行可展示4个。

如何强化泳道可见性

X轴的交互设计还需要做额外的引导来强化可见性，常见的引导方式有指示器、部分遮挡两种。

尤其是Banner位和金刚区，如果没有指示器，大多数小白用户根本不知道该页面是可以滑动的。同样，部分遮挡也是较为常用的有效方式，通过遮挡部分文字和图片，来强化【后面还有内容哦，来滑滑看】的效果。

但实际效果中，指示器的作用几乎微乎其微，用户主动触发率很低。因为绝大部分用户只在乎眼前能看到的内容，至于隐藏起来的内容，用户去主动发现的意愿很弱。而部分遮挡的设计方式，则存在一个转化递减的问题，即越往后，CTR（点击率）和CVR（转化率）越低，所以绝大多数应用一行最多也就放8-12个内容，太少的话一滑到底，不符合预期，太多滑不到头，用户很快就会厌倦，排后面的内容就完全不会有曝光机会。

位置对转化率的影响

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

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

最后，横滑or竖滑？怎么选？

·横滑

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

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

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

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

   
   

·竖滑

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

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

会选了吗？

往期文章链接：

01 小程序设计规范和常见设计误区 https://www.zcool.com.cn/article/ZOTQ1NDc2.html

02 UI设计师如何利用职业优势转岗做产品 https://www.zcool.com.cn/article/ZOTQ3MzE2.html

03 谈像素画在终端游戏中的现状，问题及对策分析 https://www.zcool.com.cn/article/ZOTU2OTcy.html

05 10个小时挣10000元？如何用UI组件提高工作率 https://www.zcool.com.cn/article/ZMTA1Mzc0NA==.html

06 小程序UI设计从入门到入土（完整版) https://www.zcool.com.cn/article/ZMTI4NTcyNA==.html