Windows 10 UWP UI Design für Mobilgerät

Question

Ich arbeite an Windows 10 Mobile App. Wenn ich ein UI für ein 5-Zoll-Gerät entwerfe, sieht es auf einem 5.2-Gerät nicht gut aus. Auch bei Emulatoren unterschiedlicher Bildschirmgröße zeigen sich vermischte UI. Arbeitet es darum herum? Oder muss ich es für jede Bildschirmgröße entwerfen?

Answer 1

Der Trick ist mit UWP, dass Sie für jede Bildschirmgröße auf einmal entwerfen können. Es ist nur ein responsives Design, das Sie verwenden (entweder HTML/CSS oder XAML). Aber Sie müssen die richtigen Steuerelemente und Einstellungen verwenden.

Einige Anleitungen zum Design für verschiedene Größen finden Sie unter the MSDN design page. Um ein dynamisches Layout mit XAML zu erstellen, see this article. Es gibt verschiedene Panel-Typen, die Sie für das Layout verwenden können (see this article). Wenn Sie jedoch eine reaktionsfähige Benutzeroberfläche erstellen möchten (oder diese in verschiedenen Größen dramatisch ändern), ist RelativePanel Ihr Freund.

Answer 2

Normalerweise vermeiden Sie bitte, feste Breite/Höhe für Ihre Kontrollen zu haben. Mit einem Grid-Layout können Sie Spalten/Zeilen festlegen und Ihre Steuerelemente in die einzelnen Zellen einfügen. Dies ist eine erste Ebene, um Ihre Schnittstelle richtig anzupassen. Darüber hinaus stellt UWP AdaptiveTriggers zur Verfügung, wenn Sie das Layout basierend auf der Bildschirmauflösung (vgl. https://channel9.msdn.com/Series/A-Developers-Guide-to-Windows-10/07) für weitere Informationen anpassen möchten. Last but not least, überprüfen Sie bitte Design & UI Documentation auf https://developer.microsoft.com/en-us/windows/design.