控件是啥-计算机控件是啥 收藏 0

必会的30个组件

组件相关

就是指图标，比如像app的icon图标，还有在页面内的图标，都能叫做icon。

icon需要有象征意义，需要有隐喻性，需要让人能在最短的时间内理解出icon的含义。

问你个事，抖音的第三个icon是啥？

也叫穿梭框，一般为左右两栏，左边为待选择项，右边为已选项。

从左边选到右边表示已选，从右边移到左边，表示取消选择。

常用在B端产品中，当需要多选且选择项较多时，就可以使用穿梭选择器。

当可选项很多，大于10个时，可以考虑使用穿梭选择框。这样用户就可以清楚的知道自己选择了哪些内容。

徽标可以理解为小红点，就是在图标、文字右上角、或者在页面某个地方的红色小圆点。常用来表示有新消息或者是为了达到某种信息提示。

徽标的形式不仅只有小红点，也有红圈里加数字，表示新消息数量。也有直接小红圈+文字，来更好的传达信息。

骨架屏是一种加载状态，也叫做加载占位符，加载时在页面上通过灰色块显示出大致结构。

可以有效缓解用户的等待焦虑感，向用户表达出“这个页面有这样的数据”的感觉。同时结合光泽掠过或者灰色块来回收缩的动画，来表达页面正在加载中。

骨架屏比普通的加载loading动画能提供更好的视觉效果，能产生加载很快的感觉，对用户体验也更好。

相同的响应时间内，菊花转转的再快，也比不上骨架屏来的感觉快。

是指在页面内没有数据时显示出空状态效果。避免没有数据时显示出空白页面，让用户陷入“到底有没有数据”的困惑。

缺省页包括网络异常，加载失败、无权限、搜索无结果等。

缺省页不仅是只一个页面全是空状态，在页面中的某个模块中也会有空状态，针对某个模块内也要添加缺省状态。

没有数据非常影响用户体验，这时就靠缺省页来安慰用户。添加合适的文案、图案、引导、动效来给用户一些正向的传达。

比如没有关注，我们推荐用户可关注的博主。当加载失败时，可以添加“重新加载”按钮，让用户再次刷新。

缺省页空状态属于数据为空的临界值，经常会一不小心遗漏，敲黑板，需要注意空状态。

指标签页，可以理解为菜单、导航栏。通过不同tab页聚合不同信息收纳在一个页面区域内。

Tab页分为顶部、底部、侧边栏。

顶部tab是最常见的，在很多app和网站中都有使用，因为顶部tab占据的页面空间更小，同时采用滑动的形式可以容纳很多tab。

顶部tab除了有文字，还有图标tab。

侧边栏tab有左、右，常见的是左侧栏。如果更想突出内容，可以采用右侧边栏。

tab页的层级关系一般是底部tab＞顶部tab＞侧边栏tab。对于页面内容太多时，也能互相嵌用。比如顶部tab页里再套个二级左侧边栏tab。

在ios里有个Segmented Controls，叫分段控件，和tab页很像，都是用来聚合页面。

不一样的是，分段控件只能手动点击，不能左右滑动切换，而tab页可以左右滑动切换页面。

分段控件可以是文字分段，也可以是图标，下图是图标分段控件。

模态弹窗：对用户操作做出阻碍的弹窗。用户必须对弹窗内容做出回应才能进行下一步操作，在操作确认、重要信息提醒时，都需要用到模态弹窗。

对于用户使用场景的不同，可以选择使用不同的模态弹窗，比如对话框、气泡提示、动作栏等（这些概念下边会说）

非模态弹窗：不会阻碍用户操作的弹窗。像toast提示、通告栏就是非模态（这些概念下边会说）。

气泡可以理解为一个小弹窗，就像气泡一样，体积小、重量轻，想往哪飘就往哪飘，刚显示出来，手指一搓，就bou~的没有了。

气泡是种形式，结合不同场景，常见的有气泡确认框、气泡卡片、气泡引导等，特点就是轻、小、灵活。

