UTILIZARE

Fereastră principală Axure

2
 Widget și Wireframe

Widget = obiecte de interfață cu ajutorul cărora

putem crea un wireframe
Wireframe = o vedere generală asupra structurii
unei pagini și arată legăturile dintre
acestea

3
 Redimensionarea spațiului de lucru

 Prin mutarea barelor marcate în imagine se poate

schimba dimensiunea paginii de lucru

4
 Inserție widget

Inserția widget-urilor se face prin Drag and Drop

5
 Drag and Drop

Drag and Drop = este un efect prin care elementele

pot fi mutate cu mouse-ul și
lăsate în pagina de lucru

6
 Inserția imaginii printr-un widget

 Se adaugă widget-ul
image în spațiul de
lucru, se dă click
dreapta pe widget și se
selectează optiunea
Import Image

7
 Proprietăți widget
Rotunjirea colțurilor unui
widget se realizează prin
click pe widget în pagina
de lucru ,după care dacă
apare triunghiul galben
marcat în imagine acesta
se mută spre dreapta
pentru rotunjirea colțurilor

Nu fiecare widget

prezintă această
proprietate

8
 Proprietăți widget

Forma widget-ului
poate fi schimbată prin
click pe widget, după
care dacă apare cercul
gri din imagine se dă
click pe acesta și se
alege forma

Nu fiecare widget

prezintă această
proprietate

9
 Proprietăți widget

Proprietățile avansate unui widget apar în secțiunea

Widget Properties and Style

10
 Proprietăți TextField

Se introduc două widget-uri Text Field , după care se

schimbă proprietățile

11
 Structura paginilor
 Structura paginilor se poate
modifica prin click dreapta pe
pagina pe care vrem sa o mutăm
și selectarea opțiunii dorite

12
 Grid

Grid = o serie de linii

orizontale și verticale care
ajută la poziționarea
elementelor în pagină

Pentru apariția grid-ului se dă

click dreapta într-o zonă liberă
în spațiul de lucru , după care
click pe Grid and Guides și
click pe Show Grid

13
 Proprietăți grid

Schimbarea proprietăților grid-

ului se face prin click dreapta
pe o zonă liberă , după care
click pe Grid and Guides și
click pe Grid Settings

Se poate schimba distanța

dintre linii și culoarea

14
 Interacțiuni Widget
Realizarea unei
interacțiuni se face prin
click pe un widget , după
care în fereastra Widget
Interactions and Notes
se dă click pe
interacțiunea dorită și
click pe Case

15
 Interacțiuni Widget
On Click – se realizează
interacțiunea atunci când
se dă click pe widget
On Mouse Enter – se
realizează interacțiunea
atunci când cursorul
intră în zona widget-ului
On Mouse Out – se
realizează interacțiunea
atunci când cursorul
părăsește zona widget-
ului 16
 Interacțiuni Widget

 Pentru adăugarea unei legături se dă click pe Open Link

17
 Interacțiuni Widget

 Pentru selectarea paginii care să se deschidă se alege

o pagină din structura site-ului

 Pentru selectarea ferestrei în care să se deschidă

pagina se dă click pe Current Window și se
selecteaza opțiunea dorită 18
 Interacțiuni Widget
Exemplu

Se introduc două widget-uri Text Field , după care se

schimbă proprietățile și numele acestora

19
 Interacțiuni Widget
Exemplu

Adăugarea unui widget

HTML Button

20
 Interacțiuni Widget
Exemplu

 Se dă click pe widget după care se selecteaza

interacțiunea On Click , se dă click pe Case 1 se
selectează opțiunea Enable/Disable și se selectează
numele Textfield-urilor
21
 Interacțiuni Widget
Exemplu

 Dacă se dă click pe butonul Submit atunci se activează

Text Field-ul cu numele text2 și se dezactivează Text
Field-ul cu numele text1

22
 Dynamic Panel

Dynamic Panel = o zonă care poate să își modifice

conținutul într-un mod dinamic
prin interacțiunea utilizatorului
cu anumite widget-uri din
cadrul paginii

State = conținutul Dynamic Panel-ului la un moment

dat (stare)

23
 Dynamic Panel
Aplicație

 Adăugăm un widget Image și un widget Button Shape

24
 Dynamic Panel
Aplicație
 Se dă click dreapta pe
widget-ul Image și se
dă click pe Convert to
Dynamic Panel

25
 Dynamic Panel
Aplicație
În zona Widget Interactions
and Notes se dă un nume
pentru Dynamic Panel

