1. Vad är det? Vad kan funktionen användas till?

Med den explosiva tillväxten av antalet modeller för mobiler, surfplattor och datorer blir skärmstorleken mer och mer mångsidig och efterfrågan på visning av anpassningsbar skärmstorlek för webbinnehåll blir mer och mer intensiv. En adaptive view är en version av en sida designad för en specifik skärmstorlek. Adaptive Views fungerar genom att upptäcka skärmstorleken och ladda rätt layout för den. De låter dig skapa en sida en gång och ändra utseende baserat på webbläsarmiljön de visas på.

Funktionen Adaptive Views i Axure gör det möjligt för oss att skapa en sida i Axure med flera “vyer.” Designvariationer är optimerade för varje brytpunkt som är associerad med Adaptive Views. Brytpunkter definieras baserat på webbläsarfönstrets bredd och/eller höjd i pixlar. När du förhandsgranskar ditt wireframe-dokument i webbläsaren kommer det innehåll som du har i varje vy att justeras när webbläsaren träffar den brytpunkten. Adaptive Views låter därför folk anpassa upplevelsen för olika visningsstorlekar. Adaptive Views ärver egenskaper från föräldern eller basvyn. Med den här funktionen kan en UX-designer enkelt skapa en prototyp mot flera enheter och testa den responsiva designen. 

2. När används det?

“Adaptive Views” används vid design för flera skärmstorlekar. Med anpassningsvyer kan man prototypa en lösning och anpassa skärmen för olika visningsportar för att simulera en responsiv design. Generellt skulle man designa en anpassningsbar webbplats för sex vanliga skärmbredder för att rikta in sig på de olika vanligaste skärmstorlekarna som används för att se din slutliga applikation eller webbplats: 320x 480x 760x 960x 1200x

I Axure hittar man ett antal adaptive views som skapats som standard. Dessa fungerar tillsammans med det lyhörda biblioteket för att säkerställa att komponenter/widgets anpassas över varje brytpunkt.

3. Hur används det?

För att använda Adaptive Views i Axure behöver man först klicka på canvasduken, därefter på Add adaptive views i Style-panelen. I Adaptive views dialogen kan man sedan lägga till nya brytpunkter – d.v.s. vid vilken bredd innehållet på sidan kommer att anpassas – genom att välja passande skärmstorlekar under Presets. Hur innehållet anpassas mellan de olika skärmstorlekarna beror på vilka vyer du anger som “base”, “parent” och “children” – detta gör du under Inherit dropdown menyn. Genom att organisera dina vyer under Inherit, skapar du alltså en kedja och väljer vilka vyer som ärver innehållet och designen från andra vyer. På så sätt blir det enklare och snabbare att justera designen. 

Vilken skärmstorlek du väljer att jobba utifrån och väljer som “bas” beror på ditt projekt; om t.ex. de flesta av dina användare kommer att besöka webbsajten på deras mobil, kan det vara en bra ide att börja designa för denna skärm först. Att designa “mobile-first” kan också göra det enklare genom att först fokusera på vad som är viktigt i din webbsajt, och sedan utöka designen med mindre viktiga element, ju större skärmstorleken blir. 

När du väl har skapat ett antal anpassade vyer, kan du ändra designen i dem genom att klicka på den aktuella storleken uppe i det vänstra hörnet i Axures gränssnitt. Genom färgkodningen kan du se vilka vyer som kommer att påverkas när du justerar designen – den designen du jobbar i är markerad turkos, och om vyn t.ex. är markerad gul, betyder det att designen kommer att förändras även i denna skärmstorlek. Vill du att dina förändringar i designen justeras i alla vyer, kryssar du i Affect all views. 

Det är dock viktigt att tänka på att många Widgets, som t.ex. Droplist Widget:en, inte automatiskt anpassas till skärmstorleken, och att du istället måste göra detta manuellt genom att skapa en ny anpassad Widget i den vyn där det behövs. För att ta bort en widget från en av vyerna, högerklickar du på den och väljer Unplace from View. Tänk dock på att den då även försvinner från andra vyer som ärver från denna – d.v.s. de som är markerade gula.     

Något som Adaptive views-funktionen i Axure heller inte gör, är att automatiskt krympa eller öka storleken på bilder så att de alltid sträcker sig till webbläsarens storlek – något som programmerare oftast åstadkommer för att skapa en s.k. liquid layout. Detta kan du dock uppnå genom att använda Dynamic panels.

4. Exempel

För att växla mellan vyerna i demon använder man sig av en lilla meny som står markerad med grön semirektangel i Fig.1

Fig.1


Man kan också dra fönstret på sidan för att ändra storleken på själva fönstret och den anpassa sig på de olika storleken.   

Exempel:
Länk: https://m8951e.axshare.com

Dator Skärm

Surfplatta

Mobil