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

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标签传情

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

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

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

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

最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP