Artikel
11/17/2015

Sonderausgabe 2015 zu Windows 10

Band 30, Nummer 11

Entwurf von Benutzeroberflächen – Reaktionsfähiges Design für universelle Windows-Apps

Von Mike Jacobs | Windows 2015

Eine universelle Windows-App kann auf allen Windows-basierten Geräten, ob Smartphone, Tablet oder PC, ausgeführt werden. Sie können sogar universelle Windows-Apps erstellen, die auf Kompaktgeräten wie tragbaren technischen Geräten oder Haushaltsgeräten laufen. Sie können Ihre App auf eine einzelne Gerätefamilie begrenzen (z. B. mobile Geräte) oder sich entscheiden, die App auf allen Geräten mit Windows verfügbar zu machen.

Das Entwerfen einer App, die auf einer großen Vielzahl von Geräten gut aussieht, kann eine große Herausforderung sein. Was müssen Sie also tun, um eine App zu entwerfen, die auf Geräten mit wesentlich unterschiedlichen Bildschirmgrößen und Eingabemethoden eine überzeugende Benutzererfahrung bietet? Glücklicherweise bietet die universelle Windows-Plattform (UWP) verschiedene integrierte Features und universelle Bausteine, mit deren Hilfe Sie genau das erreichen. Dieser Artikel, in dem die Entwurfsfeatures der UWP vorgestellt werden, gibt Empfehlungen für das Entwickeln einer reaktionsfähigen Benutzeroberfläche (UI), die sich an verschiedene Geräte und Formfaktoren anpasst.

Beginnen wollen wir mit einem Blick auf einige der Features, die verfügbar sind, wenn Sie eine universelle Windows-App entwickeln. Um in den Genuss dieser Features zu kommen, müssen Sie nichts weiter tun, da sie in die UWP integriert sind.

Eines dieser Features ist die Plattformskalierung, die die UI basierend auf dem Typ des verwendeten Geräts mit Windows optimiert. Das System nutzt einen Algorithmus, mit dessen Hilfe die Anzeige von Steuerelementen, Schriftarten und anderen UI-Elementen auf dem Bildschirm normalisiert wird. Dieser Skalierungsalgorithmus berücksichtigt die Entfernung des Betrachters und Bildschirmdichte (Pixel pro Zoll), um die wahrgenommene Größe (anstatt die physische Größe) zu optimieren. Der Skalierungsalgorithmus stellt sicher, dass eine 24 Pixel große Schriftart auf einer Surface Hub-Anzeige, die 3 m entfernt ist, für den Benutzer genauso lesbar ist wie eine 24 Pixel große Schriftart auf einem 5-Zoll-Smartphonebildschirm in ein paar Zentimeter Entfernung. Aufgrund der Funktionsweise des Skalierungssystems arbeiten Sie beim Entwerfen Ihrer universellen Windows-App mit effektiven Pixeln anstatt mit tatsächlichen, physischen Pixeln.

Eine weitere integrierte Funktion der UWP ist die universelle Eingabe, die über intelligente Interaktionen aktiviert wird. Wenngleich Sie Ihre Apps für bestimmte Eingabemodi und Geräte entwerfen können, ist dies nicht erforderlich. Der Grund ist, dass universelle Windows-Apps auf intelligenten Interaktionen beruhen. Das heißt, dass Sie eine Klickinteraktion entwerfen können, ohne wissen oder definieren zu müssen, ob der Klick von einem tatsächlichen Mausklick oder einem Tippen mit einem Finger stammt.

Universelle Bausteine

Darüber hinaus bietet die UWP nützliche Bausteine, die das Entwerfen von Apps für mehrere Gerätefamilien erleichtern. Zu diesen Bausteinen zählen universelle Steuerelemente, universelle Stile und universelle Vorlagen.

