php时光选择控件技巧_你真的理解这些交互控件吗

文章目录 [+]

曾几何时，对付刚入圈的交互设计师碰着一些具有国际视野（略带一丝装逼）的产品经理时，也会涌现上图中的环境。
亦或许在某个不经意的瞬间，你也曾犯过下图的缺点。
那我们本日来认识一下那些常用的交互控件~

按照功能划分

php时光选择控件技巧_你真的理解这些交互控件吗

实在关于交互控件的名称和定义在学术界并没有统一的标准，但是目前市场主流的OS厂商都有自己的标准定义，分为：Apple的Human Interface Guidelines 和 Google的Material Design。

（图片来自网络侵删）

可以看到：在Apple的Human Interface Guidelines中apple将交互控件归入视图（Views）中，而Google的Material Design将交互控件归入组件（Components）中。

在这里我不会严格按照两家给出的标准对每一个控件都做详尽的赘述，我将把事情中常用的组件按照功能来划分一下并参考iOS和Google对付这些组件的描述，来向大家大略梳理一下他们的定义和用法。

模态与非模态

在正式开始之前，我先大略先容一下模态与非模态。
下面是维基百科关于模态窗口（Modal window）的标准阐明。
其含义便是：模态窗口下，用户被逼迫必须先与当前视窗进行交互才能回到主窗口，此时用户的行为是线性的。
由于其会打断用户操作并且逼迫用户进行交互，因此模态控件的利用必须谨慎。

反之，非模态即用户不被逼迫先与当前视窗进行交互也可以回到主窗口，用户行为是非线性的，拥有更多主动权。

收纳+勾引

这类控件包括Popup（或者叫Popover）、Action views、Action sheets/ Sheets_bottom、Dropdown menu，其共同特点是由用户主动触发（默认隐蔽）、轻量化、指向性较强、包含操作、不会自动消逝。

这类控件多用于屏幕空间的移动设备，作为低频但主要的操作入口（Dropdown menu在PC的运用处景同样很多）。
这一类控件多数是非模态的。

1. Popup（Popover）&Dropdown menu

iOS的Popup（Popover）与Android的Dropdown menu的利用场景和展现形式基本类似，紧张用于收纳一些默认不展示的低频选项，不过值得把稳的是：Popup和Dropdown menu涌现的位置和办法与其入口的位置是有很大关系的，特殊当入口按钮是位于屏幕边缘的时候尤其须要把稳。

此外，Popup（Popover）自带箭头的强指示性，同样适用于展示隐蔽操作或新功能上线后的用户教诲。

2. Action views&Action sheets

不同于Popup（Popover）和Dropdown menu险些可以涌如今屏幕的任何位置，Action views和Action sheets/ Sheets_bottom一样平常涌如今屏幕底部。
同样，他们也是用于容纳并展示低频但主要的操作。

提示+勾引

这类控件包括Toast、Snackbars、HUD，其共同特点是：不一定由用户主动触发、轻量化且一样平常不包含操作，展示韶光较短（一样平常在3秒以内）且会自动消逝，这类控件多用于系统状态或者用户操作结果的展示。
同样，这类控件基本都是非模态的。

1. Toast

根据维基和android开拓者指南的阐明：Toast是一种小巧的作为操作反馈的信息窗口，并且会自动消逝。

故意思的是，听说一位微软前员工在开拓MSN Messenger时，以为MSN弹出关照办法很像烤面包（Toast）烤熟时从烤面包机（Toaster）里弹出来一样，因此把这种提示办法命名为Toast，后来这位微软前员工带着这一习气命名跳槽去了Google。

实在，在实际运用中，Toast的运用延伸较多，除了作为操作反馈的信息展示窗口，还常常被用来作为系统状态更新时的提示，并且在涌现的位置上，也没有非常严格的定义。

2. Snackbars

按照利用场景和元向来说，Snackbars可以大略理解为Toast的升级版本，但根据Google Material Design的定义，我们可以创造：Snackbars与Toast的紧张差别在于前者可以包含一个操作按钮，而后者不包含。

在实际运用中，Snackbars的运用范围实在比较广，我们会创造：Snackbars紧张被用在展示一些对用户很主要的操作结果，比如：删除文件或者快速勾引。

3. HUD

HUD全称叫做UIProgressHUD，其实在iOS Human Interface Guidelines中并没有Toast和Snackbars这样的定义，但是与之对应的是UIProgressHUD（直译为界面进程浮层），这种控件是iOS系统私有的，在App Store上线的app原则上是不能直接获取的，以是涌现了许多模拟的第三方控件（紧张是app开放者用以与iOS的UI风格保持同等的嵌入式组件）。

4. Toast& Snackbars& HUD小结

实在，我们这样理解这三者之间的关系更加大略明了：Google的Toast≈iOS的HUD，Snackbars=Toast+操作按钮，Toast+Snackbars+HUD都是用来展示app或者系统内的状态信息。

提示+操作

这类控件紧张是Dialogs/ Alerts，严格意义上来说，实在Alerts（警告型对话框）也是属于Dialogs中的一种。
Google的Material Design将Dialogs分为：Alert Dialog、Simple Dialog、Communication Dialog和Full-screen Dialog，但是在iOS中并没有定义Dialogs这种控件，而只是对Alerts做了定义。

对话框的精髓在于让用户聚焦，它一样平常有两种利用场景：

系统的关键状态提示，并且如果不处理当前状态会影响到用户的下一步操作，如：系统缺点或者电量过低。
须要用户特殊把稳的关键信息处理，如：删除文件、支付确认Google Material Design关于对话框的定义。

1. Alert Dialog

由于警示型对话框涌现的形式非常直接（包含用户主动触发与系统自动触发），且常常会打断用户当前操作行为（强打扰性），因此绝大部分的警示型对话框被用在关键信息处理或者关键状态提示上，

如：

文件操作场景 — 删除文件，放弃编辑；支付场景 — 支付二次确认，余额不敷提示；主要状态改变场景 — 手机电量低，版本更新。

值得把稳的是：在警示型对话框中的按钮文案利用一定要避免歧义，不要让用户做选择变成一道哲学命题。

Google Material Design总结了一些Alert Dialog按钮文案的一些基本规则：

（1）文案要释义操作行为，比如：当问题为“您是否要放弃编辑当前的邮件”比较于用大略的“是”或“否”，利用“放弃编辑”和“连续编辑”用户更能清楚操作后的预期效果。

（2）从用户习气来说，对付当条件问切实其实定回答应置于右侧，而否定回答应置于左侧。

同样接着上一个例子，当问及“您是否要放弃编辑当前的邮件”时，“放弃编辑”该当置于右侧，而“连续编辑”该当置于左侧。

（3）对付APP内或系统主要状态的提示，不要给多余的按钮而让用户费解。