• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 实用干货!UI设计师需要了解的 APP弹窗体系

实用干货!UI设计师需要了解的 APP弹窗体系

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含App设计,ui设计,弹窗设计等相关知识,希望在学习及工作中可以帮助到您

编者按:本文是作者从iOS 和 Material Design 设计规范中总结的App 弹窗体系,全面深入,非常适合初级UI 设计师进阶学习。

1. 弹窗的定义

弹窗分为模态弹窗和非模态弹窗两种。

△ ?弹窗分类

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

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

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

2. 弹窗的介绍

2.1 Dialog(Alerts)

△ ?得到、日历

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

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

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

2.2 Popover

△ ?朝夕日历、微信、微博

浮出层(Popover):是当用户轻点某个控件或页面中的某一区域时浮出的,半透明的临时视图。

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

2.3 Actionbar(Action Sheets、Acitivity Views)

△ ?相册、陌陌、知乎、微信

如果选择按钮太多,可以参考微信弹窗的形式组织按钮和滚动显示,但要留有足够的视觉线索。

△ ?饿了么、知乎、iOS

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

2.4 Toast/HUD

△ ?字里行间、Enjoy、即刻、微博

△ ?Pocket、Walkup、iOS

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

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

关于Toast ,这儿有一篇更详细的文章:《「这个控件叫什么」系列之TOAST(吐司提示)的曾经、现在与未来》

透明指示层(HUD):iOS平台没有Toasts这种说法,只有HUD。(iOS音量截图)

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

Toasts和HUD不同之处:

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

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

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

2.5 Snackbar

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

Snackbar使用场景:当你删除收集箱某件任务时,可以在屏幕底部出现Snackbar,提示“任务成功删除”,并附带撤销操作,当用户点击撤销时,任务可恢复。用户不进行操作Snackbar则消失,任务删除成功。

△ ?滴答清单、Spark

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可能会是你最好的选择。

官方参考

Material Design规范:Material

「在这儿读懂Material Design 」

官方译文:

  1. 《中文版来了!新版Material Design 官方动效指南》
  2. 《中文版来了!新版MATERIAL DESIGN 官方动效指南(二)》
  3. 《中文版来了!新版MATERIAL DESIGN 官方动效指南(三)》

学习笔记:

  1. 《学霸的自学笔记!Material Design设计规范学习心得》
  2. 《重磅教程!帮你全面彻底搞定MATERIAL DESIGN的学习笔记》

iOS规范:Developer

中文版:

  1. 《中文版来了!UI设计师必读的IOS 10人机界面设计指南 (一)》
  2. 《中文版来了!UI设计师必读的IOS 10人机界面设计指南 (二)》
  3. 《中文版来了!UI设计师必读的IOS 10人机界面设计指南 (三)》
  4. 《中文版来了!UI设计师必读的IOS 10人机界面设计指南 (四)》
设计微博:拥有粉丝量200万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。

优设大课堂

您可能想查找下面的文章:

  • 手机APP用户界面设计的10点建议
  • 关于音乐播放App(应用软件)的分析与重设计 如何设计出漂亮的音乐播放界面
  • 写给新手的APP结构指南:首页相关(上)
  • 基础科普!重复与突变在产品设计中的应用
  • 超全面的导航设计基础知识总结(一)
  • 写给UI新手的APP结构指南:注册和登录
  • 用户体验是一种过程,而不是结果
  • 超全面的移动端UI 设计规范整理汇总
  • 感觉设计不舒服但又不知道原因?可能是这8个常见的交互细节问题
  • 这个帮你改善睡眠的APP,是这样设计出来的

相关文章

  • 2018-08-23设计师装备指南之如何选出最适合自己的 MacBook?
  • 2018-08-23回过头看,我很感恩自己做出了这样的选择:石墨文档产品总监罗颖
  • 2018-08-23趁着节假日,不如看这6部电影学学艺术史
  • 2017-08-06网页里的两种盒子模型(W3C盒子模型、IE盒子模型)
  • 2018-08-23用QQ阅读的实战案例,帮你学会做理性的设计
  • 2018-08-23UCAN 2017回顾!中国交互设计带头人辛向阳的体验设计思考
  • 2018-08-23春节专题!App 设计系列之提示的概念和设计要点
  • 2018-08-23充电时间!体验设计师成长之路上的养成书籍
  • 2018-08-23上亿人使用的京东“猜你喜欢”功能是如何设计出来的?
  • 2018-08-23讲好一个故事,优秀的用户体验设计由此开始

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 网页设计的专业与非专业
    • 16个优点告诉你,为什么表单设计应该用这个方法?
    • 天猫设计师:为什么说不真实的产品测试是无效的?
    • AI教程!教你绘制深夜加班的场景插画
    • 基础小课堂!从零开始教你做高保真原型图+UI 设计规范
    • IE下utf8编码页面无端端空出一行及utf8页面无法显示的解决方法
    • 网易设计师:图表设计,远不止“好看”这么简单
    • 这四个设计师最容易犯的错,赶紧注意一下!
    • 腾讯高级交互设计师:什么是优秀的设计思维与方法?
    • 5分钟交互设计指南系列:对话框

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有