干货素材|UI设计师需要了解的APP弹窗模板

1、弹窗分类

模态弹窗：很容易打断用户的操作行为，用户必须回应，否则不能进行其他操作。

非模态弹窗：不会影响用户的操作，用户可以不对其进行回应，非模态弹窗通常都有时间限制，出现一段时间后就会自动消失。

弹窗作用：非模态弹窗一般被设计成用来告诉用户信息内容，而模态弹窗除了告诉用户信息内容外还需要用户进行功能操作。

2. 弹窗的介绍

Dialog需要用户对此弹框进行操作后才能继续执行其他任务。

弹出书签

弹出华友世纪

弹出成功

警告框在iOS中称之为Alerts。iOS的Alerts（警告框）主要用来传达重要信息，并且常常需要用户来进行操作。

使用Dialog的时候还是谨慎一点比较好，尽量不要给用户带来糟糕的体验感。

更多弹窗实用模板到搜UI (SOOUI) 临摹学习优秀作品的思路、表现手法。

浮出层（Popover）：是当用户轻点某个控件或页面中的某一区域时浮出的，半透明的临时视图。

常用Popover的形式来呈现页面中折叠的一些额外信息，或在首页位置呈现一些常用操作的快速入口。

5创意简讯（弹出窗口）

微互动弹出！

Actoinbar一般都会提供给用户更多的功能选择，一般可以采用官方控件，如果有特殊功能的话可以自己设计；一般都设计有一个默认的“取消”功能按钮，点击该按钮后或者点击弹窗外的界面都可以关闭弹窗。Action Sheets（操作列表）和Acitivity Views（活动视图）是iOS上的特有的交互形式。

弹出食谱 - 简单的动画

弹出/复盖页

Toast是安卓系统的一个控件名词，现在也应用于iOS系统中。Toast属于一种轻量级的反馈，常常以小弹框的形式出现，一般出现1到2秒会自动消失，可以出现在屏幕上中下任意位置，但同个产品会模块尽量使用同一位置，让用户产生统一认知。Toast信息给予用户及时反馈，确保用户知晓自己所处的状态，并做出相应的措施。

弹性

虑到Toast提示框显示的时间较短（几秒种）、占用区域不大，它容易被用户忽略，所以Toast不适合承载过多的文字和重要信息。

透明指示层（HUD）：iOS平台没有Toasts这种说法，只有HUD。（iOS音量截图）

iOS中建议，设计一种引人注目但又和你的 app 的样式相协调的方式去展示信息。（微博的刷新）

Toasts和HUD不同之处：

1.Toasts一般出现在屏幕下方，HUD出现在屏幕中间。

2.Toasts一般是灰黑或黑色半透明，HUD一般是毛玻璃半透明。

3.每次产生的Toasts内容不可改变，HUD内容可以改变（比如调节音量时出现的HUD）

Snackbar是Android平台特有的交互形式，很多时候也会应用在iOS系统中。它也用于向用户反馈信息，但其打扰程度介于对话框和Toast之间；一般出现1到2秒会自动消失，但和toast不同的是它是可交互的，并且一定是在底部出现。

Twitter的用户界面

Snapchat重新设计

Snackbar与toast的对比

1.都为小弹窗的形式，会自动消失；

2.Snackbar一般都会有操作按钮，如撤销。toast则不可交互；

3.Snackbar一般出现在底部；

4.Snackbar带有一定的交互性，用户触摸屏幕其他地方后自动消失，也可以在屏幕上滑动关闭。

5.Toast和Snackbar显示时间都可以修改（建议遵循系统）；

6.Snackbar打扰程度介于对话框和Toast之间；

7.Snackbar仅是安卓规范样式且运用还未普及，可能造成用户理解负担；

总结

Alert：当提示信息是至关重要的，并且必须要由用户做出决定才能继续的时候，请使用Alert。非用户发起的（即系统自动发起）一般都用Alert。

Action Sheet：重要程度弱于Alert时，当需要给用户更多的功能选择时使用Action Sheet。一般用户主动发起任务时用 Action Sheet。

Toast：当提示信息只是告知用户某个事情发生了，用户不需要对这个事情做出响应的时候，使用Toast。

Snackbar：以上两者之外的任何其他场景，Snackbar可能会是你最好的选择。

干货素材|UI设计师需要了解的APP弹窗模板相关推荐

avue 文字点击弹窗_经验 | UI设计师必懂的App弹窗设计方法
本文总结了App弹窗设计体系,以及不同弹窗的使用方法和误区.案例丰富,适合UI设计师进阶学习. 这一篇你将看到: 1.弹窗的定义 2.不同类型弹窗的特点及使用场景 3.常见使用误区一.弹窗的定义: ...
帮助UI设计师缕清思路的GUI模板素材
图形用户界面(Graphical User Interface,缩写为 GUI)又称图形用户接口,是指采用图形方式显示的计算机操作用户界面. UI设计,全称User Interface,作为近年设计行 ...
UI素材干货|听说UI设计师更喜欢Sketch
在Sketch出现之前,很多UI设计师手首选软件肯定是PS,不过大家对于PS的槽点也不少:设计新界面需要拉各种辅助参考线.切图很耗时.设计一个新界面又得重新创建一个文件等等. 然后,Sketch出现了 ...
干货素材|UI设计中的字体样式的应用
无论你是做网页还是App设计,文字内容总是能占到整个版面将近80%的区域.因此理解字体与排版对UI设计师来说非常关键.你需要始终把内容的可读性放在首位去考虑和权衡你对字体与排版的选择. 字体样式字体 ...
设计干货素材|UI设计中的插画模板，便于应用的好素材！
插画开始以一种坚挺的姿势,站在设计趋势的最前列.不止是原本身处各个领域的画手和插画师开始越来越受追捧,而且连网页.UI和动效设计师都纷纷学习插画设计.当然,更显著的变化,是插画在网页和UI中的使用越来 ...
UI设计师必备技能：APP 界面设计原则
APP软件界面设计不纯粹是技术设计,也不再是纯粹的进行视觉图像的艺术组合,它牵涉到用户行为分析.视觉传达设计.人机交互.设计开发.作为UI设计师必备看家技能之一的APP界面设计,具体操作中应该注意如下 ...
长文干货助UI设计师拿高薪
移动端的UI设计有其独有的一套设计规则和约束.新技术的不断加入促进了移动平台的快速增长,而移动端的UI设计也和传统的平面海报/网页设计不太一样.那么,要成为一个合格的移动端UI设计师需要掌握什么样的技 ...
设计干货栅格系统素材 | UI设计师应用好帮手
UI中的栅格我们将网页端的栅格和移动端的栅格都称为UI中的栅格,定义为以规则的网格陈列来指导规范界面中的版面布局以及信息分布,通俗一点讲,就是根据一定逻辑,在界面中绘制出一个一个的小格子,然后将内容 ...
实用素材|UI设计师需要的输入框和表单
表单是 UI 界面中最为常见的元素,它通常是用来搜集和呈现一些数据.信息和特定的字段.在现实世界中,印刷的表格存在的时间更为久远,它们身上有很多设计可以作为重要的参考,帮助我们优化 UI 中的表单元素 ...

干货素材|UI设计师需要了解的APP弹窗模板

干货素材|UI设计师需要了解的APP弹窗模板相关推荐

最新文章

热门文章