Boîte à outils de wireframe pour iPhone/tablette Apple

Ruban

Conception > Diagramme > Boîte à outils

Raccourcis Clavier

Ctrl+Maj+3

iPad Air, iPad Mini, iPhone 4s, iPhone 5c, iPhone 5s, iPhone 6, iPhone 6 Plus

Ces icônes génèrent chacune un cadre pour le type d'appareil que vous avez sélectionné. Une prompt s'affiche pour vous permettre de spécifier l'orientation portrait ou paysage. (L'illustration principale montre un cadre paysage pour iPhone 5s et un cadre portrait pour iPhone 4s.)

Valeur Étiquetés :

• ShowStatusBar - cliquez sur le bouton déroulant et sélectionnez « Afficher » ou « Masquer » l'image de la barre d'état sur l'élément

Case à cocher

Génère un élément de case à cocher étiqueté, le texte de l'étiquette étant le nom de l'élément.

Valeur Étiquetés :

• State - cliquez sur la flèche déroulante et sélectionnez l'état à représenter - « Coché » (icône de coche) ou « Non coché » (contour de la case)

Bouton radio

Génère un élément de bouton radio étiqueté, le texte de l'étiquette étant le nom de l'élément.

Valeur Étiquetés :

• State - cliquez sur la flèche déroulante et sélectionnez l'état à représenter - « Sélectionné » (rempli) ou « Non sélectionné » (contour)

Zone de liste déroulante

Génère un élément représentant une zone de liste déroulante.

Valeur Étiquetés :

• DropDownState - cliquez sur la flèche déroulante et sélectionnez « Ouvrir » pour représenter la zone de liste déroulante utilisée, affichant toutes les valeurs, ou « Fermé » pour représenter la zone de liste déroulante avec une seule valeur sélectionnée
• Items - cliquez sur la flèche déroulante et sélectionnez l'élément à représenter comme étant actuellement sélectionné dans la zone de liste déroulante et, si la liste des éléments est développée, mis en surbrillance dans la liste
  Vous pouvez modifier le texte des éléments et ajouter ou supprimer des éléments dans la liste en modifiant la liste « Valeurs : » dans les notes Valeur Étiquetée

Étiquette

Génère un élément de texte d'étiquette. Le nom de l'élément correspond au texte de l'étiquette.

Valeur Étiquetés :

• Aligner le texte - définit l'alignement du texte à gauche, au centre ou à droite
• Multiligne - définit l'étiquette pour afficher le texte sur plusieurs lignes

Liste

Génère un élément de zone de liste.

Valeur Étiquetés :

• Items - cliquez sur la flèche déroulante et sélectionnez l'élément à afficher en surbrillance dans la liste
  Vous pouvez ajouter, supprimer et renommer des éléments en modifiant la liste « Valeurs : » dans les Notes Valeur Étiquetés .

• Type de liste - cliquez sur la flèche déroulante et sélectionnez l'affichage de la liste sous la forme « Simple », « Numérotée » ou « À puces »

Tableau

Génère un élément Tableau avec des colonnes, des lignes et des cellules étiquetées.

Double-cliquez sur le tableau pour faire apparaître la dialogue « Propriétés » de l'élément sur la page « Wireframe », qui fournit les facilités d'édition du tableau (ajout, renommage et suppression de colonnes et de lignes, modification de la largeur des colonnes et édition du texte des cellules). Vous pouvez soit éditer le texte en cliquant dessus, soit en cliquant avec le bouton droit de la souris et en sélectionnant une option. Note que l'éditeur ne fournit pas une image réelle de l'apparence du tableau à l'écran.

Valeur Étiquetés :

• Dessiner des lignes - masque (ou affiche) les lignes sur toutes les cellules sous les en-têtes de colonne afin que le tableau ressemble à un élément de liste à la place
• Mettre en surbrillance les en-têtes - met en surbrillance l'en-tête de chaque colonne afin qu'il soit facilement distinguable
• Propriétés - affiche le HTML du tableau

Image

Génère un espace réservé pour indiquer où une image sera placée dans le dialogue .

Vous pouvez afficher une image réelle en attribuant une image alternative à l'élément.

Barre d'adresse

Génère un élément de barre d'adresse URL.

Valeur Étiquetés :

• Adresse - définit le texte affiché dans la barre d'adresse

Icône de l'application

Génère un élément App Icône .

Valeur Étiquetés :

• Image - spécifie le nom d'une image conservée dans le gestionnaire d'images, qui s'affiche sous la forme de l'icône de l'application (tapez simplement le nom de l'image tel qu'il est répertorié dans la colonne « Nom » du gestionnaire d'images)
• Nombre de notifications - indique le nombre de notifications en attente pour cette application ; le nombre est affiché dans le cercle dans le coin supérieur droit de l'élément

