"

千亿体育手机登录版

                                              "
                                              经典案例推广高端H5电商设计公司联系报价
                                              QQ联系
                                              微信联系
                                              手机联系
                                              QQ联系
                                              微信联系
                                              手机联系

                                              千亿体育手机登录版网站设计配色篇---支付宝设计的配色规范

                                              发布时间:2018-04-09
                                              发布者:eidea
                                              浏览次数:11477

                                              一、色彩 DNA 文档

                                              概述

                                              根据品牌多年来的设计沉淀以及目前业务的各个使用场景千亿体育手机登录版,我们对品牌色彩的DNA进行了重新的探索和定义千亿体育手机登录版。根据我们的五个关键词安全千亿体育手机登录版、便捷、专业千亿体育手机登录版千亿体育手机登录版、信赖千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版、想象力千亿体育手机登录版,我们进行了其对应的色彩感知倾向。

                                              • 安全 – 中饱和度千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版、中明度千亿体育手机登录版、偏冷的蓝色
                                              • 便捷 – 明亮的天空蓝千亿体育手机登录版千亿体育手机登录版、平静色绿色
                                              • 专业 – 深色系千亿体育手机登录版、低饱和度
                                              • 信赖 – 低明度千亿体育手机登录版、低饱和度千亿体育手机登录版,蓝色偏正蓝色
                                              • 想象力 – 神秘且有空间感的渐变

                                              在选取辅助色时千亿体育手机登录版,色彩的选取需稳重,颜色属性明确千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版,色彩的明度和纯度不宜过高。在品牌色稳定的情况下千亿体育手机登录版,应选取丰富的辅助色千亿体育手机登录版,来支持业务的拓展;也可用辅助色区分功能产品千亿体育手机登录版千亿体育手机登录版,提升产品体验的流畅度和认知千亿体育手机登录版千亿体育手机登录版,减少用户搜索时间千亿体育手机登录版千亿体育手机登录版;选取颜色的时候,需在用户的认知范围内。

                                              通过关键词的色彩研究,我们重新定义了品牌色千亿体育手机登录版千亿体育手机登录版、辅助色以及一些延伸色彩的取色规则和使用规则。

                                              二千亿体育手机登录版、品牌色

                                              品牌色是表现公司文化千亿体育手机登录版、产品特性最直观的视觉元素之一千亿体育手机登录版。前期千亿体育手机登录版千亿体育手机登录版,我们对自己的产品关键词进行了拆分千亿体育手机登录版,并对每一个关键词和对应的色彩性格进行了剖析千亿体育手机登录版,得到了品牌色与其辅助色色系的定位千亿体育手机登录版千亿体育手机登录版。

                                              蓝色,是最冷的色彩千亿体育手机登录版,使人联想到天空和大海千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版,表现出冷静、理智千亿体育手机登录版、沉着稳重的气质千亿体育手机登录版,也能充分体现支付宝的安全千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版、专业千亿体育手机登录版千亿体育手机登录版、信赖这三个关键词千亿体育手机登录版,其多变的天蓝、孔雀蓝、蓝紫等千亿体育手机登录版,分别给人安静放松千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版、神秘且富有想象力的感觉。

                                              目前品牌色的色值的 H S B = 205 93 91千亿体育手机登录版,为方便后面辅助色的取色范围千亿体育手机登录版,将品牌色的色相加减15千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版,可得到如图「 品牌色 – 色彩配图1」的一条色带。

                                              △ 品牌色 – 色彩配图1

                                              根据品牌色的色相,每加减15得到一个同色系色相(24色的360°色环上千亿体育手机登录版,每一个色相的角度为15°)千亿体育手机登录版,最终得到图上24色。

                                              1. 支付宝配色所遵循的主要原则

                                              同色系配色为主导,多色搭配为辅。

                                              同色系为统一的色相千亿体育手机登录版,使用中可以加深品牌色的感知千亿体育手机登录版,可以让界面更有层次千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版,同时可以让界面保持色彩上的一致性千亿体育手机登录版。由于业务的多样化千亿体育手机登录版千亿体育手机登录版,我们需要多色搭配为辅千亿体育手机登录版千亿体育手机登录版。多色的辅助颜色千亿体育手机登录版,也可称之为功能色千亿体育手机登录版,可设定不同的任务属性和情感表达千亿体育手机登录版,再搭配中性色黑白灰,赋予更多的变化和层次千亿体育手机登录版。

                                              两种配色通过主次千亿体育手机登录版千亿体育手机登录版、使用比例,可灵活运用在业务的各个场景中千亿体育手机登录版,具有非常好的延展性。

                                              我们不仅需要通过品牌色来传达企业的愿景和表现产品的特点千亿体育手机登录版,还需要通过辅助色来帮助我们在整个巨大的产品体系中千亿体育手机登录版千亿体育手机登录版,更能清晰传达出带有情感化色彩的一些理念千亿体育手机登录版。我们既要通过常规功能制定一些通用性的辅助色彩,也要根据目前产品业务的使用场景千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版,增加多色相的辅助配色。

                                              2. 辅助色

                                              辅助色起到平衡主色的冲击效果,减轻品牌色对用户产生的视觉疲劳千亿体育手机登录版千亿体育手机登录版,能一定量的分散视觉。

                                              在我们整个客户端的色彩使用中千亿体育手机登录版,有多类相近明度、相近纯度千亿体育手机登录版,但是不同色相的颜色来代表我们不同产品的性格千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版,于是我们选取了类似色千亿体育手机登录版千亿体育手机登录版、互补色千亿体育手机登录版、中性色三种辅助色系千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版,来制定这一类辅助色千亿体育手机登录版。

                                              类似色做辅助色

                                              类似色为色环上相差30°以内的颜色,与品牌色的冷暖性质一致,色调统一和谐千亿体育手机登录版千亿体育手机登录版,情感特性一致千亿体育手机登录版,色相过渡柔和、自然千亿体育手机登录版。

                                              品牌色的色相为 H = 205 千亿体育手机登录版,邻近色的色相应为 175(H-30) 235(H+30)。

                                              色相235的色值与品牌色色彩倾向太类似千亿体育手机登录版千亿体育手机登录版,所以我们最后选择色相175的色值千亿体育手机登录版,与品牌色的冷暖性质一致千亿体育手机登录版,又有关键词便捷和想象力之意千亿体育手机登录版千亿体育手机登录版。如图「邻近色辅助色 – 色彩配图2」

                                              △ 邻近色辅助色 – 色彩配图2

                                              互补色做辅助色

                                              互补色为色环上相差180°的颜色千亿体育手机登录版,品牌色的对比色为橙色千亿体育手机登录版,与品牌色对比强烈千亿体育手机登录版。为了和品牌色、品牌邻近色两个冷色调作为呼应千亿体育手机登录版,我们需要取互补色两个类似色来作为我们最终的辅助色千亿体育手机登录版千亿体育手机登录版。

                                              品牌色的色相为 H = 205 ,互补色色相应为为 25 (H-180)千亿体育手机登录版,而该互补色的两个类似色色值分别为 40(25+15)千亿体育手机登录版千亿体育手机登录版、10(25-15),见图「对比色辅助色 – 色彩配图3」千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版。

                                              △ 对比色辅助色 – 色彩配图3

                                              校正辅助色

                                              校正的原则一:色相差值不能超过15千亿体育手机登录版千亿体育手机登录版。

                                              色相差值在15以内千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版,能保证校正后的颜色还是为同种色或邻近色千亿体育手机登录版千亿体育手机登录版,冷暖色调几乎一致,色相也可根据现在的使用场景微整。

                                              校正的原则二:尽量保持感官明度一致千亿体育手机登录版千亿体育手机登录版。

                                              我们知道千亿体育手机登录版,每一种颜色都有自己的「感官明度」千亿体育手机登录版,也就是发光度。根据现有的使用场景,类似色和互补色大都用在同层级的信息展示上,而当我们将最终得到的辅助色摆放在一起之后发现千亿体育手机登录版,品牌色以及三个辅助色的发光度不一致千亿体育手机登录版,导致视觉上会有明显的明暗差别千亿体育手机登录版千亿体育手机登录版。因为我们需要通过发光度来进行最终的颜色校正千亿体育手机登录版千亿体育手机登录版。

                                              在 Hue 模式下千亿体育手机登录版千亿体育手机登录版,如图「校验辅助色 – 色彩配图5」千亿体育手机登录版千亿体育手机登录版,浅灰色为高发光度千亿体育手机登录版,深灰色为低发光度。在保持品牌色不变的情况下,我们对其他三个辅助色进行了微调千亿体育手机登录版,但由于黄色本身感官明度最高千亿体育手机登录版,所以对黄色并未做校正千亿体育手机登录版,最后得到校正后的三个辅助色千亿体育手机登录版。

                                              △ 校验辅助色 – 色彩配图5

                                              中性色做辅助色

                                              中性色中最常用的是黑白灰色千亿体育手机登录版,它本身不带有感情色彩千亿体育手机登录版千亿体育手机登录版,主要用于调和色彩搭配。

                                              在色相和纯度都为0,明度也为0时千亿体育手机登录版,即为纯黑色千亿体育手机登录版千亿体育手机登录版,一般设计中应避免纯黑色千亿体育手机登录版,纯黑色在和其他颜色搭配时,对比过于明显千亿体育手机登录版,且会压倒其他颜色千亿体育手机登录版,所以我们将纯黑色的明度做微调千亿体育手机登录版千亿体育手机登录版,让黑色看起来更舒适。如图「中性色辅助色 – 色彩配图6 」

                                              △ 中性色辅助色 – 色彩配图6

                                              品牌色色相、纯度、明度值确定之后千亿体育手机登录版千亿体育手机登录版,可以将同色系的明度、纯度进行有规律的变化千亿体育手机登录版,得到同色系的明度和纯度变化后的辅助色千亿体育手机登录版千亿体育手机登录版。

                                              同色系的明度千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版、纯度取值

                                              同色系明度千亿体育手机登录版千亿体育手机登录版、纯度的对比千亿体育手机登录版,可以通过颜色的深浅千亿体育手机登录版千亿体育手机登录版、明暗千亿体育手机登录版,来承载不同类型的内容信息,分割页面的层次和?千亿体育手机登录版??。既能体现我们的品牌形象,也能保持页面的统一性千亿体育手机登录版千亿体育手机登录版。

                                              保持色相值不变千亿体育手机登录版,纯度变化时千亿体育手机登录版,S值以S/5递减千亿体育手机登录版、B值以 (100-B)/5依次做递增千亿体育手机登录版;明度变化时千亿体育手机登录版千亿体育手机登录版,S值以(100-S)/5 递增千亿体育手机登录版、B值以B/5做递减千亿体育手机登录版千亿体育手机登录版,得到如图 「 品牌辅助色 – 色彩配图7 」11色千亿体育手机登录版。

                                              图上可以看出,前三个色明度值小,且接近于黑色千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版,所以我们去掉这三个深色千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版。

                                              △ 品牌辅助色 – 色彩配图7

                                              同色系中千亿体育手机登录版,色相不发生改变,明度和纯度的做有规律的变化千亿体育手机登录版。

                                              品牌色与辅助色明度、纯度辅助的输出

                                              根据上面同色系的明度千亿体育手机登录版千亿体育手机登录版、纯度对比规则,对所有定义的辅助色进行明度和纯度的辅助色彩输出千亿体育手机登录版千亿体育手机登录版,最终得到辅助色色板千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版,如图「色板 – 色彩配图8 」千亿体育手机登录版。

                                              △ 色板 – 色彩配图8

                                              2. 渐变色

                                              渐变角度

                                              根据一般的视觉习惯,左上角优先,从左到右、至上而下,所以我们在渐变的过程中千亿体育手机登录版,将品牌色始终放在左上角的位置上。

                                              渐变样式:线性渐变千亿体育手机登录版千亿体育手机登录版。

                                              渐变角度:对角线渐变千亿体育手机登录版千亿体育手机登录版,左上为品牌色千亿体育手机登录版,右下为辅助色。

                                              △ 渐变角度 – 色彩配图9

                                              纯度渐变

                                              纯度渐变千亿体育手机登录版千亿体育手机登录版,由上面定义的纯度色值,进行依次的渐变罗列千亿体育手机登录版,得到以下渐变:

                                              纯度渐变轻快简洁千亿体育手机登录版千亿体育手机登录版、活泼明亮,给用户便捷的感觉。

                                              紧挨品牌色右侧的第一个辅助色与品牌色渐变千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版,渐变的效果并不明显千亿体育手机登录版千亿体育手机登录版,而最后两个辅助色的渐变效果明显千亿体育手机登录版千亿体育手机登录版,过渡略显生硬千亿体育手机登录版,所以最终我们选择 HSB= 205 55 95 千亿体育手机登录版,即品牌色后侧的第二个辅助色值进行纯度的渐变。根据上面纯度的辅助色取色规则千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版,可得到以下换算公式:

                                              △ 纯度渐变 – 色彩配图10

                                              邻近色渐变

                                              邻近色为色环15°的颜色千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版,邻近色的渐变取色千亿体育手机登录版千亿体育手机登录版,渐变过渡自然和谐千亿体育手机登录版,冷暖一致,如图「邻近色渐变 – 色彩配图11 」千亿体育手机登录版。

                                              △ 邻近色渐变 – 色彩配图11

                                              3. 色彩使用建议

                                              背景

                                              品牌色、辅助色做背景

                                              四个 tab 的页头和 titlebar,可以使用渐变,仅可使用邻近色渐变千亿体育手机登录版,如图 「品牌色背景渐变场景示例1 – 色彩配色12 」千亿体育手机登录版。

                                              业务页面使用时千亿体育手机登录版千亿体育手机登录版,背景色用于整张背景或者页头千亿体育手机登录版,可使用渐变,需要遵循渐变的色值和角度,如图 「品牌色背景渐变场景示例2 – 色彩配色13 」 千亿体育手机登录版千亿体育手机登录版。

                                              当背景色用于入口的背景装饰时千亿体育手机登录版,建议使用纯色千亿体育手机登录版,如图「辅助色背景场景示例3 – 色彩配色14 」千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版。但在使用 [H-30 S B] 的渐变时千亿体育手机登录版,该业务需要有其渐变色的色彩倾向千亿体育手机登录版。

                                              △ 品牌色背景渐变场景示例1 – 色彩配色12

                                              △ 品牌色背景渐变场景示例2 – 色彩配色13

                                              △ 辅助色背景场景示例3 – 色彩配色14

                                              中性色做背景

                                              功能页面使用中性色中的浅灰色#f5f5f5千亿体育手机登录版、白色#ffffff 做背景千亿体育手机登录版。

                                              icon

                                              icon用色

                                              • 一个页面上千亿体育手机登录版千亿体育手机登录版,icon 色相建议不超过4种千亿体育手机登录版,
                                              • 四个 tab 的 icon 建议使用单色千亿体育手机登录版,或者中性色进行搭配使用千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版,不建议使用渐变千亿体育手机登录版千亿体育手机登录版,
                                              • 业务页面内千亿体育手机登录版,可以使用渐变色千亿体育手机登录版、单色千亿体育手机登录版、或者搭配中性色使用千亿体育手机登录版,
                                              • 根据色彩性格来定义 icon 的用色:红色:希望、温暖;黄色:温和、高贵千亿体育手机登录版; 蓝色:严谨千亿体育手机登录版千亿体育手机登录版、稳定千亿体育手机登录版;绿色:健康千亿体育手机登录版、便捷千亿体育手机登录版千亿体育手机登录版。(如果相关的产品有自己的色彩倾向千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版,选择与辅助色最接近的辅助色)

                                              icon 背景用色

                                              • 一个页面上千亿体育手机登录版,四个 tab 的 icon 需要使用背景色时千亿体育手机登录版千亿体育手机登录版,颜色建议不要超过四种千亿体育手机登录版。
                                              • 和其他图片图形一起搭配时千亿体育手机登录版千亿体育手机登录版,背景色建议不要超过两种。
                                              • 业务页面内千亿体育手机登录版千亿体育手机登录版,icon 的背景可以使用渐变色千亿体育手机登录版千亿体育手机登录版,icon 本身直接反白千亿体育手机登录版,如图 「icon用色场景示例3 – 色彩配色15 」千亿体育手机登录版千亿体育手机登录版。
                                              • 四个 tab 页千亿体育手机登录版千亿体育手机登录版,因为头部使用了渐变色,所以 icon 建议使用纯色千亿体育手机登录版千亿体育手机登录版;业务类基本不做限制。

                                              △ icon用色场景示例3 – 色彩配色15

                                              文字用色

                                              • 常规文字用色:根据不同的字号大小千亿体育手机登录版,对应出两种灰黑色千亿体育手机登录版。在使用场景中千亿体育手机登录版,文字黑色用纯黑透明度显示千亿体育手机登录版千亿体育手机登录版,如图「黑色文字颜色使用场景 – 色彩配图16 」 千亿体育手机登录版;白色的文字颜色一般在品牌色的背景下使用千亿体育手机登录版千亿体育手机登录版,通过透明度调整文字颜色,如图 「白色文字使用场景示例 – 色彩配图17 」千亿体育手机登录版千亿体育手机登录版,
                                              • 文字链接状千亿体育手机登录版、可操作的指示:品牌色#108ee9千亿体育手机登录版;(不可点击的标签不能使用该颜色)千亿体育手机登录版,如图 「链接色使用场景示例 – 色彩配图18 」千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版。
                                              • 重点突出、公告提醒:橙色(仅用于提醒千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版,不能用于带情感色彩的错误提示)。
                                              • 错误千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版、警示、失败千亿体育手机登录版、小红点:红色。

                                              △ 黑色文字颜色使用场景 – 色彩配图16

                                              △ 白色文字使用场景示例 – 色彩配图17

                                              △ 链接色使用场景示例 – 色彩配图18

                                              链接色仅用于可操作执行,图中的陌生人千亿体育手机登录版千亿体育手机登录版、置顶均是提示标签千亿体育手机登录版,使用不当。

                                              三、可使用颜色合集

                                              网站案例欣赏

                                              合众生物股份

                                              响应式企业网站

                                              克莱蒙特酒业

                                              响应式企业官网

                                              美时·艾菲特

                                              响应式企业官网

                                              千亿体育手机登录版 网络小说排行榜 小说排行榜完结版 好看的言情小说 完美世界有声小说全集 欢乐颂小说结局是什么 小说阅读网站 遮天 辰东 小说 玄幻小说完本 管理书籍排行榜 小说阅读网 《完美世界》txt全集 绝色狂妃 仙魅 小说 小说阅读器 玄幻小说排行榜完本 盛世嫡妃 凤轻 小说 欢乐颂第一季免费阅读 灵域 天下 高月 小说 好看的历史书籍推荐 如何发布网络小说 盗墓笔记有声小说 君子以泽 梦入神机 辰东全部小说 好看的课外书 小说 《完美世界》txt全集 有声读物 有声小说打包下载 完美世界有声小说 《完美世界》txt全集 官场小说排行榜 有声小说下载 我欲封天 耳根 小说零 欢乐颂第一季免费阅读 怎么写网络小说 古风名字 盗墓笔记 欢乐颂小说txt 古风小说 君子以泽 辰东 梦入神机 风凌天下 灵域 琅琊榜 海宴 小说 我欲封天 耳根 小说 盗墓笔记小说txt下载 盗墓笔记txt全集下载 我欲封天txt下载 有声小说打包下载 我欲封天 耳根 小说 雪鹰领主 怎样写网络小说 好看的课外书 完美世界txt下载 好看的电视剧 盛世嫡妃 凤轻 小说 好看的小说 君子以泽 欢乐颂小说txt 完美世界小说下载