Bild, ljud och video – campus – Interface Patterns – Designmönster för användargränssnitt

Vad är det?

Bilder: En bild, är en avbildande framställning av något. Bilder kan vara fotografier, målningar eller digitalt ritade objekt. I Axure så kan man använda sig av bilder i olika format såsom JPG, PNG, GIF, BMP och SVG.

Ljud: Ljud är vibrationer i luften som vi sedan uppfattar som ljud. Ljud kan vara en låt, en jingel, notiser eller liknande.

Video: Videor är multimedia som visar bilder i en hög hastighet så att ögat uppfattar dessa som rörliga bilder, ofta visas videos även med ljud. Videos finns i många former såsom utbildningsvideor och underhållningsvideor.

När används det?

Bilder: Bilder kan man använda vid många olika tillfällen för att förmedla information, tydliggöra något eller förmedla en känsla och få det att kännas mer levande. I Axure kan man använda bilder som ikoner i grafiska gränssnitt. Man kan även använda bilder och sedan göra dessa till knappar, o.s.v.

Ljud: Vill man t.ex. demonstrera en webbplats/app som är anpassad för synskadade skulle ljud kunna vara en lämplig metod. Då kan man använda ljud för att veta vart man är på webbplatsen, vart man trycker o.s.v. Skapar man en plattform som ska innehålla musik så är det såklart lämpligt att kunna lägga in ljudfiler för att kunna demonstrera detta för att skapa rätt känsla. Ljud används också i applikationer, som i notiser och för att uppmärksamma händelser.

Video: Video-filer kan vara lämpligt att använda vid olika tillfällen. Kanske vill man skapa en mockup för en webbplats som ska innehålla tutorials, filmer eller liknande. Webbplatser idag har ofta videor eller GIFs som en del av webbplatsen för att fånga användaren/kundens uppmärksamhet och kännas mer lockande och intressant än vad ett textstycke och bilder gör. Videor används ofta som reklam och en del av marknadsföringen för att promota sin produkt eller service.

Hur används det?

Bilder: När man vill använda sig av bilder i Axure så finns det flera olika sätt att gå tillväga för att åstadkomma det. Vi kommer att visa fyra olika sätt.

1. Man kan till exempel infoga en bild genom att dra in den i Axure direkt från sina dokument på datorn. Bilden kommer då att infogas direkt på sidan i sin verkliga storlek.

2. Ett annat sätt att infoga bilder i Axure är att först infoga en image-widget som finns i biblioteket.

Dubbelklicka på image-widgeten eller högerklicka på den och tryck “Import Image…” för att öppna filhanteraren på din dator och välj bild att infoga. Den kommer då att hamna på den plats där widgeten placerats, men inte i rätt skala (om inte bilden är exakt så stor som widgeten är). Du får då ändra storlek manuellt genom att antingen dra i hörnen och hålla inne Shift för att behålla bildens form, eller kan du genom att använda Style-menyn skriva in de mått och placering som önskas för bilden.

Om du vill att din bild ska bli samma storlek som widgeten du redan placerat ut så ska du dubbelklicka på handtagen i widgetens hörn så att de byter färg från gult till vitt och sedan infoga din bild. På så sätt så kommer bilden få samma storlek och placering som din widget har. (Storleken på widgeten är självklart också justerbar.)

3. Man kan också kopiera och klistra in bilder i Axure från internet eller direkt från datorn.

4. Det går även att trycka på Insert > Image för att klistra in en bild från din dator.

Vill man infoga en stor bild kommer Axure att föreslå en optimering för att minska filstorleken på bilden och därmed Axure-filen.

När en bild är infogad går den att justera på många olika sätt. Det går att justera färger, kontrast o.s.v. Detta gör du i Style-menyn. Du trycker sedan på “Adjust color” för att komma dit.

Vill man ändra form på bilden går det att använda verktygen “slice” eller “crop”. Dessa befinner sig bredvid knappen för “adjust color”.

Vill man använda en bild som knapp kan man t.ex. infoga en Button-widget och fylla den med en bild. Du kan också lägga till interaktioner direkt på bilden som gör bilden till en typ av knapp.

Ljud: För att lägga tid en ljudfil i Axure så skapar du en knapp och tilldelar knappen en interaktion. Du kan även följa instruktionerna för video nedan för att lägga in ett ljud.

Interactions > New interaction > Click or tap > Open link > Link to > External URL , klistra sedan in din http länk I fältet > More options > Open in > Pop-up window.> Ok. Klicka på preview för att se ditt resultat.
https://ia800109.us.archive.org/19/items/cinnamonsounds/5-launch.mp3

Video: För att använda en video från till exempel youtube så måste du först bädda in den vilket du gör genom att du går in på din video och klickar på dela > bädda in > och sedan kopierar du http-länken och klistrar in den enligt nedan.

https://www.youtube.com/embed/YqQx75OPRa0

För att lägga till en video i ditt Axure dokument så lägger du först in en Inline frame som finns i biblioteket och gör den till lämplig storlek.

Högerklicka > Toggle borders.
Högerklicka > Scrollbars > Never scroll.
Högerklicka > Preview image > Video.
Högerklicka > Frame Target > Link to external URL, klistra in inbäddad länk till din video.
Klicka på preview för att se ditt resultat.