`
XiangdongLee
  • 浏览: 86908 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

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

 
阅读更多
本文围绕以下三个部分展开:

一、Material Design 质感设计
二、质感主题
三、案例:CheeseSquare





一、Material Design 质感设计

        1. 质感设计

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



        (1)3D世界



        (2)光源和阴影

        控件的阴影是由主光源和环境光源投射而成。

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


        阴影的深度层级表示不同的高度层级。



        (3)控件的高度(z 轴)

















        (4)形变与动作

        形变:

            可以改变形状及大小;不可以弯曲或对折;可以拼贴、分解、相互运动。

        动作:

            可以出现或消失;可延任意轴移动;z 轴移动是由用户交互产生的。

        附:交互事件不能穿透控件,控件不能穿透其他控件。



        (5)控件间的关系






二、质感主题






三、案例:CheeseSquare
  • 大小: 24.2 KB
  • 大小: 50.4 KB
  • 大小: 5.6 KB
  • 大小: 20.6 KB
  • 大小: 22.9 KB
  • 大小: 19.9 KB
  • 大小: 32.1 KB
  • 大小: 48.6 KB
  • 大小: 19.1 KB
  • 大小: 28 KB
  • 大小: 24.7 KB
  • 大小: 24.4 KB
  • 大小: 19.2 KB
  • 大小: 28.7 KB
  • 大小: 14.9 KB
  • 大小: 38.2 KB
  • 大小: 36.7 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics