杭州网页设计：应用程序设计中的横向滚动为什么值得注意？

2019.07.24 mf_web

102

App设计中的水平滚动提供了一种改善用户体验的新方法，但水平滚动列表是否真的一直在运行？设计师需要思考。

随着移动屏幕越来越大，用户对更多内容的需求也在增加。如何在有限的屏幕上显示足够的内容？我想这个问题一直困扰着许多UI / UX设计师。在这种情况下，App设计中的水平滚动受到了大多数设计师的青睐。

可扩展内容的传统设计方法包括Y方向列表滑动，Z方向3D触摸，门户内容折叠等。在本文中，我将讨论App设计中的水平滚动，这可能首先出现在水平滑动设计中的Windows Phone。通常，它用于在单个页面上沿X轴扩展内容。如今，这种交互设计广泛应用于各种应用程序。

然而，每一朵云都有一线希望。虽然水平滚动列表确实在一个页面上呈现更多内容，但也会出现有关良好用户体验的问题，例如可见性差，优先级混乱和混合内容。因此，在App设计中应用此交互时，必须仔细准备设计人员。只有这样，您才能充分利用这种设计，最终获得良好的用户体验。

现在，我想分享我在使用它时遇到的情况。希望它对您的设计工作有所帮助。

水平滚动

1.选择正确的使用方法

单页的多维信息架构是水平滚动列表最合适的应用场景。传统列表更适合于无限的内容，纵向呈现，并显示单个属性（例如Wechat of Wechat和Quora）。对于App的主页，它可能包含各种信息，因此需要水平滚动以扩展更多内容。

以Airbnb的最新版本为例，主页包含大量的尺寸，包括横幅，流行体验，体验，住房，旅游目的地选择等。此外，每个尺寸分别占据一个整行以显示具体内容。此外，通过检查iOS App Store，它将页面划分为不同的尺寸以呈现不同的应用程序

Airbnb列表

设计师将这种设计称为“泳道”。

正如您所看到的，Airbnb和iOS App Store的整个页面都基于“泳道”，X和Y方向显示，用户浏览并不困难。但是当在Y方向列表中添加水平滚动时，场合变得更加复杂。这就是设计师经常犯错误的地方。

2.吸引人的和适当的主题

根据信息优先权，每条车道的“主题”非常重要。通常，每个小水平卡的面积不能太大，因此不可能显示信息以及显示整个车道的主题。

为了解决这个问题，需要一个强大的视觉信息，足以引导整个车道。最常见的做法是在车道上方设置一个突出的“标题”。

最近，更具戏剧性的方法应运而生。这是为了在车道的左端直接添加强烈的内容氛围。下面的图片在旧版阅读App的左侧，例如，设计师结合文本和图片来强调主题，它在这方面确实做得很好。

但是，它也浪费了很多空间来有效地显示内容。而且，它违反了优先级的UI设计原则。

为了弥补这一不足，它在最新版本中变成了具有高视觉优先级的小配方。

水平列表

3.水平滚动指导（可视性）

有很多方法可以指导，但最常见的3种方法包括：首先，在左侧和右侧添加箭头; 第二，在底部添加显示器; 第三，保留后续内容。

无论如何，无论您选择什么，请确保提供一个明确的标志，通知用户以下内容可以水平滑动。特别是当您在用户（如一般电子公司和报纸阅读）中赢得一个大市场时，对于您的老年用户而言，他们缺乏关于交互设计的知识，他们可能不像那些设计师或产品经理那样熟悉它。结果，它可能降低这种交互的效率。

举一个反面的例子，Instagram最近增加了一项功能，允许用户一次滑动几张图片。但是，与令人惊叹的图片相比，底部的指示器仅仅是不可见的，因此导致徒劳的用户体验和交互设计。

instgram列表

4.控制数量，避免限制案件

我们可以在一个页面上无限地在App设计中应用水平滚动吗？答案肯定是否定的。考虑到我自己的经验，平均5到10张牌更好。少于5个可能无法满足用户对必要信息差异的期望，而超过10个可能会限制用户深入了解每个主题并探索更多细节。

严肃的说明：如果您无法控制主题卡的数量，您最好设计一个备份计划。

以Koala海外网上购物为例，用户的评论模块将通过水平滚动列表显示图片，但设计师无法严格检查数字。有些项目被评论有几张图片，而有些可能只有一张甚至没有。

我们注意到考拉采用了不同的设计过程提示，以适应不同的内容。但是对于那些只有一张照片的人来说，如果跟随右边的“全部看到”，就会非常尴尬。

说到“看全部”，通常需要出现在泳道中。显示时，您只需直接点击标题或标题后面有一个输入指南。然而，在大多数情况下，它只会在您滑到最后一张卡片时出现，这为那些想要探索更多卡片的人提供了一条出路。

5.低生产率和错误的优先事项

设计师更喜欢水平滚动设计，因为它拥有极高的信息密度。而且，每个页面背后的逻辑更合理。而且，这样做真的很酷。但对于具有丰富经验的设计师而言，相反，他们倾向于避免这种互动，因为生产力低，主要集中在以下两个方面：

首先，正如我之前提到的，许多用户习惯于与垂直滑块交互的传统方式，并且他们不愿意水平滚动，他们也不熟悉。

根据我的经验和与朋友的沟通，水平滚动模块的使用率和点击率都低于传统的。即使只有几张卡片，很少有用户会滑到最后一张卡片。因此，对于那些习惯于沿着常规方向滑动的人来说，通过添加一个完全不同的浏览方向来改变他们的习惯并不容易。

其次，关于水平和垂直滚动的错误优先级可能导致期望错误。例如，以下App Store，您看到的所有内容都是Apps。他们只是按不同的方式组织。

然后又出现了另一个问题：我们应该优先考虑我们喜欢的新应用程序还是我们今天所玩的内容？

应用程序商店 - Feaetured标签传情

如果您想购买其中一个资源市场，您会选择第二页上的高优先级通道，还是第一页上的优先级较低的通道？

答案很清楚，你在第一页上看到的内容获得了更高的优先级，因此命中率和曝光率也是如此。但实际上，这不是设计师和产品经理所期望的，他们只专注于将高优先级的应用程序放在首位，而忽略了低点击率。

同时，更多的应用程序退出使用水平滚动，而是直接显示内容。

总而言之，希望通过我自己的工作经验获得的上述信息可能会有所帮助。顺便说一句，我想建议你一个显示图片轮播的演示。谢谢阅读。