隨著深色模式成為各類互聯(lián)網(wǎng)產(chǎn)品的標(biāo)配,越來(lái)越多UI設(shè)計(jì)師需要在設(shè)計(jì)階段輸出符合規(guī)范的深色主題方案，而不少習(xí)慣用Photoshop做界面創(chuàng)意落地的設(shè)計(jì)師，常常會(huì)陷入“純黑悶眼、層次模糊、配色刺眼”的誤區(qū)，接下來(lái)就結(jié)合Photoshop的功能特性，一步步講清楚創(chuàng)建深色主題配色的正確方法。

首先要選對(duì)基底色,避開純黑誤區(qū)，很多新手做深色主題第一反應(yīng)就是把背景填充為純黑#000000，實(shí)際上純黑不僅會(huì)讓整個(gè)界面缺少呼吸感，長(zhǎng)時(shí)間觀看反而更容易造成視覺疲勞，在Photoshop中操作時(shí)，我們可以先打開拾色器，將背景色的明度控制在L=5~L=10之間，不需要把明度拉到0，同時(shí)可以根據(jù)產(chǎn)品調(diào)性給深灰加一點(diǎn)偏色：走科技風(fēng)的UI可以偏藍(lán)調(diào)，得到#0F172A這類深底色；走人文輕奢風(fēng)的UI可以偏暖棕調(diào)，得到#1E1B1B這類底色；通用型的深色基底可以直接用谷歌Material Design推薦的#121212，適配絕大多數(shù)產(chǎn)品，選好后直接填充背景層即可。

其次活用PS工具拉開界面層次,深色主題的核心是依靠明度差區(qū)分不同組件的層級(jí)，全片深灰只會(huì)讓界面模糊不清，在PS中我們可以借助顏色取樣器工具來(lái)統(tǒng)一管理不同層級(jí)的顏色：首先遵循“組件層級(jí)越高，顏色明度越高”的原則，頂部導(dǎo)航、彈窗這類一級(jí)浮層，明度比背景高3~5，保持色相飽和度和背景一致，就能自然拉出層次感；卡片、按鈕容器這類二級(jí)容器，明度再提升3~5即可，每確定一個(gè)層級(jí)的顏色，就用顏色取樣器工具點(diǎn)擊標(biāo)記在畫布側(cè)邊，所有層級(jí)的顏色一目了然，不會(huì)出現(xiàn)深淺混亂的問(wèn)題，后續(xù)修改也只需要重新取樣調(diào)整，非常高效。

接下來(lái)調(diào)整文本和強(qiáng)調(diào)色,適配深色場(chǎng)景，文本顏色方面，不建議直接用100%純度的純白色，過(guò)高的對(duì)比會(huì)造成視覺疲勞，在PS中我們可以直接通過(guò)圖層不透明度快速調(diào)整：一級(jí)文本用不透明度87%的白色，二級(jí)文本用60%不透明度的白色，占位提示文本用38%不透明度的白色，不用反復(fù)修改色值，拖動(dòng)滑塊就能快速找到合適的對(duì)比度，如果需要驗(yàn)證可讀性，可以打開PS的信息面板，分別取樣文本和背景，就能得到兩者的對(duì)比度比值，只要符合WCAG無(wú)障礙標(biāo)準(zhǔn)達(dá)到4.5:1以上，就能保證不同設(shè)備下的文字清晰度，對(duì)于主色、輔助色這類強(qiáng)調(diào)色，深色主題下要適當(dāng)降低飽和度，避免高飽和顏色在深色背景上過(guò)于刺眼，我們可以直接選中強(qiáng)調(diào)色圖層，打開「圖像-調(diào)整-色相/飽和度」，將飽和度降低10%~15%，略微提升5%左右的明度，就能讓強(qiáng)調(diào)色既醒目又不突兀。

所有配色調(diào)整完成后,還可以把所有確定好的顏色依次添加到PS的色板面板中，保存為專屬的項(xiàng)目深色主題色板，后續(xù)做同項(xiàng)目的其他頁(yè)面，直接調(diào)用色板里的顏色就能保證風(fēng)格統(tǒng)一，不用重復(fù)調(diào)試。

用Photoshop為UI設(shè)計(jì)創(chuàng)建深色主題配色,核心邏輯是放棄非黑即白的極端配色，依靠細(xì)微的明度差搭建層次，根據(jù)深色場(chǎng)景調(diào)整強(qiáng)調(diào)色的飽和度，活用PS本身的顏色取樣器、色板、不透明度調(diào)整這些原生工具，就能快速輸出舒適、高級(jí)、符合規(guī)范的深色主題UI配色。