还有个大特点就是会有个小箭头，来表示这个气泡从哪出来的，能够突出显示特定位置的提示。所以在引导用户时，就可以大大方方的使用气泡引导。

对于一些不常用功能、或者快捷功能入口，可以采用隐藏的方式，在显示的时候就可以通过“气泡卡片”的形式弹出来。

这里浮出层是指浮出在半透明层上的弹窗窗口，可在浮出层中进行操作。通常是点击页面某个区域后展示出来。

常指从页面底部弹出的底部列表弹窗，悬浮在半透明蒙版上，不需要进行跳转页面，在当前页面就可以进行更多的操作。

这个概念来自ios，简单理解是指在从底部出现的弹窗，常见的样式为icon+标题，可以让用户快速访问其它功能。

当动作栏用于分享场景时，可以叫做分享面板。

也叫吐司提示、轻提示，是一种非常轻量级提示。出现后，过几秒自动消失。出现位置有屏幕顶部、中部、底部。

由于出现时间短、面积小，过几秒就会自动消失，所以不能添加过多的文字，也不能放重要信息。Toast属于非模态。

形式一般为在页面上方显示的小横条内容。可用来做状态提示、消息通知。属于非模态，可以提示用户，但不影响用户的操作。

通告栏比toast达到的提示更重，因为它更明显；比弹窗提示、气泡提示达到的提示轻，因为它不会影响用户的操作。

通告栏位置通常在页面上方，也有在页面下方显示。可以主动消失，也可以常驻。同时在一个页面内也可以添加多个通告栏。

可以理解为悬浮在页面底部的消息通知，可以自动消失，也可以常驻，手动点击消失。

snackbar的提示强度比Toast强，不影响用户操作，属于非模态。另外snackbar在出现时可以添加操作按钮，引导用户做其它操作。

HUD有几种说法，我们一个个看下。

• HUD-轻提示，和上边的Toast相似。

与toast不同的是，它作为提示出现时，都在页面中部显示，Toast只有文字，而HUD为图标+文字。

• HUD-平视显示器.全称是Head-up Display。

在航空航天、汽车领域HUD指将参数内容投射到头盔、挡风玻璃的一种显示设备。可以在视线中显示的参数内容，如开车时不需要看仪表盘，在视野范围内就能看到车速。

是指在页面中显示出交互操作的指示层，也是种反馈组件，常见的如看视频的快进提示，或者是调整音量的提示。

有些文章把HUD也叫作透明指示层，正确性我无法判断，所以在这把透明指示层单独说明。

17.工具提示/文字提示（Tooltips）

常指在鼠标悬浮在某个图标、按钮、文本等元素上，显示出来描述或者功能说明，用于辅助用户了解某个功能。

有些文章翻译为纸片，但是我觉得不形象，那么Chips是什么呢？

看下边的图，这个像按钮的就是chips。

但是Chips与按钮是不同的，按钮的内容是固定的，而chips是动态的，根据支持内容不同显示不同的内容。所以chips更像是标签。

Material Design将Chips分为4类，分别是辅助chips、过滤chips、输入chips、建议chips。

• 辅助chips：可以跨越多个app的智能或自动化操作，比如说购买电影票后把看电影的时间添加到日历。
• 过滤chips：用于筛选，可用于单选与多选。
• 输入chips：用户输入的信息聚合，比如发邮件输入收件人后，后边有个“×”。
• 建议chips：动态生成的建议来帮助缩小用户的意图。

步进器是指通过增、减按钮对数值进行控制的组件。常用于小范围整数数值输入,每次增、减的数量都是恒定的。

是指通过横轴中通过滑动的方式选择对应的数值、区间。

特点是在横轴中展示出了最小值与最大值，用户可以通过滑动的方式自己选择对应数值。

区间滑动选择器是指可以选择最小值与最大值，让用户自己选择区间范围，常用于价格选择。

