Skalieren auf unterschiedlichen Bildschirmen

Die Entwicklung von Windows 8

Einblicke in die Arbeit des Windows-Entwicklerteams

Skalieren auf unterschiedlichen Bildschirmen

Rate This
  • Comments 7

In der Welt der Monitore gibt es unzählige Innovationen – von der Pixeldichte über die Seitenverhältnisse bis hin zu den Kerntechnologien. Windows 8 wurde entwickelt, um sich kontinuierlich an die immer umfangreicher werdende Welt der Monitore anzupassen. Unser Ziel ist es, die größte Bandbreite an Monitortechnologien zu unterstützen, sodass PC-Hersteller PCs entwickeln bzw. Sie externe Monitore verwenden können, die optimal Ihren Bedürfnissen entsprechen. Entsprechend wurde WinRT gestaltet, um die entsprechende Plattform für diese Vielfalt zur Verfügung zu stellen. Dies ist ein umfangreicher Beitrag, der sich mit den Einzel- und Feinheiten rund um die Unterstützung der vielen Möglichkeiten physischer Bildschirmabmessungen, Pixeldichten und Auflösungen beschäftigt. In diesem Beitrag von David Washington, leitendem Programmmanager unseres Teams für Benutzerfreundlichkeit, wird klar, dass dieses Thema weit über den üblichen 27-Zoll-Monitor hinausgeht.
– Steven


Eine der Stärken der Windows-Plattform, ist der Support für die verschiedensten Bauarten, sodass Windows heute auf unzähligen PCs weltweit ausgeführt wird. Unter Windows 8 bauen wir diese Stärke weiter aus, indem wir eine hervorragende Benutzerfreundlichkeit bieten – unabhängig von Bauart und Bildschirmgröße. Windows 8-PCs werden in einer Vielfalt von Bauarten und Größen verfügbar sein, von kleinen Tablets über Laptops und große Desktopmonitore bis hin zu Konfigurationen mit mehreren Bildschirmen. Sie können außerdem für die verschiedenen Pixeldichten von typischen Tablets zu den neuen, hochauflösenden Tablets skaliert werden. Folgende Prinzipien dienten als Leitfaden für die Entwicklung:

  1. Den Kunden soll eine breite Auswahl an Bauarten ermöglicht und gleichzeitig eine ausgefeilte, konsistente und vorhersagbare Benutzerfreundlichkeit gewährleistet werden.
  2. Entwickler sollen problemlos Apps entwickeln können, die auf allen Bauarten von Windows-PCs optimal ausgeführt werden.

Dank Windows können Sie einen PC auswählen, der Ihren Bedürfnissen entspricht und dessen Anzeige Ihre Anforderungen und Vorlieben optimal erfüllt. Ein Student kann z. B. einen Laptop mit großem Touchscreen kaufen, da er Hausarbeiten schreiben muss, gleichzeitig jedoch auch Filme gucken oder Spiele auf dem Touchscreen spielen möchte. Familien entscheiden sich vielleicht für einen All-In-One-Desktopcomputer sehr großem Touchscreen, um all ihre Familienfotos ansehen und organisieren zu können. Eine Pendlerin wünscht sich ein kleines Tablet, das in ihre Tasche passt, um während der Zugfahrt im Internet zu surfen oder ihren Lesestapel abzuarbeiten. Ein Architekt oder Börsenhändler benötigt vielleicht je einen Bildschirm in Quer- und Hochformat, dazu noch einen Touchscreen.

Windows 8 unterstützt all diese PCs und Szenarien. Benutzer, die in ihrem Alltag zwischen verschieden großen Bildschirmen wechseln, können sich stets auf eine konsistente und vertraute Benutzererfahrung verlassen. Diese Bandbreite an unterstützter Hardware zeichnet Windows aus und spielt eine zentrale Rolle bei der Weiterentwicklung von Windows.

Unter Windows 8 wird die Benutzerfreundlichkeit von den Apps beeinflusst. Es ist also besonders wichtig, eine Entwicklungsplattform zur Verfügung zu stellen, mit der Entwickler problemlos eine ansprechende Benutzeroberfläche entwickeln können, die für alle Bildschirmformate geeignet ist. Dies ist der Hauptgrund dafür, dass Windows 8 von Grund auf als Plattform für das Entwickeln großartiger Apps, die auf einer Vielzahl von Bildschirmen funktionieren, geschaffen wurde.  

Herkömmliche Desktopmonitore, ein Laptop, ein Convertible, und ein Tablet-PC

Gerätevielfalt

Für die Bandbreite der Geräte, die Windows 8 ausführen, können die Bildschirme nach verschiedenen Kategorien geordnet werden.

  • Bildschirmgröße: PCs werden mit verschiedenen Bildschirmgrößen verfügbar sein: kleine Bildschirme von Tablets, mittelgroße Monitore für Laptops und große Bildschirme für Desktop- und All-In-One-PCs. Diese Bildschirme verfügen auch über verschiedene Formen und Seitenverhältnisse.
  • Bildschirmauflösung: Die Auflösung der Bildschirme wird stetig zunehmen. In der Regel gilt: je größer der Bildschirm, desto höher die Bildschirmauflösung. Dies ist jedoch nicht immer der Fall.
  • Pixeldichte: Auch die Pixeldichte (DPI, Dots per Inch) wird sich von Bildschirm zu Bildschirm unterscheiden, also die Anzahl der Pixel innerhalb eines physischen Bereichs. Die Pixeldichte erhöht sich proportional zur Bildschirmauflösung, die Bildschirmgröße bleibt jedoch konstant.

