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

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

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

二、UI设计图最终效果

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

三、尺寸标注图的效果

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

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

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

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

软件开发中UI设计需要注意什么？
软件开发的过程中,UI已经成为一个重要因素,UI设计作为信息设计的一部分,它正在悄然出现在我们的生活.UI即User Interface(用户界面)的简称.UI设计是指对软件的人机交互.操作逻辑.界面 ...
低代码/无代码平台在软件开发中的应用
随着技术的不断发展,软件开发也在不断地进步.低代码/无代码平台已经成为软件开发的一个新的趋势.在这篇文章中,我们将深入探讨低代码/无代码平台在软件开发中的应用,包括它们的优势.如何选择合适的平台以及如 ...
软件开发中的需求分析
随着数字化智能化技术的普及,越来越多的企业希望建立自己的数字化系统来加强自身在市场中的竟争力.软件是实现数字化必不可少的一个环节,而决定软件成功的基础步骤就是要做好需求分析,下面和大家分享一下软件的需 ...
测试自动化金字塔在软件开发中是如何使用的？
测试自动化金字塔,是一个指南,指导您进行什么类型的测试以及每种测试的数量.测试自动化金字塔有助于创建更高效的测试,并导致向客户发布更可靠的软件. 测试自动化金字塔的好处测试自动化的大部分好处显而易见 ...
软件开发中的角色分工
软件开发中的角色分工文章目录软件开发中的角色分工一.项目经理二.产品经理三.UI设计师四.架构师五.开发工程师六.测试工程师七.运维工程师一.项目经理对整个项目负责,任务分配,把 ...
软件开发中的10个认知偏差
最近,在和同事们讨论产品经理职责的时候,聊到了关于产品的定义,如果不能准确定义"产品"的时候,可以考虑其必要条件,即可没有用户的产品肯定是没有意义的.产品有了用户, 必然存在用户与 ...
直播平台软件开发中选择点播播放器哪家强？
直播平台软件开发中选择点播播放器哪家强? 太长不看版这里选择了开源播放器IjkPlayer和直播云厂商播放器PLDroidPlayer作为测试样本. 数据统计软硬编码 IjkPlayer PLDr ...
软件开发中会使用到的图
文章目录软件开发中会用到的图一.背景二.图为了解决什么问题三.不同流程中适合运用的图四.实际的运用五.结语软件工程中的各种图软件工程用的15种图数据关系流图怎么画?这款软件教你轻松绘 ...
Code Review 是软件开发中必不可少的一步
前言我一直认为Code Review(代码审查)是软件开发中的最佳实践之一,可以有效提高整体代码质量,及时发现代码中可能存在的问题.包括像Google.微软这些公司,Code Review都是基本要 ...
短视频软件开发中如何实现720P磨皮美颜录制？
短视频软件开发中如何实现720P磨皮美颜录制? 在Android上要实现一个录制功能,需要有几个方面的知识储备:自定义相机的开发.视频数据格式的了解.编码相关知识以及视频合成技术,同时如果需要美颜.磨 ...