移动弹窗基础知识浅析——IOS弹窗体系-阿里云开发者社区

开发者社区> 云效鼓励师> 正文

移动弹窗基础知识浅析——IOS弹窗体系

简介: 最为常见的【弹窗】反而是最“捉摸不定”的东西。各种类型的弹窗傻傻分不清楚,不知道在什么场景下应该用哪种弹窗。尤其是遇到“二次确认”等场景…… 因此,打算从头整理移动弹窗的基础知识,以iOS弹窗体系为切入点,从定义出发,对移动弹窗进行分类,然后分别分析每一类弹窗的应用场景,以及在使用过程中需要注意的点。
+关注继续查看

云小妹导读:作为设计童鞋的经常打交道的移动组件,反而是最捉摸不定的东西,各种类型的弹窗傻傻分不清楚,不知道在什么场景下应该用哪种弹窗。尤其是遇到“二次确认”等场景

今天的Work Like Alibaba实践分享,我们邀请阿里巴巴TXD体验中心的交互设计师夏天为我们带来IOS弹窗体系分享。

1 前言

前段时间整理移动组件,发现最为常见的【弹窗】反而是最“捉摸不定”的东西。各种类型的弹窗傻傻分不清楚,不知道在什么场景下应该用哪种弹窗。尤其是遇到“二次确认”等场景……
因此,打算从头整理移动弹窗的基础知识,从定义出发,对移动弹窗进行分类,然后分别分析每一类弹窗的应用场景,以及在使用过程中需要注意的点。
本想一次性全部整理完,但是发现iOS和Material Design两大体系下的弹窗类目繁多,相互之间又有千丝万缕的关联,因此决定拆分成四篇来仔细整理:

  • 移动弹窗基础知识浅析系列一:iPhone弹窗体系
  • 移动弹窗基础知识浅析系列二:安卓手机弹窗体系(Material Design)
  • 移动弹窗基础知识浅析系列三:iPhone与安卓两大手机弹窗体系之间的关系与差异
  • 移动弹窗基础知识浅析系列四:手机、平板、手表端的弹窗体系之间的关系与差异

2 名词解释

  • 弹窗:
    弹框是人机交互中常见的方式,常常出现于询问、警示以及完成某个插入任务,常见于网页端及移动端。弹框能使用户有效聚焦于当前最紧急的信息,也可以在不用离开当前页面的前提下,完成一些轻量的任务。

  • 移动弹窗:
    运用在移动端的弹窗,包括了手机、平板、手表等移动端设备。本文整理学习对象的是【iPhone】的弹窗体系。

  • 模态:
    模态(Modality)是一种视图,在当前的iOS 10的人机交互指南(Human Interface Guidelines)中有如下定义:

    模态视图突出焦点,因为用户只有在完成当前的任务或关闭一个信息或视图之后才能去做其它事情。
    当屏幕上出现一个模态视图时,用户必须采取一个决定(点击按钮或是其它)才能退出模态化体验。一个模态视图可以占据整个屏幕、整个父视图(比如浮出层)或者屏幕的一部分。一个模态视图一般都含有“完成”和“取消”按钮来退出视图。
    Modality creates focus by preventing people from doing other things until they complete a task or dismiss a message or view. When a modal view appears onscreen, the user must make a choice by tapping a button or otherwise exiting the modal experience. A modal view can occupy the entire screen, an entire parent view, such as a popover, or a portion of the screen. A modal view typically includes completion and cancel buttons that exit the view.

    早在iOS 7的HIG中,模态是归属于【Temporary View】类目下,且在定义上更加直白地指出:

    模态视图是完成一系列任务的有效视图。他出现在所有元素的顶部,且会阻塞所有底部元素的操作。
    Modals are a useful view for tasks that require multiple commands or inputs by the user. They appear on top of everything else, and, while open, block interaction with any other interactive elements underneath.

    简单理解起来,模态视图,就是在原始视图上,叠加一层蒙版,用以隔离原始视图中的所有操作,然后在蒙版上展示一层新视图,让用户更专注于完成新视图中的任务。

  • 模态弹窗:
    运用模态视图的弹窗。

  • 非模态弹窗
    运用非模态视图的弹窗。

3 移动弹窗的分类

根据是否运用模态视图,我把收集到的所有iOS的弹窗类型进行如下分类:

4 模态弹窗

4.1 对话框(Alerts,System Rating and Review Prompts)

4.1.1 定义

对话框,是我们最为常见的【弹窗】类型。
对话框 - Alerts

对话框承载与当前状态有关的重要信息,常需要用户进行响应。对话框由标题、信息内容(可选)、一个或多个按钮、文本输入框(可选)四部分组成。除了上述可选元素以外,对话框的外观是固定的不可修改的。
Alerts convey important information related to the state of your app or the device, and often request feedback. An alert consists of a title, an optional message, one or more buttons, and optional text fields for gathering input. Aside from these configurable elements, the visual appearance of an alert is static and can’t be customized.

4.1.2 常见的使用方式

常用于信息提示、操作二次确认、邀请评分、授权等场景。

——百度网盘,微信,蜗牛睡眠,Worktile

