移动端屏幕越来越大,但用户对内容量的要求也水涨船高。如何在有限的屏幕内透出更多的内容,是设计师们研究的重点。
常用的内容拓展设计有:Y 方向 List 滑动、Z 方向 3D Touch 、入口式内容折叠等。今天想和大家聊的,是其中的“左右横滑”卡片式交互设计。
所谓的“左右横滑”交互英文名叫做“Horizontal Scrolling Lists”,最早可能起源于 Windows Phone 的横向内容滑动设计。用于在同一个页面的 X 轴方向拓展内容空间,“左右横滑”的交互方式被广泛应用于各类 App 中。
不过,凡事都有两面性。当“左右横滑”的交互把更多内容塞到了页面中时,也产生了诸如可见性差、优先级混乱、内容不突出等体验风险。因此,在使用这种设计时必须有所准备,确保它发挥出最大的效用。
接下来,把我自己设计中遇到的一些“心得”和“坑”分享给大家。
1. 挑选合适的使用场景
单页多维度的信息结构是“左右横滑”最适合的应用场景。传统的 List 适合纵向无限呈现单一属性的内容(比如朋友圈或知乎的回答),而对于 App 0638太阳集团「中国」官方网站等多种信息聚合的页面,就适合横向开拓内容维度。
以最新版的 Airbnb 为例,它将0638太阳集团「中国」官方网站分割为 Banner、热门体验、体验、房源、旅游目的地精选等多个维度,每个维度单独占据一整行,并展现并列的内容。再看 iOS App Store,也是将页面分为诸多维度,把不同的应用分类呈现。
设计师们很形象地把这种设计称为“泳道”。
可以看到,Airbnb 和 iOS App Store 整个页面的重心都是利用“泳道”构成的,虽然存在 X、Y 两个浏览方向,但浏览起来并不困难。不过,更复杂的场景是在一个 Y 方向 List 列表中穿插使用“左右横滑”,这时,会有比较多的坑。
2. 显眼并适宜的主题展示
从信息优先级上能看到,每个泳道的“主题”非常重要。通常,横向每个小卡片的面积不会太大,所以不可能既展示自身信息,又告知整个泳道的主题。
为此,必须有非常强的视觉信息总领整个泳道。最常见的做法,是在泳道上方设置显眼的“标题”。
最近还常见到比较夸张的做法,是直接在泳道最左端给一个强内容氛围。以下图左侧的轻芒阅读 App 旧版页面为例,图片+文字氛围的做法虽然极大强调了主题,但却也极大浪费了展现效率,违背了内容优先的原则,效果并不好。
为此,轻芒阅读也在最新版本改成了小面积、高视觉优先级的标题形式。