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

超实用!如何正确使用控件系列之提示框(Toast)

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

本文主要包含Toast,交互控件,基本控件等相关知识,希望在学习及工作中可以帮助到您

从今天 起,我们开始介绍iOS和Android设计规范中的各种控件。掌握它们,能有效地帮你设计出一个高质量的交互稿。今天我们要介绍的是提示框,英文是toast。

交互设计师在设计交互稿的时候,时常需要一些反馈手段,以提示用户操作的结果。Toast是其中很常用的一种:它简单、小巧、对用户的打扰小。然而现在很多应用中,存在对于toast过度使用的情况,并且常常出现Android样式的toast出现在iOS应用中(反之亦然)的情形。在研究了iOS和Android的规范之后,笔者惊人地发现iOS中其实是没有toast这种部件的。到底我们在设计的时候应该处理这种部件呢?且看下面的分解。

Material Design Guidelines

Google的Material Design规范中,是把toast和snackbars归为一类的。下面是规范中对snackbars的定义:

Snackbars包含一行与进行的操作直接相关的文案(文案前不可有icon)。它可以包含一个操作。

△ ?Snackbar示例

规范中对toast的定义:

Toast优先适用于系统提示。它也在屏幕下方出现,但是不能被划出屏幕外(而被清除)。

△ ?Toast示例

行为:Snackbars/toast从屏幕底部向上出现,经过设定的秒数后消失,或者用户进行了别的操作它们也会消失。

△ ?Snackbar的出现和消失

简洁:提示的文案要简短,包含的操作按钮最多只有一个,或者没有。(注意,snackbar不能包含使其消失的“取消”按钮!)

左边是正确的,右边是错误的(因为多了“取消”按钮)

不可重叠:snackbar与floating action button不能重叠。

一次只出现一个:如果出现了一个snackbar,这时候用户进行了操作,需要出现另一个,则第一个snackbar从上向下退出,之后第二个snackbar从下向上出现。

反例:不能同时出现两个snackbars

以上是Google Material Design中对于snackbars和toast的定义。

iOS Human Interface Guidelines

对于iOS系统,在研究了iOS的规范之后,笔者有个惊人的发现:严格地说,iOS规范中没有Toast这个部件。笔者找遍了iOS的人机交互设计规范,都没有找到对于Toast这种部件的介绍,与之最为接近的,是Alert(警告框)。但警告框的使用场景与Toast不同,之后将另开一篇文章介绍。在iOS系统中,与toast对应的是“HUD”(透明指示层)。

△ ?iOS系统中的HUD弹窗

知识运用

请回答一下两个问题,这将帮你更好理解这周的主题。

1. 既然iOS的设计规范不鼓励使用toast,那么在日常的设计中,toast应该在什么情况下使用?

2. 请查看你手机里的APP,尝试找到一个toast使用错误的地方,和使用正确的地方。这将帮你理解如何正确地使用toast。

作者系列文章:

  1. 高手帮你学规范!iOS和Android规范解析之提示框+警告框
  2. 高手帮你学规范!iOS和Android规范解析之简易菜单+弹框
  3. 高手帮你学规范!iOS和Android规范解析之底部浮层
  4. 高手帮你学规范!iOS和Android规范解析之按钮

欢迎关注作者微信公众号:新设计青年

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao..com

优设大课堂

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

  • 案例超多!3大类APP弹窗提醒方式总结
  • 写给UI新手的APP结构指南:用户引导和提示
  • 如何做好提示设计?我从3个角度完成了这篇超全面的总结!
  • 超实用!如何正确使用控件系列之提示框(Toast)
  • 这两个最常见的交互控件,你知道该怎么用吗?

相关文章

  • 2018-08-23新手进阶手册!成为交互设计师两年后的经验总结
  • 2017-08-30Ext.windows.Windows中autoScroll:true 配置无效,不出现滚动条
  • 2018-08-23实战五步走!UI设计师如何让设计稿100%还原(上)?
  • 2017-08-06一枚设计师再吐槽锤子官网
  • 2018-08-23超全面!从零开始帮你掌握2017年最热门的孟菲斯风格
  • 2018-08-23小米新品的海报背景,用这个神器可以一键生成!
  • 2017-08-0610件优秀Web开发者提升开发能力必知的事
  • 2018-08-23春节专题!App 设计系列之提示的概念和设计要点
  • 2018-08-23如何规避 Design System 架构设计中的逻辑陷阱?
  • 2017-08-06关于a href传参的中文乱码问题

文章分类

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

最近更新的内容

    • 私货分享!设计师如何全面提升自己的工作效率?
    • 学会用这5个正确姿势阐述你的设计作品,轻轻松松一稿过!
    • JPG,GIF及PNG各类型的图片格式详细解说
    • Google对话式交互规范指南(四):对话UI设计流程与步骤
    • 960 Grid System 基本原理及使用方法
    • 进阶必读!可能是最全面的组件化开发与设计指南
    • li行间距大(IE中多了5个像素)的解决方法
    • 用一个实战案例,教你7招做出完整的文件管理体系
    • 网页中这10种字体的运用方式,不会让人觉得Low
    • 为什么39%的设计工作可能被人工智能取代?

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

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