Bei der Entwicklung von Windows 8 für Benutzer und Entwickler wurden Bildschirmgröße, Auflösung und Pixeldichte besondere Aufmerksamkeit geschenkt. Wenn über Bildschirme gesprochen wird, muss klar sein, um welche Variable oder Dimension es geht. Ein 13-Zoll-Bildschirm kann z. B. mit beliebigen Auflösungen (d. h. einer beliebigen Anzahl an Pixeldichten) bei verschiedenen Seitenverhältnissen verwendet werden.

In dieser Abbildung sehen Sie eine Auswahl aus der Vielfalt gängiger Breitbildseitenverhältnisse und Bildschirmgrößen, mit denen Windows 8 ausgeführt werden kann. Windows unterstützt beinahe jede Bildschirmdimension, sofern der Grafiktreiber und die Hardwarekombination Windows die richtigen Informationen zur Verfügung stellen. Außerdem passen sich einige Bildschirme durch Zuschneiden und/oder Strecken verschiedenen Seitenverhältnissen an. Und obwohl in der folgenden Abbildung Slate oder Laptop angegeben ist, sollten Sie bedenken, dass diese Grenzen immer weiter verwischen.

10,1" 2560x1440, 11,6" 2560x1440, 10,1" 1920x1080, 11,6" 1920x1080, 10,1" 1366x768, 11,6" 1366x768, 14" 1920x1080, 14" 1366x768, 12" 1280x800, 15,6" 1920x1080, 17" 1920x1080, 23" 1920x1080, 27" 2560x1440

    

Mindestauflösung

In verschiedenen Blogkommentaren wurde nach der Mindestauflösung gefragt. Beispielsweise stellte @wolf zum Beitrag Das Design des Startbildschirms vom Oktober 2011 folgende Frage:

"Es wäre besser, wenn alle Entwickler ihre Apps im Metro-Stil für eine minimale Bildschirmgröße von 800x600 entwickeln müssten. Für Apps im Metro-Stil eine Mindestauflösung von 1024x768 festzulegen, schließt alle Benutzer von Netbooks aus und wird dem Windows App Store schaden."

Wir haben eine Mindestbildschirmauflösung von 1024x768 gewählt, um es Entwicklern so einfach wie möglich zu machen, hervorragende Apps für alle verschiedene Bildschirmtypen zu entwickeln, die gegenwärtig und in Zukunft verfügbar sind. Eine Mindestauflösung dient als notwendiger Ausgangspunkt, sodass Entwickler sicherstellen können, dass alle Navigations-, Steuer- und Inhaltselemente auf den Bildschirm passen. Bei der Arbeit an verschiedenen Designlayouts für Apps haben wir festgestellt, dass die Apps bei höherer Mindestauflösung funktionsreicher und abgestimmter sein können. Entwickler sollen ihre Layouts abstimmen und verfeinern können, um jeden verfügbaren Pixel der Auflösung 1024x768 zu nutzen, ohne dabei Kompromisse im Layout für niedrigere Auflösungen eingehen zu müssen.

Börsen-App neben einer angedockten Wetter-App

Die Mindestauflösung von Windows 8 ermöglicht Entwicklern das Entwickeln umfangreicher Apps, die die Auflösung 1024x768 optimal ausnutzen.

Warum 1024x768 als Mindestauflösung?

Wir haben uns aus drei Gründen für das Minimum von 1024x768 für Apps im Metro-Stil entschieden.

  • Die Auflösung ist hoch genug, um funktionsreiche und ansprechende Layouts zu unterstützen, wie wir sie von Apps im Metro-Stil erwarten. Bei niedrigeren Auflösungen wie 800x600 müssen einfachere Layouts verwendet werden, mit denen weniger Inhalt zur Verfügung gestellt werden kann.
  • Websites sind normalerweise für eine Mindest- (oder exklusive) Auflösung von 1024x768 gestaltet. Webentwickler sind daher gewohnt, Entwürfe auf diese Auflösung hin abzustimmen.   
  • Ein Blick auf die Gerätedaten auf dem heutigen Markt zeigt, dass nur 1,2 %aller aktiven Windows 7-Benutzer Bildschirme mit einer Auflösung von unter 1024x768 verwenden. Die neu entwickelte Plattform, die die Geräte von heute und morgen (mit zweifellos höheren Auflösungen) unterstützt, wurde für die Mehrheit der heutigen Bildschirme (d. h. 98,8 %) optimiert. Dabei wurde darauf geachtet, weder die Benutzererfahrung auf älteren Bildschirmen zu schmälern, noch die Entwicklerarbeit für diese Modelle zu verkomplizieren. Darüber hinaus ist die Lebensdauer von neuen PCs mit Bildschirmgrößen von 1024x600 und 1280x720 erheblich gesunken. Unseres Wissens nach werden kaum noch Durchschnitts-PCs mit dieser Auflösung produziert. Uns ist klar, dass es speziell zusammengestellte PCs gibt, die mit niedriger Auflösung ausgeführt werden und für besondere Desktop-Apps entwickelt wurden. Virtuelle Computer können problemlos eine Auflösung von 1024x768 unterstützen, auch wenn meist eine niedrigere Auflösung als Standard festgelegt wurde.

Balkendiagramm für alle unterstützten Windows 8-Apps bei einer Auflösung von 1366x768, 1280x800, 1600x900, 1920x1080, 1280x1024, 1440x900, 1680x1050, 1024x768, 1360x768, 1920x1200 und 1280x768 Desktop-Apps werden nur bei Auflösungen von 1024x600 und 1280x720 unterstützt (welche je nur 1 % der Bildschirme ausmachen).

Eine Welt ohne Mindestauflösung

