[导读] 今天带给大家的是APP设计教程之弹框设计的技巧。Tips、Toast、弹窗、动作列表等等这几个词,虽然经常挂在嘴边,但是应该如何分类自己并不清楚,查阅大量资料后,我发现原来还有更
今天带给大家的是APP设计教程之弹框设计的技巧。Tips、Toast、弹窗、动作列表等等这几个词,虽然经常挂在嘴边,但是应该如何分类自己并不清楚,查阅大量资料后,我发现原来还有更多我不知道的知识点,每个人分类的维度也各不相同,有些按照模态、非模态弹窗来分类(Toast、Dialog、Actionbar 和 Snackbar);有些按照弹窗、浮层来分等等,我觉得没有绝对的对错,只要能够有自己清晰的思考维度与参考依据,并且能够为实际工作带来指导意义,那就是有价值的,所以自己在经过筛选归类后,决定按照以下维度来定义我自己的弹窗体系,大纲如下(如有不妥之处,还请批评指正):

接下我们来一个一个讲解。
1. 阻断式弹窗
1.1 下拉弹窗(界面顶部,少量出现在界面中间)
如下图,点击某按钮后,从顶部弹出的弹窗叫做下拉弹窗。此时用户必须要操作弹窗上的某个功能或者点击空白处才能消除弹窗,从而进行其它操作。

1.2 对话框(界面中间)
对话框(Dialog)就是我们最常见的从界面中间弹出的提示弹框,需要用户对此弹框进行操作后才能继续执行其他任务。如下图:

而对话框也有很多形式:不同维度会有不同的分类,比如以操作按钮的多少来分类、是否可以输入内容来分类、系统样式还是自定义样式等等,我们可以根据具体项目来制定对话框的样式与规则。
此类弹窗大多数用于信息提示及操作的二次确认,设计师在使用前一定要谨慎选择,综合场景角度、用户价值及平台价值多个维度进行考虑。
1.3 动作列表(界面底部)
动作列表会向用户展示多个功能按钮,形式有纯文字、文字加图标、甚至纯图标。对于警示性选项会标出红色,推荐性选项可标示蓝色,可根据实际情况自行定义。
案例如下图:

2. 非阻断式弹窗
2.1 Toast/HUD(界面顶部或中间)
Toast 提示框是一种非阻断式(非模态)弹窗,它弹出状态信息给予用户及时反馈,确保用户知晓自己所处的状态,并做出相应的措施。
而 Toast 的样式也分顶部和中部,如下图:

这里值得一提的是,Toast 其实是安卓系统的一个控件名词,Ios并没有,Ios有一个类似的控件叫做HUD,但是行业内大部分已经将Toast弹窗通用到两个系统内,所以对于HUD大家了解即可。
2.2 Tips 提示条(界面顶部)
Tips严格来说其实并不算弹窗,因为弹窗是浮在界面上层的单独浮层,而tips是嵌入在页面内的提示条,但由于个人觉得tips提示条也是相当重要的一个控件,而且很少看见有人将其总结到哪个归类当中,所以我决定将其分类到非阻断式弹窗的类别下,与toast弹窗并行。这样在整理控件的时候也很方便。
可能有些同学还不知道Tips提示条是什么样子的,请看下图:

2.3 snackbar(界面底部,可交互)
虽然snackbar弹窗也是出于安卓系统,但是目前也已经通用到Ios系统中,它就是一种底部非阻断式弹窗,也会自行消失,但和toast不同的是它是可交互的,并且一定是在底部出现,如下图邮件归档后的状态:
小结
在拉通所有分类、场景、样式后,再去执行,你会有一种前所未有的成就感,感觉一切都在自己的掌控之中,这也就是总结的魅力所在。
以上就是我个人关于弹窗的一些简单总结,还有很多不全之处,以后会慢慢摸索补充,希望能够对你有所启发。
另外,如果现在你也对自己定位不够清晰,那就请尽快思考一下吧,因为只有方向确定了,你后面的努力才够事半功倍,你才能真正的快速成长起来!那今天的APP设计教程之弹框设计的技巧就结束了,喜欢的多多关注我们吧。
推荐阅读:APP界面常用的五种颜色搭配
- 上一篇:三款APP设计交互当中的小细节
- 下一篇:APP学习干货之爆品金三角法则
免责声明:
丝路教程网的部分文章信息来源于网络以及网友投稿,本网站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,如权利人发现存在误传其作品情形,请及时与本站联系。
APP设计教程之弹框设计的技巧
的相关文章- app icon图标的统一绘制与优化
- PC端到移动端UI设计需要注意的几点设计技巧
- 微信语音骗局,APP使用引发我们的思考
- APP设计中创意十足的Loading动效
- 移动app设计当中常见8种基础布局方案
- 四大维度全方位剖析APP分享功能
- APP设计技巧之减少用户等待感
- UI交互设计案例之动效UI设计
- APP学习干货之爆品金三角法则
- 从零开始学习APP系列的切图标注
- 三款APP设计交互当中的小细节
- 欣赏一些漂亮而生动的APP引导页界面
- 移动端app极简设计原则
- 如何应用黄金分割比例到APP界面设计
- APP细节考量的四个方面
- 如何设计持续时间场景的APP页面
- 国外优秀的app界面设计案例欣赏
- APP设计同质化如何破解
- APP原型设计的三种表现方式
- 直戳人心的APP设计文案
- 一组超可爱的移动APP表情包设计
- 10种最经典的APP UI界面设计模式
- 如何通过颜色搭配来布局移动APP界面和排版设计
- 总结一些打动人心的APP设计点
- 欣赏一组高品质的简洁大气的APP设计
- 如何应用黄金比例工具来设计APP界面
- APP交互设计实用的触屏手势矢量素材
- 欣赏六款手游APP的交互案例和UI设计风格
- 如何设计出简单的APP图标组合
- 了解APP空状态下UI界面设计思路
- 了解移动端APP的设计趋势
- 分享一组美食APP设计素材
- HeyU Mobile App UI界面PSD源文件
- 2017年app创意设计作品
- 聊天APP UI界面设计文件下载
- APP设计模板PSD素材下载