耍好控件｜全面解析弹窗交互设计
【摘要】 耍好控件｜全面解析弹窗交互设计考必过小编为大家整理了关于耍好控件｜全面解析弹窗交互设计的信息，希望可以帮助到大家！
弹窗的分类
相信有很多设计师不知道弹窗的具体分类，把所有的弹出的窗口统称为“弹窗”，对使用的方法也很模糊。
纵观 iOS人机交互规范和Material Design，我们可以将弹框分为两大类：模态框和非模态框。
弹窗体系
模态框：Modal Dialog。指代需要中断用户当前的操作，用户必须完成对话框内任务（或主动关闭后）才能够继续主面板操作的弹框。
“非模态”就是和“模态”对立的概念，指不需要中断用户操作的弹框。
提醒程度分类
在弹窗分类的时候，我们先要明确自己分类的目标，是快速选择出适合我们当时情景下的提醒交互。
所以我们按照提醒程度来区分比较合适，按照ios和安卓来分就没有必要。但是值得一提的是，我们日常用的英文名称都是从这两个系统自带的开发语言来命名的。
从开发角度上，ue知道系统自带的提示，会大大提高开发效率，当然现在很多形式都在两个系统中通用，最终选择需要根据实际情况而定。
非模态弹窗-轻度案例
1. Toast提示
Toast是安卓系统的一个控件名词，现在也应用于iOS系统中。
Toast属于一种轻量级的反馈，常常以小弹框的形式出现，可以出现在屏幕上中下任意位置。
出现的时长最佳是 2 – 3.5 秒（即所谓的短吐司与长吐司），在这个时间段内不容易干扰用户的同时，也有助于用户阅读完完整的提示信息。
设计原则：
a. 同个产品会模块尽量使用同一位置，让用户产生统一认知
b. Toast提示可以用图片加文字的形式，不适合承载过多的文字和重要信息。
c. 一般是灰黑或黑色半透明，但是为了视觉美观统一出现提示更弱化的白色底和彩色底。
应用场景：
a. 正在加载等过程状态
b. 轻度提醒的结果状态
优化方案：
为了减少toast弹窗对用户的干扰，有些地方的toast提示可以优化成另外一种展现形式。
a. 多态按钮。如果按钮被按下后需要与服务器交互后才能真正响应操作，那么等待难以避免。这种情况下可以给按钮增加多个状态，让用户知道App已经接受到他的操作。典型的例子是支付宝的确认付款按钮，支付前、支付中和付款成功三个状态。
b. 动效代替过程。现在动效的应用越来越越连贯和大胆，适当的动效可以省略一些过程提醒。例如电商App加入购物车，商品飞入购物车中，有趣流畅。但是京东部分页面的加入购物车既做了动效，又加了Toast提示，我觉得是比较多余的，此时toast提示可以去掉。
2. HUD提示
HUD是与Toast类似的ios系统上的效果。
HUD与Toast的区别：
a. HUD只出现在屏幕的中央，Toast应用位置广泛。
b. HUD可以包含内容比较富丰，Toast一般用文字，或者加载动效。
c. HUD一般是毛玻璃透明，Toast一般是灰黑或者黑色半透明，延伸颜色多。
d. HUD中内容开发接受到信息后反馈所以可以变化（如调节音量时），Toast中内容不可变化。
非模态弹窗-中度案例
1. Snackbar 对话框提示
nackbar 是 Android 5.0 新特性——Material Design 中的一个控件。SnakeBars是既支持用户操作，又会自动消失的控件，一般出现在屏幕底部。
Snackbar会在超时或者用户在屏幕其他地方触摸之后自动消失；可以在屏幕上滑动关闭；出现时不会阻碍用户在屏幕上的输入。
Snackbar与Toast的区别：
1、Snackbar可以滑动退出，也可以处理用户交互（点击）事件
2、Snackbar一般设置时间会比Toast长，MD规定SnakeBars的显示时间应该在4 – 10秒
设计原则：
1、屏幕上同时最多只能显示一个Snackbar，需要多个时，则先将当前显示的Snackbar隐藏后再显示新的Snackbar。
2、可以在Snackbar中添加一个按钮，处理用户点击事件。
应用场景：
用户可能需要了解、感兴趣的变更信息，如：安装完成、任务删除、好友消息、网络错误、账号升级等。
2. Tips提示栏
开发没有固定的组件，但是对设计语言来说，tips它是内嵌在页面上的，一般让用户触发关闭或进入下级页面。
应用场景：
一般用于需要用户感知到的通知信息，例如金融类的到期提醒，或者类似广告的轻度提示。
3. Popover浮层(ios)/dialog浮层、popup浮层(安卓)
Popover是ios的，popup是安卓的，现在功能上基本是相通的，所以我就解析下Popover。
Popover 浮层
Popover（气泡弹出框/弹出式气泡/气泡）是由一个矩形和三角箭头组成的弹出窗口，箭头指向的地方通常是导致Popover弹出的控件或区域。通过点击Popover内的按钮或非Popover的屏幕其他区域可关闭Popover。
dialog浮层查看的展现形式，查看链接：https://www.jianshu.com/p/4712652fb313
设计原则：
a. 箭头的指向很好的表达了Popover和触发控件的潜在关系，用户可以匹配对应位置
b. 相比于Action Sheet，Popover的三角箭头能明确的指示当前操作的是哪个条目，不易出错。Popover显示区域较小呈现的选项有限，为了防止误操作不建议Popover里启用滚动，如果选项很多，建议使用Action Sheet。
应用场景：
a. 快捷导航
b. 情境下的相关选项
c. 提示引导
模态弹窗-强度案例
1. 强引导浮层
这个浮层的应用，已经是模态提示了，此刻该对话框中的内容获取了焦点，想要操作对话框以外的功能。
设计原则：
因为对用户干扰比较大，且很多用户在不敢兴趣的请款下不会去进行操作，所以现在用单纯的气泡弹窗不加遮罩的情况较多。
应用场景：
比如我们上新功能，局部的按钮、功能模块搬家，一些复杂且容易被遗漏的一些操作，会使用这种浮层。
2. 动作栏
这里说的动作栏一般是从页面底部出现，也有人称底部动作栏，Action Sheet 是iOS规范下的控件，近些年来也在慢慢被安卓化。
设计原则：
a. 突出破坏性选项，对于用户执行破坏性或危险性操作的按钮，应当使用红色高亮显示，并且放置于在 Action Sheet 的顶部
b. “取消”按钮应始终存在于动作面板的底部
c. 避免出现纵向滚动
应用场景：
a. 操作列表 Actionsheet，以简洁的功能描述性文字展示功能按钮，敏感的功能操作一般用红色字体标出，主要应用在操作选择、删除、拍照等。
b. 操作视图 Actionview，以图标和文字结合的形式展示功能，典型案例:分享、购买、支付，现在延伸的场景比较多。
3. 对话框
对话框也就是我们熟知的弹窗，安卓开发语言 Dialog，ios开发语言Alert。
对话框来传达重要信息，需要用户主动操作或进行选择才能继续，也是最容易打断用户心流的弹框，因为它直接出现在屏幕中心。
所以双平台都明确提醒设计者要尽量克制对话框的使用频次。正是因为对话框非常容易获取用户注意力，所以一般用于承载非常重要的附加操作或警示信息。
根据操作类型分类：
a. 信息传达-确认/关闭
b. 信息输入-输入提交
c. 信息选择-双向按钮
设计原则：
a. 确保用户能够看到提示。
b. 必须用户主动操作或进行选择才能继续。
c. 阻断用户最严重，需要克制使用。
d. 设计师要提醒开发人员配置引导用户操作的高亮选项
应用场景：
a. 重要提示信息：跟用户切身利益有关系的提示、产品本身重要的信息等
b. 需要用户选中或输入信息的，如系统权限，或验证密码等
c. 商业意图：广告、推荐
写在最后
模态框与非模态框都有各自的优势与不足：恰当地使用模态框可以辅助用户一步一步完成操作，但频繁使用可能会让用户的操作流程被打扰。
如果只从用户心流的角度切入，非模态框应该更加友好，但并不能承载操作，且有时又容易被用户忽略。
所以如何找到合适、正确的弹框，是需要设计师根据具体场景进行推敲的。
希望这篇文章，对你有所帮助。
以上就是耍好控件｜全面解析弹窗交互设计的内容，更多资讯请及时关注考必过网站，最新消息小编会第一时间发布，大家考试加油！