Eddy Boeve op 06-10-2015

20 Ultieme Tips voor Axure RP: Tip 2 - Gebruik Styles

Axure RP is een prachtige rapid prototyping tool, misschien wel de beste in de wereld. Maar het kost zeker in het begin nogal wat tijd om alle handigheden onder de knie te krijgen. En sommige leer je alleen van de meer ervaren Axure gebruikers. Wij gaan je de komende tijd helpen door 20 superhandige tips te geven. Hier de tweede.

Tip 2: Gebruik Styles

Je kunt veel tijd kwijt zijn in Axure met het aanpassen van de elementen op een pagina aan jouw eigen gekozen huisstijl: kleuren, fouttypes, foutgroottes, paginaopmaak, etcetera. Het helpt enorm als je Styles gaat gebruiken. Net als bij Microsoft Word, kun je stijlen kiezen voor bijvoorbeeld H1’s, paragraafteken, maar ook een button en de achtergrond van een pagina. Door deze stijl aan te passen, pas je elk element (widget, pagina) aan die die stijl heeft. Dat lijkt dus wel een beetje op Masters in Axure, en zal je enorm veel tijd schelen om alle onderdelen op alle pagina’s er netjes hetzelfde er uit te laten zien.

Waarvoor gebruik je stijlen?

Je kunt widget stijlen prima gebruiken voor bijvoorbeeld een blauw onderlijnd linkje. Die kun je ook maken met een “Label” widget uit de default library, die blauw maken en onderlijnen. Maar veel sneller is om een label (of ander stuk tekst) te selecteren en uit de dropdown onder Base Style jouw nieuw gemaakte “tekstlink”-stijl te kiezen! Hetzelfde geldt voor commentaarteksten (bij een ontwerp), knopstijlen, headings, pijltjes, etcetera.

Widget & Page Style Editors

Je vindt de Widget & Page Style Editors vinden in het menu (onder “Project”):

Screen Shot 2015-10-06 at 15.45.29

 

Maar de Widget Style Editor ook in de “Widget Property and Style”-pane onder “Base Style”:

Screen Shot 2015-10-06 at 15.36.59

 

En de Page Style Editor ook in de “Page Style” tab van de pane “Page Properties”:

Screen Shot 2015-10-06 at 15.36.54

Maak een nieuwe stijl aan (“Custom”)

Je kunt eenvoudig een nieuwe stijl aanmaken door op het document-icon met de blauwe “A” en het potloodje te klikken, of op “Widget Style Editor” / “Page Style Editor” in het menu. Daar klik je op het “Custom” tabje, en op de groene “+”:

Screen Shot 2015-10-06 at 15.57.06

 

Stel nu alle stijl-elementen in die je wilt toekennen aan de nieuwe stijl:

Screen Shot 2015-10-06 at 15.59.16

 

Onder aan de stijl-instellingen zit ook een “Copy”-knop, die erg handig is. Hiermee kun je de stijl van een geselecteerd Widget kopiëren in een eigen stijl.

Pas een bestaande stijl aan (“Widget Defaults”)

Je kunt ook de bestaande stijlen in de “Default”-Libary aanpassen:

Screen Shot 2015-10-06 at 16.04.07

Als een widget na aangepast te hebben uit de Library sleept op de canvas, dan heeft het al meteen de nieuwe stijl, erg handig en snel! En ook hier kun je eerst een default element op het canvas slepen, aanpassen wat betreft stijl en die stijl vervolgens kopiëren in de Widget Style Editor (knop onderaan).

Stijlen toepassen

Je kunt een widget selecteren en dan in de dropdown van “Base Style” in het Widget Property and Style-pane de juiste stijl kiezen. Alleen de in de editor aangevinkte stijlen worden aangepast, de rest blijft zoals het was.

Page Styles

Hetzelfde als voor Widgets, gelden stijlen voor pagina’s. Je kunt daar bijvoorbeeld een stijl instellen voor prototypes met een Sketch-effect, zwart-wit en handschrift font:

Screen Shot 2015-10-06 at 16.14.13

Uit de dropdown kun je snel “Prototype” kiezen, als je die pagina “sketchy” wilt maken. En weer terugzetten op “Default” als je klaar bent met de eerste presentatie van je ontwerp en weer verder wilt werken aan de opgemaakte versie in kleur.

Stijlen, Masters en Widgets uit de Library

Er zijn meerdere wegen naar Rome om bovenstaande effecten in Axure te regelen.

  1. Je kunt in plaats van stijlen ook masters maken met de juiste stijl en die in je ontwerp slepen. Maar als je een tekst wilt aanpassen in de master, verandert die overal waar je ‘m gebruikt. En om die tekst alleen lokaal aan te passen, moet je een “break away” doen (rechtermuisknop op widget, kies “Break Away”). Dan is een Base Style kiezen makkelijker.
  2. Vergelijkbaar met stijlen is om een opgemaakt element op te nemen in een eigen “Custom Widget Library”, die je vervolgens kunt kiezen in de “Widgets” page dropdown.. In een van de volgende tips laten we je zien hoe je dat heel eenvoudig zelf kunt doen.
  3. Tenslotte kun kun je stijlen ook kopiëren van één widget naar een andere met “het blauw/zwarte kwastje” (formeel: Format Painter), bovenin de Axure-balk (zie afbeelding hieronder). Daar kun je alle stijlen aanklikken die je wilt kopiëren van het geselecteerde widget, en klik dan op “Copy”. Kies nu een andere widget en klik dan op “Apply”. Je kunt met deze copy-methode ook “interaction styles” (“Ix Styles”, helemaal onderaan de lijst) kopiëren, bijvoorbeeld de mouse-over effecten van een menu of knop.

Screen Shot 2015-10-06 at 16.42.57

Snel stijlen overnemen uit een ander project

De “Import from RP file…” tool onder het “File” menu geeft een snelle methode om eerder gemaakte stijlen over te nemen in je huidige project. Een van de onderdelen die je kunt importeren (klik vaak op “next”) zijn namelijk de “Custom” en/of “Default” stijlen.

Je kunt daarnaast ook stijlen koppelen aan Custom Widgets uit een eigen library, die bij het plaatsen van het widget op jouw pagina’s meteen de bijbehorende stijlen invult in de Base Style dropdown.

NB. Hier loop je tegen een ontbrekende feature van Axure aan, waarvan wij hopen dat die in komende releases wordt opgelost. Je wilt bij het starten van een nieuw project al beginnen met de styles, de widgets en masters die je vaak gebruikt in je organisatie. Zeg maar het idee van templates in Microsoft Office applicaties. Nu moet je dat in Axure doen met een combinatie van importeren uit vorige files (of een standaard template-file die je centraal ergens plaatst) en het laden van Custom Widget Libraries. Sub-optimaal.

Samenvatting Styles

  • Gebruik Widget of Page Styles om gelijksoortige elementen hetzelfde te stylen.
  • Kopieer widgetstijl-elementen vanuit bestaande widgets met behulp van de “Copy” knop in de Widget Style Editor.
  • Importeer stijlen uit vorige projecten via importeren of custom widget libraries.
  • Kies Page-style om bijvoorbeeld snel een prototype look-and-feel te creëren.

 

Topics: Prototyping