Was ist der Unterschied zwischen Wireframes und Mockups?

Ich möchte den Unterschied zwischen Wireframes und Mockups kennen. Ich hoffe, ein einfaches Verständnis für den Unterschied zu erlangen oder definitiv zu wissen, dass beide gleich sind.

Ich habe es gegoogelt, aber ich konnte nicht verstehen, was genau der Unterschied ist. Ich würde es begrüßen, wenn jemand es mir kurz erklären könnte.

In einem Drahtmodell geht es um Funktionalität. Es kann eine wirklich einfache Skizze sein, die zeigt, welche Art von Dingen Sie in Ihrem Design tun können. Beispielsweise zeigt ein Drahtmodell einer Website die Navigation, die Hauptschaltflächen, die Spalten und die Platzierung verschiedener Elemente. Sie können sich das als Entwurf für eine Website vorstellen.

Ein Modell ist eine realistische Darstellung des Produkts, in diesem Fall eine Website. Das Endergebnis kann genau wie das Modell aussehen oder nach Versionsrevisionen eine Variation davon sein. Während einige Leute es vorziehen, die Modelle mit Grafiksoftware zu zeichnen, tun andere dies direkt in HTML / CSS.

Ich verwende Balsamiq für Drahtmodelle und Photoshop / Illustrator oder HTML + CSS (je nach Komplexität) für Modelle.

Ein Beispiel für ein Drahtmodell:

Drahtgitter sind rudimentäre Formen oder Linien, mit denen nur Position und / oder Größe angegeben werden. Das Ziel eines Drahtmodells besteht darin, die Elemente in ein Layout "einzufügen" und nicht anzuzeigen, wie Elemente in einem endgültigen Entwurf tatsächlich erscheinen, sondern nur dort, wo sie sich befinden.

Mockups basieren auf Drahtgittern und dienen dazu, das gesamte Erscheinungsbild eines Entwurfs darzustellen, einschließlich der Auswahl von Typen, Farben usw. Das Ziel eines Mockups besteht darin, so genau wie möglich darzustellen , wie alle endgültigen Erscheinungsbilder wiedergegeben werden.

Ich unterstütze die ausführliche Antwort von @Yisela, um auch diese in der folgenden Präsentation offen gelegte Vision hinzuzufügen

Hier ist eine kurze Zusammenfassung eines Artikels von Marcin Treder :

Wireframe

Ein Drahtgitter ist eine Low-Fidelity-Darstellung eines Entwurfs. Es sollte deutlich zeigen:

1. • Die Hauptinhaltsgruppen (was?)

2. • Die Informationsstruktur (wo?)

3. • Beschreibung und grundlegende Visualisierung der Interaktion zwischen Benutzeroberfläche (wie?)

4. Betrachten Sie sie als das Rückgrat Ihres Designs und denken Sie daran, dass Drahtgitter eine Darstellung aller wichtigen Teile des Endprodukts enthalten sollten.

Attrappe, Lehrmodell, Simulation

1. Ein Modell ist eine statische Designdarstellung mit mittlerer bis hoher Wiedergabetreue. Sehr oft ist ein Mockup ein visueller Entwurf
2. Stellt die Informationsstruktur dar, visualisiert den Inhalt und demonstriert die grundlegenden Funktionen auf statische Weise
3. Ermutigt die Leute, die visuelle Seite des Projekts zu überprüfen

Mithilfe von Wireframes werden das Framework, die Informationshierarchie, der Workflow, die Details zur Bildschirmanzeige und eine Beschreibung der Funktionsweise einer Komponente (Annotation) definiert. Abhängig von der Komplexität der Anwendung oder des Standorts sollten Wireframes auf einer anderen Anforderung aufbauen, die erfüllt werden kann. Prozessmodelle. Mithilfe von Wireframes können Anforderungen von einem Client abgerufen und schließlich Anforderungen von einem Client bestätigt werden. Wireframes sind ein visuelles Modell der Struktur einer Site oder Anwendung. Sie definieren nicht die zu verwendende Schriftart, die Polsterung, die Farbe, den Stil usw. Sie sind nicht skalierbar und haben keine Farbtöne oder Farbverläufe. All dies muss mit dem Kunden kommuniziert werden, damit er den Prozess und den Kontext des zu liefernden Drahtgitterrahmens in Verbindung mit anderen zu liefernden Anforderungen versteht.

Ein Modell wird in der Regel in Photoshop erstellt. Es basiert zwar auf der Struktur oder dem Rahmen des bestätigten Drahtgitter-Ergebnisses, es ist jedoch ein eindeutiges Ergebnis mit einem eindeutigen Zeitplan und einem eindeutigen Genehmigungsprozess. Mock-ups oder Comps definieren den visuellen Stil oder den Ton der Benutzeroberfläche. Einmal akzeptiert, werden Mock-ups in eine Reihe zusätzlicher Anforderungen oder Arbeitsprodukte übersetzt, wie z. B. CSS-Code, Stilrichtlinien, grafische Elemente usw.

Wireframes sind niemals Attrappen. Mock-ups könnten als Wireframes verwendet werden, dies hätte jedoch Auswirkungen auf erforderliche Überarbeitungen und wirkt sich erheblich auf Ihr Budget aus.

