Cine a știut că Adobe CC ar putea să facă cadru fir?

Wireframing este un pas major în proiectarea oricărei interfețe de utilizator, fie un site web, aplicație sau produs software. Fără distragere sub formă de elemente vizuale, culori, tipografie, stiluri și efecte, vă puteți concentra mai mult pe definirea ierarhiei conținutului și a experienței utilizatorului.

Realizarea de wireframes și prototipuri de joasă fidelitate vă va ajuta să testați și să repetați mai devreme și mai des în acest proces. Wireframes-urile de joasă fidelitate permit designerilor să lucreze mai rapid și să dezvolte produse pe care utilizatorii le vor adora.

Există o mulțime de instrumente diferite de wireframing din care să alegeți în sălbăticie. Pe care o alegeți va depinde de preferințele dvs. personale și de stilul fluxului de lucru.

La fel ca mulți designeri care au trecut la designul digital din lumea tipăririi, sunt un expert în aplicații Adobe, cum ar fi Illustrator, InDesign și Photoshop. Le pot folosi eficient și intuitiv de oriunde și oricând (chiar dacă cineva mă trezește în miezul nopții și refuză să-mi dea o ceașcă de cafea).

Nu este surprinzător că aceste aplicații versatile au devenit, de asemenea, instrumentele pe care le folosesc pentru a face design vizual pentru web și aplicații. Deci, pentru ca fluxul meu de lucru să fie cel mai eficient, le folosesc și pentru wireframing.

Cu fiecare proiect, de obicei încep să fac schițe foarte grosiere pe hârtie sau pe ecranul iPad-ului sau al smartphone-ului, dacă nu sunt lângă biroul meu. Aceste schițe sunt acolo pentru a-mi concentra gândurile cu privire la conceptul ales; clientul probabil că nu va vedea niciodată niciunul dintre ei. Când mă simt încrezător că ideea mea funcționează, trec la wireframing. De obicei folosesc Adobe Illustrator și InDesign combinate: Illustrator pentru a crea majoritatea elementelor kit-ului UI și InDesign pentru wireframing în sine.

Mai târziu, în articol, voi explica un proces pas cu pas despre cum să încorporați acele instrumente în fluxul de lucru de wireframing, dar înainte de a intra în detalii, permiteți-mi să vă arăt punctele forte și punctele slabe ale utilizării InDesign ca instrument principal de wireframing. .

Avantajele și dezavantajele utilizării Adobe InDesign ca instrument Wireframe și de prototipare

De ceva timp, Adobe InDesign este nu numai o aplicație de publicare desktop, ci și utilizată pe scară largă pentru publicarea digitală și crearea EPUB. Există, de asemenea, mai multe motive pentru care este un instrument potrivit și pentru wireframing:

