界面原型设计工具怎么布局界面 界面原型设计工具如何画界面原型图

一、界面原型设计工具怎么布局界面

为了满足客户的需求，软件界面的表达形式千差万别，一般是在设计软件界面的时候，需要先通过原型设计工具设计出界面原型。界面布局是界面原型设计的重要工作之一，布局就是在规定的界面范围内考虑如何布置这些控件可以获得最佳的效果，一般主要是以下几点：

1、 界面区域的划分

使用界面原型设计工具设计界面原型时，为了沟通和理解的方便，同时也是为了使设计结果符合人体工程学的基本要求，对界面的定位坐标和区域划分需要满足以下原则：

（1）坐标原点的设定：通常会将电脑屏幕的左上角定为坐标原点（XY轴的交叉点0），因此，界面的内容扩展或是面积增大时都是由左向右、由上向下进行延伸。

（2）区域的划分：根据配置控件的使用目的不同，将界面分成两个大的区域：功能区域和作业区域。功能区域通常放在界面的四周，主要布置导航栏、工具栏、主菜单等；界面区域通常放在界面的中间部分，或是偏右下方的区域，这个区域是业务数据处理的核心区域，主要用来布置各类数据显示的窗口、字段框等。

2、功能区域的规划

（1）导航栏区域：导航栏区域，通常可以分别在栏的左右两侧显示两类信息（不限于此），比如：左端显示本界面/本组件的打开路径，系统名称>子系统名称>模块名称>本组件名称。右端显示本组件的用户所属的部门、姓名、登录日期等信息。

（2）工具栏区域（上）— 基本操作按钮区：这个区域用来布置基本操作按钮，一般放在导航栏与作业区域之间；所谓的基本操作按钮，指的是用来对本界面上属于主表区内数据进行操作的功能，对于细表区内数据的操作按钮通常布置在距离细表区的最近处（上边或是下边）。

（3）工具栏区域（下）— 其他窗体调用按钮区：当界面的上端工具的按钮过多不好安排时，可以将一部分按钮安排在界面的下端，比如：主要用来调用其它组件、功能的按钮。

（4）菜单栏区域：通常设置在界面的最左侧，所谓的“菜单”就是一个树形结构体，结构的节点上是按照父子的关系布置了以下要素的名称：系统、子系统、模块和组件，通过菜单栏内可以找到系统中所有的功能，菜单的结构关系是参考下面的两个架构图设计而成的。

（5）作业区域的规划：作业区域是布置业务功能设计成果的位置，一般将作业区域划分为主次区域，主要区域：界面的左上角为“主”，重要信息在此显示；次要区域：界面的右下角为“次”，次要的或是辅助类信息在此显示。

3、作业区的分类

（1）原型形式：作业区域的范围内就是通常所说的“界面原型”，这个原型常见的形式有5种：卡片式、列表式、主细表式、树表式和页签式。

（2）原型形式的选择：不同的数据结构需要采用不同界面形式，采用哪种形式最佳由设计师参考业务内容、以及未来的应用方法（实际系统的界面）综合考虑决定；收集到原始实体表单与业务原型的界面可以不是一一对应的关系。

（3）设计原则：尽量不要采用切换的方式，在一个界面上布置复数不同表单的数据输入，这样界面的逻辑非常复杂，不利于后面对界面的维护；在不影响用户的工作分配情况下，尽量采用将复杂的原始表单拆开，用几个相对简单的界面来支持数据的输入，然后用看板、表单等功能将这些数据组合起来。这样的设计有利于日后的界面维护。

二、设计界面原型图的作用

原型图是产品成型前的简单框架，界面原型图就是从文字需求转化成图形的界面设计，主要用于展示页面的布局和各个功能键的交互，它的作用主要有：

1、帮助设计师将抽象的界面具体地展现，辅助设计。

2、帮助开发工程师了解界面在系统中的作用，辅助开发。

3、辅助产品测试员制定产品测试计划。

4、作为产品经理、设计师、开发工程师等群体在产品设计与开发的沟通工具。

5、简单体现产品页面的元素、模块及交互等信息，直观体现产品设计的原型内容。

三、界面原型设计工具如何画界面原型图

绘制界面原型图的方法并不难，一般使用界面原型设计工具即可画，具体的画法是：

1、画草图：首先可以简答绘制一份原型设计内容的草图，确定绘制思路。

2、做原型：接着根据原型设计的内容正式绘制图示，打开界面原型设计工具，结合原型设计思路将所需的图形符号添加至编辑区域，利用样式、文本、调整图形等编辑功能进一步完善内容，再将绘制好的界面原型图保存导出即可。