Einige Leute fragen, warum wir die Mindestauflösung vorgeben, statt sie nur als Empfehlung anzusehen. Durch Erzwingen der Anforderung wird das Entwickeln von Apps vereinfacht, da Entwickler niedrigere Bildschirmauflösungen einfach ignorieren können, statt diese berücksichtigen zu müssen. Wenn bei der Entwicklung einer App niedrigere Auflösungen nicht berücksichtigt wurden, können Layouts auf unvorhergesehene Weise abgeschnitten, umschlossen oder fehlerhaft angezeigt werden. Entwickler könnten nicht sicher sein, dass ihre Apps auf allen Geräten, die von Windows 8 unterstützt werden, ansprechend aussehen. Wenn wir nur eine zwanglose Empfehlung aussprächen, würden einige Entwickler ihre Apps für diese niedrigeren Auflösungen entwickeln und testen, andere jedoch nicht. Im Ergebnis gäbe es ein uneinheitliches Angebot: Anstatt dass Entwickler allgemein für die Plattform entwickeln, würden sie sich auf spezifische Geräte spezialisieren. Außerdem könnten sich Entwickler auf den kleinsten gemeinsamen Nenner konzentrieren und so die niedrigste Auflösung wählen. Dies wiederum hätte negative Folgen für die Benutzerfreundlichkeit und die Qualität der Apps.

Bei der Spiele-App 5inarow zeigt der rote Balken über dem unteren Fünftel des Bildschirms an, wo die Anzeige bei einer Auflösung von 1024x600 abgeschnitten würde.

Das Layout dieses Spiels würde am unteren Rand abgeschnitten werden, wenn es bei einer Auflösung von 1024x600 ausgeführt würde.

Mindestauflösung und Andocken

Bei einer Auflösung von 1366x768 werden alle Features von Windows 8, einschließlich Multitasking mit Andocken, unterstützt. Wir haben diese Auflösung gewählt, da sie über genug horizontale Pixel verfügt, um die Breite einer angedockten App mit 320 px neben einer Haupt-App mit 1024 px darzustellen. Die Spezifikationen des Samsung-Tablets, die wir auf der //build/-Konferenz bekannt gaben, sind 11,6 Zoll mit einer Auflösung von 1366x768 (das gegenwärtig auf dem Markt befindliche Samsung Series 7 Tablet). Diese Spezifikationen legen die Mindestbildschirmauflösung fest, die alle Features von Windows 8 auf einer praktikablen physischen Größe unterstützt.Angedockte App mit einer Breite von 320 px, Haupt-App mit einer Breite von 1024 px und einer Höhe von 768 px

        

Die angedockte Ansicht hat immer eine festgelegte Breite von 320 px. So können Entwickler eine bestimmte Ansicht für diese Größe erstellen und optimieren. Eine Breite von 320 px ist eine gängige und vertraute Größe: Entwickler kennen sie bereits von verschiedenen Handyplattformen.

Einige Leute fragen uns, warum die angedockte Ansicht nicht beliebig groß sein kann oder warum nicht verschiedene Multitaskinggrößen möglich sind. Die Unterstützung beliebiger Größen für ein so kleines Layout würde die App-Entwicklung erheblich verkomplizieren und dem Entwickler eine Menge an zusätzlicher Arbeit abverlangen.

Die Breite einer angedockten App ist zwar festgelegt, jedoch wird die Vertikale vergrößert, um sie dem Bildschirm anzupassen. So müssen Sie auf größeren Bildschirmen weniger scrollen. Der //Build/-Vortrag 8 Merkmale großartiger Apps im Metro-Stil stellt viele großartige Beispiele für angedockte Layouts zur Verfügung. Andocken und Multitasking werden in einem kommenden Blogbeitrag ausführlicher behandelt.

Im Folgenden finden Sie verschiedene Beispiele, in denen das angedockte App-Layout auf der linken und das Haupt-App-Layout auf der rechten Seite angezeigt werden.

3 verschiedene Apps mit Hauptlayout neben dem angedockten Layout

Gibt es eine Höchstauflösung?

Vielleicht wundern Sie sich, warum es keine Höchstauflösung gibt. Bei höheren Auflösungen ist der Anzeigebereich größer, sodass das Layout auf Bildschirmen mit höherer Auflösung nicht unterbrochen oder abgeschnitten wird. Sie können Apps im Metro-Stil auf einem Bildschirm mit bis zu 30-Zoll und einer Auflösung von 2560x1600 ausführen! Zwar werden Apps bei größeren Anzeigebereichen nicht abgeschnitten. Dennoch sollten bei der Entwicklung auch Bildschirme mit größerer Auflösung berücksichtigt werden, sodass die Apps in größeren Anzeigebereichen weiterhin ansprechend aussehen.

Größere Bildschirme

Auf größeren Bildschirmen wie Desktopmonitoren erwartet man in der Regel, mehr Inhalt auf dem Bildschirm anzeigen zu können. Mit zunehmender Bildschirmgröße stehen mehr Pixel zur Verfügung. In den folgenden Abbildungen wird dargestellt, wie bei steigender Bildschirmgröße und Pixelanzahl die Anzahl der Objekt derselben Größe, die auf dem Bildschirm dargestellt werden können, zunimmt. Auf den unten dargestellten kleinen Bildschirm passen ca. 40 der orangen Quadrate, während auf dem größeren Bildschirm 84 Quadrate derselben Größe angezeigt werden können.

11,6-Zoll-Bildschirm mit einer Auflösung von 1366x768 im Vergleich zu einem 17-Zoll-Bildschirm mit einer Auflösung von 1920x1080, auf dem wesentlich mehr Quadrate dargestellt werden können

  Größere Bildschirme verfügen in der Regel über mehr Pixel – so lassen sich mehr Inhalte anzeigen. 

