Las cinco palabras clave del ADN de la marca son: confianza, profesionalidad, comodidad, seguridad e imaginación.
Según el principio de "cognición visual" de la psicología Gestalt, en una Gestalt (es decir, un único campo visual), la capacidad de los ojos sólo puede aceptar unas pocas unidades generales no relacionadas. Si una Gestalt contiene demasiadas unidades no relacionadas, el ojo y el cerebro no pueden simplificarla y la imagen general permanecerá desorganizada o confusa, haciendo imposible reconocerla correctamente. [1] Por lo tanto, en un campo visual, los elementos pueden ser percibidos mejor por los ojos y el cerebro para facilitar la lectura. Esta pulcritud y organización también mejora la confiabilidad de la información. La disposición ordenada creada mediante métodos de cálculo científicos puede resistir el escrutinio y refleja la profesionalidad del diseño. Por tanto, si el diseño quiere aportar confianza, profesionalismo, comodidad y seguridad al público, primero debe seguir el principio de orden.
En la teoría estética, el ritmo es la forma básica que separa la producción, la vida y los diferentes objetos de sus formas específicas, los iguala y homogeneiza, y con ello establece el orden. Un sentido del ritmo que se ajuste a las reglas visuales puede hacer que las personas se sientan felices y estimulantes. [2] Por lo tanto, utilizar el contraste en el diseño para crear un cierto sentido de ritmo puede facilitar que la audiencia obtenga información y, al mismo tiempo, crear un cierto espacio para la imaginación.
El concepto de tasa de continuidad fue propuesto en la teoría de la percepción visual: en el proceso de percepción, las personas tienden a hacer que las líneas rectas de los objetos percibidos sigan siendo líneas rectas y las curvas sigan siendo curvas. 【3】 En el diseño de maquetación, la alineación de elementos se ajusta a las características cognitivas de la audiencia, brindando así una sensación de seguridad y confiabilidad.
La teoría del peso visual señala que el espacio en blanco está vacío y no tiene peso visual. Por lo tanto, los objetos colocados en el espacio vacío contrastan más con su entorno. La teoría de la dirección visual afirma que el espacio vacío también tiene un campo de fuerza que guía la mirada del espectador. [4] Por lo tanto, el uso razonable del espacio en blanco puede resaltar el tema, guiar a la audiencia a leer y generar cierta cantidad de imaginación.
En resumen, las palabras clave del diseño de Alipay se pueden refinar en orden, contraste, alineación y espacio en blanco.
Método: 1. Utilice una disposición y distribución regulares para crear una sensación de orden en la página, como organizarla en orden numérico.
2. Agrupar información por proximidad, similitud y cierre.
Método: utilice métodos de cálculo científicos para crear un diseño de salto razonable.
Método: utilice una cuadrícula o guías para garantizar la alineación de los elementos en su diseño.
Método: utilice métodos de cálculo científicos para crear una proporción de espacios en blanco razonable en el diseño.
Bajo la guía de estos cuatro principios, en el diseño real, utilizaremos cálculos secuenciales para controlar la disposición y combinación de elementos visuales. Los métodos de cálculo científicos pueden crear un diseño compacto, claro, limpio y ordenado, que también mejora la confiabilidad de la información. Al formatear, presentar los títulos principales, subtítulos, texto principal, ilustraciones y notas de forma clara y lógica no sólo hará que la lectura sea más rápida y sencilla, sino que también hará que la información sea más fácil de comprender y recordar.
La aplicación de la secuencia en la tipografía supone:
1. Sistematización y claridad
2. Sustituir la subjetividad por la objetividad.
3. Ver el proceso de diseño de forma racional.
Progresión aritmética: la tasa de salto es baja, el nivel de información no se puede abrir con claridad y es difícil para la audiencia comprender la información de forma rápida y clara. Contrariamente al ADN de "conveniencia" de la marca; (10)
Progresión geométrica: la tasa de rebote es demasiado alta, el diseño está demasiado suprimido y las fluctuaciones psicológicas de la audiencia son mayores. Contrariamente al ADN de "seguridad" de la marca; (10)
Secuencia de Fibonacci: la tasa de salto es moderada, el público se sentirá más cómodo al leer, puede separar los puntos clave y no clave, y mejorar la legibilidad del diseño correspondiente al ADN de la marca.
(○)
Secuencia de Fibonacci (Sección Áurea): La proporción áurea se considera la “proporción prescrita por Dios”. Fechner, el esteticista experimental alemán del siglo pasado, descubrió que existe una superposición entre la elección de formas artísticas por parte de las personas y las oscilaciones de las ondas cerebrales de las personas sanas. La proporción áurea es una "escala interior" que se refiere al mapa mental humano. [5]
Secuencia de Fibonacci
1, 1, 2, 3, 5, 8, 13, 21, 34...
Fórmula F (0 )=0, F(1)=1, F(n)= F(n-1) F(n-2)(n>=2, n∈N*)
Rectángulo Dorado
A medida que aumenta la secuencia de Fibonacci, la proporción entre el elemento anterior y el siguiente se acerca al valor de la sección áurea de 0,618039887...
Actualmente, los materiales fuera de línea se dividen en materiales básicos y materiales activos. y materiales industriales. Aquí discutimos principalmente el diseño de materiales activos y materiales industriales. El título, el complemento del elemento, los detalles y el área de visualización de la marca son los contenidos básicos del material. La proporción de estos contenidos se ajustará según los diferentes tipos de material. Hay muchos tipos de materiales fuera de línea. Este artículo selecciona principalmente tres materiales representativos: carteles, expositores y pegatinas para el suelo para su exploración. El proceso de exploración es el siguiente:
1. Determine la altura del área de visualización de la marca
2. Determine el centro del diseño.
3. diseño de los elementos
4. Determine la alineación de los elementos
5. Determine el formato del texto (consulte el documento de especificación de uso de fuentes para esta parte).
La altura del área de visualización de la marca del material se basa en la altura de un rectángulo dorado con el mismo ancho.
Cuando la altura del material permanece sin cambios, la altura del área de visualización de la marca también permanece sin cambios. Cuando cambia la altura del material, la altura del área de visualización de la marca se ajusta proporcionalmente. Esta relación se calcula en función de la relación entre la altura original del material y la altura de un rectángulo dorado del mismo ancho.
Fórmula de cálculo:
Altura del material=H1
Altura del área de visualización de la marca del material=H2
Un rectángulo dorado con el mismo ancho como material Height=h1
La altura del área de exposición de la marca rectangular dorada con el mismo ancho que material=h2.
H2=h2*(H1/h1)
Circunstancias especiales:
Durante el proceso de diseño de material activo fuera de línea, cuando la relación de aspecto excede 1:2, el área de visualización de la marca se colocará a la derecha.
Suponiendo que el ancho del material es w, según la secuencia de Fibonacci, se recomienda que el área de visualización de la marca sea 2/8w cuando la relación de aspecto sea 1:4≤1:2, y cuando la relación de aspecto es < 1:4. Es 1/5w, como se muestra en la siguiente figura:
El diseño regional de la visualización de la marca se divide según la secuencia de Fibonacci.
La altura del área de visualización de la marca se divide en 5:3, los espacios superior e inferior son 5/16 respectivamente y la altura del logotipo es 3/8. El logo está colocado en el medio. La altura del conector entre los logos es 3/8 de la altura del logo de Alipay. La distancia entre el conector y el logo es igual a la altura del conector. Como se muestra en la siguiente figura:
El centro de la placa del material se establece de acuerdo con el ancho del material y el área en blanco a su alrededor se calcula mediante la secuencia de Fibonacci.
Configuración del centro de edición - Póster vertical
Suponga que el ancho del póster es w y calcule el ancho del espacio en blanco a=1/8w según la secuencia. El rectángulo dorado tiene una relación de aspecto de 8:5, por lo que la altura del margen superior es 5/8a. El contenido en la parte superior del póster debe destacarse, por lo que se necesita más espacio en blanco para resaltarlo. Hay un área de exhibición de la marca con más espacio en blanco en la parte inferior, por lo que la altura del espacio en blanco inferior se establece en 3. /8a. Como se muestra en la siguiente figura:
Editar configuración del centro - marco de exposición
El método de configuración del centro del estante de exposición es el mismo que el del cartel vertical. Supongamos que el ancho del soporte de exhibición es w, el ancho del espacio en blanco es a = 1/8w, la altura del espacio en blanco del borde superior es 5/8a y la altura del espacio en blanco del borde inferior es 3/8a .
Configuración del Centro de edición - Póster horizontal
Porque el ancho del póster horizontal es relativamente largo. Por lo tanto, el ancho del póster horizontal se establece en w, el ancho del margen es a=1/13w, la altura del margen del borde superior es 5/8a y la altura del margen del borde inferior es 3/8a.
Editar configuración del centro: pegatinas de piso
Supongamos que el diámetro de la loseta del piso es r, el ancho del espacio en blanco a=1/8R, la altura del margen superior es 5/8a , y la altura del margen inferior 3 /8a.
Cálculo del ancho del espacio en blanco
El ancho del espacio en blanco depende del ancho del material. Supongamos que el ancho del espacio en blanco es a y el ancho del material es w, el valor de a = n * w a = n * w cambiará con el cambio de la relación de aspecto del material. Cuando la relación de aspecto del material es superior a 1:1, n = 1/8; cuando la relación de aspecto está entre 5:8 y 1:1, n = 1/13 cuando la relación de aspecto es inferior a 5:.
Cálculo del área ciega visual de los materiales de aterrizaje
En el proceso de diseño real, habrá una determinada área ciega visual en la parte inferior de materiales como trípodes de aterrizaje. Si el estilo visual es el mismo que el de un póster, se ignorará la parte de la marca. Por lo tanto, especificamos la altura de la zona ciega visual del material de aterrizaje. Suponiendo que la altura promedio de la audiencia es de 160 cm y la distancia de visión de la cabina de piso es de 500 cm, según mi perspectiva, la altura del punto ciego visual es de 30 cm.
Para este tipo de material con puntos ciegos visuales, la ubicación del logotipo en el área de visualización de la marca se ajusta desde la alineación central hasta la alineación inferior.
Utiliza la secuencia de Fibonacci para dividir la altura del centro de la placa para especificar la disposición de los elementos en el material.
Diseño de elementos - Póster vertical 1 (Póster del evento)
La altura del núcleo es H, dividido en 16 partes pequeñas, según 5/16, 8/16, 3/ 16 La proporción se divide en tres partes. Cuando la imagen principal es grande, el título ocupa 5/16 y la imagen principal ocupa 8/16. Como se muestra en la siguiente figura:
Disposición del elemento: cartel vertical 2 (póster del evento)
La altura del núcleo es H, dividida en 16 partes pequeñas, según 5/16, 8 /16, la proporción de 3/16 se divide en tres partes. Cuando hay muchos títulos, el título representa el 16/8 y la imagen principal representa el 16/5.
Disposición del elemento: póster vertical (material industrial)
La altura del núcleo del tablero es h, dividida en 16 partes pequeñas, según la proporción de 5/16, 8/16, 3. /16 Dividido en tres partes. El contenido temático de los materiales industriales es relativamente simple, sin demasiadas modificaciones visuales, pero con muchos detalles orientativos. Entonces, el título representa el 16/3, la imagen principal representa el 16/8 y los detalles representan el 16/5.
Disposición de elementos: marco de exposición (materiales industriales)
La altura central de la placa es h, dividida en 16 partes y dividida en tres partes según la proporción de 5/16. , 16/8, 16/3 de participación. El tamaño de la cabina es esbelto y los detalles se pueden disponer verticalmente. Entonces, el título representa el 16/3, la imagen principal representa el 16/5 y los detalles representan el 16/8.
Diseño de elementos: póster de actividad horizontal
El ancho del núcleo es w, dividido en 8 partes pequeñas, divididas en dos partes según la proporción de 5/8 y 3/8, y el área del título ocupa 5/8, la imagen principal ocupa 3/8.
Disposición del elemento: pegatinas para el suelo
La altura del núcleo es H, dividida en 16 partes pequeñas y dividida en tres partes grandes según la proporción de 5/16, 8/16, 3/16 En esta sección, el título representa 8/16, la imagen principal representa 5/16 y los detalles representan 3/3.
Para que todo el diseño presente un efecto visual regular, los elementos se escriben en una alineación de izquierda a derecha.
Actualmente en la billetera Alipay, el espacio entre elementos en diferentes páginas es variado y el diseño de los elementos es irregular. Por lo tanto, cuando se comparan varios diseños juntos, resultará confuso, por lo que aquí unificamos el espaciado de elementos y brindamos varios conjuntos de sugerencias de proporciones de diseño.
El área mínima de clic en iOS es de 44px. Esto se debe a que Apple usa 11px como unidad básica en la dimensión vertical. En la dimensión física, la altura del espacio mínimo es 11*4=88px, que es la altura mínima que un dedo puede tocar. Al mismo tiempo, todas las especificaciones de los componentes de iOS son múltiplos de 4, por lo que los elementos y el espaciado en iOS deben ser múltiplos de 4. Las páginas generales utilizarán 2, 4 y 8 como base de la cuadrícula. Teniendo en cuenta que la granularidad de 2 es pequeña, el diseño de la página se verá bien, mientras que la granularidad de 8 es demasiado grande y no lo suficientemente flexible. En resumen, estipulamos que el espacio entre elementos de la página sea múltiplo de 4.
1. El espaciado entre elementos es múltiplo de 4.
Elija un múltiplo de 4 píxeles para un espaciado personalizado entre elementos de la página, etc.
2. La distancia entre el contenido de la página y el borde de la pantalla es de 32px (18dp).
Nota: Las páginas especiales pueden usar 24px (12dp).
3. El espacio entre tarjetas y listas es de 16px (8dp) y 32px (16pp) respectivamente.
La relación de aspecto de los elementos (llamada relación de aspecto) se puede aplicar a los elementos de la interfaz de usuario y al tamaño de la pantalla. Según la secuencia de Fibonacci, las proporciones recomendadas son:
8:5, ?8:3, 4:1, 8:1
(1, calculado en proporción La altura es un valor aproximado divisible por 4. Cuando las siguientes proporciones no pueden cumplir con los requisitos de la página, puede usar 4px como punto de referencia y ajustar el tamaño aumentando su múltiplo, como aumentar la altura en 20px, 32px, 36px, etc. )
De acuerdo con la secuencia de Fibonacci, se recomienda que la relación ancho-alto del bit del banner sea 8:3 y 4:1 (la altura calculada proporcionalmente es un valor aproximado divisible por 4). Hay dos tipos de disposición de elementos: disposición izquierda y derecha y disposición centrada.
Hay siete estilos principales de tarjetas de caja de vida. La estructura de información y el diseño de las tarjetas están estandarizados aquí, como se muestra en la siguiente figura:
Hay cinco estilos principales en las tarjetas. página de inicio del estilo de tarjeta del centro de mensajes. La estructura de la información y el diseño de las tarjetas están estandarizados aquí, como se muestra a continuación:
Referencias
Kurt Koffka. Principios de la Psicología Gestalt[M]. Zhejiang: Zhejiang Education Press, 1997.13-16, 119.
[2]Li Zehou. Cuatro conferencias sobre estética[M]. Beijing: Librería Sanlian, 1999, 74
[3][4] Rudolf Arnheim. Arte y Visión[M]. Sichuan: Editorial del Pueblo de Sichuan, 2001, 20-28.
[5] Mao Xiong Chunshan, Takemura Kenichi, Xiao Zhiqiang (traducido). Actividad revolucionaria en el cerebro[M]. Taipei: Starlight Publishing House, 1998, 113
Enlace original: /design. Alipay/diseño .avance/formato