很长一段时间没写东西了,其实是因为最近在研究Material Designer这个东西,熬夜熬的身体也不是很好了。所以就偷懒没写东西,这回开的这个系列文章是讲如何将Material Designer在程序中实现。作为一个程序员我们不需要关心太多的设计,我们只需要知道设计师给出的要求我们能否实现就行了。但,作为开头,我们还是得来讲讲这个设计重点是什么。

Material Designer

宗旨:让不同大小不同用途的设备上拥有同一种设计风格

1.纸张

这种设计模式大量参考了纸墨的模式,将空间变得像纸张一样,而用户的手指就是毛笔。用户按到控件上就会产生墨晕效果。这样的好处是明确的告诉用户是否点击了控件,而且还能让用户一下子明白控件的布局思路。毕竟一张一张的纸叠加起来的控件是很容易让人接受的。这里还有一个词“引喻”,虽然控件像纸张,但是它具有变大变小,改变颜色等能力,所以完全可以不用拘泥于现实纸张。

2.深度

新的设计中希望所有的控件都是现实世界中的隐喻,比如你按下按钮,按钮就应该有被按下的状态,这里就要用到了涟漪(Ripple)效果了。其实涟漪效果是来表示你手指按上去后墨晕扩散的效果的,下面的图能很明白的说明这点。

3.动画

动画贯穿于Material Designer之中,官方文档中用了很大的篇幅来讲解动画效果,希望让设计的动画效果很美观。但我个人认为为了动画而动画是完全不可取的,比如下面的例子

这里的动画看起来十分自然和美观,但是在实际中用户切换activity是很常见的,如果经常出现这个动画用户会觉得“很腻”,十分不友好。动画其实是一个画龙点睛的东西,万不可变为画蛇添足。那么,上图的这个动画应该在什么时候使用呢?用在第一次用户进入一个新的界面的时候,我们为了凸显这个界面的某种特定功能,就可以让这个功能的图标动起来,表现出一个点我试试的效果。

4.排版

新的设计里面很在意排版,里面列出了很多详细的数据来支持我们的设计。对于留白也有了详细的说明。优秀的排班会让你的应用看起来干净,优雅,这点十分重要。在之后的文章中我也会多少说到这方面的知识。

设计文档(不用FQ)

http://design.1sters.com/

http://www.ui.cn/Material/

目录

Material Designer的低版本兼容实现(二)—— Theme

Material Designer的低版本兼容实现(三)——Color

Material Designer的低版本兼容实现(四)—— ToolBar

Material Designer的低版本兼容实现(五)—— ActivityOptionsCompat

    

Material Designer的低版本兼容实现(六)—— Ripple Layout

Material Designer的低版本兼容实现(七)—— Rectange Button

  

Material Designer的低版本兼容实现(八)—— Flat Button

  

Material Designer的低版本兼容实现(九)—— Float Button & Small Float Button

Material Designer的低版本兼容实现(十)—— CheckBox & RadioButton

Material Designer的低版本兼容实现(十一)—— Switch

Material Designer的低版本兼容实现(十二)—— Slider or SeekBar

Material Designer的低版本兼容实现(十三)—— ProgressBar

Material Designer的低版本兼容实现(十四)—— CardView

留着以后真正用到了再写的东东

没写真的不是因为我懒,主要是东西太多了,还是请大家参考下面的项目MaterailCenter来看开源库吧。自己真正用到的时候就可以拿来用了。

Material Designer的低版本兼容实现(XX)—— EditText & Typography

MaterialEditText:https://github.com/rengwuxian/MaterialEditText(一中国大神做的,感觉很棒)

Android 5.0更新了Roboto样式,不论多大的text,展示起来都会美观和简洁。

添加了一种新的中等高度属性(android:fontFamily=”sans-serif-medium”) 和新的AppAppearance样式为了平衡内容密度和阅读的舒适感,实现了推荐的打印式缩放的。比如你可以简单的通过 android:textAppearance=”@android:style/TextAppearance.Material.Title” 设置  “Title"风格。在旧的版本中可以使用AppCompat support library的样式: “@style/TextAppearance.AppCompat.Title”.

Material Designer的低版本兼容实现(XX)—— Dialog

MaterialDialog:https://github.com/drakeet/MaterialDialog(国人做的)

L—Dialog:https://github.com/lewisjdeane/L-Dialogs

Material Designer的低版本兼容实现(XX)—— Drawer

L-Drawer:https://github.com/ikimuhendis/LDrawer

MaterialNavigationDrawer:https://github.com/neokree/MaterialNavigationDrawer

Material Designer的低版本兼容实现(XX)—— Animation

Transitions-Everywhere:https://github.com/andkulikov/transitions-everywhere

Android-UI:https://github.com/markushi/android-ui

CircularReveal:https://github.com/ozodrukh/CircularReveal

参考项目:https://github.com/lightSky/MaterialDesignCenter(这个项目就是下面文章作者做的)