Universelle Steuerelemente funktionieren auf allen Geräten mit Windows von Smartphones bis Surface Hub-Großbildschirmen garantiert gut. Unterstützt wird die gesamte Skala von allgemeinen Formularsteuerelemente wie Options- und Textfeldern bis zu komplexeren Steuerelementen wie Raster- und Listenansichten, die zum Generieren von Listen mit Elementen aus einem Datenstrom und einer Vorlage dienen. Diese Steuerelemente erkennen die Eingabe und werden mit dem ordnungsgemäßen Satz bestehend aus dem Aufforderungscharakter von Eingaben, den Ereignisstatus und allgemeiner Funktionalität für jede Gerätefamilie bereitgestellt.

Die UWP stattet Ihre Apps auch automatisch mit einem Standardsatz von Formatvorlagen aus, mit denen die Darstellung für jeden Zielformfaktor optimiert wird. Sie können die Standardformatvorlagen anpassen oder komplett austauschen, um für besondere visuelle Erfahrungen zu sorgen. Universelle Formatvorlagen bieten eine Vielzahl von Funktionen wie z. B.:

Eine Gruppe von Formatvorlagen, die Ihrer App automatisch die Wahl eines helleren oder dunkleren Designs ermöglichen und die Akzentfarbe des Benutzers integrieren können.
Einen auf Segoe basierenden Typenverlauf, der sicherstellt, dass App-Text auf allen Geräten klar aussieht.
Standardanimationen für Interaktionen.
Automatische Unterstützung für kontrastreiche Modi. Diese Formatvorlagen wurden mit Blick auf hohen Kontrast entworfen, sodass eine auf einem Gerät im kontrastreichen Modus ausgeführte App entsprechend angezeigt wird.
Automatische Unterstützung anderer Sprachen. Die Standardformatvorlagen wählen automatisch für jede von Windows unterstützte Sprache die ordnungsgemäße Schriftart aus. Selbst wenn Sie in derselben App mehrere Sprachen verwenden, werden alle ordnungsgemäß angezeigt.
Integrierte Unterstützung für die Leserichtung von rechts nach links.

Schließlich bietet die UWP universelle Vorlagen für Adobe Illustrator und Microsoft PowerPoint und enthält alles, was Sie für Ihren Einstieg in das Entwerfen von UWP-Apps brauchen. Diese Vorlagen enthalten universelle Steuerelemente und Layouts für sämtliche universellen Klassen von Gerätegrößen. Die Vorlagen können im Windows Dev Center unter "Entwurfsvorlagen zum Herunterladen" bit.ly/1KHun6J heruntergeladen werden.

Kennenlernen der Geräte

Um in Ihren Apps die bestmögliche Benutzererfahrung zu bieten, müssen Sie sich mit den verschiedenen Gerätefamilien vertraut machen, die von der UWP unterstützt werden. Beim Entwurf für ein bestimmtes Gerät sind die Hauptaspekte, wie die App auf dem jeweiligen Gerät angezeigt wird, wie der Benutzer mit dem Gerät interagiert und wo, wann und wie die App auf diesem Gerät genutzt wird.

Smartphones sind die am meisten genutzten Computergeräte, auf denen bei begrenztem Bildschirmplatz und mit einfachen Eingaben viele Aufgaben erledigt werden können. Smartphones werden in verschiedenen Größen angeboten und haben meist eine Bildschirmdiagonale von 4-6 Zoll, wobei Smartphones mit größeren Bildschirmen als 6 Zoll häufig als Phablets bezeichnet werden. Obwohl die App-Verwendung auf Phablets mit der auf Smartphones mit Standardgröße vergleichbar ist, ermöglichen die größeren Bildschirme einige wichtige Änderungen bei der Nutzung von Inhalten.

Smartphones werden hauptsächlich im Hochformat genutzt, meist weil es einfacher ist, das Telefon in einer Hand zu halten und mit der anderen zu bedienen. Aufgaben, für die meist das Querformat gewählt wird, sind u. a. das Anzeigen von Fotos und Videos, Lesen eines Buchs oder Verfassen von Text. Unabhängig von Größe und Nutzungsmodi weisen Smartphone einige gemeinsame Merkmale auf. Sie werden meist von nur einer Person (dem Besitzer des Geräts) genutzt und befinden sich fast immer in Reichweite, zumeist in einer Tasche. Smartphones werden in der Regel eher für kurze Zeiträume verwendet.

