文字保护纱-Material Design
Ok,关于这个Material Design 都快被说烂了,他被开发者越来越熟悉的程度,却与市场上的单薄身影形成了鲜明的对比,以至于每当我提及Material Design时就像祥林嫂附身一样。
有些人说,MD里有些看起来很泛,告诉你一个绝招,如果你是一个独立开发者,或者你的app对UI的要求相对较低,又或者你身边没有UI资源,你完全可以按照MD里的规范COPY一个相对看起来会很顺眼的应用,甚至完爆所谓的UI设计出的low设计。
今天,给大家介绍个干货,MD的官网地址就不粘贴了,有的自会有,没有的,你也看不了(要FQ),给个中文版的,感谢这些英文大牛(虽然翻译的有的不贴切),真心感谢,人要有感恩的心,地址如下:http://design.1sters.com/。
干货来了,文字保护纱-protection scrims,纱是纱布的纱,不是沙子的沙,附上地址:http://wiki.jikexueyuan.com/project/material-design/style/imagery.html
配个图更好说明
  

请注意昵称这一栏,背景有一段是过度色,这部分过度色的作用就是文字保护纱,有的时候在设计中会发现由于背景色彩的不确定性,会导致浮在上面的文字没有很好的对比度,为了保护文字的可读性,文字保护纱是这种设计感念便应用而生
这是我最近做的一款应用,我就是属于那种上面说的独立APP开发人员,没有什么好的UI资源,完全自己参考MD设计,完全自给自足,但是对于一个程序员,是不是不要要求太苛刻了呢,呵呵。
下面我就写一下如何通过程序代码实现这个文字保护纱,不需要设计切图哦,这多省钱。
必须是drawable
scrim_bottom.xml
  <?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android">
  <gradient
        android:angle="90"
        android:startColor="@color/translucent_scrim_bottom"
        android:centerColor="@color/translucent_scrim_bottom_center"
        android:endColor="@android:color/transparent"/>
  </shape>
很简单对不对?就是一个渐变而已,那么关键是渐变色值的选取,我引用一下原文:
暗纱(dark scrims)理想的透明度应当在 20%-40% 之间,亮纱(light scrims)理想的透明度应当在 40%-60% 之间,都要视具体内容来定。
我们知道在Android中表示颜色是用16进制值来表示,比如白色就是#ffffff,六位对不对,那么如果给白色加透明度,就是在在开头加上2位来表示透明度,前两位:00表示完全透明,ff表示完全不透明,比如#33ffffff,有了透明度的色值就是八位的,对不对?
暗纱,就是黑色的20%-40%之间,我们将这个值换算成透明度色值(这个就是某些做UI的都不知道怎么算呢,确切的说没有这个概念,嘿嘿),那么计算公式如下:
255 * % 转换 16进制即可,例如要20%的透明度, 255 * 20% = 51, 51转换为16进制为33。那么一个20%透明度的黑的写法为#33000000。
那么计算公式会了,我们就可以按照自己的需求来定制透明度了,如果你的UI只会告诉你百分比,你也会自己计算的不是吗?
数值我就不黏贴了,因为在实际的使用中20%到40%的百分比起不到很到的效果,要说明一点,不要照本宣科,要灵活运用,体会精神!
文章做了一次更新,标题有错别字,修改一些笔误,哭~
文字保护纱-Material Design的更多相关文章
- Material Design学习笔记
		
