ÉDITEUR FILAIRE
NinjaMock comprend tous les pochoirs typiques pour le wireframing web et mobile.
Nos pochoirs sont sommaires – comme s'ils étaient dessinés à la main. En effet, cela aide les gens à se concentrer sur l'interaction et le contenu de votre wireframe plutôt que sur les couleurs, le style, la mise en page détaillée et d'autres aspects haute fidélité.
Les pochoirs sont organisés dans une boîte à outils dans le volet gauche de l'application et sont regroupés en fonction de leur type et de leur utilisation. Nous prenons actuellement en charge plusieurs types de projets (par exemple iOS, Android, Windows Phone, etc.) et pour chaque type de projet, la boîte à outils contient les pochoirs dont vous aurez besoin.
(Android, iPhone, iPad, Windows Phone, Microsoft Surface, sites Web et à main levée)
Icônes et images
Les wireframes ne sont pas complets sans inclure des icônes et des images. Dans NinjaMock, vous avez de nombreuses options pratiques à votre disposition afin de concevoir votre interface pour inclure ces éléments visuels.
Icônes intégrées
Nos icônes intégrées utilisent le même style dessiné à la main que le reste des éléments de pochoir afin que l'ensemble de votre conception filaire ait un aspect et une sensation uniformes.
Les icônes intégrées diffèrent selon le type de projet. Par exemple, dans les projets filaires Android et iPhone, ils ressemblent aux vraies icônes de la plate-forme donnée, mais ils ont toujours un aspect sommaire dessiné à la main.
Les icônes intégrées sont des vecteurs. Vous pouvez les redimensionner et même modifier les remplissages et les traits sans perte de qualité.
IconFinder
Si vous ne trouvez pas ce dont vous avez besoin parmi nos icônes intégrées, nous avons également une intégration directe avec IconFinder. Il suffit de rechercher des icônes dans l'onglet IconFinder de l'éditeur de wireframe Ninjock, sans jamais avoir à quitter.
Veuillez noter que les icônes IconFinder ne sont pas des vecteurs et que vous ne pouvez pas modifier leurs remplissages ou leurs traits.
Vos propres fichiers
Avez-vous des icônes ou des images sur votre ordinateur que vous souhaitez utiliser dans votre projet? Il vous suffit de télécharger vos ressources visuelles sur votre stockage personnel sur nos serveurs et vous pouvez les utiliser dans n'importe quel projet. Nous fournissons actuellement à chaque utilisateur 500 Mo d'espace libre.
Vous pouvez faire glisser et déposer des fichiers image directement depuis votre bureau sur l'éditeur de wireframe Ninjock. Ces fichiers seront automatiquement téléchargés sur votre espace de stockage personnel.
Images du web
Avez-vous trouvé l'icône ou l'image parfaite dont vous avez besoin pour votre projet sur le Web? Pas de problème, il suffit de copier et coller le lien vers le fichier et vous pouvez l'utiliser sans le télécharger sur nos serveurs.
Assurez-vous simplement que cette image ne sera pas supprimée de l'endroit où vous la trouverez.
Vous pouvez faire glisser et déposer une image directement à partir d'un navigateur ouvert sur la surface de conception Ninjock. Nous ajouterons automatiquement l'image en faisant référence à l'URL de l'image.
Icônes dessinées manuellement
Parfois, il est plus pratique de créer votre propre icône lorsque vous ne trouvez rien qui correspond à vos besoins. En utilisant les puissants outils d'édition vectorielle de NinjaMock, vous pouvez rapidement créer vous-même une icône.
Suivez ces 3 étapes simples pour créer votre propre icône:
1. Utilisez n'importe quel outil d'édition vectorielle pour dessiner ce dont vous avez besoin.
2. Sélectionnez les éléments nouvellement dessinés.
3. Faites un clic droit et choisissez Exporter la sélection vers -> Mes images....
Votre dessin vectoriel sera désormais enregistré sous forme d'image réutilisable dans votre espace personnel sur nos serveurs. À partir de maintenant, vous pouvez utiliser cette image comme source d'icônes. Dans l'exemple ci-dessous, vous pouvez voir une icône dessinée manuellement qui est utilisée dans l'élément de la barre d'onglets de l'iPhone:
Pochoirs personnalisés
Si vous ne trouvez pas le pochoir dont vous avez besoin, vous pouvez le créer vous-même directement dans NinjaMock wireframe editor. Vous pouvez créer vos propres éléments réutilisables à partir de n'importe quelle sélection d'objets que vous créez sur la surface de conception.
Les pochoirs personnalisés ne sont actuellement disponibles que dans le projet dans lequel ils sont créés.
Voici comment créer votre propre pochoir réutilisable:
1. Créez tout ce dont vous avez besoin en utilisant des pochoirs existants et/ou en dessinant des éléments uniques (d'ailleurs, nous avons de puissants outils d'édition vectorielle).
2. Sélectionnez tous les éléments que vous souhaitez inclure dans votre pochoir personnalisé.
3. Faites un clic droit, choisissez Actif -> Convertir en actif.
Le pochoir nouvellement créé sera ajouté au groupe "Mes actifs" au bas de la boîte à outils, et vous pouvez maintenant l'utiliser sur n'importe quelle page du projet en cours.
Vous pouvez modifier le pochoir à tout moment (clic droit, choisissez Actif -> Modifier l'actif) et vos modifications seront appliquées à toutes les instances du pochoir tout au long de votre projet.
Support Vidéo
Ninjamock vous permet d'utiliser des vidéos externes dans vos projets en ajoutant simplement l'URL où la vidéo est stockée. Ninjamock prend en charge les vidéos de YouTube, Vimeo, Dailymotion et Rumble. Il prend également en charge les fichiers vidéo aux formats MP4, WEBM et OGG.
Support des Emojis
Dans Ninjamock, vous pouvez utiliser des emojis standard dans vos projets, que vous pouvez redimensionner et placer n'importe où dans vos projets.
Graphiques vectoriels
NinjaMock wireframe editor dispose de puissants outils d'édition vectorielle intégrés. En plus des éléments simples tels que des lignes, des cercles et des rectangles, NinjaMock wireframe Editor comprend également un crayon à main levée et un outil stylo (avec prise en charge de la courbe de Bézier) pour créer des formes de tout type.
Les outils d'édition vectorielle sont situés dans la palette outils sur le côté gauche de la surface de dessin.
Comment fonctionnent les outils de dessin?
Les outils de dessin (ligne, rectangle, ellipse, stylo et crayon) fonctionnent un peu différemment du reste des pochoirs. Pour commencer à dessiner une forme, choisissez un point de départ, maintenez le bouton gauche de la souris enfoncé et déplacez la souris jusqu'au point final souhaité. Relâchez le bouton gauche de la souris lorsque la forme est prête. Le comportement de dessin est très similaire à celui des outils que vous connaissez peut-être d'autres applications de dessin professionnelles.
Si votre forme s'avère être de la mauvaise taille, pas de soucis - vous pouvez toujours la modifier par la suite, soit en la redimensionnant avec une souris, soit en utilisant le volet Propriétés pour effectuer des ajustements.
Commençons par les outils de dessin simples:
Outil Ligne
Avec un outil de ligne, vous pouvez ... ta-da! - tracez une ligne.
Raccourci: L clé.
Pour tracer une ligne droite, maintenez la touche Maj enfoncée pendant le dessin. Ensuite, l'outil s'enclenchera par incréments de 15 degrés pour vous aider.
L'outil ligne produit des lignes sommaires. L'application dessine un chemin complexe dans les coulisses qui donne à la ligne un aspect dessiné à la main. Si vous avez besoin d'une ligne non sommaire (complètement droite), vous pouvez utiliser notre outil plume ou convertir votre ligne en chemin.
Outil Rectangle
Avec un outil rectangle, vous pouvez ... roulement de tambour-dessinez un rectangle.
Raccourci: R clé.
Pour verrouiller le rapport hauteur / largeur de la forme, maintenez la touche Maj enfoncée pendant le dessin.
L'outil rectangle produit également des formes sommaires, tout comme l'outil ligne. Si vous avez besoin d'un rectangle non sommaire, vous pouvez utiliser notre outil rectangle ou convertir votre rectangle en chemin.
Outil ellipse
Avec un outil d'ellipse, vous pouvez ajouter de superbes ellipses à vos projets.
Raccourci: C clé.
Pour verrouiller le rapport hauteur / largeur de la forme, maintenez la touche Maj enfoncée pendant le dessin.
Jetons un coup d'œil à nos outils vectoriels plus avancés:
Outil stylo
Avec un outil stylo, vous pouvez créer tous les types de polylignes et de polygones.
Raccourci: P clé.
Le stylo est utile pour faire une esquisse rapide d'une forme (ajout de points de contrôle) avant d'appliquer des courbes de Bézier avec l'outil d'édition de tracé. Vous pouvez également ajouter des courbes de Bézier tout en ajoutant vos points de contrôle simplement en faisant glisser pendant que vous ajoutez un point.
Conseils sur l'utilisation de l'outil stylo:
Pour ajouter un point à un chemin existant, sélectionnez l'outil Plume et cliquez n'importe où sur le chemin pour ajouter un autre point.
Pour supprimer un point d'un chemin, sélectionnez l'outil Plume et cliquez sur le point existant que vous souhaitez supprimer.
Pour fermer un polygone, ajoutez simplement votre dernier point directement au-dessus du premier point. Le curseur de la souris changera pour indiquer que le polygone sera maintenant fermé.
Outil d'édition de chemin
Avec l'outil d'édition de chemin, vous pouvez modifier n'importe quel chemin existant, quelle que soit la façon dont il a été créé, que ce soit avec un stylo, un crayon ou tout autre outil d'édition vectorielle.
Raccourci: A clé.
L'outil d'édition de trajectoire est utile pour effectuer des ajustements à vos trajectoires, tels que le déplacement de points et l'édition de courbes de Bézier.
Comment créer une courbe à l'aide de l'outil d'édition de chemin:
1. Passez votre souris sur le point de trajectoire que vous souhaitez transformer en point de contrôle pour une courbe.
2. Maintenez la touche Alt enfoncée (touche Option sur Mac) et "tirez" le curseur de votre souris de n'importe quel côté, loin du point tout en cliquant vers le bas.
3. Des poignées de réglage de la courbe apparaîtront (points bleus reliés par une fine ligne dans l'illustration). Utilisez ces poignées pour ajuster la courbe au besoin.
4. Vous pouvez également reconvertir une courbe en un angle normal en cliquant avec la touche alt sur le point de contrôle.
Outil crayon
Avec l'outil Crayon, vous pouvez créer n'importe quel dessin à main levée.
Raccourci: Y clé.
Assurez-vous simplement que vous avez de bonnes compétences en dessin à la main:-) Une planche Wacom ou une autre tablette à dessin peut être utile lorsque vous utilisez l'outil Crayon.
Outil à main
Vous pouvez utiliser l'outil à main pour effectuer un panoramique sur la surface de conception. C'est pratique lorsque vous avez un niveau de zoom élevé appliqué et que vous devez effectuer des ajustements de défilement délicats pour mettre les choses en vue.
Raccourci: H clé. Alternativement, vous pouvez maintenir la touche Espace enfoncée et utiliser le bouton gauche de la souris pour activer temporairement l'outil à main. Ceci est utile lorsque vous utilisez un autre outil (stylo, par exemple) et que vous devez faire défiler sans désactiver le stylo. Relâchez simplement la touche Espace et le stylo redeviendra l'outil actif.
Formes géométriques
Dans notre boîte à outils, vous trouverez de nombreuses formes vectorielles plus couramment utilisées.
Ces formes apparaissent dans tous les types de projets (les autres pochoirs de la boîte à outils sont spécifiques à un type de projet).
Propriétés communes des objets vectoriels
Tous nos objets vectoriels sont pris en charge avec un ensemble commun de propriétés – pinceau de trait, largeur de trait et pinceau de remplissage (le cas échéant).
Cela vous donne la flexibilité de dessiner rapidement une forme dans un style qui correspond au reste de votre conception.
Indicateurs visuels de lien de page
Parfois, vous pouvez choisir d'ajouter seulement quelques liens actifs à vos wireframes. Dans de tels cas, il peut être difficile pour les téléspectateurs de savoir quels éléments de votre conception sont réellement cliquables. Pour cette raison, nous avons inclus la possibilité d'activer et de désactiver certains indicateurs de lien de page subtils lors de l'affichage d'un projet en mode partage ou aperçu. Ces indices fournissent une indication visuelle des éléments cliquables présents sur chaque page de votre conception.
Si vous avez attribué un lien de page à un élément en mode création, un indicateur de lien de page correspondant s'affiche sur cet élément lors de l'affichage du projet en mode partager ou aperçu.
Les indicateurs de lien de page sont activés par défaut en mode aperçu ou partage, mais peuvent être facilement désactivés en cliquant sur l'option Lien dans le coin supérieur droit de la page.
Copier et coller
Vous pouvez facilement copier et coller des éléments entre des pages ou des projets. Vous pouvez copier et coller dans le même projet filaire, ou copier à partir d'un projet et le coller dans un autre projet ouvert dans un onglet, une fenêtre ou même un navigateur différent.
Sélectionnez simplement les éléments de votre conception que vous souhaitez copier et utilisez la combinaison de touches Ctrl+C (Cmd+C sur Mac) sur votre clavier pour les copier dans le presse-papiers.
Pour coller les éléments qui se trouvent maintenant dans votre presse-papiers, accédez simplement à la page du projet dans laquelle vous souhaitez les copier et appuyez sur les boutons Ctrl + V (Cmd + V sur Mac) de votre clavier. C'est ça! Les éléments collés sont maintenant copiés au nouvel emplacement.
Pour des raisons de sécurité, la copie entre les onglets du navigateur ne fonctionne que lors de l'utilisation de raccourcis clavier. Il ne fonctionnera pas depuis le menu contextuel activé avec le clic droit.
Collage de graphiques
NinjaMock prend en charge votre flux de travail même lorsque vous travaillez avec des conceptions haute fidélité dans d'autres applications graphiques comme Adobe Photoshop. Même si vous en avez peut-être fini avec les phases conceptuelles et filaires de votre travail de conception, vous pouvez toujours utiliser facilement NinjaMock pour poursuivre votre flux de travail en collant vos conceptions au pixel près dans NinjaMock. Cela vous permet de distribuer facilement vos conceptions visuelles raffinées à vos collègues, parties prenantes et clients pour commentaires et approbation. Fini les fils de discussion lourds ou les partages de fichiers encombrés pour gérer vos révisions de conception !
Lorsque vous avez terminé votre travail de conception de maquette dans l'application graphique de votre choix, il vous suffit d'utiliser la commande Copier de l'application pour copier les conceptions que vous avez là-bas, de revenir à NinjaMock, puis de coller vos graphiques dans NinjaMock avec le Combinaison de touches Ctrl+V (Cmd+V sur Mac). Vous n'avez plus à vous soucier d'enregistrer ou d'exporter votre travail de conception sous forme de fichiers image à partir de l'application graphique ! Vous pouvez également utiliser la fonctionnalité de presse-papiers de votre système d'exploitation pour copier les graphiques souhaités. Par exemple, sur un Mac, vous pouvez utiliser la combinaison de touches Cmd + Ctrl + Maj + 4 pour ouvrir le rectangle de sélection de copie du presse-papiers, faire glisser la sélection pour l'adapter à ce que vous souhaitez copier, puis la coller dans NinjaMock.
La transparence n'est pas prise en charge. Les zones transparentes des éléments visuels que vous copiez à partir d'autres applications seront rendues avec un arrière-plan blanc.
En raison de certaines restrictions, ce type de collage n'est actuellement pas pris en charge dans le navigateur Firefox.
Collaboration
L'idée fondamentale derrière le wireframing consiste à communiquer vos idées. Partagez votre travail avec votre équipe ou vos clients afin d'obtenir un retour instantané et de vous assurer que tout le monde est au courant de la progression du projet.
Partage
D'un simple clic, vous pouvez partager votre projet filaire avec n'importe qui. NinjaMock génère automatiquement un lien secret spécial (par exemple "ninjamock.com/s/some-code") qui peut ensuite être utilisé pour ouvrir et afficher votre projet.
Les personnes avec qui vous partagez ce lien n'ont pas besoin d'un compte NinjaMock. Ceci est particulièrement utile pour soumettre votre travail à vos clients qui n'utilisent pas d'outils de wireframing. Même si vos clients n'ont pas de compte NinjaMock, ils peuvent toujours voir les conceptions et les commentaires, et même ajouter leurs propres commentaires à votre projet.
Si quelqu'un qui n'a pas de compte NinjaMock laisse un commentaire sur votre conception filaire ou maquette, l'auteur du commentaire sera affiché comme "Shadow Ninja #some-number". Il s'agit d'un compte temporaire spécial que nous créons à la volée spécifiquement pour les non-clients lorsqu'ils ajoutent des commentaires.
Comment commencer à partager votre projet:
1. Dans la barre de navigation supérieure, cliquez sur le bouton Partager.
2. Cliquez sur le bouton "Démarrer le partage".
3. Envoyez le lien généré automatiquement à qui vous voulez.
Pour arrêter de partager votre projet, cliquez simplement sur le bouton "Arrêter le partage" dans la même boîte de dialogue. Votre lien secret ne fonctionnera plus jusqu'à ce que vous recommenciez à partager.
Partage partiel
Il est courant que vous souhaitiez partager avec vos clients uniquement une partie spécifique de votre projet filaire sans qu'ils aient accès aux sections inachevées. Vous voudrez peut-être continuer à travailler sur la prochaine partie du projet en attendant qu'ils examinent ce qui est prêt. En utilisant nos statuts de page, vous pouvez facilement contrôler quelles pages sont partagées et lesquelles ne le sont pas.
Dans l'illustration ci-dessus, seules les pages avec le statut "Design complete" ou "Approved" sont partagées. Toute personne utilisant le lien secret (y compris vous-même si vous souhaitez le tester) ne verra aucune page filaire marquée "En cours".
Page de démarrage
Pour tester différents flux au sein de votre wireframe, il est souvent utile de choisir une page spécifique sur laquelle vous souhaitez que vos réviseurs commencent à visualiser vos conceptions. Dans NinjaMock, vous pouvez définir la page de démarrage directement dans la boîte de dialogue Partager.
La page de démarrage est enregistrée dans le projet lui-même. Cela signifie que vous pouvez modifier la page de démarrage à tout moment sans envoyer des tonnes de liens secrets différents à vos clients. Toute personne accédant à votre projet via le lien secret commencera sur la même page de démarrage.
Ouverture sur appareils mobiles
Les projets NinjaMock peuvent également être ouverts sur des tablettes et des smartphones, ce qui permet de voir très facilement comment vos conceptions filaires et maquettes apparaissent sur des appareils spécifiques !
Travailler comme une équipe
Parfois, il ne suffit pas de pouvoir partager un projet pour examen et recevoir des commentaires. L'éditeur filaire NinjaMock vous permet de partager votre espace de travail et de collaborer en temps réel avec votre équipe. Invitez vos partenaires commerciaux et vos collègues à rejoindre votre projet et attribuez-leur des privilèges afin qu'ils puissent contribuer directement.
Tout le monde peut être invité à travailler sur votre espace de travail partagé. Envoyez simplement des invitations et si vos invités n'ont pas encore de compte, ils créent simplement leur propre compte en quelques secondes. Une autre bonne chose est qu'ils n'épuisent pas leurs propres projets disponibles, s'ils rejoignent le vôtre ! - et ne vous inquiétez pas - vous êtes le patron, et vous décidez quels privilèges auront vos collaborateurs pour chacun de vos projets.
Accéder aux rôles
Les autorisations sur l'espace de travail sont définies avec le rôle attribué à l'utilisateur. Il existe quatre rôles dans NinjaMock : propriétaire, administrateur, concepteur et réviseur.
Qui peut faire quoi?
Propriétaire - est l'utilisateur qui crée les dossiers et les projets. Le propriétaire a le plein contrôle sur le projet. Le propriétaire invite des collaborateurs et leur attribue des rôles. Chaque projet créé compte dans le nombre de projets disponibles du propriétaire.
Administrateur - a le contrôle total sur les dossiers et les projets et peut inviter d'autres collaborateurs. Les projets ne comptent pas dans le nombre de projets filaires et maquettes disponibles pour le propre compte de l'administrateur.
Designer - car on pourrait s'attendre à ce que les concepteurs travaillent dans le projet. Cependant, cet utilisateur ne pourra pas administrer d'autres utilisateurs et leurs rôles. Le projet ne compte pas non plus dans le nombre de projets disponibles pour le propre compte des concepteurs.
Critique - le rôle avec le moins d'autorisations est le réviseur. Comme son nom l'indique, ils peuvent visualiser le projet et le commenter, mais ne pourront pas concevoir dans le projet et modifier les maquettes. De plus, les réviseurs ne peuvent pas administrer d'autres utilisateurs et leurs rôles. Le projet ne compte pas dans le nombre de projets disponibles pour le propre compte des évaluateurs.
Partager un espace de travail
Partager l'espace de travail du projet n'a jamais été aussi simple : cliquez simplement sur l'option Équipe dans l'éditeur de projet.
Vous pouvez également démarrer le partage d'espace de travail à partir de votre liste de projets filaires et de maquettes sur la page MES PROJETS en utilisant l'option Gérer l'équipe au niveau du projet, du dossier ou du compte.
Lorsque vous envoyez des invitations à partager votre espace de travail, vous pouvez ajouter des utilisateurs NinjaMock existants ou inviter de nouveaux utilisateurs à créer leur propre compte NinjaMock et à rejoindre votre projet.
Vous pouvez ajouter autant de collaborateurs que vous le souhaitez.
Gérer l'équipe
En tant que propriétaire de projet, vous avez le contrôle total de vos projets de wireframe et de maquette.
L'éditeur filaire NinjaMock vous permet de définir des privilèges d'utilisateur au niveau du projet, du dossier et du compte. Attribuez à vos collaborateurs autant ou aussi peu de pouvoir sur le projet que vous le souhaitez : faites-en un administrateur, un concepteur ou un réviseur.
L'équipe de gestion travaille à trois niveaux différents : compte, dossier ou projet. Ajoutez les autorisations et bénéficiez d'une personnalisation complète des droits d'accès et des autorisations. Les autorisations définies au niveau le plus bas seront toujours prioritaires.
Accéder à l'espace de travail partagé
Si quelqu'un partage un espace de travail de projet avec vous, vous recevrez un e-mail avec un lien pour accéder au projet. Si vous n'avez pas encore de compte NinjaMock, il vous sera demandé d'en créer un. Cela ne prend que quelques secondes !
En plus de l'accès au projet, vous recevrez certaines autorisations : administrateur, concepteur ou réviseur. Ces autorisations vous sont accordées par le propriétaire du compte.
Accédez à l'espace de travail de tous les projets (le vôtre ou partagé avec vous) à partir d'un seul endroit : Mes projets. Basculez entre les comptes pour accéder à leurs projets.
Outre l'accès au projet, vous pouvez être autorisé à accéder aux dossiers ou aux niveaux de comptes. De cette façon, vous aurez les mêmes droits sur tous les projets du dossier ou sur l'ensemble du compte.
Les projets qui ont été partagés avec vous n'affecteront pas le nombre de projets de votre propre plan.
Travailler ensemble
La collaboration sur un projet signifie que tous les utilisateurs peuvent accéder à l'espace de travail du projet et contribuer au projet en fonction de leurs privilèges.
Tous les changements et mouvements sont affichés au reste de l'équipe en temps réel et enregistrés sur le serveur.
État de la page
Vous voudrez peut-être suivre l'avancement de votre travail afin de comprendre à quel point le projet est proche de son achèvement. Dans l'éditeur filaire NinjaMock, vous et vos réviseurs pouvez contrôler le statut des pages individuelles.
Chaque page peut avoir l'un des statuts suivants "En cours" (statut par défaut), "Conception terminée" et "Approuvé".
Toutes les modifications apportées au statut d'une page se produisent manuellement. Nous n'avons pas mis en place de workflows complexes dictant qui peut changer un statut ou à quel moment. Au lieu de cela, nous avons décidé de le garder simple et flexible; tout utilisateur ayant accès à votre projet peut modifier n'importe quel statut à tout moment.
L'état de la page est synchronisé en temps réel, vous n'avez donc pas besoin d'actualiser votre navigateur pour voir le dernier état d'une page.
Aperçu du projet
Pour voir l'état d'un projet filaire ou de maquette entier au lieu d'une page spécifique, vous pouvez utiliser la page Web Aperçu du projet. Vous pouvez y accéder en cliquant sur "Aperçu".
La page Vue d'ensemble contient des détails sur toutes les pages de votre projet, tels que l'état de la page et le nombre de commentaires non résolus.
Exporter au format PDF/PNG
L'exportation au format PDF et l'impression sur papier sont toujours une partie essentielle du wireframing. De nombreux créateurs d'idées impriment leurs wireframes et les affichent sur les murs des bureaux ; certains les utilisent comme source d'inspiration, d'autres discutent des conceptions en groupe et ajoutent des commentaires directement sur le mur.
Dans l'éditeur filaire NinjaMock, nous soutenons cette pratique en vous donnant la possibilité d'exporter vos images filaires avec des liens de page et des commentaires de page. De cette façon, vous pouvez naviguer dans l'interaction de votre conception même lorsqu'elle est sur papier.
Lorsque vous exportez et choisissez d'inclure des commentaires, nous ajoutons tous les commentaires de page à côté de la page filaire.
Les commentaires ont les mêmes numéros de commentaires uniques que dans la surface de conception de NinjaMock.
Exporter au format HTML
Vous pouvez également exporter vos projets au format HTML. L'exportation au format HTML vous permet de télécharger les fichiers sur votre ordinateur ou de les ajouter à votre propre serveur Web pour un accès et un stockage pratiques. Cela peut être pratique pour partager vos projets avec vos partenaires et clients.
Les prototypes HTML offrent une expérience plus interactive lors de la prévisualisation de votre travail, par exemple en vous permettant de saisir du texte et de cocher des cases.
Gestion de projet
Nous aimons garder les choses organisées dans l'éditeur filaire NinjaMock. Nous proposons des moyens pratiques de regrouper des pages dans vos projets et nous vous permettons également d'organiser vos projets dans des dossiers - tout comme les fichiers sur votre ordinateur.
Groupes de pages
Lorsque votre projet grandit et devient plus difficile à naviguer, il est agréable de séparer vos pages en groupes. Par exemple, vous pouvez les regrouper par leurs zones respectives dans la conception de votre application ; par exemple. pages de connexion, pages de paramètres, etc. - ou de toute autre manière que vous aimez.
Un groupe de pages est simplement un ensemble nommé de pages (une page ne peut appartenir qu'à un seul groupe à la fois). Vous pouvez créer autant de groupes que vous le souhaitez, déplacer des pages entre des groupes ou les trier au sein d'un groupe.
Pour créer des groupes de pages, développez le volet Pages en cliquant sur l'icône correspondante dans le coin supérieur droit du volet.
Dossiers de projet
Pensez un instant aux fichiers sur votre ordinateur. Lorsque vous avez trop de fichiers et qu'il devient difficile de trouver ce que vous voulez, vous créez simplement des dossiers et déplacez les fichiers à l'intérieur, n'est-ce pas ?
Nous avons reproduit la même expérience dans NinjaMock ; vous pouvez créer des dossiers de projet, placer différents projets filaires et maquettes dans des dossiers, déplacer des dossiers dans d'autres dossiers, etc. C'est un moyen pratique et familier d'organiser votre travail.
Pour déplacer un projet (ou un dossier) dans un dossier :
1. Mettez en surbrillance (survolez) l'élément dans la liste des projets.
2. Cliquez sur le lien texte "Déplacer...".
3. Sélectionnez le dossier de destination et terminez en cliquant sur le bouton Déplacer.
Pour développer ou réduire le dossier dans la fenêtre contextuelle, cliquez sur l'icône de dossier grise.
Guide rapide - de l'éditeur filaire
Commentaires
L'éditeur filaire NinjaMock propose un moyen intuitif et familier de laisser des commentaires sur des filaires individuels et de suivre leur statut.
Les commentaires sont spécifiques à la page sur laquelle ils sont laissés. Si une page est supprimée, ses commentaires correspondants ne seront plus visibles.
Nos commentaires sont synchronisés en temps réel, vous n'avez donc pas besoin de rouvrir ou d'actualiser le projet pour obtenir les derniers commentaires !
Ajouter des commentaires
De nouveaux commentaires peuvent être ajoutés soit à partir du volet Commentaires sur le côté droit de l'aire de conception, soit simplement en cliquant avec le bouton droit n'importe où sur le fil de fer et en choisissant "Ajouter un commentaire" dans le menu contextuel.
Nous n'avons aucune restriction quant à qui peut laisser ou modifier des commentaires. Toute personne qui ouvre votre projet peut ajouter, modifier ou même supprimer n'importe quel commentaire.
Bulles de commentaires
Chaque commentaire est représenté par une icône bleue « bulle » sur la surface de conception. À l'intérieur de la bulle de dialogue, un numéro de commentaire unique est affiché.
Vous pouvez déplacer librement la bulle n'importe où sur la surface de conception afin d'aider le spectateur à comprendre à quel élément filaire le commentaire fait référence.
Double-cliquez sur l'icône de la bulle de dialogue pour afficher ou modifier le commentaire.
Suivi de l'état des commentaires
Lorsqu'un commentaire est résolu, l'icône de la bulle de dialogue est grisée et le commentaire est déplacé vers le bas de la liste dans le volet Commentaires. Cela vous aide à vous concentrer sur les commentaires actifs (non résolus) qui sont affichés en haut de la liste des commentaires.
Pour vérifier s'il y a des commentaires non résolus dans l'ensemble du projet, utilisez le TOUT commutateur en haut du volet Commentaires. De cette façon, vous verrez des commentaires pour toutes les pages plutôt que des commentaires pour la page en cours uniquement.
Cliquez sur une icône de bulle de commentaire et vous serez redirigé directement vers la page sur laquelle ce commentaire a été laissé. La position de défilement sera également ajustée de sorte que cette icône de bulle de dialogue soit positionnée au centre de l'écran.
Notifications par email
L'éditeur filaire NinjaMock propose également des notifications automatiques par e-mail lorsque de nouveaux commentaires ou réponses sont ajoutés.
En tant que propriétaire du projet, vous recevrez des notifications sur les commentaires de tous les réviseurs.
Cependant, les réviseurs ne recevront des notifications pour les fils de commentaires auxquels ils participent que s'ils sont un utilisateur NinjaMock enregistré. Les utilisateurs non-NinjaMock qui accèdent au projet via le lien secret et laissent des commentaires ne seront pas notifiés.