Cómo diseñar el mini programa WeChat
Basándonos en las características dinámicas de los miniprogramas WeChat, hemos formulado sugerencias y pautas de diseño de interfaz de miniprogramas. Las pautas de diseño se basan en el pleno respeto al derecho del usuario a conocer y operar. Su objetivo es establecer una experiencia de usuario amigable, eficiente y consistente dentro del ecosistema WeChat, al tiempo que maximiza la adaptabilidad y el soporte para diferentes necesidades para lograr una situación beneficiosa para todos entre los usuarios y los proveedores de servicios de miniprogramas.
Para evitar que los usuarios se distraigan con el complejo entorno circundante cuando utilizan los servicios de miniprogramas en WeChat, los miniprogramas deben prestar atención a reducir la interferencia de elementos de diseño irrelevantes en los objetivos del usuario al diseñar miniprogramas, y muéstrelos cortésmente a los usuarios. Los servicios proporcionados por el programa guían a los usuarios para que operen de manera amigable.
Cada página debe tener un enfoque claro para que los usuarios puedan comprender rápidamente el contenido de la página cada vez que ingresan a una nueva página. Bajo la premisa de determinar los puntos clave, se debe tratar de evitar otros factores de distracción en la página que sean irrelevantes para la toma de decisiones y las operaciones del usuario.
El tema de esta página es consulta, pero agrega muchas entradas comerciales que no están relacionadas con la consulta y no tienen nada que ver con el objetivo del usuario, lo que puede hacer que los usuarios se pierdan fácilmente.
Elimine cualquier contenido que sea irrelevante para los objetivos del usuario, aclare el tema de la página y proporcione contenido de ayuda que ayude a los usuarios a tomar decisiones y operaciones, como términos de búsqueda recientes, si la tecnología y los controles de la página lo permiten. .
No existe ninguna operación primaria ni secundaria, por lo que los usuarios no tienen otra opción.
En primer lugar, es necesario evitar yuxtaponer demasiadas operaciones para que los usuarios elijan. Cuando es necesario yuxtaponer varias operaciones, es necesario distinguir las operaciones primarias y secundarias para reducir la dificultad de selección del usuario. .
Para permitir que los usuarios utilicen la página sin problemas, cuando el usuario está realizando un determinado proceso operativo, se debe evitar que el contenido fuera del proceso objetivo del usuario interrumpa al usuario.
El usuario intentó buscar, pero fue interrumpido por un repentino cuadro de lotería modal al ingresar a la página, es una interferencia muy poco amigable para los usuarios que no están interesados en la lotería e incluso si algunos usuarios sí lo están; " Atraído por actividades de lotería "atractivas", si abandona el proceso principal para participar en la lotería, puede olvidar el objetivo original y luego perder el uso y la comprensión del verdadero valor del producto.
Una vez que un usuario ingresa a nuestra página del mini programa, tenemos la responsabilidad y obligación de informarle de manera clara y clara dónde se encuentra y adónde puede dirigirse, de manera que garantice que el usuario pueda moverse libremente por la página. página sin perderse, para brindar a los usuarios una experiencia segura y placentera.
Navegación clara, fácil de entrar y salir
La navegación es el factor más crítico para garantizar que los usuarios no se pierdan al navegar y saltar en la página web. La navegación debe indicar a los usuarios dónde se encuentran actualmente, adónde pueden ir, cómo regresar, etc. En primer lugar, todas las páginas de todos los miniprogramas del sistema WeChat tendrán su propia barra de navegación proporcionada por WeChat, que puede resolver de manera uniforme el problema de dónde se encuentra actualmente y cómo regresar. Mantener una experiencia consistente en la navegación a nivel de WeChat ayuda a los usuarios a formar una experiencia unificada y una percepción interactiva dentro de WeChat, sin agregar costos de aprendizaje ni cambiar los hábitos de uso al cambiar entre mini programas y otras páginas de WeChat.
Barra de navegación de WeChat
La barra de navegación de WeChat se hereda directamente del cliente. Aparte del color de la barra de navegación, los desarrolladores no necesitan ni pueden personalizar el contenido. Sin embargo, los desarrolladores deben especificar la relación de salto entre cada página del miniprograma para que el sistema de navegación pueda funcionar de manera razonable.
La barra de navegación de WeChat se divide en área de navegación, área de título y área de operación. El área de navegación controla el proceso de la página del programa. Actualmente, la barra de navegación se divide en dos colores básicos: oscuro y claro.
Área de navegación (iOS)
Cuando WeChat ingresa a la primera página del mini programa, el área de navegación generalmente solo tiene una operación: "Regresar", que consiste en regresar a WeChat. página antes de ingresar al mini programa. Después de ingresar a la página secundaria del mini programa, las operaciones en el área de navegación son: "Regresar" y "Cerrar". "Regresar" significa regresar a la interfaz del mini programa del nivel anterior o a la interfaz WeChat. "Cerrar" significa salir del miniprograma directamente desde la interfaz actual y regresar a la página de WeChat antes de ingresar al miniprograma.
Área de navegación (Android)
Solo hay una operación en el área de navegación: salga del mini programa directamente y regrese a WeChat o al escritorio del sistema antes de ingresar al mini programa. que viene con el teléfono Android. La tecla de retorno realiza la operación de regresar a la página anterior.
Existe una situación especial en la navegación de Android: cuando el usuario agrega un mini programa al escritorio de Android a través del menú en el área de operación y abre el mini programa desde el escritorio de Android, el botón de navegación no se muestra en la página de inicio del mini programa. Sólo se muestran el título del miniprograma y el área de operación. En la página secundaria del mini programa, el área de navegación solo tiene la operación de regresar a la página anterior, y hacer clic en la tecla de retorno de hardware que viene con el teléfono Android también tiene el mismo efecto.
Reglas de color personalizadas de la barra de navegación de WeChat (iOS y Android)
La mini barra de navegación del programa admite funciones básicas de personalización del color de fondo. El color seleccionado debe ser armonioso y utilizable. de los iconos de la barra de navegación principal proporcionados por WeChat. Se recomienda consultar los siguientes efectos de selección de color:
Ejemplo de selección de color
Navegación en la página
Los desarrolladores pueden agregar su propia navegación a la página según a sus propias necesidades de diseño funcional. Y mantenga la navegación consistente entre diferentes páginas. Sin embargo, debido a la limitación del tamaño de la pantalla del teléfono móvil, la navegación de la página del mini programa debe ser lo más simple posible. Si es solo para navegación lineal general, se recomienda utilizar únicamente la barra de navegación de WeChat.
Los desarrolladores pueden optar por agregar navegación por pestañas a la página del mini programa. La barra de paginación de pestañas se puede fijar en la parte superior o inferior de la página, lo que facilita a los usuarios cambiar entre diferentes pestañas. El número de etiquetas no debe ser inferior a 2 y el número máximo no debe ser superior a 5. Para garantizar el área en la que se puede hacer clic, se recomienda que el número de etiquetas no supere los 4 elementos. Una página no debe tener más de un conjunto de barras de paginación con pestañas.
Para la página de inicio del mini programa, puede elegir el estilo de paginación de la pestaña inferior nativa proporcionado por WeChat. Este estilo solo está disponible para la página de inicio del mini programa. Durante el desarrollo, puede personalizar el estilo del icono, la copia de la etiqueta, el color de la copia, etc. Para configuraciones específicas, como el tamaño del icono, consulte la documentación de desarrollo y la biblioteca de control básico WeUI.
El color de la barra de paginación de la pestaña superior se puede personalizar. En las selecciones de colores personalizados, es importante mantener las etiquetas de la barra de paginación utilizables, visibles y operables.
Reduzca la espera y brinde comentarios oportunos
La espera excesiva por la página causará malas emociones entre los usuarios. El uso de la tecnología proporcionada por el proyecto del mini programa WeChat puede acortar el tiempo de espera a un gran nivel. medida. Aun así, cuando la carga y la espera ocurren inevitablemente, es necesario brindar retroalimentación oportuna para aliviar el mal humor de la espera del usuario.
Carga de la página de inicio
La página de inicio del mini programa es una de las páginas donde el mini programa muestra las características de la marca hasta cierto punto en WeChat. Esta página resaltará las características de marca del mini programa y el estado de carga. A excepción de la visualización del logotipo de la marca en la página de inicio, todos los demás elementos de la página, como los indicadores de progreso de carga, los proporciona WeChat de manera uniforme y no se pueden cambiar y no requieren el desarrollo del desarrollador.
Carga de actualización desplegable de página
En el subprograma WeChat, WeChat proporciona capacidades y estilos de carga de actualización desplegable de página estándar, y los desarrolladores no necesitan desarrollarlos ellos mismos.
Casos de uso incorrectos de actualización del menú desplegable de WeChat
Evite los siguientes casos de uso incorrecto para garantizar la visibilidad de la información y la usabilidad de la página.
Comentarios de carga en la página
Los desarrolladores pueden personalizar el estilo de carga del contenido de la página en el mini programa. Se recomienda que, ya sea que se utilice para carga local o global, el estilo de carga personalizado sea lo más conciso posible y se utilicen animaciones simples para informar a los usuarios sobre el proceso de carga. Los desarrolladores también pueden utilizar el estilo de carga de página unificado proporcionado por WeChat, como se muestra en el ejemplo de la figura.
El estilo de carga modal cubrirá toda la página, ya que es imposible informar claramente la ubicación o el contenido de carga específicos, puede causar ansiedad al usuario, por lo que debe usarse con precaución. No utilice la carga modal excepto para determinadas operaciones globales.
Comentarios de carga parcial
Los comentarios de carga parcial solo proporcionan comentarios sobre la parte de la página que activa la carga. Este mecanismo de comentarios es más específico y tiene pequeños saltos de página. Es el método de comentarios. Recomendado por WeChat. Por ejemplo:
Notas sobre los comentarios de carga
Si el tiempo de carga es largo, se debe proporcionar una operación de cancelación y se debe usar una barra de progreso para mostrar el progreso de la carga.
Durante el proceso de carga, el efecto de animación debe mantenerse; cargar sin efectos de animación puede fácilmente dar a las personas la ilusión de que la interfaz está bloqueada.
No utilices más de una animación de carga en la misma página al mismo tiempo.
Además de proporcionar retroalimentación oportuna mientras el usuario espera, también se requiere retroalimentación clara sobre los resultados de la operación. Dependiendo de la situación real, se pueden seleccionar diferentes estilos de retroalimentación de resultados. Para operaciones locales en la página, se puede brindar retroalimentación directa en el área de operación. Para resultados de operaciones a nivel de página, se pueden usar mensajes emergentes (Toast), cuadros de diálogo modales o páginas de resultados.
Comentarios sobre resultados de operaciones parciales en la página
Para operaciones parciales en la página, se pueden proporcionar comentarios directos en el área de operación, por ejemplo, como se muestra a continuación antes y después de hacer clic en el control de selección múltiple. Para los controles de uso común, el Centro de diseño de WeChat proporcionará una biblioteca de controles, en la que los controles han proporcionado comentarios operativos completos.
Resultado de la operación global de la página: mensaje emergente (Toast)
El mensaje emergente (Toast) es adecuado para mensajes de éxito livianos, que desaparecerán automáticamente después de 1,5 segundos sin abrirse. Interrumpe el proceso y tiene menos impacto en los usuarios. Es adecuado para recordatorios de operaciones que no necesitan ser enfatizados, como recordatorios de éxito. Preste especial atención al hecho de que este formulario no es adecuado para mensajes de error, porque el mensaje de error debe informarse claramente al usuario, por lo que no es adecuado utilizar un mensaje emergente que parpadea.
Resultados de operación globales de la página - cuadro de diálogo modal
Los cuadros de diálogo modales se pueden usar para indicar el estado de los resultados de operación que el usuario debe conocer claramente y que pueden ser acompañado de instrucciones de operación del siguiente paso.
Página de resultados de la operación global: página de resultados
Para situaciones en las que el resultado de la operación es el final del proceso actual, puede utilizar la página de resultados de la operación para proporcionar comentarios. Este método es la forma más sólida y clara de informar al usuario que la operación se ha completado y puede proporcionar orientación para el siguiente paso según la situación real.
Las excepciones son controlables y hay una salida
Al diseñar tareas y procesos, los estados y procesos anormales a menudo se ignoran fácilmente, y estos escenarios anormales suelen ser los más frustrantes y frustrantes. Para los usuarios, cuando necesite ayuda, debe prestar especial atención al diseño de estados anormales, brindarle al usuario las indicaciones de estado necesarias cuando ocurra una excepción e informarle sobre la solución para que haya una salida.
Es necesario evitar la situación en la que los usuarios se quedan atrapados en una determinada página sin motivo aparente y no tienen adónde ir en condiciones anormales. Los cuadros de diálogo modales y las páginas de resultados mencionados anteriormente se pueden utilizar como recordatorios de condiciones anormales. Además, en las páginas de formulario, especialmente en las páginas con muchos elementos de formulario, los elementos de error deben señalarse claramente para que los usuarios puedan modificarlos.
Estado de excepción: error de formulario
Si el formulario informa un error, la causa del error se informará en la parte superior del formulario y se identificará el campo de error para avisar. al usuario modificarlo.
Desde el teclado físico y el mouse en la era de la PC hasta los dedos en la era móvil, aunque los dispositivos de entrada se han simplificado enormemente, la precisión de las operaciones con los dedos es mucho menos precisa que la del teclado y el mouse. Para adaptarse a este cambio, los desarrolladores deben aprovechar al máximo las funciones del teléfono móvil durante el proceso de diseño para proporcionar a los usuarios una interfaz de control cómoda y elegante.
Dado que el área del teclado del teléfono móvil es pequeña y densa, la entrada es difícil y puede causar fácilmente errores de entrada. Por lo tanto, al diseñar la mini página del programa, para minimizar la entrada del usuario, utilice interfaces existentes u otras fáciles de usar. -operar controles de selección para mejorar la experiencia de entrada del usuario.
Por ejemplo, en la imagen siguiente, al agregar una tarjeta bancaria, la interfaz de reconocimiento de la cámara se utiliza para ayudar al usuario a ingresar. Además, el equipo de WeChat también ha abierto varias interfaces de miniprogramas WeChat, como la interfaz de ubicación geográfica. El uso completo de estas interfaces mejorará en gran medida la eficiencia y precisión de la entrada del usuario, optimizando así la experiencia.
Además de usar interfaces, cuando los usuarios tengan que ingresar manualmente, intente permitir que los usuarios tomen decisiones en lugar de ingresar con el teclado. Por un lado, la recuperación es fácil de recordar y, por lo general, es más fácil para los usuarios elegir entre opciones limitadas que depender completamente de la entrada de memoria; por otro lado, todavía se considera que la entrada densa de una sola tecla en los dispositivos móviles; Los teclados de los teléfonos pueden causar fácilmente errores de entrada. Por ejemplo, en la figura, proporcionar opciones de acceso directo al historial de búsqueda cuando los usuarios buscan ayudará a los usuarios a realizar búsquedas rápidamente y reducirá o evitará la entrada innecesaria del teclado.
Evite el mal funcionamiento
Porque en los teléfonos móviles tocamos la pantalla con los dedos para controlar la interfaz y la precisión de los clics con los dedos es mucho menos precisa que la de un mouse. Al diseñar controles en los que es necesario hacer clic en la página, se debe considerar completamente el área de la zona activa para evitar operaciones incorrectas causadas por el área en la que se puede hacer clic que sea demasiado pequeña o demasiado densa. Cuando la interfaz utilizada originalmente en la pantalla de la computadora simplemente se trasplanta directamente al teléfono móvil sin ninguna adaptación, estos problemas suelen ocurrir. Dado que las resoluciones de pantalla de los teléfonos móviles son diferentes, el tamaño de píxel de clic óptimo no es del todo consistente, pero cuando se convierte al tamaño físico, está aproximadamente entre 7 mm y 9 mm. En la biblioteca de componentes estándar proporcionada por WeChat, varios elementos de control han tenido en cuenta el efecto de clic en la página y la adaptación a diferentes pantallas, por lo que nuevamente se recomienda utilizar o imitar tamaños de control estándar para el diseño.
Utilice interfaces para mejorar el rendimiento
WeChat Design Center ha lanzado un conjunto de bibliotecas de control estándar web, incluida la biblioteca de control de diseño Sketch y la biblioteca de control de diseño Photoshop. También mejoraremos el mini programa. componentes en el futuro, estos controles han tenido plenamente en cuenta las características de las páginas móviles para garantizar su usabilidad y rendimiento operativo en las páginas móviles. Al mismo tiempo, el equipo de desarrollo de WeChat mejora y amplía constantemente la interfaz del subprograma de WeChat y proporciona WeChat público; bibliotecas, el uso de estos recursos no solo puede proporcionar a los usuarios servicios más rápidos, sino también mejorar en gran medida el rendimiento de la página, lo que mejora de manera invisible la experiencia del usuario.
Además de los principios mencionados anteriormente, se recomienda que los mini programas conectados a WeChat siempre presten atención a la unidad y continuidad entre diferentes páginas y traten de utilizar controles y métodos de interacción consistentes en diferentes páginas.
La experiencia de página unificada y los elementos de interfaz continuos ayudarán a lograr los objetivos de uso con el menor costo de aprendizaje y reducirán la incomodidad causada por los saltos de página. Debido a esto, los miniprogramas pueden utilizar los controles estándar proporcionados por WeChat según sea necesario para lograr uniformidad y estabilidad.
El uso de fuentes en WeChat es consistente con las fuentes del sistema en ejecución. Los tamaños de fuente comunes son 20, 18, 17, 16, 1413, 11 (pt). >
El contenido principal es negro, el contenido secundario es gris; las marcas de tiempo y los valores predeterminados del formulario son claros. Las grandes secciones del contenido de descripción que son contenidos primarios son seminegros.
El azul es el color de los enlaces, el verde es el color de finalización y el rojo es el color de los errores. Los estados Pulsar y Desactivar reducen la transparencia a 20 y 10 respectivamente.