整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
配色##网站##素材##免费##编辑#
配色在整个网站设计中占有举足轻重的地位，它可以直接影响用户对网页的体验感。作为网页设计师的你还停留在苦苦比对色卡，一个一个不停
的尝试中？
NO！NO！NO！小编在这里为小伙伴们带来了适合网页设计师使用的9个在线配色工具，让配色变得简单，想怎么试色就怎么试色！！
1
colorhexa
https://www.colorhexa.com/
ColorHexa是一款免费的颜色转换工具，用惯了PS吸管工具的小伙伴们，会在这里惊讶的发现，原来除了吸管工具还有这么多类似功能的工具可以用！
假如用户想指定颜色，只需要简单的在搜索框内输入某个颜色名称，它就能显示出一个十分详细的信息，并且还将其分别转换成对应的十六进制、二进制、RGB、CMYK、HSL、HSV、 CIE-Lab、Hunter-Lab、CIE-Luv、CIE-LCH、XYZ、xyY值。
从同色系，到对比色、或者是自动生成的HTML元素等等都有显示。
ColorHexa网站的存在足以满足各种配色工作。对网页设计的朋友来说，ColorHexa是工作中必不可少的网站。
2
coolors
https://coolors.co
Coolors是一个在线生成配色的工具，快速、简单的配色方式可以帮助用户在最短的时间内找到最适合的配色方案。Coolors每次会挑选五种颜色组成的调色板，并且都配有颜色色值，方便大家使用。
如果是第一次使用这个网站的用户，也不用太担心，因为它会有一个简单的使用介绍，告诉你不同的按钮有着什么样的用途，对于全英文的网站来说，这个小介绍还是蛮实用的。
假如你有看中的颜色，可以就在此网页上快速选取，或修改成你更需要的颜色颜色。Coolors整体的使用感还是不错的，当你们想要快速寻找一些配色的方案，可以去Coolors 看一看，也许会有意外的收获哦~
3
palettte
https://palettte.app/
palettte和之前见到的网站不太一样，它是一款色彩编辑和重映射工具，能够帮助你从一个颜色中构建出另一种颜色，还支持单个颜色微调。
不过，小编对这个网站最初的兴趣并不是网站本身，而是设计者在这个网页背后的故事。有空可以去看看，也许会对你有所感触。
4
colorsupplyyy
https://colorsupplyyy.com/app
ColorSupply 收集了全世界设计师们优秀的色彩搭配方案，并且根据五大配色方案进行分类。
网站有一些不同形状的几何插图，用户可以根据上面选中的配色方案。
5
materialuicolors
https://materialuicolors.co
materialui网站的色板是一个从基础颜色到逐渐扩充的过程。主要是针对需要快速寻找设计颜色代码的工作人员。在点击颜色时可以对相应配色进行及时的预览。
6
colorhunt
https://www.colorhunt.co
Color Hunt 这个网站的建立已经有一段时间了，它的存在为众多设计师们提供了许多优秀的配色方案。
并且用户还可以在colorhunt上以票选的形式，选出最喜欢的方案，供大家参考。
7
colorsafe
https://colorsafe.co
Color Safe网站是一个免费的 WebAPP，它可以根据用户选中的配色显示出相关建议。非常的实用。
8
adobe color
https://color.adobe.com
Adobe Color CC之前的名字叫做Adobe Kuler，它是一款Web 的取色器，虽然更新换代多次，但是核心的调色，取色功能并没有改变。
9
open-color
https://yeun.github.io/open-color/
open-color网站对于色彩都经过了优化处理，网页设置上的访问性会更强。
线上配色网站的确是一个快捷的工具，但是对色彩搭配的感觉还是需要设计师们常常留心观察、训练。当然，也要注意审美水平的逐步提高哦~一个方便快捷的工具，以及设计师们独特的配色审美相结合，才能创造出更好的作品。
-end-
原创编辑整理，图片版权归原作者所有
如有问题联系我们
迎观看indesign教程，小编带大家学习 InDesign 的基本工具和使用技巧，了解如何在文档页面上覆盖母版页项目。
向文档的母版页添加项目时，这些项目会显示在所有分配了该母版页的页面上，但是无法在文档页面上选择母版页项目，如果需要在特定的文档页面上编辑这些项目，该怎么办呢？来看看吧。
打开文件，一开始 InDesign 会在「文档」窗口中显示文档的第 1 页，要查看该文档中的所有文档页面和母版页，可以使用「页面」面板。如果此面板未显示，点击「窗口」-「页面」来显示该面板，会看到文档中每个页面的缩略图。
首先查看一下这个文档的母版页，要查看母版页双击 A-Master 图标，在「文档」窗口中显示 A-Master 页面。
可以看到，此母版页包含两个项目，顶部一个红色的矩形，底部一个黄色的矩形。
在「页面」面板中，页面 2、3 和 4 的缩略图上显示一个 A，可以知道该文档的 2 到 4 页应用了 A-Master 页面。
要转到文档的第 3 页，在「页面」面板中双击第 3 页缩略图，如果顶部的矩形用黑色，黄色的矩形变为红色，这个页面的效果可能会更好。
要改变颜色，首先需要使用选择工具选中这两个矩形，在「工具」面板中选择「选择工具」，然后点击黄色矩形，但是并不起作用。
可以看到在黄色矩形上有一个模糊的虚线边界，这表示它是一个母版页项目，母版页项目通常无法在文档页面中选择，这样是为了避免意外移动或删除它们。母版页项目的意义在于，保持页面之间的一致性。
但是如果你确实想在文档页面中删除或更改母版页项目，可以覆盖或解锁它们。点击「页面」面板中的「Menu」图标，进入「面板」菜单，选择「覆盖所有主页项目」。
因为在「页面」面板中选择了第 3 页，因此该页上的所有母版页项目都会被覆盖。现在可以点击选择页面顶部的矩形，使用「属性」面板中的「填充」-「色板」，将颜色更改为「黑色」。
然后选择页面底部的矩形，使用「填色」-「色板」，将颜色更改为「红色」。
在「页面」面板中双击第 2 页缩略图转到第 2 页，「文档」窗口中会显示第 2 页。
如果完全删除这一页页脚的矩形，但是保留顶部的矩形，因此不需要覆盖所有母版页项目，只需覆盖页脚的矩形。可以在文档页面上轻松覆盖单个母版页项目，按下 Command+Shift 键，并点击黄色矩形，这样就可以只覆盖这个项目。
要删除矩形，点击「编辑」-「剪切」。
再次转到第 3 页，在「页面」面板中双击第 3 页缩略图，在「文档」窗口中显示第 3 页。
如果将第 3 页上顶部和底部的矩形恢复成原来母版页中的样子，要做到这一点，可以对文档页面重新应用母版页。在「页面」面板中将 A-Master 缩略图拖动到第 3 页缩略图上，当看到页面缩略图周围出现黑色轮廓时松开鼠标。这样就可以将第 3 页中的母版页矩形恢复成之前的颜色，并再次锁定它们。
现在对第 2 页进行相同的操作，首先双击第 2 页缩略图，使第 2 页显示在「文档」窗口中。
然后将 A-Master 缩略图拖动到第 2 页缩略图上，在看到黑色轮廓时释放鼠标，这样就可以恢复页面底部的矩形。
母版页可以为文档添加一致的项目，例如标题、页脚和页码，当你希望更改某些页面的母版页项目时，可以在单独的文档页面上进行覆盖。
以上就是在inDesign软件中覆盖母版页项目的方法。
inDesign软件下载地址：Indesign 2021 for mac(Id 2021)
https://www.macz.com/mac/7645.html?id=NzY4OTYwJl8mMjcuMTg3LjIyNi4w
源：彩云译设计（caiyunyisheji）
以一个 app 改版案例，深入浅出地告诉大家如何适配深色模式，同时给出了正确和错误的示范，相信对于目前流行的深色设计趋势来说，是非常的实用了。
Google 在 2019 年度 I/O开发者大会上宣布，安卓将会从系统底层支持深色模式。同时，我们也会看到更多支持深色 UI 的应用正在推出。
深色 UI 很快将成为一种常见的模式，其他应用也很快会遵循这一模式。
在这篇文章中，我将会以我们的应用 Shutter Points 为例，解释如何从浅色 UI 适配深色 UI。
优化颜色
1. 调色板
Shutter Points UI 的主要颜色是单色为主，目的是为了突出图片内容。主色调用于主导航栏，标签中使用 5 种辅色将图片注释与对应的类别联系起来。
△ Shutter Points 中的主色和辅色以及在界面中的应用截图
当应用深色模式时，亮色和低饱和度的颜色相比于饱和度高的颜色会更受欢迎。使用亮色的时候要确保元素易于阅读，并配合一个对比度适中的暗色背景。
使用谷歌提供的颜色编辑器（https://material.io/resources/theme-editor/）可以为每个品牌颜色创建一个自定义色板，然后从中选择合适的颜色。
根据谷歌设计规范（https://material.io/design/color/dark-theme.html#ui-application）建议，在使用深色模式时，一个好的经验法则是将调色板的色值范围保持在 200 左右。
（彩云注：谷歌提供的颜色规范中 100-900 数值的具体意义，感兴趣的请见知乎上的回答：https://www.zhihu.com/question/26340807，这里就不做深入解读了。）
任何一个深色界面都需要有一个合适的对比度，按 WCAG 的 AA 级标准来说，界面中的文字与背景的对比度至少要达到 4.5 : 1。
△ 品牌颜色中的一个浅色被选为深色模式配色
2. 界面颜色
有了新的配色方案在手，是时候改变界面的颜色了。深色主题中的所有界面都是以默认的深灰色 #121212 作为基准的。
在 UI 组件上添加不同透明度的白色，根据不同的层级搭配不同的透明度。
△ 叠加的层次范围从0%到16%
（彩云注：深色模式中的高度 [ elevation ]，准确的含义其实是 Android 开发中的一个样式代码，用来设置界面的权重的，比如 android:elevation=”1dp”，层级就在 android:elevation=”0dp” 之上了。）
为了表示不同的层级高度，我们需要在组件的样式中调整 2 个值：
无论使用哪种主题，应用正确的高度将确保元素保持在一个一致的视觉层次。想知道应用中透明度该用多少？这里有一个表：
（彩云注：我把规范中的表格帮大家截图出来，贴在这里，想看更多详细内容请见：https://material.io/design/color/dark-theme.html#properties）
组件中通过使用不同透明度的白色覆盖来保持它们在深色主题中的高度一致。
3. 避免大面积颜色
在某些情况下，仅仅将颜色由亮变暗并不会得到一个好的结果。
例如在我们 app 的引导页中，浅色模式下使用次要颜色能突出内容，但在深色模式下，整个背景都是高饱和度的颜色，却会让界面显得非常的刺眼。
对于这些情况，最好是选择一个深色背景，然后保留次级颜色用于标题等小面积元素。
大面积的高饱和度颜色不适合用于深色模式。
文本优化
1. 文字颜色
谷歌设计规范主要强调了 3 种文本颜色。
这里主要是通过修改白色或黑色的不透明度作为颜色值。
△ 不同重要级和不同大小的文本在整个UI中传递出了层次结构，这个原理也适用于深色主题。
2. 注意对比度
所有的文本内容应该易于阅读并符合标准规范。网页标准 WCAG 2.0 中规范 AA 级别的文本，普通文本与背景之间的对比度为 4.5 : 1，大标题文本这个比例为 3 : 1。
在我们的 App 中，直接把浅色背景下的标签颜色带到深色模式中，文本开始变得很难阅读。为了得到一个好的对比度，所有的标签文本需要修改到深色，识别度会更高。
△ 彩色元素上的文本需要改变颜色以保证易读。
谷歌做了一款测试工具，帮助确定在哪个颜色值时需要将白色文本改为黑色文本，工具的地址在（https://material.io/design/color/the-color-system.html#tools-for-picking-colors）
（彩云注：彩云亲测，还挺方便使用的，建议用电脑端打开这个页面试用一下，对于配色纠结症患者，有良好的治愈效果。）
小建议：推荐一款在 sketch 和 Adobe XD 中使用的小插件叫 Stark，可以方便的测试出你设计的界面可用性。
插画和动效
如果应用包含插画和图形元素，这些也需要做好深色适配工作。
如果插画有「背景」和「主题」，最好是将背景的饱和度降低，以保证对于主题的关注。
Lottie 动画可以通过在 AE 中的源文件来重新导出 json 文件，来调整动画的明暗适配，很方便。
△ 深色主题插画同样让用户关注到插画的主题内容。
总结
随着深色主题被引入操作系统级别，应用将需要在不破坏任何原有体验的情况下做出适配优化。
深色主题并不是仅仅做简单的反色。
设计师和开发者必须明确以下几点：
原文：https://medium.com/snapp-mobile/design-for-the-dark-theme-9a2185bbb1d5
作者：Pierluigi Rufo
译者: 彩云Sky
*请认真填写需求信息，我们会在24小时内与您取得联系。