Doch nur, weil mehr Inhalte auf einem Bildschirm dargestellt werden können, heißt dies noch lange nicht, dass jede App diese Möglichkeit auch nutzen wird. Wenn eine App mit festgelegten Abmessungen oder für eine bestimmte Bauart entwickelt wurde, wird auf einem größeren Bildschirm möglicherweise ein großer leerer Bereich angezeigt, wie im folgenden Beispiel dargestellt. Dies ist, wie auch in verschiedenen Kommentaren angemerkt, nicht wünschenswert.

Ungeachtet der hohen Bildschirmauflösung sind die wenigsten modernen Websites auf große Bildschirme abgestimmt. So wird ein großer Anzeigebereich nicht genutzt. (Viele Benutzer zoomen mit dem Mausrad oder den Tastenkombinationen STRG+, STRG-, STRG 0 Text auf großen Bildschirmen.) Entsprechendes gilt für Mobilgeräte, wenn Websites zu groß für die Anzeige auf dem Bildschirm des jeweiligen Geräts sind. Immer mehr Entwickler passen ihre Inhalte an unterschiedliche Formfaktoren an. Hierzu verwenden sie eine Kombination aus Formfaktorerkennung und der Verwendung der Apps.

Schlagzeilen-App in der oberen linken Ecke des Bildschirm mit freiem Bereich unten rechts

Ohne die Berücksichtigung der Bildschirmgröße werden bei vielen Apps auf größeren Bildschirmen leere Bereiche angezeigt.

Die Windows 8-Plattform ermöglicht mithilfe integrierter Steuerelemente und Techniken das einfache Erstellen von Apps, die auf unterschiedliche Bildschirmgrößen skaliert werden. Apps unter Windows 8 füllen den verfügbaren Bereich aus, indem mehr Inhalte angezeigt werden, sofern möglich. Ein Entwickler kann Apps so gestalten, dass mehr Inhalte angezeigt werden, wenn die Bildschirmgröße zwischen Tablets, Laptops mit größeren Bildschirmen und Desktopmonitoren wechselt. Beispielsweise kann diese Nachrichten-App auf größeren Bildschirmen mehr Artikel anzeigen. Beachten Sie, dass die zugrunde liegende Plattform sowie die zugrunde liegenden Tools asynchrone Programmierung unterstützen, die ebenso ein "auffüllen" freier Bereiche ermöglicht und die Apps so schnell und flüssig macht wie auf kleineren Bildschirmen. Benutzer können die App weiterhin verwenden, während größere Inhalte heruntergeladen werden.

Schlagzeilen-App auf einem 11,6-Zoll-Bildschirm mit einer Auflösung von 1366x768 und 10 Artikeln, auf einem 13-Zoll-Bildschirm mit einer Auflösung von 1400x1050 und 15 Artikeln sowie auf einem 20-Zoll-Bildschirm mit einer Auflösung von 1920x1080 und 21 Artikeln

Erstellen von Apps für größere Bildschirme

Windows 8 wurde auf unterschiedliche Bildschirmgrößen und -formate von Tablets, Laptops und Desktopmonitoren abgestimmt. Wenn ein Benutzer zu einem Bildschirm mit einer anderen Größe wechselt, ist es entscheidend, dass das System und die Apps den vorhandenen Platz optimal ausnutzen, um die Apps so immersiv wie möglich darzustellen.

Beispiel-App auf drei unterschiedlichen Bildschirmgrößen

Mit adaptiven Layouts wie dem der Beispiel-App, die für die auf der //build/ präsentierten Developer Preview
erstellt wurde, sehen Benutzer auf größeren Bildschirmen mehr Inhalte.

Eine der Möglichkeiten, mit denen Windows 8 Entwickler beim Anpassen von Apps für unterschiedliche Bildschirme unterstützt, sind die standardbasierten adaptiven Layouts der App-Plattform. Im Web war es bislang eine Herausforderung, App-Layouts zu erstellen, die auf unterschiedlichen Bildschirmgrößen ansprechend aussehen. Anstatt einen Satz neuer, proprietärer Layout-Steuerelemente bereitzustellen, verfügt Windows 8 über integrierte Unterstützung für vertraute Techniken, mit denen sich adaptive Layouts gestalten lassen – von XAML bis hin zu den vom W3C ratifizierten Satz CSS3-Funktionen, die speziell für Webentwickler erstellt wurden.

In HTML unterstützen das CSS3-Raster, flexible Felder und mehrspaltige Layouts Entwickler dabei, den verfügbaren Bildschirmplatz auf unterschiedlichen Geräten und Auflösungen zu nutzen.

Das CSS3-Raster-Layout ermöglicht Entwicklern, die Zeilen und Spalten des Layouts anzugeben. Dies ist vergleichbar mit der Verwendung einer HTML-Tabelle, jedoch beherrschbarer und flexibler. Ein Raster stellt außerdem eine gute Möglichkeit dar, ein adaptives Layout auf übergeordneter Ebene zu definieren, ähnlich den Layouts der Benutzeroberfläche von Windows 8 (beispielsweise die Startseite und die Dateiauswahl). Sie definieren die Zeilen und Spalten und fügen anschließend die Inhalte in das Raster ein. Es lässt sich auch ganz einfach festlegen, welche Zellen angepasst und auf dem Bildschirm gestreckt werden sollen.

Raster mit vier Feldern mit den Zahlenpaaren: 1,1; 1,2; 1,2; 2,2

