覆盖层设计(上)-对话框&浮层

2017-3-28 用心设计

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里

什么是覆盖层？从本文的角度来讲，覆盖层指在当前页面上打开的临时界面。这些临时界面能够完成提示性的或上下文相关的任务，它们的打断性较弱，为用户保持较为连贯的使用体验。我们日常会见到的 “浮层”、“弹层”、“弹框”等都在本文的讨论范围内。

覆盖层有着广泛的应用场景，但因为各平台规范不同，又没有统一说明，所以设计过程中难免会遇到各种问题。比如在既定场景下无法确定使用哪种覆盖层具体样式；自己设计的自定义样式没有平台默认组件开发效率高。所以本文的目的是梳理常用的覆盖层样式和应用场景，帮助大家在设计过程中更有目的性的使用覆盖层。

今天想要讨论的是覆盖层中最为常用的两种形式：

对话框
浮层

下面将对这两种形式进行具体描述。当然，以下只代表作者本人观点，欢迎指正。

1、对话框

对话框也叫弹框、弹窗等。它是模态的，需要用户对其进行操作后才会消失。

1.1、提示型对话框

提示型对话框主要用于对系统级、应用级或用户操作结果的提示，需要确保用户知晓当前的状况或需要用户进行选择时适用。iOS平台和Android平台的对话框样式不同，但使用方法一样。

优点：能够确保流程正常执行，防止用户犯错。
缺点：对用户的打扰较大。

1.1.1、通知型提示

【使用场景】通常用于通知用户某件事情完成了，或重要信息介绍等；
【内容】一般由图文信息+1个确认性按钮，只能点击了按钮后才能退出对话框；
【变形】有时会在对话框角上提供关闭按钮以退出对话框；图文介绍也可以分多页；甚至确认按钮可放置于整个蒙层区域响应。

1.1.2、确认型提示

【使用场景】通常用于二次确认、权限获取申请、引导用户执行某项操作等场景；
【内容】一般由提示描述+2个按钮构成：描述可带标题或不带标题；2个按钮分别为一个积极的确认按钮和一个消极的取消/拒绝按钮构成，积极按钮放于右侧（积极按钮的位置设计上一直是仁者见仁智者见智，windows平台一般是把积极按钮放在右侧，而Mac OS更倾向于放在左侧，由于windows系统的市场占有率更大，许多web产品都倾向于将积极按钮放在左侧；但在移动端设计场景下，一方面在手指对于右侧按钮的操作更加敏捷，另一方面Android平台有明文规范建议将积极按钮放于右侧，所以本文建议在移动端设计时将积极按钮置于右侧）。注意：积极按钮指使得流程顺利执行下去的操作，其具体操作可以是“删除”“放弃”等。
【变形】有时会在对话框角上提供关闭按钮以退出对话框，关闭按钮一般等效于取消操作。

1.1.3、选择型提示

【使用场景】需要用户选择一项操作以保证流程继续下去；
【内容】一般由提示描述+2~3个按钮构成：描述可带标题或不带标题。

1.1.4、小结

针对3种不同的提示型对话框，主要有以下差异：

1.2、输入型对话框

对话框还可以用于某个或某组信息的输入。输入的信息不易过于复杂，点击对话框的确认键后统一执行输入内容。一般情况下，对话框上不允许再出现其它对话框。

1.2.1、单页对话框

【使用场景】输入1~2行文本、进行一组多选操作等；
【内容】一般由标题+输入项+2个按钮构成：一个为确认按钮，一个为取消按钮。点击取消按钮为退出当前流程，但应根据输入内容的量和重要程度制定取消时是否需要二次确认。
【设计Tips】当输入内容为文本时，进入对话框就激活第一条输入框并弹出键盘，键盘类型需根据输入的文本类型进行定制，如字母键盘、数字键盘等。

1.2.2、可滚动对话框

【使用场景】当输入内容无法在一页展示完全时，对话框可支持滑动；
【内容】标题置顶+输入项+操作按钮置底。注意：即使对话框的内容区域可以滚动，但输入项内容仍然不宜过多。

1.2.3、全屏对话框

【使用场景】全屏对话框与可滚动对话框的使用场景其实非常类似，区别在于全屏对话框能够承载更多的内容；同时在全屏对话框上允许使用其他对话框。
【内容】全屏对话框在形式上非常像新的页面，但其本质是一个对话框覆盖层。全屏对话框由标题+关闭按钮+确定按钮构成。页面展开时由底部往上弹出，收起时从上往下收起。当然对话框的应用场景并不止于此，输入型对话框和全屏对话框主要用于执行一些分支任务或上下文相关的信息补充。这类使用场景除了对话框外还可以使用Actionsheet、Bottom Sheet、menu等交互形式，这些覆盖层样式我们将会在下篇中讨论。欢迎一起讨论哦~

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务