Cómo escribir un documento de especificación de diseño de interfaz de usuario
Especificaciones de diseño de UI; ¿cuáles son las especificaciones de diseño de UI? Este problema debería ser de mayor preocupación para los diseñadores de UI, porque como diseñador de UI, organizar las especificaciones de diseño de UI también es una manifestación de la capacidad de diseño. Por lo tanto, ya sea que esté diseñando y creando usted mismo o promoviendo el desarrollo de productos, el hecho de que sus especificaciones de diseño estén completas o no juega un papel decisivo y clave en la calidad de su producto. ¡Así que hablemos de este tema hoy!
Las especificaciones de diseño de UI se componen de varias categorías:
1. Logotipo
La sensación directa de la impresión de la marca, el logotipo utilizado es diferente según los diferentes orígenes. de la página. Clasifique los logotipos utilizados en los productos de manera unificada. El siguiente es un ejemplo de recursos de logotipos citados de la Guía de estilo de la interfaz de usuario de Petshop de Moby.
El logotipo de la interfaz de usuario de Moby's Petshop se compone de gráficos y texto, y el color de la marca es azul. El uso del logotipo también debe tener en cuenta el logotipo sobre el fondo negro del pie de página. Por lo tanto, es mejor utilizar el diseño horizontal y vertical del logotipo y un solo gráfico del logotipo para clasificar.
La categoría muestra el logo en el color de la marca, el logo en el fondo del color de la marca y el logo en el pie de página con fondo negro.
2. Color estándar
El color es la parte más importante del diseño, sin excepción. Los detalles determinan la calidad, por lo que el uso del color es particularmente meticuloso. La combinación de colores determina directamente la calidad del producto. El color se puede dividir aproximadamente en color de marca, color de texto, color de fondo, color de estructura alámbrica, etc. Agregue palabras clave al color para aclarar para qué interfaz se utiliza.
A continuación se citan las especificaciones de color de la Guía de estilo de la interfaz de usuario de píxeles reales. Lo que puede aprender es que cada color no solo está marcado con un valor de color, sino también la escena donde se usa el color. Lo que se muestra a la derecha vale la pena aprender es el botón Estado normal. Colóquelo junto con el valor de color del estado Hover, para que la visualización del color en diferentes estados pueda ser más intuitiva.
Unifique y estandarice las variables de nomenclatura para los valores de color para mejorar la eficiencia del desarrollo y mantener mejor las especificaciones de diseño.
En el desarrollo front-end, la numeración de valores de color también optimiza en gran medida el código. Al definir una biblioteca de estilos CSS con especificaciones de diseño, no es necesario modificar repetidamente los valores de los parámetros CSS durante el proceso de desarrollo. Puede hacer referencia directamente a los nombres de las variables definidas, lo que reduce en gran medida el costo de modificar las especificaciones de diseño.
3. Fuentes
Las fuentes son una consideración esencial en el diseño. Las diferentes fuentes tienen diferentes temperamentos y dan a las personas diferentes sensaciones en diferentes escenarios. Por lo tanto, es necesario considerar el efecto de diseño de la fuente al diseñar y luego indicarlo en las especificaciones de diseño.
La siguiente cita es la especificación de fuente en la Guía de estilo de la interfaz de usuario del servicio de banca minorista. Al mismo tiempo que define el nombre de la fuente, también define el estilo de fuente y agrega efectos de vista previa de diferentes estilos de fuente comunes: : Claro, Regular, Cursiva, Seminegrita, Negrita.
4. Configuración de párrafos
En el diseño de productos reales, los párrafos tienen muchos estilos y los requisitos de los párrafos en diferentes escenarios también son diferentes. Por ejemplo: los párrafos de contenido de lectura requieren que el texto sea muy legible, por lo que la fuente, el tamaño de fuente, el color, el interlineado, etc. deben ser simples y fáciles de leer. El texto del párrafo decorativo no necesita ser tan riguroso, siempre que sea muy decorativo.
Cabe señalar que al definir la fuente predeterminada de un párrafo, también es necesario definir una fuente de respaldo, es decir, la fuente que se mostrará cuando la fuente predeterminada no se pueda mostrar normalmente. El nivel horizontal del diseño reside en el pulido de los detalles, que es el significado de las especificaciones del párrafo en el diseño.
5. Icon
Icon es un identificador de software importante y uno de los módulos más importantes en los recursos de diseño. En los productos de software, puede haber incluso íconos en cada página. Además de embellecerlos, los íconos también tienen gráficos por computadora con significados claros.
Se divide específicamente en las siguientes tres funciones:
Los iconos son signos y portales que enlazan con otros sitios web y permiten que otros sitios web enlacen. Los iconos son un reflejo importante de la imagen del sitio web. Los iconos facilitan la selección a su audiencia. Clasifica y organiza las especificaciones de diseño según el tamaño y propósito de los íconos para hacerlos más claros.
6. Imágenes
Las imágenes también son una de las partes más importantes de las especificaciones de diseño. Los recursos de imágenes están organizados según su propósito y el estilo de diseño es sistemático.
7. Medición
En el proceso de diseño, a menudo utilizamos un conjunto de estándares de medición estandarizados para mantener la consistencia del producto, es decir, el valor del filete, el espaciado y el tamaño.
La mejor explicación de la medición es el sistema de cuadrícula que se usa a menudo en el diseño. Utiliza una cuadrícula fija para diseñar el diseño y su estilo es limpio y conciso. Es por eso que a menudo utilizamos sistemas de cuadrícula en el proceso de diseño de páginas web y aplicaciones.
8. Sombra
El estilo y los parámetros de la sombra también son parte de las especificaciones de diseño. Al ordenar las especificaciones de diseño, se debe tener en cuenta que los valores de los parámetros. La sombra son los parámetros que controlan la sombra en los valores de la página web, en lugar de los valores de los parámetros en el software de diseño.
Por ejemplo: el valor del parámetro correspondiente a la sombra en la página web es: box-shadow: tipo: Desplazamiento inicial X: 0px desplazamiento Y: 4px Desenfoque: 8px Extensión: 0px color: #000000, opacidad : 10, este es el valor del parámetro de sombra que los programadores necesitan; de lo contrario, la sombra desarrollada final será inconsistente y no podrá lograr el propósito de la especificación.
9. Componentes
Componentes de UI de uso común (Componente): control de botones, cuadro desplegable, cuadro de selección (radio\casilla de verificación), selector de tiempo, cuadro de entrada, cuadros de búsqueda. , barras de progreso, buscapersonas, cuadros de aviso, cuadros de advertencia, tablas, paneles emergentes, pasos digitales, pestañas, etc.
Control de botones
El botón es uno de los componentes más comunes. El botón tiene 5 estados: normal, flotante, activo, deshabilitado y cargando.
Estos cinco estados deben enumerarse en la especificación, y se deben marcar el color de relleno del botón correspondiente, el color del borde, el valor de la esquina redondeada, el ancho y alto del botón, el tamaño del texto del botón y el valor del color. Si es un botón de icono, además de los valores de los parámetros anteriores, también es necesario marcar el espacio entre el icono y el texto del botón y el tamaño del icono.
10. Cuadro desplegable
El cuadro desplegable es un componente de radio que proporciona a los usuarios múltiples opciones. La ventaja es que utiliza el diseño de interfaz más simple para acomodar muchas cosas. de opciones. Debe prestar atención a la definición. Cuando aparece el cuadro de selección desplegable, el mouse se mueve hacia los estados Normal, Flotar y Activo.
11. Cuadro de selección (selección de radio\casilla de verificación)
Como sugiere el nombre, el botón de opción es una elección entre muchas opciones, mientras que la casilla de verificación es una elección entre muchas opciones. sin restricciones. Tanto los botones de opción como las casillas de verificación requieren tres estados, a saber, estado sin marcar, estado seleccionado y estado en el que no se puede hacer clic.
Selector de hora:
El selector de hora es un componente que selecciona el año, mes y día, correspondiente a la información del año, mes, día y semana respectivamente. Los estados que deben tenerse en cuenta al diseñar, respectivamente, son: Seleccionar, No seleccionar, Pasar el cursor y Desactivar, y están escritos en las especificaciones de diseño.
Cuadro de entrada:
El cuadro de entrada de texto es un componente esencial en el diseño de nuestros productos de software. El cuadro de entrada de texto tiene 4 estados: Normal, Activo, Desactivado y Error.
Cuadro de búsqueda:
Lo mismo que el cuadro de entrada es que debe estar enfocado y luego ingresar el contenido para completar la operación. Debe ser Normal, Activo, menú desplegable de búsqueda. estado inactivo y estado de error.
Barra de progreso:
Esto debe indicar todo el proceso de operación interactiva de la barra de progreso de carga en la especificación. Para el estado Normal, haga clic en cargar/arrastrar el estado de carga, carga, carga exitosa. , la carga falló, clasificando el estado de todo el proceso. Durante el proceso de carga, cualquier operación del usuario debe tener acciones de respuesta oportunas, para que los usuarios no se confundan durante el uso.
Paginador:
El paginador es un componente compuesto que se utiliza para cambiar páginas de contenido. Un paginador convencional tiene botones de operación de página hacia arriba y hacia abajo, botones de número de página de paginación y un cuadro de búsqueda para manual. busque ingresando el número de página y los 4 estados del buscapersonas: Normal, Flotante, Activo, Deshabilitado.
Cuadro de aviso:
El cuadro de aviso es un componente que se muestra en un panel emergente activado por eventos. Los cuadros de aviso se usan a menudo en botones de eliminación, puntos de problemas difíciles y avisos. información emergente, etc. Hay muchos diseños en este estilo y los estilos de diseño son diferentes, definiendo el estilo de la placa base, el estilo del texto y los parámetros de sombra.
Cuadro de advertencia:
El estilo de visualización cuando se informa un error en la página. Los mensajes de advertencia más utilizados son: operación exitosa, recordando al usuario que preste atención, advirtiendo al usuario que pague. atencion,etc.
Tablas:
Hay principalmente información de tipo tabla, por lo que se debe centrarse en ordenar los estilos de tabla y los tamaños de color del texto.
Panel emergente:
El panel emergente se compone principalmente de 4 partes, a saber, información de texto en el panel, botones, estilo de tamaño del panel, color de máscara y transparencia.
Paso a paso digital:
El paso a paso digital es un componente de tipo compuesto. Puede entenderse como un componente que vincula el botón y el cuadro de entrada. Por lo tanto, el cuadro de entrada y el botón tienen atributos. Estados. Hay pasos.
Pestaña:
Cambiar de pestaña significa cambiar de contenido. A diferencia de los cuadros de selección desplegables, las pestañas son componentes de radio que organizan múltiples opciones. Flotar, Activo, Deshabilitado.
?Especificaciones de diseño de UI, ¿cuáles son las especificaciones de diseño de UI? Este es el final de la introducción a este tema. ¿Tiene claro el diseño de la interfaz de usuario? Las especificaciones de diseño son muy poderosas para promover la estandarización de todo el proyecto, pero requieren tiempo y paciencia para pulirlas cuidadosamente. Por lo tanto, se necesita mucho tiempo y energía para organizar la información, editar los materiales, clasificarlos e integrarlos y, finalmente, reorganizarlos. especificaciones completas en el software de diseño. Si tiene otras preguntas sobre el diseño de la interfaz de usuario, continúe siguiendo a Yi Xialan o comuníquese conmigo~