© best_vector/Shutterstock.com
Windows Developer
Teil 2: Codierung Teil I - User Interface Design

Das User Interface gestalten

Jetzt entsteht etwas Sichtbares, etwas zum Anfassen. Das User Interface gibt einerseits der App ein Gesicht und dem Entwicklungsprozess einen Rahmen, anderseits ist es die Basis für die Abstimmungen zwischen den künftigen Nutzern und dem Entwicklungsteam.

Veikko Krypczyk, Elena Bochkor


ArtikelserieTeil 1: Idee, Planung, PrototypTeil 2: Codierung Teil I – User Interface DesignTeil 3: Codierung Teil II: Businesslogik und DatenhaltungTeil 4: Zum Kunden und Geld verdienen: Deployment und Monetarisierung

Wir haben ein klares Ziel: Innerhalb eines kurzen Zeitraums soll eine vollständige Applikation, genauer eine App für die Universal Windows Platform (UWP), entstehen. Diesen Entwicklungsprozess begleiten wir in dieser Artikelserie anhand eines konkreten Beispiels. Es geht um die Entwicklung eines Word-Cloud-Generators.

Der Prototyp der App steht, und nun geht es darum, in die Entwicklung einzusteigen. Wir müssen als Erstes einen Anwendungsrahmen schaffen und im zweiten Schritt das grundlegende Aussehen der Benutzeroberfläche gestalten. Feinarbeiten im Design, zum Beispiel bei der Anpassung der Farben und Schriftarten, können später noch nachgearbeitet werden. Wichtig sind jetzt essenzielle Festlegungen der folgenden Arten:

Nach welchem Prinzip werden die einzelnen Pages angeordnet? Soll es zum Beispiel eine Navigation auf der Basis von Registerkarten geben?Platzieren wir ein Menü, zum Beispiel in Form eines klassischen Hamburger-Menüs?Wie gestalten wir das Layout der Pages? Welche Steuerelemente werden eingesetzt und wie werden diese angeordnet? Können wir die gewünschte Funktionalität mit den Standardcontrols abdecken?Sind besondere Vorgaben hinsichtlich des Corporate Designs bei der Gestaltung zu berücksichtigen? Vielleicht müssen wir uns an Vorgaben bezüglich Farben und Schriften halten. Ausgangspunkt ist unser Prototyp, der uns eine erste Orientierung gibt (Abb. 1).

Abb. 1: Der Prototyp für unsere App

Wie starten wir die Entwicklung? Dazu müssen wir ein neues Projekt und die Entwicklungsumgebung einrichten und gewissermaßen den Rahmen für die Applikation abstecken. Wir müssen dazu u. a. die folgenden Entscheidungen treffen:

Auf welchem System wird entwickelt?Welche Entwicklungstools kommen zum Einsatz?Welche Variante der Quellcodeverwaltung ist gut geeignet?

Wir entwickeln eine App für die UWP. Als Entwicklungsumgebung setzen wir auf Windows 10. Nun ist Windows 10 aber nicht gleich Windows 10. Das System erfährt regelmäßig größere funktionale Updates, die sich sehr stark auf die Möglichkeiten einer App für die UWP auswirken. Aktuell ist die Version Windows 10 mit dem Creators Update. Beim Anlegen des Projekts muss man also sowohl die minimale SDK-Version als auch die Entwicklungsversion festlegen. Auch der Entwicklungsrechner muss daher auf d...

Windows Developer
Teil 2: Codierung Teil I - User Interface Design

Das User Interface gestalten

Jetzt entsteht etwas Sichtbares, etwas zum Anfassen. Das User Interface gibt einerseits der App ein Gesicht und dem Entwicklungsprozess einen Rahmen, anderseits ist es die Basis für die Abstimmungen zwischen den künftigen Nutzern und dem Entwicklungsteam.

Veikko Krypczyk, Elena Bochkor


ArtikelserieTeil 1: Idee, Planung, PrototypTeil 2: Codierung Teil I – User Interface DesignTeil 3: Codierung Teil II: Businesslogik und DatenhaltungTeil 4: Zum Kunden und Geld verdienen: Deployment und Monetarisierung

Wir haben ein klares Ziel: Innerhalb eines kurzen Zeitraums soll eine vollständige Applikation, genauer eine App für die Universal Windows Platform (UWP), entstehen. Diesen Entwicklungsprozess begleiten wir in dieser Artikelserie anhand eines konkreten Beispiels. Es geht um die Entwicklung eines Word-Cloud-Generators.

Der Prototyp der App steht, und nun geht es darum, in die Entwicklung einzusteigen. Wir müssen als Erstes einen Anwendungsrahmen schaffen und im zweiten Schritt das grundlegende Aussehen der Benutzeroberfläche gestalten. Feinarbeiten im Design, zum Beispiel bei der Anpassung der Farben und Schriftarten, können später noch nachgearbeitet werden. Wichtig sind jetzt essenzielle Festlegungen der folgenden Arten:

Nach welchem Prinzip werden die einzelnen Pages angeordnet? Soll es zum Beispiel eine Navigation auf der Basis von Registerkarten geben?Platzieren wir ein Menü, zum Beispiel in Form eines klassischen Hamburger-Menüs?Wie gestalten wir das Layout der Pages? Welche Steuerelemente werden eingesetzt und wie werden diese angeordnet? Können wir die gewünschte Funktionalität mit den Standardcontrols abdecken?Sind besondere Vorgaben hinsichtlich des Corporate Designs bei der Gestaltung zu berücksichtigen? Vielleicht müssen wir uns an Vorgaben bezüglich Farben und Schriften halten. Ausgangspunkt ist unser Prototyp, der uns eine erste Orientierung gibt (Abb. 1).

Abb. 1: Der Prototyp für unsere App

Wie starten wir die Entwicklung? Dazu müssen wir ein neues Projekt und die Entwicklungsumgebung einrichten und gewissermaßen den Rahmen für die Applikation abstecken. Wir müssen dazu u. a. die folgenden Entscheidungen treffen:

Auf welchem System wird entwickelt?Welche Entwicklungstools kommen zum Einsatz?Welche Variante der Quellcodeverwaltung ist gut geeignet?

Wir entwickeln eine App für die UWP. Als Entwicklungsumgebung setzen wir auf Windows 10. Nun ist Windows 10 aber nicht gleich Windows 10. Das System erfährt regelmäßig größere funktionale Updates, die sich sehr stark auf die Möglichkeiten einer App für die UWP auswirken. Aktuell ist die Version Windows 10 mit dem Creators Update. Beim Anlegen des Projekts muss man also sowohl die minimale SDK-Version als auch die Entwicklungsversion festlegen. Auch der Entwicklungsrechner muss daher auf d...

Neugierig geworden?


   
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang