¿Cuáles son las reglas de diseño para el diseño de prototipos de interfaz de producto?
En el diseño de texto de la página prototipo, se recomienda utilizar macOS o Microsoft Yahei (Windows) para seleccionar la fuente y lograr una mejor calidad de visualización. efecto.
Personalmente suelo utilizar 12, 13, 14, 15, 17 y ocasionalmente 9, 10, 20.
02 Coincidencia de colores: color y conexión
En el diseño de color de la página prototipo, es mejor mantener la coherencia, ya sea texto u otros gráficos o imágenes. Utilice demasiados colores excepto el negro. Valores de color distintos del gris y el blanco.
Si se requieren íconos para demostración en el prototipo del producto, se debe mantener la consistencia, tamaño y estilo de las imágenes. Pero en el trabajo real, a excepción de algunos íconos muy instructivos, como búsqueda, configuración, compartir, etc. , trate de no utilizar materiales de iconos.
También debes intentar evitar mezclar los materiales que componen la interfaz del prototipo, como tomar capturas de pantalla de productos maduros y aplicarlas a tu propio prototipo de producto.
Se ha agregado el ajuste AjustarColor a Axure9, que puede ajustar el valor del color de la imagen.
03 Composición tipográfica: alineación, espaciado y mensaje
En el diseño estructural de la página prototipo, funciones como línea de base, alineación y distribución deben usarse de manera flexible para que el contenido de la página sea legible. .
Personalmente, establecería el espaciado o espacio en blanco en múltiplos de 5 píxeles. La selección normalmente ajusta el valor de relleno en el panel Estilos, lo que en muchos casos también me ayuda a alinear los componentes. El espacio entre líneas entre textos se ajustará ocasionalmente, pero prevalecerá el valor predeterminado.
04 Caso
Los siguientes son algunos diagramas esquemáticos de la página prototipo estándar:
05 Conclusión
Para aquellos que quieren ser gerentes de producto o diseñadores de interacción Como novato, se recomienda que cultive conscientemente sus propias especificaciones de diseño mientras se familiariza con el uso de herramientas. Al dibujar una estructura alámbrica o copiar otros productos maduros para crear un prototipo de alta fidelidad (en el trabajo real, no es necesario crear un prototipo de alta fidelidad, así que preste especial atención aquí), asegúrese de prestar atención a los dos siguientes puntos:
Wireframe: No se recomienda diseñar la página completamente de acuerdo con las especificaciones de diseño de Apple o Android.
Garantía alta: No se recomienda realizar copias a nivel de píxeles.