赞助商
立即赞助

超全面!移动端弹出层组件的定义、应用与设计

UI设计3年前 (2021)发布 流光
4K 0 0

工中我们常常听到或在撰写互说明时提到“从底部向上出现弹”、“出现浮”、展示“对框”、弹出“弹框”、“出现对框”诸此类的术。我相信大家对“浮、弹、弹框、对框……”等称呼常常也感到困惑。到底什么时应该称呼为“对框,什么时称呼弹框”,此类相似的组件又是何分类的,应该何应用、何设计。

恰好笔者近设弹出层组件,篇文章将结合自己的战经历,自己对弹出组件的理和设计经验分享给大家,希望帮助大家对弹出组件有更清晰的认和理。

弹出层组件的定义

首先我们看一下弹出组件的定义:当触某项操时,在页面上方展示的弹出容器,容器内展示文、按钮、列表、标签、表单项等内容,英文名称定义为 Popup。

超全面!移动端弹出层组件的定义、应用与设计

△ 弹出组件的构成

根据弹出置的不同,我们又可以将 Popup 组件细分如下 5 种样式。

超全面!移动端弹出层组件的定义、应用与设计

△弹出层组件的 5 种样式

弹出层组件的式,想必大家已经想日常用的比较多的组件了,比如“Alert 确认框,picker 选择器、基于景的筛选组件”等。弹出层组件是十基础的组件,基于该组件可以开发通用性组件以及景组件。从“形式”角度来,“浮层、弹层、弹框、对话框……”本质上都是弹出层。

“浮层、弹层、弹框”是泛指的称呼,两大官方平台都根据自身的规范对相组件进行命名。Material Design 和 iOS 官方规范中的弹层组件如图示,并且笔者从“功”角发整了组件之间的对应系。后会详述每种组件的定义及应。

超全面!移动端弹出层组件的定义、应用与设计

△MD 和 iOS 规范中的弹层组件

在详述组件前,需要大家传个概念“模态”,即平时我们常说“模态弹框”(弹框可理解为是弹出层样)。并有组件分类被称作是“模态弹框”,而是弹框采用了“模态”设计手法时,我们将其简称为“模态弹窗”。

iOS 官方定义为:

“Modality is a design technique that presents content in a temporary mode that’s separate from the user’s previous current context and requires an explicit action to exit. Presenting content modally can:
Help people focus on a self-contained task or set of closely related options
Ensure that people receive and, if necessary, act on critical information”

翻译过即:模态一种设手法,它使用一种临时性的模式将用户之看到的内与当看到的内行区分,并且需通过明确的操作能退出该模式。模态呈的内可以:

帮助用户专注于一个独立的任或一组紧密相关的选项,确保用户收关键息,并在必要采取行动

由此可见,弹层是否为模态弹层可根据具体的使场景进行定义。在 iOS 官方中定义的模态弹层通包括:Alerts, Activity Views ,Share sheets, and Action Sheets .iOS 13 及后续的系统中将 Fullsreen 作为模态弹层进行使。MD 中的 Dialogs 组件均为模态,而 sheets 组件采模态设计手法。

弹出层组件的分类与应用

1. 警示型弹框

警示型弹框均采用从页面中间进行弹层的方式,MD 和 iOS 中组件的式略有不同,但其使用景和功能相同。都是在重要息提示、需要用户确认的操作、以及破坏性操作之前进行提示,警示型弹窗会中断用户的任流程,响用户体验,因此需注其使用频率。

超全面!移动端弹出层组件的定义、应用与设计

△警示型弹框 Alert Dialog

使场景:通在系统级信息的示,例如权限的获取、系统通知,需要明确告知户的信息,及破坏性操作前使。

超全面!移动端弹出层组件的定义、应用与设计

△警示弹框应

2. 任务型弹层

根据户在弹层中需要成的任务容和任务数量,又可分为简单和复杂弹层。

简单弹层

于在弹层中展示容,需要户进行择的场景,该场景通只需要户成一种任务,如通过点击的方式,成信息的择或分享。在 iOS 中采从向上弹层的方式,而卓平台多使在页面中间弹层的方式。

弹层是否存在操作按钮可根据实应用场景去确定。常选择项条目较少或内容简单易于识时,可不需要「确认」按钮。而在选择项条目较多时或需要用户作短暂思考才能确认选项时,可增加「确认」按钮,允许用户有改选项会。

超全面!移动端弹出层组件的定义、应用与设计

△简单型任务弹层组件样

超全面!移动端弹出层组件的定义、应用与设计

△简单型任务弹层组件样

弹中信息的呈现方式又分为“列表”和“网”两种,大种场下,均使用列表展示内容,更加符合用户从上到下的阅读习惯;而在分享场下通网的方式将分享渠道展示出来,增加屏显的内容,同时提高用户查看信息的效率,具样式参考上图。

使用场景:简单型弹层多用信息的筛选、排序信息确认的场景下使用。且目市面的绝多数应用中,除原的安卓应用外,部分应用都采用从底部向弹层从顶部向下弹层的方式。

