【攻克Android (20)】Material Design 质感设计

[b][size=large]本文围绕以下三个部分展开： [/size][/b]

[b][size=large]一、Material Design 质感设计[/size][/b]
[b][size=large]二、质感主题[/size][/b]
[b][size=large]三、案例：CheeseSquare[/size][/b]


[b][size=large]一、Material Design 质感设计[/size][/b]

[size=medium][b]1. 质感设计[/b][/size]

[size=medium]源于对现实材料（纸张和墨水）触感的隐喻，创造出的一套视觉语言：控件拥有现实实体的一些特征（厚度、光照、阴影），并在交互过程中遵守物理世界的基本规则。[/size]

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/5762/f917b611-686b-3a6c-8665-7d196e40821b.png[/img][/align]

[size=medium][b]（1）3D世界[/b][/size]

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/5764/c6fb8005-3fe6-3597-b91e-a621fb00001c.png[/img][/align]

[size=medium][b]（2）光源和阴影[/b][/size]

[size=medium]控件的阴影是由主光源和环境光源投射而成。[/size]

[size=medium]环境中两个虚拟的光源照明整个场景使得控件可投射出阴影：
主光源创造定向阴影；环境光源从各个角度创造一致的、柔和的阴影。[/size]

[size=medium]阴影的深度层级表示不同的高度层级。[/size]

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/5780/ad27e919-4c18-325b-9df1-bb81d66aff39.png[/img][/align]

[size=medium][b]（3）控件的高度（z 轴）[/b][/size]

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/5787/d7d10b9b-33ad-323d-ae1b-61a0327f80cb.png[/img][/align]

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/5791/e91143aa-280c-352a-9645-1e6a933fdeda.png[/img][/align]

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/5795/b76aa0fe-8d43-3371-bbe7-e0e01e887adf.png[/img][/align]

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/5799/af145875-7521-3b9a-8805-69fa38920e54.png[/img][/align]

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/5789/f3ed9d94-dfac-374e-8f0f-d46ca2a63a54.png[/img][/align]

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/5793/c38b04c0-7728-342c-8508-d72efdd3c502.png[/img][/align]

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/5801/e2478f86-33ae-3867-89bc-2faecf8a3c9f.png[/img][/align]

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/5797/dc24a902-4f4a-3150-a44e-4add17a6acc3.png[/img][/align]

[size=medium][b]（4）形变与动作[/b][/size]

[size=medium][b]形变：[/b][/size]

[size=medium]可以改变形状及大小；不可以弯曲或对折；可以拼贴、分解、相互运动。[/size]

[size=medium][b]动作：[/b][/size]

[size=medium]可以出现或消失；可延任意轴移动；z 轴移动是由用户交互产生的。[/size]

[size=medium][b]附：[/b]交互事件不能穿透控件，控件不能穿透其他控件。[/size]

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/5803/aba88618-df23-3853-bf65-ce015f1742d4.png[/img][/align]

[size=medium][b]（5）控件间的关系[/b][/size]

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/5805/ddc1a137-7498-3802-8a94-9cf846792a3c.png[/img][/align]

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/5807/76879f4f-2fe0-3284-b137-49363c6b516b.png[/img][/align]


[b][size=large]二、质感主题[/size][/b]

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/5848/7d6fba57-c4bc-3f5a-ab04-fa8eaad764b7.png[/img][/align]

[align=center][img]http://dl2.iteye.com/upload/attachment/0109/5850/8cead727-f318-3133-ae0c-916c6e9a9e55.png[/img][/align]


[b][size=large]三、案例：CheeseSquare[/size][/b]