[自译]最佳实践-移动端水平列表设计

原文链接：Best Practices for Horizontal Lists in Mobile

原文作者：Suleiman Ali Shakir

现在的内容太丰富了，许多app中都加入了Horizontal list来增加内容的曝光率，减少用户到达内容的路径长度，这很不错，我也很喜欢去水平滑动一下来看更多的内容，看起来是更加地自由了。但是对Horizontal list中的一些设计要点是否有过探究呢？文章作者通过7个要点来阐述如何设计优秀的Horizontal list。同样也指出了Horizontal list的缺点，并且探索了一些适用的替代方法。如果你也正在尝试通过Horizontal来改善feed流内容结构，不妨去原文中看看作者的思路。:)

许多的Android和iOS应用都添加了horizontal scrolling lists。它可能结合进vertical lists来使用。那么它是否必要呢？假设它是合理的，你又是否正确的运用了它？

在这篇文章中，我们会讨论一些horizontal lists的设计要点。然后再去探索一些更有效的替代方法。

那那么我们来想想，为什么移动端会出现 horzontal lists？

horizontal lists更适合在移动端，它支持横向和竖向的手势。

Netflix iOS app

现在，包括你和我在内的大多数人，都会竖着滑动。这是当你打开app后，很自然会做的第一件事。可能你第一时间会查看通知，但是之后你还是会去滑动。

那么，你如何告诉用户他们可以横向滑动？在这之前还请思考，什么场合适合使用横向滑动？

Horizontal lists最适合的场景是，你希望在不均匀的列表中，去展示均匀的子内容。

怎么去理解呢？

让我们来看看Android上的Play Store。在Play Store中你可以发现新的app。但是为了让搜索的效果更好，apps需要被分类。

举个例子，你可以将apps分为游戏，工具，社交等等。因此，每一类的apps都可以被放在一个horizontal list中。

Android上的Google Play Store

像你看到的一样，Play Store给了我们各种各样的apps。也有一堆你可以横向浏览的推荐应用。这里有一组应用是“New+Updated”。

所以根据上面的定义，每个子类别的app都放在一个horizontal list中。而这些子类别都在同一个垂直列表中。

你可以横向去滑动，查看更多的子类别内容。你可以垂直滑动查看其他的子类别。

在iOS上的iTunes就是另一个很好的例子。

iOS上的iTunes

移动端Horizontal lists设计要点

在web端上，箭头可以提示这里有Horizontal list可以进行操作。典型的例子就是carousel。它结合了箭头导航，指示点和滚动条。这些标识都在告诉人们如何操作carousel。

好吧，我们来说说移动端。我向你展示web端的形态是有原因的。

你看到了web的版本，你不能在移动端也这样设计。移动端是基于触屏手势的。你会在移动端使用鼠标箭头的操作吗？

此外，考虑到移动端的尺寸，使用web端的设计范例也没有意义。所以应该去挖掘一种更好的方法。希望用户可以向在vertical list中那样流畅。

这里有一些需要去记住的设计要点。它们可以帮助你完成更好的，更有效的horizontal lists。

1.展示视觉提示

假设你正在设计卡片的horizontal list。你希望在最右边的一张卡片也能够被选择。

那么设计中必须留下可视化的提示，让用户知道这一组内容可以水平滑动。

对于特殊宽度的设备，我们可以显示两张卡片，如果要查看第三张或更多，那就需要水平滑动。

注意看，设计可以简化第三张卡片。最末端的粉红色卡片是部分隐藏的。这是一个微妙的暗示，这里还有更多的内容。

由于内容是水平的，所以它很自然的暗示了用户在哪一个方向滚动。因此，用户本能的也会向这个方向滚动。

2.使用“查看更多”的按钮

查看更多，显示更多，查看全部，显示全部...

将你想要的东西命名为按钮。从本质上而言，这意味着：

一个“查看更多”的按钮告诉用户更多的信息来自哪里。它暗示了有更多类似的内容可以查看。

请记住，每个子类别（horizontal list），就是对用户期望内容的梳理。

在“查看更多”中使用三列网格布局

所以当一个用户点击“查看更多”的时候，你要向他们展示这个子类别的所有内容。例如，假设用户点击了Play Store中的“热门动作游戏”，那么“查看更多”就应该显示这个子类别中所有的优秀动作游戏。

记住，垂直滚动是最自然和最快速的。垂直滚动让用户浏览内容更加高效。因此，在所有的屏幕上使用垂直网格是有意义的。

3.为响应设计

移动端app的界面是需要响应的。所以确保这个暗示总是存在，否则，你可能会看起来像是网格的horizontal list。

horizontal list看起来像是网格

从上面的界面中，你可以看出来每个子类别是一个水平列表嘛？你可以判断出它可以水平滚动嘛？

看不出来的话也不怪你，这是设计上的差错，没有清晰的视觉提示。

你并不希望它看起来就是垂直的格子，如果看起来是这样的，用户本能地会进行垂直滚动。

4.为平板调整Horizontal list

那么，你如何在更大的设备上去设计Horizontal lists？

你可以将horizontal list转化成一行有N个item的网格。上面的界面显示了5个item，还有一个“查看更多”的按钮，用户可以在新屏幕上查看更多的此类内容。

因此，在移动设备上，它可以是十张卡片的滚动horizontal list。在平板上，你可以设置为5～6张不可滚动的卡片。