Benutzer interagieren mit ihren Telefonen per Touch und Stimme. Die meisten Smartphones bieten eine Kamera, ein Mikrofon, Bewegungssensoren und Ortungssensoren.

Tablets schließen die Lücke zwischen Smartphones und Laptops. Tablets sind in der Regel mit Touchscreen, Kamera, Mikrofon und Beschleunigungsmessern ausgestattet und bieten Bildschirmdiagonalen von 7-13 Zoll. Wie Smartphones werden Tablets hauptsächlich von nur einer Person, dem Besitzer, verwendet. Sie kommen zumeist zu Hause und für längere Zeiträume als Smartphones zum Einsatz. Benutzer interagieren mit Tablets per Touch, Eingabestift und mitunter auch Tastatur und Maus.

PCs und Laptops mit Windows stellen eine breite Palette von Geräten und Bildschirmgrößen dar. Im Allgemeinen können auf PCs und Laptops mehr Informationen als auf einem Smartphone oder Tablet angezeigt werden. Bildschirmgrößen beginnen bei 13 Zoll. Anwendungen auf PCs und Laptops können gemeinsam genutzt werden, aber immer nur von einem Benutzer gleichzeitig und meist für längere Zeiträume. Anwendungen können in einer Fensteransicht angezeigt werden, deren Größe vom Benutzer bestimmt wird. PC- und Laptopbenutzer arbeiten mit Anwendungen hauptsächlich mit einer Tastatur und Maus, doch viele Laptops und einige PCs unterstützen mittlerweile auch die Touchinteraktion. Laptops und Desktop-PCs verfügen in der Regel nicht über so viele integrierte Sensoren wie andere Geräte, zumeist nur über eine Kamera und ein Mikrofon.

Surface Hub-Geräte Microsoft Surface Hub ist ein Gerät für die Zusammenarbeit im Team auf einem Großbildschirm, das auf die gleichzeitige Nutzung durch mehrere Benutzer ausgelegt ist. Surface Hub bietet eine Bildschirmdiagonale von 55-84 Zoll. Anwendungen auf Surface Hub werden kurzzeitig gemeinsam genutzt, z. B. in Besprechungen, und können einen von vier Zuständen haben: "Fill" (eine feste Ansicht, die die verfügbare Fläche einnimmt), "Full" (standardmäßige Vollbildansicht), "Snapped" (variable Ansicht, die die linke oder rechte Seite der Fläche einnimmt) und "Background" (aus der Ansicht ausgeblendet, während die App weiter ausgeführt wird; verfügbar über die Aufgabenumschaltfunktion). Surface Hub unterstützt die Interaktion per Toucheingabe, Zeichenstift, Stimme und Tastatur und bietet eine Kamera und ein Mikrofon.

Windows-IoT-Geräte (Internet of Things) Bei dieser immer beliebter werdenden Geräteklasse geht es um das Integrieren von Kleinelektronik, Sensoren und Konnektivität in physische Objekte. Diese Geräte sind zumeist über ein Netzwerk oder das Internet verbunden, um erfasste Daten zu melden und mitunter Aktionen darauf anzuwenden. Diese Geräte haben entweder keinen Bildschirm oder sind an einen Kleinbildschirm mit einer maximalen Größe von 3,5 Zoll angeschlossen. Je nach Gerät können die Eingabe- und Gerätefunktionen stark variieren.

Entwerfen für bestimmte Geräte

Da Windows im Hintergrund sicherstellt, dass Ihre UI auf allen Geräten lesbar und funktionsfähig ist, müssen Sie Ihre App nicht an bestimmte Geräte- oder Bildschirmgrößen anpassen. Es gibt jedoch Situationen, in denen Sie dies möglicherweise tun möchten. Wenn Ihre App auf einem PC oder Laptop ausgeführt wird, können Sie beispielsweise zusätzliche Inhalte anzeigen, die den Bildschirm eines kleineren Geräts, z. B. eines Smartphones, vollstopfen würden.