Floating action buttons ，浮动按钮，就是悬浮按钮。

常用于主功能入口，如新建。

状态栏是手机屏幕上方显示时间、电量、手机信号的那一栏

导航栏是指状态栏下边的那一栏，导航栏可以是很简单的只有一个标题、也可以放搜索框，或者其它操作按钮，或功能入口。

在图片或卡片可进行左右滑动时，常使用指示器来表达所在位置。

根据指示器的样式不同，有圆点指示器、滑块指示器、线型指示器、数字指示器。

24.卡片

卡片是一种容纳信息的展示方式，每张卡片内承载不同内容，不仅能有效处理信息集合，同时有效的让用户聚焦到卡片中的内容。

卡片的高效分区、信息突出在很多产品中都已经使用到。

可以横向左右滑动来查看内容的方式叫做泳道。

将多个元素内容在一定区域内横向滑动，扩展了页面的横向空间，一般是手动滑动查看，并没有自动滑动。

Banner是指出现在页面中明显的横幅图片，通常作为推荐位、广告位，如产品推荐、广告位等。

大家应该都清楚这个

但是根据样式不同，还能分为胶囊banner、瓷片区banner、白底banner，这些名字是否为标准的，我也不清楚，所以如果你不知道描述，可以就按这种名字叫。

将不同矩形块通过网格布局的方式就组成了瓷片区。

特点就是布局很灵活，比banner占据的空间小，相同面积能够放更多的流量入口。

是指在首页中icon+文字通过宫格形式排列的区域。把多个功能入口排列的一起，很好的起到了引流的作用，特点还是很灵活。

据说是“金刚区”“瓷片区”这些词是美团造的，“金刚区”意思为“百变金刚”，灵活多变；“瓷片区”就像瓷片贴墙上一样，工工整整。

Banner、金刚区、瓷片区被称为3大运营版块，起着为不同业务模块、不同活动引流的作用。

导航相关

我们先说下抽屉，抽屉是指一种对组件展示方式的描述，像抽屉一样进行开合，将多余内容隐藏，出现的时候弹出，和浮出层很像。

对于不常用的功能，将功能入口隐藏起来，用户需要时，点击入口，然后将功能列表显示出来。

当起到导航作用时，就叫抽屉导航，也叫溢出菜单、扩展菜单、汉堡导航，就是将侧边栏隐藏起来。

先说下宫格，宫格是指一种布局方式，通过icon+文字直接平均排列开，让用户直接看到每个独立的模块入口，自己去点击。

当宫格布局用于导航时，就可以叫做宫格导航，像金刚区就是宫格导航。

索引导航栏是指通过首字母、或者数字进行分类组织内容，并进行导航的控件。

舵式导航是底部tab的变体，常用在Apptabbar上。

对于app的核心功能、想要用户操作的功能放在中间，变换下形式，引导用户去点击。

通常在UGC社区中，为了引导用户发布内容，将入口放在最明显的位置，通过最短的路径，引导用户发布。

设计相关

衬线体是指在字的笔画边角中有弯弯绕绕的字体，像宋体就是衬线体。

无衬线体与衬线体完全相反，是笔画线条统一，边角没有弯弯绕绕的字体，像微软雅黑就是无衬线体。

容器变换是一种动效的定义，来自 Material Design。

通俗的说是指在一个小卡片的基础上放大扩展到新页面。如点击小红书首页瀑布流卡片，进入到详情页面的动效，就是容量变换。

容器变换采用过渡的方式，引导用户的视线，减少使用过程中的顿挫感，提升流畅度。

直接用颜色表示出具体语境含义

如红色：警告

黄色：提示

绿色：成功

灰色：不支持

蓝色：链接色

rex-design语义色板

内容出界是指让内容溢出画框的设计方式，可以突出氛围，让画面更有冲击力。

这个概念也来自Material Design，在二维设计的基础上升到了三维，为了表现出页面中的深度，引进了Z轴的概念。

简单理解，就是层级关系。

