学会对美工Say No---Material Design

转载请注明出处：王亟亟的大牛之路

这几天有一些小伙伴问我，亟亟怎么不更新博客了。能听到这样的询问从内心深处还是比较欣喜的，至少有人会看，有人会想到你。（尽管你写的东西质量有好有坏，但是有人在支持还是很暖心的）

在这里统一回复下，最近在写一个内部用的APP，是对硬件已经一些功能做测试的APP（也就一个部门+测试组相关人员用），所以博客没抽出时间写，SO我回尽量抽时间写的。

废话不多说，我们来讲正题！

随着各种各样的设计模式的出现，我们的UI大姐姐们（大基佬们）都开始着各种各样的天花乱坠的设计，尽量想让他们的成果更像“艺术品”，然后就开始各种刁难我们，然后我们只能默默忍受着跟着“苹果走”。（我认知的好多企业基本一套UI 2种手机都跟着苹果走，黑莓 WIN暂不讨论）

但是其实很多实现苹果都有着自己的源生控件，而我们却要写一个有一个的自定义View去靠近他们的实现方式（也就是说，我们肯定工作量相对于苹果的小伙伴来说更高，至少再UI层面上，当然这里不包括那些大公司，什么美团，大众我认识的都是一个团队几十个人开发一个APP，每个人分工很细，那也就不算在内）

在Google推出Material Design的时候，我们其实可以明显的感觉到，我们应该有自己的风格，诸如Bar在上面，更多的层次感。

这一篇作为铺垫来提一提Material Design，以便于之后的几篇来实现我们想要的效果，贴一下效果。

当然这是用OpenGL ES做的，但是我想大家理解的是里面的一些概念（能装B！！显得你不是一个代码工具，你有思想，对不对！！）

概念

-3D（裸）

Material 环境是一个三维的空间，这意味着每个对象都有 x ， y ， z 三维坐标属性，z 轴垂直于显示平面，并延伸向用户视角,每个 material 元素在 z 轴上占据一定的位置并且有一个 1dp 厚度的标准。

我们所有的内容再也不是都黏在“纸上”（屏幕），他是一个实体，而不同的实体存在他自身的厚度（Z轴），我们在Material Design出现之前的阴影实现是怎么做的？

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  <!-- 阴影部分 -->  <!-- 个人觉得更形象的表达：top代表下边的阴影高度，left代表右边的阴影宽度。其实也就是相对应的offset，solid中的颜色是阴影的颜色，也可以设置角度等等 -->  <item  android:left="2dp"  android:top="2dp">  <shape android:shape="rectangle" >  <gradient  android:angle="270"  android:endColor="#0F000000"  android:startColor="#0F000000" />  <corners  android:bottomLeftRadius="6dip"  android:bottomRightRadius="6dip"  android:topLeftRadius="6dip"  android:topRightRadius="6dip" />  </shape>  </item>  <!-- 背景部分 -->  <!-- 形象的表达：bottom代表背景部分在上边缘超出阴影的高度，right代表背景部分在左边超出阴影的宽度（相对应的offset） -->  <item  android:bottom="3dp"  android:right="3dp">  <shape android:shape="rectangle" >  <gradient  android:angle="270"  android:endColor="#FFFFFF"  android:startColor="#FFFFFF" />  <corners  android:bottomLeftRadius="6dip"  android:bottomRightRadius="6dip"  android:topLeftRadius="6dip"  android:topRightRadius="6dip" />  </shape>  </item>  </layer-list>

画2层一层做厚度变色的偏移量显得有厚度而不是平面，构成了3D的视觉效果。

在5.0之后，我们可以使用android:elevation

接下来我们来掩饰下效果：(图片超级大)

代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="sample.wjj.blogsample.MainActivity"><RelativeLayout
        android:elevation="3dp"android:background="#DCDC00"android:layout_margin="30dp"android:layout_width="match_parent"android:layout_height="match_parent"><RelativeLayout
            android:elevation="5dp"android:background="#DC00"android:layout_margin="30dp"android:layout_width="match_parent"android:layout_height="match_parent"><ImageView
            android:layout_width="wrap_content"android:layout_height="wrap_content"android:id="@+id/imageView"android:src="@drawable/demo"android:layout_centerVertical="true"android:layout_centerHorizontal="true" /></RelativeLayout></RelativeLayout></RelativeLayout>

这是测试机的一个nexus平板我们明显的可以看出，ToolBar 红色部分，黄色部分都是在白色底板的上面，并且是有厚度的，厚度产生了阴影的效果。

在这里要说一下概念：

我们所有的层与层之间的交互对下一层内容或同级的界面将不做影响：
诸如，我对一个8dp厚度的Button点击，他被点击之后可能厚度变为 3dp，但它的变化不会影响他下一层父容器（如各类Layout）

像这样是OK的，我们的点击不能影响灰色的下层Layout

多个组建必须独立，不可以互相穿透,下图为独立的，不能再交际部分实行互相“融合”

更多内容可以看原文哦：http://www.google.com/design/spec/material-design/introduction.html#introduction-goals

学会对美工Say No---Material Design相关推荐

android 模仿instagram的listview,实现Instagram的Material Design概念设计
几个月前(这篇文章的日期是2014 年11月10日),google发布了app和web应用的Material Design设计准则之后,设计师Emmanuel Pacamalan在youtube上发布 ...
Material Design组件之NavigationView
原文首发于微信公众号:jzman-blog,欢迎关注交流! Material Design 系列文章: Material Design组件之FloatingActionButton Material ...
视频教程-Android Material Design 新控件-Android
Android Material Design 新控件刘志远,北京邮电大学硕士研究生, 北京育华志远科技有限公司创始人, 育华志远教育品牌负责人,育华志远课程体系打造者. 率领团队为互联网行业培训千 ...
Android Material Design Icon Genenerator 插件为个人开发者提供 Icon 图标大全
前言如果你作为个人开发者,没有美工小姐姐的情况下,项目中的图标 icon 很是苦恼.之前用过阿里巴巴图标库 Iconfont,后来发现 Android studio 中有一个很牛逼的 icon 插件 ...
Android Material Design动画
最近在看一些关于Material Design的东西,还记得在博客<你所不知道的Activity转场动画--ActivityOptions>中,我们介绍了一种优雅的activity过度动画 ...
android5.0后新特性修改标题头,Android5.0中Material Design的新特性
Material Design简介 Material Design是谷歌新的设计语言,谷歌希望寄由此来统一各种平台上的用户体验,Material Design的特点是干净的排版和简单的布局,以此来突出 ...
创建Material Design风格的Android应用--使用Drawable
2019独角兽企业重金招聘Python工程师标准>>> 以下Drawables的功能帮助你在应用中实现Material Design: 图片资源着色在android 5.0(api ...
Material Design 设计规范总结(2)
本文是Material Design设计规范总结的第二部分,是进行UI设计与前端开发的必备参考资料. 八.布局 (1)所有可操作元素最小点击区域尺寸:48dp X 48dp. (2)栅格系统的最小单位 ...
移动端html模板卡片列表效果,移动手机Material Design风格信息卡片UI设计
这是一款非常时尚的移动手机Material Design风格信息卡片UI设计效果.该卡片设计效果中所有的卡片在点击或触摸之后,会以平滑过渡动画全屏展开.整个设计以扁平风格为主,非常时尚. 使用方法 H ...

学会对美工Say No---Material Design

转载请注明出处：王亟亟的大牛之路

学会对美工Say No---Material Design相关推荐

最新文章

热门文章