schemas.android.com/apk/res/android" > 上面的tab_background.xml中写了tab的选中与不选中是的两种状态...;分别设置不同的颜色就行。...tabIndicatorColor">#ff00ff 2dp 这个style你要单独的去命名...,我的名字叫张继群就随便的命名了。...在你的style中有tablayout单独的style;名称如下: Base.Widget.Design.TabLayout 这个style很特殊。专门为tablayout准备。 这样就完成了。
是官网下载安装的), 然后通过homebrew的方法将python跟pygame必须完全用终端安装的方法解决(命令书上有,但是你将可能遇到下面的问题)。...但是,在接下来的编写过程中,会出现新的问题。pygame窗口无法更改背景色,无法显示飞船图像。...通过测试一系列方法,如重新去官网安装python(什么32位跟64位必须匹配之类的),通过命令直接安装python(书上的homebrew方法),更改代码中的pygame.event.get(),或者安装低版本...这个问题出现的原因有两点,一是mac系统的兼容性问题(降低Mac系统的方法还是不要尝试了),二是如果按照这本书的安装教程先安装homebrew 再通过brew install pytion的方法并不适合现在版本的...这里我们用到的是anaconda(就当是一个很全的python软件,安装好后可以省去你安装其他库的步骤,其实我刚开始也是拒绝的,因为是英文)。
每种色调都会生成一组浅、深色方案,这些方案将根据偏好和视觉需求进行更改或调整。Error 颜色也会自动分配到相应色槽中。...△ 颜色组合需要基于亮度来满足无障碍访问 如下图所示,在亮度接近时,尽管两种颜色的色调并不相同,但调色却非常相似。这样的色彩组合使得对比度过低,而对于有一定程度色盲的人来说更是如此。...M3 的颜色系统可以与自定义组件和品牌风格相结合,通过自动处理关键调整,满足无障碍访问的颜色对比度,保障易读性、交互状态和组件结构。...这一操作将更新颜色、排版和主题背景文件,更新代码后您即可运行应用来查看组件映射的新品牌主题背景。 使用动态配色 您可使用上述的网页工具,预览基于源颜色或图像生成的各种方案。...,此时将显示用户生成的用于主题背景的颜色。
绿色缓和了暖色调和冷色调之间的差距,虽然往往是更酷的颜色。这意味着绿色有与蓝色相同的放松效果,但仍然保留一些黄色的激励品质。因此,它创造了一个非常平衡和稳定的气氛。...所有的蓝色是普遍放松和安全,但较浅的阴影似乎更加友好,而较暗的似乎更沉闷。 社交媒体网站,如 Twitter 和 Facebook ,采用更轻或中等的色调,而企业网站喜欢更重更可靠的色调。...这是很有意义的,因为他们计划高可见度(和有点神经紧张)事件,如婚礼。 紫色 传递:奢华,浪漫(浅色调),神秘(深色调) ? 在历史上与皇族相关联,紫色保留了豪华的语调,甚至到颓废的点。...虽然在某些情况下,它可能看起来沉思或悲伤,但灰色在传统或专业领域是很流行的选择。然而,灰色的最大优点之一在于它的色调变化 – 熟练运用,在白黑之间跳跃,阴影的改变,能体现出定制的美感。...在12步色轮上,选择彼此相隔120度的任意三种颜色:一种颜色用于背景,两种颜色用于内容和导航。 ? 复合(分裂互补) – 这个配色方案略微复杂,但如果用得好,可以收到不错的效果。
双色调设计的特点:氛围感、吸引力、普适性 双色调设计通过改变图像的色调,以两种颜色重新诠释图像,形成了新的视觉感受和认知。...电影月光男孩的海报设计,用三组不同的双色表现主角在不同年龄阶段的状态,用颜色的对比来暗示故事情节的发展。...下面例子中的两个网页设计都采用了邻近色的双色调来处理背景图像,使背景颜色统一,不会干扰到前面主要文字信息的传达和控件的识别。用户被双色调的背景吸引后,注意力会聚焦在文字和按钮。 邻近色的双色设计 ?...对比色的双色调结合中性色使用(白色或黑色),带来视觉吸引力的同时,可以调和颜色的冲撞,带来一种平衡。...对比色的双色设计 ? 3. 双色设计还需要根据传达的信息对图像的细节做保留和取舍,例如月光男孩的海报形象为了显示皮肤的质感和肌理,就需要清晰的细节还原。
虽然有许多工具可以帮助我们中最缺乏艺术性的人创建引人注目的视觉效果,但图形设计任务需要更多关于设计原则的背景知识。...Tint(色调,淡色) Tint色调 与阴影(Shade)相反,但人们通常不会区分颜色的阴影和颜色的色调。当在颜色中添加白色时,会得到不同的色调。因此,一种颜色可以有一系列的色调和色调。...色调和饱和度(Saturation) 本质上是同一件事,但大多数人在谈论为数字图像创建的颜色时会使用饱和度,而色调将更常用于绘画领域。...Monochromatic 单色配色方案使用具有不同深浅和色调的单一颜色来产生一致的外观和感觉。虽然它缺乏色彩对比,但它通常最终看起来非常干净和抛光,它还允许您轻松更改颜色的暗度和明度。...「考虑颜色上下文」 在下图中,每个圆圈中间的大小、形状和颜色都相同。唯一改变的是背景颜色。
大多数数据应该是中性颜色,如灰色,保留鲜艳的颜色以将注意力引向重要或非典型的数据点。 1991-1996年的销售额(百万美元)。 红色被用来引起人们对1995年异常低迷的销售的关注。...— 规则3 — 对不相关的数据使用分类颜色 分类调色板来自不同色调但饱和度和强度相同的颜色,可用于具有完全不同来源或不相关值的不相关数据点的可视化。...由此造成的类别损失可能并不总是可以接受的。 相反,绘制条形图时,我们可以使用单一颜色并保留所有15个数据类别。...— 规则7 — 选择合适的背景 物体的感知颜色不仅取决于物体本身的颜色,还取决于其背景。...这导致我们就图表中背景色的使用得出以下结论: 按相同颜色分组的不同对象也应具有相同的背景。 这通常意味着背景颜色的变化必须最小化。
创建深色模式主题的第二个问题是,网页设计师不遵循特定颜色需要在深色模式下更改为其他颜色的逻辑。这可能会导致创建过多类型的变量,这些变量难以理解或维护。...通过这种方式,我可以更改每个颜色组的主色调,并轻松替换该颜色家族的所有色调。 作者表示,他对这种方法的唯一疑虑在于,设计团队定义的颜色是用十六进制代码表示的,这种代码实际上代表了RGB颜色。...主要思想是将第一个值保留为另一个CSS变量。 为了应对这个挑战,作者决定利用CSS的calc()函数,通过对基础色调值进行加减运算来解决问题。...从每个家族组的主色中取基色色调;在我们的情况下,主色是“100”颜色,信息(蓝色)家族组的色调是189。...在色轮上的位置是0度(红色),饱和度为100%(全彩色),亮度为50%(半亮度)。 HSL函数在CSS中常用于定义背景颜色、文本颜色和边框颜色等属性。
在导入seaborn库后,默认的颜色循环被更改为一组六种颜色。虽然这些颜色可能会让你想起matplotlib的标准颜色循环,但他们无疑更赏心悦目一些。 ?...这些也存在于matplotlib颜色映射中,但是它们没有得到适当的处理。在这里,当你要求一个定性颜色的调色板时,你总是会得到离散的颜色,但这意味着在某一点它们会开始循环。...这意味着在你的映射信息会在保存为黑色和白色(为印刷)时或被一个色盲的人浏览时可以得以保留。 Matplotlib拥有一个默认的内置cubehelix版本可供创建: ?...默认情况下你只会得到一些与seaborn调色板相似的颜色的列表,但你也可以让调色板返回一个可以用as_cmap=True传入seaborn或matplotlib函数的颜色映射对象。 ?...需要注意的是,为默认的input空间提供交互的组件是husl,这与函数自身默认的并不同,但这在背景下却是更有用的。 离散色板 调色板中的第三类被称为“离散”。
当谈到颜色、对比、和谐时,我们的脑海中必须有这样的画面: image.png 这里有3个重要元素值得我们注意,分别是色调、明度和饱和度。下面逐一解释 1、色调 色调是最原始状态下的颜色。...image.png 从上图我们可以看出,相反的颜色虽然会拥有更高的对比度,但相近的颜色却之间更加和谐。...image.png 但如果我们借鉴一下现实生活,会发现黑暗总是有一些基调的。 image.png 黑暗从来都不是黑色的,黑暗只是被物体明度遮蔽的色调。...4、饱和度测试颜色和谐度 想要让我们作品中的配色更加和谐,可以将色调从颜色中移除,只保留光和影,光影会给人以真实感和深度。...而当我们使用某种色调的背景时,具有相同色调的文本显然会更加和谐。 所以,要使颜色之间和谐,其中一个技巧就是让它们存在一定数量来自对方颜色的色彩。
在 CSS 中,颜色无处不在,它可以作为文字、背景、阴影、表格、边框、链接等属性。...(3)inherit inherit 是一个保留字,它不局限于颜色,表示该属性采用与元素父级的属性相同的值。对于继承的属性,主要用途就是覆盖另一个规则。...(4)系统颜色 还有一些其他特殊的颜色关键字,它们用来匹配一些系统元素,旨在保持浏览器上应用程序的一致性。系统颜色成对出现:背景颜色-前景颜色。...它类似于 rgb,但允许添加第四个值。...例如,要在十六进制代码中设置黑色#000000,要添加 50% 的透明度,可以将其更改为#00000080。 可以看到,十六进制颜色值是很难阅读的。
# 预先确定您的色调 事先确定一套固定的色调,以便在工作中进行选择 # 先选择基色 为您想要创建的色阶选择一个基色--中间的颜色,您的浅色和深色色调都是基于这个颜色 对于主色和强调色来说,一个好的经验法则是选择一种适合作为按钮背景的色调...# 寻找边缘 最深的色调通常用于文字,而最浅的色调可能用于元素背景的着色 一个简单的警报组件就是一个很好的例子, 它结合了这两种用例,因此可以很好地选择这些颜色 选择与底色色调相匹配的颜色,然后调整饱和度和亮度...(红色、绿色和蓝色)和三个局部最大值(黄色、青色和洋红色) # 通过旋转色调改变亮度 通常,当想改变颜色的亮度时,可以直接调整亮度 虽然这样做可以使颜色变浅或变深,但往往会失去一些颜色的强度--颜色看起来更接近白色或黑色...# 为图像着色 使用单一颜色对图像进行着色 # 添加文字阴影 如果你想在背景图像中保留更多的动态效果, 文字阴影是一种仅在最需要的地方增加对比度的好方法 希望它看起来更像一个微妙的光晕,而不是真正的阴影...# 更改背景颜色 这对于强调单个板块以及在整个页面部分之间增加一些区别非常有效 如果想要更有活力,你甚至可以使用轻微的渐变色 为了达到最佳效果,应使用相差不超过 30° 的两种色调 # 使用重复图案
(调整颜色来营造心情) 1 颜色调整 目前,我们仅将色调映射应用于最终图像,以使HDR颜色处于可见的LDR范围内。但这不是调整图像颜色的唯一原因。视频,照片和数字图像的色彩调整大致分为三个步骤。...最后一个选项是Saturation,也是从-100到100的滑块。 ? 默认值全为零,但color filter应为白色。这些设置不会更改图像。 ? ?...它类似于使用名称空间,但使用的是类型。它可以直接访问类或结构的所有常量,静态和类型成员,而无需完全限定它们。 设置一个着色器矢量和颜色来进行颜色调整。颜色调整矢量分量是曝光,对比度,色相偏移和饱和度。...(ACES色彩映射,颜色分级分别在ACES和线性色彩空间) 3 LUT 每个像素执行所有颜色分级步骤是很多工作。我们可以制作可能仅适用于更改某些内容的步骤的变体,但这需要大量的关键字或通道。...它需要LUT纹理和采样器状态作为参数,然后是饱和的输入颜色(适当时在线性或Log C空间中),最后又是参数向量,这次只有三个分量。 ?
它允许您按主题更改颜色,例如,在 深色主题 中提供一个不同的值: 颜色声明保持为字面值,您就可以自定义应用使用的颜色调色板,并在主题背景级别修改它们,这会让 color.xml 较小且易维护。 这种方法的额外好处是,布局/样式引用这些颜色时复用性变得更高。...由于主题背景可以被覆盖或者改变,因此这间接表示: 您不需要创建其他布局或样式就可以更改某些颜色——您可以在相同的布局中使用不同的主题背景。 始终使用? 在某些情况下,您或许不想按照主题背景更改颜色。...ColorStateLists 通常为不同的状态 (按下,禁用等) 提供不同的颜色,但它还有另外一种可用于主题化功能您可在选取的颜色上指定透明度值: 的 View 所需的状态,例如,如果被禁用时需要更改。
特点:通过抠选对象颜色与背景颜色 的差异来选择,很准确。...,保留暗色,保留本身的色相 颜色加深:和正片叠底的原理一样,比正片叠底的程度更深。...滤色:去暗留亮(去黑留白) 特点:去除暗色,保留亮色,保留本身的色相 颜色减淡:和滤色的原理一样,比滤色的程度更深。...叠加:让亮的更亮,暗的更暗 特点:依然保留色相 常用白色做叠加来打造高光或背景。 柔光:运算方式和叠加一样,比叠加的程度要弱。...改变通道黑白灰的方式: 前背景色填充,渐变,画笔,加深减淡 加深工具:加深图像的色调 减淡工具:让图像色调变浅 海绵工具:吸走图像的色调(降低饱和度) 加深减淡工具一定要结合范围来用。
如果设置了聊天背景,聊天背景图片也会自动调暗,便于阅读。 虽然整体色彩加深,但微信在设计时仍保持着清晰的层次。...如消息图标会从笑脸切换为休息的状态,这种具有趣味性的设计,也会拉近用户与产品之间的距离。 豆 瓣 普通模式下的豆瓣APP背景色为纯白色,白天看偶尔都觉得有些刺眼,更不用说睡前必刷豆瓣的用户有多煎熬。...豆瓣的夜间模式和微信一样,同样保留了五颜六色的图标。同时,豆瓣在设计时始终保证内容有良好的对比度和清晰的视觉层级,保证了信息结构的准确传达。...知乎在设计夜间模式时,知乎采用了主色调蓝色+深灰色的搭配,深蓝和灰色作为背景,展示出的效果既有强烈的对比,又摆脱了深色的压抑感。 与豆瓣不同,知乎的文本颜色选择了对比度更低的灰色,通过字重进行区分。...同样,由于背景颜色太深,导致百度网盘的文本和背景对比度太大,也存在难以阅读的情况,对于诵读困难症患者来说,在阅读时会感觉文字在旋转、模糊。
在下面的动图中,你可以直观地体会到 阴影的变化对我们感官的影响: 因此,Material Design 并不是单纯的扁平化,它在保留了扁的控件的同时,采用了立体的虚拟空间, 简言之,Material...在每个调色板中,色调为500的颜色为基准色,其他颜色是基准色在不同色调(50-900, A100-700) 下的表现。 在右边的示例代码中,我们绘制了Material Design完整的调色板集。...每一行是一个调色板, 每一列表示一个色调。你可以将鼠标移动到一个颜色上,查看其RGB值。...工具栏和状态栏 工具栏和大色块应当使用调色板中色调为500的颜色为基准色。状态栏应当选择 调色板中比基准色略深的色调为700的颜色。...在下面的示例中,左图的工具栏和右图的大色块,使用了indigo调色板中的色调 500的基准色;而两幅图顶端的状态栏则使用了indigo调色板中的色调700的深色: 4.
APP Logo形象一般可以直接沿用公司品牌的Logo形象,然后进行一定程度的扁平化处理,去除复杂图样细节,保留核心形象与主色即可。...这种设计,要求Logo形象务必简单大略,便于用户一眼识别;同时背景色必须同时是APP内部的主题颜色,以免让用户产生视觉差异。...而在第一根间隔条与单元格之间的分割线,采用了与上面分割线宽度、长度均相同,但颜色稍浅的设计,目的自然就是既要分隔内容、又不能本末倒置、超过上面间隔线的间隔效果,因此这根线条着色虽然也是深灰色,但与第一根相比...同时我们也注意到,三类风格线颜色再浅,但都会比单元格内部的右侧箭头取色要深,其实依然遵循的是视觉效果从强到弱、区分作用从大到小的原则。...对于Banner图,笔者认可的设计原则依然是——围绕主题风格、做适度颜色扩展、左右内容分配繁简协调、内容精致亮化。 背景色选择对于CMF这一类寻求极简页面风格设计的APP尤其要审慎。
虽然事实并非如此,但图标的设计在整个UI设计中是比较基础的一个环节。...4 颜 色 需要标注颜色的内容有分割线颜色、背景色、按钮颜色等等。关于颜色的标注需要注意的事项:切记文字的颜色已经归类到文字属性里面,不用重复标注,思路一定要保持清晰。...图片处理规范 8.png 1 图片统一性 1)图片色调色温需统一,例如一个婴儿产品的首页,整体需要搭配暖色调的图片,这样看上去整体才比较统一舒服。...3)图片边缘避免与白色背景融合,可以在边缘位置加色。 4)为了配合标题字体,图片可以局部调亮或调暗。...2)任何交互动作所导致的状态都需要考虑正常状态与异常状态。拿加载动画来说,我们需要考虑加载成功的反馈与加载失败的反馈,并将之注明在输出规范中。