整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
配色##網站##素材##免費##編輯#
配色在整個網站設計中占有舉足輕重的地位，它可以直接影響用戶對網頁的體驗感。作為網頁設計師的你還停留在苦苦比對色卡，一個一個不停
的嘗試中？
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小時內與您取得聯系。