Es gibt viele Möglichkeiten zum Optimieren Ihrer App für bestimmte Bildschirmgrößen, von denen einige schnell und einfach sind, während andere einen höheren Aufwand haben.

Lassen Sie uns zunächst ein wenig mehr auf effektive Pixel eingehen. Wie bereits erwähnt, arbeiten Sie beim Entwerfen Ihrer universellen Windows-App mit effektiven Pixeln und nicht mit tatsächlichen, physischen Pixeln. Effektive Pixel ermöglichen es, den Fokus auf die tatsächliche wahrgenommene Größe eines Benutzeroberflächenelements zu legen, ohne sich Gedanken über die Pixeldichte oder den Abstand zum Bildschirm verschiedener Geräte machen zu müssen. Wenn Sie z. B. ein 2,5 x 2,5 cm großes Element entwerfen, wird das Element in etwa die Größe von 2,5 cm auf allen Geräten aufweisen. Auf einem extrem großen Bildschirm mit hoher Pixeldichte kann das Element die Größe von 200 x 200 physischen Pixeln aufweisen, während es auf einem kleineren Gerät wie einem Smartphone möglicherweise die Größe von 150 x 150 physischen Pixeln hat.

Welche Auswirkungen hat dies auf das Entwerfen Ihrer App? Sie können die Pixeldichte und tatsächliche Bildschirmauflösung beim Entwerfen ignorieren. Entwerfen Sie stattdessen für die effektive Auflösung (die Auflösung in effektiven Pixeln) für eine Größenklasse. Auf Größenklassen gehe ich weiter unten in diesem Artikel im Detail ein. Zunächst ein kurzer Tipp: Legen Sie beim Erstellen von Bildschirmmodellen in Bildbearbeitungsprogrammen den PPI-Wert auf 72 und die Bildgröße auf die effektive Auflösung für die Zielgrößenklasse fest.

Um sicherzustellen, dass Ihre App wie gewünscht skaliert wird, muss die Multiplikation mit vier erfolgen: Docken Sie Ihre Entwürfe an das 4x4-Pixelraster an: Stellen Sie Ränder, Größen und Positionen von UI-Elementen und die Position des Texts als ein Vielfaches von 4 in effektiven Pixeln dar. Abbildung 1 zeigt Designelemente, die dem 4x4-Pixelraster zugeordnet sind. Das Designelement wird immer kontrastreiche, scharfe Kanten aufweisen. Designelemente, die nicht dem 4x4-Raster zugeordnet sind, weisen dagegen verschwommene, weiche Kanten auf.

Abbildung 1: Zuordnung zum 4x4-Pixelraster für scharfes Text- und Bildrendering

Trotz dieser Ressourcen und Möglichkeiten gibt es Situationen, in denen sie ggf. die UI Ihrer App für eine bestimmte Gerätefamilie anpassen möchten. Beispielsweise müssen Sie ggf. den vorhandenen Platz so effektiv wie möglich ausnutzen und den Navigationsaufwand für Benutzer verringern. Eine App, die Sie für ein Gerät mit einem kleinen Bildschirm entwickeln, z. B. ein Smartphone, kann auf einem PC mit einem viel größeren Bildschirm verwendet werden, doch bleibt dann eine Menge Bildschirmplatz vermutlich ungenutzt. Sie können die App anpassen, damit mehr Inhalt angezeigt wird, wenn eine bestimmte Bildschirmgröße überschritten wird. Bei einer Shopping-App wird z. B. auf einem Smartphone ggf. immer nur eine Artikelkategorie anzeigt, während auf einem PC oder Laptop mehrere Kategorien und Produkte gleichzeitig angezeigt werden. Durch das Platzieren von mehr Inhalt auf dem Bildschirm reduzieren Sie den Navigationsaufwand der Benutzer.

Mir fallen andere Szenarien ein, z. B. wenn Sie die Funktionsmöglichkeiten eines Geräts voll ausschöpfen möchten. Smartphones verfügen z. B. meist über einen Ortungssensor und eine Kamera, während dies bei einem PC eher nicht der Fall ist. Ihre App kann erkennen, welche Funktionen verfügbar sind und Features aktivieren, die deren Verwendung ermöglichen.

