码迷,mamicode.com
首页 > 编程语言 > 详细

【Material Design视觉设计语言】UI组件设计(五):提示框

时间:2015-08-28 13:20:44      阅读:266      评论:0      收藏:0      [点我收藏+]

标签:

作者:郭孝星
微博:郭孝星的新浪微博
邮箱:allenwells@163.com
博客:http://blog.csdn.net/allenwells
Github:https://github.com/AllenWells

提示框(Dialog)用于提示用户作一些决定,或者是完成某个任务时需要的一些其它额外的信息。

一 提示框的功能

Dialog可以是用一种取消/确定的简单应答模式,它常见的应用场景如下所示:

  • 提示框最典型的应用场景是提示用户去做一个些被安排好的决定 ,而这些决定可能是当前任务的一部分或者是前至条件。
  • 提示框可以用于告知用户具体的问题以便他们作用重要的决定,或者是用于解释 接下来的动作的重要性及后果(起到一个警示作用) 。

二 提示框的结构

  • 标题:提示框的标题是可选的,用于说明提示的类型。可以是与之相关的程序名,或者是选择后会影响到的内容 。例如:设置提示框标题应该作为提示框的一部分被整体地显示出来。
  • 内容:提示框的内容是变化多样的。但是通常情况下由文本 和其它 UI 元素组成的,并且主要是用于聚焦于某个任务或者是某个步骤。比如说”确认”、”删除”或选择某个选项。
  • 事件:主要是允许用户通过确认一个具体操作来继续下一步活动。

技术分享

关于提示框按钮的尺寸

常规按钮

技术分享

加宽型竖排按钮

技术分享

并排按钮

技术分享

三 提示框的交互

提示框的交互体现在提示框的事件上。

提示框事件的是一组聚焦和有限的事件,通常是一个肯定的事件和否定(与肯定的事件对立)的事件组成。

肯定的事件是放于提示框的右边并且可以继续接下来的步骤。肯定的事件可以是据有破坏性的,比如:”删除”,”移除”。

否定的事件是放于提示框的左边。用于返回用户原始的屏幕或者是步骤。

技术分享

提示框是与父视图是分隔开的。不会随着父视图滚动。但是如果提示框内容偏多,也可以对提示框本身使用视图滚动。

技术分享

版权声明:当我们认真的去做一件事的时候,就能发现其中的无穷乐趣,丰富多彩的技术宛如路上的风景,边走边欣赏。

【Material Design视觉设计语言】UI组件设计(五):提示框

标签:

原文地址:http://blog.csdn.net/allenwells/article/details/48049589

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!