目录 1 展示 1 展示 效果 需要安装的插件
它使用AppCompat主题，设计支持库中的小部件（包括具有自定义背景的按钮）以及需要迁移的各种其他元素。...MDC 1.1.0更改了一些默认的小部件样式，以更好地符合“材料设计”准则。...但是，升级后，您可能会注意到某些控件颜色和其他属性的某些意外更改。 ? 在上面的示例中，按钮发生了变化、文本和图标的颜色发生了变化。FAB 现在变成了蓝绿色，并且文本字段看起来完全不同。不用担心。...MDC的颜色调色板直接从 Material Design color system 中绘制。...MDC窗口小部件使用这些属性来为其背景，文本，图标等着色。要了解哪些小部件使用哪种颜色，需要检查源代码中的默认小部件样式。 AppCompat和框架中还存在一些颜色，但不再适用于此新系统。
【UI 改进】 现在，同步、色调曲线和颜色具有更新的外观，无论新用户还是经验丰富的用户，都能够更轻松地从这些基本工具中获得最大价值。 ...“同步”图标显示同步的当前状态，将鼠标悬停在图标上方可查看有关当前状态的更多信息。单击“同步”图标将打开一个弹出菜单，其中包含基于当前同步状态的更多选项和详细信息。 ...在应用局部调整时使用新的“色相”滑块来更改选定区域的色相。 2、滑块的顶栏是参考色相栏，底栏是色相滑块。“色相”滑块和“色相”滑块的中心颜色基于所选区域的颜色。...要创建 ISO 自适应预设，请执行以下操作： 1、标识两个或多个具有要用于创建预设的不同 ISO 值的图像。 2、对这些图像进行必要的编辑。...例如，为不同的 ISO 图像设置不同的“减少明亮度杂色”值。 3、选择这些图像，然后单击创建预设。有关创建预设的更多信息。
目录 1、布局 2、常用属性 3、设置监听 4、默认选中 5、配合ViewPager 6、添加角标 7、修改图标大小 8、去除波纹效果 9、Github MaterialDesign中的一个底部导航栏...app:itemIconTint 图标颜色 app:itemTextColor 文字颜色 app:menu 导航菜单 app:labelVisibilityMode 文字显示状态，等于labeled的时候...BottomNavigationView的item也选中，BottomNavigationView的item选中的时候让ViewPager切换page 6、添加角标 查看：BottomNavigationView...添加角标（BadgeView） 7、修改图标大小 源码开放方法： /** * Set the size to provide for the menu item icons...app:itemBackground="@null" 我目前简单粗暴的方案，设置波纹颜色和背景颜色一致，达到看不出的效果。。
如果这些类别在语义上可以分为两组，我就会首先为第一组挑选3种具有类似调和性的颜色。然后，我将为第二组找到每种颜色的互补色。 色彩理论是一个巨大的话题，而且它并不简单。为背景找到合适的颜色需要进行实验。...因为一些Material组件可能会在阴影、边界等方面使用不同的primaryColor色调。 Material设计指南中给我们提供了这样一个工具，来方便开发者设置这些颜色。...它们可以以光栅或矢量图像的形式下载。比起光栅图像，我更喜欢矢量图像，因为它们是可伸缩的，而且尺寸更小。 Material图标也可以在Web和Flutter项目中作为图标字体使用。...图标字体是用字体中的字形绘制的，但不是字母，而是图标和形状。在Android项目中，我们将SVG文件中的材质设计图标作为XML文件添加到资源文件夹中。...然而，在Flutter项目中，我们不需要明确地将它们添加到项目中，因为所有的图标都可以作为字体的字形一次性添加。
（2）颜色降噪：多彩的图标单独来说具有不错的视觉表现，但整体上缺乏关联性，且作为“基础图标”以及从“品牌性”“一致性”方面考虑也存在着挑战，对于品牌色的透出不够完善，因此需要进行整体的“颜色降噪”，增强品牌色调的感知...色调延续 主色调的设计主要考虑两个方面：1.游戏中心本身存在于手机QQ，用户对于手机QQ具有强烈的品牌色调感知，因此对于游戏中心本身，希望可以起到一个延伸和承接；2.基于次元空间-科技感本身的颜色的感知...最终确定游戏中心的主色调为蓝色调，并且使用大跨度的渐变效果，让颜色更具有炫光的感觉。 颜色拓展及分类 手机QQ游戏中心作为一个多元化的游戏平台，很难使用单一的颜色来表达完整的内容层次。...因此基于不同的颜色性格，以蓝色为主调，拓展出“红黄绿”三种颜色作为辅助使用的颜色，用来表达不同的内容感知。...依据功能调性、冷暖、以及用户的常规普识性感知，结合以上四种色调的调性划分，对不同类型的功能进行赋予不同的点缀色彩。
，图标（尤其是实心图标） 一般都很 "重"，而且覆盖的面积很大 当你把图标放在一些文字旁边时，图标往往会给人突出的感觉 与文字不同， 图标的 "重量 "是无法改变的， 因此要创建平衡，就需要通过其他方式来淡化它...，填补空白，直到得到所需的颜色 为项目中最深的文字选择一种颜色，从而挑选出最深的灰色 为项目中最浅色的背景选择一种颜色， 从而挑选出最浅的灰色 如果可以的话，尽量避免频繁添加新色调。...人眼对色彩的感知方式不同，每种色调都有其固有的感知亮度 将一种颜色的 RGB 分量代入这个公式， 就能计算出该颜色的感知亮度 从最暗的色调到最亮的色调，感知亮度并不是简单的线性变化，而是存在三个不同的局部最小值...，而不仅仅是变浅或变深 由于不同的色调具有不同的感知亮度，改变颜色亮度的另一种方法就是旋转色调 要使颜色变浅，可将色调向最近的亮色调旋转 60°、 180° 或 300° 要使颜色变暗，可将色调向最近的暗色调旋转...# 更改背景颜色 这对于强调单个板块以及在整个页面部分之间增加一些区别非常有效 如果想要更有活力，你甚至可以使用轻微的渐变色 为了达到最佳效果，应使用相差不超过 30° 的两种色调 # 使用重复图案
网站整体的紫色调优雅大方，不同层次的紫色卡片设计能循序渐进的对顾客进行引导。CTA部分的设计以深紫色做为强调，吸引点击，从而增加转化。 3. ...那么，在医疗类网站设计中，有哪些可以遵守的设计原则呢？ 网站色调搭配是一个影响网页的重要因素。不同的颜色会产生不同的效果。 ? （1）红色：红色会使人兴奋，并且感到紧张不安。...搭配：不能大面积使用，只能小块地与其他色彩搭配起点缀的作用。 （7）白色：白色是网页设计中通用的颜色，它具有容易突出彩度的特性。 搭配：搭配黑色显得高贵具有都市气息，但不适合作为医疗网站主色调。...在高保真网页原型中，色彩的运用也同样是网页设计的加分项目。颜色搭配得当的原型项目更有助于获得投资和赢取客户的机会。那么，你需要的是选择一款支持色料库的原型设计工具，而非单色的线框图工具。...国产原型设计工具Mockplus中可直接通过色号或使用拾色器来设置组件、图标颜色。对于网页设计、App设计都是非常友好的。 ?
一、启动白屏优化 首先我们处理白屏的问题，首先我想的是更改一下启动页的样式，之前是一片白，现在我改成绿色的，绿才有安全感，要想代码过得去，样式就得带点绿，手动滑稽。...，而你的颜色值样式什么的都没有很规范的话，不建议你直接在自己的项目进行操作，要花很多时间去改。 ...这里的改动其实不在nav_menu.xml中 而在NavigationView中，如下图所示： 通过itemIconTint改图标颜色，通过itemTextColor改文字颜色即可。 5....BottomNavigationView 在App的HomeActivity中是通过BottomNavigationView去进行底部导航的，那么它的item有一个选中的效果，还有未选中的效果，同时还需要适配深色模式...属性去设置的图标颜色，这里在深色模式下改成白的。
以前大部分项目底部导航栏关于图片部分的实现，要么两套图 selector 切换，要么通过着色器 tint 进行渲染，总之最后呈现的效果便是在点击时两张图静态切换，说 Low 吧，也还凑合，但是总是没那么高大上...项目重构时，韩总说了，之前的方式呈现的效果太 Low 了，这次重构要求底部要动。（内心默默来句，你咋不上天。） 先来看个两者间对比效果吧～ 效果对比 原有两张静态图切换： ? 小动画浪起来： ?...= bottomNavigationView composition = result.value } } /** * 获取不同模式下 Lottie json 文件 */...下面是我陷入误区的思路： 我想着因为是通过 playAnimation 开始执行动画从而过渡到最后的颜色，那么对应的 endAnimation 应该是直接能回到初始状态。...apply { playAnimation() } // 这里判断如果当前点击的和上一次点击索引不同，则将上一次点击索引位置的 MenuItem Icon 替换
添加好之后，点击Sync进行项目同步，同步时会自动下载这些依赖库并配置到你的项目中。...可以看到，底部的导航栏已经出来了，而且还可以点击，点击之后还有动画效果，并且图标和文字的颜色还有变化，因为实际上我只是放了灰色图标而已。...那么这些工作就都是BottomNavigationView帮我们完成的，的确是省了不少事情，当然这个动画效果和点击之后的颜色都是可以让开发者自行改的。...不过在运行之前把BFragment中接收参数并且弹Toast的代码删掉，否则切换的时候拿不到这个参数，就会ANR。 运行看看吧。 ? 下面来改一下切换后的图标颜色和文字颜色吧。...，这里传入刚才传入的颜色样式。
2 多用布尔运算 在做图标的时候，能用基本图形进行布尔运算的时候，尽量不要使用钢笔，这样做的好处有如下几点： 让你的图标更加规范 对图形结构理解更加深刻 后期更改形状更加方便 2.png 3 独特的风格...在做系列图标的时候，一定要在前期给图标设定一个风格及原则，使之看起来与众不同。...那么，在图标的设计中，我们也必须强调“品牌性”，简单的说就是把品牌中的抽象的概念变成具象化的图形，把品牌主副色调应用到图标设计中。同时建议大家每个星期完成一个主题的作品，提升自己的平面设计能力。...标注规范 如何把标注的思路整理清晰——结构化思维进行拆解，将大问题拆解成小问题，逐一击破！ 3.png 标注主要是以下四种不同属性的内容：尺寸、文字、间距、颜色。...2 命名格式 一个大型项目会分很多模块，每个模块由不同的设计师来独立完成，还有人会专门管理公共的组件，如tabbar、navbar等等，这种情况下就会分为两种切图，一种是通用类型的切图，还有一种就是各个模块特有的切图
该软件具有优秀的绘图工具和性能，可用于创建标志、插画、网页图像、海报等各种类型的设计作品。...用户可以根据自己的喜好选择不同的主题颜色和布局。 高级绘图工具：AI 2022中文版提供了丰富的绘图工具，包括画笔、路径、形状、文字等，使设计师可以轻松创建各种类型的矢量图形。...新的颜色管理工具：AI 2022中文版新增了颜色主题和颜色调整工具，让用户可以更轻松地管理颜色，实现更精准的配色。...改进的插图库和图标集：AI 2022中文版内置了许多插图库和图标集，为设计师提供了更多的素材选择。...在AI 2022中文版中，增加了许多新功能和改进，例如： 增强的现代化界面，提供更快、更流畅的工作体验。 新的颜色主题和颜色调整工具，使设计师可以更轻松地管理颜色。
一、设计语言 github项目地址：https://github.com/google/material-design-lite 拟真 vs....： 在Material Design中，屏幕里看上去平整的一个 App 界面，事实上不同控件之间都拥有 着层级关系。...在每个调色板中，色调为500的颜色为基准色，其他颜色是基准色在不同色调（50-900, A100-700） 下的表现。 在右边的示例代码中，我们绘制了Material Design完整的调色板集。...每一行是一个调色板， 每一列表示一个色调。你可以将鼠标移动到一个颜色上，查看其RGB值。...工具栏和状态栏 工具栏和大色块应当使用调色板中色调为500的颜色为基准色。状态栏应当选择 调色板中比基准色略深的色调为700的颜色。
根据谷歌给出的发布计划，正式版最早在8月放出： 那这版安卓又增添了哪些新功能？来一起看一看~ 界面语言隐私全面更新 在Android 13中，最显眼的是界面的变化，尤其是主题图标的改变。...之前我们在给手机换壁纸的时候，App图标的颜色一直不会改变，有时候看起来很违和。 这次谷歌把动态颜色功能扩展到了所有应用上。...开发者只需要提供一个单色的图标，在用户更换壁纸时，桌面上的图标就会根据壁纸的色调自动调整。...例如我们把界面改为深色模式之后，应用图标也随之变为深色： 面对不同色调的壁纸，App的颜色也会随之更改： 这项功能最初会在Pixel手机上应用，不过谷歌也正在和制造商沟通，把它拓展到其他的设备上。...这个新系统会根据当前的电量给不同的App分配“信用点”，用来管理排队任务。
不同控件之间的层级关系会使用阴影作为表示，而阴影的深浅，代表的正是这个 控件在 Z 轴的高度： ?...在每个调色板中，色调为500的颜色为基准色，其他颜色是基准色在不同色调（50-900, A100-700） 下的表现。 在右边的示例代码中，我们绘制了Material Design完整的调色板集。...每一行是一个调色板， 每一列表示一个色调。你可以将鼠标移动到一个颜色上，查看其RGB值。...工具栏和状态栏 工具栏和大色块应当使用调色板中色调为500的颜色为基准色。状态栏应当选择 调色板中比基准色略深的色调为700的颜色。...在页面中要使用图标字体，只需要应用上面定义的material-icons样式： face 上面的示例创建了一个笑脸图标，face用来指定要显示的图标
，分为两个部分：较浅的颜色（色调变体）和较深的颜色（阴影变体）。...使用 color-mix() 生成具有色调和阴影变体的调色板 color-mix()是一个 CSS 函数，它接受两种颜色并根据给定的颜色空间返回所需的混合颜色变体。...和blendingColor可以是任何 CSS 支持的颜色值，但我们也可以使用color-mix()不同的颜色空间进行颜色混合，从 sRGB 到 HSL。...结果颜色将根据所选颜色空间而有所不同。在这篇文章中，我们将使用 sRGB 作为我们的色彩空间。...接下来，我们将应用相同的方法来生成阴影变体。 生成阴影变体 虽然色调是由颜色与白色混合产生的变体，但作为较暗的变体，阴影是由我们的目标颜色与黑色以某种强度级别混合产生的颜色。
对，这就是语义化颜色。除了给每个元素提供颜色之外，您还可以给它提供一种语义颜色，该语义颜色会同时具有两种模式的两种颜色。...这就是与开发人员进行“和谐”对话所需的全部知识。 05 填充颜色和灰色 iOS的准则提供了4种填充颜色（也为灰色）和6种其他灰色可供选择。它们是界面上所有元素的理想选择，例如字形（图标），UI控件等。...08 强调色（Tint Color） Apple提供了9种不同的强调颜色，可在整个应用程序中使用。它们可用于文本，图标或形状。我将下面的强调色改为不同颜色，你会发现他们会变成这样的: ?...但是，这9种颜色在亮模式和暗模式下略有不同。如果您选择使用这些系统强调颜色，则该应用程序将自动将亮模式色调颜色更改为暗模式色调颜色。 ? 你会发现亮模式和暗模式下的颜色是稍有差异的，请务必注意。...另一个例子，如上图，对于明暗模式，同一文本具有两种不同的颜色。有时很难在两种模式下都选择通过对比度测试的相同颜色。因此，您可以为两种模式选择2种不同的颜色。
用户希望大多数APP在设置中选择不同的文本大小时都能做出响应。若要适应某些文本大小的更改，你可能需要调整布局 为可交互元素提供充足的点击热区。...图稿在不同设备显示时，请注意宽高比的差异。不同的屏幕尺寸可能具有不同的宽高比，从而导致图稿出现被裁剪，出现字母框或竖框的现象。确保在所有尺寸的显示器上都保留重要的视觉内容。...考虑选择一种色调来表示APP的交互性。在Notes中，交互元素为黄色。在日历中，交互式元素为红色。如果你自定义了表示交互的色调，请确保其他颜色不会与之竞争。...提供两种版本的色调，以确保它在浅色和深色模式下都很好看。当你使用系统颜色作为色调颜色时，将自动支持高对比度。 避免对交互元素和非交互元素使用相同的颜色。...为避免这些问题，您可以在Xcode项目的资产目录中提供不同的图像和颜色，以确保在宽色和sRGB设备上的视觉保真度。 在实际的sRGB和宽彩色显示器上预览应用的颜色。
注意我刚才选用的素材是从PPT美化大师的形状中插入的矢量素材（可编辑的形状），当然如果是使用像素图的话也可以，不过颜色无法更改。...在填充形状的时候，一定要填充前自定义好形状的颜色，否则填充之后是无法更换颜色的。 填充咖啡： 图片填充： 下面的WiFi标识是一个（位图）像素图，无法更改颜色。...不过要是能够找到挺精致而且颜色也很协调的图标的话，填充效果也是棒棒哒，如果觉得填充值后图标太大了，没关系，将数据条之间的间距调小，图标就会自动等比缩放（前提是勾选层叠）。...至于间距多少合适，自己看着调啦~ 图案填充： excel的图案填充功能非常有趣，里面内置了大概42款不同的图案样式，而且你可以自己定义前景色、背景并调制出自己喜欢的图案样式。...前景色与背景色调制规则（前景色一定要用深色，背景色使用同一色系的浅色） 只有你想不到，没有它做不到，这种纹理填充风格，非常类似于咨询公司的研究报告中的图表风格。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