超全面!移动端弹出层组件的定义、应用与设计

△简单型任务弹层的应用

复杂型弹层

复杂型弹层中通常承载的信息丰富,包含多种组件,需用户完一系列的任务。

涉及息筛选,通常采用侧边弹层组件进行展示,且弹层上的息仅支持垂直滚动查,不支持水滚动查,且通常采用“非模”的法,方便用户快速取消当前弹层。在 iOS 中并无“Sheets:side”组件,但是在 iOS 系统中,多 APP 应用在复杂的筛选景下也都采用侧边弹层的方式。

全屏弹层会将当前页面中的全信息遮挡,更方户聚焦于当前需要成的任务,避免户的注意被分散。通采模态的设计手法,仅当户触发确认、取消或闭操作时,弹层才会消失。一般全屏弹层中需要包含标题、操作按钮、容区域。户在全屏弹层中需要成多个任务,因此容区域中会包含多个组件。例如“按钮、输入框、标签、开、列表、日期择”等。

超全面!移动端弹出层组件的定义、应用与设计

△复杂任务弹层的组件样式

使用场景:常用于完成复杂任务表单信息填写、内容筛选、搜索和内容展示。

超全面!移动端弹出层组件的定义、应用与设计

△复杂型任务弹层应用

需要单独说明泡框组件

在 iOS 官定义,泡框组件应用于 iPad 应用程序,在 iPhone 应用程序,过以全屏模态视图而弹出框形显示信息,来利用所有可用屏幕空。是,组件被定义后并不是成不变,而是随实场景进应用。例如,在手端,泡框组件更多被用于简单信息展示与选择。

超全面!移动端弹出层组件的定义、应用与设计

△Popovers 泡框应用

小结:

笔者按照使用场景、信息复杂度、功能相似度等,将弹出层组件归纳为两大类“警示型和任务型”,并枚举了常用 MD(安卓系统遵循规范)和 iOS 两大规范定义弹出层组件,便读者弹出层组件有更晰了解。需要说明是,由于业务场景是复杂、多样,各位设计师也需要结合实业务场景和设计目标,灵活使用组件。

超全面!移动端弹出层组件的定义、应用与设计

△弹出层组件类型与使用场景

如何设计弹出层组件

1. 设计目的

首先需要解我们为么要设计组件,组件最终设计的目标是么,笔者从“设计侧和技术侧”两方面谈谈自己的解。

设计侧:规范组件设计,对有利于全公司的设计师对组件的使有统一的认知,明确组件的使场景,避免误和错组件,并且方人设计师快速习和上手,设计效率。对外有利于保证设计上线后的一致性和规范性,方户对本公司产建立统一的心认知。

技术侧:用基础组件,具有可复用性,能够减少复开发,大大提高开发效率。

组件设计的最终目标归纳为持设计的统一,提升用户验,同时提高设计和开的效率。因此,组件设计是非常有必要的,么到底何从 0-1 开始设计组件呢,下面我们来看组件设计的详细思路。

2. 设计思路

其组件设计的基思路是通用的,不仅适用弹出组件,还适用其他基础组件的设计。通常我们从组件的定义、用法、构成、种类、行为与状态个方面进行组件的设计。

超全面!移动端弹出层组件的定义、应用与设计

△组件设计的思路

  • 定义:过精准话术描写组件内容与目。
  • 用法:组件包含的内容、出现的位置、信息展示的规则等。
  • 构:通过示意图展示组件包含的具体信息,例如标题、按钮、内区。
  • 种类:根据一定的规则对组件进行类。
  • 行为与状态:使组件的整个交互流程与交互逻辑说明;组件的状态说明,例如 normal 态、click 态,disable 态,滚时的页面状态等。

回归本文所讲的移动端弹出层组件,组件计需要考虑其“通用性和可复用性”。基于此则,将弹出层组件进行拆解,如下图所示。它包括:

  • 遮罩层:覆盖底部页面的内,方便用户聚焦当弹层的信息
  • 容器层:承载内容的容器
  • 容层:容器里的容,同区的容可单独封

超全面!移动端弹出层组件的定义、应用与设计

△弹出层组件的拆解

从上图中可出,本文第一部提出的 Popup 组件是最基本的弹出层组件,基于该组件可进行任何弹层组件的开发。因此,在弹层组件计将 Popup 组件抽离出来作为最基础的组件进行开发, 还可以进一步开发通用的弹层组件和高频使用的景组件。由于上文中已讲 Popoup 组件的构成式,且由于该组件相对来讲比较简,因此不过多赘述。下面以通用组件“Picker 选择器”和筛选景下的高频组件“筛选器 Filter”为例进行说。

设计实战

1. Picker 选择器

义:用于从一组预设数据中行选择的控件。

用法:

  • 选择器通常显示屏幕底部或弹出窗口中。
  • 通常包含 2 个操作按钮“取消和确定”,按钮名称支持修改。
  • 可自定义设置是否显示标题。
  • 支持单列选择和多列选择,多列选择般不过 4 列,多列值可配其级联关系。

构成:标题、按钮、容(当前项和他项)

