7 Las mejores prácticas de división de UX que debes tener

Creo que todos podemos estar de acuerdo con el hecho de que Div es extremadamente versátil. Hay tantas posibilidades para personalizar y personalizar cualquier sitio web que cree. Si desea proporcionar una productividad adicional de su trabajo, esta podría ser la publicación ideal para usted. Cubriremos las mejores 7 prácticas de UX Divic con las que puede o no estar familiarizado. Los 7 consejos que compartiré son algunos que personalmente uso mucho y de los que me beneficio mientras trabajo diariamente con Div. ¡Vamos a eso! 1. Usando microanimaciones, la primera práctica óptima de la división UX que debe retener es el uso de microanalizados en lugar de los excesivos. Hubo un período en el que tantas animaciones tenían un sitio web, el más “personalizado” o “más avanzado” parecía al público. Sin embargo, esos tiempos terminaron. Además de verse muy elegantes, las animaciones excesivas no contribuyen a la experiencia general de los usuarios que las personas tienen en su sitio web. De hecho, a menudo pueden distraer a los visitantes de lo que es realmente importante. Optar por micro animaciones es el camino a seguir. Las opciones de división dividen que le permiten personalizar la velocidad y la intensidad de cualquier animación que agregue. La clave para crear microanalizados es el uso de una baja intensidad de animación con una animación ligeramente más larga.
Acceda a la pestaña de diseño de un elemento de diseño Abra cualquier elemento de diseño de su elección y acceda a la pestaña avanzada. Allí encontrarás las opciones de animación.

Use pequeñas cantidades de intensidad de animación Puede elegir cualquier tipo de animación y reducir la intensidad de la animación. Cuanto más bajo vayas, más sutil se vuelve la animación. Al aumentar la duración de la animación, se asegurará de que la animación no pase desapercibida. Optimización manual de la receptividad Una de las mayores ventajas de DIV es que es fácil de hacer y cualquier aspecto que cree receptivo. De hecho, Div ya está haciendo la mayor parte de su trabajo por usted. Todo lo que crea se vuelve receptivo desde el momento en que lo agregue. Desde ese momento antes, lo único que queda por hacer es cambiar manualmente los elementos de diseño. Esto incluye cambiar el tamaño del texto de copia que distribuye de acuerdo con el tamaño de la pantalla, por ejemplo.

Ahora, las filas y columnas han incorporado un valor de margen predefinido que cambia de acuerdo con el tamaño de la pantalla. Pero no necesariamente tiene que ir con estos valores predeterminados. Por ejemplo, descubrimos que muchos sitios web populares usan menos bordes izquierdo y derecho en tamaños de pantalla más pequeños. De esta manera, puede agregar más contenido horizontal, lo que significa que se requiere un desfile inferior. El margen predeterminado a la izquierda y a la derecha que se usa en dimensiones de pantalla más pequeñas es de 40 px. Para aprovechar todo el ancho del tamaño más pequeño de la pantalla, le recomiendo que reemplace este valor en 25 px.
Pasemos el proceso paso a paso.
Cambie el tamaño de la fila Lo primero que debe hacer es eliminar todo el espacio entre secciones, filas y módulos, activando las siguientes opciones en la configuración del tamaño:

Haga que esta fila sea un ancho completo: Dale el ancho personalizado de la canaleta: Sí
El ancho de la canaleta: 1
Agregue una sección o un forro de fila ahora, todavía queremos tener suficiente espacio entre la sección y la fila. Puede elegir si desea agregar relleno personalizado de izquierda a derecha a su vez o sección a la que trabaja. Agregar en una fila no afectará otras líneas en la sección. Pero, por otro lado, su aplicación a las secciones asegurará que estos bordes sigan siendo los mismos en toda la sección, sin importar cuántas filas agregue.
Revelaje izquierdo: 23VW (escritorio), 30 px (tableta), 25 px (teléfono)

Revestimiento derecho: 23VW (escritorio), 30 px (tableta), 25 px (teléfono)
Agregue el llenado de la columna vertebral El espacio entre las columnas y los módulos también es importante. Puede personalizar estos valores de acuerdo con el tamaño diferente de la pantalla.
Columna 1 Reinicio derecho: 1VW (escritorio), 0VW (tableta y teléfono)

