it-swarm.com.de

Was ist der Unterschied zwischen Wireframing und Prototyping?

Was ist der Unterschied zwischen Wireframing und Prototyping? Bin ich zu Recht der Meinung, dass Prototypen interaktiv und Drahtgitter statisch sein sollten?

38
Jitendra Vyas

Ich bin sicher, dass verschiedene Leute unterschiedliche Ansichten darüber haben werden, wie viel oder wie wenig Drahtgitter und Prototypen sich überschneiden. Was folgt ist, wie ich mich den beiden nähere:

Wenn Sie eine Anwendung oder eine Website in Betracht ziehen und beispielsweise die Seitenebene betrachten, sind ein Drahtmodell und ein Prototyp aus physikalischer Sicht oberflächlich dasselbe. Sie können sowohl Low- als auch High-Fidelity auf Papier oder digitalem Medium sein. Das Drahtmodell kann eine Vorlage für viele Seiten oder eine eindeutige Seite oder ein eindeutiger Bildschirm sein. Es ist ein Seitenschema.

Wenn Sie sich das Gesamtbild und die Verbindung mehrerer Bildschirme oder Seiten ansehen und die Navigation zwischen ihnen und die weniger greifbaren Aspekte der Benutzerfreundlichkeit und Interaktion berücksichtigen, verknüpfen Sie Drahtgitter (Plural) zu einem Prototyp. Der Prototyp ist ein nachweisbares System.

Der Prototyp kann immer noch sein eine einzelne Seite oder ein Bildschirm sein, aber er verkörpert eher ein Gefühl des Engagements als nur des visuellen Erscheinungsbilds.

Meiner Meinung nach unterscheidet sich also die Denkweise, mit der Sie sich den Schaltplänen nähern:

Denken Sie mehr nach dem Vorbild von 'Wie sieht es aus?' oder 'Welche Informationen und Funktionen werden angezeigt?' (Drahtmodell).

Oder denken Sie 'Wie interagiere ich damit?' oder 'Wie wird es verwendet?' (Prototyp).

Natürlich beziehen sich Prototypen häufig auf physische Produkte (wieder dort, wo sich der Benutzer mit dem Produkt beschäftigt), während Drahtmodelle normalerweise für eine bildschirmbasierte Interaktion gedacht sind, aber ich gehe davon aus, dass die Frage auf dem Unterschied in Bezug auf Websites und Software basiert

52
Roger Attrill

Wireframe - Grundsätzlich Skelton der Schnittstelle, etwas, das wir mit unserem BLUE PRINT vergleichen können Prototyping - Workable Dummy Output. Kombination aus Drahtmodell, Interaktion, Szenarien, Geschichten

13
Rajesh R. Nair

Ein Drahtrahmen wird verwendet, um Anforderungen zu erfassen, Ideen auszutauschen und die Spezifikation und Struktur zu skizzieren. Sie können auf einzelne Seitendiagramme beschränkt sein oder jetzt häufiger - eine vollständige Site. Sie sind Blaupausen ähnlich. Dies können Offline-Diagramme oder jetzt häufiger sein, die in einer speziellen Wire-Framing-Software erstellt wurden. Ein Drahtrahmen ist Teil des Planungsprozesses.

Ein Prototyp ist eine funktionierende oder simulierte Version eines Teils oder der gesamten Site und wird verwendet, um Feedback zu erhalten. Ein Prototyp ist Teil des TESTING-Prozesses. Sie können verwendet werden, um frühzeitig Kunden- oder Kundenfeedback zu erhalten, Schnittstellenkonzepte zu testen und/oder um die Fähigkeit des geplanten Layouts zu testen, auf reaktionsschnelle Weise gut zu arbeiten. Es wird immer üblicher, einen Wire-Framing-Prozess mit einem „Rapid Prototyping“ der wichtigsten Funktionen und reaktionsschnellen Layouts zu kombinieren, um frühzeitige Tests durchzuführen.