Der letzte Schritt ist die Optimierung der Eingabe. Die universelle Steuerelementbibliothek funktioniert mit allen Eingabetypen (Touch, Stift, Tastatur und Maus). Sie können jedoch eine Optimierung für bestimmte Eingabetypen erreichen, indem Sie Ihre UI-Elemente neu anordnen. Wenn Sie z. B. Elemente für die Navigation am unteren Bildschirmrand platzieren, ist der Zugriff auf diese für Smartphonebenutzer einfacher. Die meisten PC-Benutzer hingegen erwarten, dass Elemente für die Navigation eher am oberen Bildschirmrand angezeigt werden.

Reaktionsfähige Designtechniken

Wenn Sie die Benutzeroberfläche Ihrer App für bestimmte Bildschirmbreiten optimieren, ist vom Erstellen eines reaktionsfähigen Designs die Rede. Es gibt verschiedene Techniken für ein reaktionsfähiges Design, mit denen Sie die UI Ihrer App anpassen und den Bildschirmplatz und die verfügbaren Funktionen unterschiedlicher Gerätetypen ausnutzen können. Bei diesen sechs Techniken handelt es sich um das Ändern der Position, Ändern der Größe, Neuanordnen, Einblenden, Ersetzen und Ändern der Architektur.

Das Ändern der Position der UI-Elemente einer App ist eine der Möglichkeiten zur optimalen Gerätenutzung. In Abbildung 2 ist für das Hochformat auf Smartphone oder Phablet ein Bildlauf der Benutzeroberfläche erforderlich, da immer nur ein voller Frame sichtbar ist. Wenn die App auf einem Tablet oder anderen Gerät verwendet wird, das zwei volle Frames zulässt, egal ob im Hoch- oder Querformat, kann Frame B den vorgesehenen Platz belegen. Wenn Sie ein Raster für die Positionierung verwenden, können Sie das gleiche Raster für eine Änderung der Position der UI-Elemente verwenden.

Abbildung 2: Ändern der Position von Frames zum Ausnutzen größerer Bildschirme

Sie können die Framegröße auch optimieren, indem Sie die Ränder und UI-Elemente so anpassen, dass kleinere oder größere Bildschirme genutzt werden. Dadurch können Sie beispielsweise die Lesbarkeit auf einem größeren Bildschirm verbessern, indem Sie den Inhaltsframe vergrößern, wodurch Platz für mehr Text geschaffen wird und Bildläufe verringert werden. Ebenso bieten unterschiedliche Framegrößen eine Möglichkeit der Neuanordnung von UI-Elementen basierend auf Gerät und Ausrichtung. Beim Wechseln zu einem größeren Bildschirm beispielsweise ist es ggf. sinnvoll, größere Container zu verwenden, Spalten hinzuzufügen und Listenelemente auf andere Weise als auf einem Smartphone zu generieren.

Die Anzeige von UI-Elementen ist eine leistungsstarke Methode zum Offenlegen von Funktionalität, die auf einem bestimmten Gerät unterstützt wird, z. B. einer Kamera auf einem Smartphone. Dies bietet außerdem Optionen zum Ausnutzen verschiedener Bildschirmgrößen und -ausrichtungen. Ein gängiges Beispiel für das Ein- oder Ausblenden der Benutzeroberfläche bezieht sich auf Media Player-Steuerelemente. Hierbei werden die Schaltflächen auf kleineren Geräten minimiert und auf größeren Geräten erweitert. Der Media Player auf dem PC kann z. B. wesentlich mehr Funktionen auf dem Bildschirm anzeigen als auf einem Smartphone.

Zur Methode zum Ein- und Ausblenden gehört die Wahl, wann mehr Metadaten angezeigt werden sollen. Wenn der verfügbare Platz knapp ist, wird empfohlen, eine minimale Menge von Metadaten anzuzeigen. Auf einem Laptop oder Desktop-PC kann dagegen eine wesentlich größere Menge von Metadaten angezeigt werden. Es folgen einige Beispiele für das Ein- oder Ausblenden von Metadaten:

