it-swarm-eu.dev

Quali strumenti di prototipazione?

Questo si collega fortemente alla seguente domanda:

Tuttavia, non volevo limitare i suggerimenti agli strumenti "Web Based", in passato ho trovato e utilizzato i seguenti strumenti per prototipazione, wireframing e modelli con successo:

Sono anche consapevole del fatto che alcuni designer scelgono di utilizzare applicazioni grafiche come Photoshop e Illustrator per l'attività.

Questa è una domanda Wiki della comunità, quindi pubblica i tuoi pensieri, prova a tenerlo in un pacchetto per risposta in modo da poter creare un'idea di come la comunità si sente su questi strumenti.

34
Richard Slater

È importante per me mantenere la mia prototipazione in almeno due thread e tre se sto cercando di comprendere interazioni dettagliate con l'animazione.

Discussione 1: Flusso, funzione, forma e dati

  • A partire dalla carta (in realtà di solito una sessione di progettazione lavagna con altri). Concentrati sul flusso dello schermo, quindi sulle principali funzioni e potenziali layout di schermi particolarmente importanti. Prova per almeno due idee diverse.
  • Prossimo livello di fedeltà in Balsamiq. Aggiungi dettagli funzionali, ottimizza il layout, aggiungi dati di esempio concreti e significativi allo schermo (nel contesto di uno scenario dimostrabile).
  • Crea un prototipo del flusso di lavoro mettendo insieme uno scenario passo dopo passo, a percorso singolo con schermate e interazioni specifiche previste per passare alla schermata successiva. Tendo a usare PowerPoint, mettendo in sequenza tutti i modelli di schermo. Questo prototipo consente di ottenere un feedback tempestivo con utenti reali tramite passaggi pluralistici , che sono molto efficaci per perfezionare concetti, flussi di lavoro, requisiti funzionali, terminologia, ecc.
  • Iterate presto, spesso e rapidamente.

Discussione 2: Programma visivo e stile

  • Usando alcuni dei modelli chiave del thread 1, visualizzali (come comps) con dettagli a livello di pixel usando Photoshop o altri meccanismi simili. Esplora colori, proporzioni, metafore visive, tipografia, ecc. Genera almeno 3 idee.
  • Ottieni feedback su questi indipendentemente dai prototipi del flusso di lavoro. Usa test delle preferenze, test AB, critiche, caratteri , ecc.
  • Scorrere e perfezionare.

Discussione 3: interazione dettagliata e animazione

  • Concentrandosi su una singola interazione dettagliata o sequenza di animazioni, hackerare insieme un prototipo funzionale in qualunque strumento funzioni meglio per te: HTML/CSS/JS, Flash, linguaggi di programmazione di livello inferiore, framework/librerie di componenti dell'interfaccia utente, ecc. Almeno due interazioni alternative .
  • Esegui un numero limitato di brevi test di usabilità, inclusa la raccolta dei dati di temporizzazione. Fai test comparativi. Conta i tasti/i movimenti del mouse/i gesti.
  • Scorrere e perfezionare.

In sintesi, costruisci tipi specifici di prototipi per scopi specifici ... per rispondere a domande specifiche. Nessun tipo funziona per tutte le situazioni. Tieni le preoccupazioni estetiche fuori dal flusso di feedback/flusso di feedback delle funzioni. Utilizzare metodi appropriati ed efficaci per i diversi tipi di domande. "Non attraversare i corsi d'acqua."

Ho scoperto che quasi tutti i miglioramenti fondamentali del design provengono dal thread 1 e thread 2, ma il thread 3 è necessario se si va oltre i controlli standard o il dominio è nuovo/complesso/specifico (ad esempio interazioni gestuali, modello multidimensionale manipolazione, controlli personalizzati per un nuovo sistema operativo sofisticato, ottimizzando le prestazioni umane in alcune dimensioni).

35
Jim Jarrett

Pencil è un buon strumento per la creazione di mockup dell'interfaccia utente. È disponibile come componente aggiuntivo di Firefox o applicazione autonoma .

alt text

Ha un vantaggio rispetto ad alcuni degli altri strumenti citati perché è gratuito e open source.

12
david4dev

Ho letto un articolo molto interessante qualche tempo fa che si chiamava "Per disegnare o non disegnare" - dovresti dare un'occhiata: domanda di schizzo Ogni volta che è necessaria la creatività non dovresti limitare i tuoi pensieri con strumenti usate. La mia scelta personale per le pulizie successive è uno strumento vicino all'area con cui sto gestendo. Per HTML/CSS di solito inizio con layout semplici e aumento i dettagli passo dopo passo. Lo stesso potrebbe rivelarsi utile anche per altre aree. Prototipazione dal minimo al maggiore dettaglio. Quindi non ho uno strumento particolare da raccomandare ... dipende.

