移动端横向滑动的设计原则
Michael的交互设计实践经验新的分享，与你一起走进国内大厂的交互设计精髓
一.为什么要有横向滑动？
横向滑动手势其实只是移动端手势的其中一种，常见的我们知道有（手指）纵向滑动、长按、点击、双击、拖拽、横向滑动…；这与web端的（鼠标）点击、滚动相比要丰富。这是因为移动端较小的屏幕需要让用户处理同量级的信息，所以不得不丰富手势操作。
但在以上移动手势交互中，横向滑动和纵向滑动是很容易出现冲突和不适。原因是纵向滑动是移动端最顺畅、高效、高频的操作模式，任何与之不一致的浏览模式叠加在一起都会给用户带来思考和停顿，也就是我们通常所说的违反了“Don't Make Me Think”的基本原则。
二.横向滑动要解决什么问题？
横向滑动作为手势交互的一个拓展，目的初衷是提升信息“内容和操作”的拓展性。
1.“内容”拓展性：移动端的任何类型页面内容都可能无法在一个界面呈现完整，因此滑动去呈现更多的内容，常见的当然是纵向滑动。但它无法承载所有类型内容呈现的问题，这个时候就需要横向滑动来解决。
2.“操作”拓展性：当一个页面的内容已经是固定完整的，这时候需要用户进行一些行为操作，如常见的下载、删除、添加、管理…,而这些行为如果直接呈现在界面上必然导致混乱，因此需要配合一些横向滑动激发这些行为，从而保证界面的流畅体验。
三.目前横向滑动的典型设计场景及利弊分析
横向滑动从移动端手势出现到现在十几年的时间已经有了非常典型的使用场景，接下来我们就来列举一下有哪些常见的类型：以下从【清晰度、效果】两个纬度进行分解
1.入口型横滑切换（手机主页app、各大电商入口、banner...）
[解决内容拓展问题]
这类场景通常是用户最熟悉的，不论从认知清晰度、效果角度都是不错的，主要原因是场景曝光度非常高、频次非常高；比如Android\ios首页横滑切换app入口每天上百次的操作频次；
2.内容型横滑切换——（微视、垂直电商、地图）
[解决内容拓展问题]
这类切换方式适合内容相对聚焦和单一的产品，比如垂直类电商：wish、唯品会，所有内容仅仅是通过类目来区分的产品；微视：内容统一为小视频…;百度地图：横滑查看更大范围地图...;由于内容的高度统一和整合，因此切换难度低，但在认知的初期会稍有一定的门槛，原因是大部分app都是纵向滑动feeds流，而且用户记忆是海马记忆，不会特别清楚记得app的操作，所以新打开app和新用户会有一个认知过程，但门槛不高。
3.隐藏操作唤起——解决操作拓展问题（管理列表、IM列表、通讯录list…）
[解决操作问题]
在所有类型中的横滑，只有这种方式不是浏览型手势而是操作型，通常这类功能隐藏在列表中，为了保证列表信息的有效性和美观度，选择隐藏操作功能，由于是低频操作，所以初期需要用户发现并成功使用该功能；不过目前很多list页面都采用这种通用的交互手势，因此用户并不难发现。
4.模块内容横滑切换——（饿了吗\品质优选）-最复杂也是最容易出现问题的
[解决内容拓展问题]
这是最容易出错的一种场景，就是在整个界面中只有一个模块采用横向滑动，而其它内容又是纵向feeds流滑动；由于移动端内容的路径多、入口多，因此用户的核心操作流是：找入口——看信息——做任务；在这个过程中任何一个隐晦的、不常见的交互都很容易被用户忽略，比如说：饿了么品质优选、唯品会二级类目、去哪儿旅游推荐...，这些案例其实是为了横向空间拓展更多的内容而做此选择，但通常情况下隐藏内容点击率会骤降，很少有用户耐心的横滑浏览完成，因此设计师要严格把控数量以及内容的质量；在这里还有一种情况是很严重的，就是模块级的横滑内容与纵向列表之间有叠加交互，就会导致用户反复在2中操作中完成任务，这一点非常不建议使用此手势，当然以下案例并没有这种情况。
因此这一类的交互建议：谨慎使用！
四.横向滑动的几个原则
看完以上这些案例，我们可以总结出以下几个原则供大家参考：
1.内容型的横滑切换，需要保持内容的统一性和一致性
2.滑动的内容不宜过多，隐藏模块建议3-5屏（个）
3.滑动的提示需要做到清晰可见
4.慎用模块级的横滑切换（如果要使用，尽量不要和其他模块信息进行联动交互）
5.横向滑动的内容需要保持高质量和持续吸引力才能提升点击转化
感谢大家的查看，Michael愿与你一起学交互～
