■ A complete interface design requires two levels: business functions and application functions. The series "surface design methods (1)" has introduced four functional design methods from the business function (activity, dictionary, kanban, and form) level. Their focus is on how to complete different types of business process designs.
■ This series of "Interface Design Method (2)" explains the composition of the software interface from the application function level, including concepts, functions and design methods. "Business function" is equivalent to the logic core of the function, providing fields, data sources, calculation logic, rules, etc.; "application function" is equivalent to the shell (panel) of the function, providing menus, toolbars, buttons, and fields that can be operated Box etc. The former is partial to business and the latter is partial to system. The combination of the two constitutes a runnable business function.
Let's review the work objectives and content of each stage from demand to design, as shown in Figure 1.
Figure 1 Schematic diagram of interface design results at various stages
1) In the demand investigation stage, Figure 1 (a, b)
will collect the original customer needs (a) through sorting, classification, analysis and confirmation work, complete the functional requirements list (b), the content of this list is the system requirements The realized functional objects include the "business prototype" in the list of materials. This business prototype may be a reference physical form (paper version or electronic form) provided by the user, which is the basis for subsequent design and development of the interface .
2) The business design stage, as shown in Figure 1(c), see articles 1 to 5 of this series of blog posts.
According to the content of functional requirements, the purpose of business processing, the law of business processing, etc., business functions are collected and extracted, and 4 business functions (activities, dictionaries, kanbans and forms) are divided. This step is from a design perspective The infinite number of functional requirements are grouped into a limited number of 4, which provides a basis for modeling business functions, and also helps to find interface design rules, improving the efficiency of design work and the reusability of design results , Reduce the design difficulty.
3) In the application design stage, the
last stage in Figure 1(d) , from the perspective of software implementation, the aforementioned four business functions are further divided and grouped to form the content (controls) shown. At this time, these interfaces The controls used are no longer directly related to the business.
■The following rules can be drawn: no matter what business function is designed, and no matter what interface form they adopt, the interface is composed of the following controls: toolbar, scroll bar, button (add, query, save...) , Field boxes (text, down, select...), etc. Because these controls do not contain business meaning, they have a wider range of versatility.
The "Interface Design Method (2)" series of blog posts will focus on the application design part of the interface. After completing the work from a, b, c, and d, the whole process of interface design of a business function is completed.
One, the concept of components
In fact, a business function does not correspond to only one interface, but is completed by a set of interfaces. The collection of this set of interfaces is called "component". Before introducing the design of the interface, the concept of "component" must be introduced.
Definition: A business component is a system module composed of controls that can independently perform a business function.
(The component corresponding to the business function is called: business component, or simply: component)
One business component corresponds to one business function (activity, dictionary, kanban, form). The interface is an important part of the component. The composition of the component is described in detail below.
1. The composition of the
component The component is composed of a set of "forms". The following uses the "this component" in Figure 2 as the main body to illustrate the relationship between the component and the form:
Figure 2 Schematic diagram of the component concept
1) This component-main window ① In
principle, when there are several windows in one component, only one of them is the main window. The main form displays the main information of the component, which is the "face" of an independent component. In principle, the first form that pops up when the component is opened should be the main form. Usually the business number and various types of the component Operation buttons, etc. are placed on the main form.
2) This component-subform ②③One
main form can have multiple subforms, and the subforms can be further divided into two types according to different functions.
□ Query sub-form ②: Used to query historical data entered through this main form.
□Auxiliary subform ③: Used to display the subordinate data of the main form, or to share the data processing work of the main form, etc.
3) Public component ④The
internal processing of this component often requires some external component information as a reference. For example, when preparing a contract, you may need to refer to the content of the budget. You can connect to an external budget component; when preparing a budget, you may need to refer to the company’s Rules and regulations, you can connect to corporate knowledge base components at this time. These external components are only used for reference, so they are called public components.
4) Upstream and downstream components ⑤ ⑥
In addition, the positional relationship between the external components that have data associated with this component is defined as follows
□ Upstream component ⑤: The component that inputs data to this component is called the upstream component, and the upstream component contains Data, format, rules, etc. will affect this component;
□Downstream component ⑥: The component that receives the output data of this component is called the downstream component, and the data, specifications, rules, etc. of this component will affect the downstream component;
2. The composition of the form After
understanding the concept and composition of the component, open the component and enter the inside of the component to introduce the concept of "form".
1) Form
Form: It is mainly composed of the following 4 types of elements: window, interface, control, and interface.
How to understand the concept of form? Let’s use an instrument box as an analogy. See Figure 3(a). The window is like the “instrument panel” placed in front of the instrument box. The user issues instructions by operating the controls on the instrument panel, and the instructions go through the logic layer in the box. The processing then passes the requirements to the subsequent data layer. The data layer proposes the corresponding data according to the requirements of the logic layer and then presents it to the front "dashboard" after logical processing. This is the concept and function of the form.
Figure 3 Schematic diagram of form and window
2) Window A
window is a rectangular area on the computer screen (the outer border of the window).
Regarding the division method of form/window, application design and technical design are different. See Figure 3. According to the definition of technical design, 4 windows are displayed on this form (each window corresponds to 1 application). But this kind of division is meaningless for application design, because application design is designed according to the unit of one business component corresponding to one business function. After being divided into several windows, the meaning of understanding business and design is not complete. Therefore, in order to maintain the consistency of application design and business design, the whole of Figure 3 is called "1 window and only 1 window". This agreement will not produce the results of application design for subsequent technical design. Any impact.
3) Interface After the
form is clear, the concept of "interface" in the form is introduced below.
The middle part enclosed by the window frame is called the interface. Various controls are arranged on the interface, including: menu, navigation bar, tool bar, scroll bar, button control, field control, etc. It can be seen that all the results of the design must eventually be concentrated on the interface. The amount of content on the interface and the rationality of the layout directly affect the user’s satisfaction, because the user can only come from the elements laid out on the interface. Experience the pros and cons of the "human-machine-human" environment design.
The so-called "interface design" refers to the design work of arranging controls within this range in the window.
4) Controls After
understanding the concept of the interface, finally introduce the smallest unit "control" that constitutes the interface.
Controls refer to various elements arranged on the interface, including:
□Control controls for other functions, such as the menu tree, navigation bar, scroll bar, etc. on the portal.
□Button controls for data operations, such as: add, delete, save, query, submit, etc.
□Field controls for data input, such as: list box, input box (text, drop-down, selection...).
The relationship among form/window, interface and control is shown in Figure 4.
Figure 4 Schematic diagram of the relationship between form/window, interface and control
3. The similarities and differences between business components and business functions.
The concepts of business functions and business components have been introduced above. The relationship between the two is equivalent to packaging a "business component" shell with operational functions and interfaces on the "business function".
One business function corresponds to one component, and the capabilities of the business function ultimately need to be implemented by the business component. The comparison of business functions and business components has the following characteristics:
□Business function: is the smallest unit that can independently complete a business goal in business design;
□Business component: is the smallest unit that can independently support one business function in application design;
Second, the interface model of the component
The internal structure of the component was introduced before, and the interface of the component to the outside is introduced below. The interface of the component is drawn on the outer frame of the main window of the component, and a window model is established below with the window as the object. Through this model, the communication between the component and the external interface and information is understood. At this time, the focus is not on the interface, but on the window. Physically. As shown in Figure 5, this is a business function that deals with "project budget".
Figure 5 Schematic diagram of component interface
1. The classification of the interface The
functions set in the "Project Budget" form are divided into three types according to the purpose of use, called IPO, and each letter represents the meaning of
I: Input, and
P: Process for data input . Data processing
O: Output, data output
1) Data input (I) / output (O)
□Input: Import data from upstream, including selecting from upstream components, receiving data pushed from upstream, and selecting data from database;
□Output: pushing data downstream, including downstream Component or push to public database;
2) Data processing (P)
Use interfaces to associate the functions of various operation interface data with the form. After the association, these functions can support the processing of the data inside the form. They can be divided into three in terms of function. One type,
□Operation function: This type of function includes all the buttons for operating the data in the form, such as adding, saving, submitting... etc. Various control checks can be connected behind these interfaces.
□Link components: This type of function can link common components, databases, etc. that support the processing of the main form. The relevant data can be directly presented on the interface of this component through the business code or other attributes on the main form.
□Link device: This type of function can connect to mobile devices, printers, etc.
2. The relationship between the interface and the external function.
With the above-mentioned "Project Budget" window function model, the function on the window is linked with the external system through the interface to form a complete window interface model, see Figure 6.
Figure 6 Schematic diagram of component interface model
Through this schematic model, from the perspective of application design, we have a basic understanding of the relationship between a component's form and the outside. With this model as a reference, we need to access relevant controls and supporting data for which functions are needed. / Rules, you can detach from the interface when you don’t need it. From this, we can also understand the way of software design according to the engineering method: first design small parts → assemble small parts into a functional control → connect to the interface, and so on, gradually complete the design of the entire information system .
3. The relationship between the interface and external data.
Next, associate the external data source referenced by the "Project Budget", see Figure 7, which is the actual data planning design diagram of the "Project Budget" form. You can see that the budget is compiled The function needs to be connected with a lot of data (including basic data) and operating functions (controls) to support it.
Figure 7 Component interface planning (budget preparation)
This schematic diagram shows a complete business processing function, which is not made into a solidified overall function module during application design, but is connected to complete the controls and data needed for this business processing. This design method can be It is ensured that no matter what changes occur in the actual operation of the component, it can quickly respond to the demand through the connection and separation of the interface. This is the effect of the so-called modular design and modular application.
■ Summary
Interface design is the core part of component design. This design is to express business functions and application functions on the interface, and bring information value to users through the perfect combination of the two.
■ Extended description
Why should the interface design be split and combined? Because the functional requirements of the survey are split to form 4 standard business functions, and then the functions are split into different controls, so that the combination of controls forms a form, and the combination of forms forms a series of standardized tasks, which It laid the foundation for adopting the "less code, no code" configuration development method.
It can be seen that this kind of work cannot be done by ordinary demand engineers, nor can it be done by pure programmers. It must be an engineer with a certain business knowledge, abstract modeling ability, and a technical development background. Finished.
■The next article in this series: Interface Design Method (2) — 2. Interface Planning
For detailed window design instructions, please refer to the book "Dahua Software Engineering—Requirements Analysis and Software Design".
