为什么在App设计中,应该慎用左右横滑设计?

移动端屏幕越来越大,但用户对内容量的要求也水涨船高。如何在有限的屏幕内透出更多的内容,是设计师们研究的重点。

文章目录[隐藏]

为什么在App设计中,应该慎用左右横滑设计?

移动端屏幕越来越大,但用户对内容量的要求也水涨船高。如何在有限的屏幕内透出更多的内容,是设计师们研究的重点。

常用的内容拓展设计有:Y 方向 List 滑动、Z 方向 3D Touch 、入口式内容折叠等。今天想和大家聊的,是其中的“左右横滑”卡片式交互设计

所谓的“左右横滑”交互英文名叫做“Horizontal Scrolling Lists”,最早可能起源于 Windows Phone 的横向内容滑动设计。用于在同一个页面的 X 轴方向拓展内容空间,“左右横滑”的交互方式被广泛应用于各类 App 中。

为什么在App设计中,应该慎用左右横滑设计?

不过,凡事都有两面性。当“左右横滑”的交互把更多内容塞到了页面中时,也产生了诸如可见性差、优先级混乱、内容不突出等体验风险。因此,在使用这种设计时必须有所准备,确保它发挥出最大的效用。

接下来,把我自己设计中遇到的一些“心得”和“坑”分享给大家。

1.  挑选合适的使用场景

单页多维度的信息结构是“左右横滑”最适合的应用场景。传统的 List 适合纵向无限呈现单一属性的内容(比如朋友圈或知乎的回答),而对于 App 首页等多种信息聚合的页面,就适合横向开拓内容维度。

以最新版的 Airbnb 为例,它将首页分割为 Banner、热门体验、体验、房源、旅游目的地精选等多个维度,每个维度单独占据一整行,并展现并列的内容。再看 iOS App Store,也是将页面分为诸多维度,把不同的应用分类呈现。

为什么在App设计中,应该慎用左右横滑设计?

设计师们很形象地把这种设计称为“泳道”。

为什么在App设计中,应该慎用左右横滑设计?

https://medium.muz.li/the-horizontal-scroll-interface-46b8f69f54ff

可以看到,Airbnb 和 iOS App Store 整个页面的重心都是利用“泳道”构成的,虽然存在 X、Y 两个浏览方向,但浏览起来并不困难。不过,更复杂的场景是在一个 Y 方向 List 列表中穿插使用“左右横滑”,这时,会有比较多的坑。

2.  显眼并适宜的主题展示

从信息优先级上能看到,每个泳道的“主题”非常重要。通常,横向每个小卡片的面积不会太大,所以不可能既展示自身信息,又告知整个泳道的主题。

为此,必须有非常强的视觉信息总领整个泳道。最常见的做法,是在泳道上方设置显眼的“标题”。

最近还常见到比较夸张的做法,是直接在泳道最左端给一个强内容氛围。以下图左侧的轻芒阅读 App 旧版页面为例,图片+文字氛围的做法虽然极大强调了主题,但却也极大浪费了展现效率,违背了内容优先的原则,效果并不好。

为此,轻芒阅读也在最新版本改成了小面积、高视觉优先级的标题形式。

为什么在App设计中,应该慎用左右横滑设计?

3.  引导左右滑动(可见性)

引导的方式有很多,最常见的三种做法分别是:左右加引导箭头、底部加指示器、后续内容漏一部分。

但不管怎么样,必须要有明显的标志告诉用户下面的内容是可以左右滑动的。尤其,当你的用户受众面非常广(普通电商、新闻阅读等)时,年龄较大的小白用户未必像设计师和产品经理们对“左右横滑”的交互这么熟悉,这也会间接导致这种方式的效率下降。

为什么在App设计中,应该慎用左右横滑设计?

举个反面例子,Instagram 不久前新增了图片多张左右滑动的设计,但是我们发现它底部的指示器在头上图片非常抢眼的情况下非常不容易被发现,指示效果并不好。

为什么在App设计中,应该慎用左右横滑设计?

4.  控制数量并避免极限情况

