2.4.6 页面设计面板
“页面设计”面板区域是用于显示页面内容的区域，这些内容也被用于生成HTML文件或PRD文档。在默认情况下，不显示网格，只显示标尺，可在“页面设计”面板区域右击，选择“栅格和辅助线”→“显示网格”可将网格显示出来，该区域如图2-20所示。
在页面设计面板区域右击后，可看到“栅格和辅助线”菜单下有多个选项，如图2-21所示。
单击“网格设置”选项可设置网格间距（默认为10个像素）。
在页面设计面板区域，需要重点掌握3个要点。
图2-20 显示网格的页面设计面板
图2-21 “栅格和辅助线”子菜单项
1.页面辅助线
辅助线主要用于对齐元件，也可设置编辑区域，例如可设置640×480 的编辑区域，要求设计人员在此区域内进行设计。辅助线又分为页面辅助线和全局辅助线。
按住鼠标左键，在横向标尺区域往内容区域拖动，将会拉出一条水平辅助线，在纵向标尺区域往内容区域拖动，拉出一条垂直辅助线。页面辅助线默认为绿色，如图2-22所示。
图2-22 创建页面辅助线
2.全局辅助线
通过在横向和纵向标尺处拉出的是页面辅助线，只会在当前页面显示，若想在所有页面显示某些辅助线，可采用全局辅助线，全局辅助线默认为玫红色，有两种创建方法。
1）横向和纵向标尺按住〈Ctrl〉键拉出全局辅助线：该方法与页面辅助线创建方法类似，按住鼠标左键进行拖动时需要同时按住〈Ctrl〉键，这是创建单条全局辅助线的好方法。
2）使用创建辅助线对话框：该方法常被用于同时创建多条全局辅助线，可在某个页面设计区域右击，在菜单栏选择“栅格和辅助线”→“创建辅助线”命令，打开的创建辅助线对话框如图2-23所示，在该对话框中选中“创建为全局辅助线”选项，创建的辅助线即为在该原型所有页面显示的全局辅助线。
设置后的全局辅助线如图2-24 所示，可看到“页面设计”面板区域被分为两列，每列的宽度为60像素，每列的间距宽度为20像素，边距10像素。
图2-23 创建全局辅助线对话框
图2-24 创建全局辅助线效果图
“行”的设置与此类似，不过辅助线为水平线。可在任何页面选择全局辅助线后，按〈Delete〉删除键，或右击选择“删除”命令将其删除。
3.元件坐标
“页面设计”面板其余的100、200、300 等刻度都是像素，左上角的坐标为X0；Y0（注：本书统一采用此种方式表示横纵坐标），在进行原型设计时，左上角相当于浏览器的左上角，为了尽可能贴近真实，设计人员在进行设计时需要注意网站和App的宽度和高度。
“页面设计”面板中的元件坐标是在“样式”面板→位置尺寸中显示的“X轴坐标”和“Y轴坐标”，其数值分别是元件横向标尺和纵向标尺的像素值（以元件的左上角坐标为基点进行计算）。