除了定义中提到的【文本输入框】之外,iOS还提供了默认打分的组件【System Rating and Review Prompts】:

4.1.3 使用过程中需要注意的点

  • 标题:简短能说明问题的标题。
  • 信息内容:根据需要可不填写。
  • 按钮:
    • 一般数量控制在3个以内,若需要更多的按钮,建议使用【操作列表】。
    • 可使用加粗、颜色等方式,引导用户作出选择。
    • 文案要具体精准,让用户明白选择之后会发生什么。而不要使用“是”“否”等语意不明的词。
    • 符合用户预期的按钮放在右侧,【取消】按钮固定在左侧。
    • 当有破坏性的操作的时候,一方面要突出显示具有潜在破坏性的操作按钮,另一方面要确保有【取消】按钮,保证用户能够安全地取消破坏性操作。(例如删除等。)
    • 支持Home键关闭弹窗。
  • 扩展组件:特殊情况下,可使用定义的扩展组件。例如文本输入框、打分组件等。
  • 操作方式:由于必须要获取用户明确的响应,因此只有选择按钮才能关闭弹窗。(点击蒙版无法关闭弹窗)

4.2 操作列表(Action Sheets,Action Views)

4.2.1 定义

操作列表 - Action Sheet

操作列表是一种特殊的对话框,是对操作动作的响应,显示当前操作场景下相关联的多个选项。用于让用户开始任务,或者在执行潜在的破坏性操作前,进行二次确认。
An action sheet is a specific style of alert that appears in response to a control or action, and presents a set of two or more choices related to the current context. Use an action sheet to let people initiate tasks, or to request confirmation before performing a potentially destructive operation.

操作视图 - Activity View

操作视图是app快捷任务的展示面板。用户点击面板上的任务,可以直接执行相应的任务。
An activity is a task, such as Copy, Favorite, or Find, that’s useful in the current context. Once initiated, an activity can perform a task immediately, or ask for more information before proceeding. Activities are managed by an activity view, which appears as a sheet or popover, depending on the device and orientation.

4.2.2 常见的使用方式

操作列表常被用于单选操作,以及删除操作的二次确认。(单一操作)

——哔哩哔哩,teambition,照片,微信(未使用原生弹窗)

操作视图常被用于分享操作。
——Safari,钉钉,微信,UC

4.2.3 使用过程中需要注意的点

  • 确保有一个【取消】的按钮。
  • 突出显示具有潜在破坏性的操作按钮。
  • 尽量避免列表的滚动,如选项过多,则需要留出视觉线索。
  • 对于【操作视图】,需要明确的应用图标和操作名称,用于清晰地描述任务。

4.3 浮出层(Popover,Edit Menus,Home Screen Quick Action Menus)

4.3.1 定义

浮出层 - Popovers

浮出层是一种暂时性的视图,他出现在用户点击区域的顶层。典型的浮出层包括一个箭头,指向浮出层出现的位置。浮出层可以是模态的,也可以是非模态的。
A popover is a transient view that appears above other content onscreen when you tap a control or in an area. Typically, a popover includes an arrow pointing to the location from which it emerged. Popovers can be nonmodal or modal.

编辑菜单 - Edit Menus

用户可以在文本、网页、图片等地方,使用长按、双击的手势唤起【编辑菜单】。他包含了一些相关联的编辑操作,比如复制、粘贴等。
People can touch and hold or double-tap an element in a text field, a text view, a web view, or an image view to select content and reveal edit options, such as Copy and Paste.

主屏快捷操作菜单 - Home Screen Quick Action Menus

快捷主屏操作菜单,是通过3D Touch唤起的快捷菜单。
Home screen quick actions are a convenient way to perform useful, app-specific actions right from the Home screen, using 3D Touch.

4.3.2 常见的使用方式

严格意义上的浮出层,能够包含【导航栏、工具栏、标签栏、表格、收藏、图片、地图】等各种元素,所以由于展示空间的问题,只能使用在iPad端,在手机端对应的是【全屏模态视图(Full-Screen Modal Views)】。
但是,浮出层的明确指向性和便捷性,依旧非常适合用于手机端的菜单选择,因此很多app都自己设计了小型的Popovers:
——微信,钉钉,手机淘宝,支付宝

编辑菜单,常用于对文本和聊天记录的编辑。
——微信,钉钉,备忘录,UC

主屏快捷操作菜单,是iOS独有的交互形式,只在主屏中使用,用于快速执行应用的常用任务。
——iOS主屏

4.3.3 使用过程中需要注意的点

  • 显示符合上下文情景的操作选项,并用通用的文案描述。
  • 尽可能地减少选项数量,只显示最有意义的操作。
  • 使用标准手势唤起菜单。
  • 根据唤起的位置,自动调整菜单的位置。
  • 对于【编辑菜单】:
    • 自动选择相关联的词组。
    • 不要加入【编辑】按钮。
    • 支持【撤销/重做】操作。

4.4 模态视图(Modal View)

4.4.1 定义

一个模态视图可以占据整个屏幕、整个父视图(比如浮出层)或者屏幕的一部分。
A modal view can occupy the entire screen, an entire parent view, or a portion of the screen.

