Android UI设计之Color搭配

前言:

       

    其实一个App设计的怎样,其UI设计很重要,然而在UI设计中,颜色的选择和搭配非常的重要!


进入主题:


      这里重要从一些案例来讲颜色的选择和搭配演要注意的地方!


颜色板:

  • Red500#F44336
  • 50#FFEBEE
  • 100#FFCDD2
  • 200#EF9A9A
  • 300#E57373
  • 400#EF5350
  • 500#F44336
  • 600#E53935
  • 700#D32F2F
  • 800#C62828
  • 900#B71C1C
  • A100#FF8A80
  • A200#FF5252
  • A400#FF1744
  • A700#D50000
  • Pink500#E91E63
  • 50#FCE4EC
  • 100#F8BBD0
  • 200#F48FB1
  • 300#F06292
  • 400#EC407A
  • 500#E91E63
  • 600#D81B60
  • 700#C2185B
  • 800#AD1457
  • 900#880E4F
  • A100#FF80AB
  • A200#FF4081
  • A400#F50057
  • A700#C51162
  • Purple500#9C27B0
  • 50#F3E5F5
  • 100#E1BEE7
  • 200#CE93D8
  • 300#BA68C8
  • 400#AB47BC
  • 500#9C27B0
  • 600#8E24AA
  • 700#7B1FA2
  • 800#6A1B9A
  • 900#4A148C
  • A100#EA80FC
  • A200#E040FB
  • A400#D500F9
  • A700#AA00FF
  • Deep Purple500#673AB7
  • 50#EDE7F6
  • 100#D1C4E9
  • 200#B39DDB
  • 300#9575CD
  • 400#7E57C2
  • 500#673AB7
  • 600#5E35B1
  • 700#512DA8
  • 800#4527A0
  • 900#311B92
  • A100#B388FF
  • A200#7C4DFF
  • A400#651FFF
  • A700#6200EA
  • Indigo500#3F51B5
  • 50#E8EAF6
  • 100#C5CAE9
  • 200#9FA8DA
  • 300#7986CB
  • 400#5C6BC0
  • 500#3F51B5
  • 600#3949AB
  • 700#303F9F
  • 800#283593
  • 900#1A237E
  • A100#8C9EFF
  • A200#536DFE
  • A400#3D5AFE
  • A700#304FFE
  • Blue500#2196F3
  • 50#E3F2FD
  • 100#BBDEFB
  • 200#90CAF9
  • 300#64B5F6
  • 400#42A5F5
  • 500#2196F3
  • 600#1E88E5
  • 700#1976D2
  • 800#1565C0
  • 900#0D47A1
  • A100#82B1FF
  • A200#448AFF
  • A400#2979FF
  • A700#2962FF
  • Light Blue500#03A9F4
  • 50#E1F5FE
  • 100#B3E5FC
  • 200#81D4FA
  • 300#4FC3F7
  • 400#29B6F6
  • 500#03A9F4
  • 600#039BE5
  • 700#0288D1
  • 800#0277BD
  • 900#01579B
  • A100#80D8FF
  • A200#40C4FF
  • A400#00B0FF
  • A700#0091EA
  • Cyan500#00BCD4
  • 50#E0F7FA
  • 100#B2EBF2
  • 200#80DEEA
  • 300#4DD0E1
  • 400#26C6DA
  • 500#00BCD4
  • 600#00ACC1
  • 700#0097A7
  • 800#00838F
  • 900#006064
  • A100#84FFFF
  • A200#18FFFF
  • A400#00E5FF
  • A700#00B8D4
  • Teal500#009688
  • 50#E0F2F1
  • 100#B2DFDB
  • 200#80CBC4
  • 300#4DB6AC
  • 400#26A69A
  • 500#009688
  • 600#00897B
  • 700#00796B
  • 800#00695C
  • 900#004D40
  • A100#A7FFEB
  • A200#64FFDA
  • A400#1DE9B6
  • A700#00BFA5
  • Green500#4CAF50
  • 50#E8F5E9
  • 100#C8E6C9
  • 200#A5D6A7
  • 300#81C784
  • 400#66BB6A
  • 500#4CAF50
  • 600#43A047
  • 700#388E3C
  • 800#2E7D32
  • 900#1B5E20
  • A100#B9F6CA
  • A200#69F0AE
  • A400#00E676
  • A700#00C853
  • Light Green500#8BC34A
  • 50#F1F8E9
  • 100#DCEDC8
  • 200#C5E1A5
  • 300#AED581
  • 400#9CCC65
  • 500#8BC34A
  • 600#7CB342
  • 700#689F38
  • 800#558B2F
  • 900#33691E
  • A100#CCFF90
  • A200#B2FF59
  • A400#76FF03
  • A700#64DD17
  • Lime500#CDDC39
  • 50#F9FBE7
  • 100#F0F4C3
  • 200#E6EE9C
  • 300#DCE775
  • 400#D4E157
  • 500#CDDC39
  • 600#C0CA33
  • 700#AFB42B
  • 800#9E9D24
  • 900#827717
  • A100#F4FF81
  • A200#EEFF41
  • A400#C6FF00
  • A700#AEEA00
  • Yellow500#FFEB3B
  • 50#FFFDE7
  • 100#FFF9C4
  • 200#FFF59D
  • 300#FFF176
  • 400#FFEE58
  • 500#FFEB3B
  • 600#FDD835
  • 700#FBC02D
  • 800#F9A825
  • 900#F57F17
  • A100#FFFF8D
  • A200#FFFF00
  • A400#FFEA00
  • A700#FFD600
  • Amber500#FFC107
  • 50#FFF8E1
  • 100#FFECB3
  • 200#FFE082
  • 300#FFD54F
  • 400#FFCA28
  • 500#FFC107
  • 600#FFB300
  • 700#FFA000
  • 800#FF8F00
  • 900#FF6F00
  • A100#FFE57F
  • A200#FFD740
  • A400#FFC400
  • A700#FFAB00
  • Orange500#FF9800
  • 50#FFF3E0
  • 100#FFE0B2
  • 200#FFCC80
  • 300#FFB74D
  • 400#FFA726
  • 500#FF9800
  • 600#FB8C00
  • 700#F57C00
  • 800#EF6C00
  • 900#E65100
  • A100#FFD180
  • A200#FFAB40
  • A400#FF9100
  • A700#FF6D00
  • Deep Orange500#FF5722
  • 50#FBE9E7
  • 100#FFCCBC
  • 200#FFAB91
  • 300#FF8A65
  • 400#FF7043
  • 500#FF5722
  • 600#F4511E
  • 700#E64A19
  • 800#D84315
  • 900#BF360C
  • A100#FF9E80
  • A200#FF6E40
  • A400#FF3D00
  • A700#DD2C00
  • Brown500#795548
  • 50#EFEBE9
  • 100#D7CCC8
  • 200#BCAAA4
  • 300#A1887F
  • 400#8D6E63
  • 500#795548
  • 600#6D4C41
  • 700#5D4037
  • 800#4E342E
  • 900#3E2723
  • Grey500#9E9E9E
  • 50#FAFAFA
  • 100#F5F5F5
  • 200#EEEEEE
  • 300#E0E0E0
  • 400#BDBDBD
  • 500#9E9E9E
  • 600#757575
  • 700#616161
  • 800#424242
  • 900#212121
  • Blue Grey500#607D8B
  • 50#ECEFF1
  • 100#CFD8DC
  • 200#B0BEC5
  • 300#90A4AE
  • 400#78909C
  • 500#607D8B
  • 600#546E7A
  • 700#455A64
  • 800#37474F
  • 900#263238
  • Black#000000
  • White#FFFFFF



















































案例小提示:



Floating accent button using the accent color




Switch using the accent color




Do.

Only use the accent color for body text to accent a web link.



Don't.

Don’t use the accent color for body text color.



Do.

Use the accent color for your primary action button and components like

 switches or sliders.



Don't.

Don’t use the accent color for app bars or larger areas of color. Avoid using the same color for the floating action button and the background.





Do.

Use a fallback accent color over background colors that are too light or too dark.




Don't.

Don’t use the accent color over a background color if there isn’t enough contrast.






 



The toolbar uses the 500 version of indigo, while the status bar uses the 700 version.





When editing a folder name, the entire title and description area uses indigo as the background color.



最后的最后:


           笔者其实也觉得除了上面的一些好的颜色搭配外,红色和白色,浅绿色和白色搭配起来也非常的好,但是也注意颜色占的比重以及参杂一些其他的颜色即可!


  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值