提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
本文与大家分享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不会动不动瞎弹。比如:评价产品可以放在用户完成了某一项任务之后,而不要用户任务前或刚下载时弹。
好了,设计重在点滴积累,这次就说到这里。
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册