MDC 1.1.0更改了一些默认的小部件样式，以更好地符合“材料设计”准则。...但是，升级后，您可能会注意到某些控件颜色和其他属性的某些意外更改。 ? 在上面的示例中，按钮发生了变化、文本和图标的颜色发生了变化。FAB 现在变成了蓝绿色，并且文本字段看起来完全不同。不用担心。...MDC的颜色调色板直接从 Material Design color system 中绘制。...MDC窗口小部件使用这些属性来为其背景，文本，图标等着色。要了解哪些小部件使用哪种颜色，需要检查源代码中的默认小部件样式。 AppCompat和框架中还存在一些颜色，但不再适用于此新系统。...，我们还应该使用新的“ on”颜色属性 <!
零、前言 这是两个比较小的点，放在一起说一下： 沉浸标题栏：现在基本上都用沉浸标题栏了，不然最顶的一小块跟app风格不搭 TextInputLayout：包裹一个EditeText，多用于登陆验证的输入框...--values-v21 5.0 以上提供了 setStatusBarColor() 方法设置状态栏颜色。...--Android 5.x开始需要把颜色设置透明，否则导航栏会呈现系统默认的浅灰色--> @android:color...依赖 implementation 'com.android.support:design:26.1.0' 输入框获得焦点后会有一个上移动画，还可以设定小眼睛显隐密码 ?...> 其中app:passwordToggleEnabled="true" 显示小眼睛 还有一个点是改变颜色： 可以自己定义一个主题，设置colorAccent的颜色值 <style name
TextInputLayout效果 TextInputLayout动画实现原理 原本以为在点击输入框的时候，会是在EditText的Focus改变的时候，开始执行动画，结果发现是在整个TextInputLayout...refreshDrawableState 而在updateLableVisibility函数中，会判断当前EditText中是否有文字或者获取到焦点，如果有的话，则开始执行expandHint(展开文本...animateToExpansionFraction CollapsingTextHelper在这个类中，保存了当前Animation执行的到的状态，比如说当前绘制的hint文案的位置(x,y)，画笔的位置和颜色...而在setExpansionFraction中，会根据当前的值和目标值计算出来要绘制的位置，以及颜色等，最后用ViewCompat的postInvalidateOnAnimation重绘View ?...TextInputLayout.onLayout 在TextInputLayout中的draw中，会根据onLayout中计算出的CollapsingTextHelper矩形位置以及缩放大小开始绘制文字
colorPrimary App Bar 的背景颜色，也是一个 APP 的主色调。...colorAccent 许多控件在选中状态或者获取到焦点的时候会使用这个颜色，比如： CheckBox：checked 状态 RadioButton：checked 状态 SwitchCompat：checked...状态 EditText：获取焦点的时候的下划线和光标颜色 TextInputLayout：悬浮 label 字体颜色 等等 android:navigationBarColor navigation...比如： 没有被选中的 CheckBox 或者没有被选中的 RadioButton 失去焦点时的 EditText ，Toolbar 溢出按钮颜色 等等 colorControlActivated 在某些时候...editTextColor： 默认 EditView 输入框字体颜色 TextColor TextView 的文字颜色 更多查看这里 样式介绍 从 Android 5.0 开始，Android 系统引入了
github地址：https://github.com/shuaijia/MaterialDesignProject 添加依赖 TextInputLayout是在Material Design中的,如果我们要使用的话...,必须在gradle文件中配置 开始使用 TextInputLayout是一种新的继承自LinearLayout的布局，使用时其只能包含一个EditText或其子类控件（如AutoCompleteTextView...） 还可通过设置hint和error来显示浮动标签 注意：一个TextInputLayout中 有且只有 一个EditText！...举例 浮动标签 字数统计 错误提示 密码框右侧图标 虚拟键盘监听 有时候我们在用虚拟键盘的时候,在输入账号之后,我们点击下一项,焦点会跑到输入密码这一栏,当我们密码输入完成之后,点击确定按钮就能登录了...,这个怎么实现的呢.
，以下几个属性和方法需要声明一下： app:hintAnimationEnabled="true"可以开启动画，这个为true时，获得焦点的时候hint提示问题会动画地移动上去。...继承自LinearLayout，说明它是一个ViewGroup public class TextInputLayout extendsLinearLayout 先从构造函数开始看起 public TextInputLayout...，在文本改变之前，正在改变的时候都可以做相应的逻辑处理，往下看有更改EditText的Margin的方法 private LayoutParams updateEditTextMargin(ViewGroup.LayoutParams...，同时new了一个TextPaint来进行文本的绘制，然后是new出来3个矩形区域，mCollapsedBounds：输入框处于折叠状态下的矩形区域，mExpandedBounds：提示框获得焦点，提示文字向上展开的矩形区域...= mExpandedTextColor，给mTextPaint设置颜色，而这个颜色会通过blendColors方法将mCollapsedTextColor与mExpandedTextColor进行混合
2、部分校正工具（配有圆形/逐渐校正过滤器）可以校正指定的圆形区域中的部分颜色。例如，部分如果要更改亮度和白平衡，则可以轻松指定直观区域并进行更正。...SILKYPIX Developer Studio Pro开发了全新的焦点平面和用于检测离焦部分的逻辑，因此您只能在焦点上应用较强的清晰度。...4、LTone曲线用于生动的高级表情通过使用RGB色调曲线校正色调曲线的亮度，可以用白色的色调再现色彩。这是由于在RGB处理期间连接到亮度的颜色。...即使在使用SILKYPIX Developer Studio Pro7色调曲线中安装的“L色调曲线”更改亮度时，也可以保持色彩。“L”是指“亮度”，可以仅用L曲线调整亮度信息。...5、图像分级兼容性在拍摄期间，某些摄影师可能会在选择OK时切换到液晶显示屏上的操作相机侧（通常为星号）。 SILKYPIX允许链接和反映在相机上设置的“评级”。
1.颜色术语 颜色术语构成了我们颜色知识的基础。将诸如色调，色调和阴影之类的颜色术语视为我们可以用来开发独特调色板的工具。 色相（Hue） ? 色相是色彩的技术术语。...考虑一下您的品牌颜色，例如一盘鳄梨吐司上的盐和胡椒粉。盐分过多，会压倒自然风味，而盐分过少，则平淡无奇。 在添加颜色以增强品牌在界面上的效果时，请考虑在何时添加颜色，以及添加颜色的位置。...您会注意到，在如Instagram或Twitter这样包含很多色彩和不可预测内容的应用程序中，它们的界面往往非常简洁。这种设计非常微妙，它将用户的视觉焦点从界面移开，并将其聚焦在内容上。...我们还应该在错误颜色旁边附加错误消息和图标，以确保清晰度并提示色盲用户注意。 8.一致性和上下文 ? 设计的颜色用法应保持一致，因此即使上下文发生变化，颜色也始终统一。...首先从颜色理论和基本的工具理解开始。 第一步：主色调和系统颜色 ? 一旦有了主色调，就需要为文本，背景，容器等添加颜色。通常，我会选择用于文本的深色和用于背景的浅灰色。 第二步：创建调色板 ?
布局还包括一个触发登录序列的按钮。背景颜色是漂亮，平坦，浅灰色。...可以看到并不是非常美观，下载我们引入 TextInputLayout 稍作改动 ---- 使用 TextInputLayout 我们终于到达了本教程中最有趣的部分。...setError 设置将显示在下方的红色错误消息EditText。如果传递的参数是null，则清除错误消息。它还将整个EditText小部件的颜色更改为红色。...这直接影响布局的大小，增加较低的填充以为错误标签腾出空间。在设置错误消息之前启用此功能setError 意味着在显示错误时此布局不会更改大小。...每个小部件的颜色都直接从style.xml文件中指定的主题颜色中绘制 。只需打开它并将colorAccent项目添加到活动主题即可更改表单的颜色方案。
TextInputLayout 基础样式、错误提示、字数限制等等 效果图： 【2020-12-13】Theme切换到MaterialComponents之后，是有一些变化的，比如默认背景、默认padding...app:counterMaxLength="3" app:counterOverflowTextAppearance="@style/MyOverflowText" 根据单词字面意思都能看的懂吧...在上面的“错误提示”中，有一段判断是这样的 if (mTilName.getEditText().getText().length() > mTilName.getCounterMaxLength())...getCounterMaxLength()方法可以获取字数限制的最大值。...="true" app:passwordToggleTint="@color/colorPrimary" app:passwordToggleTint是换图标的颜色 换图标是app:passwordToggleDrawable
多谢网友提醒，将上篇链接也加上《颜色革命（上）》 1 颜色战略实践 1.1 App Logo形象设计 上篇说到，对于移动端产品的设计，主要集中在品牌主色的运用以及品牌Logo形象的运用...色块型设计，其实就是镂刻工艺在移动产品上的运用，图片一般采用主色打底，图样空心的形式，以色块的“实”来极力突出主题颜色与品牌形象，形成用户视觉的“地毯式轰炸”。...对于白色打底的APP而言，因为白色本身是弱视觉吸引力颜色，而且具有视觉反衬作用，因此任何一种颜色放上去，都足以抢占用户第一视觉焦点。...高亮图标与常态图标示例： 彩色常态图标示例： 1.2.8 支线颜色选择建议 除了主题颜色的运用，APP中也需要有其他辅助类颜色来满足不同的呈现需求，这些颜色的选择...在CMF的选色过程中，对于数值内容的显示，最开始只有三种颜色——橙黄色、黑色、白色。这样虽然页面颜色效果足够统一，但也不免单调死板。
每个页面的焦点肯定是最中心的图片和字母，而焦点的形成和色彩的比例与运用脱不开关系。控制色彩的占比，无论是多还是少，只要有明确的目的，总能形成吸引注意力的焦点。...Thinx 这个案例我非常喜欢，并且经常会用到，因为它证明了设计师并不一定非得靠高饱和度的霓虹色来创造高对比度的配色。即使是两种平衡的颜色，也能让整个设计脱颖而出。 ...高度一致的配色方案能够创造出视觉模式，而延伸到用户体验上，则会让整个UX呈现出模式化的特征。...就像用户习惯了某些特定的图标之后，在其他地方看到这些图标就知道它们的含义，明白该如何交互了。比如，小房子图标会让用户想到首页、主页，而垃圾桶则会关联上删除的概念。...Comotion 的工作室首页采用了几种不同的色彩，但是这些色彩的色调是非常接近的，从而创建出了一种和而不同的配色方案。
用法 设置3-5个一级页面目的地 这些一级页面是需要直接访问的 颜色 激活的页面icon：1、底部导航栏为黑色/百色——用软件的主色调；2、如果底部导航栏已经有了颜色——使用黑色/白色。...---- 风格 图标和文本 因为底部导航动作以icon呈现，所以底部导航中的内容应该与icon进行适当的互动。...应按下列要求制作每一个动作（目前并不适用，因为图标无法100%传递标签的内容）： ·当页面处于焦点时，显示页面的icon和标签； ·当只有三个动作时，始终显示icon和文本标签； ·如果有四个或五个动作...颜色 激活的页面icon：1、底部导航栏为黑色/百色——用软件的主色调；2、如果底部导航栏已经有了颜色——使用黑色/白色。 文本标签 文本标签为底部导航icon提供了简短、有意义的定义。...底部导航栏不应用于： ·专注于单一任务的观点，如电子邮件“撰写”页面。 ·包含用户首选项或设置的页面 在Android上，后退按钮不在底部导航栏视图之间导航。
参考品牌定位和品牌形象来确立不少于两种视觉风格提案并进行分析，当方案确立之后再对其进行深化设计，包括界面元素的布局、色调风格、图标、皮肤的表现等方面。 ?...视觉效果上的极简，功能性上的最大化，又不妨碍信息的沟通，很大程度上必须依赖字体的编排，为了使文字的字体更加符合扁平化。 ?...我们在进行颜色的选择时都会考虑到视觉疲劳因素，通常选择视觉上相对柔和，在使用过程中尽量延迟视觉疲劳出现的时间的颜色，通常的做法是降低色彩的饱和度。...有简洁、形象的控件图标，也有线条色彩丰富、具有描述性的图标，它们的共同特征是都具有基本的几何形状。 ?...进行版面设计的时候，在重要信息四周加上留白，就容易将视线集中到小面积的内容上去，使焦点得到突出。
设计侧 1.基于用户，通过用户调研分析得到的反馈：旧版游戏中心无论在“内容的展示” 或“功能的引导”上都是处于混乱的状态，用户进入游戏中心后无法定位界面的第一视觉焦点，关键信息及内容获取较难。...（2）颜色降噪：多彩的图标单独来说具有不错的视觉表现，但整体上缺乏关联性，且作为“基础图标”以及从“品牌性”“一致性”方面考虑也存在着挑战，对于品牌色的透出不够完善，因此需要进行整体的“颜色降噪”，增强品牌色调的感知...C.颜色运用 颜色作为另外一个维度的视觉感知，相比于图形更能提升用户对于品牌的感受。合理明确的品牌色调可以帮助用户加深对于产品的认知。...色调延续 主色调的设计主要考虑两个方面：1.游戏中心本身存在于手机QQ，用户对于手机QQ具有强烈的品牌色调感知，因此对于游戏中心本身，希望可以起到一个延伸和承接；2.基于次元空间-科技感本身的颜色的感知...最终确定游戏中心的主色调为蓝色调，并且使用大跨度的渐变效果，让颜色更具有炫光的感觉。 颜色拓展及分类 手机QQ游戏中心作为一个多元化的游戏平台，很难使用单一的颜色来表达完整的内容层次。
# 从零开始 # 从功能开始，而不是从布局开始 "应用程序 "实际上是一系列功能的集合 在设计出一些功能之前，甚至都不知道需要哪些信息来决定导航应该如何工作 与其从外壳开始，不如从实际功能开始 #...，让填补空白变得更简单 把最深的色调称为 900，基本色调称为 500， 最浅的色调称为 100 逐渐补全，让这些色调感觉像是两边色调的完美折衷 # 灰色 对于灰色来说，底色并不那么重要，从边缘开始...，而不仅仅是变浅或变深 由于不同的色调具有不同的感知亮度，改变颜色亮度的另一种方法就是旋转色调 要使颜色变浅，可将色调向最近的亮色调旋转 60°、 180° 或 300° 要使颜色变暗，可将色调向最近的暗色调旋转...# 旋转色调 如果一开始就使用背景色， 然后简单地调整明度和饱和度， 你会发现如果不接近纯白色， 就很难达到建议的对比度 由于有些颜色比其他颜色更亮，要想在不接近白色的情况下增加对比度， 一种方法是将色调旋转到更亮的颜色...# 更改背景颜色 这对于强调单个板块以及在整个页面部分之间增加一些区别非常有效 如果想要更有活力，你甚至可以使用轻微的渐变色 为了达到最佳效果，应使用相差不超过 30° 的两种色调 # 使用重复图案
【UI 改进】 现在，同步、色调曲线和颜色具有更新的外观，无论新用户还是经验丰富的用户，都能够更轻松地从这些基本工具中获得最大价值。 ...“同步”图标显示同步的当前状态，将鼠标悬停在图标上方可查看有关当前状态的更多信息。单击“同步”图标将打开一个弹出菜单，其中包含基于当前同步状态的更多选项和详细信息。 ...【色调曲线】 更新了“色调曲线”的 UI，使得在“参数”和“点曲线”通道之间切换更加容易。您现在可以通过输入点曲线和红色、绿色和蓝色通道的值，更精确地进行调整。...软件特色 【“颜色”面板】 “颜色”面板中选择颜色的 UI 也已更新。 【局部色相调整】 1、现在，您可以进行局部调整和微调色相，从而对图像的特定区域进行微调，且不会影响图像其余部分的颜色。...在应用局部调整时使用新的“色相”滑块来更改选定区域的色相。 2、滑块的顶栏是参考色相栏，底栏是色相滑块。“色相”滑块和“色相”滑块的中心颜色基于所选区域的颜色。
今天这篇文章应该算是Material Design系列的补充篇，因为这篇文章本来应该放到前面讲的，因为讲的是主题嘛，对于一些状态和颜色的介绍，因为我们一新建一个项目时，系统自带了三个属性的颜色，现在就重点介绍这三个颜色属性的意义和作用...这个也只能在API21以上才能用各控制元件的预设颜色和colorAccent正好对应 在Style上设置 以上的颜色属性均是在 style 的属性中设置。...关于这些颜色的属性介绍就到这里了，相信大家应该都明白了。...TextInputLayout TextInputLayout继承LinearLayout，因此我们需要将EditView包含在TextInputLayout之内才可以使用，言外之意：TextInputLayout...TextInputLayout常用的方法有如下： setHint()：设置提示语。 getEditText()：得到TextInputLayout中的EditView控件。
您可以根据自己的喜好更改为任何名称。 如果您对TailwindCSS和Nuxt.js的工作原理有基本的了解，那么对遵循本教程将会有所帮助。...但在开始使用它之前，我们需要执行一些额外的工作以确保 TailwindCSS 顺利工作。...例如，我们想要来自 MingCute 集的调色板图标，名称为palette-2-line，如以下屏幕截图所示： 为此，我们可以在元素i-mingcute-palette-2-line上使用该类span...，其中键是颜色的深浅（通常从 50 到 900），值是颜色代码。...例如，以下代码定义了一个名为 的调色板sea-buckthorn，其色调范围为 50 到 900，以及每种色调的颜色代码： module.exports = { theme: { extend
Adobe Photoshop 2022是一款十分强大的电脑图像处理软件知识兔，一直以来都被广泛的应用于平面设计、知识兔创意合成、美工设计、UI界面设计、知识兔图标以及logo制作、绘制和处理材质贴图等各个领域中...6、高效的工作流程知识兔：由于 Photoshop 用户请求的大量功能和增强，您可以提高工作效知识兔率和创意。自动伸直图像，从屏幕上的拾色知识兔器选择颜色，同时调节许多图层的不透明度，等等。...10、增强的 3D 现实主义和知识兔丰富的素材：借助简单的阴影创建、基于图像的光照以及玻璃和铬黄等素材知识兔增强 3D 对象和设计。通过调整景深范围，尝试 3D 场景中的不同焦点。...6、高效的工作流程知识兔：由于 Photoshop 用户请求的大量功能和增强，您可以提高工作效率和创意。知识兔自动伸直图像，从屏幕上的拾色器知识兔选择颜色，同时调节许多图层的不透明度，等等。...10、增强的 3D 现实主义和知识兔丰富的素材：借助简单的阴影创建、基于图像的光照以及玻璃和铬黄等知识兔素材增强 3D 对象和设计。通过调整景深范围，尝试 3D 场景中的不同焦点。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