参考文章:http://blog.csdn.net/xushuaic/article/details/40627389

http://blog.csdn.net/xushuaic/article/details/40627389

Material Designer的低版本兼容实现(一)—— 简介 目录相关推荐

  1. Material Designer的低版本兼容实现(五)—— ActivityOptionsCompat

    extends:http://www.cnblogs.com/tianzhijiexian/p/4087917.html 本文是对API中的方法做了介绍,如果想要看如何让这些方法兼容4.x或2.x可以 ...

  2. Material Designer的低版本兼容实现(十)—— CheckBox RadioButton

    ChekBox的用途我们就不必多说了,算是一个很古老的控件了,何其类似的还有RadioButton,这个东西因为我目前还没写出来,所以用了别人的一个lib,这下面会说到.顺便说一句,如果你的app是在 ...

  3. 微信小程序、微信低版本兼容

    基础库低版本兼容 小程序的功能不断的增加,但是旧版本的微信客户端并不支持新功能,所以在使用这些新能力的时候需要做兼容. 1版本号比较 js_getuserinfo() {// 4 13// 2.10. ...

  4. 安卓qq去小程序版本号与服务器不符,QQ小程序 低版本兼容

    小程序的功能不断的增加,但是旧版本的QQ客户端并不支持新功能,所以在使用这些新能力的时候需要做兼容. 开发者可以通过以下方式进行低版本的兼容: 1. 版本号比较 QQ客户端和小程序基础库的版本号风格为 ...

  5. Webpack-IE低版本兼容指南

    来源:https://github.com/zuojj/fedlab/issues/5 Webpack,Webpack 是一个前端资源加载/打包工具,现在版本已经 release 到 v2.6.1,今 ...

  6. 煦涵说Webpack-IE低版本兼容指南

    Webpack,Webpack 是一个前端资源加载/打包工具,现在版本已经 release 到 v2.6.1,今天的文章不直接介绍Webpack的API及使用,而是对最近项目开发中使用Webpack打 ...

  7. android 最低兼容版本,vue cli3 es6 安卓低版本 兼容问题

    问题: 1.在测试在三星 安卓7.0版本中报错,其他手机可以,低版本安卓手机出现白屏,(注释:如果静态div是正常的如图) 报错内容: `[vue-router] Failed to resolve ...

  8. oppo与vivo手机低版本兼容问题

    最近在做H5页面嵌套app的项目,有几个问题在这里说明一下 1. 不要用es6语法,为什么呢?部分oppo与vivo手机不兼容es6语法,就比如箭头函数,let,const,如果部分手机页面什么都没有 ...

  9. 前端学习(1424):ajax低版本兼容问题

    ajax.js // 引用expess框架 const express = require('express'); // 处理路径 const path = require('path');const ...

最新文章

  1. Python入门难吗?30年前的编程语言,为什么现在这么火?
  2. python的控件text的文本属性_只需6行Python代码就给图片加上水印——你一看就会了...
  3. 皮一皮:当和对象一家人一起看到羞羞电影对象却去上厕所时...
  4. 【控制】《鲁棒控制-线性矩阵不等式处理方法》-俞立老师-第5章-不确定系统的分析与综合
  5. 数据中心ECC值班长岗位提升工作总结
  6. 开始报名!首次阿里巴巴经济体双 11 云原生实践展示
  7. 操作Frame和IFrame中页面元素
  8. python客户端和服务端实验_结合服务器和客户端python
  9. 51单片机计算器_基于51单片机的倒计时温度检测报警器
  10. python连接数据库mysql失败_解决python连接mysql报错问题
  11. HDU2022 海选女主角【最值】
  12. [Spring-cloud-eureka]使用 gradle, spring boot,Spring cloud Eureka 搭建服务注册中心
  13. Python网络编程、爬虫之requests模块使用
  14. 原创:微信小程序调用【统一下单】、【支付】、【支付回调】api并处理请求...
  15. opencv 光流法
  16. matlab根据直方图求均值方差_matlab求方差,均值,均方差,协方差的函数
  17. Windows Server 无法启用 网络发现
  18. 蜗牛星际改内存_二、FreeNAS篇:使用U盘在蜗牛星际上安装FreeNAS
  19. 客户端dmesg_查看dmesg,会打出很多的日志“TCP: too many of orphaned sockets”
  20. 【随笔】记录一次简易的液位报警器的拆机修理

热门文章

  1. 常见移动机器人运动学模型
  2. Java实现插值查找算法 Insert search
  3. 不挂载 组件渲染_让你的 React 组件性能跑得再快一点「实践」
  4. __stdcall、__cdecl 、CALLBACK 几种函数修饰符
  5. oracle is ref cursor java_oracle cursor 用法总结
  6. php中cookie的工作原理,cookie工作原理_PHP教程
  7. MySQL 笔记8 -- 存储过程和索引
  8. rust(31)-枚举体
  9. vb.net2019-多线程并行计算(5)
  10. 【Python】Python入门-字符串初相识