美文网首页AndroidandroidAndroid UI
[Material Design]从颜色说起

[Material Design]从颜色说起

作者: Rye2016 | 来源:发表于2017-02-24 19:07 被阅读1822次
    • 从三类颜色说起------Primary color,Secondary color,Accent color
      先打开AndroidStudio,新建一个项目,在res/values/color中有如下代码


      res/values/color

    谷歌在MD官方提到了在设计中的三类颜色Primary color,Secondary color,和Accent color:

    Primary color Secondary color Accent color

    Primary color其实就是App的主色调,参考谷歌官方贴出的调试板,推荐饱和度为500,也就是下图中最上面的色彩

    谷歌官方调色板其一

    对比第一幅图中的colorPrimary值正是#3F51B5,Primary color作为主色调,应该在屏幕和组件中最广泛的使用。
    colorPrimary了解了,colorPrimaryDark又是干什么的呢?这也就是接下来说的Second color(第二颜色???),应该翻译成辅助颜色才正确,作为辅助颜色,颜色应该与主色调保持相似,即在主色调的基础上加深或者变浅,官方并未明确具体使用多少饱和度的颜色(调色板给出了九种(除开500)为开发者提选择),下图是官方的介绍Secondary color时的一个插图

    MD设计官方插图

    值得注意的是这里的Second color有两种颜色,除了饱和度为700的#303F9F还有一个饱和度为100的浅蓝色,中间是Primary color。Second color起过度的作用,体现层次感。比如在状态栏(谷歌推荐饱和度为700)中的使用。当然你也可以在你的App中想其过度的地方使用辅助颜色。比如下面这幅图:

    MD设计官方插图

    最后一个也就是colorAccent ,翻译叫做强调色,其实在谷歌官方的调色版中有这样一排颜色

    MD设计官方插图

    饱和度从50上升到900然后就突然变成了A100,中间似乎还有点隔断,故意区分开来,其实这个A也就是colorAccent中Accent的缩写,没错,这就是强调色,验证这个的是初始项目中的粉色#FF4081正是粉色的强调色

    MD设计官方插图

    强调色的作用故名思义就是起强调作用(一般颜色都比较艳丽,比如这里的粉色),在Progressbar,一些重要链接 ,光标,选中文字颜色等中使用。

    MD设计官方插图

    有时会遇到上图右图中的问题,这时候就需要用亮色的强调色代替。

    掌握了上面三类颜色,就能写出符合MD设计的主题了,以此来达到规范的目的

    • 不可不提的不透明度
      在App开发中会接触到不同的数据,在展示这些数据过程中,有个优先级的问题,即哪些数据是最主要的,应该强调展示,哪些次之。那么谷歌是怎么做的呢?
    亮色背景下 暗色背景下

    可以看到文字的不透明度被分成了3个层次,有点两点需要注意

    1. 在暗色和亮色背景下各层成的透明度是不同的
    2. 主色调与强调色的不透明度都是100%

    参考Material Design官方写的一篇文章,个人非常喜欢MD设计,刚开始写博客,不知道写什么好,于是从MD设计写了。

    嗯,2017.2.24,第一篇博客。

    相关文章

      网友评论

      • 杭_02ab:感谢,在这里找到了配色的RGB,马上就用上了
      • f66a190500cc:关注,自从用了沉浸式,感觉人都傻了,各种bug
        f66a190500cc:@Rye2016 在没有edittext的时候 都是好的,如果用了 就容易出现各种问题
        Rye2016: @我们小区车队队长 在代码中加入if(Build.VERSION.SDK_INT > Build.VERSION_CODES.KITKAT){
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
        }
        再在xml中把view设置fitsystemwindow为true就可以了,一般没问题
      • 四爷在此:很喜欢Material Design的配色和动画效果
        Rye2016: @四爷在此 恩,我也是😊

      本文标题:[Material Design]从颜色说起

      本文链接:https://www.haomeiwen.com/subject/pbcmwttx.html