通过使用阴影、浮层等来体现出页面的高度。

其它

热区是指页面中可以点击的区域，点击热区会触发一个交互事件。

比如说点击头像，进入个人主页，头像区域就是个热区。

热区的尺寸范围也会影响用户体验，比如说单选按钮，为了让用户快速选择，我们可以选择扩大热区范围，将图标+文字作为热区。

热力图，也叫热图，是指以特殊高亮的形式在页面中显示用户经常点击的区域，区域越亮，所以用户点击越多。

热力图非常直观的展示出用户在页面上的操作，对于我们分析页面的合理性，提高页面转化率都有很好的指导作用。

总结

以上就是我想介绍的一些组件名称以及其他名词，当然一些组件的中文名称通过不同的翻译方式，在国内的叫法各异。

我们不需要去过度纠结名称的专业叫法，只要这个名称让团队成员有相同的认识，不会出现误解，能够满足沟通就够了。

比如微信小程序右上角胶囊按钮里的三个点

深聊软件设计中最基础的控件元素

人人都是产品经理社区推出产品经理培训课程，让BAT产品总监手把手带你学产品吧！

控件作为组织界面最基础的元素，相信大家都不会陌生，今天想谈谈这个不起眼的话题。文章从现实的控件过渡到软件界面，再用三大输入法的控件作为实际案例解说，全文干货满满，来收！

一、现实世界的控件

“放学铃一响，小明立刻飞奔回家，到家后一手换鞋一手开灯，随即又躺在沙发上将风扇调至最大档。”

开门进屋、拨动开关、调节风速……一连串动作中的门把、灯挚、旋钮都是我们所说的控件。那控件究竟是什么呢？从字面上解释，控件（Widgets/Controls）就是可以通过直接操作而实现控制的物件。

如果从具体的属性出发，控件应具备以下两个基础特征：

– 可接触的

– 可改变状态的

而友好、易用的控件还应是：

– 无害的

– 不费劲的

– 有反馈的

– 愉悦的

对应诺曼提出的三个层次：

– 可接触的+可改变状态的——>可用的（Usable）

– 无害的+不费劲的+有反馈的——>易用的（Useful）

– 愉悦的——>吸引的（Engaged）

可接触与无害相互依存——当还是孩子的时候我们就被教导警惕危险的信号：有毒的、尖锐的、滚烫的……使用刀具时我们都会本能地握住刀背而非刀刃，因为圆润无害的物体更易吸引到主动的接触。

那所谓的三个层次又是怎么回事呢？请看下面这三种卸妆油：

– 同样是200ml的卸妆油，使用Muji（左）时需要将整个瓶子倾斜才能倒出（有点麻烦，但依旧是可用的）；

– DHC（中）使用小泵轻轻向下挤压即可，操作成本更低更方便（暂不考虑对挤出量的要求，相对而言更易用）；

– Fancl（右）除了按压式的抽取装置外，还附带一个卡住顶部的小部件——它考虑到女士携带卸妆油外出的场景，优雅地解决了意外溢出的问题，小小的部件让人感到安全又贴心。

注：以上全为日本国际品牌，绝非广告。

我们身边还有非常多优秀的控件，比如随处可见的汽水瓶瓶盖：

1. 当拿到一瓶汽水时，我们会很自然地拧动圆形的塑料瓶盖（可接触的+无害的）；
2. 根据过往的经验，首次开启需要花费更大的力气。这种相对困难就暗示着：“这是一瓶全新的汽水，没人喝过，可以放心饮用”（有反馈的）；
3. 为了增大摩擦力，瓶盖外侧往往印有规则的凹凸纹路（不费劲的）；
4. 顺利扭开瓶盖时，泡沫迅速上升并发出“ci——”的声响（有反馈的+愉悦的）；
5. 最后汽水可以从瓶中倒出（可改变状态的）。

