102
App设计中的水平滚动提供了一种改善用户体验的新方法,但水平滚动列表是否真的一直在运行?设计师需要思考。
随着移动屏幕越来越大,用户对更多内容的需求也在增加。如何在有限的屏幕上显示足够的内容?我想这个问题一直困扰着许多UI / UX设计师。在这种情况下,App设计中的水平滚动受到了大多数设计师的青睐。
可扩展内容的传统设计方法包括Y方向列表滑动,Z方向3D触摸,门户内容折叠等。在本文中,我将讨论App设计中的水平滚动,这可能首先出现在水平滑动设计中的Windows Phone。通常,它用于在单个页面上沿X轴扩展内容。如今,这种交互设计广泛应用于各种应用程序。
然而,每一朵云都有一线希望。虽然水平滚动列表确实在一个页面上呈现更多内容,但也会出现有关良好用户体验的问题,例如可见性差,优先级混乱和混合内容。因此,在App设计中应用此交互时,必须仔细准备设计人员。只有这样,您才能充分利用这种设计,最终获得良好的用户体验。
现在,我想分享我在使用它时遇到的情况。希望它对您的设计工作有所帮助。
单页的多维信息架构是水平滚动列表最合适的应用场景。传统列表更适合于无限的内容,纵向呈现,并显示单个属性(例如Wechat of Wechat和Quora)。对于App的主页,它可能包含各种信息,因此需要水平滚动以扩展更多内容。
以Airbnb的最新版本为例,主页包含大量的尺寸,包括横幅,流行体验,体验,住房,旅游目的地选择等。此外,每个尺寸分别占据一个整行以显示具体内容。此外,通过检查iOS App Store,它将页面划分为不同的尺寸以呈现不同的应用程序
设计师将这种设计称为“泳道”。
正如您所看到的,Airbnb和iOS App Store的整个页面都基于“泳道”,X和Y方向显示,用户浏览并不困难。但是当在Y方向列表中添加水平滚动时,场合变得更加复杂。这就是设计师经常犯错误的地方。
根据信息优先权,每条车道的“主题”非常重要。通常,每个小水平卡的面积不能太大,因此不可能显示信息以及显示整个车道的主题。
为了解决这个问题,需要一个强大的视觉信息,足以引导整个车道。最常见的做法是在车道上方设置一个突出的“标题”。
最近,更具戏剧性的方法应运而生。这是为了在车道的左端直接添加强烈的内容氛围。下面的图片在旧版阅读App的左侧,例如,设计师结合文本和图片来强调主题,它在这方面确实做得很好。
但是,它也浪费了很多空间来有效地显示内容。而且,它违反了优先级的UI设计原则。
为了弥补这一不足,它在最新版本中变成了具有高视觉优先级的小配方。
有很多方法可以指导,但最常见的3种方法包括:首先,在左侧和右侧添加箭头; 第二,在底部添加显示器; 第三,保留后续内容。
无论如何,无论您选择什么,请确保提供一个明确的标志,通知用户以下内容可以水平滑动。特别是当您在用户(如一般电子公司和报纸阅读)中赢得一个大市场时,对于您的老年用户而言,他们缺乏关于交互设计的知识,他们可能不像那些设计师或产品经理那样熟悉它。结果,它可能降低这种交互的效率。
举一个反面的例子,Instagram最近增加了一项功能,允许用户一次滑动几张图片。但是,与令人惊叹的图片相比,底部的指示器仅仅是不可见的,因此导致徒劳的用户体验和交互设计。
我们可以在一个页面上无限地在App设计中应用水平滚动吗?答案肯定是否定的。考虑到我自己的经验,平均5到10张牌更好。少于5个可能无法满足用户对必要信息差异的期望,而超过10个可能会限制用户深入了解每个主题并探索更多细节。
严肃的说明:如果您无法控制主题卡的数量,您最好设计一个备份计划。
以Koala海外网上购物为例,用户的评论模块将通过水平滚动列表显示图片,但设计师无法严格检查数字。有些项目被评论有几张图片,而有些可能只有一张甚至没有。
我们注意到考拉采用了不同的设计过程提示,以适应不同的内容。但是对于那些只有一张照片的人来说,如果跟随右边的“全部看到”,就会非常尴尬。
说到“看全部”,通常需要出现在泳道中。显示时,您只需直接点击标题或标题后面有一个输入指南。然而,在大多数情况下,它只会在您滑到最后一张卡片时出现,这为那些想要探索更多卡片的人提供了一条出路。
设计师更喜欢水平滚动设计,因为它拥有极高的信息密度。而且,每个页面背后的逻辑更合理。而且,这样做真的很酷。但对于具有丰富经验的设计师而言,相反,他们倾向于避免这种互动,因为生产力低,主要集中在以下两个方面:
首先,正如我之前提到的,许多用户习惯于与垂直滑块交互的传统方式,并且他们不愿意水平滚动,他们也不熟悉。
根据我的经验和与朋友的沟通,水平滚动模块的使用率和点击率都低于传统的。即使只有几张卡片,很少有用户会滑到最后一张卡片。因此,对于那些习惯于沿着常规方向滑动的人来说,通过添加一个完全不同的浏览方向来改变他们的习惯并不容易。
其次,关于水平和垂直滚动的错误优先级可能导致期望错误。例如,以下App Store,您看到的所有内容都是Apps。他们只是按不同的方式组织。
然后又出现了另一个问题:我们应该优先考虑我们喜欢的新应用程序还是我们今天所玩的内容?
如果您想购买其中一个资源市场,您会选择第二页上的高优先级通道,还是第一页上的优先级较低的通道?
答案很清楚,你在第一页上看到的内容获得了更高的优先级,因此命中率和曝光率也是如此。但实际上,这不是设计师和产品经理所期望的,他们只专注于将高优先级的应用程序放在首位,而忽略了低点击率。
同时,更多的应用程序退出使用水平滚动,而是直接显示内容。
总而言之,希望通过我自己的工作经验获得的上述信息可能会有所帮助。顺便说一句,我想建议你一个显示图片轮播的演示。谢谢阅读。
热门分享
最新文章
2019.10.21
杭州企业网站设计:高质量免费WordPress主题
2019.10.21
杭州高端网站设计:Web设计博客上成功地将这些文章组合在一起
2019.09.19
杭州设计网站:创造性的电影海报
2019.09.19
杭州做网站:所有新的PHP, CSS和HTML帮助表
2019.09.17
杭州公司网站设计:欢迎来到instantShift
2019.09.16
杭州网页设计:开发工具和服务,你应该看看
2019.09.12
杭州建站公司:你可能不知道10有用Github特性
2019.09.11
杭州做网站:有用的工具和技巧的用户友好的界面
2019.09.11
杭州企业网站制作:创建现代很容易与Gridlex CSS布局网格系统
2019.09.07
杭州网站建设:设计团队的生产力和Web应用程序的技巧
随机推荐
2019.08.14
杭州网站优化:SEO链接建设的终极指南——专家技术与工具
2019.09.19
杭州做网站:所有新的PHP, CSS和HTML帮助表
2019.08.16
杭州网站建设:如何在产品副本中摇滚
2019.07.24
杭州网站建设:所有你应该知道的网站可用性测试
2019.08.21
杭州做网站:沟通信息通过视觉层次结构
2019.08.13
杭州网站建设:建立包容性切换按钮
2019.07.17
杭州网站定制:固定技术因素如何增加有机增长
2019.09.19
杭州设计网站:创造性的电影海报
2019.08.15
杭州网站开发:8个跟踪网站指标以促进转换并摧毁您的增长
2019.07.15
杭州高端网页制作:如何修复常见的站点地图错误