为什么使用IFML建模

当前,软件的界面和用户体验受到了越来越多的关注,而软件开发都要进行界面原型设计,但界面中还存在许多的动态逻辑,光靠界面原型就难以充分表达了。IFML就是可以面向用户界面的结构和动态逻辑建模的规范,下面,我来为大家介绍一下用EA如何进行IFML建模。

如下就是一张IFML建模示意图:

ifnamemain是什么意思 if me是什么意思_stotybord如何添加子视图

如下是IFML建模示意图中的元素说明:

NO

元素

 说明

  1.

View Container (视图容器)

应用的UI窗口或Web页面;一个IFML图是可以由一个或多个视图容器组成的。

  2.

ViewComponent(视图组件)

界面中用于数据输入、输出与显示的元素,例如下拉列表、表单;视图组件可存于视图容器中。

  3.

ParameterBindin

gGroup (参数绑定组)

在用户发生交互活动时,传递的相关参数。

  4.

Event(事件)

界面元素进行交互后,从事件导出传递值到下一个元素。

如下是IFML建模示意图中的元素关系:

NO

起点元素

关系

终点元素

 1.

Event

Dependency

Artist

 2.

Navigation Flow

 Usage

ParameterBinding Group

IFML是什么

IFML(Interaction Flow Modeling Language,交互流建模语言)是国际标准化组织OMG定制的可视化建模标准。

IFML的目的是为系统架构师、软件工程师和软件开发人员提供用于 描述应用程序前端主要维度的交互流模型的工具:在应用程序的视图部分中,由视图容器和视图组成组件, 表示应用程序状态的对象以及对可执行的业务逻辑操作的引用。视图组件与数据对象和事件的绑定,定义事件发生后要执行动作的控制逻辑,以及在架构的不同层上的控制、数据和业务逻辑的分布。

如下就是一张IFML搜索模型的建模示意图:

ifnamemain是什么意思 if me是什么意思_建模_02

如下是IFML搜索模型中的元素说明:

NO

元素

类型

1.

搜索页面

ViewContainer

2.

搜索结果页面

ViewContainer

3.

内容详情页面

ViewContainer

4.

搜索表单

Form

5.

搜索条件一

Field

6.

搜索条件二

Field

7.

搜索条件三

Field

8.

提交搜索数据

OnSubmitEvent

9.

结果列表

List

10.

选择对应结果内容

OnSelectEvent

11.

结果数据详情

Details

12.

图片数据

Data Binding

如下是IFML搜索模型图中的元素关系:

NO

起点元素

关系

终点元素

1.

提交搜索数据

Dependency

 结果列表

2.

选择对应结果内容

Dependency

数据详情

IFML 有什么

在EA中,IFML主要元素被分为了三大部分,分别是:基本概念元素、核心元素和扩展元素。

接下来我们对IFML模型中所有的相关的元素介绍一下:

首先是,基本概念元素:

 基本概念元素

 说明

ifnamemain是什么意思 if me是什么意思_ifnamemain是什么意思_03

View Container :视图容器
View Component:视图组件
Catching Event:捕获事件
Throwing Event:抛出事件
Action:活动
Navigation Flow:导航流
Data Flow:数据流
Parameter:参数
Parameter Binding:参数绑定
Parameter Binding Group:参数绑定组
Parameter Binding Link参数绑定连接

其次,核心元素:

 核心元素

 说明

ifnamemain是什么意思 if me是什么意思_Dependency_04

Domain Model:领域模型IFML Model:IFML模型Interaction Flow Model:交互流模型

Module Package:模块包

Viewpoint:视点

Annotation:注释

Module Definition:模块定义

Module:模块

Context Variable:上下文变量

Simple Context Variable: 简单的上下文变量

Data Context Variable:数据上下文变量

Action Event:行动事件

System Event:系统事件

View Element Event:视图元素事件

Port:端口

Port Definition:端口定义

Context:上下文

Data Binding:数据绑定

Dynamic Behavior:动态行为

Activity Concept:活动概念