Nur meine Ansicht natürlich ...

Es gibt viele Überschneidungen, wobei viele Wire-Framing-Anwendungen auf die HTML-Seiten verweisen, die sie als "Prototypen" ausgeben, und einige Agenturen die Begriffe "Wire-Frames", "Schaltpläne" und "Prototypen" austauschbar verwenden. Es gibt keine harte Regel.

5
Richard

Wireframing und Prototyping sind in der Technologiewelt außerordentlich nützliche und wenig genutzte Tools. Website- und App-Wireframes sind nützlich, um das Layout und das allgemeine Erscheinungsbild jedes Bildschirms oder jeder Seite zu bestimmen. Prototyping ist ein effektives Werkzeug zur Validierung und zum Testen Ihres Entwicklungsunternehmens.

Wireframing

Wireframing ist wahrscheinlich der bekannteste dieser drei Designschritte für Apps und Websites. Es ist im Grunde ein Low-Tech-Prototyp… extrem Low-Tech. Wireframing ist im Grunde eine Skizze jeder Seite oder jedes Bildschirms in einer App oder Website. Es kann auf so etwas wie einer Plakatwand gemacht werden oder es einfach auf ein Whiteboard zeichnen.

Wir können auch einige digitale Drahtgitter herstellen. Digitale Drahtgitter sind großartig, weil sie leicht austauschbar und für das Endprodukt realistischer sind. Der gesamte Zweck eines Drahtgitters besteht darin, zu skizzieren, wie jeder Bildschirm Ihrer App aussehen wird - wo Sie beginnen, Layouts zu erstellen und über das Design Ihrer App zu entscheiden.

Ein Drahtmodell, das leicht austauschbar ist, bedeutet, dass Sie mehr Drahtgitter testen und sogar nebeneinander vergleichen können. Daher ist eine Wireframe-Website ein nützliches Werkzeug. Natürlich muss eine Wireframe-Website oder -App Storyboarding enthalten.

In einem Storyboard treten Sie im Grunde genommen einen Schritt von Ihren Drahtgittern zurück. Unser Wireframe-Designteam verwendet Storyboarding, um zu sehen, wie eine App oder Website insgesamt aussehen wird. Auf diese Weise bestimmen Sie, ob der Ablauf oder Ihre App logisch und sauber ist. Grundsätzlich untersuchen Sie das gesamte strukturelle Design.

Prototyp entwickeln

Beim Prototyping können Sie Ihre Idee validieren. Es ist im Grunde ein Proof-of-Concept:

  • Funktioniert Ihre Idee wie erwartet?
  • Tragen die Hauptfunktionen zum allgemeinen Zweck der App oder Website bei?
  • Funktionierte der Fluss der Website beim Storyboarding wie geplant?
  • Sind die Probleme (und ja, es wird Probleme geben - stellen Sie sicher, dass Sie für eventuell auftretende Hürden bereit sind) unüberwindbar?
  • Löst es das Problem, das Sie lösen müssen? Wenn nicht, löst es ein anderes Problem, auf das Sie sich konzentrieren können?

Ein Prototyp ist ein wesentlicher Schritt im App-Entwicklungsprozess. Über alle oben genannten Fragen hinaus hilft es Ihnen, einige vorläufige Tests durchzuführen. Wenn Sie eine Prototyp-Website erstellen, können Sie einer begrenzten Anzahl von Personen in Ihrem Zielmarkt Zugriff gewähren.

Wir haben festgestellt, dass frühzeitige Tests eine hervorragende Möglichkeit sind, um sicherzustellen, dass Ihre Idee tatsächlich Ihrem Zielmarkt hilft. In den meisten Fällen haben andere Entwicklungsunternehmen eine Website für ihre Kunden erstellt, die großartig aussieht. Aber es wurde nur von Designern überprüft - und nicht von den Leuten, die es entworfen haben.

