6 【产品设计】界面设计方法:界面与组件的概念( 二 )


2 ) 本组件 – 子窗体②③

6  【产品设计】界面设计方法:界面与组件的概念

文章插图
一个主窗体可以有多个子窗体,根据作用的不同子窗体还可以再分为两类 。
3 ) 公用组件④
本组件内部的处理常常会需要一些外部组件的信息作为参考,比如:编制合同时可能需要参考预算的内容,则可以通过连接外部的预算组件;编制预算时可能需要参考企业的规章制度,则此时可以连接企业知识库组件等,这些外部组件只用来做参考所以称之为公用组件 。
4 ) 上、下游组件⑤⑥
另外,与本组件有数据关联的外部组件之间在位置关系上做如下定义:
2、窗体的构成
理解了组件的概念和构成后,打开组件,进入到组件的内部介绍“窗体”的概念 。
1 ) 窗体
窗体:主要由下述4类要素构成:窗口、界面、控件、接口 。
如何理解窗体的概念呢?下面用一个仪器箱做个比喻,参见图3(a),窗体就如同安置在这个仪器箱前面的“仪表盘”,用户通过操作仪表盘上的控件发出指令,指令经过箱子中的逻辑层处理然后将要求传递到后面的数据层,数据层在按照逻辑层的要求将相应的数据提出来经过逻辑处理后再呈现到前面的“仪表盘”上,这就是窗体的概念和作用 。
2 ) 窗口
窗口是电脑屏幕上的一个矩形区域(窗体的外边框) 。
关于窗体/窗口的划分方法,应用设计与技术设计是有所不同的,参见图3,按照技术设计的定义在这个窗体上显示了4个窗口(每个窗口对应1个应用程序),但是这种划分对应用设计来说没有意义,因为应用设计按照是1个业务组件对应1个业务功能的单位进行设计的,分成若干个窗口后在理解业务和设计时其含义就不完整了 。因此,为保持应用设计与业务设计的一致性,将图3的整体称之为“1个窗体,且只有1个窗口”,这样的约定对后续技术设计承接应用设计的成果时不会产生任何影响 。
3 ) 界面
窗体清楚之后,下面介绍窗体中的“界面”的概念 。
用窗口框围起来的中间部分称之为界面,界面上布置有各类的控件,包括:菜单、导航栏、工具条、滚动条、按钮控件、字段控件等 。可以看出,所有设计的成果最终都要集中到界面的上,界面上布置内容的多少、布局的合理性等都直接地影响着用户的满意度,因为用户只能从界面上布置的要素来体验“人-机-人”环境设计的优劣 。
所谓的“界面设计”指的就是对窗口中这个范围内布置控件的设计工作 。
4 ) 控件
【6【产品设计】界面设计方法:界面与组件的概念】理解了界面的概念后,最后再介绍构成界面的最小单位“控件” 。
控件是指布置在界面上的各类要素,包括:
窗体/窗口、界面和控件三者的关系如图4所示 。
图4 窗体/窗口、界面和控件三者的关系示意
3、业务组件与业务功能的异同
6  【产品设计】界面设计方法:界面与组件的概念

文章插图
前面已经介绍了业务功能和业务组件的概念,这两者的关系就相当于是在“业务功能”上包装了一个具有操作功能和接口的 “业务组件”外壳 。
1个业务功能对应1个组件,业务功能具有的能力最终是需要由业务组件来落实的 。业务功能与业务组件对比有如下特点
二、组件的接口模型
前面介绍了组件内部的构成,下面介绍组件对外部的接口 。组件的接口绘制在组件主窗体外框上,下面以窗体为对象建立一个窗体模型,通过这个模型理解组件与外部的接口和信息的交流,此时关注点不在界面上,而在窗体上 。如图5所示,这是一个处理“工程预算”的业务功能 。