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

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

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

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

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

接下来,就让常州开发APP公司紫竹云科技把他们自己设计中遇到的一些“心得”和“坑”分享给大家。

1.挑选合适的使用场景

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

转载请注明:本文来自常州开发APP公司http://www.czwew.com/project/紫竹云科技!

在APP开发设计中,为什么APP开发公司要慎用左右横滑设计?的更多相关文章

  1. 【注意事项】APP左右横滑设计

    移动端屏幕越来越大,但用户对内容量的要求也水涨船高.如何在有限的屏幕内透出更多的内容,是设计师们研究的重点. 常用的内容拓展设计有:Y 方向 List 滑动.Z 方向 3D Touch .入口式内容折 ...

  2. 2014年的Google I/O app设计中的材料设计-渣渣的翻译

    又是一篇翻译,用了三个多小时.http://android-developers.blogspot.co.id/2014/08/material-design-in-2014-google-io-ap ...

  3. stm32非操作系统开发和带uCos的开发的区别,及一些解析

    从文件角度来看core_cm4.h和stm32f4xx.h分别从内核寄存器和外设寄存器来定义其地址和结构体,是用c语言访问硬件必须的文件,所以这两个文件不论是否带操作系统,都是必须包含进工程的. re ...

  4. Android设计中的.9.png图片

    .9.png是一种能够自己定义拉伸特定区域的图片格式. 简书:Android设计中的.9.png图片 在Android的UI设计开发中,非常多控件须要适配不同的手机分辨率进行拉伸或者压缩,这样就出现了 ...

  5. [App Store Connect帮助]三、管理 App 和版本(2.6)输入 App 信息:新增 watchOS App 信息

    如果您的 iOS App 中包含 watchOS App,请确保您的描述中包含该 App 在 Apple Watch 上的功能.您还需要为 Apple Watch 的 App Store 提供额外的屏 ...

  6. 影响FPGA设计中时钟因素的探讨。。。转

    http://www.fpga.com.cn/advance/skill/speed.htm http://www.fpga.com.cn/advance/skill/design_skill3.ht ...

  7. 数字IC前后端设计中的时序收敛(二)--Setup违反的修复方法

    本文转自:自己的微信公众号<数字集成电路设计及EDA教程> 里面主要讲解数字IC前端.后端.DFT.低功耗设计以及验证等相关知识,并且讲解了其中用到的各种EDA工具的教程. 考虑到微信公众 ...

  8. APP开发中,如何从UI设计上提升APP用户体验

    设计中有很多细微的东西要注意,就如UI设计中,元素的统一性,图标风格.段落的排版等等,只有能注意这些细节,你的 APP UI 才算合格. 干货君总结了17个提升用户体验的 UI 设计小技巧,也是我们日 ...

  9. 【Android开发】如何设计开发一款Android App

    本文从开发工具选择,UI界面.图片模块.网络模块.数据库产品选择.性能.安全性等几个方面讲述了如果开发一个Android应用.现在整理出来分享给广大的Android程序员. 开发工具的选择 开发工具我 ...

随机推荐

  1. 把pcl的VTK显示融合到MFC(代码找原作者)

    转自PCL中国,原文链接:http://www.pclcn.org/bbs/forum.php?mod=viewthread&tid=223&extra=page%3D1 本人做了少量 ...

  2. Win7系统下调整硬盘分区大小给C盘更多的空间

    电脑安装了很多程序,C盘空间越来越小了.如何给C盘调整更多的空间,其实只要调整硬盘分区大小便可解决这个问题,下面有个小技巧,需要的朋友照做就可以了 Win7系统下如何调整硬盘分区大小,以前装系统的时候 ...

  3. tomcat 配置 https 几点注意

    1.修改server.xml时候把注释的改改就好,不要添加,免得杂乱. 2.安装openssl openssl-devel autoconf libtool apr tomcat-native 才行. ...

  4. 数据结构(5) 第五天 快速排序、归并排序、堆排序、高级数据结构介绍:平衡二叉树、红黑树、B/B+树

    01 上次课程回顾 希尔排序 又叫减少增量排序 increasement = increasement / 3 + 1 02 快速排序思想 思想: 分治法 + 挖坑填数 分治法: 大问题分解成各个小问 ...

  5. 【JavaScript框架封装】实现一个类似于JQuery的CSS样式框架的封装

    // CSS 样式框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)[只要是需要使用到this获取到的元素集合这个变量的时候, ...

  6. 原生node写一个静态资源服务器

    myanywhere 用原生node做一个简易阉割版的anywhere静态资源服务器,以提升对node与http的理解. 相关知识 es6及es7语法 http的相关网络知识 响应头 缓存相关 压缩相 ...

  7. XSS Chanllenges 11-15

    Stage #11 根据提示,发现正则匹配,过滤掉了很多关键字 除on 事件和script 事件外,能执行js 代码的还有a 标签构造的超链接 构造 "><a href=java ...

  8. Edit Distance FZU-1434

    题目大意: 给你两个字符串A,B,和以下三种操作: 1.删除一个字符 2.插入一个字符 3.把一个字符改变成另一个字符 求使A变成B所需要的最少的操作: 我刚开始的思路是以为求出最长公共子序列,然后对 ...

  9. nyoj124-中位数

    中位数 时间限制:3000 ms  |  内存限制:65535 KB 难度:2 描述 一组数据按从小到大的顺序依次排列,处在中间位置的一个数叫做中位数. 比如 1 5 10 11 9  其中位数就是9 ...

  10. [luogu4310] 绝世好题 (递推)

    传送门 题目描述 给定一个长度为n的数列ai,求ai的子序列bi的最长长度,满足bi&bi-1!=0(2<=i<=len). 输入输出格式 输入格式: 输入文件共2行. 第一行包括 ...