文档章节

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

予沁安
 予沁安
发布于 2015/04/02 03:52
字数 1081
阅读 355
收藏 6
点赞 1
评论 0

原文:拟物设计和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 )

© 著作权归作者所有

共有 人打赏支持
予沁安

予沁安

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

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

readilen ⋅ 05/21 ⋅ 0

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

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

readilen ⋅ 05/21 ⋅ 0

AngularJS 的 Material Design 风格框架 - AngularJS Material

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

匿名 ⋅ 05/15 ⋅ 0

Angular 的 Material Design 风格框架 - Angular Material

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

匿名 ⋅ 05/15 ⋅ 0

Angular 6.0正式版发布,都有哪些新功能

点击关注异步图书,置顶公众号 每天与你分享IT好书 技术干货 职场知识 在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在...

异步社区 ⋅ 05/08 ⋅ 0

Angular 6正式版发布,都有哪些新功能

在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。除此之外,这次更新还包括框架包(@angu...

code_xzh ⋅ 05/05 ⋅ 0

Vue、React、Angular最佳UI框架

摘要: 今天我们不聊技术,只"以貌取人"。 前言 之前有很多刚入门的小伙伴问我(上面是我的自拍照),现在前端Vue、React、Angular这三个框架似乎都很好,反而不知道选择什么了,我当时开玩笑...

Fundebug ⋅ 05/03 ⋅ 0

[Angular Material完全攻略] Day 03 - MatIcon (及颜色配置介绍)

今天是第一天正式介绍Angular Material的相关元件,就让我们先从比较简单轻鬆的Icon来开始,虽然说是比较简单轻鬆,但其实裡面也是有不少学问的,透过今天的介绍,你会发现其实Angular Mater...

readilen ⋅ 05/21 ⋅ 0

Angular 6.0 即将发布,承诺更小更快更易用

本月早些时候,Angular 团队发布了 6.0 的第五版候选版本,其中包括一些错误修复以及添加令牌标记和支持配置导航网址。 根据 Angular 的开发者支持者 Stephen Fluin 的说法,RC 意味着团队已...

达尔文 ⋅ 04/24 ⋅ 0

Angular 6 正式发布:统一框架、Material 和 CLI 三大模块

Angular 6.0.0 已正式发布,新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。Angular v6 是统一整体框架、Material 和 CLI 三大 Angular 组件的第一个版本,此次没有将重点放在...

雨田桑 ⋅ 05/04 ⋅ 30

没有更多内容

加载失败,请刷新页面

加载更多

下一页

uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 33分钟前 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

推荐:并发情况下:Java HashMap 形成死循环的原因

在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race Condition,从而导致死循环。这个事情我4、5年前也经历...

码代码的小司机 ⋅ 昨天 ⋅ 1

聊聊spring cloud gateway的RetryGatewayFilter

序 本文主要研究一下spring cloud gateway的RetryGatewayFilter GatewayAutoConfiguration spring-cloud-gateway-core-2.0.0.RC2-sources.jar!/org/springframework/cloud/gateway/config/G......

go4it ⋅ 昨天 ⋅ 0

创建新用户和授予MySQL中的权限教程

导读 MySQL是一个开源数据库管理软件,可帮助用户存储,组织和以后检索数据。 它有多种选项来授予特定用户在表和数据库中的细微的权限 - 本教程将简要介绍一些选项。 如何创建新用户 在MySQL...

问题终结者 ⋅ 昨天 ⋅ 0

android -------- 颜色的半透明效果配置

最近有朋友问我 Android 背景颜色的半透明效果配置,我网上看资料,总结了一下, 开发中也是常常遇到的,所以来写篇博客 常用的颜色值格式有: RGB ARGB RRGGBB AARRGGBB 这4种 透明度 透明度...

切切歆语 ⋅ 昨天 ⋅ 0

CentOS开机启动subversion

建立自启动脚本: vim /etc/init.d/subversion 输入如下内容: #!/bin/bash## subversion startup script for the server## chkconfig: 2345 90 10# description: start the subve......

随风而飘 ⋅ 昨天 ⋅ 0

版本控制工具

CSV , SVN , GIT ,VSS

颖伙虫 ⋅ 昨天 ⋅ 0

【2018.06.19学习笔记】【linux高级知识 13.1-13.3】

13.1 设置更改root密码 13.2 连接mysql 13.3 mysql常用命令

lgsxp ⋅ 昨天 ⋅ 0

LVM

LVM: 硬盘划分分区成物理卷->物理卷组成卷组->卷组划分逻辑分区。 1.磁盘分区: fdisk /dev/sdb 划分几个主分区 输入t更改每个分区类型为8e(LVM) 使用partprobe生成分区的文件:如/dev/sd...

ZHENG-JY ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部