Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
Das vorherige Thema war Portieren von Geschäfts- und Datenebenen.
Windows-Apps teilen ein gemeinsames Aussehen und Verhalten auf PCs, mobilen Geräten und vielen anderen Arten von Geräten. Die Benutzeroberfläche, Eingabe und Interaktionsmuster sind sehr ähnlich, und ein Benutzer, der zwischen Geräten wechselt, wird die vertraute Erfahrung begrüßen. Unterschiede zwischen Geräten, wie physischer Größe, Standardausrichtung und effektiver Pixelauflösung, beeinflussen die Art und Weise, wie eine App der Universellen Windows-Plattform (UWP) von Windows 10 dargestellt wird. Die gute Nachricht ist, dass ein Großteil der anspruchsvollen Aufgaben für Sie vom System mit intelligenten Konzepten wie effektiven Pixeln übernommen wird.
Verschiedene Formfaktoren und Benutzerfreundlichkeit
Verschiedene Geräte verfügen über mehrere mögliche Hoch- und Querformatauflösungen in einer Vielzahl von Seitenverhältnissen. Wie werden die visuellen Aspekte der Benutzeroberfläche, des Texts und der Ressourcen Ihrer UWP-App skaliert? Wie können Sie Toucheingaben sowie Maus- und Tastatureingaben unterstützen? Und mit einer App, die Toucheingaben auf unterschiedlichen Geräten mit unterschiedlichen Anzeigeabstanden unterstützt, wie kann ein Steuerelement ein Touchziel in der richtigen Größe bei unterschiedlichen Pixeldichten sein, und dessen Inhalt in unterschiedlichen Entfernungen lesbar ist? In den folgenden Abschnitten werden die Dinge behandelt, die Sie kennen müssen.
Was ist die Größe eines Bildschirms, wirklich?
Die kurze Antwort ist, dass es subjektiv ist, denn es hängt nicht nur von der objektiven Größe des Displays, sondern auch davon ab, wie weit Sie davon entfernt sind. Die Subjektivität bedeutet, dass wir uns selbst in die Schuhe des Benutzers setzen müssen, und das ist etwas, was Entwickler von guten Apps in jedem Fall tun.
Ein Bildschirm wird objektiv in Zoll und physischen (rohen) Pixeln gemessen. Wenn Sie beide Metriken kennen, wissen Sie, wie viele Pixel in einen Zoll passen. Dies ist die Pixeldichte, auch bekannt als DPI (Punkte pro Zoll), auch bekannt als PPI (Pixel pro Zoll). Und der Kehrwert des DPI-Werts ist die physische Größe der Pixel als Bruchteil eines Zolls. Die Pixeldichte wird auch als Auflösungbezeichnet, obwohl dieser Begriff häufig lose verwendet wird, um die Pixelanzahl zu bedeuten.
Da der Abstand zunimmt, erscheinen alle diese objektiven Metriken kleiner und lösen sich in die effektive Größe des Bildschirmsund seine effektive Auflösung. Ihr Handy wird in der Regel Ihrem Auge am nächsten gehalten, gefolgt von Ihrem Tablet und dann Ihrem PC-Monitor. Am weitesten entfernt sind Surface Hub Geräte und Fernsehgeräte. Um dies zu kompensieren, neigen Geräte dazu, objektiv größer zu wirken, je größer der Betrachtungsabstand ist. Wenn Sie Größen für Ihre UI-Elemente festlegen, legen Sie diese Größen in Einheiten fest, die als effektive Pixel (Epx) bezeichnet werden. Und Windows 10 berücksichtigt sowohl die DPI als auch den typischen Betrachtungsabstand zu einem Gerät, um die optimale Größe Ihrer UI-Elemente in physischen Pixeln zu berechnen und somit die bestmögliche Anzeigeerfahrung zu bieten. Siehe Ansicht/effektive Pixel, Sehabstand und Skalierungsfaktoren.
Dennoch empfehlen wir, Ihre App mit vielen verschiedenen Geräten zu testen, damit Sie jede Erfahrung für sich selbst bestätigen können.
Berührungsauflösung und Bildschirmauflösung
Bedienelemente (UI-Widgets) müssen die richtige Größe haben, um mit einer Berührung bedient werden zu können. Daher muss ein Touchziel mehr oder weniger seine physische Größe auf verschiedenen Geräten beibehalten, die möglicherweise unterschiedliche Pixeldichten aufweisen. Effektive Pixel helfen Ihnen auch hier: Sie werden auf verschiedenen Geräten skaliert – unter Berücksichtigung der Pixeldichte – um eine mehr oder weniger konstante physische Größe zu erreichen, die ideal für Touchziele ist.
Text muss die richtige Größe zum Lesen aufweisen (12-Punkt-Text bei einem Betrachtungsabstand von 20 Zoll ist eine gute Faustregel), und ein Bild muss die richtige Größe und effektive Auflösung für den Betrachtungsabstand haben. Auf verschiedenen Geräten sorgt die gleiche effektive Pixelskalierung dafür, dass UI-Elemente die richtige Größe haben und lesbar sind. Text und andere vektorbasierte Grafiken werden automatisch und effektiv skaliert. Rastergrafiken werden auch automatisch skaliert, wenn der Entwickler eine Ressource in einer einzigen großen Auflösung bereitstellt. Es ist jedoch vorzuziehen, dass der Entwickler jedes Asset in verschiedenen Größen bereitstellt, damit das passende für den Skalierungsfaktor eines Zielgeräts automatisch geladen werden kann. Weitere Informationen hierzu finden Sie unter Ansicht/effektive Pixel, Abstand zum Bildschirm und Skalierungsfaktoren.
Layout und adaptiver Visual State-Manager
Wir haben die Faktoren beschrieben, die zu einem sinnvollen Verständnis der Bildschirmgröße beitragen. Überlegen wir nun gemeinsam, wie das Layout Ihrer App aussehen soll und wie Sie den zusätzlichen Platz auf dem Bildschirm nutzen können, wenn er verfügbar ist. Betrachten Sie diese Seite aus einer sehr einfachen App, die auf einem schmalen mobilen Gerät ausgeführt werden soll. Wie sollte diese Seite auf einem größeren Bildschirm aussehen?
Die mobile Version ist auf die Ausrichtung im Hochformat beschränkt, da dies das beste Seitenverhältnis für die Buchliste ist, und wir würden dasselbe für eine Seite mit Text tun, die am besten in einer einzigen Spalte auf mobilen Geräten angezeigt wird. PC- und Tablet-Bildschirme sind jedoch unabhängig von der Ausrichtung groß, sodass diese Einschränkung für mobile Geräte wie eine unnötige Beschränkung für größere Geräte erscheint.
Indem die App optisch vergrößert wird, um wie die mobile Version auszusehen, nutzt man nicht den zusätzlichen Platz des Geräts effektiv, was dem Benutzer nicht gerecht wird. Wir sollten darüber nachdenken, mehr Inhalt zu zeigen, anstatt denselben Inhalt in einer größeren Form darzustellen. Auch auf einem Phablet könnten einige weitere Inhaltszeilen angezeigt werden. Wir könnten zusätzlichen Platz verwenden, um unterschiedliche Inhalte anzuzeigen, z. B. Anzeigen, oder wir könnten das Listenfeld in eine Listenansicht ändern und elemente in mehrere Spalten umschließen lassen, wenn dies möglich ist, um den Platz auf diese Weise zu verwenden. Siehe Richtlinien für Listenansichts- und Steuerelemente für Rasteransicht.
Zusätzlich zu neuen Steuerelementen wie Listenansicht und Rasteransicht verfügen die meisten etablierten Layouttypen aus Windows Phone Silverlight über Entsprechungen in der universellen Windows-Plattform (UWP). Beispiel: Canvas-, Grid-und StackPanel-. Das Portieren eines Großteils der Benutzeroberfläche, die diese Typen verwendet, sollte einfach sein. Suchen Sie jedoch immer nach Möglichkeiten, die dynamischen Layout-Funktionen dieser Layout-Panels zu nutzen, um die Größe und das Layout auf Geräten unterschiedlicher Größen automatisch anzupassen und neu zu gestalten.
Neben dem dynamischen Layout, das in die Systemsteuerelemente und Layoutbereiche integriert ist, können wir ein neues Windows 10-Feature namens Adaptive Visual State Managerverwenden.
Eingabemodalitäten
Eine Windows Phone Silverlight-Schnittstelle ist touchspezifisch. Und die Benutzeroberfläche Ihrer portierten App sollte natürlich auch die Toucheingabe unterstützen, sie können aber auch andere Eingabemodalitäten unterstützen, z. B. Maus und Tastatur. In der UWP werden Maus-, Stift- und Toucheingaben als Zeigereingabenvereinheitlicht. Weitere Informationen finden Sie unter Behandeln von Zeigereingabenund Tastaturinteraktionen.
Maximierung der Wiederverwendung von Markup und Code
Verweisen Sie auf die Liste zur Maximierung von Markup und zur Wiederverwendung von Code für Techniken zum Teilen der Benutzeroberfläche an Zielgeräte mit einer Vielzahl von Formfaktoren.