移动端横向滑动交互设计

横向滑动历史

2005年，全国范围的web可用性报告里都陈述了：网页设计中尽量不要试哟过横向滚动。这是由于这种斜向一边的交互方式让用户迷惑。他并没有遵从网页设计易用性的标准。

这个趋势是怎么改变的呢？
随着近几年像iPads这样技术的出现以及智能手机的普及。在移动设备上，滑动交互更加直观，简单的一个手指扫动全部站点内的信息就展现在用户面前啦。同时，很快这个交互方式就会普及到每个人，就像现在可能一打开app就下意识纵向滑动。接下来呢，作为设计师，我们怎么样让横向滑动更直观呢。我在设计中总结了一些小建议：

1.仔细规划-再适合的地方出现适合的功能：Careful planning — Figure out what fits where

好吧，这个在建议列表中并不是那个让人眼前一亮的，但他是最重要的。

我们学习设计的第一件事是关于规划。但是面对时间紧凑、临近交稿日期或者自己懒惰了就会导致我们没有任何规划的设计。但是，在设计横向滑动时，一定要腾出时间做规划，在纸上画原型，找到适合这种交互的时机和地方。有很多事情需要考虑，因为之前并没有太多的设计师用过这种交互，在横向滑动倾注心血要比在纵向多得多。

2.在特殊情况下使用横向滑动：Use horizontal scroll in specific cases

如果你想展示某个类别下的子集，横向滑动非常适合。向下面几种情况适合横向滑动的使用情景：

a.展示庞大的产品目录，保证不同种类的产品快速呈现

b.展示那种可视区域很大，一瞥不能看圈的信息（比如地图）

c.展示app上明确的分区或者滑屏

3.可视化：Show visually
横向站点对于用户来说，不如他们常见的纵向站点直观。所以，桌面端用鼠标指针或者点来引领视线。即使对于设计师来说，点击后就会知道接下来发生什么，但是对于用户来说更希望得到除指针以外的提示。虽然指针在桌面端很好用，但是移动端是效果却不好，因为移动端交互式是触碰而不是鼠标单击。

所以针对移动端，你要做些差异化设计。你的设计必须包含视觉暗示让用户知道哪一系列的内容是可以横向滑动的。最好的办法是让一部分内容peek out

4.列表结束位置极端的暗示： Indicate extremes of a list
告诉用户哪里是滚动的结束点是很重要滴。我们常常会注意到，用户反复的滚动，以为他们不确定之前的操作是否已经滚动到尽头了。

a.干净的动效，能够帮助用户意识到已经到达列表结束处

b.另一种方法是通过间隙

横向滑动的优点：

1.几乎能够100%适配到所有设备，保持了一致性
2.为二级信息提供了展示空间，并且不占用页面空间。比如在图片画廊里的图片，横向滑动可以让用户预览内容，可以划过或者点击查看。
3.横向滑动节约了纵向屏幕空间。而不是将所有内容都展示在一个很长的页面。纵向布局让所有的信息都成小块展示。但是横向滑动更加灵活。现在，内容可以在横向和纵向两个方向同时展示。
4.横向滑动可以让用户预知分类里的内容，通过往一边滑、向下滑，差不不同类别的内容。两个维度让用户可以在同一个界面中看到更多的类别和选择。

结论：

网上现在有很多针对横向滑动和它对用户体验的影响的讨论。但是我相信，如果这种交互方式被广泛的应用的话可以节省手机屏纵向的空间，有助于app内容的划分。

---

原文链接