学会对美工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

时间: 2024-11-03 00:54:46

学会对美工Say No---Material Design的相关文章

网易新闻安卓客户端MATERIAL DESIGN实战

  项目背景 网易新闻安卓版一直以来照搬IOS版的交互和视觉,这在一定程度上保持了不同平台上应用风格和用户体验的一致性,也相应的减少了设计和开发的人力成本.市面上的大部分移动应用也是如此.所以,一直以来给用户的感觉是Android没有独立鲜明的视觉风格,但是事实并非如此.不久前Google推出AndroidL系统,视觉语言Material design也相应诞生.Google为设计师提供了一套完整的官方交互视觉设计指引,扁平化.华丽又稳重的色彩,将卡片的功能发挥到极致. 以此为契机,网易新闻也尝

Material Design学习之 Button(详细分析,传说中的水滴动画)

转载请注明出处:王亟亟的大牛之路       上一篇大致介绍了Material Design的一些基本概念传送门:http://blog.csdn.net/ddwhan0123/article/details/50541561 这一片来具体学习下里面的内容,这篇分为两部分一部分是原理分析,一部分是代码分析. 先简要的介绍一些理论知识,顺便温顾下基础知识 按钮 按钮由文字和/或图标组成,文字及图标必须能让人轻易地和点击后展示的内容联系起来. 主要的按钮有三种: 悬浮响应按钮(Floating ac

Google发布了新版Material Design动效指南

  Material Motion 在Material Design的世界中,动效用一种优雅.流动的方式来描述空间关系.功能.和意向. 为什么说动效很重要? 动效可以向我们展示一个app是如何构成和用途. 动效可以做到: ● 不同视图之间的焦点引导 ● 当用户完成了一个手势后,提示用户将会发生什么 ● 明确元素之间的层级和空间关系 ● 当程序在后台运行时,分散用户的注意力(例如获取内容或载入下一个视图) ● 润色整个app:个性化.令人愉悦 如何制作材料设计的动效? 材料设计的运动吸取了一些真实

MATERIAL DESIGN只是独辟蹊径,并未全面胜出

  Material Design发布之时,Google在设计领域做出的努力令我印象深刻.在这方面Apple一度遥遥领先.这种局面结束了.记得我以前总抱怨 Android设计的那套不统一.缺乏文档.缺乏吸引力的暗色主题,还有模棱两可的汉堡菜单的滥用.Material Design解决了其中很多问题.如今它提供了一套统一的设计语言,更明亮.色彩丰富,并且背后有深思熟虑的设计指南作为坚实支撑. 但是尽管它色彩漂亮,卡片的使用提供了强烈的纵深感与操纵感.我时常扪心自问,这真的像许多设计师说的那样,比A

扁平化设计和MATERIAL DESIGN有什么不一样?

  两种相似的设计风格,一个基于另一个.一个是新热事物,另一个,有人猜测,已经以自己的方式成为一种时尚.一个是自发的--适应设计的趋势,另一个却是有目标--专用的设计指导规范. 你可能明白了扁平化与Material Design之间的冲突了. 但是,他们之间不同是什么呢,本质上是一个比另一个更好?在某些用途上更好?实际上,一些人想知道它们之间的差别有多大,让我们从最基本的开始:拟物化设计的身影出现在每一个身上. 拟物化设计 拟物化设计, 在这个背景下,设计是为了模拟真实的物理世界.通常,这需要设

深聊MATERIAL DESIGN复杂响应式设计

  2011年,Gmail邮箱的按钮变得更加扁平化.2012年,Google引入分层的卡片设计,使用更多的空白和精心设计的层次排版结构.经历了几年的迭代和提炼,Google寻找到了一种可以贯通的理论体系,即把系统内的各种设计都规范成一种变形的纸片,并套用现实中纸墨的物理模型进行交互,这就是2014年Google I/O大会隆重发布的Material Design. Material Design提出了平面像素的Z轴概念,通过纸片在物理世界中形态的抽象和提炼,定义了各种信息层级和常用状态的表达方式

帮你全面彻底搞定MATERIAL DESIGN的学习笔记

  这一年就快完了,你还没搞懂Material design吗?是嫌文档太长,还是觉得自己英文不好?都没关系,我们善良热情的@十萬個為什麽 帮同学们通读了一遍官方的设计指南,去糙取精,整理出这篇干货超多的学习笔记,打包票学完基本就掌握90%了,别错过咯! 自从Material design发布以来,可乐橙就在一直收集相关素材与资源,研究别人的作品.这套设计风格非常鲜明,带有浓郁的Google式严谨和理性哲学,深得我心.实际上,光是研究素材和别人作品,就能发现一些明显的规律,做出几分相似的设计.这

MATERIAL DESIGN设计规范学习心得

  自学笔记就该这么做!今天分享@東門王三 同学关于Material Design的自学成果,他的学习笔记严谨有序,触类旁通,从Material Design到其他系统的设计规范都有所研究,还认真地做了思维导图,同学们可以边学习边借鉴他的自学方法,一举两得呦. 想读好书的同学,可直接到:设计师图书导航 挑选. @東門王三 :随着Android系统从Android 4.4逐步升级到Android L.Material Design作为Android Design演进的最新标准规范,也推出其完整的设

MATERIAL DESIGN组件中的学问

  接受变化 仅按钮而言就有很多规则.material design有3种不同类型的按钮:漂浮式.浮雕式和扁平式.material design有多种多样的界面,一种单一的按钮难以满足需要. 在所有这些各式界面中,也无法仅凭记忆使它们保持统一.然而,material design包含3种不同类型的按钮,是为了最大限度地利用设计.这些备选方案,是为了应对那些常规设计不好使的情况. "选择主按钮的类型,取决于按钮的重要性.屏幕中容器的数量.还有整个屏幕的整体布局."-- 按钮的使用(自备梯