整个开启过程非常简短，前后只是2-3秒的时间，却能给饮用者带来非常愉悦的体验。可乐、雪碧等饮料广告最大的共同点就是：无论剧情如何变化，“开启瓶盖”的镜头一定会有！

如果你有兴趣发掘更多物理控件，但一时间又无从下手，我强烈建议你去一趟IKEA：各式各样的控件让人看着好兴奋！

二、软件世界的控件

人是非常聪明的动物，总能通过举一反三的方法来降低工作成本。从输入命令行的DOS到使用图形界面的Windows，现实世界的控件被巧妙地运用到软件界面中。

一开始，UI设计师借助隐喻的方法，以现实的对象和操作为蓝本仿造出各种图标和控件；慢慢地，又利用软件独有的特性，归纳和抽象出更为直观和高效的 控件。日常生活中的『tab标签』用于分门别类，而软件中的『tab标签』除了组织内容和快速索引外，还能对界面空间进行有效的扩展。

如果按功能划分，控件可归为以下5类：

– 触发操作：按钮、滚动条、手柄…

– 数据录入：文本框、复选框、滑块…

– 信息展示：气球提醒、加载器、进度条、启动页、工具提示…

– 容器：窗口、tab标签页…

– 导航：面包屑、导航条、分页器…

其中，操作类和数据录入类有着更丰富的交互，选取几个比较有代表性的：

1. 中规中矩输入框

我们能轻易地联想到输入框的原型，因为它无论外形上还是操作上都保留着现实世界的影子：

– 填补空缺信息 vs 表单中「标签+输入框」的组合

– 空白处可填写，留白空间的大小视情况而定 vs 文本框可输入信息，根据信息的类型选用不同的宽度（比如输入年龄、网址、代码等）

– 下笔前将笔尖挪到空位处 vs 点击文本框，光标在起始位置闪烁

– 内容过多时溢出 vs 输入信息超出宽度时自动缩进

软件界面设计很奇妙的一点是工作模型不必受物理上的限制，然后输入框还能这样玩：

– 未填写时：框内用颜色饱和度较低的文字/图标提示程序期待的内容；

– 鼠标滑过时：指针变成光标，暗示可进行输入操作；

– 鼠标聚焦时：边框高亮；提示信息被清除；光标闪烁；

– 输入内容：边框持续高亮；密码非明文显示；实时反馈密码安全等级、有效性；

– 输入完成：高亮消失；输入内容的颜色饱和度高，可快速区分未填和已填。

另外输入框内的信息还可按需选择不同的对齐方式；在右侧安排「×」图标用于内容的快速清除；还能根据用户输入的关键词实时联想……

2. 抽象好用复选框

单选按钮和复选框都无法在真实生活中找到对应的原型。它们不是一目了然的组件，都必须经过学习；同时又非常容易学习，一旦使用过就不会忘记，是利用“习惯用法”设计的典型例子：

– 5个基本状态：未选（可用）、选中（可用）、未选（禁用）、选中（禁用）、聚焦

– 2个方向：复选框常以多个组合出现，其排布方式有：

纵向：适用于选项内容较多或信息长度差异较大的情况；

优点：严格对齐，布局美观；勾选多个时鼠标移动距离短；

缺点：占用较多空间，把表单拉长。

横向：适用于选项数量多且内容简短的情况；

优点是占位少，缺点是选项间距离较远，同时需要考虑一些细节问题：

a. 如果单个选项的宽度固定，超出的信息如何展示？

b. 如果不固定，如何避免布局混乱？

– 交互：

小小的方形对指针瞄准的精确度要求较高。为了方便操作，将选框和文字绑定以扩大点击区域，同时从视觉上给用户提供预期：例如当鼠标滑过时，将两者作为整体进行反馈。

另外，当用户选择多个时，有什么办法能减少点击、快速选中多个呢？在windows中「框选」可一次性选中多个文件；在photoshop中按住鼠标左键不放并滑动可快速隐藏多个图层。

3. 褒贬不一开关键

前面两个控件在ui界的重要地位毋庸置疑，与它们相比，开关键争议不少。