左右滑动的内容是不是可以放无限个?当然不是。根据我的经验,一般5-10个卡片为佳,过少会导致与用户期待不符,一滑就见底;而过多则不如引导用户去更详细的主题页面,展示更多相关信息。

需要注意的是,如果你没有办法强控一个主题下的卡片数量,就必须从设计上做好后备方案。

以下面的考拉海淘为例,用户评论模块将带图评论以左右滑动的形式展示,但数量无法严格控制,毕竟有些商品有很多带图评论,有些则很少甚至没有。

设计上,我们可以看到内容很多和没有内容的情况,考拉做了适配。但是对于只有一个带图评论的情况,右边紧跟“查看全部”,就显得有些奇怪了。

为什么在App设计中,应该慎用左右横滑设计?

说到“查看全部”,一般也要求必须出现在泳道当中。呈现上,有直接点击标题或标题后跟着入口的方式来引导,而更多的,也有当滑动到卡片最后一张时才露出“查看全部”,为那些看到最后还意犹未尽的用户一个出口。

5.  低效率和错误的优先级

设计师们都喜欢“左右横滑”的设计,不仅因为信息密度大,页面层次好梳理,更多也是因为操作方式“酷”。但有经验的设计师会尽可能拒绝“左右横滑”,因为它的效率还是太低。而效率低,体现在两个方面:

首先,就像上面说过的,更多的小白用户对左右滑动的预期并不强,还是更加适应纵向滑动的传统交互方式。

通过自己工作中的实验和与朋友闲聊分享的交互数据上来看,左右滑动的组件在滑动使用率和卡片点击率上显著低于其他正常铺出来的内容。有时即便卡片数量不多,滑动到最后的用户也是寥寥无几。可见,在习惯于一个浏览方向时,强行插入一个完全垂直的方向,用户习惯并不容易改变。

其次,纵向和横向优先级常常导致预期错误。以下图 App Store 为例,所谓的内容都是 App,泳道只是用不同的维度把 App 组织起来。

那么请问,是“本周新游”中排在第二页的某个 App 优先级更高,还是“新鲜 App”甚至“外表有格调”中的前几个应用优先级更高呢?

如果你要购买其中一个资源位,你要更高优先级“泳道”中的第二屏位置,还是低优先级“泳道”中的第一屏位置呢?

为什么在App设计中,应该慎用左右横滑设计?

答案当然是首屏就能看到的信息优先级更高,数据上也会有更高的点击率和曝光率。但实际上,这与很多设计师和产品经理的预期不符,他们只关注把高优先级的东西往上提,却疏忽了左右滑动的交互方式触发率非常低。

同时,更多软件选择不使用“左右横滑”,而直接把内容披露出来,比如微信阅读:

为什么在App设计中,应该慎用左右横滑设计?

综上所述,希望对大家使用“左右横滑”这种形式的交互方案时,有一些帮助。

欢迎关注作者的微信公众号:

zlqr21

「超实用的设计原则大全」

  1. 用户登录:掌握这9个设计原则,快速提高用户登录的体验
  2. 无线表单:专业干货!提高无线端表单可用性的7个设计原则
  3. 动效设计:让动效不止于好看!移动APP的7种动效设计和9条设计原则

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量200万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

原创文章,作者:震天下,如若转载,请注明出处:https://www.iamue.com/20481/

(0)
震天下震天下
上一篇 2017-05-21 14:03
下一篇 2017-05-21 14:43

