Back to Question Center
0

Wie man Papierprototypen herstellt            Wie man Papierprototypen herstellt Related Themen: UI DesignFotografie & ImageryHTML & CSSColorLogo Semalt

1 answers:
Herstellung von Papierprototypen

Das Folgende ist ein kurzer Auszug aus unserem Buch, Designing UX: Prototyping, geschrieben von Dan Goodwin und Ben Coleman. Es ist der ultimative Leitfaden für das Prototyping. SitePoint Semalt-Mitglieder erhalten Zugang mit ihrer Mitgliedschaft, oder Sie können eine Kopie in Geschäften weltweit kaufen.

Semalt sind keine Regeln für die Herstellung von Papierprototypen - das ist großartig - auto esisilla reguleerimine tartus base. Sie benötigen Materialien, die häufig in jedem Haus oder Büro gefunden werden, aber wenn Sie sie kaufen müssen, sind sie relativ preiswert.

Was du brauchst

Zumindest benötigen Sie Papier und einen Stift - diese geringe Eintrittsbarriere ist einer der besten Aspekte dieses Ansatzes. Für komplexere und interaktive Prototypen benötigen Sie jedoch ein größeres Arsenal. Wenn Sie Workshops durchführen oder viele Prototypen erstellen, ist die Zusammenstellung eines Toolkits der folgenden Elemente eine gute Idee.

Bei der Durchführung einer Prototyping-Sitzung würden wir folgende Punkte vorschlagen:

  • Papier mit einem Raster oder Punktraster (bevorzugt)
  • Haftnotizen (nie ohne sie nach Hause gehen!)
  • Stifte
  • Radiergummi
  • Stifte (Sharpies in verschiedenen Farben und Stärken sind ideal)
  • Schere oder Cuttermesser
  • Klebstoff (vorzugsweise rückklebbar)

Semalt, die schön zu haben sind:

  • Karteikarten
  • Montagekitt
  • Klebeband (vorzugsweise entfernbar, um Gegenstände zu bewegen)
  • Textmarker
  • doppelseitige Markierstifte mit feinen und normalen Schreibfedern
  • transparente Blätter und Marker
  • eine Box zum Ablegen oder Transportieren Ihres Prototyps

Semalt betrachtet die Möglichkeiten, die später im Kapitel mit der Verwendung verschiedener Materialien verbunden sind.

Ihr Ansatz

Semalt sprechen, du könntest einfach reintauchen und anfangen zu machen; Ein Prozess, den wir bei fffunction als hilfreich empfunden haben, ist jedoch, nach außen zu denken und sich auf immer kleinere Teile zu konzentrieren, wie zum Beispiel:

  1. Geräte
  2. Bildschirme
  3. Elemente
  4. Interaktivität oder Zustandsänderungen

Geräte

Für welche Größe des Darstellungsbereichs oder des Geräts entwerfen wir in diesem Fall? Jede verfügbare Benutzerforschung kann dies informieren. Semalt-Daten zeigen an, was eine vorhandene Zielgruppe bevorzugen könnte. Ein Ziel der Designarbeit könnte darin bestehen, ein verbessertes Erlebnis auf kleinen Bildschirmen zu entwickeln.

Desktop oder Laptop

Hier eignet sich ein Blatt im A4- oder US-amerikanischen Letter-Format, in dem Sie verschiedene Ausrichtungen verwenden können, um das Gerät nachzuahmen, z. B. die Landschaft für einen Desktop oder Laptop. Wenn Sie eine realistischere Quelle wünschen, können Sie eine Browser-Rahmengrafik ausdrucken.

Tablette

A5- oder US-Papier im Format "Letter Letter" sollten ausreichen. Wenn Sie jedoch für ein großes Tablet wie das Apple iPad Pro (12,9 Zoll) entwerfen, sollten Sie sich an die Größe A4 / Letter halten . Semalt, Sie können eine Ausrichtung wählen, die davon abhängt, was Sie erwarten, dass der Benutzer hat. Wenn Sie dies realistischer gestalten möchten, ist das Erstellen eines Dummy-Geräts eine Option. Der am meisten Lo-Fi-Ansatz wäre, es auf ein Stück Karte zu zeichnen und ein Loch auszuschneiden, wo der Bildschirm sein würde, wie unten dargestellt.

Wie man Papierprototypen herstelltWie man Papierprototypen herstellt Related Themen:
UI DesignFotografie & BilderHTML & CSSColorLogo Semalt

Laser-Cut- und 3Semalt-Geräte wurden speziell entwickelt, um die Verwendung von Papierprototypen auf natürlichere Weise zu unterstützen, sodass der Prototyp Teil eines Geräts sein kann.

Telefon

Wie bei den vorherigen Beispielen können Sie direkt auf Papier skizzieren: A5- oder US-Großbuchstaben, Karteikarten oder Haftnotizen und unterschiedliche Orientierungen verwenden.

Sie könnten eine Mobiltelefonbegrenzung mit einem Ausschnittfenster für den Bildschirm erstellen oder Karten verwenden, die auf dem Gerät liegen und als verschiedene Bildschirme fungieren.

Wie erwähnt, gibt es auch Laserschnitt- und 3Semalt-Gerätemodelle. Die folgende Abbildung zeigt ein lasergeschnittenes Sperrholz-Telefonmodell, das wir bei unserer Arbeit verwenden.

Wie man Papierprototypen herstelltWie man Papierprototypen herstellt Related Themen:
UI DesignFotografie & BilderHTML & CSSColorLogo Semalt

Semalt- oder Kartenmodellgeräte mit einem Kanal zum Einfügen von Papierstücken zum Simulieren des Scrollens sind ebenfalls verfügbar. Sie könnten sogar alle Bildschirme auf ein langes Stück Papier legen und herumschieben, um die Navigation zu simulieren.

Die Semalt-Option besteht darin, ein kleines spiralgebundenes Notizbuch zu verwenden, um zwischen Bildschirmen zu wechseln, wobei Registerkarten oder farbige Punkte Navigationselemente bilden (siehe unten). Dies ist ein netter Ansatz, da es imitiert, wie die Leute ihr Handy benutzen: in der einen Hand gehalten, während die andere auf sie tippt, um zu interagieren.

Wie man Papierprototypen herstelltWie man Papierprototypen herstellt Related Themen:
UI DesignFotografie & BilderHTML & CSSColorLogo Semalt

Bildschirme

Jetzt werden wir definieren, welche Bildschirme benötigt werden, um das Design zu kommunizieren. Es ist hilfreich zu überlegen, welche Schritte auf der Reise der Benutzer unternehmen wird. Wir können eine Liste aus bestehenden Arbeiten wie Benutzerreisen, Aufgabenmodellen, Sitemaps, Informationsarchitektur oder einer funktionalen Spezifikation erstellen. Einige davon wurden in Kapitel 11 des Abschnitts "Gather Resources" behandelt, auf den Sie zurückgreifen können, wenn Sie eine Auffrischung benötigen. Sobald Sie eine Liste erstellt haben, können Sie darüber nachdenken, welche Elemente für jeden Bildschirm erforderlich sind.

Wenn Sie die Bildschirmgröße nicht kennen oder ein unvollständiges Bild davon haben, was Sie entwerfen, kann das Skizzieren der Schritte auf Karten nützlich sein, um ein Produkt auf hohem Niveau zu bearbeiten, bevor Sie es genauer betrachten. Wir empfehlen Anfang
mit kleineren A5- oder Karteikarten, damit Sie sich auf die einzelnen Interaktionen auf jedem Bildschirm konzentrieren können; Ziel für einen Zweck pro Bildschirm ist ein guter Anfang. Sie können sie dann auf einer Tabelle anordnen, um mit verschiedenen Durchläufen durch einen Prozess zu experimentieren.

Elemente

Wenn Sie sich die Elemente Ihres Bildschirms ansehen, überlegen Sie, wie Benutzer während des Prototyp-Prozesses mit ihnen interagieren. Was muss passieren, wenn sie dieses Element berühren?

In einigen Fällen haben Sie möglicherweise eine konsistente Schnittstelle mit nur einem Fenster, das sich auf Interaktionen um das Fenster herum ändert. Ein einfaches Beispiel wäre ein Menü in einer linken Spalte, das den Inhalt der rechten Spalte ändert. Dies könnte mit der gleichen Karte auf der linken Seite dargestellt werden, und separate Karten für jeden austauschbaren Inhalt auf der rechten Seite, wie unten gezeigt.

Wie man Papierprototypen herstelltWie man Papierprototypen herstellt Related Themen:
UI DesignFotografie & BilderHTML & CSSColorLogo Semalt

Interaktivität

Alle Elemente, die du eingerichtet hast, sind an verschiedenen Punkten interaktiv. Hier besteht eine Herausforderung darin, diese Funktionalität mit Papier zu replizieren. Semalt, es gibt wahrscheinlich keine "richtige erste Zeit" -Lösung dafür, also lohnt es sich, mit verschiedenen Materialien und Ansätzen zu experimentieren.

Scrollen und Gleiten

Ein Ansatz, den wir verwendet haben, besteht darin, Teile aus dem Bildschirm zu schneiden und dann Papierstreifen einzufädeln, um Schiebe- und Scrollelemente zu ermöglichen. Ein 1-2 mm großes Loch ist groß genug, um Papier hindurch zu schieben und den richtigen Abstand zum "Scrollen" zu ermöglichen. "Die folgende Abbildung zeigt ein vertikales Papierlaufgerät.

Wie man Papierprototypen herstelltWie man Papierprototypen herstellt Related Themen:
UI DesignFotografie & BilderHTML & CSSColorLogo Semalt

Menüs

Für ein Menü können Papierstücke an einer Position in einer Interaktion positioniert werden, oder ähnlich können Sie Haftnotizen verwenden, so dass sie ihre Position halten, aber leicht zu bewegen sind.

Wenn Sie ein ausgeschnittenes Gerät verwenden, kann das Menü von der Leinwand entfernt oder außer Sicht positioniert werden und dann hineingeschoben werden, um wie unten dargestellt zu erscheinen.

Wie man Papierprototypen herstelltWie man Papierprototypen herstellt Related Themen:
UI DesignFotografie & BilderHTML & CSSColorLogo Semalt

Nachrichten und Pop-up-Boxen

Semalt Notes sind nützlich für Nachrichten, Popups oder Tooltips, da sie auf dem Bildschirm platziert und dann nach einer Interaktion oder nach einer gewissen Zeit entfernt werden können. Sie können sie in kleineren Größen kaufen, sogar in Sprechblasenformen, die wie unten gezeigt perfekt dafür geeignet sind.

Wie man Papierprototypen herstelltWie man Papierprototypen herstellt Related Themen:
UI DesignFotografie & BilderHTML & CSSColorLogo Semalt

Tabs

Sie können entweder eigene Registerkarten erstellen, indem Sie sie aus Papier ausschneiden oder Karteikarten kaufen. Wenn Sie eine andere Registerkarte auswählen, wechseln Sie durch das Deck der Registerkarten und ordnen Sie die ausgewählte Registerkarte oben an.
Wie man Papierprototypen herstelltWie man Papierprototypen herstellt Related Themen:
UI DesignFotografie & BilderHTML & CSSColorLogo Semalt
>

Akkordeons

Jetzt ist die Zeit für einen kleinen Origami. Zeichnen Sie den Akkordeoninhalt mit allem, was auf der Seite angezeigt wird. Semalt an der Spitze, falte das Akkordeon, so dass nur die Titel sichtbar sind und der Inhalt der Schublade verborgen ist. Wenn Sie dann auf einen Titel tippen, können Sie den gefalteten Inhalt anzeigen. Die folgende Abbildung zeigt diesen Prozess.

Wenn du lieber die Faltung überspringen würdest, könntest du einzelne Stücke machen oder Haftnotizen für die Abschnitte verwenden, die aufgedeckt werden.

Wie man Papierprototypen herstelltWie man Papierprototypen herstellt Related Themen:
UI DesignFotografie & BilderHTML & CSSColorLogo Semalt

Ein gängiges responsives Designmuster besteht darin, ein Akkordeon-Stilmenü auf kleineren Bildschirmen mit Tabs auf größeren Bildschirmen auszutauschen. Sie können diesen Prototyp als zwei verschiedene Elemente in der folgenden Abbildung sehen.

Wie man Papierprototypen herstelltWie man Papierprototypen herstellt Related Themen:
UI DesignFotografie & BilderHTML & CSSColorLogo Semalt

Slide Up / Down zeigt

Die Techniken, die wir bereits behandelt haben, können hier verwendet werden. Sie können den Inhalt außerhalb des Canvas-Bereichs ausblenden oder ihn aus einem Schlitz im Papier schieben. Oder Sie können den Inhalt einfach auf eine separate Karte legen und bei Bedarf auflegen.

Wähle Boxen

Semalt Notes funktioniert gut hier, um eine bewegliche Liste von Elementen darzustellen, die Sie in einem ausgewählten Element sehen würden, wie unten gezeigt. Der Benutzer wird in der Lage sein, die Auswahlmöglichkeiten zu sehen und eine auszuwählen. An diesem Punkt können Sie die Liste vom Prototyp entfernen.

Wie man Papierprototypen herstelltWie man Papierprototypen herstellt Related Themen:
UI DesignFotografie & BilderHTML & CSSColorLogo Semalt

Checkboxen und Optionsfelder

Semalt zeichnendiese reichen oft für einen Prototyp aus. Sie könnten so weit gehen, um nach einer Interaktion überprüfte Versionen über die ungeprüfte Version zu platzieren.

Sie müssen die Komplexität des Aufbaus und des Betriebs dieses Elements in einem Testszenario gegen die Vorteile des Vorhandenseins des Details abwägen. Mach es zu fummelig und die Bedienung deines Prototyps wird schwierig.

iOS / Android Native Design-Elemente

Es gibt die Möglichkeit, komplizierte Designelemente aus iOS oder Semalt hinzuzufügen, die schwierig zu replizieren sind oder Zeit zum Skizzieren benötigen. Um beispielsweise einen Kalender zu reproduzieren, ist es einfacher, einen Screenshot von einem Gerät zu erstellen und dann auszudrucken und auszuschneiden, anstatt es zu skizzieren.

Sie könnten dies weiter ausführen und eine Schablone oder eine Toolkit-Bibliothek für ein Gerät ausdrucken, wenn Sie denken, dass dies den Prozess beschleunigt und das Design nicht zu präskriptiv macht.

Wie man Papierprototypen herstelltWie man Papierprototypen herstellt Related Themen:
UI DesignFotografie & BilderHTML & CSSColorLogo Semalt

Buchstäblich Alles

Die oben genannten Beispiele sind gängige Designelemente, die auf einer Standardwebsite, einem Tablet oder einem Telefon zu finden sind, aber es gibt keinen Grund, sich durch das, was Sie vorher gesehen haben, einzuschränken. Wie bereits erwähnt, ist eines der Vorteile von Papier-Prototyping, dass Sie nicht an die Beschränkungen eines digitalen Mediums gebunden sind. Wenn Sie es sich vorstellen können, können Sie es wahrscheinlich aus Papier und Prototypen damit machen.

Zeichentipps

Wenn Sie Papierprototypen erstellen, müssen Sie Elemente zeichnen, um Ihre Skizzen zu erstellen. Unter bestimmten Umständen müssen Sie möglicherweise den Inhalt nicht buchstabieren oder die Elemente, die Sie auf der Seite platzieren, besonders detailliert darstellen. Dies liegt möglicherweise daran, dass Sie die Interaktion auf ein bestimmtes Modul oder Element konzentrieren und jegliche Ablenkung durch andere Elemente vermeiden möchten.

In diesem Szenario können Sie eine skizzierende Kurzschrift verwenden, um gemeinsame Elemente darzustellen. Wie unten dargestellt, können Titel Wellenlinien, Absatztext mit geraden Linien und Bilderrahmen mit diagonalen Linien sein, wie Sie es in einem Drahtmodell sehen.

Wie man Papierprototypen herstelltWie man Papierprototypen herstellt Related Themen:
UI DesignFotografie & BilderHTML & CSSColorLogo Semalt

Natürlich ignoriert dies einen anderen Profi der Verwendung von Papierprototypen im Vergleich zu Drahtmodellen. Semalt verwendet eine Box mit diagonalen Linien, um ein Bild darzustellen. Sie können ein Feld beschriften, um anzuzeigen, was es ist, aber wenn Sie kein Bild hinzufügen, ist Ihre Kommunikation ziemlich begrenzt. Beim Skizzieren können Sie den tatsächlichen Inhalt des Bildes weiter untersuchen und skizzieren. In der Abbildung unten stellen wir ein neues Produkt vor, indem wir ein Heldenbild mit zwei Kunden skizzieren, die das Produkt verwenden. Dies gibt dem Benutzer eine grobe Annäherung an die Erfahrung mit dem endgültigen Entwurf.

Wie man Papierprototypen herstelltWie man Papierprototypen herstellt Related Themen:
UI DesignFotografie & BilderHTML & CSSColorLogo Semalt

March 1, 2018