Spécifications de conception du programme WeChat Mini (2) Claires et claires

2. Soyez clair et clair

En tant que développeur responsable, une fois qu'un utilisateur accède à notre mini-page de programme, nous avons la responsabilité et l'obligation d'informer clairement l'utilisateur où il se trouve et où il peut aller, pour garantir qu'il est connecté. la page Naviguez librement sans vous perdre, afin d'offrir aux utilisateurs une expérience sûre et agréable.

1. Navigation claire, facile d'aller et venir

La navigation est le facteur le plus critique pour garantir que les utilisateurs ne se perdent pas lorsqu'ils parcourent la page Web. La navigation doit indiquer aux utilisateurs où je me trouve, où je peux aller, comment revenir, etc. Tout d'abord, toutes les pages de tous les mini-programmes du système WeChat auront leur propre barre de navigation fournie par WeChat, qui peut résoudre uniformément le problème de savoir où je me trouve et comment revenir. Le maintien d'une expérience cohérente dans la navigation au niveau WeChat aide les utilisateurs à créer une expérience plus unifiée et une perception interactive au sein de WeChat, sans ajouter de nouveaux coûts d'apprentissage ou de nouvelles habitudes d'utilisation lors du basculement entre les mini-programmes et WeChat.

Barre de navigation WeChat

La barre de navigation WeChat est directement héritée du client Hormis la couleur de la barre de navigation, les développeurs n'ont pas besoin et ne peuvent pas personnaliser le contenu. Cependant, les développeurs doivent spécifier la relation de saut entre chaque page du mini-programme afin que le système de navigation puisse fonctionner de manière raisonnable.

La barre de navigation WeChat est divisée en zone de navigation, zone de titre et zone d'opération. La zone de navigation contrôle le processus de la page du programme. Actuellement, la barre de navigation est divisée en deux couleurs de base, sombre et claire, qui s'affichent différemment sur iOS et Android, comme le montre la figure ci-dessous :

Zone de navigation (iOS)

La zone de navigation n'a généralement qu'une seule opération, qui consiste à revenir à l'interface de niveau précédent. Les développeurs peuvent définir son contenu, mais le style ne peut pas être modifié.

Zone de navigation (Android)

Normalement, la seule opération sur le côté gauche de la navigation du système est "Quittez le mini-programme, revenez à WeChat et le programme s'exécute en arrière-plan".

Lorsque l'utilisateur accède à la page secondaire du mini programme, nous recommandons que le mini programme lui-même puisse concevoir une opération de retour, et que l'utilisateur puisse également revenir au niveau précédent via le bouton de retour matériel fourni avec le système Android.

Règles de couleur personnalisées de la barre de navigation WeChat (iOS et Android)

La mini barre de navigation du programme prend en charge les fonctions de personnalisation de base de la couleur d'arrière-plan. La couleur sélectionnée doit correspondre harmonieusement aux deux ensembles principaux fournis par WeChat tout en respectant la convivialité. icône. Il est recommandé de se référer aux effets de sélection de couleurs suivants :

Exemple de schéma de sélection de couleurs :

Navigation dans la page

Les développeurs peuvent ajouter leur propre navigation à la page en fonction de leurs propres besoins fonctionnels. Et gardez une navigation cohérente entre les différentes pages. Cependant, en raison de la taille limitée de l'écran du téléphone mobile, la navigation sur la page du mini-programme doit être aussi simple que possible. S'il s'agit uniquement d'une navigation linéaire générale, il est recommandé d'utiliser uniquement la barre de navigation WeChat.

La bibliothèque de contrôle WeChat propose une navigation par onglets que les développeurs peuvent choisir. La barre d'onglets peut être fixée en haut ou en bas de la page, permettant aux utilisateurs de basculer plus facilement entre les différentes pages à onglets. Pour garantir une zone cliquable, les éléments de l'onglet ne doivent pas dépasser 4 éléments. Il ne doit pas y avoir plus d'un ensemble d'onglets sur une page.

2. Réduisez l'attente et fournissez des commentaires en temps opportun

Les longues attentes pour la page provoqueront de mauvaises émotions parmi les utilisateurs. L'utilisation de la technologie fournie par le projet de mini-programme WeChat peut réduire considérablement le temps d'attente. Même ainsi, lorsque le chargement et l'attente se produisent inévitablement, un retour d'information en temps opportun doit être fourni pour soulager la mauvaise humeur d'attente de l'utilisateur.

Conception de la page de démarrage

Le démarrage du mini programme est également l'une des pages où le mini programme montre dans une certaine mesure les caractéristiques de la marque dans le contenu WeChat.

