Unterschied zwischen UI / UX-Designkonzepten Kabelverlängerungen, Prototypen und Modell (Aktualisiert)

Prototyp eines Telframe-Modells

Was ist der Unterschied zwischen einem Draht, einem Modell und einem Prototyp? Ein erfahrener Designer hat Entwurfsbedingungen für UI / UX-Designer definiert.

Die Unterschiede zwischen Draht, Prototyp und Modell sind für viele Designer immer verwirrend. Obwohl ich ein erfahrener Designer bin, habe ich viele Leute gesehen, die Quora und Reddit nach diesen Begriffen gefragt haben. Was zum Teufel ist das? zu verstehen. Es löst viele Probleme und spart Energie für Designer.

Was ist ein Drahtmodell?

Dies ist eine grafische Struktur einer Website oder Anwendung, die Inhalte und Elemente enthält. Wie das Design des Gebäudes erfordert es viel Arbeit und Teilnehmer, um es zu einem Wolkenkratzer zu machen. Ebenso sieht das Kabel einfach aus und muss von UX-, UI- und IxD-Designern ausgeführt werden. Einfach ausgedrückt ist Telframe ein einfaches Layoutdesign mit drei einfachen, aber direkten Zielen:

  • Enthält grundlegende Informationen
  • Zeichnen Sie eine Struktur und ein Layout
  • Visualisieren Sie die Benutzeroberfläche

Optische Merkmale von verdrahtetem Draht

Optisch weist das kabelgebundene Headset sehr klare visuelle Einschränkungen auf, da nur einfache Linien, Kästchen und Grau (verschiedene graue Farben) erforderlich sind, um es zu vervollständigen.

Der kabelgebundene Bildschirm weist sehr deutliche visuelle Einschränkungen auf. Im Allgemeinen sollten Designer nur Linien, Kästchen und Grautöne verwenden (unterschiedliche Grautöne bedeuten unterschiedliche Stufen).

2. Einfacher Vektordrahtdraht

Einfache Symphrame enthalten Bilder, Videos und Text

3. Vorteile des Stromkabels

Der Drahtbau ist schnell und günstig.

Besonders wenn Sie Papier-, Bleistift- und Drahtwischer wie Balsamiq verwenden. Natürlich sollten Sie diese Entwurfswerkzeuge verwenden, um sofort loszulegen.

Im Vergleich zu einem vollständigen und detaillierten hochauflösenden Telframe ist es viel einfacher und wichtiger, Ideen über einen High-End-Symphrame zu sammeln. Warum nicht? Dies liegt daran, dass die Benutzer mehr Wert auf Softwareleistung, Informationsarchitektur, Benutzererfahrung, Benutzerinteraktionspläne und -nutzung legen, als die ästhetischen Merkmale dieser Elemente zu berücksichtigen. In diesem Fall können Sie es jedoch leicht nach Bedarf ändern, müssen jedoch weder die Codierung noch die grafische Bearbeitung konfigurieren.

4. Interaktives Symphram

Gelegentlich ziehen es Designer vor, die Zuverlässigkeit von Kabeln zu verbessern, um die Bedeutung der Benutzeroberfläche in gewisser Hinsicht zu verbessern und die Logik der Interoperabilität zwischen Soforttests und visuellen Elementen zu demonstrieren. Um diese Probleme richtig zu lösen, verwendet das Programm ein interaktives Symphram, das auch als gedruckter Telframe bezeichnet wird.

Wenn Sie einen so komplexen Draht erstellen möchten, benötigen Sie einen UXPin, ein Tool zum Installieren und Prototyping von Drähten. Das Erstellen eines interaktiven Prototyps kann die beste Präsentation für ein Entwicklungsteam und Kunden sein. Sie fragen: "Was passiert, wenn ich diesen Knopf drücke?" Wenn Sie ein Problem haben, müssen Sie nur klicken und den Kunden zeigen, wie sie mit dem interaktiven Prototyp interagieren können. In der Tat ist es beeindruckend und direkt.

5. Richten Sie den Draht vorsichtig aus

Wenn Sie ihm das Telfram geben müssen, müssen Sie auf den Kerl aufpassen, der absolut würdig ist. Er kann sowohl Ihr Kunde als auch Ihr nicht technischer Manager sein. Er weiß jedoch nicht, dass der Draht und das Endprodukt miteinander verbunden zu sein scheinen. Daher versteht er möglicherweise die interne Kommunikation und den Arbeitsmodus zwischen ihnen nicht. Sie müssen also präsentieren und wie Sie die richtige Entscheidung treffen.

