18801051825的个人主页

http://www.qtcn.org/bbs/u/185984  [收藏] [复制]

18801051825

  • 0

    关注

  • 0

    粉丝

  • 7

    访客

  • 等级:新手上路
  • 总积分:0
  • 男,2011-01-01

最后登录:2018-01-02

更多资料

日志

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

2017-12-19 16:01

如果您想订阅本博客内容,每天自动发到您的邮箱中, [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界面设计 包装设计 图标定制 用户体验 、交互设计、 网站建设 平面设计服务


分类:ui界面设计|回复:0|浏览:235|全站可见|转载
 

Powered by phpwind v8.7 Certificate Copyright Time now is:01-23 00:02
©2005-2016 QTCN开发网 版权所有 Gzip disabled