Axure ist nicht nur statisch, sondern kann auch mit externen Inhalten angereichert werden. Hier als Beispiel eine Integration von Google Maps.
1. Einen Inline-Frame einfügen
2. für den Frame ein Default Target einrichten:
3. Selbstverständlich muss man den einzubettenden Inhalt vorher mal vorbereiten. Bei Google Maps gibt’s ja die Möglichkeit, sich einen Kartenausschnitt als iframe generieren zu lassen. Danach packt man den Code in ein HTML-File uns lädt es irgendwo rauf. Wichtig: da wir das ganze bündig einbetten wollen, sollte im HTML-File kein Rand vorhanden sein. HTML-File ansehen
4. Bei den Link Properties in Axure das soeben generierte externe File angeben. Damit dies auch von überall her verwendet werden kann (z.B. auch vom Kunden aus), sollte kein lokales File verwendet werden.
5. Den Google iFrame Code haben wir beispielshalber auf 200×200 Pixel eingestellt. Diese Masse werden nun auch auf den Frame in Axure übertragen:
6. Da das ganze bündig und ohne Scrollbalken daherkommen soll, schalten wir den Border aus und stellen Never Show Scrollbars ein.
7. Fertig!
Beispiel online ansehen
Axure-File zum Download
Software
ajax, axure, beispiel, google maps, iframe
Mit der steigenden Verbreitung von AJAX-basierten Websites kommt sicher auch die Frage auf, wie man solche Verhaltensweisen (z.B. Nachladen eines Teils einer Seite) in Axure nachbauen kann.
Der Nachteil an Abläufen in Axure ist, dass man zwar auf eine bestimmte Zeit hin timen kann, jedoch nur einmal. Das heisst, Abläufe wie “warte 0.5 Sekunden - zeige Panel 2 - warte nochmal 0.5 Sekunden - zeige Panel 3″ sind nicht möglich. Jedenfalls nicht ohne Hack.
Beispiel: Folgende Applikation soll gebaut werden. Ich gebe einen Wert in ein Formular ein, drücke einen Knopf und im Hintergrund wird der Wert verschickt (was mir auch angezeigt wird). Dann soll die Bestätigung des Versands angezeigt werden.
1. Wir erstellen in Axure ein dynamisches Panel und definieren 3 Stati:
2. Start Panel = das Formular im Anfangsstadium. Der Absenden-Button zeigt auf Panel-Status Nr. 2 ‘in progress’
3. in progress Panel = der AJAX-alike Teil. Wir erstellen zuerst mal die Ansicht, welche der Benutzer sehen soll, nachdem er auf den ‘absenden’-Button gedrückt hat:
4. Jetzt beginnt die Magie: über das ‘in Progress’-Bild packen wir eine Imagemap und versehen sie mit einem Onmouseout-Event. Wenn ich also mit der Maus aus dem Bereich fahre, wartet das System 0.5 Sekunden und leitet mich zur Ergebnisseite weiter.
5. Nun fehlt nur noch die Ergebnis-Seite, welche das Ganze abschliesst.
6. Fertig!
Beispiel ansehen
Axure File zum Download
Software
ajax, axure, beispiel
Die mit Microsoft Office 2007 lancierten Ribbons können sicherlich als - wenn auch polarisierende - Innovation angesehen werden (ein interessanter Vortrag zur Entstehungsgeschichte der Ribbons findet sich bei Jensen Harris vom Office User Experience Team ). Jahrelang hat man sich an die Dropdown-Menüs gewöhnt, und auf einmal sind die Funktionen nicht mehr dort, wo man sie während eben diesen Jahren jeweils gefunden hat. Hier springen nun die ´Search Commands´ in die Bresche:
Die von Microsoft Office Labs entwickelte Suchfunktion listet nach Eingabe eines Keywords alle Begriffe auf, welche dies beinhalten. Mit den Tasten [WIN] + [Y] gelangt man von jeder Ansicht direkt aufs Suchfeld. Das ganze gibt’s vorläufig für die englischen Varianten von Word, Excel und PowerPoint.
Download und Infos
[via Lifehacker]
Allgemeines, Software, Vortrag
befehle, commands, microsoft, office, ribbons, search, suchen, user experience
Recent Comments