5.在平板上限制水平内容

平板带来了更宽的屏幕，因此充分利用屏幕是聪明的设计。

我们先来看看水平滚动。在移动设备上它的表现很不错，默认下显示3个内容，其余的通过水平滚动查看，这意味着隐藏的内容是可选的。如果用户感兴趣，他们可以滚动查看更多的信息。如果他们想要了解更多，可以点击“查看更多”的按钮。

现在让我们回到平板上。你也会延续这种设计惯性，在水平上显示更多内容。这也有一定的道理，如果宽度更合适，用来展示更多的内容也很自然，是吧？

我们来看看。

不要在平板上拉伸horizontal list

给出5～6个内容，足够让用户知道这一个子类别的信息。用户可以滚动查看更多的信息，但他们更习惯垂直滚动。如果他们想要看到更多的内容，可以点击“查看更多”的按钮。

因此，只显示5～6个不可滚动的网格是有道理的，给出太多的选择只会增加用户的认知负担，这不是一件好事。

每次当你访问一个网站，就会是一个学习的过程，你的脑子必须学会如何使用它，也要知道你是怎么操作的。这段时间的脑部活动被叫做认知负荷。-减少认知负荷的设计原则

这是在web的情景中，在移动端，这一点同样需要去在意。移动端的注意力更短。

6.快速水平滑动

这是一项限制自由滚动的技术，通过这个GIF，你可以更好的理解。

你看到横向滚动条了吗？当用户水平滑动时，下一项就会略微可见，即使是滑动之后，也有更多的内容可见。

虽然这很难引起注意，但是一个很好的提示。这非常微妙，却是有效的暗示，表明有更多的内容。

7.显示列表的开始与结束

当滑动停止了，我们知道到达了列表的端部。但是如果我们不滑动，我们是不是就不知道了呢？

Android在列表的端部使用了一个简练的动画，但是只有用户在滑动的时候才会出现，这意味着用户操作后才有反馈。

我们如何能将它做得更好？你希望用户通过滚动来查看吗？如果能更直观地展示出这一点，是不是更好呢？

使用额外的间隔来表明列表的开始与结束。

这种方法也适用于horizontal list。在水平列表的左侧和右侧添加额外的间隔。

端部的额外间隔

显示垂直滚动

假设你的app支持水平和垂直滚动。我们已经讨论过通过视觉来暗示水平滚动。

那么你如何来暗示垂直滚动？web端在一侧有滚动条，那移动端呢？

这里有一个巧妙的技巧，虽然在很多app中看不到，使用光。

在底部暗示有更多的内容

不要将Tabs和Horizontal list混淆

如果你的应用有tab，并且其中一个包含了水平滚动列表，像这样。

你如何在tabs间切换？水平滑动。那你如何滑动列表呢？水平滑动。

这里同一个手势触发两个不同的操作。

我们需要区分水平滑动和标签切换两个功能。我们不希望用户在滑动水平列表的时候被带进下一个标签。

我们该怎么做？

最简单的方法就是禁用水平标签滑动。最困难的方法就是重新思考你的导航。但要记住，简单并不意味着更好。

Amazon Prime app

看看Amazon Prime  Video app在Android上的表现，他们带有tab和horizontal list。但是为了避免在滚动中切换，它禁用了tab的切换。因此需要在tab上进行点选操作。

如果你希望显示内容的不同类别，可以考虑使用水平列表。但是将它应用在包含tab的屏幕中。

Horizontal list 的替代方法

horizontal list的目的是显示特定类别的相似内容。

大多数这样的app，都会显示一个类别的N个item。其余内容都隐藏在按钮之后。

无论哪种方式，你都没有显示一个类别下的所有内容。假设你显示10个，用户也不得不点击“查看全部”来看剩余的50个，和其他内容。

如果你的horizontal这样做了，你可能不需要horizontal list。

使用网格替代

没有水平滚动，用户可以快速的浏览内容。他们只需要在一个方向上去滚动。在平板上的设计应对了这种情况。

下面的例子更好一些。Google Play Music应用展示了列表中的4个内容，并将他们整理在了一起，你可以通过tap缩略图来播放列表中的其他音乐。

这样的设计有两个优点：

1.保留了用户在一个方向上的浏览路径。

2.比在horizontal list中显示更多的内容。

用户不需要滑动就能查看到更多的内容，不是吗？

另一种选择就是重新思考，你确认需要那些嵌套进页面的horizontal list吗？用户会自然的滑动，如果打破滑动的方向，都破坏了用户快速浏览的能力。

因此，在你决定采用horizontal list之前，请意识到它的缺点。看看其他的替代方式是不是可以采纳。

对于Android开发

在垂直的父级列表中嵌套horizontal list是苦难的，嵌套循环视图会更容易一些，但很难得到理想的效果。

在Google I/O2016上，Nick Butcher开源了解决方法。还有一系列的性能调整，你可以在GitHub上看到。

结语

关注内容的app应用了嵌套的horizontal list。虽然这方法并没有错，但是必须正确实现。因为手势操作的存在，水平滑动在移动端上更为直观。

但需要小心，因为它也破坏了自然的浏览模式。在本文的前面部分，我们讨论了Google Play Store，也发现了在哪些场景中更为合适。

作为UI/UX设计者，我们有义务确保我们的用户不会混乱。毕竟滚动是最常用的手势。