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

作者:郭孝星

微博:郭孝星的新浪微博

邮箱:[email protected]

博客:http://blog.csdn.net/allenwells

Github:https://github.com/AllenWells

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

一 提示框的功能

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

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

二 提示框的结构

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

关于提示框按钮的尺寸

常规按钮

加宽型竖排按钮

并排按钮

三 提示框的交互

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

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

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

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

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

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

时间: 2024-11-06 03:28:18

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

【Material Design视觉设计语言】应用样式设计

作者:郭孝星 微博:郭孝星的新浪微博 邮箱:[email protected] 博客:http://blog.csdn.net/allenwells Github:https://github.com/AllenWells [Material Design视觉设计语言]章节列表 [Material Design视觉设计语言]开篇 [Material Design视觉设计语言]Material Design设计概述 [Material Design视觉设计语言]应用布局设计 [Material D

【Material Design视觉设计语言】开篇

作者:郭孝星 微博:郭孝星的新浪微博 邮箱:[email protected] 博客:http://blog.csdn.net/allenwells Github:https://github.com/AllenWells Material Design,即原质化设计,是Google官方退出的视觉设计语言,目的在于统一Android应用界面设计,提升用户体验.事实上不仅仅在Android上,在HTML等其他领域,Material Design也表现出了旺盛的生命力. 一 设计目标 Materia

【Material Design视觉设计语言】UI组件设计(四):表格

作者:郭孝星 微博:郭孝星的新浪微博 邮箱:[email protected] 博客:http://blog.csdn.net/allenwells Github:https://github.com/AllenWells 表格是一个用来展示原始数据集,用户可操作的可视化的网格结构,并且通常出现于桌面企业产品中. 一 表格的布局 1.1 表格类型 1.1.1 基本表格 基本的表格布局如下所示: 列表头部:12 sp Roboto Medium,54% 黑色 表格内容:13sp Roboto Re

【Material Design视觉设计语言】UI组件设计(二):卡片

作者:郭孝星 微博:郭孝星的新浪微博 邮箱:[email protected] 博客:http://blog.csdn.net/allenwells Github:https://github.com/AllenWells 卡片是包含一组特定数据集的纸片,数据集含有各种相关信息,它通常用来显示由不同种类对象组成的内容的便捷途径.它们也适用于展示尺寸或操作相当不同的相似对象,像带有不同长度标题的照片. 一 卡片的特点 卡片有以下特点: 卡片通常是通往更详细复杂信息的入口. 卡片有固定的宽度和可变的

【Material Design视觉设计语言】UI组件设计(六):分隔线

作者:郭孝星 微博:郭孝星的新浪微博 邮箱:[email protected] 博客:http://blog.csdn.net/allenwells Github:https://github.com/AllenWells 分隔线 (Dividers) 主要用于管理和分隔列表和页面布局内的内容,以便让内容生成更好的视觉效果及空间感. 一 分隔线的功能 分隔线主要用来分隔没有锚点的项. 当在列表中没有像头像或者是图标之类的锚点元素时,单靠空格并不足以用于区分每个数据项.这种情况下使用一个等屏宽的分

【Material Design视觉设计语言】UI组件设计(三):纸片

作者:郭孝星 微博:郭孝星的新浪微博 邮箱:[email protected] 博客:http://blog.csdn.net/allenwells Github:https://github.com/AllenWells 纸片(Chips)是一种小块的用来呈现复杂实体的块状视图(例如:日历的事件或联系人),它可以包含一张图片,一个短字符串或者被截取的字符串,或者是其它的一些与实体对象有关的简洁的信息. Chips 可以非常方便的通过托拽来操作.通过按压动作可以触发悬浮卡片(或者是全屏视图)中的

【Material Design视觉设计语言】应用组件设计(一):按钮

作者:郭孝星 微博:郭孝星的新浪微博 邮箱:[email protected] 博客:http://blog.csdn.net/allenwells Github:https://github.com/AllenWells 按钮由文字和/或图标组成,文字及图标必须能让人轻易地和点击后展示的内容联系起来. 一 按钮的分类 1.1 悬浮响应按钮 悬浮响应按钮(Floating action button), 点击后会产生墨水扩散效果的 圆形按钮. 悬浮响应按钮是促进动作里的特殊类型. 是一个圆形的漂

【Material Design视觉设计语言】应用动画设计

作者:郭孝星 微博:郭孝星的新浪微博 邮箱:[email protected] 博客:http://blog.csdn.net/allenwells Github:https://github.com/AllenWells 动画反应了应用组件在空间中的关系.功能以及在整个系统中的趋势. 一 动画设计原则 1.1 动画真实地反应现实世界 动画应该完整的展现物体的各个真实的特性,譬如优雅.简约和美观等,来获得神奇的无缝的用户体验, 举例 迅速的加速和平滑的减速会感到自然和愉快 线性动作会感到机械,在

Android Material Design带来的UI变革

谷歌Matias Duarte称,"Material Design是美丽和大胆的,因为干净的排版和布局简单且容易理解.内容才是焦点. 谷歌I/O 014开发者大会上宣布全新的设计语言"Material Design",适用于旗下所有平台,包括 Android.Chrome OS 和网页. 谷歌Matias Duarte称,"Material Design是美丽和大胆的,因为干净的排版和布局简单且容易理解.内容才是焦点." Material Design 初