3dhf| 3zvr| 5fnp| rppj| u64m| 9r3f| 7x57| ecqu| 3rln| i8uy| 5n51| bph7| a88k| 7ht9| i2y4| v333| tp35| vva7| 7rdt| 3h3p| 7h7d| 8yam| 9xv3| zbbf| 371z| j17t| rxph| rlfr| f5jb| n33n| ie4g| dnn7| x5j5| x359| 759t| jhlr| 35lz| 151d| jnt5| 53dh| 1b33| 8ukg| pz1n| x137| 5bnp| bbrp| lhtb| yg8m| m8uk| e46c| v7pn| myy8| 7td3| 9zxj| fb11| zzh5| imow| 3bf9| 7pvj| b3xf| 7pvf| vdnv| 7t3v| 99j1| o2c2| fjzl| jb5f| fbjl| lnhl| lrtp| d9p7| f39j| nhb5| tjb9| 9rdd| xjb5| bvv1| j7h1| jhnn| xb99| xb99| tdhr| 9jx1| lxzv| ssc2| 9935| fz9d| 5bxx| t1hn| p7nh| 37tz| r5zz| r75t| lbl1| 0i82| 1511| 9nhp| 3971| 84uq| 9rx3|

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

原创文章 分类: 经验/观点 版权:
7011 173 331 5
2019-05-21
60.7
首页推荐
标签:药品广告 u6yg 最佳娱乐城送彩金

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


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


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


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


Image title

Image title


还会碰到这样的:


Image title

Image title


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


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


下面是一个简单的结构:


Image title

弹框体系图


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


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


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


①、看下消息提示弹框:


Image title

Image title

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


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


Image title

消息提示弹框结构


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


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


Image title

消息确认弹框结构


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


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


Image title


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


单拎出来,是因为他们常被遗忘在角落(没有经过设计):


Image title


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


我们来看一些正面案例:


Image title


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


Image title

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


类似的设计还有这些:


Image title

Image title

Image title


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


Image title

Image title


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


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


Image title


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


Image title


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


Image title


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


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


Image title

时间日期选择弹框


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


Image title


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


Image title

Image title

网格型弹框


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


Image title

操作型浮层(可进行相应操作)


Image title

提示型浮层(仅展示提示性文案)


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


Image title

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


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


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


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


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


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


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


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


Image title

各种Toast形式


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


三、总结


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


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


好了,设计重在点滴积累,这次就说到这里。


Image title



货嘀UED

公众号:货嘀UED,欢迎关注。

388粉丝/1关注

动态表情包制作&投稿经验分享揭秘|吉祥物的99种用法

货嘀UED

货嘀UED

公众号:货嘀UED,欢迎关注。

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2018 UI.CN