Axure RP vs Pencil - Prezentare

Axure RP vs Pencil

View more presentations from Georgiana Carausu.

Demo

Pencil vs Axure RP

Pencil si Axure Rp sunt tool-uri pentru wireframing. Pencil este open-source, disponibil atat ca addon Firefox cat si ca aplicatie desktop iar Axure Rp disponibil ca aplicatie desktop, nu este open-source, dar poate fi achizitionata o versiune trial.

Interfata aplicatiei Pencil este simpla si intuitiva. In stanga avem meniul de componente, grupate pe tipuri: forme geormetrice, forme pentru adnotari, elemente web de baza, diverse feluri de widget-uri si un grup denumit Sketchy UI cu componente pentru prototipizare. Sus avem un meniu de manipulare a acestor componente, cum ar fi modificarea pozitiei pe pagina sau a culorii de background.

Aceste componente se aseaza pe pagina prin drag and drop. O data asezata o componenta poate fi modificata prin resize, rotate. Acest lucru se face tragand de manerele ce apar o data ce dai click pe componenta. Orice componenta poate avea text (fie simplu sau rich) . Pentru a modifica acest text se face dublu click pe componenta. Culoarea de background sau cea a textului unei componente mai poate fi modificata prin meniul Properties, accesibil prin click dreapta.

Exista o serie de modificari specifice numai anumitor componete. De exemplu un checkbox are proprietatea Checked care o data bifata, face ca si checkbox-ul din pagina sa fie checked.

Avem posibilitatea de a modifica mai multe componente odata. Daca vrem sa modificam proprietati de genul text color, selectam cele doua componente si intram in meniul properties care va deveni comun. Daca vrem sa le grupam fizic, avem optiunea de grouping care se realizeaza selectand componentele in cauza si tastand CTRL+G sau selectand din meniul principal Shape/Group.

Avem de asemenea comenzi uzuale de editare a componentelor unei pagini de genul Copy/Paste .

Putem adauga obiecte externe in pagina, de exemplu imagini sau rich texts.

Imaginile pot fi adaugate in 2 feluri. Primul mod este de a insera un fisier imagine. Se face drag and drop din orice file browser pe pagina. Atentie, Pencil nu adauga imaginea propriu zisa in pagina ci o referinta la imagine. Daca aceasta este mutata sau stearsa in timp ce se lucreaza cu pagina ce o referea, pagina va pierde imaginea. A doua metoda este inserarea de imagine pe baza informatiei despre ea din clipboard. Este utila aceasta metoda cand vrem sa adaugam o imagine la care lucram deja sa zicem in Photoshop. Abia acum se adauga cu adevarat imaginea, lucru care ar putea ingreuna Pencil atunci cand avem de-a face cu imagini mari. Cea mai recomandata este prima metoda.

Rich textul se adauga cu Copy/Paste sau cu drag and drop direct in pagina. Dupa adaugare se va transforma automat intr-o forma Rich text si va aparea meniul de editare.

Desigur se pot crea componente custom, de catre utilizator prin optiunea Stencil Generator de la meniul Tools. O data create, aceste componente se instaleaza prin optiunea Install collection, tot de la meniul Tools.

Daca vrem sa instalam o serie de componente gata facute, putem gasi la: http://pencil.evolus.vn/en-US/Downloads/Stencils.aspx .

O alta trasatura importanta este posibilitatea de a atasa un link componentei. Aceste link-uri pot fi doar interne. Acest lucru se face cu click dreapta/Link to si se selecteaza pagina catre care vrem sa pointeze.

De fapt, utilizatorul nu lucreaza doar cu o pagina ci cu un document Pencil, care poate avea mai multe pagini. O pagina noua poate fi adaugata cu New Page.

Documentele Pencil se salveaza sub format xml cu extensia .ep . De asemenea pot fi exportate sub format PNG, ODT, html, PDF sau DOC, insa pentru ultimile 4 e necesara instalarea a cate unui template. Acestea pot fi gasite aici: http://pencil.evolus.vn/en-US/Downloads/Templates.aspx . Pentru a instala mergem la Tools/Manage Export Template. Atentie, formatul PNG nu poate pastra linkurile din document.

Interfata aplicatiei Axure Rp este de asemenea simpla, este bine organizata si intuitiva.

In stanga sus avem Sitemap care este folosit pentru a gestiona paginile site-ului pe care il cream. Pentru a adauga o pagina noua se face click pe butonul “Add Child page” aflat in stanga sus in toolbar-ul Sitemap. Pentru a redenumi o pagina sse face un dublu click usor pe numele paginii sau apasand tasta F2. Pentru a sterge o pagina, se selecteaza pagina apoi se face click pe butonul “Delete Page” din toolbar-ul Sitemap. Aceste trei operatii, de adaugare, de redenumire si de stergere a unei pagini se pot face si utilizand meniul generat atunci cand se face click dreapta pe o pagina.