Bouton

Génère un élément Button étiqueté. Le texte de l'étiquette correspond au nom de l'élément.

Valeur Étiquetés :

• Style du bouton - définit la forme de l'élément :
  - « Normal » dessine un rectangle aux bords arrondis
  - « Précédent » dessine une forme de fanion pointant vers la gauche
  - « Suivant » dessine une forme de fanion pointant vers la droite

• Alignement du texte - définit l'alignement du texte du bouton dans l'élément ; aligné à gauche, centré ou aligné à droite

Sélecteur de date/heure

Génère un élément d'affichage de date et d'heure.

Valeur Étiquetés :

• Date - définit la date à laquelle l'élément s'affiche ; si aucune date n'est spécifiée, ce sera la date actuelle du système
• Étendu - si True, dessine l'élément comme une section de calendrier avec la date et/ou l'heure actuelle sélectionnée (comme défini par la Valeur Étiquetée ' Type ') ; si False, dessine l'élément comme une simple string de texte indiquant la date et/ou l'heure

• Heure - définit l'heure affichée sur l'élément ; remplacez les segments d'heure, de minute et AM/PM si nécessaire
  Si aucune heure n'est spécifiée, l'heure actuelle du système s'affichera (l'heure non spécifiée s'affiche sous la forme 12h00).
• Type - dessine l'élément affichant la date, l'heure ou les deux

Liste des groupes

Génère un élément de liste groupée avec deux niveaux d'entrée.

Double-cliquez sur l'élément pour ouvrir la dialogue « Propriétés » de la page « Wireframe ». Utilisez cette page pour composer les entrées de la liste.

Cliquez sur le nœud racine (le nom de l'élément).

• Afficher les groupes - cliquez sur la flèche déroulante et sélectionnez Vrai pour afficher les éléments de la liste de premier niveau ou Faux pour les masquer ; les éléments de la liste de deuxième niveau s'affichent dans les deux cas mais doivent appartenir à un élément de groupe, qu'il soit affiché ou non

• Nom - saisissez le texte de l'élément de liste de premier niveau (le nom du groupe d'éléments)

• Nom - saisissez le nom de l'élément de la liste
• Texte - saisissez tout texte supplémentaire à afficher (par défaut) sous le nom de l'élément
• Texte près du lien - cliquez sur la flèche déroulante et sélectionnez Vrai pour afficher le texte supplémentaire en face du nom de l'élément, où vous pouvez également ajouter un lien, ou Faux pour conserver le texte sous le nom de l'élément
• Image - sélectionnez un nom d'image dans la liste déroulante ou saisissez simplement le nom tel qu'il apparaît dans la colonne « Nom » du gestionnaire d'images, pour afficher l'image à gauche du nom de l'élément
• Est un lien - cliquez sur la flèche déroulante et sélectionnez Vrai pour indiquer que l'élément est lié à une autre page ou à des informations supplémentaires en affichant un caractère « > » à droite du nom de l'élément ; sélectionnez Faux pour masquer le caractère de lien
• Lien vers l'image - sélectionnez un nom d'image dans la liste déroulante ou saisissez simplement le nom tel qu'il apparaît dans la colonne « Nom » du gestionnaire d'images, pour afficher l'image (si « Est un lien » est vrai) comme icône de lien au lieu du caractère >
• Sélectionné - cliquez sur la flèche déroulante et sélectionnez Vrai pour mettre en surbrillance le nom de l'élément comme sélectionné, ou Faux pour ne pas mettre l'élément en surbrillance

Clavier

Génère un élément qui représente un clavier.

Valeur Étiquetés :

• Type - bascule l'image entre un clavier texte (QWERTY) et un clavier numérique

Icône de chargement

Génère un élément qui représente l'icône de chargement d'Apple.

Contrôle des pages

Génère un élément rendu sous la forme d'une ligne de cercles gris, indiquant le nombre de pages disponibles et laquelle d'entre elles représente la page actuellement affichée.

Valeur Étiquetés :

