手机屏幕空间有限，如何在有限的空间容纳更多信息的同时，兼顾可操作性和美观性就成为了一个值得研究的课题。

本文总结了6种移动端常用的空间拓展的设计方法，帮助大家开拓设计思路，提供设计灵感。这六种设计法分别是：

“泳道”设计

巧用 tab

开拓“二楼”

一、“泳道”设计

1、“泳道”简介

在同一页面的 X轴 上扩展内容的设计方式叫做“泳道”设计法（或者叫泳道布局框架）。

理解成本低：泳道的设计模式已经非常成熟，用户的理解成本很低

扩展性强：可以在占据较少的屏幕空间情况下扩展较多的内容

交互友好：滑动的动作比点击操作更轻松快捷

手势冲突：可能与手机其它左右滑动的手势冲突

屏幕外的内容曝光度低

趣味性：卡片切换的交互方式新颖有趣，能够激发用户猎奇的愉悦感

未知性：当卡片是“一次性”的时候，无法得知下一张卡片的内容，会产生探索欲，比如抖音的下滑查看下一条视频

视觉冲击力强：大卡片在视觉上更容易有冲击感，感官体验更好

流畅度：切换不够流畅时，容易产生焦虑感

手势冲突：可能与手机其他左右滑动手势冲突

灵敏度：手指滑动识别不够灵敏时容易误触发其他操作

触发距离太短：容易误触

在调研过程中，「搜狗翻译」、「探探」、「积目」三款APP切换的触发距离最为合适，切换过程手指很轻松就能切换卡片，同时也不容易误触，它们的切换方式采用上述1和2结合的切换方法，即既可以滑动卡片后松开手指切换，也可以轻扫卡片进行切换。

看了这几款产品的切换之后，于是我开始思考 除了受限于技术难度，还有什么原因使得他们的切换如此干净利落？

于是我用principle做了一个简单的demo，发现还有3个要素会影响到切换的流畅度： 动画持续时间、属性变化值、贝塞尔曲线选择 ，这三者相辅相成，彼此影响，三者的参数需要整体考虑，无法单独定义一个参数后就能得到一个好的动效结果，所以下面对三方面的参数做定性的分析。

1、动画持续时间

动画持续时间上我尝试了三个时间的测试，分别是太慢、合适和太快，之所以不做具体的时间说明，是因为当选择的贝塞尔曲线和属性变化值不一致时，时间就会相应变化。比如缓入缓出时1000ms是一个合适的持续时间，但是当选择其他曲线时，1000m可能就会太快或者太慢。

下面对比了慢、适中和快的切换，可以感受一下。

3、贝塞尔曲线选择

测试贝塞尔曲线时我发现，选择缓入缓出和缓出差别不太大，反而是当只使用缓入时，容易有卡顿的感觉，这种感觉和「Mars」APP的卡片切换的卡顿感非常相似，感觉切换的时候故意停顿了一下。

这种感觉就 像是蚂蚁在你心里爬，你很难受，却无法挠痒痒 。而这种卡顿感即使在我把切换时间缩短后仍然无法解决。

仅缓入↓↓

卡片靠近屏幕边缘时，注意避免热区和手机返回手势冲突

轮播最好循环切换，而非单向切换，若单向切换则切换到最后一张就无法再切换，使用起来不够流畅，二来当用户尝试继续切换时非常容易和手机自带返回手势冲突（亲测）

循环切换和单向切换↓↓

折叠目的一般有两个，一个是折叠后节省屏幕空间，第二个是扩展屏幕空间。比如钉钉课堂就对视频做了折叠交互，可点击展开/折叠视频，就是为了节省屏幕空间，折叠时不打扰白板的使用。

你会发现上述三种折叠设计方式都包含了一种微动效，比如小红书的文字展开折叠不是生硬的短文本和长文本切换，而是文字像一把扇子一样展开，然后折叠，用数字表达就像是01234578和07的区别，一个是递进另一个是突变，递进这种微弱的动效能让整个体验更加流畅。

下面将递进称为流畅切换，突变称为生硬切换，为了能让大家感受到这种差别，我做了一个演示GIF，可以看到下图中左右矩形的切换效果，左边的矩形是逐渐升高的，而右边的矩形是由矮突然变高，前者更加流畅，后者则显得生硬。

流畅切换和生硬切换↓↓

1、tab设计法简介

tab设计法是非常常见的一种设计方式，针对整个页面做tab切换的设计方法我就不多做介绍，下面主要介绍几种小范围的tab设计，比如弹窗里加tab，或者卡片里面加tab。

简单易懂，tab作为一种相当成熟的设计方式，用户几乎一看就懂

扩展性强，可添加多个tab，容纳更多内容

需用户主动切换，除了第一tab其它tab内容曝光度低

tab数量超过一屏后，屏幕外的tab点击率低

顶部tab又分为一级tab和二级tab，一级tab比如「比心」APP的榜单弹窗中就分出了两个tab：守护总榜和守护周榜。值得注意的是，此处tab一栏的布局不仅仅只有两个tab选项，右边还有其它的功能入口，也是一种扩展屏幕空间的方式，值得借鉴。

比心APP↓↓

1、「二楼」简介

APP「二楼」起源于淘宝2016年推出的“淘宝二楼”产品，每晚6点，可以从淘宝app首页向上滑动进入二楼，早上7点二楼就会消失，后来各大APP纷纷效仿，淘宝也算是发明了一种新的移动端交互方式。

空间大：只要打开二楼就相当于打开一个新页面

新颖：交互新鲜有趣，能给人耳目一新的感觉

交互隐藏太深，用户难以发现，可能造成打开率低