上次的文章(点击查看),介绍了Android MD设计规范中对于“底板(Bottom Sheets)”的定义,这次的文章来跟大家介绍一下iOS设计规范中的底部浮层。

在iOS规范中,出现在页面底部的浮层有两种:上拉菜单(Action Sheets)和活动视图(Activity Views)。

上拉菜单

上拉菜单,是当用户激发一个操作的时候,出现的浮层。“使用上拉菜单让用户可以开始一个新任务或者对破坏性操作(例如:删除、退出登录等,笔者注)进行二次确认。” 使用上拉菜单开始一个新任务,在苹果官方的邮件应用里有很多案例,比如下面这个:

点击了那个长得很像“回复”的按钮,出现了三个操作供用户选择:回复、转发、打印。

在用户进行破坏性操作的时候,上拉菜单成为一个确认性质的存在,防止用户误操作引起了破坏性结果。比如删除照片时,如下图:

有心的好奇宝宝(比如笔者)这里可能就会想了:之前介绍过的警告框(Alerts),在进行一些重要操作的时候也会有再次提示的作用,那么它和上拉菜单有什么区别呢?笔者经过研究,终于在一个英文论坛上找到了答案:

警告框比较打扰用户的使用,一般是告知出现的问题、希望用户来处理一下;而上拉菜单,往往出现在在用户点击了删除按钮之后,用户比较对此有预期。

其实这两者在功能上差别不是太大,警告框打扰更大一些。

另外,对于这种破坏性操作的上拉弹框,苹果建议在设计上突出那个破坏性的操作。比如上面那张图的“删除照片”按钮,就文案的颜色被设计成了红色。此外,上拉菜单必须要在底部有个“取消”按钮;同时,应尽量避免出现滚动条。

活动视图

这里的“活动”,指的就是浮层里包含的每一个操作。活动视图里包含的操作,必须是在对当前场景有用的操作。

iOS规范里提到,活动视图,可以是从底部出现的浮层,也可以是从按钮处展现的弹出框(popover),如下图所示:

左边是活动视图,右边是弹出框

至于使用哪一种,苹果建议是根据尺寸和屏幕的放置方向决定。其实,原来手机屏幕较小时,popover这种控件,是专属于iPad设备的,现在随着手机屏幕尺寸越来越大,popover也开始出现在手机应用的设计里。这也是合理的情况。

另外,在设计活动视图的时候,需要注意图标要能表现出操作的意义,文案要尽量简短明确。如果是系统自带的一些操作,如复制、黏贴,苹果建议直接使用系统自带的样式,不要创造新样式。规范里还特别指出,点击活动视图里的操作,不可在原有活动视图之上叠加出现活动视图或者上拉菜单,最多可以出现警告框这种控件。

以上介绍了iOS设计规范中上拉菜单和活动视图这两种控件。我们来总结一下:

上拉菜单可以展示操作(文字形式),也可以对用户的破坏性操作进行二次确认;而活动视图也可以展示操作,只是展示的操作数量更多,且可以使用图标+文字的展现形式。

所以,当操作数目较少的时候,可以考虑使用上拉菜单,而数目较多的时候,最好使用活动视图;对破坏性操作的二次确认,则必须使用上拉菜单。

对于Android MD规范中底部浮层——“底板(Bottom Sheets)”感兴趣的小伙伴,可以查看下面的链接:iOS和Android规范解析——底部浮层(上)

底板示例

最后顺提一句,讨论会使我们更清楚地认识这个控件。欢迎大家留言讨论。

相关阅读

#专栏作家#

沐风,微信公众号:“沐风与体验设计”。人人都是产品经理专栏作家,2017年度作家评选最佳人气奖。爱奇艺Phone和PC端交互团队负责人。留德海龟,曾任职腾讯微生活、网易、宜信。6年交互设计经验,专注设计领域,欢迎关注。

本文原创发布于人人都是产品经理。未经许可,禁止转载。

题图来自 Unsplash,基于CC0协议。

给作者打赏,鼓励TA抓紧创作!赞赏

3人打赏