这里分析的【模态视图】,区别于【对话框】,占据了更大范围的屏幕,内部包含更多的操作。

4.4.2 常见的使用方式

根据占据屏幕的方式及范围,可以分为【全屏、半屏、中央】三种类型,其中【全屏、半屏】常包含复杂表单:

全屏,常见于“新建后发送、选择后下载”等场景。
——网易邮箱-写邮件,钉钉-DING,微信-转发消息,腾讯视频-缓存

半屏,常见于“侧边导航、选择器”等场景。
——滴滴出行,大众点评,手机淘宝,支付宝

中央,常见于“宣传、引导用户”等场景。
——百度糯米,滴滴出行,美团,teambition

4.4.3 使用过程中需要注意的点

  • 确保模态视图中的任务是简练严谨的,让用户能够聚焦高效地完成任务。
  • 提供明显且安全的退出模态视图的方式。
  • 对于【全屏/半屏】:
    • 未点击【保存/确认/完成】等明确的按钮之前,所有的修改都不会生效。
    • 模态视图多从边缘进入。
    • 点击蒙版即可关闭模态视图。

5 非模态弹窗

5.1 透明指示层(UIProgressHUD)

具体的定义没有找到,对应的是安卓独有的的Toast,据说iOS称之为HUD(head up display)。目前未开放接口,只应用在原生系统的音量键。
但是在很多APP中,大家已经习惯将广义上的Toast用于状态的提示:
——iOS音量键,手机淘宝,大众点评,腾讯视频

5.2 通知(Notifications)

5.2.1 定义

无论手机是锁屏状态还是使用状态,app应用都能通过通知,第一时间传递给用户重要信息。
Apps can use notifications to provide timely and important information anytime, whether the device is locked or in use.

5.2.2 常见的使用方式

运行中的顶部banner,重按之后,会展开并呼出【操作列表 Action Sheet】。

5.2.3 使用过程中需要注意的点

  • 提供精炼有价值的信息。
  • 注意通知发送的频率和时机。
  • 考虑3D Touch重按之后的展示细节内容,以及相关的操作按钮。

6 参考文献

  1. 认识移动端弹框,https://mp.weixin.qq.com/s/9XyiKTiXYaIHcFHDbpvLEg
  2. Human Interface Guidelines(iOS 10,2017.06),https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/
  3. The iOS Design Guidelines(iOS 7,2015.9.28),http://ivomynttinen.com/blog/ios-design-guidelines
  4. 几种弹窗设计模式(iOS端),http://www.jianshu.com/p/63eb8fad9329
  5. 实用干货!UI设计师需要了解的 APP弹窗体系,http://www.uisdc.com/app-popup-ui-system

注1:本文是基于iOS 11的人机交互指南(Human Interface Guidelines)、网上大神们的文章、个人经验总结梳理而成,还望大家不吝赐教,提出宝贵的意见或建议。


注2:若内容涉及侵权,请联系管理员,我们将第一时间删除相关内容。


fc196ca904cc18079ef64db6e01cdaf2f26ed592

云效,一起Work Like Alibaba,你也可以像阿里巴巴一样高效工作!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9458 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10836 0
ios基础控件之UITextView
多行文本控件UITextView继承UIScrollView:UIView控件,默认是带有滚动条的。UITextView和UITextField都是文本编辑、显示控件,它们功能和行为在很多方面都是相似的。
1715 0
阿里云服务器申请DDoS基础防护及常见问题
阿里云服务器为了能够更好的保护好每一个用户的云安全。提供免费的DDos防护——DDos基础防护。能够提供最高(默认)5G的防护能力,同时 阿里云服务器推出了安全信誉防护联盟计划,将基于安全信誉分进一步提升 DDoS 防护能力,用户最高可获得 100G 以上的免费 DDoS 防护资源。
2738 0
ios基础控件之开关按钮(UISwitch)
UISwitch控件是iOS开发的基础控件,是非常简单的一个控件,因为它的方法比较少。UISwitch继承于UIControl基类,因此可以当成活动控件使用。 注意:开关状态通过它的on属性进行读取,该属性是一个BOOL属性 创建: UISwitch* mySwitch = [[ UISwitch alloc]initWithFrame:CGRectMake(0、150.0f,100.0f,0.0f,0.0f)]; 可能你会疑问为什么它的大小都设置为0?没错,它的大小你设置是无效的,系统会为你分配尺寸。
763 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13131 0
iOS基础控件之UISegmentedControl
***UISegmentedControl控件是iOS中比较常用的控件,作为一个iOS手机设备屏幕,一下子放多个UIButton,显然感觉不到美观,作为一个不妥协追求卓越的乔帮主肯定不愿意,所以设计出该控件,以满足平时的需求。
761 0
【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记24 popovers弹窗
上几话中我们详细了解了几种segue,我们也了解到了多MVC模式的几种控制器,比如导航、选项卡和分栏,除了这三种多MVC的模式之外,还有一种popover,它跟其他三种不太一样。
841 0
+关注
云效鼓励师
云效非著名程序员鼓励师
99
文章
8
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载