Das CSS3-Layout flexible box ermöglicht es Entwicklern, Rändern und freie Bereiche gleichmäßig und vorhersagbar zu verteilen. Dies eignet sich vor allem für Layouts von Einzelelementen und Auflistungen wie Symbolleisten und Bildergalerien.

Letztlich können noch mehrspaltige CSS3-Layouts verwendet werden, um Inhalte wie in einer Zeitung oder Zeitschrift auf einer Seite in mehreren Spalten anzuordnen. Sämtliche in Visual Studio 11 bereitgestellten Vorlagen verwenden diese Layoutentwürfe und nutzen ListView und andere Steuerelemente für die standardmäßige Unterstützung unterschiedlicher Bildschirmgrößen. Entwickler können auf dieselben standardbasierten Layout-Techniken und Steuerelemente zurückgreifen, um Layouts an unterschiedliche Bildschirmgrößen, -ausrichtungen und angedockte Ansichten anzupassen. Sämtliche HTML-Layoutentwürfe in HTML stehen auch XAML-Entwicklern zur Verfügung.

Bei einigen Apps, insbesondere Spielen und Apps mit spieleähnlicher Benutzeroberfläche, soll der bei höheren Auflösungen bereitstehende Bereich nicht genutzt werden. Für diese Apps, die für eine Auflösung von 1366x768 erstellt wurden, bieten wir eine einfache Möglichkeit, diese auf ein beliebiges Bildschirmformat zu skalieren. Wenn das Seitenverhältnis nicht mit den Inhalten übereinstimmt, stellt das System anpassbare Platzhalterbereiche zur Verfügung. Obwohl dies nicht für alle Benutzeroberflächen gleichermaßen geeignet ist, da so einige Elemente auf Desktopmonitoren womöglich größer dargestellt werden als erwünscht, ist dies eine gute Lösung für zahlreiche Spiele und spieleartige Benutzeroberflächen, die hauptsächlich aus Bitmap-Grafiken bestehen. Außerdem werden mithilfe dieser Lösung die Apps auf zahlreichen Bildschirmen weiterhin immersiv dargestellt, ohne dass dem Entwickler nennenswerter Aufwand entsteht.

        

Spiel, das auf einem größeren Bildschirm größer dargestellt wird

Bei festgelegten Layouts, wie bei diesem 5inarow-Spiel, wird dieses auf größeren Bildschirmen größer angezeigt.

Uns ist wichtig, dass App-Entwickler die Layout-Technik verwenden können, die für die jeweilige App, je nach Inhalten oder Workflow, am besten geeignet ist – Anpassen oder Skalieren. Wenn sämtliche Apps angepasst würden, wäre es schwierig, spieleähnliche Benutzeroberflächen zu erstellen, die einen 23-Zoll-Bildschirm mit einer Auflösung von 1920x1080 ohne größere leere Ränder ausfüllen. Wenn andererseits sämtliche Apps skaliert würden, könnten Benutzer auf einem 23-Zoll-Bildschirm mit einer Auflösung von 1920x1080 nicht mehr E-Mails anzeigen. Wir sind überzeugt, dass unsere Lösung den passenden Ausgleich bereitstellt und Entwicklern die Auswahl und Tools bietet, um Apps für unterschiedliche Bildschirme und Szenarien zu optimieren.

Sie fragen sich vielleicht, warum wir nicht einfach beliebige Größenänderungen von Apps zulassen und die Sache einfach auf sich beruhen lassen. Vor dem Hintergrund der Fenster in Windows, deren Größe bisher beliebig verändert werden konnte, ist dies eine berechtigte Frage. Tatsächlich hat die erste Version von Windows in Kacheln angeordnete Fenster unterstützt. Überlappende Fenster gibt es erst seit Windows 2.0. Wir haben uns auf maßgeschneiderte Layouts für Apps im Metro-Stil konzentriert (die Gründe hierfür wurden in diesem Beitrag dargelegt) und eine verlässliche Darstellung bei unterschiedlichen Auflösungen anvisiert.

Dies entspricht auf den ersten Blick vielleicht nicht der Alltagserfahrung mit Windows. Zieht man jedoch die Vielfalt der Apps sowie die sich ständig erweiternde Palette verfügbarer Bildschirmgrößen in Betracht, wird deutlich, das Entwickler keine Anpassung für all diese Größen mehr leisten können. Obwohl bei vielen Programmen Mindestanforderungen angegeben werden, erleben wir in der Praxis zahlreiche Fehler, z. B. nicht vollständig angezeigte Benutzeroberflächenelemente, falsche Positionierung oder schlechtes Rendering bei der Anpassung oder Maximierung der Fenstergröße. Außerdem gibt es Elemente (Symbole und Benutzeroberflächenelemente), die bei bestimmten Pixeldichten nicht richtig skaliert werden. Selbst beim Menüband von Office 2007 war viel Aufwand für die Skalierung erforderlich. Dies wird in der folgende Reihe Screenshots dargestellt.

Vier Größen: groß, mittel, klein, Popup, erweitertes Popup

Bildquelle:Scaling up, scaling down von Jensen Harris: An Office User Interface-Blog

Unglücklicherweise nutzen die meisten Anwendungen die Vorteile der bereits vorhandenen Steuerelemente (wie das Windows-Menüband) nicht für eine erfolgreiche Skalierung. So müssen Benutzer per Versuch und Irrtum feststellen, welche Fenstergrößen sie verwenden können, und Entwickler müssen Bugs und Inkonsistenzen zwischen unterschiedlichen Auflösungen beheben, die möglicherweise nicht getestet wurden, da nicht alle Auflösungen, Seitenverhältnisse und Pixeldichten in Betracht gezogen werden können. Beim Erstellen eigener Layouts, Steuerelemente und Benutzeroberflächenmetaphern gehen Entwickler häufig von der für den Code erforderlichen Bildschirmauflösung aus, erzwingen diese jedoch nicht (bis heute werden Windows-Eigenschaftenseiten bei 600 Pixel abgeschnitten, wie manche Benutzer vielleicht auf älteren Netbooks oder auf VMs bemerkt haben werden).

