Axure tutorial voor pinautomaat demo

Tutorial Axure voor Ontwerpen van Interactieve Producten
Deze handleiding is gebaseerd op Axure RP Pro 7.0. Een probeer-versie van Axure die 30 dagen werkt
kan je downloaden via axure.com/download. Een permanente licentie is te verkrijgen via de docent.
Axure is een hulpmiddel voor het maken van prototypes van oa. applicaties en websites. Je kan via
de website axure.com/learn snel leren hoe het pakket werkt. Wij hebben als voorbeeld een
Nederlandstalige tutorial gemaakt waarin we een eenvoudig prototype maken van een pinautomaat.
De pinautomaat zou er bijv. uit kunnen zien als onderstaande afbeelding. Je kan het resultaat, de
interactieve demo, hier bekijken en uitproberen.
De focus van deze tutorial is het realiseren van de interactie, en niet op vormgeving of ergonomie.
Voor het volgen van deze tutorial is geen kennis van Axure vereist. Deze tutorial behandeld echter
niet alle mogelijkheden. Via axure.com/learn kan je meer leren als dat nodig is.
1
Tutorial Axure voor Ontwerpen van Interactieve Producten
De handleiding bestaat uit tien stappen:
1. Maak het hoofd-display met een welkomsttekst............................................................................ 3
2. Maak pas en sleuf en realiseer invoer van de pas in de sleuf ......................................................... 5
3. Invoer PIN code. ............................................................................................................................ 10
4. Controle pincode ........................................................................................................................... 14
5. Keuze bedrag ................................................................................................................................. 17
6. Uitvoer van geld ............................................................................................................................ 20
7. Stoppen na uitgifte geld en afbreken mogelijk maken ................................................................. 22
8. Verkeerde interacties voorkomen................................................................................................. 24
9. Vormgeving interface .................................................................................................................... 25
10. Exporteren naar HTML ................................................................................................................ 27
Start
Bij starten van Axure of bij het maken van een nieuw
document worden drie pagina's gemaakt die je in de
Sitemap aan de linkerkant ziet:
Voor dit prototype gebruiken we maar 1 pagina, dus je
mag Page 2 en 3 verwijderen door ze te selecteren en op
Delete
te drukken.
Als je hulplijnen handig vindt bij het tekenen van vormen,
kan je dit aanzetten via Arrange > Grid and Guides >
Show Grid. Daar vindt je ook instellingen voor het grid.
Via Create Guides kan je daar kolommen instellen die je
helpen met de layout, bijv. een layout van 960 pixels
breed met 12 kolommen.
2
Tutorial Axure voor Ontwerpen van Interactieve Producten
Stap 1. Maak het hoofd-display: een Button Shape met een
welkomsttekst en de naam "Maintext".
We tekenen eerst de Button Shape: klik (met de linker
muisknop) in de lijst met Widgets op Button Shape, houd de
muisknop ingedrukt en sleep de Button Shape naar het
tekengebied.
Plaats de Button Shape bovenaan, zodat je genoeg ruimte er
onder overhoudt voor het cijfer-panel etc.
Door te trekken aan de puntjes kan je de grootte instellen, zie
hier onder.
Geef 'm ongeveer dezelfde afmetingen als onderstaande
voorbeeld: in het grijze vlakje ernaast zie je de positie (x en y) en
de afmetingen (w en h).
Dubbelklik op de tekst "ACTION" om deze te wijzigen in "Welkom bij IO Bank, voer uw pas in aub.".
De achtergrondkleur van de Button Shape maken we lichtblauw via het Fill Color icon in de werkbalk:
3
Tutorial Axure voor Ontwerpen van Interactieve Producten
Via de instellingen voor het lettertype boven aan in de werkbalk kan je deze wijzigen:
We gebruiken hier een Bold 18 punts Arial font.
Eea. ziet er nu zo uit:
Als laatste stellen we de naam van dit widget in op "Maintext". Zorg
dat het widget is geselecteerd. Type de naam in het veld bij "Widget
interactions and notes" aan de rechterkant.
Sla je werk op door op Save
regelmatig te doen.
te klikken. Het is verstandig dit
4
Tutorial Axure voor Ontwerpen van Interactieve Producten
Stap 2. Maak de pas en de sleuf voor de pas en realiseer invoer van de pas in de sleuf.
We tekenen de pas en de sleuf, dit zijn beide Button Shape's. Plaats de pas helemaal aan de linker
kant. Stel de breedte in op 70, pas de achtergrondkleur aan (Fill Color) en verander de tekst in "Pas".
Plaats de sleuf rechts onder het hoofd-display, maak deze 20 pixels breder dan de pas, dus 90.
Geef de widgets de naam "Pas" en "Sleuf".
We gaan nu de interactie van de pas met de sleuf programmeren. Selecteer de pas. Dubbelklik bij
"Widget interactions and notes" op "OnClick":
De Case Editor verschijnt. Hier kunnen we beschrijven wat er moet gebeuren als er op het widget
geklikt wordt. We noemen deze case "Pasinvoer". We gaan de pas verplaatsen, dus kiezen we
"Move", "This Widget" en "To":
5
Tutorial Axure voor Ontwerpen van Interactieve Producten
Om te zorgen dat de pas naar de sleuf beweegt, moeten we in plaats van (0,0) zorgen dat daar de
positie van de sleuf komt. Klik daarvoor op "fx" achter de x-positie rechts onderin het scherm:
Fx betekent dat we een functie gaan gebruiken voor het
bepalen van die positie. We moeten om de positie van de
sleuf te kunnen gebruiken, deze toevoegen als een lokale
variabele. Klik op Add Local Variable, geef deze de naam
"Sleuf", kies acher het = teken voor "Widget" en kies daar
weer achter het widget "Sleuf". (we gaan ervan uit dat je
de sleuf de naam "Sleuf" gegeven hebt!)
Lokale variabelen zijn variabelen die
alleen binnen een widget of
interactie beschikbaar zijn. Globale
variabelen zijn in de hele pagina of
applicatie beschikbaar.
Nadat je dit gedaan hebt kan je in het gedeelte erboven de positie opvragen. Als er al iets staat in het
bovenste gedeelte, verwijder dat dan. Klik daar op Insert Variable or Function en kies de Local
Variable "Sleuf":
6
Tutorial Axure voor Ontwerpen van Interactieve Producten
Hierna staat er in het tekst veld:
Maak hiervan:
Hiermee wordt de waarde gelijk aan de waarde van de x-positie van de Sleuf plus 10 (pixels). De pas
komt dan in het midden van de sleuf ((90-70)/2).
Druk op Ok om de waarde op te slaan. Herhaal deze procedure voor de y-positie:
Als je dit ook voor de y-positie hebt ingesteld kan je de Case Editor afsluiten met Ok.
Als het goed is ziet de geprogrammeerde Widget interactie van de Pas er zo uit:
We gaan dit nu testen. Druk op het Preview icon bovenaan in de werkbalk:
Als het goed is wordt nu de pagina in een webbrowser getoond. Als je nu
de Pas klikt, zal deze naar de sleuf toe bewegen:
7
op
Tutorial Axure voor Ontwerpen van Interactieve Producten
Er zijn nog een paar details die eea. mooier maken:
De pas moet boven de sleuf komen, zodat het lijkt of deze er in zit. Dit doen we door deze naar de
voorgrond te brengen. Klik de Pas aan met de rechter muisknop en kies Order, Bring to Front:
De pas moet met een mooie animatie naar de sleuf toe bewegen. Dubbelklik op Move This to ... bij
de Interactions:
En pas de animatie aan naar swing:
Eindig met Ok. Sla het document op. Test eea. opnieuw in de browser (je hoeft dan niet weer op het
Preview icon te klikken: na een Save kan je ook de browser verversen om de nieuwe versie te zien).
8
Tutorial Axure voor Ontwerpen van Interactieve Producten
Tenslotte voegen we een tweede animatie toe die de pas in de gleuf laat verdwijnen. Zorg dat de pas
geselecteerd is, dubbelklik bij Interactions op Pasinvoer om de Case Editor te starten.
Kies voor Hide, This Widget en een Slide-up animatie van 1000ms (1 sec, dan is de animatie goed
zichtbaar):
En pas de tekst in het hoofd-display (Maintext) aan met de tekst: "Voer uw PIN code in aub. en druk
op OK."
Sluit de Case Editor met Ok en test de pagina in de browser.
9
Tutorial Axure voor Ontwerpen van Interactieve Producten
Stap 3. Invoer PIN code.
De pincode zal worden ingevoerd met cijfertoetsen die
worden aangeklikt. Zie de knop hiernaast. Voeg eerst 1
toets van de cijfer toetsen toe. We maken deze
helemaal af, en kopiëren hem daarna. Gebruik ook hiervoor de
Button Shape. Stel de vormgeving in zoals jij vindt dat een cijfertoets er uit moet zien en maak van de tekst een "1". Geef de knop
de naam "BtnPin".
Omdat een knop een interactief element is, kan je bij de
Interaction Styles bijvoorbeeld aangeven dat de knop moet
oplichten als erop gedrukt wordt. De Interaction Style stel je in
door de knop met de rechtermuisknop aan te klikken en
Interaction Styles te kiezen. Hiernaast zie je hoe bij een
MouseDown de Fill Color is ingesteld. Daarmee zal de knop
lichtblauw worden als de muisknop wordt ingedrukt.
We gaan nu een globale variabele toevoegen waarin de waarde
van de ingevoerde pincode terecht komt. Een globale variabele is
een variabele die overal in de hele pagina, in alle widgets en
interacties, beschikbaar is.
Selecteer de cijferknop (BtnPin).
Dubbelklik onder Widget Interactions and Notes op OnClick om
een Interactie te definiëren voor de BtnPin:
Voeg in de Case Editor een regel toe om een variabele een waarde te geven ("Set Variable Value") en
noem de Case "Opslag pincode" (zie volgende pagina).
10
Tutorial Axure voor Ontwerpen van Interactieve Producten
Klik rechts boven op "Add variable" en voeg
vervolgens de variabele toe via het groene
plusje. Noem de variabele pincode_invoer
en druk op Ok.
Selecteer daarna de variabele om hem een
waarde te kunnen gaan geven:
We gaan nu een trucje doen om de waarde van de variabele pincode_invoer te vermeerderen
met de waarde van de knop. De waarde van de knop staat op de knop, en is hetzelfde als de tekst op
het widget. We doen dat op deze manier omdat we dan straks alleen maar de knoppen hoeven te
kopiëren en de tekst op de knoppen hoeven aan te passen. We hoeven dan niet per knop de hele
interactie opnieuw te programmeren.
Druk in de Case Editor op fx:
Druk op Add Local Variable en laat deze variabele definitie zoals deze is:
11
Tutorial Axure voor Ontwerpen van Interactieve Producten
Hiermee krijgt de lokale variabele LVAR1 de waarde van de tekst op het widget (in dit geval "1").
Druk dan op Insert Variable or Function... en kies eerst de variabele pincode_invoer. Druk dan
nogmaals op Insert Variable or Function... kies dan LVAR1:
In het tekstveld er onder staat nu:
Druk op Ok.
Testen.
Het kan ook handig zijn om te kunnen zien wat de ingevoerde waarde van
bijvoorbeeld de pincode is. Voeg daarvoor een Label toe. Plaats het
helemaal aan de linkerkant, bijvoorbeeld onder de pas. Geef het Label als
Shape Name "DebugPIN" en stel de tekst in:
We voegen nu een tweede actie toe aan de cijferknop (BtnPin) waarmee we de
ingevoerde pincode in het label "DebugPIN" weergeven. Dit gebruiken we om te
testen: hiermee geven we de ingevoerde pincode weer op het scherm en kunnen daarmee zien of de
invoer correct verloopt.
12
Tutorial Axure voor Ontwerpen van Interactieve Producten
Via de fx-knop stellen we de waarde in op:
Sluit af door twee keer op Ok te klikken en test de pagina in de browser.
Als het goed is wordt als je op de 1-knop drukt de getoonde pincode vermeerderd met 1.
We kunnen nu de gemaakte knop kopiëren, in de gewenste layout
plaatsen en de teksten op de toetsen aanpassen:
Test de pagina opnieuw. Wordt de pincode goed weergegeven?
Met wat je nu geleerd hebt zou je zelf een correctie-toets toe
kunnen voegen, die de ingevoerde pincode wist zodat opnieuw
begonnen kan worden. Denk eraan dat hiervoor twee acties
nodig zijn: het leegmaken van de variabele pincode_invoer en het
(opnieuw) weergeven van de waarde in het label DebugPIN.
Er mag geen pincode ingevoerd worden als de pas nog niet is ingevoerd.
Daarom kan je de pincode wissen (leeg maken) nadat de pas is ingevoerd. De interactie daarvoor kan
je toevoegen aan de pas.
13
Tutorial Axure voor Ontwerpen van Interactieve Producten
Stap 4. Controle pincode.
We voegen eerst twee knoppen toe onderaan naast het hoofd-display, 1 voor Afbreken/Stoppen en
een Ok-knop. Ook voegen we Labels toe die op het scherm worden weergegeven:
Noem de linker knop BtnScrn4 en de rechter BtnScrn8 (er komen straks meer knoppen boven).
Noem de Labels LblStop en LblOk. Denk ook aan het instellen van de Interaction Style.
We zorgen ervoor dat de Labels pas zichtbaar worden als er om een pincode wordt gevraagd. Onder
het tekengebied kunnen we Page Interactions instellen. Hier stellen we in dat bij het laden van de
pagina de labels verborgen worden. Dubbelklik op OnPageLoad:
Noem de Case "Instellen bij laden pagina". Selecteer onder
Widgets "Hide" en selecteer beide widgets LblStop en LblOk.
Sluit af met Ok.
Selecteer nu de pas. Dubbelklik bij Interactions op Pasinvoer en
zorg dat de widgets LblStop en LblOk hier weer met "Show" zullen worden weergegeven.
Nu kunnen we als op de Ok-knop wordt gedrukt de pincode gaan controleren. Selecteer de Ok-knop
(BtnScreen8) en dubbelklik bij Interactions op "OnClick" om de Case Editor te starten. Noem de Case
"PinCheck". Druk op de knop Add Condition:
In de Condition Builder die dan verschijnt stel je de conditie in zodat gecontroleerd wordt of de
waarde van de variabele pincode_invoer gelijk is aan "1234". We gebruiken hier (voor de demo) de
waarde "1234" als goede waarde voor de pincode.
Druk op Ok om de Condition Builder af te sluiten.
De volgende actie die we toevoegen wordt dus alleen uitgevoerd als de conditie waar is (dus als de
pincode de goede pincode is).
Deze actie is het starten met het kiezen van het te pinnen bedrag. We geven hier alleen de nieuwe
tekst weer in het hoofd-display. De rest wordt in de volgende stap uitgelegd.
14
Tutorial Axure voor Ontwerpen van Interactieve Producten
De actie die we moeten toevoegen is het weergeven van de tekst "Kies bedrag en druk op Ok.". Dit
doen we met een "Set Text" actie:
Als de ingevoerde pincode niet juist was, geven we de boodschap "PIN was incorrect. Probeer
opnieuw." weer en wordt de variabele pincode_invoer weer leeg gemaakt. Let op: hiervoor
voegen we een nieuwe Case toe aan de Ok-knop (Btnscreen8) door met de rechter muisknop op
OnClick te klikken:
Dit wordt dan automatisch een "else" conditie:
Met de conditie "Else If True" zeg je dus dat als de vorige conditie niet waar was, je deze conditie
gaat uitvoeren (net als met een if () ... else ... statement in Java).
In deze case stellen we de Maintext in met de juiste boodschap en maken we de variabele
pincode_invoer leeg (dit laatste wordt niet weergegeven hierboven).
De totale interactie voor de Ok-knop (BtnScreen8) ziet er dan zo uit:
15
Tutorial Axure voor Ontwerpen van Interactieve Producten
Test de pagina voor je verder gaat.
16
Tutorial Axure voor Ontwerpen van Interactieve Producten
Stap 5. Keuze bedrag.
Voor het mogelijk maken van het kiezen van een vast bedrag voegen we de resterende knoppen en
labels toe. Maak voordat je dit doet eerst 1 knop inclusief de interacties, bijvoorbeeld de knop
waarmee het bedrag 20 gekozen wordt:
Noem deze BtnScreen1 en geef 'm als tekst "20". We gaan deze tekst in een globale variabele
stoppen. De tekst wordt later verborgen, want van een pinautomaat zijn de knoppen naast het
scherm niet voorzien van tekst.
Selecteer de knop BtnScreen1 en dubbelklik bij Interactions op OnClick. Zie afbeelding hier onder.
Stel de Case Name in en kies Set Variable Value. Maak via Add variable een nieuwe globale variabele
en noem deze "bedrag". Druk op fx, maak een local variable met als waarde 'text on widget' en insert
die bij Insert Variable or Function. (Deze procedure is bij stap 3 uitgebreid uitgelegd voor de pincode)
Voeg nu aan de actions nog een actie toe die in het hoofd-scherm (Maintext) het gekozen bedrag
weergeeft:
17
Tutorial Axure voor Ontwerpen van Interactieve Producten
Voeg nu de overige knoppen toe, door deze te kopiëren van BtnScreen1. Geef elke knop als tekst
het bijbehorende bedrag. Dus de tweede knop krijgt de tekst "50", de 3e "70", enz. Maak daarna
deze tekst onzichtbaar door deze 6 knoppen te selecteren en bij de teksteigenschappen de fontkleur
'geen kleur' te kiezen:
Eea. ziet er dan zo uit:
18
Tutorial Axure voor Ontwerpen van Interactieve Producten
Geef de twee nieuwe knoppen aan de linkerkant de namen BtnScreen2
en 3, en die aan de rechter kant BtnScreen5 tm. 7. Geef ook alle labels
zinvolle namen, bijvoorbeeld het label "20" Lbl20 enz.
Zorg ervoor dat alle labels bij de Page Interactions, OnPageLoad verborgen
worden.
Bij de Ok-knop (BtnScreen8) moeten we nu nog zorgen dat de labels van
de bedragen weer zichtbaar worden. Selecteer de knop en dubbelklik op
de PinCheck case. Kies Show en selecteer de zes labels Lbl20 tm. Lbl200.
Test of het gekozen bedrag wordt weergegeven.
19
Tutorial Axure voor Ontwerpen van Interactieve Producten
Stap 6. Uitvoer van geld.
Als nu op de Ok knop gedrukt wordt, hebben we een probleem, de interacties die daar aan hangen
zijn nog van het invoeren van de pincode.
We kunnen onderscheid maken tussen deze twee fasen in het proces door te kijken naar de variabele
bedrag. Heeft deze een waarde (groter dan nul), dan zitten we in de fase voor uitvoer van het geld.
We gaan daarom na de fase daarvoor (invoer pin) de variabele bedrag op nul zetten.
Selecteer de Ok-knop (BtnScreen8) en voeg bij zowel de PinCheck als de PinFout interacties een
actie toe die de globale variabele bedrag op nul zet:
Nu kunnen we aan deze knop een nieuwe Case toevoegen die als conditie heeft 'als waarde bedrag >
0'. Is dat het geval, dan zijn we in de fase voor het uitvoeren van het geld beland.
Klik op OnClick met de rechter muisknop en kies Add Case:
Stel de case in zoals hieronder weergegeven. Druk op Add Condition om de conditie in te stellen.
Geef in het hoofd-display de melding "Uitgifte geld...".
Sluit de Case Editor.
De volgorde van de Cases klopt nu niet. Pas deze aan door de nieuwe Case "Uitgifte geld" naar boven
te verplaatsen.
Dat kan door deze aan te klikken met de rechter muisknop en Move Case Up te kiezen.
Klik de Case nu hij bovenaan staat nogmaals aan met de rechter muisknop en kies "Toggle IF/ELSE
IF". Hiermee maak je het complete if-statement kloppend.
Zie afbeelding hier onder.
20
Tutorial Axure voor Ontwerpen van Interactieve Producten
We kunnen nu een animatie maken van een biljet dat uit een sleuf komt.
Kopieer de sleuf van de pasinvoer en noem deze SleufUitgifte. Maak 'm
iets breder. Plaats nu een nieuwe Button Shape in deze sleuf en zorg dat
die op een bankbiljet lijkt:
Geef de nieuwe Button Shape de naam "Biljet". Zorg dat het biljet
verborgen wordt als de pagina geladen wordt (bij Page Interactions,
OnPageLoad).
Selecteer de Ok-knop (BtnScreen8) en dubbelklik op de Case "Uitgifte
geld". Voeg daar een actie toe die "Biljet" toont (Show) met een Slide
down-animatie van 1000ms. Voeg nog een actie toe die de waarde van het gekozen bedrag op het
biljet laat zien. Dat kan door een Set Text te doen, met een waarde (via de fx knop) van de globale
variabele bedrag.
De actie Uitgifte geld komt er dan bijvoorbeeld zo uit te zien:
21
Tutorial Axure voor Ontwerpen van Interactieve Producten
Stap 7. Stoppen na uitgifte geld en afbreken mogelijk maken.
We laten nadat de animatie van de gelduitgifte klaar is na een korte wachttijd de interface
terugkeren naar de uitgangssituatie.
Selecteer de Ok-knop (BtnScreen8) en dubbelklik op de Case "Uitgifte geld". Voeg in de Case Editor
een actie toe om te wachten, deze staat helemaal onderaan in de lijst met acties onder het kopje
"Miscellaneous". Stel de wachttijd in op 5 seconden: dat is 5000 ms.
Om terug te gaan naar de uitgangssituatie kunnen we de pagina weer terugbrengen in de
oorspronkelijke staat, door een Reload van de pagina te doen. Dat kan door een link te openen in het
huidige window. De actie daarvoor kan je vinden onder Links, Open link:
Druk op Ok om de Case op te slaan en test of na 5 seconden de interface terug gaat naar de
uitgangssituatie.
Als je nadat is teruggegaan naar de uitgangssituatie direct op de Ok-knop drukt, zal je zien dat er
direct geld uitgegeven wordt... dat is natuurlijk niet de bedoeling. Dit komt omdat de globale
variabelen nog hun waarde hebben. We gaan die dus in de begin situatie een waarde geven. Dat kan
bij de Page Interactions:
22
Tutorial Axure voor Ontwerpen van Interactieve Producten
Dubbelklik daar op "Instellen bij laden pagina" om de Case Editor te openen. Voeg daar de actie "Set
Variable Value" toe, kies de variabele bedrag en geef deze de waarde "0" (nul). Stel op dezelfde
manier de variabele pincode_invoer in met een lege waarde (niets invullen bij value):
Hiermee zou als het goed is een verkeerde uitgangssituatie moeten worden voorkomen. Als je dit
test zie je dat het nog mogelijk is om op de Ok-knop te drukken: je krijgt dan de melding dat de
pincode incorrect is. We gaan dit probleem in de volgende stap oplossen.
Tot nu toe hebben we niets gedaan met de knop Afbreken/Stoppen. Een simpele invulling hiervan is
dat wordt teruggegaan naar de uitgangssituatie. Dit hebben we net gedaan als afsluiting na de
uitgifte van het geld. Voeg nu dezelfde Reload-actie toe aan de knop voor het Afbreken/Stoppen.
Selecteer de knop (BtnScreen4) en dubbelklik op OnClick bij de Widget Interactions en voeg een
Reload-actie toe net als hierboven.
23
Tutorial Axure voor Ontwerpen van Interactieve Producten
Stap 8. Verkeerde interacties voorkomen.
Zoals in de vorige stap is gemerkt kan het voorkomen dat ergens op geklikt kan worden terwijl dat
(nog) niet de bedoeling is. We hebben dat al deels opgelost door te zorgen dat variabelen bij het
starten een goede waarde hebben en waardes worden gecontroleerd.
Het aanklikken van widgets die eigenlijk nog niet gebruikt mogen worden kan je daar echter niet mee
voorkomen. Een oplossing hiervoor is om zo'n widget bij het starten op disabled zetten, en het pas te
enabelen als het widget gebruikt mag worden.
We doen dit voor de Ok-knop (BtnScreen8): Klik dit widget aan met de rechter muisknop en kies
Disabled:
Vervolgens zorgen we dat de knop weer enabled wordt na invoer van de pas: Selecteer de pas.
Dubbelklik op Pasinvoer bij de Interactions. Kies bij de actions onder Widgets, Enable/Disable voor
"Enable" en kies aan de rechterkant de knop BtnScreen8.
24
Tutorial Axure voor Ontwerpen van Interactieve Producten
Stap 9. Vormgeving interface.
We voegen nog een kader toe waarmee we iets duidelijker maken dat de interface een geheel vormt.
Ook voegen we een logo toe.
Teken een Rectangle om de hele automaat heen en zet deze in de achtergrond via het
rechter muisknop menu: Order, Send to Back.
Verzorg de opmaak van dit kader door bijvoorbeeld
achtergrond kleur, rand en afronding van de hoeken in te
stellen.
Je kan bijvoorbeeld een kleurverloop gebruiken als Fill Color
zoals hiernaast afgebeeld.
Via de uitgebreide eigenschappen onder Widget Properties
and Style rechts onderin kan je bijv. ook nog de Corner
Radius instellen om het kader afgeronde hoeken te geven.
Zie de schermafbeelding op de volgende pagina.
25
Tutorial Axure voor Ontwerpen van Interactieve Producten
We voegen nog een plaatje toe als logo van de automaat. Sleep een Image naar de plek
waar je het wil hebben. Dubbelklik om het bestand te openen waarin het plaatje staat.
Daarna wordt gevraagd of je autosize wil gebruiken. Kies je Yes, dan wordt de afbeelding
in zijn originele grootte in de pagina gezet. Kies je Nee, dan blijft de afbeelding zo groot als
die was, en wordt het plaatje geschaald.
Een voorbeeld van het eindresultaat:
26
Tutorial Axure voor Ontwerpen van Interactieve Producten
Stap 10. Exporteren naar HTML.
Via Publish, Generate HTML Files kan je de gemaakte pagina als HTML file opslaan. Hierna kan je de
pagina(s) bijvoorbeeld op een website publiceren (je moet dan de hele map met gegenereerde
bestanden uploaden). Ook kan dit handig zijn om de pagina op deze manier aan gebruikers of testers
aan te bieden.
De pagina met de pinautomaat kan je vervolgens terugvinden in home.html. Mocht je deze pagina
scherm vullend willen weergeven dan kan dat met de F11 toets van de browser.
Als je verder wil met de HTML-code kan je alle widgets gemakkelijk terugvinden in de HTML code, de
namen van de widgets zijn namelijk terug te vinden als commentaar en hebben het HTML attribuut
data-label:
27

Download Report