WebDesign Rapid Prototyping Mit Sketchflow




Website Design - Rapid Prototyping Mit Sketch
 

Zurück in den Mitte der 90er Jahre wurde das Rapid Prototyping eine schlechte Idee betrachtet. Der primäre Grund für diese Annahme war, dass Prototyping-Tools so komplex waren damals, dass sie von den Entwicklern betrieben werden musste. Daher tendierte der Designprozess beeinflusst werden durch alle Design-Arbeit durch die Augen interpretiert werden musste, was ein Prototypist tatsächlich erreichen kann.

Im Jahr 2010 gibt es eine Umdenken in der Prototyping gewesen. Viele neue Prototyping-Tools haben sich in den letzten Jahren erschienen und sie sind schnell von Interaktionsdesigner angenommen.

Zwei Dinge haben sich geändert Prototyping-Tools zurück in die Gunst zu bringen: Die Aufgabe, sie benutzt werden, um zu erreichen und die Werkzeuge selbst.

    Die Prototyping-Tools von heute sind viel mehr Designer freundlich. Die Annahme von Markup-Sprachen Benutzeroberfläche, wie MXML, XAML und HTML haben unsere Fähigkeit gemacht zu bauen und laufen mehr hoch entwickelte Software heute gemacht hat es einfacher, Design-Tools zu erstellen, die für Designer arbeiten, im Gegensatz zu Entwicklern.

    Während dieser gleichen Zeit, der Art dessen, was gestaltet wird verändert. Wie wir weg von Designs bewegen, die eine Reihe von relativ statischen Seiten oder Bildschirmen, um die Gestaltung von Anwendungen sind, die weniger dynamische Seiten verwenden, wird es schwieriger, diese Erfahrungen Prototyping mit den traditionellen Werkzeugen von diagramming Anwendungen und Papier bis zum Prototyp.

So haben wir ideale Voraussetzungen für eine neue Welle der Prototyping-Tools: Steigerung der Leistungsfähigkeit und die steigende Nachfrage.

Microsofts Beitrag: Expression Blend Sketch

Unter der neuen Generation von Prototyping-Tools gibt es von Microsoft Expression Blend Sketchflow. Sketch nimmt einen ziemlich einzigartigen Ansatz für Prototyping.

Expression Studio

Sketchflow ist ein Teil von Expression Studio Bereich von Microsoft von Design-Tools. Nach einer eher glanzlos Geschichte mit Design-Tools, Microsoft scheint endlich ihre Tat zusammen mit Expression Studio zu bekommen. Expression Studio ist auf seiner dritten Ausgabe und besteht aus 4 oder 5 Artikel je nachdem wie man sie zählen:

    Expression Blend: Für Erstellung von Benutzeroberflächen für Oberflächen, Windows und Silverlight.

    Expression Blend: Sketch; Für Benutzeroberflächen Prototyping.

    Expression Web: Für Benutzerschnittstellen für Web-Standards zu bauen.

    Expression Design: Für die grafische Vermögen für Oberflächen, Windows Silverlight und das Web zu erstellen.

    Expression Encoder: Für Video-Assets für Oberflächen, Windows Silverlight, und das Web vorbereiten.

Sobald Sie die Idee des Bildschirms Fluss haben, können Sie durch zu gehen und Beschreibungen hinzufügen, was auf jeden einzelnen sein wird. Sie können dann den Prototyp laufen und ein Gefühl dafür bekommen, wie die Anwendung funktioniert, auch wenn es noch keine Benutzeroberfläche ist.

Normalerweise, wenn Sie eine Benutzeroberfläche Prototyping, möchten Sie vermutlich die endgültige grafische Behandlung zu vermeiden, bis Sie das Interaktionsmodell und Informationsarchitektur Modell korrekt sind. Als Ergebnis sollten Sie einen Drahtrahmen Benutzeroberfläche erstellen, die minimal-Grafik und zeigen, wie die Benutzer interagieren und mit der Anwendung navigieren. Aus diesem Grund bietet Sketch einen Satz von Skizze Stile, die alle üblichen Kontrollen enthalten, die eine Skizze wie Aussehen haben neu gestaltet wurden.

Was über diese Skizze Stile interessant ist, dass sie die volle Kontrollen sind, die reskinned wurden. Dies hat zwei wichtige Konsequenzen:

    Sie können alle Funktionen der nativen Kontrolle zuzugreifen.
    Sie können die Arten der Kontrollen ändern als Prototyp entwickelt.

Sketching Up Portfolio Benutzeroberfläche

Der nächste Schritt ist die Bildschirme unserer Prototypen zu erstellen. Es ist im Grunde ein Fall die richtigen Sketch Stil Kontrollen auswählen und in den Bildschirmen auf der Zeichenfläche platzieren.

Zum Beispiel habe ich die folgenden für den Haupt Portfolio Bildschirm:

    Ein Sketch-Knopf

    Eine Hand, die Zurück-Pfeil

    Ein Sketch Titel

    Ein Sketch Untertitel

    Eine Skizze Listbox

    Ein weiterer Sketch Untertitel

    Ein Sketch Textblock

    Ein normaler Bildelement

    Ein weiterer Sketch-Knopf

Verdrahtung der Navigation

Alles, was Sie ist der rechten Maustaste auf die Elemente tun müssen, die als Navigation zwischen den Bildschirmen dienen wird, wählen Sie Navigieren Sie zu und wählen Sie dann, um den Bildschirm sollte das Element verknüpfen. Sie können auch nach vorne oder zurück wählen.
Das Ausführen des Prototype

Um den Prototyp testen, drücken Sie einfach F5. Das Projekt baut, wird ein Test Web-Server hochgefahren und unser Prototyp startet in einem Browser. Der Prototyp enthält Sketch Ihre Funktionsbildschirme sowie Navigation und andere Werkzeuge auf der linken Seite. Diese Werkzeuge helfen Ihnen, Ihren Prototyp zu navigieren, sowie den Nutzern ermöglicht, Feedback zu geben. So wie es sich heraus, es war nicht wirklich notwendig, um die Navigation am Anfang einzurichten. Für jeden Bildschirm des Prototyps, das Panel zeigt Navigation, die diesen Bildschirm Bildschirme führt zu, bezogen auf die Verbindungen, die Sie in der Sketch Karte gemacht. Sie bewegen sich einfach durch Ihre Bildschirme auf der linken Seite der Liste. Sie sind einfach eine Reihe von Papierskizzen für Ihren Prototyp zu importieren. Zum Beispiel würden Sie wahrscheinlich nur mit dieser Option beginnen und später in Ihrem Funktionsnavigation hinzuzufügen.
Die Sketch Killer-Feature: Feedback

    Sketch Griffe außerordentlich Feedback. Unabhängig davon, ob Sie in WPF oder Silverlight arbeiten, können Sie Ihren Prototypen verpacken und verteilen sie für die Überprüfung durch die Nutzer, Projektmitglieder und Stakeholder. Mit dem Silverlight erstellt Sketch eine Silverlight-Website, die Sie selbst hosten oder verteilen können, in dem Fall, dass Sie nur einen Link zu den Gutachtern senden können.

    Wenn Ihr Prototyp sehen, sind die Gutachter der Lage, auf individuelle Bildschirme mit ihrer Maus zu zeichnen, aber auch in den Kommentaren zu schreiben. Die Gutachter dann exportieren einfach ihr Feedback in eine Datei, die sie zu Ihnen zurück. Sie laden die Dateien dann wieder in Expression Blend und das Feedback überprüfen, auf Ihre ursprünglichen Bildschirme überlagert. Darüber hinaus sind Sie in der Lage, die Rezensenten Zugang zu den Anmerkungen zu geben, die Sie in den Bildschirmen gemacht haben, wie Sie den Prototyp gebaut.

Feedback ist eine der besten Eigenschaften von Sketchflow. Wie auch für die Stakeholder-Bewertungen, können Sie es auch für interne Überprüfungen mit Ihren Kollegen verwenden. Wenn Sie gehen Durch der Prototypen durchführen, können Sie die Bildschirme mit Änderungen mit Anmerkungen versehen, die Sie machen möchten. Dies wird eine Live-Liste zu tun, die dann wieder in Mischung geladen werden kann. Screens mit Feedback werden mit einer Glühbirne-Symbol in der Sketch Karte markiert.

Nachdem Sie die Funktionen der Benutzeroberfläche prototypisiert haben, können Sie auch Ihre Sketchflow-Prototyp für Usability-Tests verwendet werden. Sketchflow ermöglicht Ihnen, den Prototyp mit der Feedback- und Navigationsfenster versteckt zu laufen.

Ein weiteres Feature, das Sketch hervorgehoben werden muss, ist die Komponenten Bildschirme. Diese Bildschirme sind die Art und Weise, dass Sketch eine Prototyping-Funktion bereitstellt, die von wesentlicher Bedeutung ist: Permitting Komponenten gemeinsam einmal und über mehrere Bildschirme wiederverwendet definiert werden.

Mit Sketchflow können Sie jede Gruppe von Elementen wählen, sie rechts klicken und machen in den Component-Bildschirm auswählen. Teilsiebe werden dann separat auf dem Sketch Karte angezeigt, und sie können auf jede andere Bildschirm gezogen werden.

Eine häufige Verwendung für die Komponenten Bildschirme ist zur Navigation Kontrollen machen ab, die für viele Bildschirme. Im Fall dieses Beispiels sind die relativ einfache Navigationssteuerung wurde in eine Komponente Bildschirm gemacht. Auf diese Weise die gleiche Navigation auf jedem Bildschirm meines Portfolios ist im Preis inbegriffen. Eines der herausragenden Merkmale von Komponenten Bildschirme ist, dass sie Layoutinformationen nicht einfach enthalten, können sie auch das Verhalten verkörpern. Daher können Sie die Aktion Ihres Navigationstasten einmal in der Komponente Bildschirm eingestellt und wissen, dass die Navigation auf jedem Bildschirm arbeiten, dass Sie es in enthalten.
alternate States

Ein weiteres mächtiges Feature in Expression Blend ist visuelle Zustände. Visuelle Staaten erlauben Sie alternative Zustände für einzelne Elemente, wie Komponenten Bildschirme oder Ihren gesamten Bildschirm zu definieren. Der leistungsstarke Teil davon ist, dass man verschiedene Mengen von Zuständen für die ein Element definieren können. So könnte zum Beispiel eine Taste 3 verschiedenen Statusgruppen haben: Eine für nicht fokussiert und konzentriert, eine für nicht Mouseover und Mouseover und eine für Behinderte und aktiviert ist. Auf diese Weise können Sie die Zustände kombinieren, die notwendig sind, um einige mächtige Effekte zu erzeugen.

In diesem Portfolio Beispiel gibt es drei visuelle Zustände für mein Navigationskomponente Bildschirm:

    backonly

    BackOff

    PortfolioOff

Für jede der drei visuellen Staaten der Navigation haben die Sichtbarkeit der Navigationselemente wurden entsprechend geändert. Alles, was Sie jetzt brauchen, ist eine Möglichkeit für jeden Bildschirm, die verwendet werden sollte visuellen Zustand seiner Navigationskomponente Bildschirm zu erzählen. Für, dass Sie Verhalten benötigen.
Behaviors

Behaviors wurden mit Mischung eingeführt 3. Sie bieten eine einfache Möglichkeit, die grundlegenden interaktiven Funktionen Bildschirme hinzufügen, ohne sie zu kodieren zu müssen. Wie jedes andere Element, werden diese Verhaltensweisen Bildschirme hinzugefügt, indem sie aus dem Bedienfeld Elemente auswählen. Sie können das Verhalten verwenden das Aussehen Ihres Navigationskomponente Bildschirm auf dem Prototyp für jeden Bildschirm zu ändern. Das Verhalten, das Sie verwenden müssen, ist GoToStateAction benannt. Auf jedem Bildschirm ziehen GoToStateAction auf die Steuer Navigation. Das Verhalten erscheint dann in den Objekten und Schnittfenster unter der Kontrolle Navigation verschachtelt. Sie können dann das Verhalten wählen und stellen Sie den Auslöser für die geladene Ereignis der Komponente und dann den gewünschten visuellen Zustand wählen.
Prototyping Leistung mit Sketchflow

Sketchflow ist ein besonders leistungsfähiges Werkzeug. Weil es auf Expression Blend und .NET integriert ist, gibt es Ihnen auf eine breite Palette von Funktionen zugreifen, so dass Sie Ihren Prototyp viel näher an der Produktion zu nehmen, wenn Sie es wünschen. Es bedeutet auch, dass Sie einen langen Weg gehen können, bevor Sie die Grenzen treffen, was das Tool zu tun, ist in der Lage.

Natürlich sind alle diese Merkmale bedeuten, dass Sketch zunächst ein wenig überwältigend sein kann. Glücklicherweise gibt es mehr Hilfe auf dem Web, in Form von Artikeln, Tutorials, Blogs und Videos, so das Anfahren leichter ist, als sie es war, als Mischung zum ersten Mal erschien.









Name:
Email:
Nachricht:
 
xhtml
akan google plus
akan facebook
akan twitter
akan instagram
css