微软UWP设计规范

2,018 阅读8分钟

什么是uwp应用

  • 通用Windows平台(Universal Windows Platform,简称UWP)是微软公司创建并在Windows 10中首次引入的一个同质应用架构平台。此软件平台的目的是帮助发展Metro样式的应用,便于软件可以在Windows 10和Windows 10 Mobile上运行而无需重写。
  • uwp不同于传统pc上的exe应用也跟只适用于手机端的app有本质区别。它并不是为某一个终端而设计,而是可以在所有windows10设备上运行。

UWP应用程序,又称“Windows 10通用应用程序”,其最大的特性莫过于它可以实现真正的“全设备通用”,也就是说,它并不是为某一个确切的设备终端所设计的,而是面向于所有的Windows 10设备。开发者们只需要编写一次UWP程序,就可以在所有的Win10设备上面运行,无论是电脑、手机、平板电脑、Surface Hub大屏设备,还是全息眼镜Hololens,都能够完美地运行起来。这不仅为UWP的开发者们提高了工作效率,还为我们这些普通用户们提供了前所未有的便利。

UWP应用程序可以在Win10操作系统中的“应用商店”程序中进行统一的下载。应用商店里所有的程序都是UWP应用,这些已经上架了的程序都是经过了微软公司严格的检查后才被放到应用商店上去的,所以说里面的UWP应用都绝对安全、绝对可靠。不仅如此,因为UWP具有全设备通用的性质,所以在应用商店中不需要考虑单独下载某一设备的版本,就可以直接快速、方便地根据你正在使用的设备来判定要安装的版本,就可以安装了。这是UWP应用程序的优势之一。
随着时代的发展,触控也成为了一项潮流。为了能在Windows 10中更好地支持触控操作,微软公司就在UWP应用程序中提供了对触控的良好支持,同时也更好地兼容高分辨率的显示屏。颇具特色的是,UWP程序里面的内容会随着用户们调整窗口的大小来进行适当的更改,以适应窗口大小(这项技术通常被称之为“自适应窗口”),用户们在使用时就会产生愉悦的体验。

UWP 应用设计

有效像素和缩放

在所有上运行 UWP 应用Windows 10 设备,从您的平板电脑或 PC 到电视。 那么,如何设计 UI 看起来在各种设备和屏幕尺寸上很好?

各种设备上的同一应用

UWP 帮助通过自动调整 UI 元素,以便它们可以清晰且易于与所有设备和屏幕大小进行都交互。

当你的应用在设备上运行时,系统将使用算法来使 UI 元素在屏幕上的显示方式规范化。
此缩放算法考虑了观看距离和屏幕密度(每英寸像素),以针对感知大小(而不是物理大小)进行优化。 该缩放算法确保用户可从 10 英尺远处识别 Surface Hub 上高 24 像素的字体,正如从几英寸远处识别 5 英寸手机上高 24 像素的字体。

不同设备的观看距离

基于缩放系统的工作原理,在设计 UWP 应用时,要以有效像素而不是实际物理像素为单位进行设计。 有效像素 (epx) 是一个虚拟度量单位,用于表示布局尺寸和间距(独立于屏幕密度)。 (在我们的指南中,epx、ep 和 px 可以互换使用。) 在设计时,你可以忽略像素密度和实际屏幕分辨率。
而是针对同一大小级别的有效分辨率(以有效像素为单位的分辨率)进行设计

四的倍数

在UWP应用程序中,UI元素的大小、边距和位置应始终为4 epx的倍数。

UWP可在各种设备上进行缩放,缩放平台分别为100%、125%、150%、175%、200%、225%、250%、300%、350%和400%。基单位是4,因为它是唯一可以用非整数(例如4*1.5=6)缩放的整数。使用4的倍数可以将所有UI元素与整个像素对齐,并确保UI元素具有清晰、锐利的边缘。

布局

  • 窗口、框架和页面
    当在任何Windows10设备上启动uwp应用程序时,它将在具有框架的窗口中启动,该框架可以在页面实例之间导航。

    你可以把你的应用程序的用户界面看作是页面的集合。这取决于你决定每页应该做什么,以及页之间的关系。
    要了解如何组织页面,请参阅导航基础知识。

  • 页面布局 应如何显示页面? 大多数页面遵循一种公用结构来提供一致性,以便用户能够轻松地在应用的页面之间和页面内导航。 页面通常包含三种类型的 UI 元素:
    1.导航元素帮助用户选择他们希望显示的内容。
    2.命令元素启动操作,例如处理、保存或共享内容。
    3.内容元素显示应用内容。

常见布局模式

Controls(控件)

UWP 的设计平台提供了一系列保证在所有支持 Windows 的设备上都能正常工作的常用控件,它们遵循 Fluent Design 系统原则。 这些控件包括从简单控件(如按钮和文本元素)到复杂控件(可从一组数据和一个模板生成列表)的一切控件。

UWP 控件

样式

常用控件自动反映系统主题和主题色,使用所有输入类型并扩展到所有设备。 它们通过这种方式体现 Fluent Design 系统的特点 - 自适应、共鸣和美观。 常用控件的默认样式使用了灯光、运动和深度,因此一旦使用它们,就等于将 Fluent Design 系统集成到了你的应用之中。
常用控件是可高度自定义的,你可以更改控件的前景色或完全自定义其外观。 要覆盖控件中的默认样式,请使用轻型样式设置或在 XAML 中创建自定义控件。

主题色 gif

壳体

您的uwp应用程序将与更广泛的Windows体验交互,并在Windows Shell中显示平铺和通知。

互动程序会显示在“开始”菜单和应用程序启动时,它们会提供应用程序中正在发生的事情的一瞥。他们的力量来自他们背后的内容,以及他们被提供的智慧和工艺。

uwp应用程序有四种尺寸(小、中、宽和大),可以通过应用程序的图标和标识进行定制。

输入

UWP应用程序依赖于智能交互。您可以围绕单击交互进行设计,而不必知道或定义单击是来自鼠标、触笔还是手指的轻敲。但是,您也可以为特定的输入模式设计应用程序。

设备

同样,虽然 UWP 会自动将应用扩展到不同的设备,但你也可以针对特定设备优化 UWP 应用。

可用性

最后但并非最不重要的是,可用性是对所有用户开放你的应用体验。 每个人都可从真正非独占的用户体验中受益 应用中的可用性以了解如何使你的应用可供每个人轻松使用。
如果是面向全球用户设计,你可能需要了解全球化和本地化。
你还可能需要考虑面向在视觉、听觉和行动方面受限的用户的辅助功能。 如果辅助功能从一开始便内置于设计中,则使你的应用可供访问应只需花费极少的额外时间和精力。

总结:

优点

开机不用担心自启动,不用担心被安装一些乱七八糟的捆绑程序。 干净,安全,安装在应用中心,经过审核的。卸载无残留。 通知会集成到通知中心,很方便。 速度和性能由于架构的改善变得非常好,配置低时也相对流畅。 自适应,高低分屏的适应都很好,妈妈再也不用担心眼瞎了。

缺点

比较严格的权限,条条框框的规则和限制。 生产力不如桌面应用,大多轻量应用。 很多应用没有,难以吸引开发者。