文档章节

拟物设计和Angular的实现 - Material Design (持续更新)

予沁安
 予沁安
发布于 2015/04/02 03:52
字数 1081
阅读 382
收藏 6

原文:拟物设计和Angular的实现

Material Design是Google最新发布的跨平台统一视觉设计语言。直接翻译是物质设计,但是我更倾向于使用"拟物设计"更为准确。

据谷歌介绍,Material Design基于“真实的触感,灵感源自对纸和墨水的研究,” 能够让用户 “理解那些用于替代真实世界的可视线索,”“而又不违背力学原理。”另外,光线、表面和移动的基本原理是表现对象如何移动、交互和相互关联地存在于空间中的关键。逼真的光影效果可以显示区块间的接缝、划分空间、以及标识移动的部件。

Material Design在动画、风格和布局方面提出了一系列的原则,并且为大量的视觉组件,包括按钮、卡片、网格和对话框等,以及相关的动作和手势提供了建议,另外还包含了一些与可访问性有关的指引。

原理

拟物就隐喻

拟物是对空间和动作的一致整体的模拟。拟物系统的设计基于触摸感,得力于纸墨原理,借力高科技, 最终为我们打开了一道想象之门。

系统正交分解

  • 组件 - UI Component (Directives, Services, ARIA)
  • 布局 - Layout CSS (FlexBox, Attribute, Child Aligment)
  • 风格 - Theme (Color Palettes)

拟物的世界

3D世界

拟物的世界是3D世界,每个物体都有X, Y, Z三个方向的坐标。其中,Z是垂直于屏幕的轴,每一层在Z方向上都有标准的1dp厚度。

光和影

拟物的世界还引入了虚拟光源,而实际上我们是看不到这个光源的,我们看到是这个光源在物体上留下的影子。 拟物世界仅仅引入了两种光源,所有的物体的影子都是由这两种光源照射的结果。

主光

主光源在物体上留下的是单方向的影子。

散光

散光源在物体上留下的是多方向均匀而一致的模糊影子。

两种光源同时照射

物质的特性

物质一些内在的特性和行为,理解这些特性可以帮助我们更好理解拟物设计。

物理特性

  • 我们的物质可以有不同的长度和宽度(X轴和Y轴的度量),但是厚度是统一的(1dp),而且厚度永远不为0。
  • 物质的阴影总是来源于它的相对(其它元素)高度 (Z轴的度量)
  • 显示在物质上的内容不受物质本身的限制,可以是任何形状,任何颜色。
  • 内容的行为与物质的行为是解耦的,但是物质的边界仍然能够限制内容的显示。
  • 物质是实体,任何操作时间不能透过最上层物质应用到被挡住的下一层去。
  • 多个物质元素不能在空间中占据同一个点,他们是互斥的。
  • 一个物质元素不能穿过其他物质元素。

布局

Angular Material的 响应式CSS布局是基于flexbox实现的。整个布局体系是用元素的属性来标示,而不用CSS类。这也是正交设计的一个体现:属性来定义布局,类定义风格。 例子:使用layout属性来定义内部元素的布局,横向排列(layout="row")或者竖向排列 (layout="column")

<!-- lang: html -->    
<div layout="row">
  <div>I'm left.</div>
  <div>I'm right.</div>
</div>
<div layout="column">
  <div>I'm above.</div>
  <div>I'm below.</div>
</div>

谷歌Material Design原文

[AngularJS的实现] (https://material.angularjs.org )

© 著作权归作者所有

共有 人打赏支持
予沁安

予沁安

粉丝 94
博文 23
码字总数 31905
作品 3
其他
架构师
私信 提问
[Angular Material完全攻略] Day 01 - 开始 & 简介

转载 从Angular第2版正式release后,根据全球最大工程师讨论区StackOverflow的统计,从2016开始的Angular讨论度就不断窜升,甚至超越了React,直到了2017年,甚至摆脱了前一代Angularjs的阴影...

readilen
05/21
0
0
[Angular Material完全攻略] Day 02 - 环境设定 & 安装 & Hello World

今天我们将开始正式迈入Angular Material的世界,要学习使用Angular Material打造高品质及高质感的网页,当然要从安装Angular Material套件开始,本篇文章就来介绍基本的Angular Material安装...

readilen
05/21
0
0
material2 7.0.0-beta.2,Angular 的 Material Design 风格框架

Angular 的 Material Design 风格框架 material2 发布了 7.0.0-beta.2 版本,此版本包含许多更改,以使组件更符合 2018 Material Design 的更新。 如果要覆盖默认样式,可能会需要对它们进行...

局长
09/24
0
0
AngularJS 的 Material Design 风格框架 - AngularJS Material

AngularJS Material 是 AngularJS 框架的谷歌 Material Design 标准的实现。AngularJS Material 包含一组丰富的、可重用、经过充分测试并可访问的 UI 组件。 针对 Angular 2 或更高版本的实现...

匿名
05/15
0
0
Angular 的 Material Design 风格框架 - Angular Material

Material Design for Angular 是 Angular 官方团队开发的基于最新版本 Angular 的 Material Design 风格的框架,可和 Nest.js 搭配使用做全栈开发。 针对 Angular 1 版本的实现 https://www....

匿名
05/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

JAVA设计模式之模板方法模式和建造者模式

一、前期回顾 上一篇《Java 设计模式之工厂方法模式与抽象工厂模式》介绍了三种工厂模式,分别是工厂方法模式,简单工厂方法模式,抽象工厂模式,文中详细根据实际场景介绍了三种模式的定义,...

木木匠
26分钟前
2
0
C中的宏的使用(宏嵌套/宏展开/可变参数宏)

基本原则: 在展开当前宏函数时,如果形参有#或##则不进行宏参数的展开,否则先展开宏参数,再展开当前宏。 #是在定义两边加上双引号 #define _TOSTR(s) #sprintf(_TOSTR(test ABC))pr...

SamXIAO
56分钟前
2
0
SpringBoot 整合异步调用方法

1. 在 SpringBoot 主类上使用 @EnableAsync 注解,开启异步调用功能 package com.codingos.springbootdemo;import org.springframework.boot.SpringApplication;import org.springfra......

北漂的我
今天
1
0
0015-如何使用Sentry管理Hive外部表权限

1.文档编写目的 本文档主要讲述如何使用Sentry对Hive外部表权限管理,并基于以下假设: 1.操作系统版本:RedHat6.5 2.CM版本:CM 5.11.1 3.集群已启用Kerberos和Sentry 4.采用具有sudo权限的...

Hadoop实操
今天
3
0
边缘计算与数据中心的发展趋势

导读 Gartner研究表明,人工智能、物联网和5G助力下一代商业创新,由此产生大量数据,2020年前企业将使用超过75亿台联网设备。 在几乎每个方面,社会的节奏都正变得更快。我们希望客户服务问...

问题终结者
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部