MATERIAL DESIGN组件中的学问

   接受变化

  仅按钮而言就有很多规则。material design有3种不同类型的按钮:漂浮式、浮雕式和扁平式。material design有多种多样的界面,一种单一的按钮难以满足需要。


  在所有这些各式界面中,也无法仅凭记忆使它们保持统一。然而,material design包含3种不同类型的按钮,是为了最大限度地利用设计。这些备选方案,是为了应对那些常规设计不好使的情况。

  “选择主按钮的类型,取决于按钮的重要性、屏幕中容器的数量、还有整个屏幕的整体布局。”—— 按钮的使用(自备梯子呦,同下)


  有些按钮指的南很明确,还有一些比较模糊。总而言之,这部指南是经过深思熟虑的。它有明确的细节,讲述如何使用或避免使用按钮,有助于设计师的工作。这正是整部指南的美妙之处;设计决策则交给设计师来决断。


  重视经常遭到忽视的元素

  你设计界面的时候,会经常考虑弹出窗口或警告组件吗?Material design文档专门有一章节讲的是对话框。设计师可不会经常从这些框框入手。但是,当用到时,它们仍然是设计的一部分,需要处理。


  关于对话框部分的指南非常详尽。他们概述了应该使用哪种按钮,还有原因。也清楚地剖析了对话框,讲得广泛且深入。

  “当每个标签的文字都不超出按钮的最大宽度,例如常用的确定/取消按钮,这时我们推荐使用并排按钮。”——对话框

  “当文字标签超出按钮最大宽度,你可以使用堆叠式按钮来容纳文字。”——对话框


  指南中详细介绍了对话框应该包含的内容种类和操作。它所延伸触及的各种细节令人着迷,非常有趣,因为这是经常被忽视的元素。这也证明了要创造一套强大的风格指南和设计语言,没有什么元素是微不足道的。

  一切关乎可见性

  这份文档中充分强调了可见性。创造一套全新、统一的设计语言,其目的在于提供跨浏览器/设备的可见性。一部高质量的风格指南能够在设计语言中体现可见性,如此才能创造一套高质量的设计指南。

  “标签页提供了显示相关内容分组的可见性。一个标签简明扼要地描述了它的相关内容分组。”——标签页

  Material design文档中描述标签页的方式简直精彩绝伦。Material design并没有把标签页当作导航的一种,而是把它们作为一种额外的浏览内容的方式。看到这些特殊元素有所限制,例如标签页,真使人眼前一亮。很高兴能了解到,material design的设计师们除了样式之外,也深入思考了各元素的功能性,确保它不被误用。


  如果各不同元素的功能得到了清晰的定义,那么这些元素将只会用于特定的途径。反过来,这一点也有助于塑造可见性。如果一种元素重用于多种场合,它就会使用户困惑;这对用户而言是不清晰明了也是不公平的。

  “标签页简化了应用的浏览、切换不同视图或功能、浏览分类数据。”——标签页

  打造属于自己的元素

  “点心柜作为一种小型弹出窗口,出现在移动设备屏幕底部和桌面的左下方,为某项操作提供了轻量级的反馈。它们居于所有元素之上,包括悬浮操作按钮。”——点心柜与吐司

  “吐司和点心柜很像,但不包含操作性,并且不能被滑出屏幕。”——点心柜与吐司

  Metarial design文档有一个章节很有趣,介绍了叫做“点心柜和吐司”的组件。这是种不常听闻的设计术语;点心柜和吐司是我们已知的设计元素。如果你阅读了上面的引述,再看看下面的图片,你就会意识到,点心柜和吐司的概念是一种简单的弹出通知。


  不过这里的学问更大。Material design给各种弹出窗口分了类。设计语言需要这么做,于是就这么做了。点心柜与吐司和对话框很像,但有所不同;因此,他们被区分开了。Material design将它们分开,是因为需要他们承担不同的功能。创造新元素没有问题。就像material design的每一种其他元素一样,点心柜和吐司也有特定的指南——使用示例、尺寸标注和配色。


  通常我们会忘记,这些元素不能用于各种不同场合或新途径。仅仅是为弹出窗口定义两种功能,如此简单的事情竟也大有作用,真是有趣。别忘了革新我们的设计,包括那些被视作过时的元素、你希望它消失却依然存在的元素。在小细节上进行创新是非常好的,因为它们对后面的设计会产生重大影响。


  你与Material Design

  通读Material design文档,告诉我们你从中学到了什么。令人惊讶的是,梳理一部如此简明的文档,竟能学到这么多设计知识。

时间: 2024-12-03 11:37:25

MATERIAL DESIGN组件中的学问的相关文章

使用 Sketch 和 Pixate 构建 Material Design 原型 - 第一部分