• Pagini principale – Puteți aplica rapid și consecvent elemente de design globale, cum ar fi navigarea, anteturile, subsolurile și așa mai departe, folosind paginile principale. Puteți crea câte pagini master aveți nevoie și, pe deasupra, un master se poate baza pe altul.
• Suport de grilă solidă – Vă permite să creați și să aplicați cu ușurință diferite tipuri de grile, completând coloane, ghidaje orizontale și verticale pentru a crea module și subgrile pentru o mai mare complexitate și precizie.
• Aspecte alternative – Activează wireframes pentru mai multe dispozitive și orientări în același fișier.
• Biblioteci CC – generează o bibliotecă de diferite active reutilizabile, cum ar fi obiecte utilizate în mod obișnuit, culori, caractere și stiluri de paragraf. Creați elemente în InDesign, Illustrator sau Photoshop sau cu aplicația mobilă Adobe Capture, oricare doriți.
• Straturi – Oferă posibilitatea de a organiza, grupa, afișa/ascunde și bloca/debloca obiecte și conținut în mod selectiv în cadrul firului. Fiecare pagină a unui document InDesign cu mai multe pagini are același număr și aceeași ordine de straturi. Toate modificările pe care le faceți straturilor se reflectă pe toate paginile, cum ar fi vizibilitatea, ordinea de stivuire sau ștergerea.
• Stiluri și tabele – Oferă control complet asupra aspectului textului, obiectelor și tabelelor prin utilizarea stilurilor InDesign. Stilurile se pot moșteni unul de la celălalt, oferind posibilitatea de a casca cu ușurință formatarea dorită în întregul document. Crearea și formatarea tabelelor pentru a fi utilizate ca elemente de conținut wireframe sau chiar ajutoare în scopuri de aspect este foarte simplă.
• Integrare Typekit – În modelele de înaltă fidelitate, puteți utiliza oricare dintre fonturile Typekit care se sincronizează cu desktopul.
• Interactivitate și animații – Puteți utiliza funcțiile de interactivitate și animație încorporate ale Adobe InDesign pentru a crea diferite stări ale elementelor de proiectare web sau aplicații pentru prototiparea interacțiunii. Majoritatea oamenilor folosesc aceste funcții în timp ce creează reviste pentru soluții de publicare digitală și export EPUB cu aspect fix, dar sunt potrivite și pentru prototipare.
• Opțiuni de export – InDesign poate exporta wireframes-urile și prototipurile pe care le creați într-o varietate de formate. PDF-urile interactive vor fi probabil formatul preferat în majoritatea cazurilor, dar puteți utiliza și caracteristica Publicare online pentru a vă converti documentul în HTML interactiv, care poate fi vizualizat în browserele moderne desktop și mobile. Din păcate, nu aveți prea mult control asupra exportului folosind Publish Online, iar fișierele exportate sunt găzduite pe serverele Adobe. Puteți partaja URL-ul prototip clientului sau îl puteți încorpora în site-ul dvs. Pentru mai mult control și export direct în HTML5, puteți utiliza extensia in5 de la Ajar Productions.

Adobe InDesign are multe avantaje pentru a fi utilizate ca instrument de tip wireframe și prototip, dar are și câteva dezavantaje:

• Lipsa șabloanelor și elementelor wireframe predefinite – Deoarece InDesign nu este menit să fie un instrument de wireframing, trebuie să creați și să pregătiți singur șabloane și obiecte. (Vă voi arăta cum să gestionați acest pas mai târziu în articol.) Vestea bună este că cea mai mare parte a acestei lucrări va fi făcută o singură dată și, după câteva ore de muncă, veți fi gata să vă porniți din nou. Wireframing InDesign. De asemenea, există o mulțime de active și kituri wireframe pe care le puteți descărca de pe internet, așa că nu este nevoie să desenați totul singur.
• Funcțiile de interactivitate și animație sunt limitate – Deși puteți conecta cu ușurință pagini și adăugați ceva interactivitate și animații, procesul poate dura uneori mult timp. Unele dintre instrumentele simple de interacțiune nu sunt foarte intuitive. Dacă nu ați folosit funcțiile de interactivitate InDesign, va trebui să depășiți o ușoară curbă de învățare înainte de a le putea aplica eficient.
• Documentele InDesign nu pot exporta direct ca fișiere PSD stratificate – Dacă vă faceți designul vizual în Adobe Photoshop și doriți să aveți elemente wireframe separate pentru construirea designului dvs., atunci va trebui să exportați mai întâi wireframes-ul în PDF. Apoi va trebui să deschideți PDF-ul în Illustrator și să-l exportați din nou ca un PSD stratificat. Persoanele care lucrează pe Mac pot folosi, de asemenea, un script gratuit scris de Rob Day pentru a salva fișierele InDesign ca un PSD stratificat.

Pregătirea bună a cadrului de sârmă este jumătate din muncă

Începeți prin a vă ajusta mediul de lucru. Dacă nu aveți deja un spațiu de lucru salvat în Illustrator și InDesign pentru acest tip de lucru, creați unul. În Illustrator, începeți cu spațiul de lucru Web predefinit și adaptați-l după bunul plac: închideți panourile pe care nu le utilizați des, asigurați-vă că le deschideți pe cele pe care le veți folosi și apoi aranjați-le în funcție de stilul dvs. de lucru.