Apple Watch 交互指南中对开关的描述是：

定义：代表两种互斥的选择或状态

特征：

1. 指示二元状态

2. 通常包含标签

适用于：让用户在两个选项中选择的其中一项，比如on/off，yes/no

我第一次接触开关是在移动应用的界面上，有非常长的一段时间都很困惑：这究竟是状态还是操作？

这个困惑跟手机输入法早期的「中英文切换」有点类似：当使用全键盘时，我一直无法判断将要输入的语言。切换按钮上“英文”的意思是：

a. “好啦，现在开始输入英文。” 抑或 b. “想换成英文输入法请点我！”

很多次发送信息时，快速按下多个字母后才反应过来当前是英文状态。然后不得不逐个地删除键入的内容，切换为中文再很沮丧地重新输入一遍。后来很多厂商都对此进行了优化：

– 搜狗：切换语言时有toast提示状态，切换按钮改成【英/中】的样式，突出当前语言，弱化点击操作后的语言；

-百度：在空格键处显示当前输入方式「百度拼音」，点击左侧的【ABC】可切换成英文，切换后按钮文案变成【返回】；

-谷歌：旧版使用标签页切换中英文，新版点击「地球」图标可以直接切换到原生英文输入法，取消了中英文切换按钮。

总的来说，要指示二元状态开关键是个不错的选择（优于单个checkbox），但使用时必须明确地区分“状态”与“操作”，我总结了比较关键的两点：

1. 规范标签文案。动词、形容词的属性应做到一目了然，比如使用「打开」和「已开启」，而不是既用「开启」表动作，又用「开启」表状态；

2. 使用合适的心理模型。说到这里不得不提粤语中某些字词的妙用：需要消耗能源的对象的停止运作广府人通常称为「熄」， 比如「熄电话」、「熄电脑」、「停车熄匙」……「熄」是一个可视化的文字，使听者仿佛看到了这样的画面——摁下按钮后电脑开始退出进程，直至最后屏幕变黑 了、指示灯也灭了。Macbook键盘上CapsLock键的设计也跟「熄」的心理模型不谋而合，目前很多开关键的视觉设计都使用了类似的隐喻。

虽然开关键已被广泛地运用到了软件界面中，但据我了解还是有相当一部分人有使用障碍，你是怎么看的呢？

三、继续深入控件

界面设计从业者都有必要花时间了解图形界面诞生的历史，以及被用户熟练使用的控件在不同版本的变化。在我们公司，每位新来的设计师都需要完成一个任务：临摹不同平台的核心控件。

或许你会说：Axure、Sketch 自带的控件已经非常丰富了为什么还要重复做？这不是自讨苦吃吗？

确实，主流的原型制作软件已覆盖到大部分常用的控件，一拖一放即可，轻松简便。但也正是太轻松，太信手拈来，以致在很多设计师眼里控件就是这么理所当然。常说交互设计师应认真阅读不同平台的交互指南，但又有多少人读过译文或“精华版”就上阵设计了？

有没有想过Android的Navigation Bar菜单为什么要放在边界处？是费茨定理的应用吗？为什么是左侧而不是右侧？唤出菜单的操作方式、过渡的颜色变化、跳转的动画细节又是基于什么考虑？在 临摹的过程中仔细推敲，品味控件的视觉层次结构和隐含的认知心理学，思考为何它能被广泛应用？为何能得到用户认可？是否还有不尽人意的地方？（从4.x 到Material Design设计规范都在不断地调整）

我司开发的是面向企业客户的互联网营销工具，需要实时监测和量化全流程营销中每个节点的效果。在数据报表占据屏幕大部分空间的情况下，还要保证运营 人员/优化师能便捷且快速地使用丰富的功能来进行数据分析。这就要求设计师对海量功能进行合理整合，并在非常有限的空间内组织布局。产品中再细小的元素都 经过深思熟虑，每个模块都经过谨慎安排，真正做到聚焦最核心的用户场景。

