01 單色配色實操

選擇基色“H:255 S:100 B:100”的深藍色為背景。

然后繪制兩個正圓，調整底對齊：

大圓顏色調整為和背景相同的顏色，透明度降低至0；調整小圓的顏色，色相（H）和亮度（B）保持不變，降低飽和度（S）為80%。

為了讓顏色混合更融洽，給主體執行“效果—模糊—高斯模糊”；再執行“效果—紋理—顆?！碧砑淤|感。

最后添加文案排版，方案一就設計好了。

可以看到本案例精簡了色彩層級，色調干凈統一且穩定。利用兩款同色相顏色的漸變層次變化，產生了低對比度的和諧美感。

使用同樣的方法還可以設計出其他方案：

02 單色配色實操

第二個方案把英文作為主體。從“視圖”菜單中打開“符號”面板，選擇英文點擊“新建”按鈕，把英文設置為新符號。

接著畫出圓形外框，執行“效果—3D—凸出與斜角”命令，設定旋轉角度和凸出深度：

點擊“貼圖”進入貼圖視窗，勾選“三維模型不可見”，表面選擇“4/4”，符號找到新建的英文符號，勾選“縮放以適合”將文字縮放成適合的大?。?

背景選擇“H:255 S:100 H:100”的深藍色作為基色。把英文圖形執行“對象-擴展外觀”，雙擊進入圖形中分別給文字和背景填色，保持色相（H）不變，調整飽和度（S）和亮度（B)的數值。

使用相同的方法制作出其他英文圓環，并填充顏色：

最后加入文字排版，設計完成。

可以看到此方案雖然選擇了多個顏色，但通過單色搭配可以得到統一協調的視覺效果。

使用同樣的方法還可以設計出其他方案：

原文地址：藝海拾貝Design（公眾號）

作者：鄧海貝

轉載請注明：學UI網》單色配色你真的會用嗎？（實操篇）

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( m.shtzxx.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務