【注意事项】APP左右横滑设计

移动端屏幕愈来愈大，但用户对内容量的要求也水涨船高。如何在有限的屏幕内透出更多的内容，是设计师们研究的重点。

经常使用的内容拓展设计有：Y 方向 List 滑动、Z 方向 3D Touch 、入口式内容折叠等。今天想和你们聊的，是其中的“左右横滑”卡片式交互设计。

所谓的“左右横滑”交互英文名叫作“Horizontal Scrolling Lists”，最先可能起源于 Windows Phone 的横向内容滑动设计。用于在同一个页面的 X 轴方向拓展内容空间，“左右横滑”的交互方式被普遍应用于各种 App 中。

不过，凡事都有两面性。当“左右横滑”的交互把更多内容塞到了页面中时，也产生了诸如可见性差、优先级混乱、内容不突出等体验风险。所以，在使用这种设计时必须有所准备，确保它发挥出最大的效用。

接下来，把我本身设计中遇到的一些“心得”和“坑”分享给你们。

1. 挑选合适的使用场景

单页多维度的信息结构是“左右横滑”最适合的应用场景。传统的 List 适合纵向无限呈现单一属性的内容(好比朋友圈或知乎的回答)，而对于 App 首页等多种信息聚合的页面，就适合横向开拓内容维度。

以最新版的 Airbnb 为例，它将首页分割为 Banner、热门体验、体验、房源、旅游目的地精选等多个维度，每一个维度单独占据一整行，并展示并列的内容。再看 iOS App Store，也是将页面分为诸多维度，把不一样的应用分类呈现。

设计师们很形象地把这种设计称为“泳道”。

能够看到，Airbnb 和 iOS App Store 整个页面的重心都是利用“泳道”构成的，虽然存在 X、Y 两个浏览方向，但浏览起来并不困难。不过，更复杂的场景是在一个 Y 方向 List 列表中穿插使用“左右横滑”，这时，会有比较多的坑。

2. 显眼并适宜的主题展现

从信息优先级上能看到，每一个泳道的“主题”很是重要。一般，横向每一个小卡片的面积不会太大，因此不可能既展现自身信息，又告知整个泳道的主题。

为此，必须有很是强的视觉信息总领整个泳道。最多见的作法，是在泳道上方设置显眼的“标题”。

最近还常见到比较夸张的作法，是直接在泳道最左端给一个强内容氛围。如下图左侧的轻芒阅读 App 旧版页面为例，图片+文字氛围的作法虽然极大强调了主题，但却也极大浪费了展示效率，违背了内容优先的原则，效果并很差。

为此，轻芒阅读也在最新版本改为了小面积、高视觉优先级的标题形式。

3. 引导左右滑动(可见性)

引导的方式有不少，最多见的三种作法分别是：左右加引导箭头、底部加指示器、后续内容漏一部分。

但无论怎么样，必需要有明显的标志告诉用户下面的内容是能够左右滑动的。尤为，当你的用户受众面很是广(普通电商、新闻阅读等)时，年龄较大的小白用户未必像设计师和产品经理们对“左右横滑”的交互这么熟悉，这也会间接致使这种方式的效率降低。

举个反面例子，Instagram 不久前新增了图片多张左右滑动的设计，可是咱们发现它底部的指示器在头上图片很是抢眼的状况下很是不容易被发现，指示效果并很差。

4. 控制数量并避免极限状况

左右滑动的内容是否是能够放无限个?固然不是。根据个人经验，通常5-10个卡片为佳，过少会致使与用户期待不符，一滑就见底;而过多则不如引导用户去更详细的主题页面，展现更多相关信息。

须要注意的是，若是你没有办法强控一个主题下的卡片数量，就必须从设计上作好后备方案。

如下面的考拉海淘为例，用户评论模块将带图评论以左右滑动的形式展现，但数量没法严格控制，毕竟有些商品有不少带图评论，有些则不多甚至没有。

设计上，咱们能够看到内容不少和没有内容的状况，考拉作了适配。可是对于只有一个带图评论的状况，右边紧跟“查看所有”，就显得有些奇怪了。

说到“查看所有”，通常也要求必须出如今泳道当中。呈现上，有直接点击标题或标题后跟着入口的方式来引导，而更多的，也有当滑动到卡片最后一张时才露出“查看所有”，为那些看到最后还意犹未尽的用户一个出口。

5. 低效率和错误的优先级

设计师们都喜欢“左右横滑”的设计，不只由于信息密度大，页面层次好梳理，更多也是由于操做方式“酷”。但有经验的设计师会尽量拒绝“左右横滑”，由于它的效率仍是过低。而效率低，体如今两个方面：

首先，就像上面说过的，更多的小白用户对左右滑动的预期并不强，仍是更加适应纵向滑动的传统交互方式。

经过本身工做中的实验和与朋友闲聊分享的交互数据上来看，左右滑动的组件在滑动使用率和卡片点击率上显著低于其余正常铺出来的内容。有时即使卡片数量很少，滑动到最后的用户也是寥寥无几。可见，在习惯于一个浏览方向时，强行插入一个彻底垂直的方向，用户习惯并不容易改变。

其次，纵向和横向优先级经常致使预期错误。如下图 App Store 为例，所谓的内容都是 App，泳道只是用不一样的维度把 App 组织起来。

那么请问，是“本周新游”中排在第二页的某个 App 优先级更高，仍是“新鲜 App”甚至“外表有格调”中的前几个应用优先级更高呢?

若是你要购买其中一个资源位，你要更高优先级“泳道”中的第二屏位置，仍是低优先级“泳道”中的第一屏位置呢?

答案固然是首屏就能看到的信息优先级更高，数据上也会有更高的点击率和曝光率。但实际上，这与不少设计师和产品经理的预期不符，他们只关注把高优先级的东西往上提，却疏忽了左右滑动的交互方式触发率很是低。

同时，更多软件选择不使用“左右横滑”，而直接把内容披露出来，好比微信阅读：

综上所述，但愿对你们使用“左右横滑”这种形式的交互方案时，有一些帮助。

文章来源：http://www.haitaoit.com/news-list-82-0-1.html