Organizarea paginilor se realizeaza facand “drag and drop” paginilor in Sitemap sau facem click pe o pagina apoi click pe unul din butoanele “Move Up”/ “Move Down” din toolbarul Sitemap.

Pentru a deschide o pagina in panoul wireframe pentru design se face dublu click pe pagina din Sitemap.

Sub toolbarul Sitemap se afla toolbrul Widgets. Widget-urile sunt niste obiecte ale interfetei cu utilizatorul care ajuta la proiectarea wireframe-urilor. Panoul pentru widgets contine o biblioteca de obiecte ce sunt utilizate in mod obisnuit, cum ar fi butoane, imagini si panouri de text. In plus fata de setul implicit de widget-uri exista posibilitatea de a ne cree si edita propriile biblioteci de witget-uri sis a le incarcam in panoul pentru widgets.

Pentru a selecta o biblioteca se face click pe meniul dropdown din toolbarul Widgets si se selecteaza biblioteca dorita. Pentru a vede toate widget-urile din toate bibliotecile incarcate se selecteaza “All Libraries”. Ca sa cauti in interiorul librariei curente se face click pe icon-ul search de langa meniul dropdown si se scrie in “text field” ceea ce vrem sa cautam.

Pentru a adauga un widget in panoul wireframe se face drag and drop sau cu copy(CTRL+C)/paste(CTRL+V) dintr-un wireframe in altul. Dupa ce sunt adaugate in wireframe, widget-urile se pot redimensiona prin tragerea “manerelor” verzi care inconjoara widget-ul sau cu ajoturul panourilor Location si Size (select View->Location and Size if not visible) pentru a specifica locatia exacta si dimensiunea. Se pot selecta mai multe widget-uri pentru a le muta sau redimensiona pe toate in acelasi timp.

Putem de asemenea sa editam stilul si proprietatile widget-urilor. Exista mai multe posibilitati de a face lucrul acesta:

Dublu-click : Dublu click pe widget pentru a edita proprietatea cel mai frecvent editatade widget-ul respectiv. De exemplu, atunci cand se face dublu clic pe un widget imagine se deschide un dialog pentru a importa o imagine.

Toolbars : Se utilizeaza butoanele din toolbar-ul de deasupra wireframe-ului pentru a edita proprietati ale widget-uli cum ar fi fontul, dimensiunea, stilul, culoarea textului, culoarea de umplere, culoarea liniei.

Context menu : Se face click dreapta pe un widget pentru a afişa meniul contextual cu proprietăţi suplimentare specifice. Aceste proprietăţi variază în funcţie de widget.

Daca se vrea sa se lucreze cu mai multe widget-uri se selecteaza mai multe widget-uri si se face click dreapta pentru a utiliza meniul contextual pentru a grupa, ordona, alinia, distribui sau de a bloca widget-uri. Deasemenea se pot utiliza butoanele din toolbar-ul de deasuprea panoului wireframe pentru a efectua aceste actiuni. (Select View->Toolbars->Object daca toolbar –ul nu este vizibil).

Se poate edita un widget din cadrul unui group fara a le afecta pe celelalte widget-uri din acel grup prin selectarea grupului si facand click pe widget-ul dorit.

Există două moduri de selecţie în Axure RP, "Select Intersected Mode" si "Select Contained Mode". "Select Intersected Mode" este setat implicit. Cand se creaza o zona de selectie facand click si apoi tragand de cursor, orice widget care este intersectat de zona de selecţie va fi inclus.

"Selected Contained Mode" selecteaza doar widget-uri in intregime continute in aria de selectie. Pentru a schimba pe “Select Contained Mode” se face click pe butonul Select Contained Mode din toolbar sau cu ajutorul tastelor CTRL+F9. Pentru a schimba inapoi pe modul implicit se face click pe Select Intersected Mode sau se apasa tasta F9.

In Axure RP se pot face adnotari. Adnotarile permit adaugarea de notite la widget-uri si pot fi folosite pentru a clarifica funcţionalitatea in design. Widget-urile care au adnotari sau interactiuni, au o nota de subsol galbena, numerotata, afisata in coltul din dreapta sus a widget-ului. Pentru a adauga o adnotare selectati un widget din panoul wireframe si scrieti ce vreti incampul din panoul *Annotations and Interactions din dreapta . Pentru a personaliza adnotarea se face click Wireframe->Customize Annotations Fields and Views din meniul principal sau faceti click pe link-ul “Customize” din panoul Annotations and Interactions pentru a deschide fereastra Customize Fields and Views.

Pentru a renumerota notele de subsol se face click dreapta pe widget si se selecteaza Footnotes->Decrement/Increment Footnote. Se poate, deasemenea, tasta un numar de nota de subsol in campul Footnote din partea de sus a panoului Annotations and Interactions. Numarul trebuie sa fie mai mic decat numarul total de widget-uri care au note de subsol.

