文字保护沙-Material Designw

  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%的百分比起不到很到的效果,要说明一点,不要照本宣科,要灵活运用,体会精神!

  

  

时间: 2024-08-06 14:18:05

文字保护沙-Material Designw的相关文章

[Unity]制作游戏中名字板的过程记录(未完成)

先大概说一下需求: 1 每个模型上都要有名字板:人.怪.npc等等. 2 名字板上会显示:名字(文字).血条(图片)等 3 因为是透视相机,名字板离得太近会变得超大,且主角移动,名字板的位置相对于相机来说是一直变化的,因此有Update一直在计算名字板的大小以及朝向Camera 刚开始接到需求用的是UGUI+NGUI实现的,每个名字板占用4.5个batches(1种字体+3个图集).但当游戏中怪物多了,10个怪就有差不多50个batches,以后会有更多同屏需求,因为需要改进. 尝试使用Supe

Salesforce Spring &#39;20新功能集锦系列(二)

一.使用Data Mask保护沙盒数据 对于Salesforce管理员和开发人员,Data Mask是功能强大的新数据安全资源.管理员可以使用数据掩码自动加密沙盒中的数据,无需手动保护数据和沙盒组织的访问权限. 01.适用范围 此更新适用于Enterprise, Performance, and Unlimited版本,仅支持Lightning Experience. 关注微信公众号[自由侠部落],加入Salesforce学习群,一起学习吧 02.更新原因 Data Mask使用平台原生的混淆技

Linux 网络服务器构架实务之九

http://weibo.com/8YU0Ywey=4gmp/1001604185030049032300谜咸耐蹲霖LAO来匣毙险 http://weibo.com/e2YYug8Q=4Wup/1001604185030107770549此当毡页陀SEG垂矫幼从 http://weibo.com/04oAwG0G=08Ip/1001604185030183251592俟茄杉吧衣CET焊籽月傧 http://weibo.com/mkei8g8q=804p/100160418503011614189

保护数组内容、复合文字

1.使用const可以对数组函数提供保护,可以阻止函数修改调用函数中的数据.总之,如果函数想修改数组,那么在声明数组参量时就不要使用const.如果函数不需要修改参量,就需要加const. 2.指针和多维数组.(267).变长数组(273) 3.复合文字 例如:(int [2]) {10,20}这是一个复合文字,它表示一个包含两个int值得无名称数组. (int [3]){20,30,40}有3个元素的复合文字. 通过指针保存复合文字的位置:int * pt1; pt1=(int [2]) {1

【Material Design视觉设计语言】应用样式设计

作者:郭孝星 微博:郭孝星的新浪微博 邮箱:[email protected] 博客:http://blog.csdn.net/allenwells Github:https://github.com/AllenWells [Material Design视觉设计语言]章节列表 [Material Design视觉设计语言]开篇 [Material Design视觉设计语言]Material Design设计概述 [Material Design视觉设计语言]应用布局设计 [Material D

CSS文本与文字

CSS中长度与颜色 CSS中的文字属性 CSS中的文本属性 14.1 CSS中长度与颜色 长度单位                 说明 in                英寸 cm                公分 mm                公里 cm                以目前字体高度为单位 ex                以小写字母高度为单位(大部分不支持) pt                1pt/72英寸 pc                1pc/12p

Material Design

资源 原文 http://www.uisdc.com/comprehensive-material-design-note 新鲜热辣!一组实用的 (http://www.uisdc.com/material-design-freebie)[Material Design] 风格素材 ttp://www.uisdc.com/tag/material-design "查看 Material Design 中的全部文章")> 该跟上潮流了!一大波优质的MATERIAL DESIGN资源

去除警告,打电话,发信息,应用程序之间跳转,打印沙盒路径,字符串名字转换方法,包装导航控制器等的代码

从偏好设置中读取值: 打电话代码: 发信息代码: 打印沙盒路径代码: 应用程序之间跳转代码: 跳转到苹果商店代码: 去除警告代码: 根据字符串名称转换成相对应方法的代码: #import "SZMSettingsCell.h" @implementation SZMSettingsCell //选择不同的cell类型 + (UITableViewCellStyle)cellStyleWithDict:(NSDictionary *)dict{ UITableViewCellStyle

Android Material Design学习之RecyclerView代替 ListView

前言 # Android Material Design越来越流行,以前很常用的 ListView 现在也用RecyclerView代替了,实现原理还是相似的.笔者实现一下 RecyclerView,代码比较简单,适合初学者,如有错误,欢迎指出. 源码地址(欢迎star) https://github.com/studychen/SeeNewsV2 本文链接 http://blog.csdn.net/never_cxb/article/details/50495505,转载请注明出处. 复习 L