Quindi non ho uno strumento particolare da raccomandare ... dipende .

10

Personalmente uso Balsamiq per le prime revisioni, quindi vado direttamente a un prototipo HTML usando un framework CSS come Blueprint .

8

Interessante che Adobe Fireworks abbia ottenuto poco amore su questo sito.

Tra l'altro, mi sono divertito

  1. Costruire in diversi stati
  2. Pagine mastro
  3. A oggetti HTML, come collegamenti e icone, può essere assegnato un markup che verrà esportato (collegamenti interni ed esterni, metadati, tutta quella bontà)
  4. Esporta layout basati su CSS e conformi agli standard con fogli di stile reali
  5. Integrazione nativa di Illustrator e Photoshop per loghi, ecc.

Mi piace Balsamiq per aver lanciato un IA a un cliente, poi Fireworks per un prototipo navigabile una volta che un designer ha collaborato. Il lavoro svolto in Fireworks viene esportato abbastanza facilmente in HTML e CSS che si traducono abbastanza facilmente in un sito statico completo o come pagine/temi modello per un sito dinamico.

8
Matt

Sto per dire che solo la carta è il miglior strumento prototipo. Sì, è ovvio, ma è meglio dell'avvio elettronico.

  • La carta dice al cliente che questa è un'idea, una delle tante possibili.
  • La carta non consente al cliente di rimanere impigliato in caratteri, colori, forme o immagini. C'è una ragione che balsamiq ha scelto i wireframe in stile schizzo.
  • Le revisioni sono veloci
  • È facile ottenere la loro vera calligrafia su di esso e non li intimidisce dal disegnare su di esso.
  • Puoi scansionarlo o inviarlo via fax se ne hai bisogno per passare all'elettronica.

Sono un grande fan dei prototipi funzionali html dopo, ma la carta abbassa la barriera al brainstorming e test rapidi dell'interfaccia utente.

È facile guidare qualcuno attraverso uno schizzo di carta:

"Where do you click if that transaction was a mistake?"
"Great now what do you do to find out which kitten has the highest durability?"

Se non inizi con gli schizzi e ottieni una convalida dell'utente, stai saltando la pistola e diventa più costoso annullare e iterare in seguito.

5
MattK

Preferisco fare mockup dell'interfaccia utente Web in HTML/CSS.

  1. La prototipazione funzionale è una soluzione molto migliore perché gli utenti ottengono un'esperienza reale piuttosto che un'esperienza non dimensionale (guardando Photoshop).

  2. I prototipi funzionali non sono lavori usa e getta.

  3. È molto più veloce scorrere su un prototipo funzionale durante un ciclo di feedback

4
abrudtkuhl

Io uso Axure .

Sebbene piuttosto costoso (quasi $ 600 per licenza), offre una straordinaria flessibilità e consente di personalizzare quasi tutto.

Essere in grado di utilizzare i propri controlli (o i relativi modelli), i master, ecc. È fondamentale quando si crea un'applicazione anziché un sito Web.

4
Dan Barak

Carta e HTML sono i migliori.

Schizzi veloci su carta. Quindi crea la cosa reale in HTML. StaticMatic testo del link è ottimo per la prototipazione.

In passato ho usato Axure, ma il wireframing è una perdita di tempo.

3
Miki

Vorrei anche votare per Axure. Il nostro ufficio utilizza i suoi strumenti di collaborazione per dividere le responsabilità tra i nostri IA e grafici.

Sebbene non sia Omnigraffle, le opzioni di wireframing sono più che adeguate. Il software ha una grande funzionalità di master, quindi possiamo aumentare rapidamente la fedeltà di un prototipo.

E come ha detto Dan, è completamente personalizzabile e crea documenti di specifica professionale.

r.

3
Robert Hamburger

Adobe InDesign. Può sembrare strano ma ci sono delle caratteristiche che mi piacciono:

  • Interfaccia in stile Adobe. Se hai lavorato con Photoshop o altri prodotti Adobe, sarebbe molto semplice passare a InDesign
  • potenti strumenti per lavorare con tipografia, tabelle, stili, griglie e così via
  • infatti puoi creare non solo un wireframe ma anche un design grafico
  • puoi esportare i wireframe come PDF cliccabili
3
Kostya

Sono d'accordo con alcune delle risposte precedenti ma vorrei aggiungere alcune informazioni aggiuntive e un suggerimento. Quasi inizio ogni progetto con la lavagna, le penne di diversi colori e anche alcuni post-it. Il modo più semplice per comunicare idee e ottenere feedback rapidi. A seconda del tipo di progetto, provo quindi a disegnare i principali diagrammi di flusso con un programma chiamato yEd . È un modo semplice per me di strutturare le idee. Se avessi un mac nelle vicinanze sceglierei OmniGraffle (un programma eccezionale per oltre il diagramma di flusso).

Continuo a realizzare prototipi in Balsamiq , Flow sketch and Illustrator per ottenere diversi tipi di prototipi low-fi e hi-fi.

Per quanto riguarda queste informazioni, ho trovato adatto avere una ricca cassetta degli attrezzi tra cui scegliere. È importante per me essere in grado di adottare approcci diversi a seconda del tipo di progetto.

2
Anna

Secondo il movimento di Daniel Bleisteiner: "Dipende".

Per il 90% dei progetti, considera il mio voto per la carta. La giustificazione per la carta abbonda di questo thread, quindi non ripeterò.

Il design non è mai lo stesso tra i progetti e certamente non tra i clienti. (Parlo di design nel senso più vago, ovvero design, sviluppo, prototipazione, wireframing - siamo sinceri, si stanno gradualmente fondendo l'uno con l'altro.)

Quindi, per l'altro 10% dei progetti, lo strumento di prototipazione dipenderà dal progetto. Se richiede una collaborazione a distanza, Axure potrebbe essere la migliore. Se è necessario lavorare con il team interno di un cliente che utilizza principalmente Adobe, Fireworks potrebbe essere la soluzione migliore. Ci sono molti strumenti. Sfortunatamente, per definizione, gli strumenti non possono adattarsi rapidamente come i problemi che sono stati creati per risolvere; quindi, molti di questi prodotti sembrano molto simili, ma non del tutto identici, tra loro. E sta a noi valutare quale sia la migliore per il lavoro.

Altre considerazioni: l'iPad sta iniziando a confondere i confini tra la collaborazione client di persona e il client di persona che ti guarda da sopra le spalle. Omnigraffle, SketchBook, TouchDraw, Draft e altre app per iPad stanno spianando la strada per una migliore esperienza di collaborazione. (Parlo di miglioramento come lavorare verso l'obiettivo finale di avere un cliente a proprio agio nel disegnare su un iPad come fa su carta, il vantaggio è che il client potrebbe usare un protoipo funzionale anziché una pagina statica. l'obiettivo finale è solo la mia opinione.)

2
Tyler Hayes

Seguo questi passaggi ...

1. Prototyping. Uso Balsamiq Mockups perché è facile. Il punto centrale della prototipazione è capire il layout di base delle cose. Questa è la fase in cui stai apportando cambiamenti drastici. Fortunatamente Balsamiq non pretende di essere tutto ciò che non è e rimane estremamente facile da usare. Per me è più veloce usare Balsamiq che disegnarlo. E ha il vantaggio di essere in grado di trascinare elementi sullo schermo piuttosto che cancellarli e ridisegnarli.

2. Finalizza il design. Uso Photoshop e talvolta un po 'Illustrator per questo in modo da poter perfezionare la grafica prima di scrivere qualsiasi codice.

È più difficile apportare modifiche drastiche al tuo design in Photoshop poiché tendiamo a lasciarti trasportare dalla perfezione dei pixel. Ed è ancora più difficile una volta che è nella tua applicazione. Quindi questo è il motivo della mia progressione e il motivo per cui inizio con lo strumento più semplice possibile ... Balsamiq.

2
Steve Wortham

Sono uno sketchpad/pencil-first e Balsamiq - secondo tipo di ragazzo. Successivamente, Photoshop risolverà i dettagli fino a quando non sarà abbastanza per entrare in HTML e CSS.

1
blackant

Balsamiq. È buono anche per i software basati su desktop ed è molto facile da imparare.

1
franz976

Vale anche la pena dare un'occhiata gomockingbird che sta uscendo dalla beta

1
Paul McKeever

L'agenzia interattiva di mia moglie ha avuto successo con:

http://www.mockflow.com/

Introduzione rapida e una quantità ragionevole di controlli e schermate integrati per prototipi e wireframe.

1
noluckmurphy

La domanda menziona la necessità di uno strumento di prototipazione ma non quanto sia realistico il tuo prototipo. Per un prototipo impreciso di tipo wireframe, concordo con la maggior parte dei commenti qui che penna/carta, Balsamiq o persino Visio sono buoni strumenti. Tuttavia, quando hai bisogno di un prototipo dall'aspetto più realistico, questi non lo faranno e quindi suggerirei di guardare ad artisti del calibro di Axure o Adobe Fireworks/Catalyst (iRise ha un prezzo troppo alto) e anche se ha i suoi problemi, sceglierei Axure .

0
Geert

Uso anche Pencil, anche se ha alcuni aspetti negativi:

  • nessuna gestione dei dati della tabella: se si desidera eseguire il wireframe di una tabella, ci si perde.
  • nessun WordWrap nelle caselle di testo. Quando provo a mettere un po 'di lorem ipsum, devo fare da solo il rivestimento. Che schifo.

