关于UI彩平图美观度的一点思考，顺便分享一点制作经验

z258218

2025.02.20更新 篇二：在彩平基础上添加灯光效果

0.前言
本人家里装修得比较早，那时候智能家居的理念还不广，但是也购置了一些基于wifi的智能家电产品。
后来24年在上网的时候了解到智能家居，从此便开启了一发不可收拾的家庭改造模式。
入坑HA已经是24年末了，目前还不太会代码，对HAOS的研究也仅仅处于刚购买了冬瓜大大的盒子，属于真正的新手小白一枚
但是又想做一个美观又好用的UI页面，翻遍论坛好像也只找到消逝大佬的教程贴——[UI界面] 彩平图户型图制作教程
于是萌生了分享一点自己浅薄经验的想法，但是本人由于懒癌晚期，一直拖在现在才写了一点东西，
说得不对的地方还望各位大佬们多多指正，大家相互交流。
好了扯远了，下面进入正题——
（注意：本教程需要一定的CAD、PS软件基础）

1.对目前网络上彩平美观度的一点思考

目前网络上大家自制的彩平大部分是使用酷家乐绘制的，但是该平台主要是做3D户型为主，在平面图的表现上还是比较薄弱的。
其实大家可以多看看网络上的各个设计师们分享的彩平面素材，会发现人家画的彩平在视觉上让人感觉很舒服（以下图为例）：

彩平案例

这是为什么呢？

我认为主要原因在以下方面：

① 色彩搭配：整体采用低饱和度的灰色系为主色调，色彩统一和谐，没有强烈的色彩冲突；
② 图面清晰：线条简洁流畅，家具、设施等元素的绘制规整，信息传达清晰，不会让人感觉杂乱；
③ 比例协调：家具、空间等各部分的比例看起来较为合理，符合人们对正常居住空间的认知和视觉习惯；
④ 排版规整：布局排版上，各个元素分布均匀，留白适当，不会有过于拥挤或空旷的感觉，带来良好的视觉平衡感。

但是！（划重点，但是来了）
上述案例里的彩平图是白景，适合设计师们给他们的客户展示方案用的，
我们智能家居UI页面通常还要增加灯光元素，所以不太适合使用此场景，那么怎么办呢？
多搜索，还是可以找得到暗黑场景的彩平的！



2.使用CAD绘制基础平面图

2.1 打开CAD软件，并创建图层
创建图层的意义在于方便管理图纸中各类型元素，在后续打印中可以统一显示

①打开图形特性管理器（快捷键：la），分别创建“墙线、墙体填充、装饰线、家具”等图层，并赋予不同颜色（这里的颜色无所谓，按自己喜欢的来就行，后续在ps中统一调整）



②根据自己家的实际尺寸绘制墙体轮廓，并填充墙体颜色

单位使用毫米，如家里一面墙的长度为3米，则在软件中输入3000

（这里要尽量测量准确一点，因为下一步的家具素材是根据真实尺寸创建的，尺寸偏差太离谱的话就不好摆放了）



③使用动态家具素材，将家具摆放进去，尽量还原家里实际摆放状态



所谓动态家具，就是指CAD内创建的可以变换形状、样式的图块，我会在后面分享给大家（见下图）



④补充绘制素材库里没有的东西，如飘窗线、个别定制柜、橱柜等




⑤ 完成CAD平面图绘制，开始打印图纸，为下一步PS做准备

打印设置可按以下设置来，横向纵向根据实际户型选择



将墙体填充与其他元素分开打印，得到以下两个图




3.使用PS软件进行后期处理
①将上面打印的两个PDF导入PS，注意这里选择媒体框



②吸取参考图颜色，制作底版


③选择线框图层，按Ctrl+U，将明度拉至100



④填充家具颜色



⑤案例中墙体的颜色也是渐变的，所以跟步骤2一样，填充墙体颜色



⑥优化细节



⑦添加阴影



⑧这时发现颜色好像有点过深，没关系，可以调整透明度



⑨成图，右侧为图层关系，就只有这么几个图层，是不是很简单？



熟练了之后可以自己制作各种暗黑风格的彩平图



下一步预告

完成彩平后，还需要添加灯光效果，实现在平面图上控制家里的各种灯光及电器

类似下图效果



最后
本人非专业人士，只是从自己平常浅薄的软件知识中琢磨出来的做法
如果坛友们正好会这两个软件，不妨也自己动手试试
如果不会软件的，但是手头正好有装修公司提供的CAD源文件的，我可以帮忙做一张彩平图纸，而你的代价是教我各种配置ha的经验
但是不保证时效，本人懒癌晚期患者

（真有定制需求的，也可给我发消息）


CAD动态图库素材：
链接: https://pan.baidu.com/s/1msToRJ4o__NivN8K8s-FzA?pwd=qj83 提取码: qj83

shadowify 2.0 插件：
链接: https://pan.baidu.com/s/1pPqolTJaDwWx-rxnXp5lxA?pwd=unap 提取码: unap

z258218

先自己坐个沙发，万一以后有用呢

ck3

高级啊大佬，期待后续更新

dzzzzzz

牛啊 学习学习

taioner

留名,后续再来学

xhily

牛皮  实在不会CAD 搞了一晚上没弄成功

copythis

楼主可否分享一下最后一张图中的灯光效果psd文件。。。。

z258218

copythis 发表于 2025-2-20 10:52
楼主可否分享一下最后一张图中的灯光效果psd文件。。。。

可以的，后续我会出一篇灯光教程，届时整理好了一起分享