EDITOR WIREFRAME
NinjaMock include tutti gli stencil tipici per wireframing web e mobile.
I nostri stencil sembrano abbozzati - come se fossero disegnati a mano. Questo perché aiuta le persone a concentrarsi sull'interazione e il contenuto nel wireframe piuttosto che su colori, stile, layout dettagliato e altri aspetti ad alta fedeltà.
Gli stencil sono organizzati in una casella degli strumenti nel riquadro sinistro dell'applicazione e sono raggruppati in base al tipo e all'utilizzo. Attualmente supportiamo diversi tipi di progetti (ad esempio iOS, Android, Windows Phone, ecc.) e per ogni tipo di progetto la casella degli strumenti contiene gli stencil necessari.
(Android, iPhone, iPad, Windows Phone, Microsoft Surface, siti web e a mano libera)
Icone e immagini
I wireframe non sono completi senza includere icone e immagini. In NinjaMock hai molte opzioni convenienti a tua disposizione per progettare la tua interfaccia per includere questi elementi visivi.
Icone incorporate
Le nostre icone incorporate utilizzano lo stesso stile disegnato a mano del resto degli elementi stencil in modo che l'intero design wireframe abbia un aspetto uniforme.
Le icone incorporate differiscono per tipo di progetto. Ad esempio nei progetti wireframe Android e iPhone, assomigliano alle icone reali della piattaforma data, ma hanno ancora un aspetto abbozzato disegnato a mano.
Le icone incorporate sono vettori. È possibile ridimensionarli e persino modificare i riempimenti e i tratti senza perdere qualità.
IconFinder
Se non trovi quello che ti serve tra le nostre icone incorporate, abbiamo anche un'integrazione diretta con IconFinder. Basta cercare le icone nella scheda IconFinder all'interno di NinjaMock wireframe editor, senza mai dover lasciare.
Si prega di notare che le icone IconFinder non sono vettori e non è possibile modificare i loro riempimenti o tratti.
Your own files
Hai icone o immagini sul tuo computer che desideri utilizzare nel tuo progetto? Basta caricare le risorse visive al vostro spazio di archiviazione personale sui nostri server e si possono utilizzare in qualsiasi progetto. Attualmente forniamo ogni utente con 500 MB di spazio libero.
È possibile trascinare e rilasciare i file di immagine direttamente dal desktop sul NinjaMock wireframe editor. Questi file verranno caricati automaticamente nel tuo spazio di archiviazione personale.
Images from the web
Hai trovato l'icona o l'immagine perfetta di cui hai bisogno per il tuo progetto sul web? Nessun problema, basta copiare e incollare il link al file e si può utilizzare senza caricarlo sui nostri server.
Basta fare in modo che questa immagine non verrà rimosso da dove lo trovate.
È possibile trascinare e rilasciare un'immagine direttamente da un browser aperto sulla superficie NinjaMock design. Aggiungeremo automaticamente l'immagine facendo riferimento all'URL dell'immagine.
Icone disegnate manualmente
A volte è più conveniente creare la tua icona quando non riesci a trovare nulla che si adatti alle tue esigenze. Utilizzando potenti strumenti di editing vettoriale di NinjaMock è possibile creare rapidamente un'icona sul proprio.
Segui questi 3 semplici passaggi per creare la tua icona:
1. Usa qualsiasi strumento di editing vettoriale per disegnare ciò di cui hai bisogno.
2. Selezionare gli elementi appena disegnati.
3. Fare clic destro e scegliere Esporta selezione in -> Le mie immagini....
Il tuo disegno vettoriale verrà ora salvato come immagine riutilizzabile nel tuo spazio personale sui nostri server. D'ora in poi puoi usare questa immagine come fonte di icone. Nell'esempio seguente, puoi vedere un'icona disegnata manualmente che viene utilizzata all'interno dell'elemento della barra delle schede dell'iPhone:
Supporto Video
Ninjamock ti consente di utilizzare video esterni nei tuoi progetti aggiungendo semplicemente l'URL in cui il video è memorizzato. Ninjamock supporta video da YouTube, Vimeo, Dailymotion e Rumble. O anche file video con formati come MP4, WEBM e OGG.
Supporto Emoji
In Ninjamock puoi utilizzare emoji standard nei tuoi progetti, che possono essere ridimensionati e posizionati ovunque nei tuoi progetti.
Stencil personalizzati
Se non riesci a trovare uno stencil è necessario, si può fare da soli direttamente in NinjaMock wireframe editor. È possibile creare i propri elementi riutilizzabili da qualsiasi selezione di oggetti creati sulla superficie del progetto.
Gli stencil personalizzati sono attualmente disponibili solo nel progetto in cui sono stati creati.
Ecco come creare il proprio stencil riutilizzabile:
1. Crea tutto ciò di cui hai bisogno utilizzando stencil esistenti e/o disegnando elementi unici (a proposito, abbiamo potenti strumenti di editing vettoriale).
2. Seleziona tutti gli elementi che desideri includere nel tuo stencil personalizzato.
3. Fare clic destro, scegliere Assets -> Converti in asset.
Lo stencil appena creato verrà aggiunto al gruppo "Le mie risorse" nella parte inferiore della casella degli strumenti e ora è possibile utilizzarlo in qualsiasi pagina del progetto corrente.
È possibile modificare lo stencil in qualsiasi momento (fare clic destro, scegliere Assets -> Modificare asset) e le modifiche verranno applicate a tutte le istanze dello stencil in tutto il progetto.
Grafica vettoriale
NinjaMock wireframe editor dispone di potenti strumenti di editing vettoriale incorporati. Oltre a elementi semplici come linee, cerchi e rettangoli, NinjaMock wireframe editor include anche una matita a mano libera e uno strumento penna (con supporto curva di Bezier) per la creazione di forme di qualsiasi tipo.
Gli strumenti di modifica vettoriale si trovano nella tavolozza strumenti sul lato sinistro della superficie di disegno.
Come funzionano gli strumenti di disegno?
Gli strumenti di disegno (linea, rettangolo, ellisse, penna e matita) funzionano in modo leggermente diverso dal resto degli stencil. Per iniziare a disegnare una forma, scegliere un punto di partenza, tenere premuto il tasto sinistro del mouse e spostare il mouse sul punto finale desiderato. Rilasciare il tasto sinistro del mouse quando la forma è pronta. Il comportamento del disegno è molto simile agli strumenti che potresti conoscere da altre applicazioni di disegno professionali.
Se la tua forma risulta essere della dimensione sbagliata, non preoccuparti: puoi sempre cambiarla in seguito, ridimensionandola con un mouse o utilizzando il riquadro delle proprietà per apportare modifiche.
Iniziamo con i semplici strumenti di disegno:
Strumento linea
Con uno strumento di linea è possibile ... ta-da! - traccia una linea.
Scorciatoia: L chiave.
Per disegnare una linea retta, tenere premuto il tasto Maiusc durante il disegno. Quindi lo strumento si aggancerà a incrementi di 15 gradi per aiutarti.
Lo strumento linea produce linee abbozzate. L'applicazione disegna un percorso complesso dietro le quinte che rende la linea un aspetto disegnato a mano. Se hai bisogno di una linea non abbozzata (completamente dritta), puoi usare il nostro strumento penna o convertire la tua linea in un percorso.
Strumento Rettangolo
Con uno strumento rettangolo è possibile ... drum-roll-disegna un rettangolo.
Scorciatoia: R chiave.
Per bloccare le proporzioni della forma, tenere premuto il tasto Maiusc durante il disegno.
Lo strumento rettangolo produce anche forme abbozzate proprio come lo strumento linea. Se hai bisogno di un rettangolo non abbozzato, puoi usare il nostro strumento rettangolo o convertire il tuo rettangolo in un percorso.
Strumento Ellisse
Con uno strumento ellisse è possibile aggiungere grandi ellissi cercando ai vostri progetti.
Scorciatoia: C chiave.
Per bloccare le proporzioni della forma, tenere premuto il tasto Maiusc durante il disegno.
Diamo un'occhiata ai nostri strumenti vettoriali più avanzati:
Strumento penna
Con uno strumento penna è possibile creare qualsiasi tipo di polilinee e poligoni.
Scorciatoia: P chiave.
La penna è utile per fare un rapido schizzo di una forma (aggiungendo punti di controllo) prima di applicare le curve di Bezier con lo strumento Modifica tracciato. È inoltre possibile aggiungere curve di Bezier mentre si aggiungono i punti di controllo semplicemente trascinando mentre si aggiunge un punto.
Suggerimenti su come utilizzare lo strumento penna:
Per aggiungere un punto a qualsiasi tracciato esistente, selezionare lo strumento penna e fare clic in qualsiasi punto del tracciato per aggiungere un altro punto.
Per rimuovere un punto da un tracciato, selezionare lo strumento penna e fare clic sul punto esistente che si desidera rimuovere.
Per chiudere un poligono è sufficiente aggiungere l'ultimo punto direttamente in cima al primo punto. Il cursore del mouse cambierà per indicare che il poligono sarà ora chiuso.
Strumento Modifica percorso
Con lo strumento Modifica percorso è possibile modificare qualsiasi percorso esistente, indipendentemente da come è stato creato, sia con penna, matita o qualsiasi altro strumento di modifica vettoriale.
Scorciatoia: A chiave.
Lo strumento Modifica tracciato è utile per apportare modifiche ai tracciati, ad esempio spostando i punti e modificando le curve di Bezier.
Come creare una curva usando lo strumento modifica tracciato:
1. Passa il mouse sopra il punto di tracciato che desideri trasformare in un punto di controllo per una curva.
2. Tenere premuto il tasto Alt (tasto Opzione su Mac) e" tirare " il cursore del mouse su qualsiasi lato, lontano dal punto mentre si fa clic verso il basso.
3. Verranno visualizzate le maniglie di regolazione della curva (punti blu collegati con una linea sottile nell'illustrazione). Utilizzare queste maniglie per regolare la curva secondo necessità.
4. È anche possibile convertire una curva in un angolo angolato normale facendo clic alt sul punto di controllo.
Strumento matita
Con lo strumento Matita è possibile creare qualsiasi disegno a mano libera.
Scorciatoia: Y chiave.
Basta fare in modo che hai buone abilità di disegno a mano: -) Una scheda Wacom o altro disegno tablet può tornare utile quando si utilizza lo strumento Matita.
Strumento mano
È possibile utilizzare lo strumento mano per pan intorno alla superficie di disegno. E ' conveniente quando si dispone di un elevato livello di zoom applicato ed è necessario effettuare regolazioni di scorrimento delicati per portare le cose in vista.
Scorciatoia: H chiave. In alternativa, è possibile tenere premuto il tasto Spazio e utilizzare il tasto sinistro del mouse per attivare temporaneamente lo strumento mano. Ciò è utile quando si utilizza un altro strumento (penna, ad esempio) e si deve scorrere senza disattivare la penna. Basta rilasciare il tasto Spazio e la penna diventerà lo strumento attivo ancora una volta.
Forme geometriche
Nel nostro toolbox troverai molte forme vettoriali più comunemente usate.
Queste forme vengono visualizzate in tutti i tipi di progetti (gli altri stencil nella casella degli strumenti sono specifici per un tipo di progetto).
Proprietà comuni degli oggetti vettoriali
Tutti gli oggetti vettoriali sono supportati da un insieme comune di proprietà: pennello tratto, larghezza tratto e pennello riempimento (se applicabile).
Questo vi dà la flessibilità di disegnare rapidamente una forma in uno stile che corrisponde al resto del vostro disegno.
Link alla pagina indicatori visivi
A volte potresti scegliere di aggiungere solo alcuni link attivi ai tuoi wireframe. In questi casi, può essere difficile per gli spettatori sapere quali elementi nel design sono effettivamente cliccabili. Per questo motivo abbiamo incluso la possibilità di attivare e disattivare alcuni indicatori di collegamento pagina sottili quando si visualizza un progetto in modalità condividi o anteprima. Questi segnali forniscono un'indicazione visiva degli elementi cliccabili presenti in ogni pagina del progetto.
Se hai assegnato un collegamento pagina a qualsiasi elemento in modalità progettazione, un corrispondente indicatore di collegamento pagina verrà visualizzato su tale elemento durante la visualizzazione del progetto in modalità condividi o anteprima.
Gli indicatori di collegamento pagina sono attivati per impostazione predefinita in modalità anteprima o condivisione, ma possono essere facilmente disattivati facendo clic sull'interruttore collegamento nell'angolo in alto a destra della pagina.
Copia e incolla
Puoi facilmente copiare e incollare elementi tra pagine o progetti. È possibile copiare e incollare all'interno dello stesso progetto wireframe, o copiare da un progetto e incollarlo in un altro progetto che è aperto in una scheda diversa, finestra o anche un browser diverso.
Basta selezionare gli elementi nel vostro disegno che si desidera copiare e utilizzare la combinazione di tasti Ctrl+C (Cmd+C su Mac) sulla tastiera per copiarli negli appunti.
Per incollare gli elementi che sono ora negli appunti, basta passare alla pagina del progetto in cui si desidera copiarli e premere i pulsanti Ctrl + V (Cmd + V su Mac) sulla tastiera. Ecco fatto! Gli elementi incollati vengono ora copiati nella nuova posizione.
Per motivi di sicurezza, la copia tra le schede del browser funziona solo quando si utilizzano le scorciatoie da tastiera. Non funzionerà dal menu contestuale attivato con il tasto destro del mouse.
Incollare grafica
NinjaMock supporta il flusso di lavoro anche quando si lavora con disegni ad alta fedeltà in altre applicazioni grafiche come Adobe Photoshop. Anche se potresti essere finito con le fasi concettuali e wireframing del tuo lavoro di progettazione, puoi comunque usare facilmente NinjaMock per continuare il tuo flusso di lavoro incollando i tuoi disegni pixel-perfect in NinjaMock. Questo rende facile per voi per distribuire i vostri disegni visivi lucido ai vostri collaboratori, stakeholder e clienti per il feedback e l'approvazione. Niente più thread di posta elettronica pesanti o condivisioni di file ingombri per gestire le tue recensioni di design!
Quando hai finito con il tuo lavoro di progettazione mockup nell'applicazione grafica di tua scelta, tutto quello che devi fare è usare il comando Copia dell'applicazione per copiare i disegni che hai lì, tornare a NinjaMock e quindi incollare la grafica in NinjaMock con la combinazione di tasti Ctrl+V (Cmd+V su Mac). Non devi più preoccuparti di salvare o esportare il tuo lavoro di progettazione come file di immagine dall'applicazione grafica! È inoltre possibile utilizzare la funzionalità degli appunti del sistema operativo per copiare la grafica desiderata. Ad esempio, su un Mac è possibile utilizzare la combinazione di tasti Cmd+Ctrl+Maiusc+4 per aprire il riquadro Selezione copia appunti, trascinare la selezione per adattarsi a ciò che si desidera copiare e quindi incollarlo in NinjaMock.
La trasparenza non è supportata. Le aree trasparenti nelle immagini copiate da altre applicazioni verranno visualizzate con uno sfondo bianco.
A causa di alcune restrizioni, questo tipo di incollare non è attualmente supportato nel browser Firefox.
Collaborazione
L'idea fondamentale dietro wireframing è di comunicare le vostre idee. Condividi il tuo lavoro con il tuo team o i tuoi clienti per ottenere un feedback immediato e assicurarti che tutti siano aggiornati con la progressione del progetto.
Condividere
Con un solo clic puoi condividere il tuo progetto wireframe con chiunque. NinjaMock genera automaticamente uno speciale collegamento segreto (ad es. "ninjamock.com/s/some-code") che può quindi essere utilizzato per aprire e visualizzare il progetto.
Le persone con cui condividi questo link non hanno bisogno di un account NinjaMock. Ciò è particolarmente utile per inviare il tuo lavoro ai tuoi clienti che non utilizzano strumenti wireframing. Anche se i tuoi clienti non hanno un account NinjaMock, possono comunque visualizzare i disegni e i commenti e persino aggiungere i propri commenti al tuo progetto.
Se qualcuno che non ha un account NinjaMock lascia un commento sul tuo wireframe o mockup, l'autore del commento verrà visualizzato come "Shadow Ninja #some-number". Questo è un account temporaneo speciale che creiamo al volo appositamente per i non clienti quando aggiungono commenti.
Come iniziare a condividere il tuo progetto:
1. Nella barra di navigazione in alto, fai clic sul pulsante Condividi.
2. Fare clic sul pulsante "avvia condivisione".
3. Invia il link generato automaticamente a chi desideri.
Per interrompere la condivisione del progetto, fai clic sul pulsante "Interrompi condivisione" nella stessa finestra di dialogo. Il tuo link segreto non funzionerà più fino a quando non inizi a condividere di nuovo.
Condivisione parziale
È comune che tu voglia condividere con i tuoi clienti solo una parte specifica del tuo progetto wireframe senza che questi accedano alle sezioni non completate. Si potrebbe desiderare di continuare a lavorare sulla parte successiva del progetto in attesa di loro di rivedere le cose che è pronto. Utilizzando i nostri stati di pagina è possibile controllare facilmente quali pagine sono condivise e quali no.
Nell'illustrazione sopra, vengono condivise solo le pagine con lo stato "Design complete" o "Approved". Chiunque utilizzi il link segreto (incluso te stesso se vuoi testarlo) non vedrà alcuna pagina wireframe contrassegnata come "In progress".
Pagina di avvio
Per testare vari flussi all'interno del wireframe, è spesso utile scegliere una pagina specifica in cui desideri che i tuoi revisori inizino a visualizzare i tuoi progetti. In NinjaMock, è possibile impostare la pagina di avvio direttamente nella finestra di dialogo Condividi.
La pagina di avvio viene salvata all'interno del progetto stesso. Ciò significa che puoi modificare la pagina di avvio in qualsiasi momento senza inviare tonnellate di diversi link segreti ai tuoi clienti. Chiunque acceda al tuo progetto tramite il link segreto inizierà nella stessa pagina di avvio.
Apertura su dispositivi mobili
Progetti NinjaMock possono essere aperti anche su tablet e smartphone, che lo rende molto comodo per vedere come i vostri disegni wireframe e mockup appaiono su dispositivi specifici!
Lavorare come una squadra
Essere in grado di condividere un progetto per la revisione e ricevere commenti a volte non è sufficiente. NinjaMock wireframe editor ti consente di condividere il tuo spazio di lavoro e collaborare in tempo reale con il tuo team. Invita i tuoi partner commerciali e colleghi a partecipare al tuo progetto e assegna loro i privilegi in modo che possano contribuire direttamente.
Being able to share a project for review and receive comments is sometimes not enough. Ninamamock editorireframe editor allows you to share your workspace and collaborate in real time with your team. Invite your business partners and colleagues to participate in your project and give them privileges so they can contribute directly.
Ruoli di accesso
Le autorizzazioni per l'area di lavoro sono definite con il ruolo assegnato dall'utente. Ci sono quattro ruoli in NinjaMock: proprietario, amministratore, designer e revisore.
Chi può fare cosa?
Owner - è l'utente che crea cartelle e progetti. Il proprietario ha il pieno controllo sul progetto. Il titolare invita i collaboratori e assegna loro ruoli. Ogni progetto creato conta per il numero di progetti disponibili del proprietario.
Amministratore - ha il pieno controllo su cartelle e progetti e può invitare altri collaboratori. I progetti non contano per il numero di progetti wireframe e mockup disponibili per l'account dell'amministratore.
Designer - come ci si potrebbe aspettare i progettisti lavorano nel progetto. Tuttavia, questo utente non sarà in grado di amministrare altri utenti e i loro ruoli. Il progetto inoltre non conta per il numero di progetti disponibili per conto proprio dei progettisti.
Recensore - il ruolo con il minor numero di autorizzazioni è il revisore. Come spiega il nome, possono visualizzare il progetto e commentarlo, ma non saranno in grado di progettare nel progetto e modificare i modelli. Inoltre, i revisori non possono amministrare altri utenti e i loro ruoli. Il progetto non conta per il numero di progetti disponibili per conto proprio dei revisori.
Condividere un'area di lavoro
Condividere l'area di lavoro del progetto non è mai stato così facile: è sufficiente fare clic sull'opzione Team all'interno dell'editor del progetto.
Puoi anche avviare la condivisione dell'area di lavoro dall'elenco dei progetti wireframe e mockup nella pagina I MIEI PROGETTI utilizzando l'opzione Gestisci team a livello di progetto, cartella o account.
Quando invii inviti a condividere l'area di lavoro, puoi aggiungere utenti NinjaMock esistenti o invitare nuovi utenti a creare il proprio account NinjaMock e partecipare al progetto.
È possibile aggiungere tutti i collaboratori che si desidera.
Gestione squadra
Come proprietario del progetto, hai il pieno controllo dei tuoi progetti wireframe e mockup.
NinjaMock wireframe editor consentono di impostare i privilegi utente sia a livello di progetto, cartella e account. Assegna ai tuoi collaboratori tanto o poco potere sul progetto quanto vuoi: rendili amministratore, designer o revisore.
Il team di gestione funziona su tre diversi livelli: account, cartella o progetto. Aggiungere le autorizzazioni e avere la completa personalizzazione dei diritti di accesso e le autorizzazioni. Le autorizzazioni impostate al livello più basso avranno sempre la precedenza.
Accesso all'area di lavoro condivisa
Se qualcuno condivide un'area di lavoro del progetto con te, riceverai un'e-mail con un link per accedere al progetto. Se non hai ancora un account NinjaMock, ti verrà chiesto di crearne uno. Questo richiede solo pochi secondi!
Insieme all'accesso al progetto, ti verranno assegnate determinate autorizzazioni: amministratore, progettista o revisore. Queste autorizzazioni sono fornite dal proprietario dell'account.
Accedi all'area di lavoro di tutti i progetti (tuoi o condivisi con te) da un unico posto: I miei progetti. Passare da un account all'altro per accedere ai propri progetti.
Oltre all'accesso al progetto, è possibile che venga concesso l'accesso a cartelle o livelli di account. In questo modo avrai gli stessi diritti per tutti i progetti nella cartella o per l'intero account.
I progetti che sono stati condivisi con te non influiranno sul conteggio dei progetti del tuo piano.
Lavorare insieme
Collaborazione su un progetto significa che tutti gli utenti possono accedere all'area di lavoro del progetto e contribuire al progetto in base ai loro privilegi.
Tutte le modifiche e le mosse vengono visualizzate al resto del team in tempo reale e salvate sul server.
Stato pagina
Si potrebbe desiderare di tenere traccia dei progressi del vostro lavoro, al fine di capire quanto vicino il progetto è al completamento. In NinjaMock wireframe editor, tu e i tuoi revisori potete controllare lo stato delle singole pagine.
Ogni singola pagina può avere uno dei seguenti stati "In corso" (stato predefinito), "Progettazione completa" e "Approvato".
Tutte le modifiche allo stato di una pagina avvengono manualmente. Non abbiamo implementato flussi di lavoro complessi che dettano chi può modificare uno stato o a che ora. Invece, abbiamo deciso di mantenerlo semplice e flessibile; qualsiasi utente che abbia accesso al tuo progetto può modificare qualsiasi stato in qualsiasi momento.
Lo stato della pagina viene sincronizzato in tempo reale, quindi non è necessario aggiornare il browser per visualizzare lo stato più recente di una pagina.
Panoramica del progetto
Per visualizzare lo stato di un intero progetto wireframe o mockup anziché di una pagina specifica, è possibile utilizzare la pagina Web Panoramica del progetto. È possibile accedervi cliccando su "Panoramica".
La pagina Panoramica contiene i dettagli di tutte le pagine del progetto, ad esempio lo stato della pagina e il numero di commenti non risolti.
Esporta in PDF/PNG
Esportare in PDF e stampare su carta è ancora una parte essenziale del wireframing. Molti creatori di idee stampano i loro wireframe e li mettono sulle pareti dell'ufficio; alcuni li usano per l'ispirazione, altri stanno discutendo i disegni come gruppo e aggiungono commenti direttamente sul muro.
In NinjaMock wireframe editor sosteniamo questa pratica dandovi la possibilità di esportare i wireframe con link di pagina e commenti di pagina. In questo modo puoi navigare nell'interazione del tuo design anche quando è su carta.
Quando esporti e scegli di includere commenti, aggiungiamo tutti i commenti della pagina accanto alla pagina wireframe.
I commenti hanno gli stessi numeri di commento unici che hanno nella superficie di design di NinjaMock.
Esporta in HTML
Puoi anche esportare i tuoi Progetti come HTML. L'esportazione come HTML consente di scaricare i file sul computer o aggiungerli al proprio server Web per un comodo accesso e archiviazione. Questo può essere utile per condividere i tuoi progetti con i tuoi partner e clienti.
I prototipi HTML offrono un'esperienza più interattiva durante l'anteprima del lavoro, ad esempio, consentendo di digitare testo e contrassegnare le caselle di controllo.
Gestione del progetto
Ci piace tenere le cose organizzate all'interno di NinjaMock wireframe editor. Forniamo modi convenienti per raggruppare le pagine all'interno dei tuoi progetti e ti permettiamo anche di organizzare i tuoi progetti all'interno di cartelle, proprio come i file sul tuo computer.
Gruppi di pagine
Quando il progetto cresce e diventa più difficile da navigare, è bello separare le pagine in gruppi. Ad esempio, è possibile raggrupparli in base alle rispettive aree nella progettazione dell'applicazione; ad esempio, pagine di accesso, pagine delle impostazioni, ecc.
Un gruppo di pagine è semplicemente un insieme di pagine con nome (una pagina può essere solo in un gruppo alla volta). È possibile creare tutti i gruppi necessari, spostare le pagine tra i gruppi o ordinarli all'interno di un gruppo.
Per creare gruppi di pagine, espandere il riquadro Pagine facendo clic sull'icona corrispondente nell'angolo in alto a destra del riquadro.
Cartelle di progetto
Pensa ai file sul tuo computer per un momento. Quando hai troppi file e diventa difficile trovare quello che vuoi, è sufficiente creare cartelle e spostare i file all'interno, giusto?
Abbiamo riprodotto la stessa esperienza in NinjaMock; è possibile creare cartelle di progetto, mettere diversi progetti wireframe e mockup in cartelle, spostare le cartelle in altre cartelle, ecc. Questo è un modo conveniente e familiare per organizzare il tuo lavoro.
Per spostare un progetto (o una cartella) in una cartella:
1. Evidenziare (passare il mouse sopra) l'elemento nell'elenco progetti.
2. Fare clic su " Sposta..."testo-collegamento.
3. Selezionare la cartella di destinazione e terminare facendo clic sul pulsante Sposta.
Per espandere o comprimere la cartella nel popup fare clic sull'icona della cartella grigia.
Guida rapida-per l'editor Wireframe
Commentare
NinjaMock wireframe editor offre un modo intuitivo e familiare per lasciare commenti sui singoli wireframe e per monitorare il loro stato.
I commenti sono specifici per la pagina in cui sono lasciati. Se una pagina viene eliminata, i commenti corrispondenti non saranno più visibili.
I nostri commenti sono sincronizzati in tempo reale, quindi non è necessario riaprire o aggiornare il progetto per ottenere gli ultimi commenti!
Aggiunta di commenti
Nuovi commenti possono essere aggiunti sia dal riquadro Commenti sul lato destro della superficie di progettazione, o semplicemente facendo clic destro in qualsiasi punto del wireframe e scegliendo "Aggiungi commento" dal menu a comparsa.
Non abbiamo alcuna restrizione su chi può lasciare o modificare commenti. Chiunque apre il progetto può aggiungere, modificare o addirittura eliminare qualsiasi commento.
Commento bolle
Ogni commento è rappresentato da un'icona blu' fumetto ' sulla superficie del disegno. All'interno del fumetto, viene visualizzato un numero di commento univoco.
È possibile spostare liberamente la bolla in qualsiasi punto della superficie del design per aiutare lo spettatore a capire a quale elemento wireframe si riferisce il commento.
Fare doppio clic sull'icona del fumetto per visualizzare o modificare il commento.
Monitoraggio dello stato dei commenti
Quando un commento viene risolto, l'icona a forma di fumetto è disattivata e il commento viene spostato in fondo all'elenco nel riquadro Commenti. Questo ti aiuta a concentrarti sui commenti attivi (non risolti) che vengono visualizzati nella parte superiore dell'elenco dei commenti.
Per verificare se ci sono commenti non risolti nell'intero progetto, utilizzare TUTTO passa nella parte superiore del riquadro Commenti. In questo modo vedrai i commenti per tutte le pagine piuttosto che i commenti solo per la pagina corrente.
Fare clic su un commento icona a forma di fumetto e sarete portati direttamente alla pagina in cui quel commento è stato lasciato. Anche la posizione di scorrimento verrà regolata in modo che questa icona a forma di fumetto sia posizionata al centro dello schermo.
Notifiche e-mail
NinjaMock wireframe editor dispone anche di notifiche e-mail automatiche quando vengono aggiunti nuovi commenti o risposte.
Come proprietario del progetto, riceverai notifiche sui commenti di tutti i revisori.
I revisori, tuttavia, riceveranno solo notifiche per i thread di commento a cui partecipano se sono un utente NinjaMock registrato. Non-NinjaMock-gli utenti che accedono al progetto tramite il link segreto e lasciano commenti non saranno notificati.