¿Cómo escribir un documento de especificación de diseño de UI?
Las especificaciones de diseño de la interfaz de usuario incluyen varias categorías:
1. Logotipo
La sensación directa de la impresión de la marca varía según el fondo de la página. Los logotipos utilizados por los productos se clasifican de manera uniforme y los recursos de logotipos de la guía de estilo de la interfaz de usuario Petshop de Moby se citan como ejemplos.
El logotipo de la interfaz de usuario de Moby's Petshop consta de gráficos y texto, y el color de la marca es azul. El uso del logotipo también debe considerar 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.
En las categorías, muestra un logotipo con los colores de la marca, un logotipo con un fondo del color de la marca y un logotipo con un fondo negro en el pie de página.
2. Color estándar
El color es la parte más importante del diseño, nada más. Los detalles determinan la calidad, por eso el uso de colores 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 a los colores y especifique la interfaz a utilizar.
Las siguientes son las especificaciones de color para la Guía de estilo de la interfaz de usuario True Pixel. Como puede ver, cada color no solo está marcado con un valor de color, sino que también se muestra a la derecha la escena donde se usa el color. Lo que vale la pena aprender es juntar los valores de color del estado normal y el estado de desplazamiento del botón para que los colores que se muestran en diferentes estados sean más intuitivos.
Estandarizar variables nombradas de 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 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 importante en el diseño. Diferentes fuentes tienen diferentes temperamentos y diferentes sentimientos en diferentes escenas. 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 es una referencia a las especificaciones de fuente en la "Guía de estilo de la interfaz de usuario de servicios de banca minorista". Al definir el nombre de la fuente, también se define el estilo de fuente y se agrega el efecto de vista previa de diferentes estilos de fuente. Los estilos de fuente comunes son: claro, regular, cursiva, seminegrita y negrita.
4. Configuración de párrafos
En el diseño de productos reales, hay muchos estilos de párrafos y diferentes escenarios tienen diferentes requisitos para los párrafos. Por ejemplo, los párrafos de contenido de lectura requieren que el texto sea muy legible, por lo que la fuente, el tamaño, el color y el interlineado deben ser simples y fáciles de leer. El texto del párrafo decorativo no necesita ser tan riguroso, pero puede serlo.
Cabe señalar que al definir la fuente predeterminada para 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. Ésta es la importancia de las especificaciones del párrafo en el diseño.
5. Centro de información sobre normas nucleares
El icono es un símbolo de software importante y uno de los módulos más importantes en los recursos de diseño. En un producto de software, puede haber incluso iconos en cada página. Además del embellecimiento, los iconos también tienen gráficos por computadora con un significado claro.
Se divide en las siguientes tres funciones:
El icono es un signo y portal que enlaza con otros sitios web y permite enlazar a otros sitios web. Los iconos son un reflejo importante de la imagen del sitio web. Los iconos facilitan la elección de los espectadores. Las especificaciones de diseño están clasificadas y organizadas según el tamaño del icono y el propósito de uso para que quede más claro.
6. Imágenes
Las imágenes también son una de las partes más importantes de la especificación de diseño. Los recursos de imágenes se clasifican según su uso y el estilo de diseño es sistemático.
7. Medidas
Durante el proceso de diseño, a menudo utilizamos un conjunto estandarizado de métricas para mantener la consistencia del producto, es decir, valores de filete, espaciado y dimensiones.
La mejor manera de explicar las mediciones es el sistema de cuadrícula, que se utiliza a menudo en diseño. El diseño adopta un diseño de cuadrícula fija, con un estilo limpio y conciso. Es por eso que a menudo utilizamos el sistema de cuadrícula en el proceso de diseño de páginas web y aplicaciones.
8. Sombras
Los estilos y parámetros de las sombras también forman parte de la especificación de diseño. Al clasificar las especificaciones de diseño, debe tenerse en cuenta que los valores de los parámetros de la sombra son los valores de los parámetros que controlan la sombra en la página web, no 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:type:outcome offsetx:0px offsety:4px blur:8px spread:0px color:# 000000, opacity: 10 %. Este es el valor del parámetro de la sombra que el programador necesita; de lo contrario, la sombra desarrollada final será inconsistente y no cumplirá con las especificaciones.
9. Componentes
Componentes comunes de la interfaz de usuario): control de botones, cuadro desplegable, cuadro de selección (radio\casilla de verificación), selector de tiempo, cuadro de entrada, cuadro 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, tiene cinco estados: normal, flotante, activo, deshabilitado y cargado.
Estos cinco estados deben enumerarse por separado en la especificación, y se marcan 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 hay muchas opciones incluidas en el diseño de interfaz más simple. Es necesario definir los estados normal, flotante y activo cuando se mueve el mouse cuando aparece el cuadro de selección desplegable.
11. Cuadro de selección (radio\casilla de verificación)
Como sugiere el nombre, el botón de opción es una de muchas opciones y la casilla de verificación es una de muchas opciones. Puedes elegir sin restricciones. Los botones de opción y las casillas de verificación requieren tres estados: estado no seleccionado, 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, día y semana, correspondiente a la información de año, mes, día y semana respectivamente. Se deben considerar cuatro estados durante el diseño, a saber, seleccionar, Not_Select, Hover y Disable, y escribirlos en las especificaciones de diseño.
Cuadro de entrada:
El cuadro de entrada de texto es una parte importante del diseño de nuestro producto de software. Los cuadros de entrada de texto tienen cuatro estados: normal, activo, deshabilitado y error.
Cuadro de búsqueda:
Al igual que el cuadro de entrada, es necesario enfocarlo y luego ingresar el contenido para completar la operación. Debe haber estados de error y estados de error en el menú desplegable de búsqueda normal y activo.
Barra de progreso:
Esto requiere especificar todo el proceso de operación interactiva de la barra de progreso de carga en la especificación y ordenar el estado normal, hacer clic en cargar/arrastrar el estado de carga y cargar. progreso Medio, carga exitosa, carga fallida y el estado completo del proceso. Durante el proceso de carga, cualquier operación del usuario debe tener una acción de respuesta oportuna, para que los usuarios no se confundan durante el uso.
Pager:
Pager es un componente compuesto que se utiliza para cambiar páginas de contenido. El dispositivo de búsqueda tradicional tiene botones de operación de página hacia arriba y hacia abajo, botones de números de página de búsqueda, un cuadro de búsqueda para ingresar números de página y cuatro estados del dispositivo de búsqueda: normal, flotante, activo y deshabilitado.
Cuadro de aviso:
El cuadro de aviso es un componente que se muestra en un panel emergente activado por un evento. Los lugares donde se utilizan con frecuencia los cuadros de aviso incluyen botones de eliminación, puntos de problemas difíciles, mensajes emergentes de aviso, etc. Hay muchos diseños de este estilo y los estilos de diseño también son diferentes. Defina los parámetros de estilo de suelo, estilo de texto y sombra.
Cuadro de advertencia:
El estilo de visualización de los informes de error de la página. Los mensajes de advertencia más utilizados incluyen: operación exitosa, recordar al usuario que preste atención, advertir al usuario que preste atención, etc.
Formulario:
Hay mucha información en la tabla, así que concéntrate en ordenar el estilo de la tabla y el tamaño del color del texto.
Panel emergente:
El panel emergente consta principalmente de cuatro partes, a saber, la información de texto en el panel, los botones, el estilo del tamaño del panel, el color de la máscara y la transparencia.
Paso a paso digital:
El paso a paso digital es un componente compuesto, que puede entenderse como un componente vinculado por el botón y el cuadro de entrada, por lo que el cuadro de entrada y el botón tienen estados de atributos. , y el paso a paso tienen.
Pestañas:
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 y tienen cuatro estados a considerar: normal, flotante, activo y deshabilitado.
? Especificaciones de diseño de UI, ¿cuáles son las especificaciones de diseño de UI? Con esto concluye la introducción a este tema. ¿Conoce el diseño de interfaz de usuario actual? La especificación de diseño promueve en gran medida la estandarización de todo el proyecto, pero requiere tiempo y paciencia para pulirla cuidadosamente, por lo que se necesita mucho tiempo y energía para organizar los datos, editarlos, clasificarlos e integrarlos y finalmente reorganizarlos. especificación completa 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~