La dernière mise à jour d'Atomic.io comprend des conteneurs pouvant être défilés
Il y a quelques mois, j'ai montré comment atomic.io pouvait être utilisé pour prototyper le mouvement. L’un des points clés que j’ai abordé dans le texte était «montrer un mouvement» plutôt que de le laisser à l’imagination du client ou de l’équipe est important. En fait, cela est devenu tellement critique qu’une toute nouvelle catégorie d’outils UX / UI fait son apparition. Apple Keynote, Edge Animate d’Adobe, After Effects et UXPin, pour n’en nommer que quelques-uns. Le nouveau venu est Atomic.io, qui était en version bêta ouverte lorsque j'ai écrit pour la première fois sur le produit.
L’intéressant aspect des bêta ouvertes est qu’elles donnent au fabricant du logiciel l’occasion de recueillir les réactions des utilisateurs sur les fonctionnalités, y compris les fonctionnalités manquantes, puis de les ajouter à l’application et de les faire tester avant la sortie commerciale. Dans le cas d’Atomic, une fonctionnalité qui m’a vraiment manqué est la possibilité de faire défiler le contenu verticalement ou horizontalement. Cela peut inclure des éléments tels que des cartes, des diaporamas ou pratiquement tout ce qu'un utilisateur glisserait ou glisserait dans les limites de l'interface d'une application ou d'un site.
Cela a dû être un sujet que beaucoup d'utilisateurs ont demandé, car des conteneurs défilables ont été introduits dans l'application ce mois-ci et, je dois l'admettre, la création de contenu défilable dans le prototype est extrêmement simple à activer.
Voici comment…
02 sur 03Comment créer un contenu de défilement vertical dans Atomic
Vous devez d'abord vous inscrire pour un essai gratuit de 30 jours et, à la fin de cette période, trois plans tarifaires vous seront présentés.
La première chose à savoir, c’est que tout le travail que vous ferez se trouve dans le navigateur et que l’application vise uniquement Google Chrome. Une fois que vous vous êtes connecté, vous serez dirigé vers le Projets page. Pour ouvrir l'application, cliquez sur le boutonBouton Nouveau projet.
Lorsque l'interface apparaît, vous verrez qu'il existe un nombre limité d'outils, la possibilité d'ajouter des pages et des calques aux pages, la planche graphique et, à droite, un panneau de propriétés contextuel.Dans cet exemple, j'ai commencé avec un paramètre prédéfini pour iPhone 5 de 320 x 568.J'ouvre ensuite le dossier contenant les images à faire défiler et les fait glisser sur la toile. Ils ont été automatiquement ajoutés au projet et vous pouvez voir qu'ils se trouvent sur des calques individuels si vous cliquez sur l'onglet Couches. J'ai ensuite sélectionné l'outil Flèche (Sélection), sélectionné une image et l'avoir déplacé vers un nouvel emplacement afin d'ajouter de l'espace entre elles. J'ai ensuite sélectionné toutes les images et cliqué sur le bouton Distribuer verticalement sur la barre d'outils. Cela a uniformément espacé les images. L’étape suivante consiste à sélectionner l’ensemble du contenu à faire défiler et à Cliquez sur le bouton Conteneur ou sélectionnez Créer un conteneur de défilement à partir du bouton Groupe. pop down. Une fois le conteneur créé, vous le verrez dans le panneau Calques - cliquez sur le conteneur et faites glisser la poignée inférieure vers le bas de la toile. Cliquez sur le bouton Aperçu au bas du panneau Propriétés, une fenêtre de navigateur s’ouvrira. Utilisez la molette de la souris pour faire défiler le contenu. Pour revenir à votre projet, cliquez sur le bouton Modifier en bas à droite de la fenêtre du navigateur. Le défilement horizontal est tout aussi facile à réaliser. Dans ce cas, vous avez traîné une série d’images sur la toile et vous les avez collées les unes contre les autres. Une fois les images sélectionnées, je clique ensuite sur le bouton Aligner en haut pour vérifier si toutes les images sont alignées. J'ai ensuite maintenu la touche Maj enfoncée et sélectionné chaque calque dans le panneau Calques. Avec les images sélectionnées, je cliqué sur le bouton Container et, dans les panneaux de propriétés, sélectionné horizontalement dans la zone Comportements. J'ai ensuite testé le projet dans une fenêtre du navigateur en cliquant sur le bouton Aperçu. Bien que nous ayons montré comment créer des versions individuelles de défilement vertical et horizontal, tant que vous placez le contenu défilable dans un conteneur, vous pouvez placer ces conteneurs dans des zones séparées de l'écran. Par exemple, une page Web peut avoir un contenu défilant verticalement dans un menu latéral et un contenu défilant horizontalement dans un diaporama sur la même page. En fait, un conteneur peut avoir un défilement vertical et horizontal pour des éléments tels qu'un sélecteur d'images comportant une douzaine de miniatures. Pour en savoir plus sur cette fonctionnalité dans atomic.io, consultez: Comment créer un contenu de défilement horizontal dans Atomic
