Modèles d'interface utilisateur

Donnez à chaque écran un objectif clair.

Six modèles d'interface pour le travail quotidien d'un produit SaaS. Trouvez la bonne structure, explorez le bloc correspondant et faites-en le vôtre.

Un écran, avec un système.UI / 01
  1. 01OrientUn emplacement clair
  2. 02ComprendreContexte utile
  3. 03ActUne prochaine étape visible

Schéma illustratif — Exemples de données

Des modèles familiers. Considéré des détails.

Des mises en page illustratives avec un point de départ pratique pour chacune d’entre elles. Ouvrez le bloc associé pour des exemples de travail, une source complète et des conseils d'intégration.

Tableau de bord

Vue d’ensemble

Aidez les gens à comprendre ce qui compte maintenant, ce qui a changé et où aller ensuite.

  • Diriger avec un petit ensemble de métriques utiles
  • Garder les activités récentes et les prochaines actions dans leur contexte
Explorez le bloc stats

Page de facturation

Abonnement

Mettez le plan actuel, les détails de paiement et les actions de facturation en un seul endroit prévisible.

  • Rendre le plan actuel et le statut facile à trouver
  • Séparer les informations de facturation des changements de plan
Explorez le bloc de facturation

Page de paramètres

Compte

Organisez les préférences quotidiennes et les changements sensibles autour de groupes clairs de contrôles connexes.

  • Regrouper les champs par but, avec une action de sauvegarde claire
  • Séparez les actions destructrices
Explorez le bloc des paramètres

Gestion d'équipe

Collaboration

Faites en sorte qu’il soit facile de comprendre qui appartient à un espace de travail et quel rôle chaque personne occupe.

  • Gardez l'identité, le rôle et le statut ensemble
  • Distinguer les invitations des membres actifs
Explorez le bloc membres

Coque d'application protégée

Navigation

Donnez aux écrans connectés un cadre cohérent, avec un emplacement visible et une navigation prévisible.

  • Gardez la navigation de l'espace de travail cohérente sur les écrans
  • Appliquer l'authentification et les autorisations dans votre application
Explorez le bloc de barre latérale

Moment de mise à niveau

Sélection des plans

Expliquez le plan suivant à un moment pertinent, avec des termes visibles et un moyen clair de continuer.

  • Afficher la valeur et les conditions de facturation avant l'action
  • Gardez le plan actuel et les alternatives visibles
Explorez le bloc de prix

Les blocs fournissent une structure d'interface. Votre application fournit des données, l'authentification, les autorisations et le comportement de paiement.

D'un modèle utile à votre produit.

Gardez la structure cohérente tout en rendant l’expérience spécifique à vos utilisateurs.

  1. 01

    Choisissez la structure

    Commencez par le travail que votre utilisateur doit faire. Choisissez le modèle qui donne des informations et des actions un ordre clair.

    Parcourir les modèles
  2. 02

    Faites-en votre propre

    Ouvrez le bloc associé pour son exemple et sa source. Appliquez vos tokens et adaptez le contenu à votre produit.

    Ouvrir Theme Builder
  3. 03

    Connecter le comportement

    Configurez vos données, permissions et actions. Vérifiez les états de chargement, de vide, d'erreur et de succès dans votre application.

    Lire les documents d'intégration
Un point de départ complet

Voyez les morceaux travailler ensemble.

Explorez les motifs dans une application exécutable, puis choisissez la fondation qui correspond à votre prochaine étape.

Explorez les écrans d'application

Starter Free

Open source

Exécutez les écrans, explorez la navigation et adaptez l'interface avec des données de démonstration.

Les données d'authentification, de facturation et de produit sont simulées.

Découvrir Starter Free

Starter Pro

Commercial

Commencez par les fondations connectées pour l'authentification, la facturation et les routes d'application protégées.

Configurez vos services, ajoutez une logique de produit et validez avant le lancement.

Voir ce qui est inclus