windows 10用于移动设备的UWP UI设计

Question

我正在使用Windows 10移动应用。如果我为5'设备设计一个UI，它在5.2'设备上看起来不太好。此外，在不同屏幕尺寸的模拟器上显示混乱的UI。这有什么工作吗？或者我必须为每个屏幕尺寸设计它？

Answer 1

UWP的诀窍在于您可以同时为每个屏幕尺寸进行设计。它只是您使用的响应式设计（HTML / CSS或XAML）。但是你必须使用正确的控件和设置。

the MSDN design page可以找到有关如何设计各种尺寸的一些指导。 要使用XAML创建动态布局，see this article。您可以使用各种面板类型进行布局（see this article）。但是，如果您真的想要构建一个响应式UI（或以各种大小显着改变它），RelativePanel就是您的朋友。

Answer 2

通常，请避免为控件设置固定的宽度/高度。使用网格布局，您可以设置列/行并将控件放在每个单元格中。这是适当调整界面的第一级。此外，如果您想根据屏幕分辨率调整布局（参见https://channel9.msdn.com/Series/A-Developers-Guide-to-Windows-10/07），UWP会提供AdaptiveTriggers以获取更多信息。最后但同样重要的是，请查看https://developer.microsoft.com/en-us/windows/design上的Design＆amp; UI文档。