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设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务