Eine wichtige Sache, an die Sie sich bei der App- und Webentwicklung (oder wirklich in jedem Unternehmen) erinnern sollten, ist, dass Sie versuchen, sie an sich selbst oder an Entwickler zu verkaufen. Sie versuchen, es an Ihren Zielmarkt zu verkaufen. Wenn Sie möchten, dass Ihre App wächst, sind frühzeitige Tests von unschätzbarem Wert. Wenn Sie es mit Early Adopters testen, sorgen Sie für Begeisterung!

4
Rob la Pointe

Soweit ich weiß, geht es beim Prototyp um Verhalten und Funktionalität, beim Drahtmodell um das Ordnen, Positionieren und Dimensionieren von Elementen (Schaltflächen, Formulare usw.).

2
Dmitry Semenov

Roger betont, dass es eine andere Denkweise gibt, mit der Sie sich einem Drahtmodell oder einem Prototyp nähern.

Der Prototyp beschreibt ein breites Konzept und kann verwendet werden, um viele Artefakte zwischen frühen Skizzen mit niedriger Wiedergabetreue und einem fast fertigen Endprodukt mit hoher Wiedergabetreue zu beschreiben. Ein Prototyp muss nicht interaktiv sein, kann es aber sein. Ein Prototyp muss nicht digital sein, sondern kann auch für ein physisches Produkt sein. In einem Prototyp kann der Fokus auf einer beliebigen Kombination vieler verschiedener Eigenschaften liegen, einschließlich, aber nicht beschränkt auf Form, Funktion, Produktkonzept, Ästhetik, Optik, Materialien. Meiner Meinung nach besteht der Hauptwert von Prototypen darin, dass sie bei der Beantwortung von Fragen helfen (was wird das Produkt tun? Ist diese Idee, die ich technologisch möglich habe? Vermittelt dieses Layout die Botschaft?).

Ein Drahtmodell ist (nur) ein Artefakt, das als schematische visuelle Beschreibung des beabsichtigten Layouts dient.

2
Marielle

Meiner Meinung nach ist ein Wireframe:

  • Eine konzeptionelle Zeichnung mit niedriger Wiedergabetreue
  • Wird verwendet, um Layout- und Aufgabenflussoptionen zu untersuchen
  • Eine schnelle, iterative visuelle Kommunikation, um Optionen anhand allgemeiner Daten zu untersuchen
  • Ein Buy-In-Tool für Stakeholder (Designer, Kunden und Entwickler sind sich vor dem Codieren einig).
  • Ein kommentierter Satz von Pfaden und Flüssen mit Eintritts-, Austritts- und Unterbrechungspunkten
  • Kann funktional oder ein allgemeines Storyboard sein (Tag im Leben)

A Prototyp ist:

  • Ein gebauter Satz von Funktionsseiten oder Komponenten mit hoher Wiedergabetreue
  • Enthält detaillierte Seitenkomponenten für den Taskflow
  • Ist ein gezieltes, auf Usability testbares spezifisches Benutzeraufgabenszenario
  • Enthält die eigentliche Navigation und Interaktionen für die eventuelle Codierung

Mit anderen Worten, sie unterscheiden sich in Form und Absicht.

2
uobroin

Stimmen Sie zu, dass Treue ein Differenzierungsfaktor sein kann.

Wenn Ihre Wireframes Seite für Seite detaillierte, Frame-für-Frame-Interaktionsbeschreibungen für einzelne Komponenten enthalten, sind Sie möglicherweise für das Prototyping bereit.

Wenn Sie mehr Zeit damit verbringen, Ihre Prototyping-Software großartig aussehende Ausdrucke erstellen zu lassen, als mit der Modellierung von Interaktionen, werden Sie wahrscheinlich mit dem Wireframng dieses bestimmten Projekts gut zurechtkommen.