本文讲的是使用 Sketch 和 Pixate 构建 Material Design 原型 - 第一部分, 你是否曾经对某一款应用有过很棒的想法或者想向别人展示你的想法会带来改变?可是否又有以下限制令你止步? 没时间去开发款概念产品来证明自己 你对色调.布局和动画等等该如何展示没有把握 你是位应用开发者,想尝试但不知该如何设计 你是位应用设计师,想了解 Sketch 和 Pixate 在设计和构建原型的优势 你对 Material Design 能否提升你的应用没有把握但又想知道到底会变成怎样(

直接拿来用!十大Material Design开源项目

来自:http://www.csdn.net/article/2014-11-21/2822753-material-design-libs/1 介于拟物和扁平之间的Material Design自面世以来,便引起了很多人的关注与思考,就此产生的讨论也不绝于耳.本文详细介绍了在Android开发者圈子里颇受青睐的十个Material Design开源项目,从示例.FAB.菜单.动画.Ripple到Dialog,看被称为"Google第一次在设计语言和规范上超越了Apple"的Mater

深聊MATERIAL DESIGN复杂响应式设计

  2011年,Gmail邮箱的按钮变得更加扁平化.2012年,Google引入分层的卡片设计,使用更多的空白和精心设计的层次排版结构.经历了几年的迭代和提炼,Google寻找到了一种可以贯通的理论体系,即把系统内的各种设计都规范成一种变形的纸片,并套用现实中纸墨的物理模型进行交互,这就是2014年Google I/O大会隆重发布的Material Design. Material Design提出了平面像素的Z轴概念,通过纸片在物理世界中形态的抽象和提炼,定义了各种信息层级和常用状态的表达方式

MATERIAL DESIGN:构建软件的物质世界

  编者按:Google推行的Material Design已经远远超出之前Android Design的格局,视觉标准化的背后,隐藏着Matias Durate和他的谷歌战队背后改变世界的心.如果你还在和隔壁桌的同事争论Material Design到底是不是扁平化的话,不妨看看Durate.Wiley和Jitkoff 的思维已经走到了多远的地方,看看Material Design 看似简单的界面背后那颗炽热的雄心. "将纸片以如此先进的方式呈现出来,这已经与魔法无异了." 在谈及M

Android5.0中Material Design的新特性_Android

 Material Design简介 Material Design是谷歌新的设计语言,谷歌希望寄由此来统一各种平台上的用户体验,Material Design的特点是干净的排版和简单的布局,以此来突出内容. Material Design对排版.材质.配色.光效.间距.文字大小.交互方式.动画轨迹都做出了建议,以帮助设计者设计出符合Material Design风格的应用. Material Design设计语言鼓励大家使用充满活力的鲜艳色彩,并在同一界面建议使用三种色调,并保障有一个强色调,

Android5.0中Material Design的新特性

Material Design简介 Material Design是谷歌新的设计语言,谷歌希望寄由此来统一各种平台上的用户体验,Material Design的特点是干净的排版和简单的布局,以此来突出内容. Material Design对排版.材质.配色.光效.间距.文字大小.交互方式.动画轨迹都做出了建议,以帮助设计者设计出符合Material Design风格的应用. Material Design设计语言鼓励大家使用充满活力的鲜艳色彩,并在同一界面建议使用三种色调,并保障有一个强色调,强

Material Design中全新的动画

Material Design中的动画将为用户提供操作反馈并在用户与您的应用进行互动时提供视觉连续性. Material Design将为按钮与操作行为转换提供一些默认动画,而 Android 5.0(API Level 21)及更高版本可让您定制这些动画,同时也可创建新动画: 一.触摸反馈动画 效果图: Material Design的触摸反馈可在用户与 UI 元素互动时,在接触点上提供即时视觉确认. 适用于按钮的默认触摸动画使用全新 RippleDrawable类别,以波纹效果实现不同状态间

一组实用的MATERIAL DESIGN风格素材!

  和早期的Android Design的不一样,Material Design 不仅有着更为系统化的规范,也将"纸"的隐喻注入到UI设计的每个元素当中.它结合了最新的视觉设计和技术,力图创造出更加优质,面向未来的用户体验.除开官方提供的素材之外,今天我们在网络上找了一些第三方所制作的Material Design设计风格的资源,激发你的设计灵感. 翻遍了Dribbble和CodePen之后,我们找到了不少炫酷的Material Design风格的设计作品.在探究新风格的过程中,有的设

使用 Sketch 和 Pixate 构建 Material Design 原型 - 第二部分

本文讲的是使用 Sketch 和 Pixate 构建 Material Design 原型 - 第二部分, 在教程的 第一部分 我们制作了一个简单的登录界面并导出了所有资源. 在第二部分,我们打算继续在 Pixate 里创建一个原型.对于这一部分,你需要: Android 或者 IOS 设备(最好是 Android ).如果你能弄到屏幕尺寸是 1080 x 1920 的设备那更好了,但那不是必须的, Pixate 将为你缩放原型. Pixate Studio 下载 Pixate app 到你的