| Wenn man ähnliche Prototypen baut, gibt es viele Elemente, die sich oft wiederholen. Idealerweise hat man dafür eine Bibliothek, aus der man die Elemente zieht. In diesem Tutorial soll es darum gehen, wie sich diese Elemente in Widgets für eine eigene Bibliothek (Library) festhalten lassen und woher man bereits vorgefertigte Libraries bekommt. |
- Axure Version: 8.0
- Level: Advanced
- Dauer: 20 min
- Themen: Axure Advanced, Widget Library, Eigene Widgets
|
Preview:
Das Konzept
In Axure hat man bereits alle Standart-Elemente aus einer Default Widget Library. Du kannst allerdings auch deine eigene Library mit eigenen vorgefertigten Elementen bauen. Die selbst erstellten Widgets können dabei beliebig komplex werden. Der große Vorteil: Damit wird Axure so simpel wie das Zusammenstecken von Legosteinen. Alle Interaktionen, Styles und Variablen, die du benutzt, können beim Benutzen der Library automatisch importiert werden.
1 Vorbereitung
Um eine neue Library anzulegen, gehe unter dem Fenster Widget auf das Symbol mit den drei Strichen (Bugersymbol). Dort wähle Create Library….
Eine neue Library anlegen
2 Eigene Widgets erstellen
Nachdem du auf Create Library… geklickt hast, wirst du gefragt, wo deine Library gespeichert werden soll. Standardmäßig wird hier dein Nutzerverzeichnis angegeben, in dem es bereits einen Ordner namens ‚Library‘ gibt. Hast du das Verzeichnis festgelegt, öffnet sich ein komplett neues Fenster, das erstmal so aussieht, als ob du einen neuen Prototypen erstellst. Der kleine Unterschied ist, dass das File-Symbol nicht mehr blau, sondern grün ist. Außerdem heißt die Sitemap nun Custom Widget Library, die Page Notes nun Widget Notes und der Page Style nun Widget Properties umbenannt wurden.
Entwicklungsumgebung für eine Widget Library
Wichtig: Statt Seiten baust du jetzt einzelne Widgets, die du beim Bau eines Prototypen aus deiner Library ziehen kannst. Um weitere Widgets hinzuzufügen, klicke im Bereich Custom Widget Library auf folgendes Symbol:
Ein neues Widget hinzufügen
Wir wollen nun aber das erste Widget mit dem Namen ‚New Widget 1‘ bearbeiten. Führe dazu einen Doppelklicke auf ‚New Widget 1‘ im Bereich Custom Widget Library.
Füge beispielhaft ein Heading 1, ein Image und ein Horizontal Line Element hinzu.
Beispielhaftes Custom Widget Element
Um die Veränderung in deiner Library anzuzeigen, speichere deine Widget Library (Shortcut cmd+s / str + s) und gehe zurück in deinen Prototypen, bei dem du Create Library… ausgewählt hast.
Dort klicke nun, wieder im Bereich Widgets, auf das Burgersymbol. Diesmal wähle Refresh Library. Es sollte nun deine Widget Library mit deinem ‚New Widget 1‘ zu sehen sein.
Custom Widget Library im Prototypen
Du kannst nun dieses selbst erstellte Widget benutzen wie jedes andere Widget von Axure. Möchtest du die Default Library wieder sehen, klicke unter dem Bereich Widgets auf Select Library und wähle All Libraries oder Default.
Andere Library auswählen
3 Zusätzliche Optionen für eigene Widgets
Wie bereits erwähnt, haben sich die Page Notes und der Page Style umbenannt und ermöglichen spezielle Optionen für die eigenen Widgets.
Unter Widget Properties kannst du die Optionen Use the thumbnail oder Custom Icon auswählen. Wählst du Custom Icon kannst du ein eigenes Bild für die kleine Darstellung in dem Bereich Widgets in deinem Prototypen festlegen. Selektierst du Use the thumbnail, wird immer ein verkleinertes Abbild deines erstellten Widget angezeigt.
Schreibst du etwas in dem Feld unter Tooltip (in the Widgets pane), wird dir dieser Text als Information zu deinem Widget in der Library angezeigt.
Widget Notes
Widgetbeschreibung zum eigenen Widget
4 Widget Library strukturieren
Ähnlich wie das Organisieren von Seiten in einem Prototypen, kannst du deine eigenen Widgets in Ordnern organisieren. Nutze dazu das Ordner-Symbol im Bereich Custom Widget Library, um einen Ordner hinzuzufügen. Per Drag and Drop oder mit den Pfeilen kannst du die Hierarchie verändern.
Achte darauf, dass du die Widgets auch tatsächlich in Ordnern angeordnet hast.
Durch Ordner in deiner Widget Library werden Trennlinien zwischen Widgetgruppen angezeigt.
Darstellung der Library mit 2 Ordnern mit jeweils einem Widget
5 Widget Library laden
Es ist auch möglich bereits fertige Widget Libraries in Axure zu integrieren. Klicke auf Download Libraries…, um schnell Libraries zu finden und herunterzuladen.
Es öffnet sich daraufhin die Seite http://www.axure.com/community/widget-libraries in deinem Browser.
Eine Library über axure.com downloaden
Hier gibt es Links zu kostenlosen und kostenpflichtigen Libraries. Dies erkennst du an dem ($)-Symbol hinter der Überschrift. Schau dir aber die Libraries genau an, denn viele kostenlose und kostenpflichtige Libraries sind unserer Meinung nach nicht brauchbar.
Kostenlose und kostenpflichtige Library
Achte vor dem Laden einer Library darauf, dass der Haken bei Always Import Fields, Sytles, and Variables gesetzt ist.
Alle Felder, Sytles und Variablen importieren
Möchtest du eine vorhandene Library laden, gehe auf Load Library… und wähle die Datei aus.
Eine Library laden
Möchtest du eine Library nicht mehr in der Auswahl haben, selektiere die entsprechende Library und gehe anschließend unter dem Menü des Burgersymbols auf Unload Library.
Eine Library entfernen
