Partage de technologie

[PM]Prototypage et conception d'interactions

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Classement des archétypes

1. Prototype d'esquisse

Dessins dessinés à la main, utilisés dès les premières étapes de la planification, pour organiser les idées

2. Prototypes basse fidélité

Interaction simple, pas besoin de correspondance des couleurs, principalement noir, blanc et gris, utilisée dans les étapes de planification et de révision du produit

Les prototypes basse fidélité standardisés constituent la base des prototypes haute fidélité

3. Prototypes haute fidélité

Des interactions complexes, généralement utilisées pour des manifestations publiques,

Le produit produit d'abord un prototype basse fidélité, et le concepteur produit une ébauche de conception basée sur le prototype.

Prototype basse fidélité + ébauche de conception = prototype haute fidélité

Axure

1. Interface d'opération

①Zone de menu ②Zone de calque ③Zone de composant ④Zone de dessin ⑤Zone de style

2. Opérations courantes
  1. Créez un nouveau fichier : Fichier->Nouveau
  2. Ouvrir le fichier : Fichier->Ouvrir
  3. Enregistrer le fichier : Fichier->Enregistrer
  4. Principaux types de fichiers
  • .rp : fichier prototype
  • .rplib : fichier de bibliothèque de composants
  • Fichier de projet d'équipe .rpteam
  • Fichier de page Web .html
  1. Sauvegarde automatique : Préférences->Activer la sauvegarde
  2. Combinaison : Ctrl+G
  3. Publier : Générer le prototype dans un fichier HTML -> Il est recommandé de créer d'abord un nouveau dossier
  4. Aide : À propos d'Axure ->Afficher la version
  5. Aide : Gérer les autorisations->Cracker le logiciel
  6. Ajouter une bibliothèque d'origine : bibliothèque de composants + numéro
  7. Supprimer la bibliothèque de composants : Ouvrir la bibliothèque de composants->Plus->Supprimer la bibliothèque de composants
3. Conception de style

Faites glisser le composant sur le canevas et modifiez le style

4. Conception d'interactions

L'interaction est le processus d'interaction homme-machine, et la conception d'interaction est la conception de règles et de performances d'interaction.

Dans Axure, l'interaction est divisée en style d'interaction et logique d'interaction

1. Le style interactif comporte des changements de style communs intégrés, qui sont faciles à utiliser mais ne peuvent pas définir la logique.

2. Le paramétrage de la logique d'interaction est plus flexible en ajoutant des événements et des actions aux éléments, des styles personnalisés et des interactions logiques peuvent être complétés.

3. Les effets interactifs définis doivent être visualisés dans l'aperçu

5. Répéteur

La fonction du répéteur est de réutiliser la structure sans avoir à faire des copier-coller à tout moment.

  1. Créez un répéteur, double-cliquez sur le répéteur pour passer en mode édition
  2. Nommez tous les composants pour faciliter la liaison de données ultérieure.
  3. Quittez l'édition et remplissez les données du tableau (les noms de colonnes ne prennent en charge que l'anglais)
  4. Affichage->Masque->Désactiver le masque du répéteur

6. Panneau dynamique

Utilisez des panneaux dynamiques pour obtenir des effets de changement de contenu

  1. Ajouter une barre de navigation gauche
  2. Ajouter un panneau dynamique à droite
  3. Double-cliquez sur le panneau dynamique pour passer en mode édition
  4. Définir différents éléments dans différents états

  1. Ajoutez des événements de clic à la navigation et définissez l'état du panneau dynamique

  1. Effet d'aperçu

spécification du prototype

La différence entre les applications pour téléphone mobile et ordinateur :

  1. Adaptation de l'écran (taille de l'écran, résolution)
  2. Méthode d'interaction (la souris est plus précise que le contrôle au doigt)
Version PC

1. version coeur

La résolution courante actuelle est de 1920 * 1080, donc le centre de version est généralement compris entre 960 et 1200 et la recommandation générale est de 1200.

Avant 2012, la résolution principale était de 1024 * 768, donc le centre de version était de 760

2.Navigation

3. Formulaire

4. Liste

Réparer

Il n'y a pas de spécification de taille fixe pour le terminal mobile. Les prototypes sont réalisés en fonction de la taille du modèle adapté. Par exemple, la taille de l'iPhone 6 est de 375 * 667.

1. Taille de l'élément fixe

2. Espaces communs

3. Formulaires d'affichage courants