Dynamic Panels – distans

Vad är det?

Dynamiska paneler (dynamic panels) är till för att skapa dynamiska och innehållsrika sidor. Panelerna är innehavare av widgets och genom att skapa “states” (lägen) kan du välja vilken information som visas för användaren vid ett visst tillfälle. En dynamisk panel kan endast visa en state åt gången men dessa states behöver inte alls vara likvärdiga. Dynamiska paneler är unika eftersom de är den enda typen av widget som kan dras eller svepas i webbläsaren.

När används det?

Genom att använda dynamiska paneler kan man skapa innehåll på en och samma sida, i olika uppsättningar istället för att skapa flera sidor och skapa navigation mellan dessa. Valet av state kan bero på en timer men också på inputs från användaren. Detta gör att det kan användas framgångsrikt till bildspel men även som checkouts eller som navigationsmenyer.

Fördelarna med att använda sig av en dynamisk panel är att:  

  • Kunna baka ihop innehåll på samma sida istället för att placera innehållet på flera sidor.
  • Kunna ha en rullande kampanj. 
  • Ta till vara på platsbristen i en mobiltelefon genom att exempelvis ha text på baksidan av ett foto.
  • Enda typen av widget som kan dras eller svepas i webbläsaren.

I mobilapplikationer där utrymmet är begränsat för hur mycket information som kan visas samtidigt är dynamiska paneler en användbar funktion. Genom dynamic panels så får mer innehåll plats än vad skärmen är kapabel att visa. En annan fördel är att dynamiska paneler kan fästas statiskt vilket gör att dessa lämpar sig utmärkt som menyer eller sidebars.

Hur gör man dynamic panels i Axure?

Det finns två sätt att skapa Dynamic panels i Axure. Det ena sättet att genom att använda den Widget i Libraries som helt enkelt kallas Dynamic panel, En Dynamic panel skapas genom att man drar den till arbetsytan i Axure, se figur 1.

Figur 1

Det andra sättet att skapa en Dynamic panel är att markera de objekt som man vill ska ingå, sedan högerklicka och välja Create Dynamic panel, se figur 2.

Figur 2

En dynamic panel består av ett antal states, som texten ovan beskriver. Dessa olika states kan innehålla olika information och aktiviteter. I state-editing mode hanteras egenskaperna på befintliga states i en dynamic panel samt att även här kan adderas ytterligare states. För att aktivera state-editing mode dubbelklickar man på den dynamic panel som ska konfigureras. Menyraden i state-editing mode visas i figur 3.

Figur 3

I state-editing mode kan antalet states justeras, det går att addera, duplicera eller ta bort. Här kan även de widgets som panelen innehåller hanteras, exempelvis om en widget ska omplaceras utanför panelen eller liknande. Det finns även en funktion för att isolera aktuell dynamic panel så att endast denna visas, en funktion som är relevant vid mer omfattande gränssnitt.
En Dynamic panels utseende, i form av fyllnadsfärg, kanter och skuggor hanteras via Style funktionerna. Olika states kan inneha olika grafiska uttryck. Det finns även ett antal specialfunktioner som en dynamic panel kan besitta, de hanteras också här. Dessa funktioner är Fit to content, 100% wide och Pin to browser. Fit to content innebär att panelen automatiskt anpassar sin storlek efter de widgets den innehåller. 100% wide innebär att en bild eller en färgbox inuti panelen konstant fyller hela bredden av browsern, även om fönstret i browsern förändras. Pin to browser möjliggör att placera en dynamic panel på en konstant position som inte påverkas av att webbsidan scrollas. Detta är en bra funktion för en global navigationsmeny eller en modal panel. Se figur 4.

Figur 4

Interaktivitet hos en dynamic panel skapas via Interaction funktionerna. Utöver de standardiserade funktionerna finns ett antal interaktiva funktioner som är specifika för dynamic panels. Set panel state skapar interaktivitet mellan olika states. Om det exempelvis är ett bildspel som skapats med hjälp av en dynamic panel så kan interaktionen Next/Wrap from last to first användas. Detta skapar ett bildspel utan stopp. Se figur 5.

Figur 5

Interaktiv prototyp – Axure

https://oekrdm.axshare.com/#id=1qoqsl&p=page_1