Während viele Leser dieses Blogs beliebige Fenstergrößen für machbar halten werden, zeigen Erhebungen zwei wichtige Punkte. Erstens werden auf Laptops (mehr als 75 % der verkauften PCs) die meisten Anwendungen ständig maximiert ausgeführt, was vor dem Hintergrund des verfügbaren Platzes und der Darstellung der meisten Benutzeroberflächen und Websites auch sinnvoll ist. Zweitens werden auf großen Bildschirmen die meisten Fenster in einer überschaubaren Anzahl von Rohabmessungen dargestellt, da sich die meisten Programme nicht "unendlich" skalieren lassen.

Wir werden neue Ansätze für Benutzeroberflächen und neue Möglichkeiten, Befehle zu strukturieren, erleben. Windows 8 enthält eine umfassende Steuerelementbibliothek sowie wesentlich flexiblere Tools und mehr Sprachen zum Erstellen von Benutzeroberflächenlayouts als jede vorherige Version. Und selbstverständlich gibt es weiterhin den (verbesserten) Windows-Desktop, auf dem die vertrauten Steuerungsmöglichkeiten für bereits verwendete Apps vorhanden sind.

Unterschiedliche Pixeldichten

Das Konzept der Pixeldichte ist vielen Benutzern noch neu. Es hängt jedoch eng mit der hier besprochenen Bildschirmgröße und Auflösung zusammen. Einfach ausgedrückt handelt es sich bei der Pixeldichte um die Anzahl der Pixel in einem physischen Bereich. Dieser wird in der Regel als Punkte pro Zoll oder DPI (Dots per Inch) angegeben. Mit wachsender Pixeldichte sinkt die physische Größe der einzelnen Pixel. Viele von Ihnen haben vielleicht bemerkt, wie klein Text auf Laptops mit besonders hohen Auflösungen angezeigt werden kann. Ebenso werden viele von Ihnen mit den Funktionen vertraut sein, mit denen sich Texte auf dem Desktop vergrößern lassen, um diesen Effekt auszugleichen. Für WinRT-Apps bietet Windows 8 diesbezüglich eine innovative Unterstützung.

135-DPI-Bildschirm mit vier Zeilen großer Quadrate

190-DPI-Bildschirm mit sechs Zeilen kleinerer Quadrate

Auf Bildschirmen mit höherer Pixeldichte werden Elemente ohne Skalierung kleiner dargestellt.

Die Meisten von uns sind von Laptop- und Desktopbildschirmen relativ niedrige Pixeldichten gewohnt. Beispielsweise hat ein handelsüblicher Laptop mit einem 13-Zoll-Bildschirm und einer Auflösung von 1280x800 eine Pixeldichte von 116 DPI. Da jedoch ständig neue Bildschirme auf den Markt kommen, wurden bei der Pixeldichte erhebliche Fortschritte erzielt. Viele Windows 8-Tablets werden Pixeldichten von mindestens 135 DPI aufweisen – viel mehr, als die meisten Benutzer gewohnt sind. Und selbstverständlich wurden bereits HD-Tablets mit einer Full HD-Auflösung von 1920x1080 auf 11,6-Zoll-Bildschirmen eingeführt, die eine Pixeldichte von 190 DPI aufweisen, oder Quad-XGA-Tablets mit einer Auflösung von 2560x1440 bei ebenfalls 11,6 Zoll. Das ist eine Pixeldichte von 253 DPI. Die Pixeldichten können bei weniger extremen Seitenverhältnissen und kleineren Bildschirmen noch höher ausfallen, wie beispielsweise beim neuen iPad. Mit wachsender Pixeldichte sinkt die physische Größe von Objekten auf dem Bildschirm. Wenn Windows nicht auf unterschiedliche Pixeldichten ausgerichtet wäre, wären die Objekte auf dem Bildschirm zu klein, um diese auf Tablets zu lesen oder bequem auf sie zu tippen.

Finger, der bei einer Auflösung von 1366x768 und 1920x1080 über eine Schaltfläche bewegt wird. Bei der höheren Auflösung ist die Schaltfläche zu klein, um problemlos auf diese tippen zu können.

Ohne Skalierung sind Objekte zu klein, um auf Bildschirmen mit höherer Pixeldichte auf diese zu tippen (wie bei dem HD-Tablet auf der rechten Seite).

Für diejenigen unter Ihnen, die Bildschirme mit höheren Pixeldichten kaufen, möchten wir sicherstellen, dass Apps, Texte und Bilder auf diesen Geräten ansprechend dargestellt werden. Anfangs haben wir mit einer fortlaufenden Skalierung auf die Pixeldichte experimentiert, durch die die physische Größe eines Objekts erhalten bleibt. Jedoch werden in den meisten Anwendungen Bitmap-Grafiken verwendet, die beim Skalieren auf eine unvorhergesehene Größe unscharf werden. Daher verwendet Windows 8 vorhersagbare Skalierungsverhältnisse, um sicherzustellen, dass Windows auf diesen Geräten optimal dargestellt wird. Unter Windows 8 erfolgt die Skalierung in drei Prozentstufen:

  • 100 %, wenn keine Skalierung erfolgt
  • 140 % auf HD-Tablets
  • 180 % auf Quad-XGA-Tablets