E-Mail-App: Avatar des Benutzers anzeigen
Musik-App: Weitere Informationen zum Album oder Künstler anzeigen
Video-App: Weitere Informationen zu einem Film oder einer Sendung anzeigen, z. B. Details zu Besetzung und Crew
Beliebige App: Spalten aufteilen und mehr Details anzeigen
Beliebige App: ein beliebiges Element, das vertikal angeordnet ist, horizontal anordnen. Auf größeren Geräte können aus gestapelten Listenelementen Zeilen mit Listenelementen und Spalten mit Metadaten werden.

Die letzten beiden Techniken für eine reaktionsfähige UI sind Ersetzen und Ändern der Architektur. Beim Ersetzen kann die Benutzeroberfläche für eine bestimmte Gerätegrößenklasse oder Ausrichtung geändert werden. Auf einem kleineren Gerät kann beispielsweise eine gestapelte Folge von Schaltflächen angezeigt werden, die auf einem größeren Gerät durch Registerkarten oben auf dem Bildschirm ersetzt werden.

Schließlich können Sie die Architektur Ihrer App reduzieren oder erweitern, um eine bessere Darstellung für bestimmte Geräte zu erzielen. Im Beispiel in Abbildung 3 wird, vom linken Gerät aus zum rechten, das Verknüpfen von Seiten veranschaulicht. Das Bild zeigt eine intelligente Hausanwendung, die auf einem größeren Bildschirm die Regler für das Haus und den Einstellungsbereich auf einem einzelnen Bildschirm kombiniert. Auf einem kleineren Gerät werden die Regler und Einstellungen auf unterschiedlichen Bildschirmen gezeigt.

Abbildung 3: Ändern der Architektur der App-Anzeige für verschiedene Bildschirmgrößen

Haltepunkte im Design

Die Anzahl der Geräteziele und Bildschirmgrößen im Windows 10-Ökosystem ist zu groß, um alle beim Optimieren der Benutzeroberfläche zu berücksichtigen. Stattdessen wird empfohlen, für drei Hauptbreiten (auch als "Haltepunkte" bezeichnet) zu entwickeln: 320, 720 und 1024 effektive Pixel. In Abbildung 4 werden die Haltepunkte beschrieben.

Abbildung 4: Entwerfen von Haltepunkten für eine reaktionsfähige Benutzeroberfläche

Größenklasse	Klein	Mittel	Groß
Breite in effektiven Pixeln	320	720	1024
Normale Bildschirmgröße (Diagonale)	4 bis 6 Zoll	Mehr als 6 bis 12 Zoll	Mehr als 13 Zoll
Typische Geräte	Smartphones	Tablets, Smartphones mit großem Bildschirm	PCs, Laptops, Surface Hubs

Berücksichtigen Sie beim Entwerfen für bestimmte Haltepunkte die Größe des Bildschirmplatzes, der Ihrer App (oder dem App-Fenster) zur Verfügung steht. Wenn die App im Vollbild ausgeführt wird, hat das App-Fenster dieselbe Größe wie der Bildschirm, doch in anderen Fällen ist es kleiner.

Beim Entwerfen für eine kleine UI ist jedes Pixel kostbar, weshalb es in Ordnung ist, Funktionalität auszublenden, die für das primäre Szenario nicht wesentlich ist, indem sie in einem Menü oder auf einer Symbolleiste platziert wird. Es empfiehlt sich auch, eine Spalte oder einen Inhaltsbereich gleichzeitig anzuzeigen und ein Symbol zum Darstellen der Suche zu verwenden, anstatt ein Suchfeld anzuzeigen.

Bei Benutzeroberflächen mittlerer Größe können Sie den zusätzlichen Platz zum Anzeigen eines Suchfelds nutzen (sofern vorhanden) und den Hauptinhalt in zwei Spalten oder Bereichen anordnen. Bei einer großen UI kann mehr Funktionalität und Inhalt angezeigt werden, wodurch die Anzahl der Klicks und UI-Interaktionen reduziert wird, die zum Abrufen von Inhalten oder Ausführen von Aktionen erforderlich sind.