Când ați terminat, salvați spațiul de lucru alegând Fereastră > Spațiu de lucru > Spațiu de lucru nou... Faceți același lucru în InDesign folosind spațiul de lucru Publicare digitală ca început.

Asamblarea kituri Wireframe/Machetă/Prototip

Un flux de lucru eficient de wireframing folosind Illustrator și InDesign necesită să investiți mai întâi ceva timp în realizarea setului dvs. de active pentru interfața cu utilizatorul. De la introducerea Adobe Creative Cloud, bibliotecile CC sunt cea mai bună modalitate de a stoca toate componentele kit-ului UI.

Puteți crea una sau mai multe biblioteci în scopuri de wireframing și prototipare. De exemplu, puteți crea o bibliotecă pentru wireframing site-ului web, o alta pentru aplicațiile iOS, o a treia pentru aplicațiile Android și așa mai departe.

Pentru a crea o bibliotecă Adobe CC, deschideți panoul Biblioteci și alegeți Creare bibliotecă nouă din meniul hamburger din panou. Elementele pe care le puneți în biblioteci pot fi create și utilizate în diferite aplicații Adobe desktop sau mobile pe toate dispozitivele la care vă conectați cu Adobe ID. Aceasta înseamnă că puteți începe cu proiectul pe iPad sau iPhone, puteți continua pe computerul desktop de la birou și puteți face modificări de ultimă oră pe laptopul de acasă cu aceleași active disponibile pe toate dispozitivele.

Dacă lucrați ca parte a unei echipe mai mari, activele bibliotecii pot fi partajate între membrii echipei. Bibliotecile pot conține culori, elemente grafice, stiluri de straturi (numai Photoshop) și stiluri de paragraf și caractere. Adăugați active în biblioteci făcând clic pe butonul corespunzător din partea de jos a panoului CC Library cu elementul respectiv selectat. De asemenea, puteți adăuga elemente grafice trăgându-le direct din tabloul de desen în panoul Biblioteci.

Activele din biblioteci sunt organizate pe categorii. Respectați bunele practici și redenumiți fiecare material cu un nume semnificativ. Bibliotecile pot fi căutate, iar găsirea unui activ tastând începutul numelui vă va economisi mult timp mai târziu, mai ales când aveți multe articole diferite în biblioteci. Pentru a schimba numele unui material, faceți dublu clic pe el și introduceți unul nou.

Crearea componentelor Kitului Wireframe

Deși Adobe InDesign are câteva instrumente de desen de bază, care sunt destul de asemănătoare cu Illustrator, Illustrator este o alegere mult mai bună pentru a desena diferite elemente în wireframe. Ca regulă generală, creați toate elementele kit-ului care necesită un desen mai complex decât formele geometrice de bază în Illustrator. Creați elemente mai simple care conțin text pe care va trebui să îl modificați în aspect, cum ar fi butoanele simple, în InDesign.

Pentru început, faceți o listă cu toate elementele de care veți avea nevoie în wireframe, cum ar fi elemente de navigare, elemente de pagină, inclusiv imagini, cadre video și casete de text, pictograme, avatare, elemente de formular și toate celelalte elemente de interfață. După ce lista dvs. este finalizată, puteți merge la Illustrator și InDesign pentru a crea acele elemente.

Începeți prin a crea un document nou pentru componentele wireframe sau ale kit-ului de machetă. Verificați de două ori dacă alegeți fie Profil Web/Dispozitive în Illustrator, fie Intenție de publicare Web/Digital din caseta de dialog Document nou. Acest lucru asigură că pixelii sunt utilizați ca unități, iar modul de culoare este setat la RGB.

Faceți elementele kit-ului wireframe cât mai simple posibil, deoarece trebuie să ofere indicii vizuale rapide pentru ceea ce reprezintă, fără a fi prea detaliate. Ar trebui să utilizați palete de culori foarte limitate, de preferință câteva nuanțe de gri. Accentuați vizual elementele care sunt mai importante colorându-le cu nuanțe mai închise sau oferindu-le un contrast mai mare.

Pentru modele sau prototipuri de fidelitate mai mare, creați kituri de interfață cu elemente mai detaliate care utilizează paleta de culori corespunzătoare fiecărui proiect. Pentru acces ușor la paletele de culori, adăugați-le în bibliotecile CC.

