商丘做网站,商丘网站优化,商丘网络推广,商丘网络公司
当前位置:首页 > 万博体育娱乐 > 网站设计 >

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

发表日期:2017-06-30 17:12万博娱乐体育浏览次数: 本文关键词:app开发,为什么在APP设计中

 

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

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

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

  

 

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

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

  1. 挑选合适的使用场景

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

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

  

 

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

  

 

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

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

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

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

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

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

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

  

 

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

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

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

  

 

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

  

 

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

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

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

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

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

  

 

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

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

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

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

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

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

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

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

  

 

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

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

  

 

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

如没特殊注明,文章均来自网络! 转载请注明来自:http://www.bluecatslive.com/news/wzsj/5322.html

网站设计案例推荐

热门文章

揭秘2017年最新的网站快速排名设...

网站在前期的时候都是很难上排名的吗,那么是因为你的网站基础优化都没做好,怎么可能会有排名呢,首页说到了基础的优化那就要从根本的地方说起。前期就是先把网站的设计和网...

日期:2017-06-30 浏览次数:5371

终于等到你!2017年2月设计圈实...

随着情人节的结束,2月份的设计圈干货大合集悄然更新。新的工具新的资源,依然是以往的分量,依然是相同的味道。和过去的合集相似,免费的素材、工具、服务占据了列表中9成的...

日期:2018-04-01 浏览次数:642

现代404页面设计趋势分析与案例...

每个网站都是由不同功能不同类型的页面构成的,当用户打开错误链接的时候,网站的404页面就派上用场了。一个可靠的404页面在告知用户他们走错地方的同时,还应当引导用户继续浏...

日期:2018-02-27 浏览次数:633

商丘建站公司:内行讲堂!让设...

你还在加班为每一个小功能的实现自己“码码码”吗?今天想早点下班的你,快来看看我最新发现的工具包吧!有了他们,这些功能你只需要直接用,或者用一点时间把他们优化的比作者创造时更...

日期:2018-04-15 浏览次数:623

商丘网站维护:如何写出一个完...

本文对如何写出一个完美的错误信息,进行了3个重要组成部分的分析。 每个系统都会有无法正常工作的时候。可能是用户的错误或系统的失败。在这两种情况下,以正确的方式处理错...

日期:2018-05-27 浏览次数:618

相关文章

从零开始设计APP!快速提升引导...

编者按:在第一期我们讲了登录界面的设计方法,这期我们聊聊引导页。有哪些常见的引导页类型,如何才能快速提升它的设计格调,从理论到方法都有了,强烈建议新手学习。...

日期:2018-04-01 浏览次数:151

UI实战案例!一个完整的APP是如...

A5创业网是国内领先的创业资讯和服务平台,提供权威的创业资讯和精准的品牌营销服务。以创业融资动态、创业学院、产品经理、人物访谈为内容驱动,与互联网创业者共同进步。...

日期:2017-06-30 浏览次数:8

前方高能!别让这10个设计误区...

A5创业网是国内领先的创业资讯和服务平台,提供权威的创业资讯和精准的品牌营销服务。以创业融资动态、创业学院、产品经理、人物访谈为内容驱动,与互联网创业者共同进步。...

日期:2017-06-30 浏览次数:12

干货丨移动端导航的七种设计模...

A5创业网是国内领先的创业资讯和服务平台,提供权威的创业资讯和精准的品牌营销服务。以创业融资动态、创业学院、产品经理、人物访谈为内容驱动,与互联网创业者共同进步。...

日期:2017-06-30 浏览次数:7

APP开发者必须思考如何进行微互...

有许多的开发者都找到蝉大师APP推广平台来问我们,如何才能开发一款受用户喜爱的程序程序?...

日期:2017-04-12 浏览次数:226

随机推荐

网站设计之卡式布局运用策略...

说走就走!勾引你出门旅游的网...

网站建设首页设计图文混排的技...

让用户“看见” 是一种心机行为...

超全面干货!弹窗设计的5条基本...

弹框体系总结...