UI设计师遇到的那些弹～弹～弹～弹～框

如果您想订阅本博客内容，每天自动发到您的邮箱中， [size=font-size:xx-small,xx-small]请点这里    


本文与大家分享App弹框设计的不同场景和样式。


UI设计师工作中，经常面对各类控件的设计，一般系统会给到基础样式，比如iOS中的Alert，Android中的Toast，但基础样式在多样性的业务面前，显得有点力不从心，也越来越难以满足体验上的要求。


基于此，本文总结了平时工作中遇到的控件之一：弹框设计，其中包括相应出现场景和样式，供大家参考。


多数我们看到弹框是这样的：






还会碰到这样的：





这些都是弹框的不同表现形式。整体来说，弹框的主要功能是信息传递与用户反馈。从是否强制用户交互的角度，弹框可分为模态弹框和非模态弹框。


模态弹框模态是强交互形式，通常当用户进行重要、有风险或需要用户确认时使用；非模态弹框是弱交互形式，通常给用户提示信息时使用，不需要用户操作。


下面是一个简单的结构：





弹框体系图


一、模态弹框可分为三类：对话框、动作栏以及浮层。


其中对话框分为系统层和运营层、动作栏分为列表型和网格型、浮层分为操作型和提示型。


1、对话框，系统层面的包括消息提示、消息确认、提交内容3种弹框。


①、看下消息提示弹框：




对话框-系统层-消息提示


把消息提示弹框拆分，可以看到它由以下5部分元件组成。



消息提示弹框结构


其中插图作为辅助手段，能够形成App独有的风格。同时，插图处作为品牌宣传的重要入口，能加强用户的品牌认知。不透明蒙层的不透明度值建议设置高一些（60%-70%），这样能够帮助用户聚焦当前任务。


②、接下来是消息确认弹框，与消息提示弹框唯一的区别是操作部分，消息确认的弹框至少有2项操作。



消息确认弹框结构


在消息确认弹框中，肯定性操作应放置在右侧，否定性操作放置在左侧。这个符合系统规范和用户习惯。同时，肯定性操作文案要尽量用动作本身来代替“确定”。比如上图中，就用“切换”替代“确定”，帮助用户理解将要进行的操作。


还有一种情况，取消操作在别的位置（一般为右上角），这时就不要再放置取消按钮，以免冗余。如下图：





在App中，授予权限（通知、位置、通讯录、相机、相册、麦克风等）、升级确认、评价产品这3类弹框设计好与否对于用户体验有重要的影响。


单拎出来，是因为他们常被遗忘在角落（没有经过设计）：





这是某健身App的引导页界面，给“不允许”高亮是想闹哪样。而定位权限的取得对于健身类App往往是必要的。这…就尴尬了。


我们来看一些正面案例：





通过简短而生动俏皮的文案搭配有趣的插图把用户一下给逗乐了，点击“开”之后，弹出系统默认的获取权限弹框，此时用户就容易接受了。



情感化表达之后再弹出“权限请求”弹框


类似的设计还有这些：





③、第3类是提交内容弹框：提交内容弹框被赋予的功能较多，弹框的形式也就变化多样。但是基础的构成元件是不变的，即标题、内容、肯定性操作与否定性操作。





提交内容弹框由于需要调用键盘，所以在设计的时候要考虑到操作按钮是否被键盘遮挡（尤其是小屏）。所以，在涉及调用键盘的页面我们都需考虑遮挡问题。


④、看完了对话框中的系统层弹框，我们再看下运营层弹框。这一类弹框主要就是用作活动宣传。





这种类型弹框的基础由插图、肯定性操作与否定性操作（常用关闭按钮）3部分组成。顺便提一下，单手操作类App如打车、骑行，要把关闭按钮放在拇指操作区域，这样利于用户操作。运营层弹框还有下面这些表现形式：





OK，对话框部分就汇总完了，简单回顾下。





上面的弹框大都是2项操作，那么有更多操作时怎么办呢？当操作大于3项时，可以考虑用动作栏。


2、动作栏是对话框的一种延伸设计，可提供多个操作：分为列表型和网格型2种。一般情况下，点击空白区域等同于关闭操作。列表型弹框中，日期时间选择器就是其中较常见的一种：





时间日期选择弹框


日期时间弹框应基于业务设计。比如业务上只支持特定时间段，就不用展示过多选项了。





动作栏里另外一类是网格型弹框。





网格型弹框


3、终于说到模态弹框中最后一类：浮层。浮层分为操作型和提示型。



操作型浮层（可进行相应操作）



提示型浮层（仅展示提示性文案）


提示性浮层还常用在app新手引导：





通过吉祥物传递情感要比简单展示功能有趣得多


二、接下来，我们看下非模态弹框。


相较模态弹框，非模态弹框是不需要用户进行操作的。有Hud / Toast / Snackbar三类。它们在出现后几秒会自动消失，所以提示文案要非常精简，不然会让用户造成困惑。


1、Hud（透明指示层）是iOS系统的一种提示（调节音量时出现的那个提示就是Hud）。


2、Toast原本安卓系统中的控件。优先用于系统提示且有很多规范（比如只能出现在底部，不能带图标等）。不过现在iOS系统也在普遍使用了，并且形式多样。


3、Snackbar也是安卓系统的控件。它可以理解为是加强版的Toast。样式和规则与Toast非常相似，不同主要有两点：


①、Snackbar支持主动滑动关闭。


②、Snackbar可以附带一个操作（也可以不带）。这种形式的提示已经很少用了。



各种Toast形式


上方图的Toast起到承接页面跳转、缓解用户等待焦虑的作用。在出效果图时别忘记咯。


三、总结


弹框分为模态弹框和非模态弹框。模态弹框需要用户操作，而非模态不用。当操作少于3项时用对话框，多于3项用动作栏。浮层对于用户的打扰较小；非模态弹框（Toast）在几秒后自动消失。


弹框设计在文案出彩、画面动人的同时，应注意弹框弹出的时间，好的APP不会动不动瞎弹。比如：评价产品可以放在用户完成了某一项任务之后，而不要用户任务前或刚下载时弹。



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