亿元级IT行业生态链
一站式解决方案提供商

24小时免费咨询电话
010-52725243

新闻资讯

AJIA NEWS

UI中的弹框体系要怎样设计

来源:阿甲视点 发布日期:2018-01-16

在UI设计中交互设计是最为重要的一种手段。而在交互设计中UI设计师们常常会引入弹框,因此弹框也成为了UI设计中不可或缺的结构设置环节。


弹框的作用,主要分为两点:1.完成信息传递,2.用户反馈。


弹框的设计对于一般的UI来说并不算难,但是能否真正理解弹框这个概念,估计不是100%的UI设计师都能理解的。下面就弹框体系做一个简单的归纳,希望能够为大家解惑。


通常来说弹框分为:模态弹框和非模态弹框。但是我们大多数是把他们混为一谈。我们常常遇到的就是:对话框,浮层,提示条这几种。


UI中的弹框体系要怎样设计


模态弹框:


相对于非模态弹框,模态弹框更强制用户交互。模态弹框是让用户按照当前弹框的要求进行会话沟通,否则,将限制用户接下来的操作。当然这样做的效果是很好地吸引了浏览者的视觉焦点拿到了一些重要的用户信息,但是也同样让用户的体验效果变得很差。因此在一些非必要对话的情况下不建议采用这种形式。


模态弹框主要分为:对话框、动作框、浮层这三大类。


对话框:

通常来讲对话框的设计,是为了方便用户在进行一些重要的操作或者有风险的操作时来提示用户的。让用户进一步确认判断,以免造成用户的损失。如:QQ的对话框设置就是为了将重要信息呈递在用户眼前。


UI中的弹框体系要怎样设计

对于对话框的设计,每个软件上的设计都是五花八门,但最重要的一点还是起到提醒和留下用户信息的作用


动作框:

动作框看上去像是一个加强版的对话框。动作框在原有的对话框的把基础上设置了更多的操作设计,让用户可以根据自己的情况来选择符合自己要求的会话设计。如下图:微信当中的下方对话框中的:图片、小视频等等就是动作框的具体应用。


UI中的弹框体系要怎样设计


但是也有例外:比如我们所知的网易云音乐它的动作框设计和对话框设计类似。可能是考虑到遮盖内容的因素,所以才会将动作框设计的和对话框类似。


浮层:

浮层的设计类似于将动作框半透明化,并可以在界面当中的不同位置出现,极大的方便了用户操作性,给用户更明确的指向性。


UI中的弹框体系要怎样设计


非模态弹框


非模态弹框更倾向于用户的角度。不像模态弹框的强制性,非模态弹框更多的是让用户了解操作信息,但不强制用户操作。常见的有:toast和snack bar。


Toast

Toast更多的是在用户完成操作后,对变更的结果向用户作出说明,因此在没有强制性的信息传递时,通常情况下用到toast。


UI中的弹框体系要怎样设计


正是因为Toast的这种非强制性操作,往往会被用户所忽视,因此在一些重要内容的设置上面,一般不会采用Toast。


Snackbar

Snackbar:是目前比较受欢迎的弹窗设计,为什么会说是比较受欢迎呢,主要是因为Snackbar在非模态弹框的基础上,适当的添加了一些模态弹框的设计,一般是由文字和功能按钮组成的,用户可以点击按钮交互,即使用户不点击snackbar也会自动消失。因此,能够在不影响用户操作的前提下,保证信息能够引起用户的注意。


UI中的弹框体系要怎要设计


总之,UI设计中建立弹框体系的原则是在保证重要信息引起用户注意的前提下,尽量不去影响用户的浏览。


目前相比较于传统的弹框设计理念,石家庄阿甲科技UI的设计师们,在保证大体的UI设计风格和功能不变的情况下,不断改进UI内部的设计优化,并且将弹框的优化问题作为以下一项研究重点。用以更好的完成用户的要求。


免责声明:本文由小编转载自网络,旨在分享提供阅读,版权归原作者所有,如有侵权请联系我们进行删除

欢迎访问阿甲科技集团官方网站!