Technologieaustausch

[PM]Prototyping und Interaktionsdesign

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Klassifizierung von Archetypen

1. Prototyp skizzieren

Handgezeichnete Zeichnungen, die in den frühen Phasen der Planung zur Organisation von Ideen verwendet werden

2. Low-Fidelity-Prototypen

Einfache Interaktion, keine Farbanpassung erforderlich, hauptsächlich Schwarz, Weiß und Grau, wird in der Produktplanungs- und Überprüfungsphase verwendet

Standardisierte Low-Fidelity-Prototypen sind die Grundlage für High-Fidelity-Prototypen

3. High-Fidelity-Prototypen

Komplexe Interaktionen, die im Allgemeinen für öffentliche Demonstrationen verwendet werden,

Das Produkt erstellt zunächst einen Low-Fidelity-Prototyp, und der Designer erstellt einen Designentwurf auf Basis des Prototyps.

Low-Fidelity-Prototyp + Designentwurf = High-Fidelity-Prototyp

Axure

1. Bedienoberfläche

①Menübereich ②Ebenenbereich ③Komponentenbereich ④Zeichenbereich ⑤Stilbereich

2. Gemeinsame Operationen
  1. Erstellen Sie eine neue Datei: Datei->Neu
  2. Datei öffnen: Datei->Öffnen
  3. Datei speichern: Datei->Speichern
  4. Hauptdateitypen
  • .rp: Prototypdatei
  • .rplib: Komponentenbibliotheksdatei
  • .rpteam-Teamprojektdatei
  • .html-Webseitendatei
  1. Automatisches Speichern: Einstellungen->Sicherung aktivieren
  2. Kombination: Strg+G
  3. Veröffentlichen: Den Prototyp in eine HTML-Datei generieren -> Es wird empfohlen, zuerst einen neuen Ordner zu erstellen
  4. Hilfe: Über Axure ->Version anzeigen
  5. Hilfe: Autorisierung verwalten -> Software knacken
  6. Originalbibliothek hinzufügen: Komponentenbibliothek + Nummer
  7. Komponentenbibliothek entfernen: Komponentenbibliothek öffnen->Mehr->Komponentenbibliothek entfernen
3. Stildesign

Ziehen Sie die Komponente auf die Leinwand und ändern Sie den Stil

4.Interaktionsdesign

Interaktion ist der Prozess der Mensch-Computer-Interaktion, und Interaktionsdesign ist die Gestaltung von Interaktionsregeln und -leistung.

In Axure wird die Interaktion in Interaktionsstil und Interaktionslogik unterteilt

1. Der interaktive Stil verfügt über integrierte allgemeine Stiländerungen, die einfach zu verwenden sind, die Logik jedoch nicht festlegen können.

2. Die Einstellung der Interaktionslogik ist flexibler. Durch das Hinzufügen von Ereignissen und Aktionen zu Elementen können personalisierte Stile und logische Interaktionen vervollständigt werden

3. Die eingestellten interaktiven Effekte müssen in der Vorschau angezeigt werden

5. Repeater

Die Funktion des Repeaters besteht darin, die Struktur wiederzuverwenden, ohne ständig kopieren und einfügen zu müssen.

  1. Erstellen Sie einen Repeater und doppelklicken Sie auf den Repeater, um in den Bearbeitungsmodus zu gelangen
  2. Benennen Sie alle Komponenten, um die spätere Datenbindung zu erleichtern.
  3. Beenden Sie die Bearbeitung und geben Sie Tabellendaten ein (Spaltennamen unterstützen nur Englisch)
  4. Ansicht->Maske->Repeater-Maske ausschalten

6. Dynamisches Panel

Verwenden Sie dynamische Panels, um Content-Switching-Effekte zu erzielen

  1. Linke Navigationsleiste hinzufügen
  2. Fügen Sie rechts ein dynamisches Panel hinzu
  3. Doppelklicken Sie auf das dynamische Bedienfeld, um in den Bearbeitungsmodus zu gelangen
  4. Versetzen Sie verschiedene Elemente in unterschiedliche Zustände

  1. Fügen Sie Klickereignisse zur Navigation hinzu und legen Sie den dynamischen Panel-Status fest

  1. Vorschaueffekt

Prototypenspezifikation

Der Unterschied zwischen Handy- und Computer-Apps:

  1. Bildschirmanpassung (Bildschirmgröße, Auflösung)
  2. Interaktionsmethode (Maus ist präziser als Fingersteuerung)
PC-Version

1. Version Herz

Die aktuelle Mainstream-Auflösung beträgt 1920 * 1080, daher liegt das Versionszentrum im Allgemeinen zwischen 960 und 1200 und die allgemeine Empfehlung liegt bei 1200

Vor 2012 betrug die Mainstream-Auflösung 1024 * 768, also war das Versionszentrum 760

2.Navigation

3. Formular

4. Liste

M Ende

Es gibt keine feste Größenangabe für das mobile Endgerät. Die Größe des iPhone 6 beträgt beispielsweise 375 * 667

1. Feste Elementgröße

2. Gemeinschaftsbereiche

3. Gängige Anzeigeformen