De nieuwste versie van Atomic.io bevat scrollable containers
Een paar maanden geleden liet ik zien hoe atomic.io kan worden gebruikt om beweging te prototypen. Een van de belangrijkste punten die ik in het stuk heb gemaakt, was 'beweging tonen' in plaats van het aan de verbeelding van de klant of het team overlaten, is belangrijk. In feite is dit zo belangrijk geworden dat er een hele nieuwe categorie UX / UI-tools op het toneel verschijnt. Ze omvatten - Apple Keynote, Adobe's Edge Animate, After Effects en UXPin, om er maar een paar te noemen. Het nieuwe kind in het blok is Atomic.io dat in de open beta zat toen ik voor het eerst over het product schreef.
Het mooie van open bèta's is dat ze de softwarefabrikant de mogelijkheid bieden gebruikersfeedback over de functieset te verzamelen, inclusief ontbrekende functies, en deze vervolgens aan de applicatie toe te voegen en ze vóór de commerciële release te laten testen. In het geval van atomic was een eigenschap die ik echt miste de mogelijkheid om content verticaal of horizontaal te scrollen. Dit kan onder meer kaarten, diavoorstellingen of praktisch alles zijn wat een gebruiker zou vegen of slepen binnen de grenzen van de interface van een app of site.
Dit moet een onderwerp zijn geweest waar veel gebruikers om vroegen omdat scrollable containers deze maand net in de app zijn geïntroduceerd en ik moet toegeven dat scrollable content in het prototype doodeenvoudig in te stellen is.
Hier is hoe…
02 van 03Verticale schuivende inhoud in atomaire vorm maken
U moet zich eerst aanmelden voor een gratis proefperiode van 30 dagen en aan het einde van die periode ontvangt u drie tariefplannen.
Het eerste dat u moet weten, is dat al het werk dat u gaat doen zich in de browser bevindt en dat de app strikt op Google Chrome is gericht. Zodra u zich aanmeldt, wordt u naar de projecten pagina. Om de app te openen, klikt u opNieuwe projectknop.
Wanneer de interface wordt weergegeven, ziet u een beperkt aantal hulpprogramma's, de mogelijkheid om pagina's en lagen toe te voegen aan de pagina's, het tekengebied en, aan de rechterkant, een contextgevoelig eigenschappenvenster.In dit voorbeeld ben ik begonnen met een iPhone 5-voorinstelling van 320 x 568. Ik open vervolgens de map met de afbeeldingen die moeten worden gescrolled en sleep ze naar het canvas. Ze zijn automatisch aan het project toegevoegd en u kunt zien dat ze zich op afzonderlijke lagen bevinden klik op het tabblad Lagen. Ik heb vervolgens het gereedschap Pijl (Selectie) geselecteerd, een afbeelding geselecteerd en naar een nieuwe positie gesleept om er wat ruimte tussen toe te voegen. Ik heb vervolgens alle afbeeldingen en geselecteerd klikte op de knop Verticaal verdelen op de werkbalk. Dit verdeelde de afbeeldingen gelijkmatig. De volgende stap is het selecteren van alle inhoud die moet worden gescrolld en een van beide Klik op de knop Container of selecteer Scrollcontainer maken op de knop Groep schiet naar beneden. Nadat de container is gemaakt, ziet u deze in het deelvenster Lagen. klik op de container en sleep de onderste hendel omhoog naar de onderkant van het canvas. Klik op de knop Voorbeeld onderaan het venster Eigenschappen en hiermee wordt een browservenster geopend. Gebruik het scrollwiel van je muis om door de inhoud te bladeren. Om terug te keren naar je project, klik op de knop Bewerken rechtsonder in het browservenster. Horizontaal scrollen is net zo gemakkelijk te bereiken. Sleep in dit geval een reeks afbeeldingen naar het canvas en legde ze tegen elkaar aan. Terwijl de afbeeldingen zijn geselecteerd, klik ik op de knop Boven uitlijnen om ervoor te zorgen dat ze allemaal op één lijn liggen. Vervolgens hield ik de Shift-toets ingedrukt en selecteerde ik elke laag in het deelvenster Lagen. Met de afbeeldingen geselecteerd, I klikte op de knop Container en, in de panelen Properties, Horizontaal geselecteerd in het Gedragsgebied. Vervolgens heb ik het project getest in een browservenster door op de knop Voorbeeld te klikken. Hoewel ik heb laten zien hoe je afzonderlijke versies van verticaal en horizontaal scrollen kunt maken, zolang je de schuifbare inhoud in een container plaatst, kun je deze containers in afzonderlijke delen van het scherm plaatsen. Een webpagina kan bijvoorbeeld verticaal scrollen in een zijmenu en horizontaal scrollen van inhoud in een diashow op dezelfde pagina. In feite kan een container zowel verticaal als horizontaal scrollen voor items zoals een afbeeldingkiezer met een tiental miniaturen. Bekijk voor meer informatie over deze functie in atomic.io: Hoe maak je horizontale scrollen inhoud in atomaire
