App Studio

AppStudio Start

Kapitel Tile-Benachrichtigung und geöffnetes Beispiel-FlyoutKapitel SplashScreenSuchen nach SchlagwörternTool Viewer und Picker für FarbenTool Viewer und Picker für Glyphen aus der Schrift Segoe UI SymbolTool Viewer und Picker für AppBar-ButtonsTool Viewer aller AppIn-BeispieleViewer Illustrationen, Diagramme und Grafiken

Prolog

Was früher ein Fachbuch war ist heute App Studio die App. Pures Wissen auf den Punkt gebracht. Viele bunte Illustrationen. Interaktive Beispiele zum anfassen und experimentieren. Code einfach kopieren. Nach Schlagwörtern suchen. Überall lesen und stöbern und keinen dicken Schinken schleppen. Beispiele, Projekte, Vorlagen und Muster direkt aus der App öffnen und weiter nutzen. Ständige Updates direkt aus dem Store.

Meine neue WebSite finden Du jetzt unter https://AttilaKrick.com.

Inhalt

App Studio gibt Ihnen das Werkzeug an die Hand um Windows Store Apps zu entwerfen und im Windows Store zu veröffentlichen. Sie erfahren was Sie brauchen, wo Sie anfangen sollten und was Sie über das Erstellen wissen sollten. Die App dient als Einführung für den C# Programmierer aber auch als Nachschlagewerk für die tägliche Arbeit und das zu folgenden Themen:

Animationen               Ansichten-Status   App-Datenspeicher
Dateien und Ordner        Datenbindung       Drucken
Einstellungs-Flyout       Ressourcen         Hintergrundaufgaben
Lebenszyklus einer App    MVVM               Navigation
Gestaltung einer App      Sensoren           SpalshScreen  
Text und Typografie       Tastatur           Teilen
UI Elemente im Showroom   Touch              Video und Audio
Visual Studio 2012        Windows 8          Windows Store
WinRT und .NET            XAML               Zeichnen
Tile-, Badge-, Glyph-,    Tile- und          Toast-Benachrichtigung 
LockScreen                Suche-Funktion     u.v.m.

In App Studio direkt über die AppBar finden Sie Tools für die tägliche Arbeit wie:

Picker & Viewer für AppBar-Button Style
                    Color
                    Gylphen aus Segoe UI Symbol
                    StandardStyle
                    InApp-Beispiele

Vorlagen und Muster für Seiten-Layout
                        Schriftbild
                        Windows Store Checkliste
                        Visual Studio Handout

WCF Web Service für Test- und Debugging

DiaShow durch alle Illustrationen und Diagramme

Über den Autor

Attila Krick ist ein gestandener IT-Spezialist, Softwareentwickler, Autor und Trainer spezialisiert auf Betriebs-, Mail-, Datenbank-Systeme, .NET und Office aus dem Hause Microsoft (MCP, MCSA, MCT).

Seit 2005 ist er mit seinem Angebot für Sie tätig. Den Schwerpunkt seiner Tätigkeit gliedert sich in die Bereiche IT-Service und Beratung, Software-Entwicklung und Coaching und Schulung.

App Studio im Windows Store

 

Windows Store App – Seiten-Gestaltung

Meine neue WebSite finden Du jetzt unter https://AttilaKrick.com.

Windows Store App Page Template

Windows Store App Page Template

Die Benutzeroberfläche einer Windows 8-App soll in allen Anwendungen eine
einheitliche Silhouette haben. Merkmale dieser Silhouette sind breite Ränder oben, unten und links. Durch die breiten Ränder am richtigen Rand wird dem Benutzer die horizontale bzw. vertikale Verschiebungsrichtung für den Inhalt intuitiv vorgelegt.

Durch feste Muster wird die Einheitlichkeit in allen Anwendungen gewahrt und den Benutzern das Verständnis der systemweiten Interaktionen erleichtert.

Windows 8 und sein Apps zelebrieren den Slogan clean and fluid. Zu mindestens bedeutet dass für clean, das von einem klassischen Windows-Fenster alles verband wurde was kein Inhalt darstellt und der Inhalt gleichzeitige die Interaktionsfläche für den Benutzer wird. Unterschätzen Sie jedoch nicht den Aufwand für eine funktionelle minimalistische Benutzeroberfläche.