tuttavia, questo strumento mi piace molto.

0
cukabeka

A volte utilizzo questo strumento http://www.hotgloo.com/

0
512x512

Poiché la tua domanda riguardava specificamente la prototipazione, presumo che tu stia facendo tutti i passi che ritieni necessari prima della prototipazione come schizzi, ecc.

Se il tuo prodotto verrà consegnato via Web, crea i tuoi prototipi utilizzando il Web (HTML, CSS, JS). Alla fine è più veloce, più economico e più preciso di qualsiasi altra cosa tu possa usare. Ho scoperto che strumenti come Axure vanno bene per cose semplici, ma richiedono quindi una curva di apprendimento ripida per fare qualcosa di moderatamente complesso. A quel punto, stai trascorrendo del tempo imparando uno strumento proprietario quando potresti apprendere gli standard Web che ti saranno più vantaggiosi a lungo termine.

Se sei preoccupato che un cliente pensi che sia "fatto", puoi tralasciare lo stile fino alla fine, tuttavia ho scoperto che più "reale" è il tuo prototipo, più facilmente viene valutato.

0
Craig Villamor

Dipende davvero da quale sia il progetto.

Se il sito Web che stai prototipando sarà composto da poche pagine con contenuto statico, l'utilizzo di un editor grafico come Photoshop o Fireworks probabilmente andrà bene. I consigli per mantenere gli elementi di design fuori dalla prototipazione "a tutti i costi" potrebbero non essere appropriati qui.

Tuttavia, dall'altra parte dello spettro in cui stai costruendo una grande applicazione con molti casi d'uso, consiglierei qualcosa di più simile alla risposta di Jim Jarrett. Vorrei aggiungere che le app su larga scala sono (o almeno dovrebbero essere) un processo iterativo: prototipo per la fase I e quindi prototipo di nuovo per una versione di fase II, ecc. Ciascuna di queste fasi della prototipazione può richiedere diversi livelli di dettaglio . Potresti finire per voler lavorare dalla build/dal prototipo della fase corrente, oppure potrebbe essere il momento di tornare ai primi principi e ricominciare da zero.

0
skybondsor

Axure è un ottimo strumento di wireframing/prototipazione/specifica. Ti consente di concentrarti su ciò che stai creando e rende le cose come annotazioni, note, interazioni, molto facili da specificare.

Il vantaggio è che quando si specificano le interazioni, quando si generano prototipi dai wireframe, tali interazioni si traducono in veri e propri widget funzionanti. (Axure genera prototipi HTML)

Puoi anche prendere un design dello schermo (ad esempio in JPEG) importare l'immagine, attivare le aree dell'immagine usando lo strumento "mappa immagine" e avrai quindi un prototipo di fedeltà più elevata!

Axure ti consente anche di creare azioni basate su variabili (puoi impostarle o leggerle). C'è anche il concetto di ottenere un widget per generare un evento, puoi avere un altro widget che ascolta l'evento e quindi quel widget può rispondere in qualche modo.

Posso andare avanti all'infinito ... Il lato negativo è il costo ~ $ 550, ma il risparmio di tempo ne vale la pena. Il loro supporto clienti, via e-mail, è eccezionale; di solito mi rispondono entro un paio d'ore ... a volte immediatamente.

0
milesmeow

Ho trovato Mockingbird ok per semplici wireframe. Non mi farà lasciare Omnigraffle in qualsiasi momento presto, ma è abbastanza buono per uno strumento basato sul web: http://gomockingbird.com/

0
fluxd

Dai un'occhiata a App Sketcher (attualmente in fase di rilascio candidato) per vedere se si adatta alle tue necessità. È uno strumento di prototipazione rapida HTML per la creazione di prototipi di wireframe e applicazioni web interattive. Utilizza un browser WebKit incorporato come area di progettazione in cui è possibile aggiungere componenti HTML, componenti dell'interfaccia utente jQuery, widget Web (come Google Maps e lettore YouTube) e modellarli con temi jQuery e proprietà CSS. È anche possibile definire azioni semplici. Gli utenti possono eseguire/testare il prototipo nel browser predefinito ed esportare l'origine HTML/CSS/JavaScript una volta soddisfatti del progetto. Questo strumento è più orientato verso l'esperienza simile ad Axure, ma enfatizza la "progettazione nel browser per l'esecuzione nel browser" in quanto garantisce che i modelli/wireframe siano realizzabili in fase di sviluppo con le tecnologie web.

Sono lo sviluppatore di questa applicazione. Mi dispiace per questa spudorata autopromozione. Tuttavia, penso che possa essere un buon strumento di prototipazione HTML e vale la pena dare un'occhiata.

0
Feng Chen