■ Un diseño de interfaz completo requiere dos niveles: funciones comerciales y funciones de aplicación. La serie "métodos de diseño de superficies (1)" ha introducido cuatro métodos de diseño funcional desde el nivel de la función empresarial (actividad, diccionario, kanban y formulario). Se centran en cómo completar diferentes tipos de diseños de procesos empresariales.
■ Esta serie de "Método de diseño de interfaz (2)" explica la composición de la interfaz de software desde el nivel de función de la aplicación, incluidos conceptos, funciones y métodos de diseño. La "función empresarial" es equivalente al núcleo lógico de la función, proporcionando campos, fuentes de datos, lógica de cálculo, reglas, etc.; "Función de aplicación" es equivalente al shell (panel) de la función, proporcionando menús, barras de herramientas, botones , y campos que se pueden operar Box, etc. El primero es parcial a los negocios y el segundo es parcial al sistema La combinación de los dos constituye una función comercial ejecutable.
Repasemos los objetivos de trabajo y el contenido de cada etapa desde la demanda hasta el diseño, como se muestra en la Figura 1.
Figura 1 Diagrama esquemático de los resultados del diseño de la interfaz en varias etapas
1) En la etapa de investigación de la demanda, la Figura 1 (a, b)
recopilará las necesidades originales del cliente (a) a través del trabajo de clasificación, clasificación, análisis y confirmación, completará la lista de requisitos funcionales (b), el contenido de esta lista es el requisitos del sistema Los objetos funcionales realizados incluyen el "prototipo empresarial" en la lista de materiales. Este prototipo empresarial puede ser un formulario físico de referencia (versión en papel o formulario electrónico) proporcionado por el usuario, que es la base para el posterior diseño y desarrollo del interfaz.
2) La etapa de diseño empresarial, como se muestra en la Figura 1 (c), consulte los artículos 1 a 5 de esta serie de publicaciones de blog.
De acuerdo con el contenido de los requisitos funcionales, el propósito del procesamiento comercial, la ley del procesamiento comercial, etc., las funciones comerciales se recopilan y extraen, y se dividen 4 funciones comerciales (actividades, diccionarios, kanbans y formularios). Este paso es de una perspectiva de diseño El número infinito de requisitos funcionales se agrupan en un número limitado de 4, lo que proporciona una base para modelar funciones comerciales y también ayuda a encontrar reglas de diseño de interfaz, mejorando la eficiencia del trabajo de diseño y la reutilización de los resultados del diseño, Reducir la dificultad del diseño.
3) En la etapa de diseño de la aplicación, la
última etapa en la Figura 1 (d) , desde la perspectiva de la implementación del software, las cuatro funciones comerciales antes mencionadas se dividen y agrupan para formar el contenido (controles) que se muestra. En este momento, estas interfaces Los controles utilizados ya no están directamente relacionados con el negocio.
■ Se pueden dibujar las siguientes reglas: no importa qué función comercial esté diseñada y no importa qué forma de interfaz adopten, la interfaz se compone de los siguientes controles: barra de herramientas, barra de desplazamiento, botón (agregar, consultar, guardar ...) , Cuadros de campo (texto, abajo, seleccionar ...), etc. Debido a que estos controles no contienen significado comercial, tienen una gama más amplia de versatilidad.
La serie de publicaciones de blog "Método de diseño de interfaz (2)" se centrará en la parte de diseño de la aplicación de la interfaz. Después de completar el trabajo de a, b, cyd, se completa todo el proceso de diseño de la interfaz de una función comercial.
Uno, el concepto de componentes.
De hecho, una función empresarial no corresponde a una sola interfaz, sino que se completa con un conjunto de interfaces. La colección de este conjunto de interfaces se denomina "componente". Antes de introducir el diseño de la interfaz, el concepto de "componente" debe ser introducido.
Definición: Un componente empresarial es un módulo de sistema compuesto por controles que pueden realizar de forma independiente una función empresarial.
(El componente correspondiente a la función empresarial se denomina: componente empresarial, o simplemente: componente)
Un componente empresarial corresponde a una función empresarial (actividad, diccionario, kanban, formulario). La interfaz es una parte importante del componente. La composición del componente se describe en detalle a continuación.
1. La composición del
componente El componente se compone de un conjunto de "formas". A continuación, se utiliza "este componente" en la Figura 2 como cuerpo principal para ilustrar la relación entre el componente y la forma:
Figura 2 Diagrama esquemático del concepto de componente
1) Esta ventana principal del componente ① En
principio, cuando hay varias ventanas en un componente, solo una de ellas es la ventana principal. El formulario principal muestra la información principal del componente, que es la "cara" de un componente independiente. En principio, el primer formulario que aparece cuando se abre el componente debe ser el formulario principal. Por lo general, el número de empresa y varios tipos de los botones de funcionamiento del componente, etc. se colocan en el formulario principal.
2) Este subformulario de componente ②③Un
formulario principal puede tener varios subformularios , y los subformularios se pueden dividir en dos tipos según las diferentes funciones.
□ Subformulario de consulta ②: Se utiliza para consultar datos históricos ingresados a través de este formulario principal.
□ Subformulario auxiliar ③: Se utiliza para mostrar los datos subordinados del formulario principal, o para compartir el trabajo de procesamiento de datos del formulario principal, etc.
3) Componente público ④El
procesamiento interno de este componente a menudo requiere alguna información de componente externo como referencia. Por ejemplo, al preparar un contrato, es posible que deba consultar el contenido del presupuesto. Puede conectarse a un componente de presupuesto externo; cuando Al preparar un presupuesto, es posible que deba consultar las Reglas y regulaciones de la empresa, puede conectarse a los componentes de la base de conocimientos corporativos en este momento.Estos componentes externos solo se utilizan como referencia, por lo que se denominan componentes públicos.
4) Componentes ascendentes y descendentes ⑤ ⑥
Además, la relación posicional entre los componentes externos que tienen datos asociados con este componente se define de la siguiente manera
□ Componente ascendente ⑤: El componente que ingresa datos a este componente se denomina componente ascendente, y el El componente ascendente contiene Datos, formato, reglas, etc.que afectarán a este componente;
□ Componente descendente ⑥: El componente que recibe los datos de salida de este componente se denomina componente descendente, y los datos, especificaciones, reglas, etc. de este componente afectará al componente aguas abajo;
2. La composición del formulario Después de
comprender el concepto y la composición del componente, abra el componente e ingrese el interior del componente para introducir el concepto de "formulario".
1) Formulario
Formulario: Se compone principalmente de los siguientes 4 tipos de elementos: ventana, interfaz, control e interfaz.
¿Cómo entender el concepto de forma? Usemos una caja de instrumentos como una analogía. Vea la Figura 3 (a). La ventana es como el "panel de instrumentos" colocado en frente de la caja de instrumentos. El usuario emite instrucciones al operar los controles en el panel de instrumentos, y las instrucciones van a través de la capa lógica en el cuadro. El procesamiento luego pasa los requisitos a la capa de datos subsiguiente. La capa de datos propone los datos correspondientes de acuerdo con los requisitos de la capa lógica y luego los presenta en el "tablero" frontal después del procesamiento lógico. es el concepto y función de la forma.
Figura 3 Diagrama esquemático de formulario y ventana
2) Ventana Una
ventana es un área rectangular en la pantalla de la computadora (el borde exterior de la ventana).
En cuanto al método de división de formulario / ventana, el diseño de la aplicación y el diseño técnico son diferentes. Ver Figura 3. De acuerdo con la definición de diseño técnico, se muestran 4 ventanas en este formulario (cada ventana corresponde a 1 aplicación). Pero este tipo de división no tiene sentido para el diseño de aplicaciones, porque el diseño de aplicaciones se diseña de acuerdo con la unidad de un componente empresarial correspondiente a una función empresarial. Después de dividirse en varias ventanas, el significado de entender el negocio y el diseño no está completo. Por lo tanto, para mantener la consistencia del diseño de la aplicación y el diseño comercial, la Figura 3 en su totalidad se denomina "1 ventana y solo 1 ventana" Este acuerdo no producirá los resultados del diseño de la aplicación para el diseño técnico posterior.
3) Interfaz Una vez que el
formulario está claro, el concepto de "interfaz" en el formulario se presenta a continuación.
La parte central encerrada por el marco de la ventana se llama interfaz. Varios controles están dispuestos en la interfaz, que incluyen: menú, barra de navegación, barra de herramientas, barra de desplazamiento, control de botones, control de campo, etc. Se puede ver que todos los resultados del diseño deben eventualmente concentrarse en la interfaz. La cantidad de contenido en la interfaz y la racionalidad del diseño afectan directamente la satisfacción del usuario, porque el usuario solo puede provenir de los elementos dispuestos en la interfaz Experimente los pros y los contras del diseño del entorno "humano-máquina-humano".
El llamado "diseño de interfaz" se refiere al trabajo de diseño de organizar los controles dentro de este rango en la ventana.
4) Controles Después de
comprender el concepto de interfaz, finalmente introduzca la unidad más pequeña de "control" que constituye la interfaz.
Los controles se refieren a varios elementos dispuestos en la interfaz, entre ellos:
□ Controles de control para otras funciones, como el árbol de menú, la barra de navegación, la barra de desplazamiento, etc. en el portal.
□ Controles de botones para operaciones de datos, como: agregar, eliminar, guardar, consultar, enviar, etc.
□ Controles de campo para la entrada de datos, como: cuadro de lista, cuadro de entrada (texto, desplegable, selección ...).
La relación entre formulario / ventana, interfaz y control se muestra en la Figura 4.
Figura 4 Diagrama esquemático de la relación entre formulario / ventana, interfaz y control
3. Las similitudes y diferencias entre los componentes comerciales y las funciones comerciales.
Los conceptos de funciones comerciales y componentes comerciales se han presentado anteriormente. La relación entre los dos es equivalente a empaquetar una estructura de "componente comercial" con funciones e interfaces operativas en el función".
Una función empresarial corresponde a un componente y, en última instancia, el componente empresarial debe implementar las capacidades de la función empresarial. La comparación de funciones comerciales y componentes comerciales tiene las siguientes características:
□ Función comercial: es la unidad más pequeña que puede completar de forma independiente un objetivo comercial en el diseño comercial;
□ Componente comercial: es la unidad más pequeña que puede respaldar de forma independiente una función comercial en el diseño de aplicaciones. ;
En segundo lugar, el modelo de interfaz del componente
La estructura interna del componente se introdujo antes y la interfaz del componente con el exterior se presenta a continuación. La interfaz del componente se dibuja en el marco exterior de la ventana principal del componente, y debajo se establece un modelo de ventana con la ventana como objeto. A través de este modelo se entiende la comunicación entre el componente y la interfaz e información externa En este momento, el foco no está en la interfaz, sino en la ventana. Como se muestra en la Figura 5, esta es una función comercial que se ocupa del "presupuesto del proyecto".
Figura 5 Diagrama esquemático de la interfaz de componentes
1. La clasificación de la interfaz Las
funciones establecidas en el formulario "Presupuesto del proyecto" se dividen en tres tipos según el propósito de uso, llamado IPO, y cada letra representa el significado de
I: Entrada y
P: Proceso para la entrada de datos. . Procesamiento de datos
O: Salida, salida de datos
1) Entrada de datos (I) / salida (O)
□ Entrada: Importe datos desde el flujo ascendente, incluida la selección de los componentes ascendentes, la recepción de datos enviados desde el flujo ascendente y la selección de datos de la base de datos;
□ Salida: envío de datos descendentes, incluido el componente descendente o push a la base de datos pública;
2) Procesamiento de datos (P)
Utilice interfaces para asociar las funciones de varios datos de la interfaz de operación con el formulario. Después de la asociación, estas funciones pueden soportar el procesamiento de los datos dentro del formulario. Se pueden dividir en tres en términos de función. Un tipo,
□ Función de operación: Este tipo de función incluye todos los botones para operar los datos en el formulario, como agregar, guardar, enviar ... etc. Se pueden conectar varias verificaciones de control detrás de estas interfaces.
□ Vincular componentes: este tipo de función permite vincular componentes comunes, bases de datos, etc. que soportan el procesamiento del formulario principal. Los datos relevantes se pueden presentar directamente en la interfaz de este componente a través del código comercial u otros atributos en el formulario principal.
□ Dispositivo de enlace: este tipo de función puede conectarse a dispositivos móviles, impresoras, etc.
2. La relación entre la interfaz y la función externa.
Con el modelo de función de ventana "Presupuesto del proyecto" mencionado anteriormente, la función en la ventana se vincula con el sistema externo a través de la interfaz para formar un modelo de interfaz de ventana completo, ver Figura 6 .
Figura 6 Diagrama esquemático del modelo de interfaz de componentes
A través de este modelo esquemático, desde la perspectiva del diseño de aplicaciones, tenemos una comprensión básica de la relación entre la forma de un componente y el exterior. Con este modelo como referencia, necesitamos acceder a controles relevantes y datos de soporte para los cuales se necesitan funciones. / Reglas, puede desconectarse de la interfaz cuando no la necesite. A partir de esto, también podemos comprender la forma de diseño de software de acuerdo con el método de ingeniería: primero diseñar piezas pequeñas → ensamblar piezas pequeñas en un control funcional → conectarse a la interfaz, y así sucesivamente, completar gradualmente el diseño de todo el sistema de información.
3. La relación entre la interfaz y los datos externos.
A continuación, asocie la fuente de datos externa a la que hace referencia el "Presupuesto del proyecto", consulte la Figura 7, que es el diagrama de diseño de planificación de datos real del formulario "Presupuesto del proyecto". Puede ver que se compila el presupuesto La función debe estar conectada con una gran cantidad de datos (incluidos los datos básicos) y funciones operativas (controles) para respaldarla.
Figura 7 Planificación de la interfaz de componentes (preparación de presupuesto)
Este diagrama esquemático muestra una función de procesamiento comercial completa, que no se convierte en un módulo de función general solidificado durante el diseño de la aplicación, sino que está conectado para completar los controles y los datos necesarios para este procesamiento comercial. Este método de diseño puede ser Se garantiza que no importa qué cambios ocurren en el funcionamiento real del componente, puede responder rápidamente a la demanda a través de la conexión y separación de la interfaz. Este es el efecto del llamado diseño modular y aplicación modular.
■ Resumen El
diseño de la interfaz es la parte central del diseño de componentes. Este diseño es para expresar las funciones comerciales y las funciones de la aplicación en la interfaz, y brindar valor de información a los usuarios a través de la combinación perfecta de los dos.
■ Descripción ampliada
¿Por qué debería dividirse y combinarse el diseño de la interfaz? Porque los requisitos funcionales de la encuesta se dividen para formar 4 funciones comerciales estándar, y luego las funciones se dividen en diferentes controles, de modo que la combinación de controles forma un formulario y la combinación de formularios forma una serie de tareas estandarizadas. sentó las bases para adoptar el método de desarrollo de configuración "menos código, sin código".
Se puede ver que este tipo de trabajo no puede ser realizado por ingenieros de demanda ordinarios, ni por programadores puros. Debe ser un ingeniero con cierto conocimiento comercial, capacidad de modelado abstracto y experiencia en desarrollo técnico.
■ El siguiente artículo de esta serie: Método de diseño de interfaz (2) - 2. Planificación de interfaz
Para obtener instrucciones detalladas sobre el diseño de ventanas, consulte el libro "Ingeniería de software de Dahua: análisis de requisitos y diseño de software".