超全面!移动端弹出层组件的定义、应用与设计

△Picker 择器组件的构成

类:根据选项是否存在级联关系可将其分为 2 类,普选择和级联选择。

超全面!移动端弹出层组件的定义、应用与设计

△Picker 选择组件分类

行为与状态:状态,给出单列选项和列选项的常态页面以及选项被禁用的状态页面。行为,需要定义完整的组件互逻辑,从口->弹出现->选项查看->选择目标选项->弹消失的完整逻辑进行说明。

超全面!移动端弹出层组件的定义、应用与设计

△Picker 选择器组件的状态

超全面!移动端弹出层组件的定义、应用与设计

△Picker 选择器组件的互流程与行为说明

当完以全部内的撰写时,可对本组件发出的效果行明。例如:

  • 普通选择(以单列选择示例,默认项为一个选项)
  • 普通选择(以 2 列选择示例,默认项每列的第一选项)
  • 多列选择无关系(以日期选择年、月、日示例,3 列选择,默认项为当)
  • 多列择存在级联系(城择为例,3 列择,默认项为每列的第一个项)。如此的说明会技术同本次组件的产示例更清晰,可减开发过程中的沟通成本。

2. Filter 筛选器

Filter 组件基于公司移动端产品均存的高频“筛选”场景总结的场景(业务)组件,其设思方描述的通用组件的设思相同,笔者此处只强调 2 重点注意事项。

景组件在计遵循“加法”逻辑,从而提升组件的复用率。组件内容块进行封装,从而增加组件的灵活性。

超全面!移动端弹出层组件的定义、应用与设计

△筛选器组件

在上图示的筛场景中,单类目和多类目筛若均为频的使场景,那么单类目和多类目筛组件均可抽离成组件并进行开发,且多类目筛可基于单类目筛组件进行开发。但是多类目筛组件是无法覆盖单类目筛组件的,组件开发同于设计稿,设计稿可将多个类目删除掉只剩余单个类目,但是组件的代码逻辑遵循此删除逻辑。在原有组件的代码上修改的开发成本要于重开发组件。因此,如果要修改多类目筛组件的逻辑,如重开发单类目筛的组件。这是需要我们牢记的,组件设计需要从“原子组件到复杂组件”,遵循由“简单到复杂”的法逻辑。

而在组件开发时过“goup”形进封装,可使组件更加灵活。例如,业务场景是需要过“输入框”组件输入筛选条件,要将 Group 内容改为“输入框组件”,即需改该 group 下代码即可,筛选组件其他逻辑仍然可复用,这提高了组件用性和复用率。

当,Filter 组件还需要考虑很设计细节,例类目名称是否显示为当前筛选项名称、重置的逻辑是什么、确认筛选页面信息何变化、筛选项支持单选还是选等等。复的场组件通常是由个原子组件组合而成,因此组件的逻辑也更为复,组件设计的整流程和互细节也应考虑的更加面。

至此,该篇文章的全部内已叙述完,感谢各设师的耐阅读。

读完该篇文章,希望各位计可以达成以下 3 个目标:

  • 不再不同的弹出层组件的义用法感到困惑。
  • 了解弹出层组件的类以及主要使用景。
  • 掌握组件的设计思路,会从 0-1 设计组件。

熟练理解组件的定义及用法是非常重要的,它是在业景中产出优秀计方案的前提,同它也体现了你的基础功是否扎实。希望每一位计,尤其是新人计,能够清楚认知每个组件的定义、用法,提升组件计和应用能力,持续夯实的基础计能力,让的专业能力不断提高。

注公众号「酷乐户体验设计」

超全面!移动端弹出层组件的定义、应用与设计

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

在很多优秀的设计作品中,我们常常会看到一些英文的出现,形态上也各不相同。小到不仔细看就看不到、大到比产品还大。这也会...
中英文排版
有趣的灵魂万里挑一,人们对正面情绪的向往使“有趣”成为沟通交流中不可或缺的情感特征。随着越来越多的品牌涌入市场,用户对...
ui设计
每天努力的用心的去做设计,挺开心的,其中最开心的细节就是“思考自己的设计如何与别人的不一样”,让你的差异化产出得到认可...
图标
编者按:做一张Banner 需要掌握版式、字体、配色等等,那么庞大的知识体系,应该如何学习?本文从排版这个知识点入手,告诉你...
Banner设计
文章以小明的故事为例,来给大家分享关于从平面设计岗位转到运营设计的小伙伴们,在设计初期会在移动端常出现的问题。 小明...
ui设计
点开这篇文章的同学不妨先来思考一个问题:你电脑里究竟有多少字体包?估计连你自己都不太清楚吧。 但在我们工作中使用率最...
字体设计
编者按:一套 UI 界面当中,核心的 APP 图标是用户每天都要接触、经常使用的视觉组件和交互对象。设计图标的时候,要用到大家...
Tubik Studio
本文作者将给大家分析几个电商设计作品,并且会从排版、配色、用户体验、定位、用户心理等各个角度给大家讲解分析指出问题所...
Banner设计