编辑导语：为了提升手机屏幕的空间利用率，可以运用不同的设计方式。本文作者分享了“泳道”和“卡片设计”这两种设计方式，它们各自有哪些优劣势呢？设计模式是什么样的？一起来学习一下吧。
文章太长，上篇先介绍2种设计方式：泳道、卡片设计。
一、“泳道”在同一页面的X轴上扩展内容的设计方式叫做“泳道”设计法（或者叫泳道布局框架）。
优势：
- 理解成本低：泳道的设计模式已经非常成熟，用户的理解成本很低
- 扩展性强：可以在占据较少的屏幕空间情况下扩展较多的内容
- 交互友好：滑动的动作比点击操作更轻松快捷
劣势：
- 手势冲突：可能与手机其它左右滑动的手势冲突
- 屏幕外的内容曝光度低
1. “泳道”的设计模式
- 指示器：在泳道下方添加指示器，数量固定时可选此方案
- 内容露出一半：让用户感知滑动可以查看更多
2. “泳道”的交互方式
方式一：左右滑动查看全部（例 YY直播）
方式二：左右滑动查看，滑动到最右边，继续滑动自动跳转新页面查看更多（例：酷狗概念版APP）
方式三：左右滑动查看，滑动到底，点击【查看更多】跳转到新页面（例：淘票票）
方式四：左右滑动查看，滑动到底，继续滑动触发加载（例如：乐趣APP）
3. “泳道”的视觉展现
- 承载方式：多用卡片承载内容
- 内容区分：使用背景色、阴影来做内容区分
- 心理暗示：卡片溢出屏幕外，暗示还有更多内容
- 泳道范围：仅在部分区域做泳道也可行，例如直播间的在线人数头像泳道
二、卡片式设计
卡片设计指使用卡片作为内容承载容器的设计方式，本篇文章探讨的主题是关于提升屏幕空间利用率的设计方式，所以此处的卡片设计仅对单张切换式卡片进行设计说明。
优势：
- 趣味性：卡片切换的交互方式新颖有趣，能够激发用户猎奇的愉悦感
- 未知性：当卡片是“一次性”的时候，无法得知下一张卡片的内容，会产生探索欲，比如抖音的下滑查看下一条视频
- 视觉冲击力强：大卡片在视觉上更容易有冲击感，感官体验更好
劣势：
- 流畅度：切换不够流畅时，容易产生焦虑感
- 手势冲突：可能与手机其他左右滑动手势冲突
- 灵敏度：手指滑动识别不够灵敏时容易误触发其他操作
1. 卡片的设计模式
下图从三个维度来对卡片设计模式进行盘点，分别是：交互层、功能层、视觉层。
1）交互层
2）功能层
从功能层分析，卡片分为“一次性卡片”和“循环卡片”。
所谓“一次性卡片”指的是将该卡片切换走之后，卡片无法再次找回，是单向的切换。
而“循环卡片”指的是卡片可以循环切换，可以来回切换，反复查看。
3）视觉层
①卡片堆叠
卡片堆叠在一起，看上去像是将卡片重叠放置，每次切换就像是从一堆卡片中拿走最上面的一张。
卡片堆叠有向上堆叠和向下堆叠。
首先是向上堆叠（卡片的堆叠方向在上面），比如知乎APP。
知乎APP
然后是向下堆叠（卡片的堆叠方向在下方），比如耳觅APP。
耳觅APP
斜方向堆叠（卡片斜着堆叠），比如匠木APP。
匠木APP
②显示单个大卡片
仅显示单张卡片，多用于大卡片的切换，因为小卡片若无引导用户很难发现左右滑动切换卡片这一手势。
积木APP
③屏幕两边露出部分卡片
屏幕两边露出部分卡片，按时用户可左右切换。
音街APP
④屏幕单边露出部分卡片
,