Wiki->移动开发->Android->Material Design-原质化设计 (友情链接:http://wiki.jikexueyuan.com/project/materi ...
 - Material Design Lite,简洁惊艳的前端工具箱。
		
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...
 - Material Design Lite,简洁惊艳的前端工具箱 之 交互组件。
		
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接, 博客地址为http://www.cnblogs.com/jasonnode/ . 网站上有对应 ...
 - Material Design学习
		
前言: 最为一个用习惯了bootstrap的前端小菜,今天偶然听闻material design 这个从未听闻的前端框架,带着好奇开始了新的尝试,并将bootstrap跟material design ...
 - Android5.0新特性——Material Design简介
		
Material Design Material Design简介 Material Design是谷歌新的设计语言,谷歌希望寄由此来统一各种平台上的用户体验,Material Design的特点是干 ...
 - Material Design For Xamarin.Forms
		
最近,升级 Xamarin.Forms 到最新版本后,发现Droid 项目下引入了以下几个依赖包: Xamarin.Android.Support.DesignXamarin.Android.Supp ...
 - Android Material Design简单使用
		
吐槽 作为一个 Android developer,没有什么比拿着 UI 设计的一堆 iOS 风格的设计 来做需求更恶心的了,基本所有空间都要照着 iOS 来画一遍,Material Design 辣 ...
 - Android入门3:从Toolbar到Material Design
		
在Android5.0(API 21)之后,Toolbar被Google推广,逐渐走入大家视野.具体关于Actionbar和Toolbar的对比就不多啰嗦了,跟着潮流走是没错的.下面先上张简单的效果图 ...
 - Android Material Design之Toolbar与Palette
		
转:http://blog.csdn.net/jdsjlzx/article/details/41441083 前言 我们都知道Marterial Design是Google推出的全新UI设计规范,如 ...
 
随机推荐
- LNMP安装WordPress3.4.2看不到主题解决方法
			
喜欢LNMP配置环境的朋友,又是wordpress建立的博客程序,安装之后发现一个问题在网站后台看不到模板主题,重新下载了一款新的主题也查看不了.开始以为是程序的问题,于是我重新下载新版本的WordP ...
 - php5.6安装
			
# yum --enablerepo=remi,remi-php56 install php-fpm php-common php-mysql php-opcache php-pear php-gd ...
 - JS 打字机效果
			
请点我,查看效果 我送过你礼物 试过对你不管不顾 我挂过你电话 也曾为你哭到沙哑 我曾经为你去学做过晚餐 曾觉得你的关心太烦 也曾为你起得很早 试过狠心把你甩掉 试过偷偷拍你的微笑 也曾经把你电话删掉 ...
 - JS和jQuery获取节点的兄弟,父级,子级元素
			
原文转自http://blog.csdn.net/duanshuyong/article/details/7562423 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的 ...
 - width:100%缩小窗口时背景图片出现空白bug
			
页面容器(#wrap)与页面头部(#header )为100%宽度.而内容的容器(#page)为固定宽度960px.浏览窗口缩小而小于内容层宽度时会产生宽度理解上的差异.如下图所示窗口宽度大于内容层宽 ...
 - php实现base64编码
			
工作需要,想弄一个加密的串,就想仿照base64的编码方式,写一个加密的方法,所以就有了下面这个用php实现的base64的代码 <?php /** * Base64 编码/解码 * @auth ...
 - 简明解释算法中的大O符号
			
伯乐在线导读:2009年1月28日Arec Barrwin在StackOverflow上提问,“有没有关于大O符号(Big O notation)的简单解释?尽量别用那么正式的定义,用尽可能简单的数学 ...
 - 用nodejs,express,ejs,mongo,extjs实现了简单了网站后台管理系统
			
源代码下载地址:http://download.csdn.net/detail/guoyongrong/6498611 这个系统其实是出于学习nodejs的目的而改写的系统. 原来的系统前端使用了ex ...
 - linux系统下root用户和普通用户的时区不一致
			
1. 发现这个问题是在root下执行 date -R 和 普通用户下执行 date -R,发现时区不一致 2. 在一些linux机器下,发现是一致的 3. 什么原因呢?找了半天,最后发现 时区一致的机 ...
 - h.264直接预测
			
直接预测是B帧上一种独有的预测方式,其中直接预测又分为两种模式: 时域直接模式(temporal direct).空域直接模式(spatial direct). 在分析这两种模式之前,有一个前提概念需 ...