上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
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 导出设计图