Web前端应用开发项目式教程(基于uni-app框架)
上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 导出设计图