赞助商
立即赞助

内部教程!超详细的支付宝设计规范之配色篇

平面设计3年前 (2021)发布 流光
5.1K 0 0

一、色彩 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

链色仅用于可操作执行,图中的陌生人、置顶均是提示标签,使用不当。

三、可使用颜色合集

内部教程!超详细的支付宝设计规范之配色篇

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

@菜心设计铺 :前几天做了《暴风影音 App 重设计》,不过还没做完,所以今天主要讲讲我寻找改版切入点的方法——品牌探索。 到...
ICON
在很多优秀的设计作品中,我们常常会看到一些英文的出现,形态上也各不相同。小到不仔细看就看不到、大到比产品还大。这也会...
中英文排版
设计领域和设计工具之间的融合越来越多了,设计门类和技术的交叉创造出足够新颖独特的设计。 用惯了 PS、AI 的同学,多少都...
3D建模
编者按:懒得试配色方案?不妨收藏这些配色网站,和常见搭配,让你的配色更加协调! 一. Adobe Color CC 二. Color Lovers ...
经验分享
网易UEDC – 朱子健、蒋蕊遥 :良好的交互规范可以很好的帮助企业、团队提高产出,保证用户体验。 一. 规范很重要 规范和秩序...
交互规范
王M争:前段时间 B站对视频缓存功能做了一次调整,之前用户想要缓存当前视频只需点击「缓存」图标就行了,新版本中用户必须点...
UI控件
交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”。在交互设计领域中,有很多被时间和前人验证过的...
交互设计
越来越多的设计团队开始从 Sketch 迁移到 Figma 这是大势所趋。但是这两个工具之间有差异,这篇文章我会为你分享一些无缝切换...
Figma