嗨小伙伴们大家好～周四到啦，周五还会远吗??今天小编给大家带来的文章是移动端交互控件规范总结：弹窗第一篇，本篇文章将针对移动端的各类弹窗作出总结分享，一起来看看吧！??小编温馨提示：点击图片放大可查看大图哦～

（全文共计字，阅读约需要9分钟）

学习查阅了国内外的部分相关资料之后，我发现，对于常用的交互控件，目前好像没有、也很难建立完全统一的规范，原因可能有以下几点：(1)国外相似的术语非常多，本身就存在很多混用、借用的情况。这些概念被引进国内时，缺乏一致、规范的翻译。(2)从PC端向移动端转变的过程中，基于设备特点、使用场景等因素演化出了新的控件规范，导致即使是命名相同的控件，在PC端和移动端的交互方式也可能完全不一样。(3)随着技术升级、用户需求和行为等因素的变化，控件的定义和用途也会随之更迭，而且这些更新往往无法在所有应用开发中同步。(4)各大平台和系统基于各自的特点有针对性地创建了不同的控件分类方法、命名方式、视觉样式和交互规范。但国内的很多应用开发者在开发时都未遵循相应的规范，混用系统控件的现象很常见。(5)为适应用户习惯或业务需要，国内的应用开发者常常在原生控件的基础上改造控件，形成新的控件样式和交互方式。此外，还有一些开发者对控件不熟悉，错误使用、滥用控件，导致同一控件的应用五花八门。因此，很多基础控件的定义都越来越模糊，视觉样式、交互方式和使用场景也各不相同，各有说法，有些规则甚至是互相违背的。基于以上现状，此次“弹窗”规范的整理主要针对iOS平台，并遵循以下几点原则：(1)尽可能遵循设计标准，减少不必要、不确定的创新。遵循GUI标准有利于提高用户预知控件功能与操作方式的能力，保证可用性，尤其是在没有条件进行实际用户测试的情况下。(2)优先参考官方设计指南，毕竟这些原则已经经过了大量、充分的用户研究、实践运用、测试迭代。(3)对于官方指南中未提及、不明确的控件规范，优先采用国内更多人采用的原则，确保规范尽可能通用。(4)整理、制定控件规范的最终目标是保证一致性和可用性，不必过于纠结术语本身，更重要的是理解规范背后的可用性原理，将其合理运用在设计中。在整理控件规范之前，我们先大致了解一下常见的相关术语。(1)模态（modal）和非模态（nonmodal/modeless）这两个概念的理解基本没有什么异议。可以简单地理解为：①模态（modal）?用户可以在不脱离主任务（不离开当前主窗口）的情况下完成其他任务或获取信息。?模态情境会打断用户的操作，用户必须通过点击相关按钮或其他方式来退出模态情境，之后才能进行其他操作。?通常在需要获取用户的注意力、让用户完成独立的任务或做出明确选择的情况下使用。②非模态（nonmodal/modeless）?不会阻断用户的操作，用户可以继续之前的交互操作，不对其进行回应。?通常，用户可以点击非模态窗口之外的其他位置来关闭它或等它自动消失。(2)弹窗/弹框/弹出层/浮层/对话框/警告框（Popup/Popover/Dialog/Alert）在很多的规范、文章里，这几个概念都是混着用的，并没有明确的、统一的概念定义。「弹窗」这个概念也逐渐泛化，在很多文章中被用作一个统称，指代所有从界面中弹出、临时存在的窗口。查阅了以上术语的相关资料后，我发现这些术语也没有标准定义，并且中英文版本很难对应上，去细究这些术语和分类反倒可能导致混乱、不易理解。于是决定以iOS官方设计指南为主要依据，并参考MaterialDesign和其他相关规范，对“弹窗”相关的控件进行梳理分类。(1)iOSHumanInterfaceGuidelines相关简介①Apple的HumanInterfaceGuidelines目前有macOS、iOS、watchOS、tvOS四个平台的设计指南，iOS是由之前的iPadOS和iOS合并而来的。②以前，iOSUIKit将界?元素分为4种类型：?栏（Bars）：包含可以告诉用户他们当前所处位置的信息，以及帮助用户导航或触发动作的控件。?内容视图（ContentViews）：包含应用提供给用户的详细内容，并且支持进行滚动、插入、删除和排序等交互行为。?控件（Controls）：执行动作或者展示信息。?临时视图（Temporaryviews）：短暂地出现以告诉用户重要的信息或额外的选项和功能。③后来，iOSUIKit将界?元素更新为3种类型，「临时视图」和「内容视图」被合并为「视图」：?栏（Bars）：告知?户当前在应用中所处的位置，提供导航，也可包含按钮或者其它用于触发动作和获取信息的元素。?视图（Views）：包含?户在应用内看到的详细内容，例如?本、图形、动画和交互元素。视图允许使?诸如滚动、插入、删除和排列之类的交互行为。?控件（Controls）：触发动作和传递信息。包括按钮、开关、输入框和进度指示器等控件。(2)iOSHumanInterfaceGuidelines和GoogleMaterialDesign中与“弹窗”相关的UI元素列表(3)iOSHumanInterfaceGuidelines中与“弹窗”相关的UI元素(4)GoogleMaterialDesign中与“弹窗”相关的UI元素(5)iOS和Android的部分异同(1)归纳分类，编写规范大部分的文章都按照“模态”和“非模态”来对“弹窗”相关的控件进行分类，但是，其中部分控件并不只有某一种模式，例如，官方定义的标准Popovers（仅用于iPad）和我们目前实际应用中的Toasts都既有模态的，也有非模态的。所以，为了方便规范的整理，这里不按“模态”和“非模态”进行分类，具体分类如下（点击「移动端交互控件规范总结：弹窗」可查看大图）。详细规范可在《移动端交互控件规范总结：弹窗（二）》中查看。(2)界面清查，记录问题对控件进行分类、规范整理之后，就开始对当前应用中的相关控件进行清查，并记录存在的问题，以便在下次迭代中优化完善。(3)制作组件，实际应用，迭代完善除了对当前应用中的交互控件进行清查、优化，还可根据规范制作UI组件，以便在之后的设计中应用。同时，在实际运用中发现规范和组件存在的不足和问题，不断迭代完善。

小编：

KerrXu

作者已经授权本

转载请注明:http://www.povkm.com//mjccwh/21866.html