• Page actuelle - dessine un cercle blanc dans la séquence de cercles gris pour indiquer lequel représente la page actuellement affichée
• Pages - le nombre de cercles à dessiner, indiquant le nombre de pages parcourues par ce contrôle (redimensionnez l'élément manuellement pour afficher le nombre de cercles spécifié)

Barre de recherche

Génère un élément représentant un champ de recherche.

Valeur Étiquetés :

• DrawStyle - bascule l'apparence de l'élément entre la recherche d'application par défaut avec une longue-vue de requête et une recherche Web sur un appareil Apple
• Espace réservé - saisissez le texte qui sera affiché dans le contrôle, pour prompt l'utilisateur à saisir le terme de recherche
• Invite - saisissez le texte prompt à afficher au-dessus du champ de requête, comme un rappel de ce qu'il faut rechercher ; par exemple, si la recherche consiste à rechercher des films/vidéos enregistrées sur l'appareil, vous pouvez saisir « Rechercher des vidéos » (« DrawStyle » doit être défini par défaut)
• Portée - cliquez sur la flèche déroulante et sélectionnez l'emplacement de recherche mis en surbrillance dans la barre de portée (« DrawStyle » doit être défini sur la valeur par défaut et « Afficher la barre de portée » doit être défini sur Vrai)
• Afficher les signets - lorsqu'il est défini sur True, un petit symbole de livre sera dessiné sur le côté droit du champ de requête, pour indiquer que ce contrôle de recherche stockera les recherches précédentes et pourra les utiliser à nouveau ('DrawStyle' doit être défini sur la valeur par défaut)
• Afficher le bouton Annuler - affiche un bouton Annuler à droite du champ de requête ('DrawStyle' doit être défini sur la valeur par défaut)
• Afficher la barre de portée - affiche une ligne d'options de portée pour ce contrôle de recherche, sous le champ de requête ('DrawStyle' doit être défini sur la valeur par défaut)
• Afficher les résultats de la recherche - affiche une flèche déroulante sur le côté droit de la zone de recherche, pour indiquer que la requête affichera les résultats de la recherche (remplace l'icône Signet si les deux sont configurées pour s'afficher) (« DrawStyle » doit être défini sur la valeur par défaut)
• Alignement du texte - aligne le texte de l'espace réservé à gauche, à droite ou au centre du champ de requête

Contrôle des segments

Génère un élément représentant un ensemble d'onglets (par défaut trois onglets).

Valeur Étiquetés :

• Onglets - cliquez sur la flèche déroulante et sélectionnez le numéro de l'onglet à mettre en surbrillance pour indiquer l'onglet actuel ; ouvrez et modifiez les Notes Valeur Étiquetée pour ajouter, supprimer ou renommer des onglets

Contrôle du spinner

Génère un élément représentant un contrôle spinner avec une liste d'éléments parmi lesquels peuvent être sélectionnés.

Valeur Étiquetés :

• Vérifier Item sélectionné - lorsqu'il est défini sur True, une coche sera dessinée sur le côté gauche de l'élément défini comme sélectionné
• Items - cliquez sur la flèche déroulante et sélectionnez l'article à indiquer comme sélectionné ; vous pouvez ouvrir et modifier les Notes Valeur Étiquetée pour ajouter, renommer ou supprimer des articles de la liste
• Bords arrondis - cliquez sur la flèche déroulante et sélectionnez le(s) côté(s) qui présentent des coins arrondis ; vous pouvez utiliser cette propriété pour ancrer plusieurs contrôles de rotation les uns à côté des autres afin de créer des sélections de contrôles de rotation plus complexes, comme une page affichant une sélection pour le pays, State , la ville et la banlieue - définissez :
  - Les deux pour définir des coins arrondis des deux côtés, si le spinner
  le contrôle est tout seul
  - À gauche pour définir des coins arrondis sur le bord gauche et des coins pointus
  sur le bord droit, si ce spinner est le premier d'une rangée de quais
  commandes du spinner
  - Droit de définir des coins arrondis sur le bord droit et des coins pointus
  sur le bord gauche, si ce spinner est le dernier d'une rangée de quais
  commandes du spinner, ou
  - Aucun pour définir des angles vifs des deux côtés, si ce spinner est
  amarré entre deux autres

• Alignement du texte - cliquez sur la flèche déroulante et sélectionnez où aligner le texte de l'élément - à gauche, à droite ou au centre du contrôle

Moteur pas à pas

Génère un élément représentant un contrôle de décrémentation/incrémentation (moins/plus).

Changer

Génère un élément représentant un interrupteur marche/arrêt coulissant.

Valeur Étiquetés :

• DisplayText - bascule entre l'affichage et le masquage des deux valeurs de texte d'état
• State - bascule entre l'état « activé » (arrière-plan gris avec un cercle blanc à droite et - si DisplayText est True - le texte « activé ») et l'état « désactivé » (arrière-plan blanc avec un cercle blanc à gauche et - si DisplayText est True - le texte « désactivé »)
  Les valeurs du texte d'état par défaut sont Activé et Désactivé ; vous pouvez modifier les Notes sur la Valeur Étiquetée pour les remplacer par n'importe quelle autre paire de valeurs (vous pouvez ajouter d'autres valeurs, mais seules les deux premières sont appliquées)

Champ de texte

Génère un champ de texte dans lequel l'utilisateur final peut saisir du texte libre, tel que le nom d'une page de connexion. Le champ contient le texte « TextField » et un cercle barré.

Valeur Étiquetés :

• Style de Bordure - cliquez sur la flèche déroulante et sélectionnez le style de bordure pour l'élément :
  - Rectangle arrondi - un rectangle aux coins arrondis
  - Lunette - un rectangle avec des bords supérieurs et gauches biseautés
  - Ligne - un rectangle avec des angles vifs et des bords à une seule ligne
  - Aucun - un rectangle sans bordures

• Alignement du texte - cliquez sur la flèche déroulante et définissez le texte pour qu'il s'aligne à gauche, à droite ou au centre du contrôle

Titre

Génère un élément qui représente le titre d'une page, le nom de l'élément étant le texte du titre (par exemple, « Paramètres »). L'élément est un rectangle avec un arrière-plan gris et un texte blanc.

Barre d'outils

Génère une image qui représente une barre d'outils avec des icônes par défaut, que vous pouvez ajouter ou remplacer par des images du gestionnaire d'images.

Double-cliquez sur l'élément pour afficher la dialogue « Propriétés » sur la page « Wireframe », qui répertorie les icônes affichées dans le cadre de l'élément Barre d'outils.

• Pour ajouter une nouvelle icône, cliquez sur « Barre d'outils » et sur le bouton Ajouter, et en réponse à l' prompt saisissez le nom de l'icône, ce qui ajoute le nom au bas de la liste ; cliquez sur le nom et dans le champ Propriété « Image », saisissez le nom du fichier d'icône, tel qu'il est affiché dans le panneau « Image chargée » du gestionnaire d'images
  Vous pouvez ajouter un « Séparateur » (affiché sous la forme |) à la liste, pour séparer différents groupes d'icônes sur la barre d'outils ; saisissez simplement le nom « Séparateur » dans l' prompt de nom
  Pour positionner l'icône sur la barre d'outils, cliquez dessus dans la liste et cliquez sur les boutons
• Pour supprimer une icône de la liste, cliquez dessus et cliquez sur le bouton Supprimer ; l'icône est immédiatement supprimée de la liste et, lorsque vous fermez le dialogue , de la barre d'outils

Barre d'onglets

Génère un élément qui représente une rangée d'onglets représentés par des images.

Double-cliquez sur l'élément pour afficher la dialogue « Propriétés » sur la page « Wireframe », qui montre le nœud racine (l'élément TabBar lui-même) et les éléments contenus dans la TabBar (sous forme d'images).

• Pour ajouter une nouvelle icône, cliquez sur « TabBar » et sur le bouton Ajouter, et en réponse à l' prompt saisissez le nom de l'élément, ce qui ajoute le nom au bas de la liste
  Pour positionner l'élément sur la TabBar, cliquez dessus dans la liste et cliquez sur les boutons
• Pour supprimer un élément de la liste, cliquez dessus et cliquez sur le bouton Supprimer ; l'élément est immédiatement supprimé de la liste et, lorsque vous fermez le dialogue , de la TabBar

• Afficher le texte - affiche (Vrai) ou masque (Faux) les noms des éléments sous forme de texte sous les images des onglets
• Couleur d'arrière-plan - cliquez sur la flèche déroulante et sélectionnez la couleur d'arrière-plan de la TabBar
• Couleur Police sélectionnée - cliquez sur la flèche déroulante et sélectionnez la couleur de police du texte si l'élément est sélectionné
• Couleur Police non sélectionnée - cliquez sur la flèche déroulante et sélectionnez la couleur de police du texte si l'élément n'est pas sélectionné

• Nom - le nom de l'élément, qui peut être affiché sous l'image dans la barre d'onglets (voir Afficher le texte )
• Image - le nom du fichier image à afficher si l'élément n'est pas sélectionné ; le nom du fichier est celui indiqué dans le gestionnaire d'images
• Image sélectionnée - le nom du fichier image à afficher si l'élément est sélectionné ; le nom du fichier est celui indiqué dans le gestionnaire d'images

Élément Valeur Étiquetée :

• Onglet sélectionné - Cliquez sur la flèche déroulante et sélectionnez le nom de l'élément à représenter comme sélectionné

Apple iPad Air

Crée un exemple de modèle pour l'Apple iPad Air.

Apple iPad Mini

Crée un exemple de modèle pour l'Apple iPad Mini.

Apple iPhone 4s

Crée un exemple de modèle pour l'Apple iPhone 4s.

Apple iPhone 5c

Crée un exemple de modèle pour l'Apple iPhone 5c.

Apple iPhone 5s

Crée un exemple de modèle pour l'Apple iPhone 5s.

Apple iPhone 6

Crée un exemple de modèle pour l'Apple iPhone 6.

Apple iPhone 6 Plus

Crée un exemple de modèle pour l'Apple iPhone 6 Plus.