Noțiuni introductive cu Wireframing folosind Balsamiq

În mod ideal, wireframing-ul poate fi definit ca o activitate de vizualizare a aspectului unui ecran. Există multe instrumente de wireframing prezente astăzi pe piață, dar cea mai ușoară și cea mai utilizată este Balsamiq – subiectul nostru de astăzi. Dar, înainte de asta, să înțelegem mai întâi de ce trebuie să facem wireframe?
Când vine vorba de dezvoltarea de software, este vital să știm cum va arăta produsul final, chiar înainte de a începe dezvoltarea. Această vizualizare inițială a produsului servește drept ghid pentru toate părțile interesate și ajută la evitarea oricărei ambiguități care ar putea apărea în viitor.
În vremurile mai vechi, paragrafele de texte erau folosite pentru a determina cerințele software.

Cu toate acestea, aceste bucăți de text nu au fost suficiente pentru a începe vizualizarea – deoarece fiecare persoană care citește cerințele le-ar vizualiza într-un fel care ar putea fi diferit de restul. Această ambiguitate duce la multe confuzii și duce la pierderi de timp, bani și eforturi. Pentru a ajuta cauza, wireframing intră în imagine. Datorită ușurinței pe care o aduce procesului general de dezvoltare.

În acest articol, vă vom ajuta să înțelegeți întrebări precum:

• • Ce este Balsamiq?

• • Cum să începi cu el?

• Cum se exportă wireframe/macheta finală?

Ce este Balsamiq?

Wireframing, în esență, poate fi efectuată pe un șervețel folosind un stilou. La sfârșitul zilei, este doar o schiță până la urmă. Cu toate acestea, când vine vorba de colaborarea și împărtășirea acestuia cu profesioniști, este o idee mai bună să treceți la unul dintre numeroasele instrumente prezente pe piață astăzi. Un astfel de instrument este Balsamiq – este simplu de utilizat și oferă o mulțime de funcții pentru a construi un cadru util.
Balsamiq este un instrument excelent și îndeplinește toate cerințele de wireframing și colaborare. Are un set unic de caracteristici care vă permit să faceți wireframing rapid, să obțineți feedback în timp real, să încorporați acele feedback și să îmbunătățiți wireframe-ul. Acest lucru aliniază în cele din urmă întreaga echipă la funcționalitatea aplicației în ceea ce privește aspectul.
Cu Balsamiq, colaborarea cu membrii echipei aflate la distanță este, de asemenea, ușoară, deoarece poate exporta wireframes în formate PNG sau PDF, ceea ce permite flexibilitate în timp ce partajează wireframes.
10 cele mai eficiente instrumente de wireframing

Noțiuni introductive cu Balsamiq

Balsamiq este disponibil pentru Windows și Mac OS și poate fi descărcat online . După ce ați descărcat instrumentul și l-ați deschis, veți vedea un ecran ca:

După cum se arată în captura de ecran de mai sus, interfața de utilizator pentru Balsamiq este împărțită în următoarele patru părți.

• • Navigator

• • Biblioteca UI

• • Inspector

• Spațiu/Zona cadru fir

Secțiunea evidențiată cu roșu este pentru a comuta între inspectorul de secțiuni și informațiile despre proiect. Funcțiile sunt incluse în biblioteca UI, să aruncăm o privire în profunzime.

Biblioteca UI

Biblioteca UI este clasificată pe baza diferitelor elemente ale ecranului.
Să ne familiarizăm cu diferitele categorii de elemente de ecran disponibile în Balsamiq.

• • Toate − Făcând clic pe aceasta, vă vor afișa toate elementele UI pe care le oferă Balsamiq. Derularea orizontală vă va permite să le vizualizați sau să le utilizați.

• • Active - Această secțiune include lucrurile pe care le puteți încărca și pentru a fi utilizate ulterior în wireframes-urile dvs.

• • Mare - Aceasta include elementele de ecran relativ mai mari, cum ar fi substituenți, fereastra browserului, iPhone și iPad.

• • Butoane - Această secțiune include toate comenzile butoanelor de care veți avea nevoie într-un cadru fir, cum ar fi – butoane de acțiune, casete de selectare etc.

• • Comune - Această secțiune cuprinde formele utilizate pentru a desemna cele mai comune interacțiuni.

• • Containers - Include opțiuni precum Window, FieldSet, Browser etc. După cum sugerează și numele, include Window, FieldSet, Browsere etc.

• • Formulare - Această categorie conține toate controalele legate de formulare, cum ar fi elementele de intrare, butoanele radio, butonul de trimitere și altele.

