4. 标准化画面布局设计
在WinCC项目中，画面布局一旦确定，后续所有画面都会沿用同一套坐标、边距和分区规则。如果前期没有建立标准，项目后期往往会出现按钮位置漂移、导航栏宽度不一致、不同分辨率下控件错位等问题。标准化布局的核心目标不是“好看”，而是让画面在目标分辨率下可预测、可复用、可批量维护。
一、先确定设计基准分辨率，再谈适配
WinCC画面本身是绝对坐标系统，控件的位置和尺寸以像素为单位。因此第一步必须明确设计基准分辨率，即所有画面在组态时使用的画布尺寸。常见工业HMI基准分辨率包括：
- 1280×800（10.1"~12.1"宽屏面板）
- 1366×768（15"~15.6"宽屏）
- 1920×1080（19"~24"宽屏显示器或工控机）
假设某项目现场使用15.6英寸1920×1080工控一体机，则基准分辨率应设为1920×1080。所有画面按此尺寸组态，运行时若实际显示器分辨率不同，再通过WinCC的“画面窗口缩放”或“自适应画面”功能处理。
分辨率适配有三种典型策略，选择依据是现场设备是否统一：
| 策略 | 做法 | 适用场景 |
|---|---|---|
| 固定基准 | 所有画面按1920×1080组态，运行时全屏显示 | 现场显示器规格统一 |
| 等比缩放 | 画面按基准组态，运行时按比例缩放至实际分辨率 | 分辨率有差异但宽高比一致 |
| 分区自适应 | 导航区固定宽度，工作区按剩余空间拉伸 | 宽高比不一致或窗口化运行 |
需要特别注意的是：等比缩放会导致字体和控件同步缩小，若缩放比例低于0.8，文字可能难以辨认。因此当实际分辨率明显小于基准时，应优先考虑重新设定基准，而不是依赖缩放。
二、栅格系统：让对齐有据可依
栅格系统是把画布划分为等宽列和固定行高的辅助网格，所有控件按网格对齐。WinCC本身不提供栅格布局容器，但可以通过以下方式落地：
- 在画面属性中设置网格间距（如10px或20px），组态时开启“对齐到网格”；
- 用矩形或线条绘制辅助参考线，放在独立图层，组态完成后隐藏；
- 统一控件尺寸为网格的整数倍，例如按钮高度40px、间距10px、模块宽度200px。
推荐采用8px基础栅格或10px基础栅格。以1920×1080为例，若采用10px栅格，画布横向192格、纵向108格。导航区占20格（200px），工作区占172格（1720px），左右边距各留1格（10px），这样所有分区边界都落在网格线上。
栅格的价值在于：当多个工程师协作组态时，只要约定“控件左上角坐标必须是10的整数倍、控件宽高必须是10的整数倍”，画面就能保持视觉一致，后期修改时也不会因为1~2px的偏差反复调整。
三、导航区与工作区的划分原则
工业HMI画面通常划分为两个核心区域：导航区和工作区。导航区承担画面切换、报警入口、用户登录、系统状态显示等功能；工作区承载具体工艺流程、设备操作、参数设置等内容。
划分原则如下：
- 导航区位置固定：通常放在左侧或顶部。左侧导航适合画面数量多、层级深的项目；顶部导航适合画面数量少、横向流程为主的项目。一旦选定，全项目统一。
- 导航区宽度恒定：左侧导航建议宽度200~260px，顶部导航建议高度60~80px。导航区不随工作区内容变化而改变。
- 工作区独立成画面窗口：在WinCC中，主画面只放导航区和“画面窗口”控件，具体工艺画面作为子画面加载到画面窗口中。这样切换画面时导航区不刷新，减少闪烁。
- 预留状态栏：在底部或顶部预留20~30px用于显示当前用户、报警计数、通信状态、时间等全局信息。
四、用画面窗口实现导航区与工作区解耦
WinCC中实现上述布局的关键对象是画面窗口（Picture Window）。主画面（如Main.pdl）只包含三部分：导航区控件、一个画面窗口、状态栏。画面窗口的属性设置如下：
对象：画面窗口1
位置：X=200, Y=60
尺寸：宽=1700, 高=1000
属性：
画面名称 = "Area_Overview.pdl" // 初始加载的画面
边框 = 否
适应画面 = 否
可关闭 = 否
滚动条 = 否
导航按钮的鼠标点击事件中，通过脚本修改画面窗口的“画面名称”属性：
// 导航按钮“趋势画面”的鼠标点击事件
#include "apdefap.h"
void OnClick(char* lpszPictureName, char* lpszObjectName, char* lpszPropertyName)
{
SetPropChar(lpszPictureName, "画面窗口1", "PictureName", "Trend.pdl");
}
这样切换时只有工作区内容变化，导航区保持不动。同时，所有子画面只需按1700×1000的工作区尺寸组态，不需要重复绘制导航栏，大幅减少组态工作量。
五、布局标准检查要点
在完成布局设计后，建议按以下要点自查：
- 基准分辨率是否与现场主流显示器一致；
- 所有控件坐标和尺寸是否为栅格间距的整数倍；
- 导航区宽度/高度是否全项目统一；
- 工作区子画面是否统一使用画面窗口加载；
- 是否预留了状态栏和报警显示区域；
- 在目标分辨率下全屏运行，检查是否有控件被遮挡或超出边界。
上图展示了以1920×1080为基准的典型分区：顶部标题栏60px、左侧导航区200px、底部状态栏50px，剩余区域为工作区。所有分区边界均落在10px栅格上，工作区通过画面窗口加载子画面，导航区保持固定。实际项目中可根据画面数量和操作频率调整导航区宽度，但一旦确定就应写入项目组态规范，避免不同工程师各自为政。
标准化布局的最终检验标准是：任意打开一张子画面，其控件坐标、边距、字体大小、颜色规范都与其它画面一致；在目标分辨率下全屏运行，导航区不遮挡工作区，工作区内容不超出边界；新增画面时，工程师只需按工作区尺寸组态内容，无需关心导航和状态栏。做到这三点，布局标准才算真正落地。