Elementele Adobe Illustrator în bibliotecile CC

Elementele pe care le adăugați în biblioteci din Illustrator sunt conectate în mod implicit (din Adobe CC 2015). Aceasta înseamnă că atunci când modificați un material de bibliotecă în Illustrator, modificările sunt reflectate în toate cazurile utilizate. Dacă doriți să adăugați un material deconectat la document, apăsați tasta opțiune/alt în timp ce îl trageți din panou.

Când utilizați elementele Illustrator legate în InDesign, acestea vor avea o pictogramă nor în colțul din stânga sus când documentul este vizualizat în modul Normal. Toate sunt listate și în panoul Linkuri. Dacă modificați un material de bibliotecă în Illustrator, modificările în documentul InDesign nu se vor face automat. Pictograma nor va fi înlocuită cu o pictogramă de semn de exclamare a linkului modificat și va trebui să actualizați aceste linkuri.

Elementele InDesign pe care le plasați într-un document InDesign nu sunt legate. Aceasta înseamnă că puteți edita instanțe independent de originalul, iar atunci când materialul inițial este modificat, acele modificări nu se reflectă asupra activelor care au fost deja plasate în aspect.

Luați în considerare aceste proprietăți atunci când creați wireframes: adăugați elemente în bibliotecă din Illustrator atunci când presupuneți că vor trebui modificate și actualizate la nivel global sau adăugați-le din InDesign când știți că veți dori să le modificați individual. Rețineți că, de asemenea, puteți crea elemente grafice în Illustrator, le puteți copia/lipi în InDesign și apoi modificați, dacă este necesar, înainte de a le adăuga în bibliotecă ca material InDesign.

Dacă se întâmplă să uitați ce material grafic este creat de care aplicație, priviți partea dreaptă a fiecărui element din panoul Bibliotecă în timp ce utilizați Afișare elemente ca listă.

Flexibilitate Adobe InDesign cu conținut și copiere

Pentru a vă asigura că puteți schimba cu ușurință copia și tipografia în wireframes-ul dvs., creați containere de text în InDesign. InDesign are o caracteristică plăcută pentru a completa casetele de text cu text substituent. Când desenați o casetă de text, faceți clic dreapta pe ea și alegeți Umpleți cu text substituent .

Adăugați casete de text în biblioteca Adobe ca orice alt element grafic trăgându-le. Când utilizați mai târziu acele elemente de text ca parte a aspectului wireframe-ului, puteți modifica caseta de text, precum și conținutul acesteia din wireframe.

Luați în considerare crearea unor elemente de interfață de utilizare pentru butoane și în InDesign. Pentru a crea un buton, creați un cadru de text, introduceți textul și apoi utilizați Obiect > Opțiuni cadru text pentru a defini spațierea inserției. Ajustați justificarea verticală a textului din interiorul unei casete alegând opțiunea dorită din meniul derulant Aliniere.

Comutați la fila Dimensiune automată și alegeți dimensionarea automată adecvată (care ar fi probabil numai lățime) și un punct de referință convenabil. Dacă nu doriți să lăsați InDesign să vă despart textul în mai multe rânduri, bifați opțiunea Fără întreruperi de linie.

Utilizați resursele existente

Există o mulțime de kituri Adobe Illustrator pentru wireframing și prototipare UI disponibile pe internet pe care le puteți cumpăra sau chiar descărca gratuit dacă doriți o soluție gata făcută. Poate ai deja elemente pe care le poți dezgropa din proiectele tale finalizate. Deschide acele documente, modifică toate elementele create anterior după cum este necesar și pune-le în bibliotecile lor respective.

Dacă proiectați pentru o anumită platformă, de exemplu, o aplicație iOS sau Android, asigurați-vă că citiți cu atenție liniile directoare ale interfeței umane și folosiți activele adecvate. Poate fi convenabil să aveți elemente de UI care sunt specifice diferitelor platforme în kit.

