文字保护纱-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 之Style(三)
1.色彩 Material Design (实质化设计)中的色彩灵感来自大胆的颜色.阴影和高光,与寂静的环境形成鲜明的对比,更能让设计获得活力. 1.1 调色板 此调色板包含主要和重点颜色,可用于说明 ...
- 2017 Material design 第三章第三节《图像》
三.图像(Imagery) 图像不仅是一种装饰,它还是一种能够帮助用户理解以及区分你产品的强大工具. 大胆.形象.有意义的图像能够帮助你吸引用户. 无论气氛是压抑.柔和还是明亮.多彩,以下的设计准则以 ...
- android5.0后新特性修改标题头,Android5.0中Material Design的新特性
Material Design简介 Material Design是谷歌新的设计语言,谷歌希望寄由此来统一各种平台上的用户体验,Material Design的特点是干净的排版和简单的布局,以此来突出 ...
- Material Design 设计规范总结(2)
本文是Material Design设计规范总结的第二部分,是进行UI设计与前端开发的必备参考资料. 八.布局 (1)所有可操作元素最小点击区域尺寸:48dp X 48dp. (2)栅格系统的最小单位 ...
- Material Design Lite,简洁惊艳的前端工具箱。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...
- mint ui tabbar选中后怎么改变icon图标_UI全书(下)读后梳理:iPhone设计规范和Material Design规范...
本文转载自简书,作者:Bystander7原文链接: https://www.jianshu.com/p/507f0fcb0457 - UI全书(下)<UI设计师进阶完全指南>读后梳理:i ...
- 2017 Material design 第四章第三节《度量和参考线》
三.度量和参考线(Metrics & keylines) 基线网格(Baseline grids) 无论是移动端.平板端还是桌面端上,所有的应用组件都对齐至8dp单位的方形基线网格上.但工具栏 ...
- Material Design学习之 Snackbars(详细分析,Toast的加强版)
转载请注明出处:王亟亟的大牛之路 昨天把Material Design Button部分的内容分析完了,不知道大家理解了他的实现没有.如果没看的话,可以看下,传送门:http://blog.csdn. ...
- Android Material Design之Toolbar与Palette
转:http://blog.csdn.net/jdsjlzx/article/details/41441083 前言 我们都知道Marterial Design是Google推出的全新UI设计规范,如 ...
最新文章
- Ph.D. Grind 读后感- by Liangjun
- 11 款最好 CSS 框架 让你的网站独领风骚
- 直线分割平面问题(数学归纳法)
- 机器学习实践笔记(二)EOF
- DOS命令教程 第二章——ping命令
- python将两列内容合并_在pandas/python中,将两列合并为同一数据帧中的一列
- 神仙打架!清华公布2020特奖候选人名单,有人三篇顶会一作,还有人...
- Flowable流程设计器的使用
- Forever young
- webSocket实现聊天室功能
- 如何通过软文营销提高用户黏性 做好品牌推广和营销宣传
- Java web(简单的servlet计算器)网页计算器
- 手机连接电脑 不显示android phone
- 数学与泛型编程(6)编程的基本概念
- Ubuntu系统下安装Sailfish的SDK
- STM8系列5大主流成员(S,L,T,AF,AL)
- 你是个成熟的项目了,该学会自动构建自动部署了
- swiper分页器踩坑
- 二进制补码乘法除法_二进制乘法和除法
- 写在《Programming Windows, 6th Edition》译文之前
热门文章
- 使用jquery控制只能输入数字,并且关闭输入法
- tomcat springmvc 图片404不显示
- mysql emoy表情_GitHub - PandaQAQ/PandaEmoView: emoji gif 表情图文混排,仿微信表情输入...
- Centos文件清理
- tuts4you 注册_设计和开发完整的网站(Tuts + Mini系列,第3页)
- vsCode保存后,浏览器不会刷新
- 【飞控开发基础教程6】疯壳·开源编队无人机-SPI(六轴传感器数据获取)
- Untiy添加水印并保存(包含文字转图片并打水印)
- 想在Windows上使用getopt,我教你原地起飞
- Linux命令学习之一