Beachten Sie, dass eine Breite von 320 effektiven Pixeln bedeuten kann, dass Ihre App auf einem Smartphone oder in einem kleinen Fenster auf einem PC mit einem großen Bildschirm ausgeführt wird. Prüfen Sie also unbedingt die primäre Eingabe für das Gerät: Maus oder Touch. Bei Touchgeräten wie Smartphones können Sie die Navigation und Interaktion vereinfachen, indem Sie die Navigations- und Befehlselemente unten auf dem Bildschirm platzieren, wo sie mit dem Daumen leicht erreichbar sind. Bei Verwenden einer Maus erwarten die Benutzer allerdings, dass sich die Navigationselemente oben auf dem Bildschirm befinden. Ihre App kann die "Windows.UI.ViewManagement.UIViewSettings.UserInteractionMode"-Eigenschaft zum Ermitteln des primären Eingabegeräts verwenden und dessen Benutzeroberfläche entsprechend anpassen.

Die universelle Windows-Plattform eröffnet ein Spektrum von Geräten für Ihre Apps – von tragbaren Geräten mit Minibildschirmen bis zum enormen Surface Hub-Großbildschirm. Durch die Umsetzung von Techniken für ein reaktionsfähiges Design und Ausnutzen der in die Plattform integrierten Features und Bausteine (Steuerelemente und Formatvorlagen) können Sie eine UI erstellen, die auf Geräten aller Größen und Formen überzeugend aussieht.

Mike Jacobsarbeitet als leitender Inhaltsentwickler bei Microsoft. Seit vielen Jahren dokumentiert er die Grafik- und Präsentationsaspekte von Microsoft-Technologien – von Direct2D bis zu Windows Presentation Foundation und Silverlight.

Unser Dank gilt den folgenden technischen Experten von Microsoft für die Durchsicht und die Mitwirkung an diesem Artikel: Jeff Arnold, Eugene Gavrilov, Ross Heeter, Chigusa Sansen, Joe Tobens sowie Mike Bottemiller (Murphy & Associates)
Jeff Arnold arbeitet im Windows-Team als leitender Designer. Sein Team arbeitet eng mit dem Developer Platform-Team zusammen, um im UWP-Umfeld kreative, praktikable Lösungen zu entwickeln.
Mike Bottemiller ist ein leitender Berater bei Murphy & Associates und Autor für Microsoft. In seiner Laufbahn hat er in den Bereichen Softwaretests, Inhaltsveröffentlichung und Projektmanagement gearbeitet, bevor er sich als Autor in den Bereichen Design und Benutzererfahrung etabliert hat. Er ist Autor von Designleitfäden und Artikeln für Visual Studio, Xbox und UWP-Apps.
Eugene Gavrilov
Ross Heeter arbeitet als leitender Designer bei Microsoft. Sein Spezialgebiet sind geräte-, plattform- und eingabeübergreifende Interaktionen. Er hat im Xbox-Team am Design des Konsolendashboards, an der Begleiter-App Smartglass und Indie Games Creator’s Club-Umgebungen gearbeitet. Derzeit entwickelt er App-Umgebungen für die Windows and Devices-Gruppe.
Chigusa Sansen ist eine leitende Programm-Managerin bei Microsoft, die an vielen verschiedenen Benutzeroberflächen von Geräten gearbeitet hat: Windows CE, Windows Mobile, PC, Smartphone, Tablet und Xbox. Sie hat an vielen wichtigen Weiterentwicklungen der Benutzererfahrung mitgewirkt, die an Windows Phone und Windows 10 (UWP) aus Sicht des UI-Frameworks erfolgt sind.
Joe Tobens ist ein leitender Designer bei Microsoft. Er hat die reaktionsfähige UI für mehrere Geräte und Anwendungen für Windows 10 entworfen und dokumentiert. Derzeit arbeitet er für die Windows and Devices-Gruppe an Eingaben.