Kabelgebundene Designwerkzeuge

Papier und Bleistift

Papier und Bleistift sind die einfachsten Werkzeuge für das Wireframing-Design. Zeichnen Sie einen zufälligen Streifen mit Papier. Dies ist ein einfacher Draht mit einfachen Linien und Kästchen. Mit seiner Hilfe können Designer Ideen intuitiv mit detaillierterem Text oder verbaler Kommunikation mit Kunden und Führungskräften präsentieren. Dies wird jedoch im offiziellen Projekt für große Unternehmen nicht verwendet.

Balsamico

Gelegentlich ziehen es Designer vor, die Zuverlässigkeit von Kabeln zu verbessern, um die Bedeutung der Benutzeroberfläche in gewisser Hinsicht zu verbessern und die Logik der Interoperabilität zwischen Soforttests und visuellen Elementen zu demonstrieren. Balsamiq präsentiert eine Reihe von Elementen für statische Telframes auf zwei verschiedene Arten. Sein handgezeichneter Stil hilft dabei, sich auf das Layout und das funktionale Design zu konzentrieren. Alle Farben sind Weiß und Schwarz. Sie werden also keine Beschwerde über die Farbeinstellungen und den visuellen Effekt hören.

Was ist ein Prototyp?

Die Nachfrage des Prototyps ist höher als die des Telframs. Der Unterschied besteht darin, dass der Prototyp interaktiv sein und so weit wie möglich ein hochauflösender Prototyp sein sollte, der zur Endbenutzeroberfläche passt. Gleichzeitig bietet es Testern eine umfassende Erfahrung, indem es die tatsächliche Produktschnittstelle und die funktionale Interaktion simuliert.

1. Vorteil des Prototyps

"Durch die Erstellung eines teamfreundlichen Prototyps wird die Konnektivität zwischen Designern und Entwicklern verbessert."

Warum ist es so wichtig? Der Prototyp wird normalerweise von Benutzern für Produkttests verwendet. Das Testen des Prototyps kann Kosten und Zeit sparen, die sich in einem sehr frühen Stadium entwickeln. Somit verringert sich die Architektur des Produkts aufgrund der unangemessenen interaktiven Schnittstelle nicht. Der Prototyp ist also die perfekte Leistung für Designer und Entwickler, um das Produkt zu testen.

Darüber hinaus ist die Bereitstellung von Prototypen für Benutzer zum Sammeln von Feedback ein Vorteil, mit dem Sie alle Details Ihres Produkts kennenlernen und das gesamte Team inspirieren können. Die meisten Prototyping-Tools können Prototypen schnell und effizient erstellen, müssen jedoch nicht codiert werden.

Der Zweck des Prototyps ist klar: die Interaktion zwischen Benutzer und Benutzeroberfläche so weit wie möglich zu vereinfachen. Wenn eine Taste gedrückt wird, muss ein entsprechender Vorgang ausgeführt werden und relevante Seiten werden angezeigt, um das gesamte Produkterlebnis nachzuahmen. Sie fragen: "Was passiert, wenn ich diesen Knopf drücke?" Wenn Sie ein Problem haben, müssen Sie nur klicken und den Kunden zeigen, wie sie mit dem interaktiven Prototyp interagieren können. In der Tat ist es beeindruckend und direkt.

2. Visuelle Merkmale des Prototyps

Offensichtlich muss der Prototyp die ästhetischen Merkmale des Produkts aufweisen und versuchen, mit der neuesten Version übereinzustimmen. Grundsätzlich handelt es sich hierbei um einen Produkt-Skin ohne HTML / CSS / JS, und Sie müssen den Server und die Datenbank nicht durchsuchen.

3. Prototyping-Test

