Dynamic Panels – campus

Vad är det?

En dynamisk panel innehåller olika widgets i olika uppsättningar, dessa uppsättningar kallas för “states” (lägen på svenska) i Axure. En dynamisk panel kan innehålla antingen en eller flera states, men det är endast ett läge som kan ses åt gången. Det läge som visas kan ställas in dynamiskt, det vill säga att den dynamiska panelen kan göras rörlig. Därmed passar det utmärk till bland annat bildspel. 

När används det?

Dynamiska paneler är unika då detta är den enda widget som kan dras eller svepas direkt i webbläsaren. Det är också den enda widget som kan fästas till en fast position i webbläsarfönstret, vilket gör den till ett perfekt val för navigationsmenyer och sidebars som alltid ska vara synliga. 

Några fler exempel där dynamiska paneler används förutom i navigationsmenyer är till bildspel och för att göra det möjligt att skrolla för att läsa innehåll.

Här finns exempel på hur dynamiska paneler kan användas:

Hur används det?

För att använda dynamiska paneler i Axure kan man gå tillväga på lite olika sätt. Antingen kan man välja dynamiska paneler bland widgeterna i biblioteket eller så kan man markera några widgets som redan finns och gör dessa till en dynamisk panel.

För att få flera olika lägen i en panel, så kallade “states”, som behövs för exempelivs ett bildspel, så behöver man dubbelklicka på panelen för att få tillgång till funktionen. Då kommer du in i läget som visas nedan:

Instruktion för bildspel

Bildspel kan styras av pilar som möjliggör att man kan klicka på antingen framåt- eller bakåtpilen för att växla mellan bilder. Detta har ni redan tittat på i Axure Basics. Denna metod kan även användas för enkäter, samt för att exempelvis göra en sida där man behöver logga in innan man kan fortsätta.

Det finns även automatiska bildspel som går igång direkt när sidan laddas in. Dessa görs på följande sätt:

Eftersom bildspelet ska starta direkt när sidan laddas in, så ska du inte ha någon speciellt objekt markerat. I fallet nedan kan du alltså klicka på det vita fältet och se till att inget är markerat.

Därefter går du till interactions, trycker på New Interaction och väljer Page loaded.

Efter det kan du välja vilket mål som Page Loaded ska syfta till. I detta fall är det “dynamic panel”.

Next anger att nästa bild ska visas när sidan laddas in. Wrap from last to first innebär att bildspelet ska startas om igen när sista bilden har visats.

Därefter kan du välja hur bilderna ska animeras in och ut samt hur lång tid det ska ta. Trycker du på More Options så kan du välja exempelvis hur länge varje bild ska visas.

Pin to browser

Ibland vill man att en meny ska stanna kvar på samma ställe relativt till webbläsarfönstret, och inte vara bundet till innehållet i webbläsarfönstret. Det kan vara en huvudmeny som man vill att användaren ska kunna ha åtkomst till vart man än är på sidan, det skulle också kunna vara ett chattfönster på en e-shop eller en supportchatt hos en teleoperatör.

För att fästa en dynamisk panel till webbläsarfönstret klickar du på panelen sedan går du till menyn till höger och klickar på “Style” fliken om den inte redan är öppen. Under rubriken “Dynamic Panel” finns “Pin to browser”, om man klickar på denna öppnas en ny ruta.

Här finns många olika alternativ för hur man kan ordna panelen i ett webbläsarfönster. Till exempel kan man fästa panelen horisontellt, vertikalt eller både och. Detta gör att man kan fästa panelen antingen högst upp, i mitten eller längst ner i ett webbläsarfönster. Man kan också sätta in marginaler om man vill förskjuta panelen åt något håll för att få den exakt som man vill.

Man kan även göra så att en dynamisk panel automatiskt täcker hela webbläsarfönstrets bredd. Detta gör man genom att klicka på panelen och få upp “Style” menyn, sedan finns alternativet “100% wide” under “Dynamic Panel” rubriken.

Scrollbart fönster

På bilden ovanför kan vi se en av världens mest använda chattfönster. På Facebooks webplats ser chattfönstret ut på detta sätt. I Axure kan vi skapa ett liknande chatfönster med hjälp av Dynamic Panels.

På bilden nedanför kan vi se hur vi har skapat ett scrollbart fönster för en chatfunktion.

För att skapa en dynamic panel där vi kan scrolla i en chatfönster så börjar vi med att skapa profilbilder, namn och en grön elips som visar på att personen är online och dessa har vi sen grupperat och skapat många likadana.

Efter att vi gjort grunden för vår hur chatten ska se ut så markerar vi allt >> högerklickar och väljer >> Create Dynamic Panel. Det som då händer är att vi får upp en meny till höger där vi först döper vår nya dynamic panel, sedan sätter vi bredd och höjd. Viktigt att tänka på är att ge lite yta till sin scrollbar om den ska befinna sig till höger. Efter detta, väljer vi åt vilket håll vi vill scrolla åt. I vårt exempel har vi har valt att scrolla vertikalt. Det som nu kommer hända är att vi kommer få ett chatfönster som liknar på den väldigt kända chatfunktion som används av miljoner användare.