Windows Dev Center

Neuerstellen von iOS-App-Designs in Windows 8

Hier betrachten wir einige beliebte iOS-App-Designs und die Möglichkeiten, diese Designs auf Windows 8 zu übertragen.

Wenn Sie eine bestehende App aus iOS oder einer anderen Plattform auf Windows 8 übertragen möchten, müssen Sie sich eine entscheidende Frage stellen: Portieren oder neu schreiben?

Wenn die App mit einer Middleware-Lösung erstellt wurde, die von Windows 8 unterstützt wird, ist die Entscheidung einfach. Wenn die App aber in Objective-C komplett neu entwickelt wurde, ist etwas mehr Aufwand erforderlich.

Nutzt die App in C oder C++ geschriebene Bibliotheken? Dann können Sie den Code wahrscheinlich ohne große Änderungen weiter nutzen. Wenn Sie zum Beispiel eine C++-Bibliothek zur Bildverarbeitung oder für komplizierte Berechnungen nutzen, können Sie Ihre Windows-App entweder vollständig in C++ schreiben und denselben Quellcode verwenden oder die C++-Bibliothek in Form einer Windows Runtime-Komponente nutzen (ähnlich einer DLL, falls Sie mit Win32-Windows-Programmierung vertraut sind.) Sie könnten dann den Rest der App in C# oder JavaScript schreiben und die Methoden in der C++-Komponente aufrufen.

Wie andere Apps auf Windows 8 übertragen werden, hängt von vielen Faktoren ab, darunter das grundlegende Design und die Verwendung systemeigener Steuerelemente. Sehen wir uns nun einige wichtige Arten von Apps an, und überlegen wir, wie diese als Windows Store-Apps aussehen könnten.

Mit OpenGL geschriebene Spiele oder Anwendungen

Wenn die App keine Middleware-Lösung wie zum Beispiel Unity nutzt, sondern mit Objective-C und OpenGL (mit oder ohne GLKit) erstellt wurde, muss sie mit DirectX in C++ neu erstellt werden.

Ein DirectX-Spiel

Im Windows Dev Center finden Sie viele Themen, die Sie beim Wechsel von OpenGL zu DirectX unterstützen, darunter:

2D-Spiele oder Apps ohne systemeigene Steuerelemente

Apps mit eigenen Schaltflächen und Steuerelementen – z. B. Lern-Apps, Reader für Zeitschriften oder einfache Spiele – lassen sich am einfachsten für Windows 8 konvertieren.

Ein einfaches 2D-Spiel

Wenn die Grafiken in Ihrer App einfache 2D-Animationen nutzen, könnten diese für die Windows 8-Version mithilfe eines JavaScript-/HTML-5-Projekts angepasst werden, da das HTML5 Canvas-Steuerelement ähnliche 2D-Rendering-Unterstützung bietet wie ein UIImage-Steuerelement. Sie können sich auch für C# und XAML entscheiden und dabei XAML-Objekte wie Bild, Rechteck oder Ellipse nutzen. Weitere Informationen siehe: Entwickeln von Reversi, einem Windows Store-Spiel in C# und XAML.

Falls es in der App viele anspruchsvolle Animationen gibt, ist für die gewünschten Frameraten eventuell eine Middleware-Lösung und/oder DirectX erforderlich.

Doch egal, für welchen Ansatz Sie sich entscheiden: Wenn Sie auf die charakteristischen Steuerelemente und Funktionen von Windows 8 verzichten, wird Ihre App auf die Benutzer etwas ungewohnt und simpel wirken.

Eine App mit einigen systemeigenen Steuerelementen

Eine App, die einen Bildband simuliert, würde auf beiden Plattformen ähnlich aussehen. Bei der iOS-Version würde das Bild im Regelfall mit einem UIImageView-Steuerelement angezeigt werden. Die Navigation erfolgt dann über die UIToolbar- oder UINavigationView-Steuerelemente, die mithilfe des UIAppearance-Protokolls individuell angepasst werden können.

Eine Bildband-App für iOS

Die Windows Store-App könnte Bilder mithilfe von FlipView anzeigen und die Navigation über ein App-Leisten-Steuerelement ermöglichen. In der App-Leiste können Schaltflächen für die Navigation und andere Funktionen abgelegt werden. Die Leiste bleibt verborgen, bis der Benutzer auf dem Bildschirm nach oben wischt (oder mit der rechten Maustaste klickt oder die Windows-Taste + X drückt). Dadurch bleibt auf dem Bildschirm mehr Platz für Inhalte.

Windows 8-App-Leiste

Charms sind ebenfalls neue Windows 8-Steuerelemente. Sie werden angezeigt, wenn der Benutzer von rechts über den Bildschirm wischt (oder wenn die Maus sich in der rechten unteren Ecke befindet oder der Benutzer die Windows-Taste + C drückt). Charms sind systemübergreifende Menüs, über die die App auf Funktionen für Suche, Einstellungen, Teilen und Drucken zugreifen kann.

Windows 8-Charms

Hier finden Sie weitere Themen zu den Steuerelemente in Windows 8:

Eine App mit einer Element-Liste

Bei diesem Design wird in einer iOS-App eine Liste mit Elementen angezeigt – im Regelfall über eine UITableView-Ansicht. Dabei wird oft ein Split-Screen-Steuerelement genutzt. Im größeren Bildschirmbereich werden die Einzelheiten zu einem bestimmten Element angezeigt.

iOS-TableView-basierte App

Sie können eine Ansicht ähnlich der UITableView-Ansicht über das ListView-Steuerelement auch in einer Windows Store-App erstellen. Das Design kann ebenso wie die Zellen in der UITableView-Ansicht angepasst werden. Siehe Tabellenansichten (iOS zu Windows).

In Windows 8 gibt es aber auch das Steuerelement GridView, das vor allem für die Anzeige von Datenlisten und Previews im seitlichen Scroll-Format nützlich ist. GridView nutzt den breiteren Bildschirm der Windows-Geräte und setzt zudem das Steuerelement Semantischer Zoom ein. Damit kann sich der Benutzer schnell einen Überblick über seine Sammlung verschaffen und dann zu einem bestimmten Abschnitt springen. Das in Windows 8.1 eingeführte Hubsteuerelement eignet sich ideal für Apps mit mehreren Informationsseiten (siehe JavaScript-Beispielcode für Hubsteuerelement oder C#-Beispielcode für Hubsteuerelement).

iOS-App mit Grid View

In diesen Themen werden die verschiedenen Windows 8-Steuerelemente beschrieben:

Eine App mit abwärts gerichtetem Navigationsmodell

Viele iOS-Apps verwenden mehrere UITableView-Steuerelemente, um in einer App weiter nach unten zu navigieren. Dabei wird ein UINavigationController eingesetzt, um die Ansichten zu stapeln und auf Wunsch zum Startbildschirm zurückzukehren.

iOS-App mit UITableView

Sie können ähnliche Navigationshierarchien mithilfe von Headermenüs erstellen. Eine Anleitung finden Sie unter Navigationsdesign für Windows Store-Apps. Wenn Sie beginnen, zwischen mehreren Seiten zu navigieren, müssen Sie sich auch überlegen, wie der Status der Seiten zwischen den Aufrufen und beim Neustart der App gespeichert wird. Siehe Teil 2: Verwalten von App-Lebenszyklus und -Zustand (Windows Store-Apps mit C#/VB und XAML) für weitere Informationen zu diesem Thema.

Windows 8-App mit Grid View

Verwandte Themen:

Apps mit unterschiedlichen Ansichten oder Informationsbereichen

Ihre App verfügt vielleicht über verschiedene Informationsseiten, die jedoch – anders als zum Beispiel bei einer Wetter-App – inhaltlich nicht zusammenhängen. Daher wäre seitliches Wischen im Panorama-Stil nicht sinnvoll. Bei einer iOS-App kann der Benutzer beispielsweise auf eine Symbolleiste oder ein segmentiertes Steuerelement im unteren Bildschirmbereich tippen, um die Ansichten zu ändern.

iOS-App mit segmentiertem Steuerelement

Eine Windows Store-App-Leiste kann Links zu den einzelnen Ansichten enthalten. Außerdem kann die App-Leiste so fixiert werden, dass sie immer sichtbar ist. Eine bessere Möglichkeit wäre jedoch die Verwendung einer Navigationsleiste im oberen Bildschirmbereich, die über eine Wischbewegung nach oben oder unten angezeigt wird (oder durch einen Klick mit der rechten Maustaste oder Drücken von Windows-Taste +Z).

Windows 8-App mit nur einer Ansicht

Windows 8-App mit Navigationsleiste

Eine weitere Funktion der Windows 8-Benutzeroberfläche ist der Semantische Zoom. Dabei wird durch eine Zusammendrückbewegung aus der Ansicht herausgezoomt, wodurch alle Elemente einer Liste sichtbar werden. Aus dieser Übersicht heraus kann der Benutzer dann über mit einem einzigen Fingerdruck oder Klick die gewünschte Ansicht auswählen.

App mit vertikalem Scrollverlauf

Bei iOS-Apps wird meist vertikal gescrollt, also von der aktuellsten Information ganz oben zu den älteren Informationen weiter unten. Beispiele hierfür sind Apps zu sozialen Netzwerken oder Nachrichten-Clients.

Scrollende iOS-App

Vertikales Scrollen wird auch von Windows Store-Apps unterstützt (siehe Richtlinien für Verschiebungen (Windows Store-Apps)), sodass Sie diesen Stil in Ihrer App weiternutzen können.

Es gibt allerdings viele gute Gründe, einmal andere Formen der Informationsdarstellung auszuprobieren: vielleicht eine horizontal scrollende GridView-Ansicht, in der der Benutzer mittels Semantischem Zoom zu verschiedenen Abschnitten springen kann (z. B. Bilder, Neuigkeiten, Menschen oder Nachrichten).

Windows 8-App mit Grid View

Schlussfolgerung

Oft ist es ganz einfach, eine App für Windows 8 umzugestalten, vor allem, wenn die App nur individualisierte Versionen der systemeigenen Steuerelemente verwendet. Bei anspruchsvolleren Steuerelementen, die speziell für Ihre App entwickelt wurden (rotierende Wählelemente, skeuomorphe Knöpfe und Schaltflächen), kann das Design von XAML-Steuerelementen mit Blend für Microsoft Visual Studio 2013 angepasst werden. Mit HTML5 Canvas können Sie auch individuelle Steuerelemente mit Bildern erstellen. Für besonders komplexe Steuerelemente sind unter Umständen die Hochgeschwindigkeits-Rendering-Optionen aus DirectX oder einer Middleware-Lösung erforderlich.

Ebenso lassen sich typische iOS-Navigationsmodelle auf Windows 8 übertragen. Allerdings bieten die App-Leiste, die Navigationsleiste, GridView und Semantischer Zoom spannende neue Impulse für Ihre App und ein besseres Benutzererlebnis.

Weitere hilfreiche Themen

 

 

Anzeigen:
© 2015 Microsoft