Die Vergrößerung eines Texts auf einem Bildschirm mit höherer Pixeldichte ist wesentlich schärfer als bei einer niedrigeren Pixeldichte, während die Größe der Schaltfläche gleich bleibt.

Mithilfe der Skalierung wird unter Windows 8 die physische Größe von Objekten bei hohen Pixeldichten beibehalten. Text und Inhalte werden wesentlich schärfer dargestellt.

Die Prozentwerte sind für erhältliche Geräte optimiert. 140 % und 180 % erscheinen vielleicht als seltsame Skalierungswerte, sind im Umgang mit erhältlicher Hardware jedoch durchaus sinnvoll.

Beispielsweise ist die Skalierung um 140 % für HD-Tablets mit einer Auflösung von 1920x1080 optimiert, die 140 % der Auflösung herkömmlicher Tablets von 1366x768 entspricht. Dank dieser optimierten Skalierungswerte erfolgt eine einheitliche Darstellung auf herkömmlichen und HD-Tablets, da die effektive Auflösung beider Geräte übereinstimmt. Die Skalierungswerte wurde so gewählt, dass ein Layout, dass für 100 % (Tablets mit einer Auflösung von 1366x768) erstellt wurde, auf 140 % (HD-Tablets) oder 180 % (Quad-XGA-Tablets) in der gleichen Größe dargestellt wird.

Diagramm zeigt die optimale Pixeldichte bei Auflösungen von 1366x768, 1920x1080 und 2560x1440

Die Prozentstufen in Windows wurden entworfen, um Touchlayouts und die Bedienbarkeit
von Touchelementen beizubehalten und diese gleichzeitig für Tablets zu optimieren, die erst in Zukunft auf den Markt kommen.

Einige von Ihnen sind sicher auf den Bildschirm des neuen iPad gespannt. Hier hat sich Apple für einen Skalierungsfaktor von 200 % entschieden. Der neue Bildschirm verfügt über die doppelte Pixeldichte (132 PPI im Vergleich zu 264 PPI)* auf der gleichen Bildschirmgröße. Da iOS und die Entwickler nur die vordefinierten Auflösungen unterstützen, müssen sie sich nur um diesen einen zusätzlichen Skalierungsfaktor kümmern. Wenn man das iPad 2 mit dem neuen iPad vergleicht, bedeutet ein Skalierungsfaktor von 200 %, dass Sie bei der neuen Auflösung exakt das Gleiche sehen, wie bei einer Auflösung von 1024x768 – nur erheblich schärfer, da mehr Pixel verwendet werden (wie in der App-Abbildung oben). Auf Bildschirmen mit höherer Pixeldichte wie dem neuen iPad können Entwickler von Spielen und anderen Apps, bei denen die Leistung entscheidend ist, sich außerdem für die richtige Balance zwischen Letterboxing und einer geringeren Originaltreue entscheiden, um die beste Leistung (z. B. Framerate) zu ermöglichen.

Der Benutzer merkt nichts von der Skalierung, da Windows diese automatisch anhand der Bildschirmabmessungen implementiert, ohne dass ein Eingriff von Benutzer, Administrator oder OEM-Anbieter erforderlich ist. Entwickler müssen nur dafür sorgen, dass ihre Bilder auf jeder dieser Prozentstufen ansprechend aussehen. Da diese Skalierungswerte vorhersagbar sind, können Entwickler ganz einfach jegliche Unschärfen und Artefakte aufgrund von Bildvergrößerungen vermeiden, indem sie Bilder für jeden Prozentsatz bereitstellen.

Bei der Pixeldichte gibt es noch eine weitere Variable, bei der die bestehenden Paradigmen in Bezug auf Symbolleisten und Menüs zunehmend schwieriger zu bedienen sind. Die Rede ist von "Hacks", um etwa große Schriftarten zu verwenden oder etwa Tricks, damit das System eine andere Auflösung verwendet. Jeder, der einen Bildschirm mit hoher Auflösung verwendet, weiß nur zu gut, dass vorhandene Anwendungen und das Paradigma der Benutzeroberfläche nicht wirklich gut funktionieren, sondern unbenutzbar werden. Ein typisches Beispiel hierfür ist, wenn sich eine ganz normale Symbolleistenschaltfläche in ein winziges Quadrat verwandelt und die Größe von Menüs und Texten zu klein wird, um diese bedienen oder lesen zu können. Hierbei geht es natürlich auch um die persönlichen Einstellungen. Die Möglichkeit zur Anpassung des Systems ist sicher hilfreich, jedoch sind dies keine zuverlässigen Lösungswege, um die Bedienbarkeit von Windows auf neuer Hardware sicherzustellen.

Windows 8 wurde entwickelt, damit Entwickler ganz einfach zuverlässige Software erstellen können, die auf einer Vielzahl von Hardware funktioniert, und damit Verbraucher ein durchgängig positives Benutzererlebnis bei der Benutzung dieser Software erleben. Dabei ist es wichtig, dies nicht als isoliertes Konzept "ohne Vergrößern und Verkleinern von Fensterinhalten" zu sehen, sondern als Teil eines umfassenderen Ansatzes, um eine größere Vielfalt von Bildschirmgrößen, -auflösungen und Pixeldichten bereitzustellen. So wissen Entwickler, dass ihre Apps funktionieren, und der Verbraucher kann sicher sein, dass seine Apps mit seiner Hardware kompatibel sind. Unser Ziel ist, dass Sie keinerlei Kompromisse eingehen müssen – etwa, indem Sie Software verwenden, die nicht voll funktionsfähig ist, oder indem Sie nur aus einer begrenzten Zahl von Bildschirmgrößen (und weiteren Faktoren wie Preis, Energieverbrauch usw.) auswählen können

