1.4.2 页面设计图

页面设计图

顾名思义，页面设计图用来展示项目的页面效果，由UI设计师制作，前端开发者则需要通过设计图来制作静态页面。为方便开发人员使用，“启嘉校园”项目使用MasterGo设计软件制作，生成了能够查看设计标注、下载图片素材的在线设计图。读者在后面章节进行静态页面内容制作时，可参考设计图完成。

图1-2 “启嘉校园”产品需求文档

“启嘉校园”设计图地址为https://book.change.tm/u/a2。

1.如何查看设计标注

打开在线设计图，单击设计图中的一个元素，页面右侧信息栏就会出现该元素的样式信息，比如宽、高、背景色、文字颜色、位置等，如图1-3所示。当选择一个元素后，若将鼠标移动到另一个元素上，则可以查看两个元素之间的间距，如图1-4所示。

图1-3 样式标注

2.如何下载图片素材

打开在线设计图，单击需要下载的图片，然后单击页面右侧信息栏下方“导出”按钮，即可下载图片素材，如图1-5所示。

图1-4 元素间距

图1-5 导出设计图