Columna 2 Lineo izquierdo: 1VW (escritorio), 0VW (tableta y teléfono)
Columna 2 Reinicio derecho: 1VW (escritorio), 0VW (tableta y teléfono)
Columna 3 Roting izquierdo: 1VW (escritorio), 0VW (tableta y teléfono)
Reduzca el tamaño del texto ¿Desea usar el ancho horizontal 100% que obtiene en un tamaño de pantalla más pequeño? Aunque 13 PX para el tamaño del texto del cuerpo puede parecer pequeño desde la perspectiva de la computadora portátil, generalmente es más que suficiente para un dispositivo móvil. Intente ver un tamaño corporal de 13 ppx en su teléfono móvil, en combinación con los pasos anteriores, ¡y verá de qué estoy hablando!
3. El uso de unidades de ventanas gráficas en lugar de píxeles es una de las cosas que hemos hecho en el paso anterior. Para asegurarse de que su sitio web permanezca receptivo a todas las dimensiones de la pantalla de escritorio, es aconsejable usar unidades de visualización en lugar de píxeles. Esto asegurará que su sitio web se vea genial y exactamente como lo diseñó, incluso en monitores de escritorio de 27 “. Por otro lado, las dimensiones más pequeñas de la pantalla no tienden a diferir tanto como una pantalla de 15 “en comparación con una pantalla de 27”. Puede usar unidades de visualización al crear superposiciones verticales, pero pegar con píxeles para llenar / izquierda y derecha no hará daño. Expandir el estilo para orientar el texto Una de las cosas que las personas notarán rápidamente en su sitio web, incluso subconsciente, es lo consistente que es en el diseño que ha construido. Esto incluye, pero no se limita a la orientación del texto que usa en sus páginas. Una de las mejores prácticas de UX es la finalización de un diseño al verificar la orientación del texto. Definitivamente puede combinar diferentes orientaciones de texto en una página, si están bien pensadas y jugadas. Pero, se vuelve más difícil cuando combinas diferentes orientaciones de texto en una sección particular. El mejor escenario; Mantenga una orientación de texto en toda la página. Pero si desea experimentar más, intente mantener al menos un tipo de orientación de texto por sección. Puede hacer esto simplemente echando un vistazo a los diferentes elementos de diseño o puede usar una de las características de eficiencia que harán su trabajo.

En solo unos pocos pasos, puede asegurarse de usar la misma orientación y consistencia del texto en toda la página o sección. Pasemos por esos pasos. Abra cualquier módulo que contenga texto, abra cualquier módulo en su página que contenga texto y acceda a la configuración de texto.
Haga clic en la derecha La opción de orientación de texto haga clic derecho en la opción de orientación de texto que puede encontrar en la configuración de texto y seleccione la opción “Extender estilos”.

Expanda la orientación del texto en la elección en toda la sección o en toda la página ahora, dependiendo de cuán consistente desee la orientación del texto en toda su página, puede optar por extender la orientación del texto en toda la apariencia o en una determinada sección.
5. Cambiar de vuelta y avanzar entre el modo Visual Builder y el modo de estructura alámbrica Una de las cosas maravillosas sobre Visual Builder of Div es que ni siquiera tiene que elegir entre editar algo en backend o frontend. El cambio entre ambos literalmente dura menos de un segundo. Creo que puede obtener el mejor nivel de productividad y presentación general si combina ambos. Especialmente si se trata de una apariencia más superpuesta, el modo de estructura alámbrica puede ayudarlo a hacer cambios rápidos. O, si desea deslizarse y arreglar un cierto elemento de diseño en otra parte de la página, puede hacerlo más fácil pasando la estructura alámbrica y tirando de ese elemento sin tener que correr sin fin.

¿Y sabías que puedes abrir el camino de un elemento de diseño y cambiar entre Visual Builder y Wireframe mientras aún tienes un modo abierto? Esto le permite realizar cambios en su fondo de diseño y ver la nueva configuración de diseño que está en su lugar cuando lo desee. Importar / exportar la apariencia directamente en la página Hasta ahora, todos nos hemos acostumbrado a los aspectos prefabricados, los aspectos guardados y la biblioteca de la Divic en general. Pero dígase a sí mismo que está trabajando en una página en particular en un host local y que desea cargarlo en un sitio web en vivo una vez que haya terminado sin pasar por la dificultad:

Salvando la apariencia en el div

Vaya a la Biblioteca de la Divica y exporte el archivo JSON
Acceda a la biblioteca de la Divic de su sitio web en vivo

Cargando el archivo JSON
Vaya a la página de su sitio en vivo
Cargando el archivo JSON desde aspectos guardados
Luego, simplemente puede usar la opción Importar / Exportar que está allí en su página. Esto le permitirá crear un archivo JSON sin tener que acceder a la biblioteca de Divic en absoluto.
De la misma manera que ha exportado el aspecto, podrá importar el look a su nueva página. Pero sepa que una vez que elija este enfoque, no podrá importar la apariencia en la Biblioteca de Divic en su sitio en vivo. Solo directamente en una página. 7. El uso regular de la opción de “reducción” para mantener esta perspectiva es probablemente una de mis características favoritas de Div. Estoy seguro de que hice todo antes; Abra una nueva pestaña regular o ventana de incógnito para ver el resultado de una página que creamos. Luego hizo una pantalla de impresión para toda la página utilizando una extensión de Chrome o un suplemento de Firefox. Todo esto para darle una nueva imagen del aspecto en el que trabaja y para ver si todo encaja en la estructura general de la página. Aunque todavía te recomiendo que hagas esto ocasionalmente, no tendrás que hacerlo varias veces en un corto período de tiempo. En su lugar, use la opción de disminución que está allí en Visual Builder. Esto no solo le dará la perspectiva que está buscando aumentar la productividad al crear sitios web con Div. ¡Estos consejos definitivamente serán útiles al crear cualquier tipo de sitio web! Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación. Imagen presentada por Aurielaki / Shutterstock.com