In Axure RP exista asa numitele „Page Notes” care permit colectarea de informatii la nivel de pagina despre design. Se pot organiza page notes in campuri separate. De exemplu, daca doriti sa separati notitele pentru audiente diferite cum ar fi clienti, dezvoltatori sau testeri. Pentru a adauga page notes se tasteaza notitele in zone de sub panoul wireframe.

Se pot adauga link-uri folosind Quick Link din panoul Interactions din dreapta. In plus fata de link-urile de baza, exista mai multe „Actions” disponibile. Una sau mai multe actiuni pot fi adaugate la fiecare caz pe un evenimet (OnClick). De exemplu, se poate face click pe un buton „open a new page” in fereastra curenta si sa deschideti si o fereastra popup in acelasi timp. Pentru a vedea ce alte actiuni se mai pot face se da dublu click pe „Case 1” de sub evenimentul OnClick.

Se pot folosi „Masters”, adica colectii de widget-uri care pot fi folosite pe toate paginile din site. De exemplu, header, footer, navigation sunt cele utilizate masters. Daca se face o schimbare la un master, aceea schimbare se produce automat peste tot unde este folosit master-ul. Pentru a adauga un master se face click pe butonul „Add Master” din toolbar-ul panoului Master. Se face click dreapta pe master pentru al redenumi iar cu dublu click se deschide mater-ul pentru design. „Masters” sunt proiectati in acelasi fel ca si paginile. Mai exista si „ Nesting Masters”, adik un master in alt master. „Masters” pot fi adaugati in pagini sau in alti „masters” prin tehnica drag and drop din panoul Masters. Implicit master-ii sunt setati pe un comportament „Normal”, care permite master-ului sa fie plasat oriunde in wireframe. Master-ii setati pe „Place in Background” se vor fixa in pozitia in care au fost creati atunci cand au fost adaugati pe o pagina. . Master-ii setati pe „Custom Widgets” vor pierde proprietatea de master atunci cand sunt adaugati pe o pagina si pot fi editati ca oricare alt widget.

Pentru a genera un prototype se apasa tasta F5 sau din meniul principal Generate -> Prototype si se da click pe butonul „Generate”. Atunci cand se genereaza un prototip exista mai multe optiuni ce pot fi modificate, inclusiv folderul in care sa se salveze prototipul, ce page notes si adnotari sa fie incluse.

Prototipurile Axure RP sunt fisiere HTML, javascript si imagini si pot fi vazute intr-un browser.

Deasemenea, putem genera si specificatii prin apasarea tastei F6 sau din meniul principal Generate -> Specification si apoi se da click pe butonul „Generate”. Atunci cand se genereaza o specificatie exista mai multe optiuni ce pot fi modificate, inclusiv folderul in care sa se salveze speficicatia, ce pagini, page notes, masters si adnotari sa fie incluse. Se poate personaliza sabloanele prin adaugarea unui titlu la pagini si prin editarea header-urilor si a footer-urilor. Specificatiile Axure RP sunt generate in format Microsoft Word complet cu screenshots, annotations, ai interactions.

„The Dynamic Panel widget” permite sa se demonstreze functionalitatea dinamica a unui prototip. „Dynamic Panels” pot contine unul sau mai multe „states”. Actiunile pot ascunde, arata, si schimba „dynamic panel states”. Odata deschis, „panel states” poate fi proiectat ca si paginile si „masters” prin tehnica drag an drop a widget-urile din panoul Widgets. Un contur, linie albastra intrerupta, pe wireframe indica limitele panoului dinamic. Panourile dinamice pot fi setate pe hidden in mod implicit. Click dreapta pe panoul dinamic si se selecteaza Edit Dynamic Panel -> Set Hidden. Aceasta va ascunde continutul panoului care poate fi apoi afisat dinamic folosind interactiuni.

Concluzii:

Observam ca, desi am descris 2 tool-uri ce au acelasi scop, ele sunt destul de diferite. Acestea au o baza comuna, si anume cea de design al layout-ului de pagina si a legaturilor intre pagini, insa Axure merge mult mai departe, se adanceste in functionalitate. De exemplu amandoua au posibilitatea crearii unui link intre pagini, insa axure pune la dispozitie o serie de optiuni pt acel link.

O alta diferenta majora este formatul de export. Pencil este un tool de design deci salveaza design-ul ca o imagine de exemplu, deci in scop pur demonstrativ. Axure face un pas mai departe si genereaza codul html, javascript, css si user-ul obtine astfel un schelet pe care poate lucra mai departe.

Pencil este un proiect inca in curs de dezvoltare, astfel documentatia este cam putina si cam vaga in comparatie cu cea de la axure. Pencil nu este inca valabil pe MacOS X, in timp ce Axure da.

Aceasta amplificare a functionalitatilor din Axure fata de cele din Pencil ar putea fi explicata de faptul ca Pencil este gratis deci foarte accesibil. Axure este un produs profesionist si care e la accesul real doar al celor ce vor maximul de functionalitate dintr-un produs si sunt dispusi sa plateasca pentru el.