Cette page mettra en évidence les caractéristiques de la marque du mini-programme et l'état de chargement.

À l'exception de l'affichage de la marque LOGO sur la page de démarrage, tous les autres éléments de la page, tels que les indicateurs de progression du chargement, sont fournis par WeChat et ne peuvent pas être modifiés. Pas besoin de développeurs pour développer.

Zone d'indicateur déroulante

Toutes les pages du mini programme WeChat auront une zone d'indicateur unifiée conçue par WeChat lorsqu'elles seront déroulées. La zone d'affichage de la marque comprend le nom de la marque et les invites du mini-programme WeChat. L’objectif est de renforcer la marque et la perception du produit par les utilisateurs du mini-programme.

Marque déroulante (schémas de couleurs sombres et claires iOS)

WeChat propose deux ensembles de schémas de couleurs sombres et claires. Comme indiqué dans la marque ici, la couleur du texte ne peut pas être personnalisée. pour garantir que lors de la personnalisation de la couleur d'arrière-plan, la visibilité de la marque déroulante.

Marque déroulante (schéma de couleurs sombres et claires Android)

L'invite déroulante WeChat est utilisée pour donner aux utilisateurs un propriétaire clair du mini-programme afin d'éviter la fraude et la tricherie. Le logo propose ici deux ensembles de solutions sombres et claires. La couleur du texte ne peut pas être personnalisée. Les développeurs doivent veiller à garantir la visibilité du logo déroulant lors de la personnalisation de la couleur d'arrière-plan.

Interaction d'actualisation de page (iOS)

Les développeurs peuvent personnaliser la page qui doit être actualisée via une interaction déroulante WeChat fournira des fonctionnalités et des styles standard pour ce type d'interaction. En termes de style, les couleurs de l'icône d'actualisation et de l'icône déroulante ont été regroupées et divisées en deux ensembles de schémas sombres et clairs. Lors de leur utilisation, les développeurs doivent prêter attention à l'harmonie et à l'unité du texte d'en-tête. l'icône déroulante et l'icône d'actualisation. Cependant, lorsque l'utilisateur effectue une interaction déroulante sur ce type de page, l'animation de chargement standard de la page de l'applet WeChat apparaît. Les développeurs n'ont pas besoin de développer leurs propres styles.

Dans le cas où le développeur ne conçoit pas d'onglet en haut de la page, s'il est défini que la page peut être actualisée via une action déroulante, la zone d'affichage de la marque du mini programme d'invite d'état de chargement apparaîtra sous le titre. barre et en haut de la page après actualisation.

Les développeurs ne sont actuellement pas en mesure de définir cet effet de chargement.

Si le développeur définit l'onglet en haut de la page et définit que la page de contenu sous l'onglet peut être actualisée via une action déroulante, puis après l'actualisation, la zone d'affichage de la marque du mini programme d'invite d'état de chargement s'affichera apparaît sous l'onglet supérieur, et seule la page actuelle sera actualisée. Les développeurs ne sont actuellement pas en mesure de définir eux-mêmes cet effet de chargement.

Interaction d'actualisation de page (Android)

est la même que sur iOS En termes de style, l'icône d'actualisation et les couleurs des marques déroulantes sous Android ont été regroupées et divisées en deux ensembles de solutions sombres et claires. . Les développeurs doivent faire attention à l'en-tête lorsqu'ils l'utilisent. L'unité harmonieuse du texte principal, du logo déroulant et de l'icône d'actualisation.

Cas d'utilisation incorrect de la liste déroulante WeChat

Veuillez éviter les cas d'utilisation incorrects suivants pour garantir la visibilité des informations et la convivialité de la page.

Navigation sur la page

La bibliothèque de contrôles WeChat fournit des solutions de navigation par onglets approfondies et superficielles que les développeurs peuvent choisir. La barre d'onglets doit être fixée en haut de la page pour permettre aux utilisateurs de basculer entre les différentes pages à onglets. Pour garantir une zone cliquable, les éléments de l'onglet ne doivent pas dépasser 4 éléments. Il ne doit pas y avoir plus d'un ensemble d'onglets sur une page.

L'état sélectionné de la barre d'onglets est par défaut d'une couleur unie à 100 % et l'état non sélectionné a 60 %. La couleur de l'état sélectionné peut être personnalisée. Lors de la sélection de couleurs personnalisées, veillez à conserver la convivialité, la visibilité et l'opérabilité des onglets.

Commentaires sur le chargement sur la page

