提升屏幕空间利用率的 6 种设计方式.docxVIP

提升屏幕空间利用率的 6 种设计方式 一、轮播设计法 轮播设计指的是元素通过自动或主动轮播内容的方式来拓展屏幕空间的设计方法。 从切换方式可以分为：自动轮播、手动轮播、二者结合。 从切换方向可以分为：上下轮播、左右轮播。 优势： 在有限的空间展示更多内容（例如文字轮播） 轮播动效更吸引眼球（如中奖号码轮播等） 对内容包容性强，图片、文字、图标等均可以使用 劣势： 二级卡片曝光率低 文字轮播时需要等待片刻才能看清全部文字 1. 轮播的设计模式 下图从两个维度进行设计模式盘点：左右轮播和上下轮播。 2. 轮播交互方式 从轮播的切换方式上，轮播分为自动轮播和手动轮播。 1）自动轮播 自动轮播需注意轮播时间和速度的参数，过快难以看清信息，过慢用户没有耐心等待。 自动轮播分为两类：左右轮播和上下轮播。 a. 左右轮播 左右轮播分为“按页轮播”和“滚动轮播”。 二者的区别在于“按页轮播”以一张卡片或者一页为单位切换，而“滚动轮播”则按顺序滚动播放。 滚动轮播和按页轮播的区别↓↓ 滚动轮播一般用于文字信息滚动播放，一般不可点击，仅作信息查看。 比如知乎的会员中奖轮播↓↓ 滚动轮播在直播产品中应用得较多的地方主要是直播间名称和公告等文字信息，因为直播间信息太多，文字无法展示完全，使用滚动轮播的方式能兼顾小空间和信息完整性的需求。 比如KK直播的轮播方式↓↓ b. 上下轮播 上下轮播目前移动端普遍还是使用的“按页轮播”，轮播形式也分为单行轮播和多行轮播。 单行轮播比如「酷狗唱唱」中的卡片上下轮播榜单状态↓↓ 多行轮播相比单行轮播一次能容纳更多内容，比如「夸克浏览器」的资讯播报↓↓ 除了单独使用一种轮播方式，也有结合二者的设计方式，只不过比较少见，因为涉及到两种切换，内容间隔时间必定拉长，导致用户需要更多的时间阅读，而大多数时候用户没有这么多耐心。 「blued」APP中结合上下轮播和左右轮播的设计方式↓↓ 2）手动轮播 手动轮播大多用于运营活动入口，一般使用图片或卡片承载内容，点击后进行下一步操作。部分设计也会同时辅助自动轮播的交互方式来帮助次级卡片曝光。 手动轮播有两点值得注意： 卡片靠近屏幕边缘时，注意避免热区和手机返回手势冲突 轮播最好循环切换，而非单向切换，若单向切换则切换到最后一张就无法再切换，使用起来不够流畅，二来当用户尝试继续切换时非常容易和手机自带返回手势冲突（亲测） 循环切换和单向切换↓↓ 3. 轮播的视觉展现 指示器：卡片式切换一般会辅助指示器 运营活动入口：可尝试异形图片，更加个性有趣 文字轮播：重要文字可特殊处理，如加粗、换颜色等 二、折叠设计法 折叠设计法指的是通过折叠内容的方法来节省页面空间的设计方式。 优势： 扩展性强：相比前三种设计方式，折叠设计法能容纳更多的内容 微动效：折叠设计法能容纳较多的微动效，增强趣味感 劣势： 曝光较弱：需要用户主动去发现 可点击区域小：折叠设计可能存在点击区域不够大的情况，用户操作困难 1. 折叠的设计模式 1）卡片折叠 以卡片为主的设计形式，直播产品中常应用于侧边折叠和小卡片折叠。 侧边折叠： 点击展开/收起侧边信息面板，在Y轴上可以容纳更多内容，比如花椒直播的侧边折叠方式，换种思路，其它场景是否也可以采用这种交互方式？比如文档切换、图片切换等场景。 花椒直播的侧边折叠↓↓ 上下折叠： 折叠目的一般有两个，一个是折叠后节省屏幕空间，第二个是扩展屏幕空间。 比如钉钉课堂就对视频做了折叠交互，可点击展开/折叠视频，就是为了节省屏幕空间，折叠时不打扰白板的使用。 钉钉↓↓ 除了钉钉的折叠视频，更普遍的是对运营信息进行折叠，如花椒和快手直播间的折叠卡片，展开后可以查看相关信息还可以点击进行交互。 花椒直播↓↓ 快手直播↓↓ 2）文字折叠 而为了展示更多内容的折叠设计方式则更像是一种另类的弹窗，比如「音阶」APP对游戏规则简介的折叠方式，不同于常规意义的弹窗，它更像是折叠的效果并且还添加了微动效，整个操作更加有趣流畅。 音阶↓↓ 除了音阶这种通过点击icon才能触发折叠展开的设计方式，还有一种操作更加方便的交互，点击热区更大，比如小红书的视频播放页的文字展开折叠效果。 小红书↓↓ 3）空间折叠 空间折叠就像是页面被撕开了一个口子，像是爱丽丝掉进了兔子洞，发现别有洞天，这样的设计方式就是空间折叠。 折叠空间演示↓↓ 比如虎牙直播APP的直播间页面就新开辟了一个新空间用来推荐其他直播，为其他直播引流。 虎牙APP的空间折叠↓↓ 除了直播产品，飞书会议也采用了空间折叠的设计方法，折叠视频窗口后有更多的空间用于文档演示，当界面元素过多时也可以考虑如此的设计方法。 你会发现上述三种折叠设计方式都包含了一种微动效。 比如小红书的文字展开折叠不是生硬的短文本和长文本切换，而是文字像一把扇子一样展开，然后折