在系统中新建RTB广告活动可以从多个维度精准定向人群，下面是地域定向投放的原型方案之一，其中混合了7种基础控件：

1，列表

– 利用斑马行分组，使用户不会混淆行与行之间的数据（格式塔的相似性与封闭性原理）；

– 点击首列被加粗的选项，可快速选中组内的多个省市；

– 右侧的省份利用对齐和留白代替竖线进行分隔。

2，下拉菜单：曾想过使用开关键来表示包含/排除，但最终决定选择下拉菜单。除了因为开关操作模棱两可，还考虑到以后会增加更多规则，下拉菜单更利于扩展。

3，搜索：输入关键词、按下Enter键后进入搜索状态（图略）

4，标签栏

– 标签间增加“或”的文案，消除“多选一”的歧义； – 旗下选项有被勾选时，在标签右上方标明选中的个数。

5，文字按钮：提供城市等级、反选、清空的快捷选项

6，复选框

– 区分三种状态：未选、部分选中、全选，部分选中在右侧说明占比； – 有细分城市和地区的省份使用不同的颜色区分，暗示用户有二级菜单。

7，嵌入弹层：鼠标滑过选项时显示

其他方案还包括：树表+字母索引、双面板选择视图……这类 to b 的产品有着既定的业务逻辑和相对复杂的信息架构，设计过程中不能随意地做减法。枯燥的临摹训练是一个磨刀的过程，但磨刀不误砍柴工，设计师只有对控件有了 深刻理解才能对其进行不断的加工和优化，进而设计出能满足业务需求的复杂控件。

四、写到最后

『 Designing Interface 』一书收录了大量的界面设计模式，交互设计圈估计是人手一本了，作者 Jenifer Tidwell在书中把「控件」比喻成「设计词汇量」，他说道：

扩大词汇量有助于提高你在某种语言上的表达能力，扩大「设计词汇量」可以帮助你更好地进行设计。但要记住，界面设计真正的艺术在于：解决正确的问题。

我们在学生时代都背过不少成语和诗句，期待着能运用到写作中增加「闪光点」；但我们也知道有一类低分作文叫「堆砌辞藻、言而无物」。界面设计也如此，熟读「控件字典」只意味着可以灵活调用合适的控件拼凑表单，终究不能做出深入人心的设计。

试想一下，当用户与机器交互的媒介不再是键盘和鼠标；当用户只能通过编码来进行数据交换；甚至连屏幕都没有（比如10086的语音菜单）……那设计师该怎么做？

让我们都回归到设计的本质吧。

（如果你也热衷于为复杂的问题寻找简单优雅的解决方案，BiddingX设计团队需要你：kityee@sunteng.com）

原文来自：优设

作者：yee

关于弹窗四大控件的3个问题

本文作者对弹窗4大控件进行了对比分析，非常好地阐释了不同控件的应用场景，并通过案例进一步加深了对控件应用的理解。

大家平时做完一个项目有没有总结的习惯呢？最近我一直在分析弹窗相关的知识点，原本觉得弹窗很简单没啥可分析的，大家基本也清楚什么情况下该用什么弹窗，但是发现一些同学在设计时仍然会出现滥用的情况，主要原因还是知识没有内化。

如何才能把看过的文章内化成自己的知识呢，那就是多发现问题，比如之前我在写弹窗的总结文章时就发现了3个问题：

问题一：警示类弹窗用 Alert 好还是 Action Sheets 好？

问题二：Toast的位置在界面顶部、居中、底部都有，三者哪个好？

问题三：Snackbar和Toast有啥区别？

当然发现问题并不能达到知识的内化，重要的是去分析并解决这些问题，这样以后在设计时就能做到有理有据，不会滥用了。

谈问题之前我们先了解写这些英文控件分别代表什么：Alert（对话框）、Action Sheets（控制面板）、Toast（小提示）、Snackbar（快捷提示）。

