文字保护纱-Material Design

转载 2015年11月17日 19:34:24

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%透明度的黑的写法为#33ffffff。

那么计算公式会了,我们就可以按照自己的需求来定制透明度了,如果你的UI只会告诉你百分比,你也会自己计算的不是吗?

数值我就不黏贴了,因为在实际的使用中20%到40%的百分比起不到很到的效果,要说明一点,不要照本宣科,要灵活运用,体会精神!

原文:http://www.cnblogs.com/rioder/p/4971222.html

相关文章推荐

基于Material Design设计的分享文字图片的APP

Material Design–Google在I/O 2014上推出了新的设计语言,核心设计原则就是隐喻,视觉设计,动画。引用基友的话就是,遵循用户体验来实现一些让用户用起来舒适满意的动画效果及设计。...
  • tyk0910
  • tyk0910
  • 2016年03月15日 11:31
  • 9331

谷歌material-design图标源文件

  • 2015年08月12日 00:05
  • 9.12MB
  • 下载

手把手教你打造一个Material Design风格的App(一)

你应该听说过Android的Material Design,它是在Android 5.0(Lollipop)版本引入的。在Material Design中还引入了很多新东西,比如Material Th...

material design的几种布局

  • 2016年04月29日 18:31
  • 26.74MB
  • 下载

直接拿来用!十大Material Design开源项目

介于拟物和扁平之间的Material Design自面世以来,便引起了很多人的关注与思考,就此产生的讨论也不绝于耳。本文详细介绍了在Android开发者圈子里颇受青睐的十个Material Desig...

Material Design的控件使用

  • 2015年12月14日 16:31
  • 17.38MB
  • 下载

material design android模板-PSD

  • 2015年10月16日 11:38
  • 10.34MB
  • 下载

【Material Design视觉设计语言】UI组件设计(三):纸片

作者:郭孝星 微博:郭孝星的新浪微博 邮箱:allenwells@163.com 博客:http://blog.csdn.net/allenwells Github:https://githu...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:文字保护纱-Material Design
举报原因:
原因补充:

(最多只允许输入30个字)