BPMN Activity Concept:BPMN活动概念

UML Structural Feature:UML结构特征

UML Domain Concept:UML域概念

UML Behavior:UML行为

UML Behavioral Feature:UML行为特征

最后是,扩展元素:

 扩展元素

 说明

ifnamemain是什么意思 if me是什么意思_ifnamemain是什么意思_05

Menu:菜单
Window:窗口
List:列表
Form:表单
Details:详情
Slot:位置
Field:字段
Jump Event:跳过
Landing Event:登录事件
On select Event:选择事件
On Submit Event:提交事件
On Load Event:加载事件
Device:设备
User Role:用户角色
Position:位置

IFML可以用来做什么

ifnamemain是什么意思 if me是什么意思_stotybord如何添加子视图_06

FML建模规范解决了应用程序设计的相关建模问题,可以将前端的应用程序的交互过程可视化。

IFML主要作用于两方面的人员:

  • 用户:直接了解程序的设计结构和操作过程,帮助用户理解和使用程序。
  • 应用程序设计师:更深入了解用户交互过程,将更多的精力转向产品需求,设计出更易于让用户理解的程序,从而提交程序的受欢迎度;同时,可以帮助设计师建立一套可重复使用的组件,使其提高工作效率。

EA中如何创建IFML

在EA中,我们可以通过使用EA安装程序集成的MDG技术,快速地对应用程序进行IFML建模,除此之外,EA还支持BPMN、UML、SysML和TOGAF等多达65种建模规范,以及仿真、文档生成、代码生成、模型跟踪和团队合作管理等功能,可以方便大家实现更为复杂的应用程序设计。

在EA中可以非常快捷的创建IFML图,过程简洁。

如下图所示:

ifnamemain是什么意思 if me是什么意思_Dependency_07

操作过程:

  • 创建新的模型图
  • 首先,图类型中找到交互设计
  • 然后,选择交互流IFML
  • 其次,选择要创建的对应IFML的图类型,点击OK即可创建完成。

在了解EA中IFML的建模过程之后,我们开始进行具体的实例讲解。

IFML建模实例

下面,我们以一个用户购物时添加购物车的交互活动进行介绍。

如下是IFML建模的具体说明:

ifnamemain是什么意思 if me是什么意思_Dependency_08

如下是IFML建模示意图中的元素说明:

NO

元素

类型

1.

产品

ViewContainer

2.

产品详情

ViewComponent

3.

数量

ViewContainer

4.

数量

ViewComponent

5.

添加购物车

Action

6.

信息

ViewContainer

7.

信息确认

ViewComponent

8.

选择商品->商品

ParameterBinding

9.

选择数量->数量

ParameterBinding

如下是IFML建模示意图中的元素关系:

NO

起点元素

关系

终点元素

1.

选择商品

Dependency

数量

2.

选择数量

Dependency

添加购物车

3.

添加购物车

Dependency

信息确认

4.

选择商品

Dependency

添加购物车

5.

Dependency

NoteLink

选择商品->商品

6.

选择数量->数量

NoteLink

Dependency

本次模型中主要包含了三个视图组件和其中的视图容器,还有触发活动时传递的参数值。

这个实例主要说明了用户将产品添加到购物车的模型片段:

  • 用户点击添加购物车按钮,网站中弹出询问选择产品数量的模态窗口;
  • 系统将的所选商品及选择的数量作为参数将值传递,触发 “添加到购物车”的操作;
  • 执行操作后,页面将弹出确认信息窗口,提示用户检查当前窗口的详细内容,是否是我们所选择的产品;
  • 其次,选择要创建的对应IFML的图类型,点击OK即可创建完成。

至此添加购物车的交互过程就完成了。

EA自带了11个IFML模型模板,包括四组:

  • 信息输入
  • 交互和线框图
  • 搜索
  • 桌面应用程序

这些可以帮助用户快速创建自己需要的交互模型。

ifnamemain是什么意思 if me是什么意思_搜索_09

如果您希望了解更多信息: