Wenn es um die Erstellung von GUI-Prototypen, Flussdiagrammen und anderen Geschäftsdiagrammen geht, ist Microsoft Visio häufig das Einstiegswerkzeug auf der Windows-Plattform. Der Mac hat auch Anwendungen wie die ausgezeichnete Axure und OmniGraffle. Wenn es um Linux geht, ist Evolus Pencil einer der besten, um schnell und einfach hochwertige Bilder zu erstellen.

Hinweis : Pencil wird unter Windows, OSX und Linux unterstützt. In diesem Artikel konzentrieren wir uns auf die Linux-Version von Pencil.

Installation

Pencil ist nicht mehr in den Ubuntu-Repositories verfügbar (zumindest ab Raring), aber es ist eine einfache Installation über das DEB-Paket von der Website des Projekts. Installieren Sie durch einen Doppelklick auf das heruntergeladene Paket oder mit dem folgenden Terminal-Befehl:

 sudo dpkg -i evoluspencil_2.0.3_all.deb

Die einzige Abhängigkeit ist Firefox, wenn Sie also auf einem System sind, das dies standardmäßig nicht enthält, müssen Sie es installieren (oder verwenden Sie einen GUI-Paket-Manager, der die Abhängigkeit für Sie übernimmt).

Verwendung

Bei einem Programm wie GIMP oder Krita müssen Sie in der Regel Ihre eigenen grafischen Teile erstellen. Pencil bietet Ihnen eine große Auswahl an Formen, die Sie schnell auf eine Seite ziehen und nach Ihren Wünschen anpassen können. Der Bereich auf der linken Seite listet verfügbare Formen in Gruppen wie "Allgemeine Formen" (einfache Quadrate und Kreise), "Desktop - GTK - Widgets" (wenn Sie eine Unity - oder GNOME - Anwendung prototypieren wollten) und "Skizzenhafte" (eine von mein Favorit für Web-Modelle, die wie eine Bleistiftskizze aussieht). Elemente in diesen Gruppen können gemischt und zugeordnet werden.

Um eines davon zur Zeichnung hinzuzufügen, klicken Sie einfach auf eine Seite (neue Seiten können über die Schaltfläche "Neue Seite" oben rechts hinzugefügt werden).

Sobald Sie auf der Seite sind, können Sie die Größe ändern, indem Sie eine der Ecken oder Ränder der Form ziehen oder über die Symbolleistenfelder "Position und Größe" (nützlich, wenn Sie die Zeichnung, z. B. ein Webmodell, benötigen) eine bestimmte Auflösung).

Wenn Sie auf die meisten Formen doppelklicken, wird Text hinzugefügt, der mit Ausrichtung, Schriftart, Fett- / Kursivschrift und Punktgröße mithilfe der Symbolleistenschaltflächen "Textformat" angepasst werden kann.

Mock-up-Grundlagen

Ich zeichne ständig Wireframes und andere Diagramme, und der grundlegende Prozess, den ich verwende, ist wie folgt (am Beispiel eines Homepage-Mock-Ups für eine Website).

Hintergrund

Für eine Webseite beginnt dies mit dem Browser-Fenster - Das "Fensterrahmen" -Element aus der Sketchy-Sammlung wird hier der Einfachheit halber verwendet. Um dies auf 0px x 0px (dh oben links auf dem Bildschirm) zu setzen, werden die "Location & Size" -Regler verwendet. Der untere und der linke Rand werden so gezogen, dass er den gesamten Bildschirm ausfüllt.

Eine "Box" -Form wird ganz oben hinzugefügt, um die URL-Leiste anzuzeigen ... manchmal ist es schwierig, Dinge genau mit der Maus zu platzieren, aber die Pfeiltasten können auch verwendet werden, um eine Form zu verschieben, sobald sie ausgewählt ist:

Seitenelemente

Ein großer Schieberegler kann der Seite oben hinzugefügt werden. Die "Image" -Form wird verwendet, um die Folie anzuzeigen, und zwei "Sketchy Triangles", die als Vor- und Zurück-Steuerelemente fungieren. Wenn Sie zweimal auf ein Objekt klicken, werden die Kanten- / Eckgriffe rosa, sodass sie gedreht werden können:

Schließlich werden drei Regionen unten hinzugefügt, um Nachrichten, ein Video und ein Kontaktformular zu halten (die "Box" -Form wird verwendet, um jede Region zu umreißen). Die Nachrichten werden nur eine Überschrift und ein Text sein (mit dem "Label" Sketchy Shape mit einigen unterschiedlichen Textgrößen), die Video Region wird durch Fallenlassen eines "Sketchy Triangle" innerhalb eines "Sketchy Circle" innerhalb einer "Box" gemacht einen "Play" -Button), und der letzte wird ein "Label" sein, begleitet von drei "Text Fields" und einem "Button":

Indem Sie die vorgefertigten Formen verwenden, können Sie mit Hilfe von Zeichenprogrammen sehr schnell (die oben genannten ungefähr zehn Minuten) Ideen auf eine Weise darstellen, die andere verstehen können. Diese Microsoft Visio-Alternative ermöglicht es Ihnen, Diagramme in einem intuitiven und tragbaren erstellen (Evolus Pencil selbst ist plattformübergreifend und Zeichnungen können in PDF oder PNG exportiert werden), um mit Kollegen zu teilen.