android 层进菜单,iOS和Android规范解析——底部浮层(下)相关推荐

  1. android界面的规范性,IOS和Android规范,UI看什么?(三)

    *本文基于ios 10&Android 7官方规范进行解读和写作,理解不恰当之处,欢迎指正.本文标注均基于360dp. 上一篇主要对ios 10的UI设计方法细节进行总结分享,本篇说Mater ...

  2. android 仿支付宝菜单_这个 Android 几乎放弃的设计,iOS 要用上了?

    iOS 和 Android,两个移动时代的操作系统在历经十多年发展后,成熟度之高已经很难再找出大的短板. 如今,这两个系统相似的部分,大概比它们不相似的地方还要多得多.从早期的下拉通知栏,再到现在的侧 ...

  3. Android手机teams,在iOS和Android上自定义Microsoft Teams体验的三种最佳方法

    以下是您可以在iOS和Android上自定义Microsoft Teams应用程序以使其成为自己的三种方法 1. 开启黑暗模式,以便iOS和Android上的小组中的消息和其他内容更易于理解和阅读 2 ...

  4. ios与android功能特点,浅谈iOS与Android的区别

    说在前面:从事UI设计的同行们关于iOS与Android的基本设计规范相信大家都已经非常了解了,以下是我针对这两种设计规范所作的一点点小总结,如果面试官问道此类问题,希望对你们有用!!! 首先设计语言 ...

  5. android自定义吐司通知,IOS 仿Android吐司提示框的实例(分享)

    直接上代码 #import @interface ShowToastView : UIView +(void)showToastView:(UIView *)uiview WithMessage:(N ...

  6. android 动态修改菜单,如何在Android的“选项”菜单上更改MenuItem?

    如何在Android的"选项"菜单上更改MenuItem? 我的Activity上有一个选项菜单,带有mymenu.xml"开始". 选择此3000128611 ...

  7. ios android与wp,在iOS与Android间选择WP

    10月30日,微软发布了Windows Phone 8系统,并将在11月份开始发售相关搭载该系统的手机.在iOS.Android已经为广大用户所熟知的今天,WP8带来的的体验势必有所不同.其是否可以在 ...

  8. cocos android 播放视频,Cocos2d-x IOS 和Android播放视频

    本篇文章会给大家介绍在对IOS 和Android开发时,是如何实现播放视频这个功能的,下面就分别给大家介绍下. 一. iOS播放本地视频 对于ios平台的视频播放,这里直接使用MediaPlayer. ...

  9. 为什么ios比android快,那些说ios比Android快的,进来看看!

    该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 先声明,本人不爱比来比去.手机自己用着爽就行.此帖只是为了说明要比就公平的比.别让人忽悠着比. 总有人拿iPhone对别人说他们的手机比Android快. ...

最新文章

  1. 这是什么操作?导师一作,研究生挂通讯...
  2. 干货丨 简述迁移学习在深度学习中的应用
  3. 通俗易懂地搞懂决策树(Decision Tree)那些事儿
  4. php 返回页面重复提交,php防止表单重复提交
  5. Linux下创建动态库与使用
  6. mac/centos下添加永久alias
  7. Linux的压缩相关命令(转载)
  8. coco 数据集_如何用 coco 数据集训练 Detectron2 模型?
  9. Ubuntu 10.04 安装 RTX 2009
  10. 猿创征文|工具在手,天下我有(初入职场必备的黑科技工具)
  11. 励磁电感公式_永磁同步电机交直轴电感计算
  12. java jmail_JavaMail学习--使用JMail发送邮件
  13. Python requests练习:爬取猫眼电影排行
  14. 实现网站在线客服系统代码过程中解决问题-js实现点击复制文本
  15. win11怎么升级_win11系统升级更新注意事项
  16. 软考 案例分析__预测
  17. ubuntu 为可执行程序创建启动图标
  18. QtAndroid详解(1):QAndroidJniObject
  19. 学习Unity3D(1)之GUI游戏界面
  20. 0成本下载毕业论文——知网等N多资源

热门文章

  1. 自我提升《狄菲菲:28天美的声音成长计划》
  2. 超全医院化验项目名称及数值详细解析
  3. 多条语音消息合成一整条连续播放与进度条功能技术点!
  4. PPT技巧实例001——反光球体制作
  5. 通过OSI七层模型理解UDS、OBD、KWP2000、CAN等协议
  6. 职称认定和职称评审的区别是什么
  7. 基于C#的2D太阳、地球、月亮运动轨迹模拟实现
  8. 火影手游为什么服务器维护,火影忍者手游老是掉线处理方法
  9. va list win linux,云海虚拟化远程接入 利用VA的Linux插件访问使用windows应用
  10. matlab weibpdf函数,数学建模常用到的matlab函数有哪些