Nu vă concentrați prea mult pe încercarea de a ține cont pentru fiecare bun sau stare viitoare din bibliotecile dvs. înainte de a începe procesul real de wireframing. Puteți adăuga materiale în bibliotecile dvs. mai târziu și puteți construi pe ele pe măsură ce mergeți.

Crearea de șabloane wireframe InDesign

Mai rămâne un pas important de pregătire: creați șabloane InDesign pe care le veți folosi pentru realizarea de wireframes. Începeți prin a crea un document nou cu intenția de publicare web sau digitală și definiți dimensiunile de pagină adecvate pentru ecranele pentru care proiectați.

Deoarece este recomandat să utilizați un fel de grilă pentru aranjarea elementelor de sârmă, configurați marginile și creați o grilă de coloane setând numărul dorit de coloane și spațiul pentru jgheab. Puteți modifica aceste setări ulterior din Aspect > Margini și coloane cu pagina principală (sau paginile) respectivă selectată în panoul Pagini.

Dacă aveți nevoie de ghidaje orizontale și ghidaje verticale complementare, creați-le manual sau creați o grilă suplimentară folosind Aspect > Creare ghiduri. Când creați o grilă, este util să utilizați unul dintre instrumentele online de calcul al grilei, cum ar fi Gridulator.

De asemenea, puteți crea șabloane suplimentare în scopuri de prezentare cu modele de dispozitiv ca cadru pentru wireframes-urile dvs. Deoarece un document InDesign poate fi legat de altul, puteți crea wireframes într-un document InDesign și apoi îl puteți plasa în altul pentru prezentări.

Deși poate părea complicat la început, acesta este de fapt un flux de lucru foarte simplu și eficient. Păstrarea wireframelor reale într-un document separat facilitează continuarea construcției de la wireframes aprobate la un design vizual lustruit.

De asemenea, este simplu să creați șabloane gata de prezentare în care să plasați wireframes, să adăugați etichete și comentarii și să puteți arăta clientului cea mai bună soluție. Când faceți modificări pe un fișier wireframe, actualizați-l ca orice alt link dintr-un document de prezentare și ta-daaa! Toate modificările sunt și în prezentarea dvs.

În panoul Straturi, puteți pregăti straturi separate pentru diferite tipuri de conținut: elemente de interfață cu utilizatorul, caracteristici interactive, gesturi, etichete și note. Dacă aveți nevoie de mai multe straturi pentru un anumit proiect, le veți putea adăuga cu ușurință oricând în timpul procesului de wireframing.

Când ați terminat cu crearea, salvați șabloanele ca fișiere șablon InDesign.indt. După ce toate șabloanele de care aveți nevoie sunt salvate, sunteți în sfârșit gata să începeți eficient wireframingul.

Construire Wireframes

În primul rând, începeți cu pagina principală. Trageți toate elementele globale care vor fi aceleași pe toate ecranele proiectului dvs. din bibliotecă. Dacă proiectați un site web, acestea sunt de obicei anteturi cu logo, navigare și subsol. Deoarece puteți crea mai multe pagini master și acestea se pot moșteni una de la alta, puteți profita de imbricarea paginilor master.

De exemplu, în funcție de proiect, puteți crea o pagină principală pentru un element UI, cum ar fi o fereastră pop-up modală sau de dialog, apoi puteți face master noi pe baza primului master, modificând doar elementele care trebuie să fie diferite.

Nu puteți selecta, modifica sau șterge elementele principale din paginile obișnuite ale documentului decât dacă faceți clic pe ele în timp ce țineți apăsat Comandă/Control + Shift pentru a înlocui masterul. Odată ce elementul dvs. este suprascris, puteți modifica oricare dintre parametrii acestuia sau îl puteți șterge complet din aspect.

Rețineți că, chiar și atunci când suprascrieți elementul, parametrii pe care nu i-ați modificat vor fi în continuare moșteniți de la master. De exemplu, dacă suprascrieți un element schimbându-i culoarea, dimensiunea acestuia nu se va modifica deoarece este încă conectat la master. În plus, dacă îl modificați pe pagina principală, acesta va fi modificat și pe elementul pe care l-ați înlocuit anterior.