Mein Team verwendet derzeit Axure, um den Unterschied aufzuteilen - klickbare, interaktiv-intensive Prototypen, die auch gedruckt und als Drahtgitter verwendet werden können. Der Trick besteht darin, die erforderlichen Informationen auf jeder Granularitätsebene in demselben Artefakt zu erfassen ...

1
patcallow

Mit der physischen Welt Autoanalogie

Drahtmodell = Form und Gestalt des Autos, um zu visualisieren, was und wo im Ausstellungsraum statisch gehalten wird

Prototyp = ein Auto, das für eine Probefahrt genommen werden kann; Post, die es in Produktion gehen würde

0
Sam

Meine Einstellung zur Web-/Anwendungsentwicklung:

Wireframes sind statische Modelle, mit denen GUI-Elemente für verschiedene Seitentypen oder Seitenfunktionen dargestellt werden.

Prototypen sind das dynamische Gegenstück zu Drahtgittern. "Klick-Dummies" zur Darstellung einer Navigations-/Funktionsarchitektur für Websites/Apps.

0
Stefan Asemota

Sie sind Möglichkeiten, Interaktionsideen auf verschiedenen Ebenen der Wiedergabetreue zu beschreiben. Im Allgemeinen tendieren Drahtgitter dazu, eine niedrigere Wiedergabetreue und Prototypen eine höhere Wiedergabetreue zu erzielen. Aber sie sind definitiv unscharfe Begriffe und variieren in der Definition von UX-Team zu UX-Team.

0
DA01

Meine sehr schnelle Antwort wäre Treue. Drahtmodell im Allgemeinen niedriger fi, Prototyp höher. Obwohl es noch viel mehr gibt: Wireframes versuchen, frühe funktionale Designelemente zu adressieren, Prototypen setzen einige der Elemente aus den Wireframes in die Praxis um.

0
Sheff

Sie können etwas auf Papier skizzieren und es als Drahtmodell oder Prototyp bezeichnen. Aber der Unterschied ist, was Sie verstehen, ist ein Drahtmodell und was Sie in der Hand halten, ist ein Prototyp.

Kurz gesagt, Wireframe mit Prototyp sowie Mind and Brain.

0
Lê Trung Thu

Wenn Sie eine mobile Anwendung oder eine Webanwendung entwerfen möchten, benötigen Sie zunächst eine Skizze, wie jede Seite aussehen wird. Nur basierend auf Geschäftskonzepten kann ein Designer den Anwendungsfluss und einen ersten Entwurfsentwurf definieren, der eine Skizze enthält, wie er aussehen wird, welche Schaltflächen vorhanden sein werden, welche Felder vorhanden sein werden usw. Dies ist das Drahtmodell gedacht für.

Modelle

Modelle sind lebendigere Bilder. Sie sind optisch ansprechender, haben Farben, Schriftarten, Themen, Schaltflächen, Logos usw. Zu diesem Zeitpunkt werden im Design Beschriftungen der Felder, Notizen, Schriftarten, Navigationsmenüs usw. festgelegt. Es ist eine genaue Darstellung, wie die mobile App oder Webseiten aussehen werden.

0
Surbhi jain

Wireframes eignen sich am besten, um die Diskussion auf die "Form" des Designs zu konzentrieren, während Prototypen am besten geeignet sind, um die Diskussion auf die "Funktion" des Designs zu konzentrieren. Angesichts der Überlappung der verschiedenen Tools und Methoden werden Sie natürlich feststellen, dass die Begriffe austauschbar sind. Unabhängig vom Begriff sollten Sie jedoch verstehen, was Sie dem Publikum präsentieren möchten.

Meiner Meinung nach scheinen Wireframes ein weniger umfassender Begriff zu sein, der normalerweise für Low-Fi- und Low-Tech-Artefakte und Assets verwendet wird, während Prototypen eher interaktiv und anspruchsvoller sind. Ich denke, es geht darum, das beste Werkzeug für den Job auszuwählen, den Sie angehen möchten.

0
Michael Lai