Quelle: 15 Jahre als Kommunikationsdesigner, UX-Leiter und Business Analyst in einem Unternehmensumfeld, das Websites und Anwendungen entwickelt. Und der geliebte BABOK

Ich habe noch nicht den Ruf, eine Antwort von Dave Kaye zu kommentieren, also musste ich direkt antworten. Es lohnt sich sehr, seine Antwort im Vergleich zu Rachurus brillanter Antwort zu erwähnen.

In einer Interpretation moderner Phrasen könnte / sollte die Erklärung des Laien sein;

1. Wireframes sind "das Design"
2. Mockups sind "gerenderte Demos"

Die eigentliche Terminologie stammt aus den 80er Jahren. Damals hatten Sie nicht die Rechenleistung, um Echtzeitbilder zu erstellen, aber Sie konnten "Wireframes" von Grafiken in Echtzeit auf dem Bildschirm schweben sehen. Eine richtige "Demo" benötigt über Nacht Rendering etc.

In diesen Zeiten stellt ein "Drahtgitter" ein Grundgerüst "Entwurf" dar, und bei einem guten iterativen Entwurfsprozess sollten die Benutzer Modelle aus dem Drahtgitter generieren, Feedback erhalten und dieses zurückgeben, um den Drahtgitterentwurf zu verbessern.

Leider steht den Kunden heutzutage eine Menge Software zur Verfügung, mit der sie Modelle entwerfen können, die nichts verwenden, was von Programmierern direkt verwendet werden kann. Häufig bauen ihre Entwürfe auf anderen auf, sodass das Modell privat erweitert wird, anstatt an Programmierer zurückgegeben zu werden, um großartige Entwürfe zu berücksichtigen.

Ich denke, dass Dave das ein bisschen höflicher erwähnt hat :-)

Keith

Einfach ausgedrückt:

Drahtgitter : Skelett / Struktur

Modelle : Haut / visueller Aspekt

Wie einige Leute bemerkt haben, werden heutzutage Drahtgitter immer wichtiger, während Modelle zu Prototypen verschmelzen.

Müssen Sie noch einen Punkt hinzufügen, den die Leute nicht gemacht haben ... diese Antworten geben alle anständige technische Beschreibungen, aber in einer Arbeitsumgebung sind die Unterschiede nicht immer so klar. Einige Unternehmen fügen möglicherweise Funktionen zu einem Modell hinzu, und andere stellen möglicherweise hohe Entwurfsanforderungen an ein Drahtmodell. Ich würde vorsichtig sein, wenn ich zu sehr in eine Antwort darauf verstrickt wäre, was "sein sollte", da das erste Unternehmen, in das Sie gehen, möglicherweise etwas unternimmt, das keines von beiden ist!

Meines Wissens nach sind Mockup-Bildschirme die endgültige Darstellung der Benutzeroberfläche. Was wird der normale Fluss sein und was wird der alternative Fluss sein. Ich denke, das kann eine Art Webprototyp sein, der hauptsächlich in HTML und CSS erstellt wird. Wir machen dann meistens in der HLD-Phase nach und haben Akzeptanz beim Kunden.

Wireframes als Vergleich konzentrieren sich eher auf Flussdiagramme, in denen eine allgemeine Beschreibung vorhanden ist. Wenn es sich nicht um einige Detailbeschreibungen handelt, z. B. was beim Klicken auf ein Ereignis passiert, ändern Sie das Ereignis und ähnliche Dinge. Sie werden größtenteils von SA / BA erstellt und Mock-up-Arbeiten werden von Designern / Entwicklern durchgeführt. Darüber hinaus fügen einige Leute technische Spezifikationen mit Drahtmodellen wie DB hinzu, die an dieser bestimmten Benutzeroberfläche beteiligt sind.

Aber auch hier kommt es auf Projekt zu Projekt an. In unserem Fall sind Drahtgitter die Quelle der Wahrheit.

Das verstehe ich als einen Unterschied in ihnen

Ein Drahtmodell kann ein Modell sein. Ein Modell kann als Drahtmodell betrachtet werden. Während sie manchmal getrennte Dinge sind (wie andere gesagt haben), sind sie genauso oft nicht getrennte Dinge.

Zu einem bestimmten Zeitpunkt könnte man überlegen, welche Wireframes Visio erstellen würde. Und Mockups würde PhotoShop erstellen.

Aber heute, mit der Palette der Werkzeuge, die wir haben, sind sie oft das gleiche tatsächliche Dokument. Am Anfang mögen sie als Wireframes (nur Layout und Funktion) beginnen, werden aber im Laufe der Zeit immer detaillierter, bis sie als Modell angesehen werden können. Und wenn man ein interaktives Tool wie Axure verwendet, könnte man es an einem bestimmten Punkt als Prototyp betrachten.

Es ist also ein Spektrum mit viel Überlappung.

Wireframes

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

Modelle

Mockups sind lebendigere Bilder. Sie sind optisch ansprechender, haben Farben, Schriftarten, Themen, Schaltflächen, Logo usw. In dieser Phase werden Beschriftungen der Felder, Notizen, Schriftarten, Navigationsmenüs usw. im Design festgelegt. Es ist eine exakte Darstellung, wie die mobile App oder Webseiten aussehen werden.

Einen detaillierten Vergleich zwischen Wireframes und Mockups finden Sie in diesem informativen Artikel: Der Unterschied zwischen Wireframe, Mockup und Prototype