Când inserați pagini suplimentare în documentul de wireframing, nu uitați să le bazați pe masterul respectiv. Dacă trebuie să schimbați masterul pentru paginile aflate deja în aspect, selectați-le în panoul Pagini, faceți clic dreapta și alegeți Aplicare master la pagini. Utilizați elementele bibliotecii și aranjați-le utilizând opțiunile Ghiduri inteligente și Aliniere pentru a crea aspectele finale ale interfeței de utilizare.

Dacă creați modele pentru mai multe dimensiuni de ecran, creați machete alternative din Aspecte > Creare aspect alternativ sau din panoul Pagini. Puteți utiliza reguli de aspect lichid atunci când creați machete alternative pentru a adopta automat elementele paginii de la o dimensiune și orientare la alta sau le puteți controla manual. Pentru aplicarea și testarea regulilor de aspect lichid, utilizați instrumentul Pagina sau deschideți panoul Fereastra > Interactiv > Aspect lichid.

Adăugarea de interactivitate

Adobe InDesign are o mulțime de funcții de interactivitate de care puteți profita atunci când creați wireframes sau prototipuri. Funcțiile pe care le veți include vor depinde de formatul final de care veți avea nevoie pentru wireframes, prototipuri sau prezentări.

Dacă exportați ca PDF, interactivitatea va fi limitată, dar puteți cel puțin să faceți ca legăturile dintre ecrane să funcționeze folosind panoul de hiperlinkuri pentru a le crea. Selectați elementul pe care doriți să îl comportați ca link și faceți clic pe pictograma New Hyperlink. Din meniul derulant Link către, alegeți Pagina și introduceți numărul paginii dorite. Repetați această acțiune pentru toate elementele pe care doriți să le comporți ca legături între ecrane.

De asemenea, puteți adăuga hyperlinkuri către obiectele care se află pe paginile principale, ceea ce poate economisi timp real. Creați link-uri pe pagina principală o dată și acestea vor funcționa pe toate ecranele documentului dvs.

Puteți crea butoane din orice grafic, text, imagine sau grup de elemente. Pentru a crea un buton dintr-un obiect selectat, utilizați panoul Fereastră > Interactiv > Butoane și formulare și faceți clic pe pictograma Conversie în buton.

Butoanele pot avea stări diferite create pentru aparițiile normale, de rulare și de clic. Pentru a adăuga stări de rulare sau de clic la butoane, faceți clic pe ele în panoul Butoane și editați aspectul butonului pentru fiecare stare. Pentru a adăuga o acțiune la un buton, faceți clic pe un semn plus și alegeți-l din listă. Luați în considerare faptul că acțiunile din SWF/EPUB nu vor funcționa în PDF-urile interactive.

Pentru a crea elemente pop-up, alegeți Afișare/Ascunde butoanele și formularele. Pentru a ascunde butoanele până la declanșare, bifați opțiunea Ascuns până la declanșare. Puteți include obiecte cu mai multe stări într-un PDF interactiv, dar numai dacă le exportați mai întâi ca SWF și apoi le plasați înapoi în aspectul InDesign pentru export PDF. Acest flux de lucru este obositor și PDF-urile nu pot fi văzute corect în toate cititoarele PDF, așa că încercați să evitați să faceți acest lucru decât dacă este cu adevărat necesar.

Dacă doriți să vă convertiți documentul într-un prototip HTML utilizând caracteristica Publicare online InDesign CC 2015, puteți utiliza multe opțiuni interactive precum animații, obiecte cu mai multe stări și acțiuni cu mai multe butoane, inclusiv toate cele destinate exportului SWF/EPUB.

Puteți adăuga animații simple folosind panoul Animație și alegând una dintre presetările încorporate din meniul derulant și setând proprietățile acesteia. Un obiect poate avea o singură animație aplicată, dar dacă trebuie să adăugați mai multe dintre ele, grupați-vă obiectul cu o casetă goală și utilizați noua animație pe acel obiect nou creat.