相关推荐

  • 『小米只卖产品 不卖节操』雷布斯站在巨人的肩膀上做了什么?

    文章来自设计癖 2014 年 12 月 9 日,小米又一次涉嫌抄袭。这一次的对象,是日本巴慕达公司的 AirEngine 安之风空气净化器。同样的专利许可授权纠纷,同样深表遗憾的回应。巴慕达与曾经的魅族、年初的 Pressy 以及…

    2014-12-27
  • 用户体验设计影响力引起两会代表关注,获业界点赞!

    如今,用户体验设计已成为社会广泛关注的话题,在今年两会上,用户体验设计的影响力也引起了两会代表关注。在今年的两会期间,全国政协委员叶友达向大会提交了《关于鼓励基于用户体验的设计创新,加速科技创新成果转化的提案》。设计创新与科技创新互为表里,需要协同发展;从国家层面启动基于用户体验的设计创新倡议,构建用户体验设计创新战略和行动纲领。用户体验是指用户基于对产品、系统、服务使用或者预期使用的态度和反馈。叶友达解释:“说白了,就是我们在产品的设...

    2018-03-20
  • 曝光HR简历筛选逻辑:关键词

    yooooooooooo!这里是周一很不想上班的校花~春招还在如火如荼的进行着,也不知道大家现在有没有拿到offer呢,有的就先恭喜啦,没有的也别着急,心态放平,慢慢来嘛。今天这篇文章,HR现身说法讲述平日筛选简历的真实准则。适合有过实习经历、学习经验的同学优化简历。只需多下一点功夫,简历过筛率大大提高!文 | 撕兄很多人很疑惑,HR到底是如何查找简历,筛选简历,判断简历匹配度的。大部分情况下,只要你能懂得HR是如何查看简历,判断匹配度...

    2018-04-08
  • 一个用户体验设计师的转化率优化准则

    优化,作为一种服务,正变的无处不在。那么,对于通讯公司和专业的优化公司来说这两者有什么区别呢?我见过很多个人和机构在做转化率优化的时候忽视了去思考‘为什么’这个部分。说服用户的方式必须是道德的,因为我们不想破坏整体用户体验、客户的声誉和他们的品牌。从本质上讲,设计一个高转化的网站是我们的工作,并且这也是我们要去推动的边界。 一个漂亮的网站可能在短期内取悦客户,但是,如果网站不赚钱,那幸福会很短暂。

    2017-05-19
  • 私家推荐!九月必收的优质设计资源干货大合集

    小白叨一叨:九月份设计圈的干货 合集来咯,包括前端开发、设计神器、设计素材 (字体、PSD等)、以及一大波实用的酷站推荐,全是精选干货 ,快来收吧!

    2017-06-04
  • 从揽胜星脉身上,能看到哪些车内交互设计趋势?| 车展干货

    在日内瓦车展上,有那么几个品牌的展台格外引人关注,捷豹路虎就是其中之一。不少人是冲着前几天刚刚发布的路虎揽胜星脉来的,作为一辆真正全新的车型,同时又是揽胜家族的第四款产品,它受到关注几乎是必然。大家…

    2017-08-02
  • 终极神器!Sketch 一键转成 PSD 格式!

    曾经有很多人问图翼君Sketch转PSD怎么弄?今天就给大家分享一神器,大招一放So easy!工具下载地址关注本公众号回复“39”支持PSD、XCF、Sketch、Any格式使用方法:1、打开神器,选择Open Frome Computer 打开要转换的Sketch文件2、选择你的Sketch文件,工作台会显示你的文件3、选择右上角File  -  选择Save as PSD, 保存成PSD文件。4、保存后,浏览器会自动下载转好的PS...

    2018-04-09
  • 设计室开题 | 用户体验设计从入门到实战

    凯诺设计室(Canopy Design Studio)基于研究、实际项目而设立,每期6-12人、5-10周,在设计室讲师的带领下,从无到有生成完整方案,基于线上教学,打破地域限制,回归设计专业基于studio教学的本质,主题涵盖建筑、景观、城市、艺术、人机交互、用户体验设计等领域。*设计室开题请关注凯诺公众号或官网这是第38个凯诺设计室▽Chenyu SiWanderlust Inc 产品设计师加州大学圣地亚哥分校HCI学士凯诺优秀讲师...

    2018-04-07
  • 微交互:如何塑造优质的产品细节?

    本文作者将与大家探讨微交互是如何塑造优质的产品细节的,一起来看看吧~“最好的产品通常会做好两件事情:功能和细节。功能能够吸引用户关注这个产品,而细节则能够让关注的用户留下来。”

    2017-05-01
  • 情感化设计对互联网产品的启发

      “产品具有好的功能是重要的;产品让人易学会用也是重要的;但更重要的是,这个产品要能使人感到愉悦。”       美国认知心理学家Donald Norman在2002年提出产品设计的”情感化“理念,随着“体验经济时代”来临,…

    2014-11-05