Erstellen von Apps für höhere Pixeldichten

Mit Windows 8 können Sie ganz einfach Apps entwickeln, die mit den unterschiedlichsten Pixeldichten funktionieren. Zunächst ist kein manueller Aufwand erforderlich, damit Ihre App skalierbar ist. Im Gegensatz zu früheren Versionen müssen Sie sich nicht darum kümmern, dass Ihre Apps zu verschiedenen DPI-Werten kompatibel sind. Hierfür gibt es Frameworks, die die App für Sie skalieren. Mithilfe von webstandardisierten CSS-Pixeleinheiten oder einem XAML-Layout werden die App-Layouts proportional skaliert. Wenn eine App "hochskaliert" wird, werden die Bilder vergrößert und könnten unscharf dargestellt werden. Windows 8 unterstützt Entwickler jedoch, sodass diese Bilder weiterhin scharf und ansprechend dargestellt werden.

Das gestreckte Bitmap ist unscharf, das 180 %-Bitmap scharf.

   

Die Windows 8-Plattform unterstützt Vektorgrafiken systemintern. Alle Bilder, die als SVG- (Scalable Vector Graphics, skalierbare Vektorgrafik) oder XAML-Grafik exportiert werden, lassen sich skalieren, ohne unscharf zu werden. Außerdem wird mit Windows 8 das automatische Laden von Ressourcen eingeführt, sodass Entwickler unter Verwendung einer Benennungskonvention drei Bildversionen speichern können. Bilder, die einer der aktuellen Prozentstufen (100 %, 140 % und 180 %) entsprechen, werden automatisch geladen, damit sie auch bei hohen DPI-Werten scharf angezeigt werden. Entwickler können außerdem die CSS3-Medienabfrage für die Auflösung (Resolution Media Query) oder Systemereignisse nutzen, um Bilder in verschiedener Skalierung neu zu laden. Mit der Skalierung auf die Pixeldichte unter Windows 8 können Entwickler mit wenig Aufwand ein grundlegendes Qualitätsniveau sicherstellen und ihre Bilder anschließend so anpassen, dass diese auf Bildschirmen mit hoher Pixeldichte brillant und scharf wirken. Scharfes Bitmap bei 100 %, 140 % und 180 %

Testen von Apps auf unterschiedlichen Bildschirmen

Auch wenn Windows das Erstellen ansprechender Apps für unterschiedliche Bildschirme vereinfacht, sollten Sie die Apps unbedingt auf den unterschiedlichen Bildschirmgrößen testen. Da uns bewusst ist, dass die meisten Entwickler nicht unmittelbar auf eine Vielzahl verschiedener Geräte zugreifen können, wurde der Support zum Testen von Apps auf unterschiedlichen Bildschirmen in die Tools integriert. Visual Studio 11 enthält Windows Simulator, mit dem Entwickler ihre Apps auf den unterschiedlichsten Bildschirmgrößen, -ausrichtungen und Pixeldichten ausführen können. Der Wechsel zu einer anderen Bildschirmgröße ist so einfach wie die Auswahl eines Elements auf der Symbolleiste.

Windows 8-Startbildschirm in Simulator. Die Steuerelemente zum Testen unterschiedlicher Bildschirmgrößen befinden sich auf der rechten Seite.

Mit Windows Simulator können Sie verschiedene Bildschirmeigenschaften testen.

Microsoft Expression Blend 5 bietet ein Plattformmenü, mit dem Sie Ihre Apps problemlos für unterschiedliche Bildschirmgrößen und Pixeldichten entwickeln können. Der Bereich von Blend lässt sich automatisch aktualisieren, je nach den Anzeigeabmessungen, die Sie im Plattformmenü auswählen.

Zu den Menüoptionen zählen verschiedene Bildschirmauflösungen, das Anzeigen von Chrom, das Überschreiben der Skalierung, das Bereitstellen des Ziels, Ansichten sowie Anzeige.

Microsoft Expression Blend 5 bietet Optionen zum Entwickeln für unterschiedliche Bildschirme.

Wiederholung

Es ist ein hohes Maß an Planung, Konzeption und Entwicklung notwendig, um sicherzustellen, dass Windows 8 auf den unterschiedlichsten Bildschirmen und Bauarten skalierbar ist. Benutzern bietet Windows 8 eine Benutzererfahrung, die über Gerätegrenzen hinweg vorhersagbar und konsistent bleibt. Auf größeren Bildschirmen werden in jeder App mehr Inhalte angezeigt. Eine größere Pixeldichte bietet ein scharfes, erstklassiges Benutzererlebnis mit hervorragender Lesbarkeit und Bedienbarkeit – gleichgültig, ob Sie einen Touchscreen oder Tastatur und Maus verwenden. Entwicklern vereinfacht Windows 8 die Unterstützung unterschiedlicher Bildschirmgrößen und Pixeldichten durch standardkonforme und vertraute Layout-Techniken und durch automatische Skalierung auf die Pixeldichte. Gleichzeitig können Entwickler ihre Inhalte so anpassen, dass diese auf allen Bauformen glänzen können.

Windows 8 auf unterschiedlichen Bildschirmen: Probieren Sie es aus!

Vielen Dank
David

 

*Ein Tippfehler im zweiten PPI-Wert wurde am 22.03.2012 korrigiert. Bitte entschuldigen Sie den Fehler.

  • Loading...
Leave a Comment
  • Please add 8 and 3 and type the answer here:
  • Post