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

  1. 作用和意义
    UI设计图为软件设计的最终效果图。软件UI设计图可以精确的描述软件最终的形态,包括控件样式、控件尺寸、控件配色、控件交互方式、布局样式、字体样式和尺寸。除了可以通过UI设计图看到软件的最终效果,UI设计图也是软件界面编程的最终依据。同时在软件编程中,实现软件最终界面所使用的图片和图标就是从UI设计图中裁剪出来的。
  2. 谁设计
    UI设计图一般有专门的“UI设计师完成(美工)”,一般在软件开发公司会有一个独立的“Ui设计师”岗位。
  3. 使用什么工具
    Adobe PhotoShop
    Adobe Illustrator
    其他裁图工具软件

二、UI设计图最终效果

在UI设计师根据原型图和美观需求把软件的每个界面都设计完成之后,把所有界面的图片集中到一张大的图片中,形成一个总的UI设计图。同时在UI设计图中使用箭头线标注一下窗口之间跳转的相互关系。从而使UI设计图直观明了,方便程序员查看软件最终的效果,并完全依照UI效果图编写出软件的最终界面。

由于本文主要介绍编程方面的知识,就不涉及绘制效果图的相关技术细节了。依照前一节所设计的“电子书阅读器原型图”而绘制出的UI效果图如下:

设计图2800 rem怎么定 设计图绘制_UI

三、尺寸标注图的效果

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

“电子书阅读器”的ui设计图所对应的尺寸标注图如下:

设计图2800 rem怎么定 设计图绘制_控件_02

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

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

设计图2800 rem怎么定 设计图绘制_UI_03