打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
Material Design设计指南整理(一)

    最近在读谷歌的material design设计指南,根据自己的理解将其整理下来,方便之后查阅。

material design,可称为材质化设计,是谷歌创造的一种新的视觉语言,主要目标有两个,一是希望将科技创新与传统设计进行融合,从而打通物理世界和虚拟世界;二是希望能在不同的平台和设备之间构造一致的体验。这两点在整个设计规范中得到了很好的体现。


科技与设计的结合

不同平台和设备的一致体验

基本构成:

材质是核心,传统的设计准则是框架,动画是灵魂

1、 材质:

材质,是真实世界的隐喻。基于物理世界的触感,启发于纸张和墨水的表现形式,发展于科技以及想象力。
基于物理世界能让用户快速地理解其功能可用性,当然,除了物理世界的简单映射外,还创造了一些新的功能可用性,巧妙地取代了物理世界但是又没有打破其基本的规律。下面会对材质做详细的介绍。

2、设计:

传统印刷设计中的文字排版、网格、尺寸、颜色、图像等,搭建了材质化设计的基本框架。这些不只是为了好看,更重要的是能够组织信息并对用户做出引导。通过创造层级关系,获取视觉焦点,有意识地突出某些元素等,提高用户体验。

3、运动:

动态能够赋予设计更多的意义,更好地表现元素自身以及元素之间的关系,更好地提高用户的关注度,从而提升用户体验。
运动多数是由用户发起的,能够提高用户对应用的掌控感。
运动的前提是尽量不打断用户体验的持续性,特别是在变换和重新组织内容时。

材质详细介绍

从三个方面介绍:环境、物理属性、运动属性
下面的物体或者材质都是同一个意思。

1、环境

这是一个三维的空间,材质、光线、投影是这个空间最基本的东西。
在这个三维空间中,X轴水平,Y轴竖直向上,Z轴是垂直于屏幕。
光源分为两种,主光源和环境光。
主光源有一定的方向,会在物体上产生定向的阴影,环境光没有方向,会在物体四周造成较为柔和的阴影。

2、物理属性(基础的、高度、阴影、相对关系)
  • 材质的长宽可以任意设置,但是厚度不变,都为1dp。
  • 材质的形状和颜色都可以改变,以承载不同的内容,这些内容不会对材质的厚度造成影响。内容可以在材质内自由变换,行为独立于材质。
  • 材质是固体的,意味着不能穿过其他材质,不能与其他材质发生重叠,输入事件不能穿过材质,比如各种手势,只能影响位于前面的材质。
  • 高度:
    指两个物体在z轴上的距离,单位是dp,因为材质是有厚度的,所以测量是从一个材质的顶部到另一个材质的顶部。
    1)静止高度:
    或者称为默认高度。所有的物体都有静止高度。当高度发生变化后,应尽快回到静止高度。桌面端的静止高度比表格中列出的要低2dp,这样更适用于鼠标以及其他非触摸式环境。
    2)控件高度:
    控件在不同的app之间有一致的静止高度,在不同的平台和设备之间会有所不同。组件有动态补偿高度,指的是当组件响应用户的输入时,发生的高度上的改变,同样的,每种组件的动态补偿高度也是一致的。
    在输入事件完成或者取消之后,组件要回到原来的静止高度。
    3)避免干扰:
    由于动态补偿高度的存在,组件会离开原来的位置,有时会与其他组件相互干扰。这是需要避免的,思路如下:1、在组件层面上,在发生干扰之前,相应的组件移开进行避让,在事件完成后回到原位。2、在框架层面上,尽量将有可能产生干扰的组件分开,避免干扰的发生。

各个控件的静止高度

示例一

示例二
  • 阴影
    阴影取决于物体的高度,物体越高,阴影越大。反之,阴影也可以反映物体的高度,除此之外,还能表示物体之间的关系,区分不同的物体,也可以用来辨别同个物体前后的变化。需要注意一点的是,阴影是与位置紧密联系了,不要单纯为了改变阴影而改变。
    因为高度决定了阴影,而且控件都有默认的高度,因此也有了默认的阴影。控件也有动态补偿高度,相应的也有对应的阴影大小。下面是一些例子,具体可以在官方文档中查看。https://material.google.com/what-is-material/elevation-shadows.html#elevation-shadows-shadows
  • 物体关系
    1、父子关系:每个物体都有一个父级,每个物体都有多个子级,子级从父级继承了其变换属性,就是说子级会跟父级一起运动。
    2、同胞关系:拥有同一个父级的称为同胞关系。
    子级在的位移受到父级的限制。物体不能插入别的父子级之中
3、运动属性(变换属性加移动属性)
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
你真的了解su么?Sketchup快速完全入门手册[一篇写得很好的分享]
【新手入门】Thea Tool—灯光工具
Vray灯光全解析+Vray物理相机
three.js 源码注释(四十四)Light/DirectionalLight.js
Ae:灯光图层
【商业教程】虚幻学习第07天:攻克灯光
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服