Step7:material design的基本介绍以及安装

来源:互联网 发布:淘宝自动生成手机详情 编辑:程序博客网 时间:2024/06/16 07:46

引言

页面的基本逻辑已经接近于完善,相关的粗框架也已经基本成型,以后的每个阶段主要是针对每个界面的优化,我将尝试使用不同的稳定的技术来使得我们的交互界面看起来更加有好一些,现在介绍一款中途可能用到的框架—Material Design

简介

Material Design语言[1] 的一些重要功能包括 系统字体Roboto的升级版本 ,同时颜色更鲜艳,动画效果更突出。杜拉特还简要谈到了新框架的一些变化——这个新框架也于今天在 google.com/design 公开发布。谷歌的想法是让谷歌平台上的开发者掌握这个新框架,从而让所有应用就有统一的外观,就像是苹果向开发者提出的设计原则一样。谷歌还基于这种新的设计语言对本公司旗舰应用进行了重新设计,包括安卓和网页端的Gmail和Calendar。大家可能还会记得,看到过有关这些变动的文章, 有些博客 已经掌握了外泄截屏,显示经过了重新设计的Gmail,界面更干净、更简约。在安卓平台上,这种新界面被称为Material,支持各种新动画效果,具有内置的实时UI阴影,以及可在不同屏幕之间切换的hero元素。

安装

  1. 打开安卓项目
  2. File — Project Structure — app
  3. 在app选项的最右边,选择Dependencies,点击做右边一栏上边的“+”号,选择 “library dependency”,如下图这里写图片描述
  4. 在出现的搜索框输入”design”搜索,选择第一个,点击OK这里写图片描述
  5. 找到myfag — app — build.gradle ,当里面的 “dependencies”中出现,以下语句时: compile 'com.android.support:design:23.4.0' 就说明安装成功这里写图片描述

核心思想

material design的核心思想,就是把物理世界的体验带进屏幕。去掉现实中的杂质和随机性,保留其最原始纯净的形态、空间关系、变化与过渡,配合虚拟世界的灵活特性,还原最贴近真实的体验,达到简洁与直观的效果。
Material design是最重视跨平台体验的一套设计语言。由于规范严格细致,保证它在各个平台使用体验高度一致。不过目前还只有Google自家的服务这么做,毕竟其他平台有自己的规范与风格。

特性

材质

这里写图片描述
Material design中,最重要的信息载体就是魔法纸片。纸片层叠、合并、分离,拥有现实中的厚度、惯性和反馈,同时拥有液体的一些特性,能够自由伸展变形。

这些是纸片的魔法特性,真实纸片所不具备的能力:

  • 纸片可以伸缩、改变形状
  • 纸片变形时可以裁剪内容,比如纸片缩小时,内容大小不变,而是隐藏超出部分
  • 多张纸片可以拼接成一张
  • 一张纸片可以分裂成多张
  • 纸片可以在任何位置凭空出现

不过,魔法纸片有些效果是禁止的:

  • 一项操作不能同时触发两张纸片的反馈
  • 层叠的纸片,海报高度不能相同
  • 纸片不能互相穿透
  • 纸片不能弯折
  • 纸片不能产生透视,必须平行于屏幕

空间

这里写图片描述

Material design引入了z轴的概念,z轴垂直于屏幕,用来表现元素的层叠关系。z值(海拔高度)越高,元素离界面底层(水平面)越远,投影越重。这里有一个前提,所有的元素的厚度都是1dp。

所有元素都有默认的海拔高度,对它进行操作会抬升它的海拔高度,操作结束后,它应该落回默认海拔高度。同一种元素,同样的操作,抬升的高度是一致的。

注意:这不止是设计中的概念,开发人员确实可以通过一个值来控制元素的海拔高度和投影。

总结

俗话说,”工欲善其事必先利其器”,现在所做的内容是优化界面前的一些准备,软硬件环境以及相关的使用,特性了解等需要花得很大的时间,但是只挑自己需要的只是学,然后灵活运用就好了。
相关的资料博文有:material design

阅读全文
0 0