# Color 颜色 ## 颜色构成 颜色是指UI界面设计中使用的色彩体系，其中包括：Brand品牌色、Neutural中立色、Functional功能色以及衍生出的UI调色板四个部分。 ## 品牌色 代表品牌对外形象及VI识别。主色的数量根据品牌特性制定，可以1个也可以多个。用于主Button、主搜、价格、ICON等需要突出品牌特征的地方。次级品牌色层级低于品牌，多用与子品牌、子服务、行业等衍生业务，数量≥0。 ### 1. 主品牌色 品牌核心颜色，代表品牌对外形象及VI识别。 ![](https://4166812807-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9yQCG59pKf7sUhpNI5%2F-L9yQG5SYkac0gOXDgkm%2F-L9yQJGlq_8m5DiyVTiE%2F1.png?generation=1523613274448032\&alt=media) 1688APP UI调色板 ![](https://4166812807-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9yQCG59pKf7sUhpNI5%2F-L9yQG5SYkac0gOXDgkm%2F-L9yQJGqGtQnVbRPVPqf%2F2.png?generation=1523613266589705\&alt=media) ### 2. 品牌副色 ![](https://4166812807-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9yQCG59pKf7sUhpNI5%2F-L9yQG5SYkac0gOXDgkm%2F-L9yQJGx5L5qQehpDI-o%2F3.png?generation=1523613274463866\&alt=media) ## 中立色 灰或饱和度低的颜色（如蓝灰）用与界面设计中背景、边框、分割线、ICON、中立插图等。 ![](https://4166812807-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9yQCG59pKf7sUhpNI5%2F-L9yQG5SYkac0gOXDgkm%2F-L9yQJH5eJY-j-xL1ztW%2F4.png?generation=1523613276191229\&alt=media) ## 功能色 用于UI设计中需要引起注意、信息提示的设计。如：流程中的进度、提醒、成功等。 ![](https://4166812807-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9yQCG59pKf7sUhpNI5%2F-L9yQG5SYkac0gOXDgkm%2F-L9yQJHCvvb5J3ILzyd8%2F5.png?generation=1523613275083763\&alt=media) ## 颜色使用说明 ### 品牌色/Brand-Color 品牌色主要体现在logo，icon、主button，信息的高亮区域或ta等文字链接，配图类设计等处。 ![](https://4166812807-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9yQCG59pKf7sUhpNI5%2F-L9yQG5SYkac0gOXDgkm%2F-L9yQJHOsyDHCNmmy0iE%2F6.png?generation=1523613275107859\&alt=media) ### 中立色/Neutral-Color 1、界面色 界面色是界面组成无线界面的基本色彩，这些颜色规定了线、面、投影、背景等设计要素。 ![](https://4166812807-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9yQCG59pKf7sUhpNI5%2F-L9yQG5SYkac0gOXDgkm%2F-L9yQJH_n4tq8KdF8NXv%2F7.png?generation=1523613257138381\&alt=media) ## UI配色原则 通过有效地使用对比可以使你的内容更加清晰从而让阅读变得轻松,同时也应考虑到有颜色识别障碍人群的需求。在考虑对比颜色的选择时建议两种颜色对应标签数值的差要大于等于5。 ![](https://4166812807-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9yQCG59pKf7sUhpNI5%2F-L9yQG5SYkac0gOXDgkm%2F-L9yQJHkDH4rv_Zgv-JU%2F8.png?generation=1523613266566141\&alt=media) 文字颜色使用要保证辨识度，深色背景使用浅色文字，浅色背景使用深色文字。 ![](https://4166812807-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9yQCG59pKf7sUhpNI5%2F-L9yQG5SYkac0gOXDgkm%2F-L9yQJHs0bh23CbDk39m%2F11.png?generation=1523613257031221\&alt=media) ## 色彩使用比例 不要过度使用颜色。颜色总是可以抓住人们的视线，但过度使用却会往往会人们忽视主体内容，因此，仅在需要进行突出提示的地方，如重要的按钮以及需要突出的状态时，使用颜色。一般建议，色彩的配色比例原则为75%，20%，5%，即主色或强调色占20%左右，具体运用的时候可参考。PS：其他可为辅助色等。 ![](https://4166812807-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9yQCG59pKf7sUhpNI5%2F-L9yQG5SYkac0gOXDgkm%2F-L9yQJIC4uf1yv8n0lfG%2F9.png?generation=1523613275090222\&alt=media) ## 色彩与交互 设计元素本身由于交互行为会引发一系列细微的视觉变化，而元素本身的颜色变化有时也能很好的实现这一目的。在颜色上就相应的叠加10%黑色表示PRESS状态。 ![](https://4166812807-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9yQCG59pKf7sUhpNI5%2F-L9yQG5SYkac0gOXDgkm%2F-L9yQJIO8uhidSrVXXuP%2F10.png?generation=1523613276223471\&alt=media)