1. Alert：对话框是一种模态弹窗，当用户将进行一些危险或者不可逆操作时，系统将会以Alert对话框的形式提醒用户是否还继续操作，起到警示的作用，其阻断感强，操作不可忽略。
2. Action Sheets：控制面板是Alert的一种延伸，也是模态弹窗，用户必须进行操作，弹窗才会消失，和Alert的区别是Action Sheets拥有更多的功能按钮，其重点在操作。
3. Toast：是一种非模态弹窗，他一般出现在页面的任何位置，显示几秒然后自动消失，其阻断感弱，一般用来显示操作结果，或者表单未填写提示。
4. Snackbar：是 Google Material Design 中提供的一种兼容提示与操作的消息控件。其和Toast类似，在不操作的情况下几秒后自动消失，同时向下滑动也可忽略消息。

通过分析上面提出的三个问题，不难看出其实就是位置强弱的选择，因此在解决问题之前，我们先来了解下APP界面中位置的强弱对比。

一个界面我们可以将其分为上中下三个部分，如下图：

其中中间部分为用户的视觉焦点，最吸引用户的注意，当然对用户的干扰也比较大，因此在使用时往往将重要的弹窗信息放在此处，比如对话框、二次确认等。

上下两个部分的权重相当（上部略大于下部），对用户的吸引和干扰都小于中间，因此我们可以把通知、不太重要的操作放在这两个位置。

了解了界面中位置的强弱，我们在回到最初的问题，就能更好的判断了。

1. 警示类弹窗用 Alert 好还是 Action Sheets 好？

在一般的Alert和Action Sheets的对比文章中，大多区别是Action Sheets可以包含更多的按钮，同时暂用空间小，而Alert一般只支持2个按钮。

但是当都是警示类弹窗、都只有2个按钮又该如何判断呢？这时候就可以通过弹窗的强弱来判断。

• 微信提倡用完即走，因此当用户退出时并没有做过多的挽留，这时候我们可以使用Action Sheets控件，其阻断感小，用户能很快的完成退出操作。
• QQ从弹窗的文案上我们就能看出，当用户退出时连续登陆的记录将被清零，QQ达人图标变灰，通过这样的方式尽力挽回用户。因此采用Alert对话框阻断感更强，更合适。

Toast的位置从常规来看，安卓端一般在界面底部；iOS端在界面的中部，但并不是所有产品都遵循这一原则。

有的产品也将Toast放在顶部，同时iOS中也有部分APP放在底部。那么具体什么位置好一点呢？同样我们可以根据位置的强弱进行分析。

• 淘票票选择电影最佳观影区提示，这些提示信息对用户操作并没有影响，因此放到中部可以减少对用户的阻断感，同时相对底部来说又更容易被注意到。
• 菜鸟裹裹当为选择收件人地址时，点击立即下单系统会采用Toast提示你，这时候放到界面中间能够很好的引起用户注意。
• 猫眼的选座提示，其实和淘票票一样的功能，但是其放在界面底部，对用户的干扰最小。

在应用时Snackbar和Toast有点类似，现在也可以看到一些APP已经将Toast换成了Snackbar，那他们有什么区别呢？

Snackbar和Toast的一样有时间限制，若用户不回应，他将在几秒后自动消失，其区别是Snackbar提供一个或者2个功能按钮。

AudioClip当我选择标记音乐时，他直接用Snackbar提示需要登录，这样并不会打扰用户当然的操作，如果用户不想登录，直接忽略即可。

1. 当你不知道用Alert还是Action Sheets时可根据弹窗的强度来选择，如果强度大就选择Alert，强度小九选择Action Sheets；
2. Toast在使用时首先可根据平台规范来选择，其次在部分位置可根据具体场景来放置；
3. 当反馈信息不需要太强的阻断感时，采用Snackbar代替Toast也是一个不错的选择。从用户体验上来说，用户操作起来会更顺畅。

作者：风筝KK，公众号：海盐社

本文由 @风筝KK 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com