Les développeurs peuvent personnaliser le style de chargement du contenu de la page dans le mini-programme. Il est recommandé que, qu'il soit utilisé localement ou entièrement, le style de chargement personnalisé soit aussi concis que possible et que des animations simples soient utilisées pour informer les utilisateurs du processus de chargement. Les développeurs peuvent également utiliser le style de chargement de page unifié fourni par WeChat, comme le montre l'exemple de la figure.

Chargement modal

Le style de chargement modal couvrira la page entière Comme il est impossible d'indiquer clairement l'emplacement ou le contenu de chargement spécifique, il peut provoquer de l'anxiété chez les utilisateurs, il doit donc être utilisé avec prudence. N'utilisez pas de modaux sauf pour certaines opérations globales.

Commentaires de chargement partiel

est conçu pour déclencher des commentaires partiels sur la page chargée. Ce mécanisme de rétroaction est plus ciblé et nécessite moins de changements de page. C'est la méthode de rétroaction recommandée par WeChat. Par exemple :

Notes sur les commentaires de chargement

• Si le temps de chargement est long, une opération d'annulation doit être fournie et une barre de progression doit être utilisée pour afficher la progression du chargement.
• Pendant le processus de chargement, l'effet d'animation doit être conservé ; un chargement sans effets d'animation peut facilement donner aux gens l'illusion que l'interface est bloquée.
• N’utilisez pas plus d’une animation de chargement sur la même page.

Commentaires sur les résultats

En plus de fournir un retour d'information en temps opportun pendant que l'utilisateur attend, un retour d'information clair est également requis sur les résultats de l'opération. En fonction de la situation réelle, différents styles de retour sur les résultats peuvent être sélectionnés. Pour les opérations locales sur la page, un retour direct peut être donné dans la zone d'opération. Pour les résultats des opérations au niveau de la page, des toasts, des fenêtres contextuelles ou des pages de résultats peuvent être utilisés pour les afficher.

Retour sur les résultats des opérations partielles sur la page

Pour les opérations partielles sur la page, un retour direct peut être donné dans la zone d'opération, par exemple, comme indiqué ci-dessous avant et après avoir cliqué sur le contrôle de sélection multiple. Pour les contrôles courants, le WeChat Design Center a fourni une bibliothèque de contrôles et une bibliothèque de contrôles WeUI, dans lesquelles les contrôles ont été conçus avec un retour opérationnel complet.

Résultats globaux de l'opération sur la page - toast

Parmi eux, toast convient aux invites de réussite légères. Il disparaîtra automatiquement après 1,5 seconde et n'interrompra pas le processus. Il a moins d'impact sur les utilisateurs et convient aux utilisateurs. des sujets qui n'ont pas besoin de mettre l'accent sur le succès. Veuillez noter que le formulaire de toast ne s'applique pas aux rappels d'erreur.

Résultat global de l'opération sur la page - boîte pop-up

Pour l'état du résultat de l'opération qui doit être clairement connu de l'utilisateur, une boîte pop-up peut être utilisée pour inviter l'utilisateur, et peut être accompagnée par les conseils d'opération de la prochaine étape.

Page résultats des opérations globales - page de résultats

Si le résultat de l'opération correspond à la fin du processus en cours, vous pouvez utiliser la page des résultats de l'opération pour fournir des commentaires. Cette méthode constitue le moyen le plus efficace et le plus clair d'informer l'utilisateur que l'opération est terminée et peut fournir des conseils pour l'étape suivante en fonction de la situation réelle.

3. Les anomalies sont contrôlables et il existe un moyen de s'en sortir

Lors de la conception de tâches et de processus, les états et processus anormaux sont souvent facilement ignorés, et ces scénarios anormaux surviennent souvent lorsque les utilisateurs sont les plus frustrés et ont donc besoin d'aide. , une attention particulière doit être accordée à la conception des états anormaux. Lorsqu'une exception se produit, l'utilisateur doit recevoir les invites d'état nécessaires et informé de la solution afin qu'il y ait une issue.

Il est nécessaire d'éviter la situation dans laquelle l'utilisateur est bloqué sur une certaine page dans des conditions anormales et n'a nulle part où aller. Les fenêtres pop-up et les pages de résultats mentionnées en 2.2 peuvent être utilisées comme rappels d'état anormal. De plus, sur les pages de formulaire, notamment les pages comportant de nombreux éléments de formulaire, les éléments d'erreur doivent être clairement signalés afin que les utilisateurs puissent les modifier.

Statut d'exception - erreur de formulaire

Le formulaire signale une erreur, informe la cause de l'erreur en haut du formulaire et identifie le champ d'erreur pour inviter l'utilisateur à le modifier.