• • Pictograme - Acesta conține setul de pictograme pe care le puteți utiliza pentru a indica o anumită operație. De exemplu, o pictogramă de dischetă în loc de butonul de salvare etc. Balsamiq oferă o colecție imensă de pictograme gratuite care pot fi folosite pentru diferite acțiuni.

• • iOS - Acesta conține controalele UI specifice iOS.

• • Aspect - Aspectele sunt extrem de importante atunci când trebuie să reprezentați o pagină/funcție de bază. Această categorie include majoritatea layout-urilor, cum ar fi file verticale/orizontale, acordeoane etc.

• • Markup - Acesta este folosit pentru adăugarea unui comentariu asupra unui anumit control în wireframe. Conține, de asemenea, înștiințări care sunt folosite pentru a afișa conectivitatea în multe dintre scenarii.

• • Media - Toate comenzile UI legate de media sunt disponibile în această secțiune, care vă ajută să afișați o imagine/video/sunet în wireframe.

• • Simboluri - Aceasta este o colecție de componente reutilizabile care pot reduce timpul de creare a componentelor comune.

• Text - După cum spune numele, acesta conține toate controalele UI legate de text. Caracteristici precum un bloc de text, casetă combinată, bară de linkuri etc., sunt disponibile în această categorie.

Cunoașterea acestor componente, împreună cu faptul că Balsamiq vă permite să glisați și să plasați componentele cu ușurință vă vor ajuta să creați wireframes la alegere rapid și eficient.
Pe care dintre aceste instrumente de management de produs le utilizați deja?

Acum, să presupunem că pentru site-ul dvs. web ați creat un cadru fir din aceste patru pagini – Acasă, Produse și Servicii, Contactați-ne și Despre noi. Acum, trebuie să îndeplinim o altă sarcină esențială, care va face ca wireframe-ul nostru să arate puțin mai mult ca un site web cu drepturi depline și mai puțin ca o schiță. Pentru aceasta, trebuie să ne conectăm paginile, deoarece în mod ideal ar fi legate într-un site web. De asemenea, conectarea vă ajută să mergeți cu ușurință înainte și înapoi între wireframes.

Conectarea Paginilor

Acest pas va ajuta ca wireframes-urile dvs. să apară în ordine - așa cum ar face-o pe orice site web. Pentru a realiza această navigare, faceți clic pe bara de linkuri din colțul din dreapta sus .
În primul rând, să începem prin a conecta pagina de pornire la pagina de produse și servicii:

• • Accesați pagina principală

• Faceți clic pe bara de linkuri din colțul din dreapta sus

Consultați panoul de proprietăți

Secțiunea evidențiată în verde arată diferitele wireframes pe care le-ați creat până acum. Să începem prin a conecta pagina de pornire. Faceți clic pe meniul drop-down pentru a vedea lista de machete disponibile. Va afișa o listă ca mai jos:

Din lista drop-down care este afișată, selectați Produse și servicii pentru a crea un link de la Acasă la Produse și servicii. În mod similar, repetați aceeași procedură pentru celelalte pagini.
Arta de a lua decizii: pentru manageri, lideri și oameni de produs

Exportul Wireframe

Wireframe-ul pe care tocmai l-ați creat nu este de niciun folos dacă nu îl puteți prezenta clientului/utilizatorului final într-un format mai comun, cum ar fi PDF sau PNG. În acest scop, Balsamiq vă permite să exportați cu ușurință machete în oricare dintre aceste formate.
În acest exemplu, ne exportăm macheta într-un format PDF. Pentru aceasta, faceți clic pe meniul Proiect, apoi faceți clic pe Export în PDF.
Veți obține un ecran ca cel prezentat mai jos:

Bifați caseta de selectare – „Afișați sugestii de legătură”.
Apoi, faceți clic pe Export în PDF . Va afișa o fereastră pop-up în care puteți specifica un local în care doriți să exportați PDF-ul. Progresul va fi afișat într-o bară de progres ca mai jos.

Când exportul este complet, va apărea o casetă de confirmare. Făcând clic pe casetă, veți putea vizualiza PDF-ul împreună cu toate navigațiile pe care le-ați configurat.
Construirea de produse viabile minime – Cât este prea mult?

Încheierea…
Nu se poate nega importanța wireframing-ului în lumea dezvoltării aplicațiilor de astăzi. Ele oferă multe funcții care ajung să vă ușureze volumul de lucru general – nu există absolut nicio lipsă de instrumente de wireframing, dar Balsamiq este unul dintre puținele instrumente care vă satisface cerințele generale!

Învață cursuri online de MBA de la cele mai bune universități din lume. Câștigă programe de masterat, Executive PGP sau Advanced Certificate pentru a-ți accelera cariera.