Material Design你真的了解吗?

  • Material Design是一个统一的系统,它结合了理论、资源和工具来制作数字体验。

简介

创造一种视觉语言,将优秀设计的经典原则与技术和科学的创新和可能性结合起来。
允许在不同平台和设备大小之间进行统一的体验。

  • 材料是比喻


    例如现实的照明显示接缝,分隔空间,指示移动部件。

基于对纸和墨水的研究的启发而建立在触觉的现实基础上,而技术上的进步释放了想象的空间。

  • 大胆,图形,想象力


基于打印的设计的基本元素——排版、网格、空间、比例、颜色和图像的使用——指导视觉处理。这些元素远远超过了眼睛的视觉。它们创建层次、意义和焦点。深思熟虑的颜色选择、边缘到边缘的图像、大规模的字体设计和有意的白色空间,创造了一个大胆而生动的界面,让用户沉浸在体验中。
对用户操作的强调使核心功能立即变得明显,并为用户提供了路径。

  • 有意义的运动

运动是有意义的,也是适当的,它有助于集中注意力和保持连续性。反馈微妙而清晰。过渡有效而连贯。


空间环境

所有的物质对象都有x,y和z维。
所有的物体都有一个z轴的位置。
主要的灯光会产生方向性的阴影,而周围的光线会产生柔和的阴影。


特性

物质具有某些不可改变的特性和固有的行为。

  • 物理属性
  1. 材料有不同的x和y尺寸和均匀的厚度(z)。
  2. 材料投下阴影。阴影在物质元素之间的相对海拔(z位置)自然产生。
  3. 内容以任何形状和颜色显示在材料上。内容不会增加材料的厚度。
  4. 内容可以独立于材料,但在材料的范围内是尽可展示有限的。
  5. 材料是实体。输入事件不能通过材料。
  6. 多重物质元素不能同时在空间中占据相同的位置。
  7. 材料不能通过其他材料。
    例如,一层材料在改变高度时不能通过另一层材料。
  • 形变
  1. 材料可以改变形状。
  2. 物质在它的平面上拉伸和收缩。
  3. 不要弯曲或折叠。
  4. 材料可以连接在一起,成为一层材料。
  5. 当分裂时,物质可以治愈。
    例如,如果你把一块材料从一块材料中移走,那么材料的薄片就会变成一整张纸。
  • 动态
  1. 物质可以自发产生或销毁于空间中的任何地方。
  2. 材料可以沿着任何轴移动。
  3. z轴运动通常是用户与材料交互的结果。

海拔和阴影

在物理世界中,物体可以被堆叠或粘在一起,但不能通过彼此。物体也会投射阴影,反射光线。
材料设计反映了这些品质,形成了一种对用户来说很熟悉的空间模型,并且可以在应用中一致地应用。

  • 海拔


从一个表面到另一个表面,一个元素的高度表明了表面和它的阴影的深度之间的距离。

  1. 静态海拔
    所有的物质元素都有静止的高度。虽然组件在不同的应用程序之间有着一致的静态高度,但它们在不同平台和设备上可能有不同的静态高度。
  2. 动态的高度补偿
    动态海拔偏移量是一个构件相对于静止状态的目标提升。
  • 阴影

阴影为物体的深度和方向运动提供了重要的视觉线索。它们是唯一的视觉线索,指示出物体表面之间的距离。物体的高度决定了它的影子的外观。


好了,本篇我们对Material Design的概念有了一个初步的了解,其核心思想就是将物理世界的体验带入屏幕的方寸之间,下一篇我们会对Material Design的Motion做详细介绍。

每星期至少一篇跟新本系列,感兴趣可以关注。
一起学习,一起进步。

顺便提一句我的个人主页就是Material Design风格的,不信点点看
DuYang_ZXM(https://duyangs.github.io/)

声明本文图片多数取自官网https://material.io/,转载请注明

下一篇:Material Design之Motion

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,014评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,796评论 3 386
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,484评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,830评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,946评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,114评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,182评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,927评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,369评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,678评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,832评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,533评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,166评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,885评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,128评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,659评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,738评论 2 351

推荐阅读更多精彩内容