Das Testen von Prototypen ist ein wichtiger Schritt im Prototypenentwurfsprozess, der ein wichtiger Schritt im Gesamtprozess ist. Wie man einen Validierungstest durchführt, ist ein großes Thema, über das hier gesprochen werden muss. Ein einfacher Test kann bis zu einer Stunde dauern, wobei 5 oder 6 Schlüsselereignisse getestet werden müssen. Hier sind einige häufig gestellte Fragen als Referenz:

  • Wie fängt der Benutzer an? (Suchen oder Anzeigen?)
  • Was macht der Benutzer zuerst? und als nächstes?
  • Wie trifft er die endgültige Entscheidung?
  • Verstehen sie den Zweck des Designs? Gibt es irgendwelche Herausforderungen?

Das Erstellen eines Prototyps eines Produkts ist ein kontinuierlicher Prozess, der Iteration und Verbesserung erfordert.

Prototyping-Tools

Mockplus

Mockplus ist ein umfassendes Prototyping-Tool für schnelles Rauschen, schnelles Design und schnelle Anzeige. Sie können damit Modelle für mobile (Android und iOS), Desktop- (PC und Mac) und Webanwendungen erstellen. Mockplus 3.2 hat den UI-Flow-Design-Modus, Wiederholungshardware, Demo-Projekte und -Vorlagen sowie Skizzenimporte hinzugefügt. Andere Funktionen, wie der Mind Map Design-Modus, werden in Versionen nach Mockplus 3.2 verfügbar sein.

https://www.mockplus.com

iDoc

Arbeiten Sie mit iDoc als Tool zur Einreichung von Designs zusammen und stellen Sie Designressourcen sowie einen Prototyp des Lichts bereit. Der kontinuierliche Prozess ermöglicht es UI-Designern, visuelle Skripte aus Photoshop-, Adobe XD- und Sketch-Plugins zu laden.

Es ist sehr einfach und unkompliziert, interaktive Verbindungen herzustellen, indem ein Kontaktpunkt hinzugefügt wird, um Prototypen in Sekunden zu erstellen. Mit 7 Gesten und 13 Animationen können Sie einen interaktiven Prototyp erstellen, der einfach gedruckt werden kann. Es gibt 3 Einstellungen für den Link, die Homepage und den externen Link. Erfahren Sie mehr, es wird Sie noch mehr überraschen!

UXPin

UXPin hat über 900 verschiedene UI-Elemente erstellt, sodass Sie Drähte und Prototypen erstellen können. Dank der reaktionsschnellen Haltepunktfunktion können Benutzer sensible Prototypen und SIM-Karten erstellen, die auf einer Vielzahl von Geräten und Auflösungen ausgeführt werden können.

Was ist ein Modell?

Mockup ist ein "visuelles Skript", mit dem das visuelle Design eines Produkts angezeigt wird. Es hat ein reichhaltigeres visuelles Element als Schnurdrähte, einschließlich Grafiken, Layout, Farbe und anderer detaillierter visueller Präsentationen. Bis zu einem gewissen Grad ist dies das endgültige Design des Produkts.

Wie ein kabelgebundenes Kabel ist das Modell statisch und funktioniert nicht. Es konzentriert sich auf das Erscheinungsbild des Produkts, indem viele visuelle Elemente hinzugefügt werden, um eine höhere Genauigkeit zu erzielen. Es wird häufig in visuellen Designdiskussionen verwendet, um das visuelle Produktdesign zu verbessern.

Entwurfsablauf

Sobald Sie die Essenz des Designs, den Unterschied zwischen Teleframes, Mockups und Prototypen kennengelernt haben, stehen Sie an der Spitze der User Experience Design-Welt.

Wenn Sie Ihre Produktdesignserie in einen klaren und effizienten Workflow verwandeln können, werden erstaunliche Dinge passieren.

Tipps

  • Versuchen Sie bei der Herstellung von Draht, bearbeitbare und wiederverwendbare Elemente zu verwenden. In diesem Fall werden Sie weiterhin die Elemente löschen, um Prototypen basierend auf den einfachen Drähten auszuführen.
  • Versuchen Sie bei der Installation von Kabeln, Ideen und Ideen von Ihrem Team und Ihren Kunden zu sammeln und sie im Symphony-Design wiederzugeben.
  • Verwenden Sie Ihr bequemstes Werkzeug

Auch interessiert an:

Die besten Mockup- und Teleframing-Designtools und -Anwendungen für UI / UX-Designer 2017

UX vs UI vs IA vs IxD: 4 Mischen digitaler Designbegriffe

Beste UI / UX-Designbücher und -quellen für Designer

Ursprünglich veröffentlicht unter www.mockplus.com.