4.4-软件开发中，“UI设计图”的作用与绘制方法说明

一、为什么要绘制软件UI设计图

1. 作用和意义
   UI设计图为软件设计的最终效果图。软件UI设计图可以精确的描述软件最终的形态，包括控件样式、控件尺寸、控件配色、控件交互方式、布局样式、字体样式和尺寸。除了可以通过UI设计图看到软件的最终效果，UI设计图也是软件界面编程的最终依据。同时在软件编程中，实现软件最终界面所使用的图片和图标就是从UI设计图中裁剪出来的。

2. 谁设计
   UI设计图一般有专门的“UI设计师完成（美工）”，一般在软件开发公司会有一个独立的“Ui设计师”岗位。

3. 使用什么工具
   Adobe PhotoShop
   Adobe Illustrator
   其他裁图工具软件

二、UI设计图最终效果

在UI设计师根据原型图和美观需求把软件的每个界面都设计完成之后，把所有界面的图片集中到一张大的图片中，形成一个总的UI设计图。同时在UI设计图中使用箭头线标注一下窗口之间跳转的相互关系。从而使UI设计图直观明了，方便程序员查看软件最终的效果，并完全依照UI效果图编写出软件的最终界面。
由于本文主要介绍编程方面的知识，就不涉及绘制效果图的相关技术细节了。依照前一节所设计的“电子书阅读器原型图”而绘制出的UI效果图如下：

三、尺寸标注图的效果

仅仅有UI效果图还不够，程序员并不能直接从UI效果图上看出每个控件或图片所对应的设计尺寸。因此，需要UI设计师，根据程序员对尺寸的需求，在UI设计图上标注出精确的尺寸数据。包括：控件的尺寸、字体样式、字体大小、字体颜色、图标尺寸、图标位置等。标注时所使用的尺寸不限定于像素。可以根据开发平台的不同，使用特定开发平台所要求的尺寸单位。比如android：pt、dp、sp等。
“电子书阅读器”的ui设计图所对应的尺寸标注图如下：

四、“电子书阅读器”UI设计图源文件获取地址

点我获取工程文件
工程文件包括，下图所示内容：