Seitenlayout

Unter einem Seitenlayout bezeichnet man das Anpassen und Positionieren von Objekten auf der Benutzeroberfläche. Sie müssen Ihre visuellen Objekte in Container-Objekt platzieren, um diese auf der Seite zu positionieren. Zu den Container gehören u.a. Canvas, StackPanel, Grid, GridView und ListView.

Das Seitenlayout wird für Ihre Apps in verschiedenen Ansichten benötigt. Eine Ansicht ist die Art, in der sich der Inhalt im UI einpasst und wie der Benutzer auf die App zugreift z. B. im Portrait-Format oder Ihre App ist an eine Seite angedockt. Eine App die mehrere Ansichten unterstützt, kann auf Geräten verschiedener Größen und Ausrichtungen verwendet werden, und der Benutzer kann den Inhalt entsprechend seinen Anforderungen und Vorlieben bearbeiten.

Windows 8-App’s müssen als Vollbild-Anwendungen konzeptioniert werden.

Ihr Inhalt ist das primäre Element auf der Oberfläche, sekundäre Inhalt sollte nur dann auftreten wenn sie benötigt werden, daher verlagern Sie diesen z.B. in Flyouts oder in die AppBar.

Eingabefehler zeigen Sie Inline an, d.h. dort wo sie entstanden sind.

Geben Sie Ihrem Benutzer Feedback für jede Handlung die er tut, gerne auch als Animation, z.B. beim Berühren von Elemente.

Machen Sie sich Gedanken über die Fläche die der Benutzer oft berührt bzw. nicht oft berührt und legen dort berührungswürdige bzw. berührungsunwürdige Elemente ab.

Visual Studio bietet für diese Designsprache zwei Vorlagen. _Rasteranwendung zeigt Gruppen von Daten in einem Rasterformat an,
z.B. Shopping-, Nachrichten-, Foto-, Video-Apps oder sowie RSS-Reader und _Geteilte Anwendung zeigt eine Master-Detail-Liste an.

Blend for Visual Studio 2012 ist ein ideales Werkzeug zum Bearbeiten von Layout, Bild, Grafik und Animation. Natürlich können auch alle Aufgaben mit Visual Studio realisiert werden, nur müssen Sie hierfür vieles manuell in XAML erstellen.

Für Adobe Photoshop können Sie PDS-Dateien unter http://goo.gl/jVTHl herunterladen.

Rastersystem

Das hier gezeigte Rastersystem ist ein Design-Mittel, das dazu beiträgt, visuelle Einheitlichkeit für verschiedene Anwendungen und Features zu erzielen.

Visual Studio Projekt-Vorlagen aber auch die Hilfe in der MSDN beziehen sich auf dieses Rastersystem.

Anzeigen eines Ausrichtungsgitters und weitere Rastersystem-Funktionen können in der Status-Leiste des Visual Studio-Designer aktiviert werden.

Sie finden im Download-Bereich dieser App eine Handout mit den wichtigsten Maßen.

Für Adobe Photoshop können unter http://goo.gl/jVTHl können Sie Vorlagen als PSD-Dateien downloaden.

Bei einer Auflösung von 1366x768px ergibt sich folgende Rasteraufteilung:

Einheiten 20 × 20 Pixel
Untereinheiten 5 × 5 Pixel
Quadrateinheit 16 Untereinheiten

Abstände des Seitenkopfes

Vom oberen Rand 5 Einheiten
Vom linken Rand 6 Einheiten

Abstände zum Inhaltsbereich

Vom oberen Rand 7 Einheiten
Vom linken Rand 6 Einheiten
Vom unteren Rand 2,5 – 6,5 Einheiten je nachdem ob der Inhalte Horizontal
oder Vertikal verschoben wird

Vertikale Aufteilung von Elementen

Stark konturierte Elemente 2 Untereinheiten z.B. zw. Kachel
und dem zugehörigen Text
Listen Spalten-Abstand 2 Einheiten
Themen-Gruppen-Abstand 4 Einheiten

Horizontale Aufteilung von Elementen

Kachel-Textlisteneinträgen zum Nächsten 1 Einheit
Stark konturierte Objekte 2 Untereinheiten