26
 Dynamic Panel
Aplicație

În zona Widget Manager se

dă click dreapta pe State1
care la început nu conține
nimic , după care se dă click
pe Duplicate State pentru a
crea și alte stări(goale
inițial)

27
 Dynamic Panel
Aplicație

Pentru fiecare stare în parte

se modifică conținutul

28
 Dynamic Panel
Aplicație

 Se creează trei stări diferite ca și în imagine

29
 Dynamic Panel
Aplicație

Se adaugă un widget Button Shape

Se modifică interacțiunea On Click

pentru widget-ul Button Shape astfel
încât la apăsare să se schimbe
conținutul Dynamic Panel-ului

30
 Dynamic Panel
Aplicație
Se selectează
Dynamic Panel-ul
dorit după care se
aplică setările ca și
în imagine

Dacă se ajunge la
ultima stare și se dă
click pe buton
atunci se trece la
prima stare

31
 Condiționare widget
Aplicație
Se inserează un widget Text
Field și un widget HTML
Button

32
 Condiționare widget
Aplicație

Se denumește
widget-ul Text Field
în textfield1

Se setează
interacțiunea On
Click pentru butonul
HTML Buton

33
 Condiționare widget
Aplicație

Se adaugă condiție pentru widget-ul textfield1(case 1)

34
 Condiționare widget
Aplicație

Se impun condițiile asupra Text Field-ului conform

imaginii
35
 Condiționare widget
Aplicație

Se fac următoarele modificări conform imaginii

36
 Condiționare widget
Aplicație

Se pune o nouă condiție conform imaginii (case 2)

37
 Condiționare widget
Aplicație

Se inserează un widget Rectangle și se denumește

welcome
38
 Condiționare widget
Aplicație
Se setează
pagina(conform
imaginii) astfel
incât la
incărcarea
paginii să apară
un anumit text
în widget-ul
Rectangle

39
 Condiționare widget
Aplicație
Se dă click pe butonul fx după
care trebuie să selectăm variabila
care se va incărca în widget-ul
Rectangle

Dacă utilizatorul se loghează

corect atunci ii va apărea numele
dupa textul Welcome, în cadrul
widget-ului Rectangle

40
 Generare fișier HTML
 Pentru generarea
unui fișier HTML
se dă click pe
Publish după care
se dă click pe
Generate HTML
Files…

41
 Generare fișier HTML
 Pentru generarea
cu opțiunile
dorite se dă
click pe butonul
Generate

42
 Wireframe cu Axure

 Se inserează un widget Rectangle în

fereastra de lucru conform imaginii de
jos

43
 Wireframe cu Axure

 Se inserează un widget Placeholder

în fereastra de lucru conform
imaginii de jos (în interiorul
widget-ului Rectangle)

44
 Wireframe cu Axure

 Se inserează patru widget-uri Label ,se poziționează și

se denumesc ca și în imagine

45
 Wireframe cu Axure

 Ca cele patru widget-uri de tip Label să fie aliniate și

distribuite(distanța dintre widget-uri) corect se dă click
pe Distribute Horizontally ( imaginea din mijloc ) ,
după care click pe Align Top ( imaginea de jos )
46
 Wireframe cu Axure

 Se adaugă un widget Label și un alt widget Text Field

după care se poziționează și se poziționează conform
imaginii

47
 Wireframe cu Axure
 Se adaugă un widget HTML Button
care se poziționează și se
dimensionează conform imaginii de jos

48
 Wireframe cu Axure
 Se adaugă un widget Pragraph și
se poziționează conform imaginii
de jos

49
 Wireframe cu Axure

 Se adaugă un widget Rectangle , se poziționează și se

dimensionează conform imaginii din stânga , după care
se rotunjesc colțurile conform imaginii din dreapta

50
 Wireframe cu Axure

 Se adaugă două widget-uri Text Label , se poziționează

exact pe centrul widget-ului Rectangle cu ajutorul
butonului Align Center

51
 Wireframe cu Axure

 Se selectează widget-ul Rectangle după care se colorează

conform imaginilor cu ajutorul butoanelor Line Color și
Fill Color

52
 Wireframe cu Axure

 Se inserează patru widget-uri Text Label după care se

inserează două widget-uri Horizontal Line și se suprapun
conform imaginii

53
 Wireframe cu Axure

 Se inserează un widget Rectangle care se poziționează și

se dimensionează conform imaginii

54
 Wireframe cu Axure

 Se inserează un widget Placeholder care se poziționează

în interiorul widget-ului Rectangle și se dimensionează
conform imaginii

55
 Wireframe cu Axure

 Se inserează patru widget-uri Placeholder și patru

widget-uri Text Label conform imaginilor

56
 Wireframe cu Axure

 Se inserează un widget Dynamic Panel conform imaginii

din stânga după care se denumește

57
 Wireframe cu Axure

 Se adaugă două stări cu numele Inactive și Active de la

butonul plus
 În fereastra de lucru selectăm starea Active

58
 Wireframe cu Axure

 Se adaugă un widget HTML

Button ca și în imagine
 Se completează starea Active cu
informațiile din imagine

59
 Wireframe cu Axure

 Se selectează starea Inactive după care se inserează un

widget Hot Spot conform imaginii
 Hot Spot = o zonă activă într-o pagină

60
 Wireframe cu Axure

 Se selectează widget-ul Hot Spot după care se dă click

pe interacțiunea On Mouse Enter
 Se selectează opțiunea Set Panel State

61
 Wireframe cu Axure

 Se selectează widget-ul Dynamic Panel după care se

aleg opțiunile conform imaginii

62
 Wireframe cu Axure

 Se selectează starea Active după care se inserează un

widget Hot Spot conform imaginii

63
 Wireframe cu Axure

 Se selectează widget-ul Hot Spot după care se dă click

pe interacțiunea On Mouse Out

64
 Wireframe cu Axure

 Se dă click pe Set Panel State , după care se selectează

widget-ul Dynamic Panel și se aleg opțiunile conform
imaginii
65
 Wireframe cu Axure

 Se selectează starea Active după care se separă widget-

ul Hot Spot de conținut
 Se inserează un widget Rectangle peste widget-ul
Placeholder conform imaginii 66
 Wireframe cu Axure

 Se selectează widget-ul Rectangle după care se dă click

pe butonul Send to Back pentru a ascunde widget-ul
Rectangle
 Se poziționează widget-ul Hot Spot conform imaginii
67
 Wireframe cu Axure

 Se selectează widget-ul Hot Spot după care se dă click

pe interacțiunea On Mouse Out

 Se selectează opțiunile conform imaginii

68
 Wireframe cu Axure

 Se selectează starea Inactive

 Se selectează widget-ul Hot Spot după care se dă click

pe interacțiunea On Mouse Enter
69
 Wireframe cu Axure

Se selectează opțiunile conform imaginii

70
 Wireframe cu Axure

Se creează un Master prin

click pe butonul Add Master

Master = o mulțime de
widget-uri care se pot refolosi
în cadrul unui site

71
 Wireframe cu Axure

 În Master se adaugă conținutul stărilor Inactive și

Active din Dynamic Panel

72
 Wireframe cu Axure

 Se inserează în pagina principală prin Drag and Drop

73
 Wireframe cu Axure

 Se inserează mai multe elemente aliniate ca și în

imagine

74
 Wireframe cu Axure

 Se dă click pe starea Inactive din cadrul Master-ului

75
 Wireframe cu Axure

 Se separă widget-ul Hot Spot de conținutul stării

 Se selectează widget-ul Label și se dă click pe
Hyperlink astfel se creează o legătură intre pagini
76
 Wireframe cu Axure

 Se selectează widget-urile Label și se transformă în

legături conform imaginii

77
 Wireframe cu Axure
 Se inserează elementele din
imagine

 Bara de culori = o mulțime de

widget-uri Rectangle care sunt
colorate

 Cele două widget-uri Label

sunt legături

78
 Wireframe cu Axure

 Se creează un nou Master care va conține elementele

încadrate din imagine

79
 Wireframe cu Axure

 Acest Master se denumește Project Item și conține

elementele din imagine

80
 Wireframe cu Axure
 Se inserează mai multe
elemente prin Drag and Drop

 Se inserează widget-uri
Horizontal Line pentru
separarea elementelor conform
imaginii

81
 Wireframe cu Axure

 Se creează un Master prin click pe butonul Add

Master
 Se denumește Rookie Item și conține elementele
încadrate în imagine 82
 Wireframe cu Axure

 Se adaugă elementele din imagine pentru a forma

Footer-ul paginilor

 Footer = zona din partea de jos a unei pagini

83
 Wireframe cu Axure

 Dacă cursorul nu este într-o zonă activă a paginii

atunci pagina arată ca și în imagine

84
 Wireframe cu Axure

 Dacă cursorul se află în zona încadrată atunci

conținutul zonei se schimbă ( din starea Inactive trece
in starea Active )
85