Pentru elementele UI care necesită afișarea unor stări diferite, creați un obiect cu mai multe stări. Creați un obiect separat pentru fiecare stare. Obiectele pot fi un singur element (imagine, casetă de text, grafică) sau un grup de elemente diferite. Deschideți panoul Fereastra > Interactiv > Stări obiect, selectați toate obiectele pe care le-ați creat pentru obiectul cu mai multe stări și faceți clic pe butonul Nou din partea de jos a panoului.

După ce obiectul cu mai multe stări este creat, va trebui să creați butoane pentru a trece de la o stare a obiectului la alta. Acțiunile Mergi la starea următoare sau Treci la starea anterioară dezvăluie starea obiectului specific cu acțiunea Go To State.

Dacă doriți să aveți un cadru derulabil în wireframe/prototip, cel mai simplu mod de a crea unul este prin utilizarea extensiei Universal Scrolling Frames de la Ajar Productions. După ce descărcați și instalați extensia, o puteți utiliza ca panou InDesign. Pentru un cadru care poate fi derulat, va trebui să creați conținut, precum și un cadru pentru un container.

Conținutul care poate fi derulat poate fi un cadru de text, o imagine sau mai multe elemente grupate împreună. Când ați terminat de creat conținutul și caseta de container, selectați conținutul și Editare > Tăiați. Apoi selectați containerul și inserați conținutul în interior folosind Editare > Lipire în. Selectați containerul și, folosind Cadre de defilare universale, ajustați direcția de defilare dorită.

Combinând butoane, obiecte cu mai multe stări, animații și cadre care pot fi derulate, puteți obține o experiență interactivă bogată. Pentru a testa interactivitatea în InDesign, utilizați panoul de previzualizare a interactivității EPUB. Puteți previzualiza o singură pagină sau întregul document. Măriți panoul de previzualizare după cum aveți nevoie.

Dacă nu ați folosit funcțiile interactive Adobe InDesign, fiți pregătiți deoarece, la început, există o curbă de învățare. Dar cu puțină practică și câteva încercări și erori, le vei stăpâni rapid.

Exportarea documentelor finalizate

Când ați terminat de creat wireframes-urile și fișierele de prezentare, tot ce rămâne este să vă arătați ideile grozave clientului în cel mai bun mod posibil. În acest scop, va trebui să exportați wireframes-urile într-un format pe care clientul dvs. îl poate previzualiza. Deși fișierele InDesign pot fi exportate într-o varietate de formate, probabil că veți utiliza PDF interactiv sau funcția Publicare online dacă testați prototipuri funcționale cu fidelitate scăzută sau înaltă. Pentru a salva ca PDF interactiv, alegeți Adobe PDF (Interactiv) din meniul derulant Format din caseta de dialog Export și ajustați proprietățile după cum este necesar. Nu uitați să bifați Forms and Media dacă există elemente interactive pe care doriți să le includeți. Clienții pot vizualiza wireframes PDF în Adobe Reader gratuit și pot scrie toate comentariile lor în același fișier.

De asemenea, puteți utiliza un document PDF exportat din InDesign pentru a crea un prototip InVision (sau un alt instrument care acceptă PDF-uri). Dacă instrumentul dvs. standard de prototipare, poate Marvel, nu poate importa un PDF, exportați paginile wireframe InDesign ca imagini JPEG sau PNG.

Pentru a exporta interactiv un prototip HTML care poate fi văzut în browserele moderne pe diferite dispozitive, accesați Fișier > Publicare online sau faceți clic pe butonul Publicare online din bara de aplicații. După ce documentul este pregătit pentru publicare online și încărcat, puteți copia o adresă URL a documentului pentru a le partaja părților interesate și a începe procesul de revizuire. De asemenea, puteți încorpora prototipul publicat pe site-ul dvs.

Un dezavantaj al funcției Publicare online este că nu are niciun control suplimentar asupra exportului, iar fișierele sunt întotdeauna stocate pe serverele Adobe. De asemenea, este încă o funcție de previzualizare și nu poți fi sigur în ce direcție o va dezvolta Adobe sau chiar dacă va fi întreruptă.

Odată ce wireframe/prototipul dvs. este exportat, este timpul ca procesul de testare, revizuire și iterare să înceapă.