UI界面设计

基于Windows 10的UWP设计指南

3432

去年的时候公司 PC 端准备改版，就在考虑有没有必要做一套 UWP 的应用，调研之前下意识的觉得，要改版肯定要尝试新的风格。但调研之后，发现并不是这样，做不做 UWP 风格的应用不是设计师可以决定的，更多的是系统以及开发层面上的。

UWP 应用本身官方就给出了详细的设计指南，而 Fluent Design 的出现只是让 UWP 应用颜值更高、更好用了，举一个不恰当的例子，UWP 的设计指南是自带相机， Fluent Design 是美颜相机，都能用但是美颜之后更好看。

不过由于 Windows 系统的复杂性， Fluent Design 并没有完全覆盖 Windows10 系统，也就是说某些场景下是用不了美颜的，而要全部覆盖估计还需要很长的时间。

一、关于 UWP

UWP（Universal Windows Platform）是基于 Windows10 的通用应用平台，UWP 应用可以在所有 Windows10 的设备上运行，比如电脑端、手机端、或其他设备端。且只支持 Windows10，基于 UWP 设计的应用在商店里只会有一个安装包，同时显示可用于哪些设备，点击“获取”会自动下载符合当前设备的安装包

UWP 优缺点

1）优点

没有乱七八糟的弹出广告，产品更纯净。UWP 的消息推送只能通过通知中心，在设置里还可以选择是否接收应用的通知，就不会出现出现玩着电脑突然弹出一个软件通知的情况了

* 一套代码适应多个设备端，且支持单个平台功能的修改，不影响其他平台

* 直接通过应用市场下载软件，更安全

2）缺点

UWP 跨平台使用，只能跨 Windows 系统，并且 UWP 的应用不兼容 Windows 7 等一些老的系统，而根据目前 Windows 各系统的使用占比来看（数据来源：市场调查机构NetMarketShare）Windows 7 占了大头，这意味着开发 UWP 应用就需要做两套

其次 PC 和手机的操作习惯、软件功能差异太大，大多数产品其实不适合共用一套

厂商对于 UWP 版本的维护热情不大，因为手机 APP、游戏的开发思路，大多直接使用 Android/iOS 系统，没什么必要从一个熟悉的平台迁移到一个不习惯的PC平台，换一个平台还得遵循新的设计规范

二. UWP 设计指南

UWP 应用运行在所有 Windows 10 的设备上，系统通过算法自动缩放 UI 元素，以保证元素在所有设备上都清晰可见，此缩放算法会根据 DPI(每英寸点数)和设备的观看距离来自动缩放

介于 UWP 的缩放算法是按照 4 的倍数缩放 UI 元素，所以建议应用内所有尺寸、边距和填充的数值都为 4 的倍数。

2.1 响应式设计

UWP 应用支持所有屏幕，为了避免在小屏幕上显示的效果，到了大屏幕的设备上显的空，浪费了显示空间。所以我们需要自定义应用在屏幕超过特定大小时（也就是屏幕断点）显示更多的内容，比如在小屏幕上一排显示一个产品、在大屏设备上就可以显示多个产品...

官方建议划分断点为640以及1007，640px 以下的屏幕为小屏幕，641-1007px 之间为中等，1008以上为大屏幕

PS：这里说的屏幕大小不仅仅指显示器的大小，更多的指的是应用的窗口大小，当应用全屏时，应用窗口的大小和屏幕的大小相同，当应用不全屏时，窗口的大小小于屏幕的大小

根据屏幕的宽度不同，左侧导航显示样式也有所不同，当整体宽度小于或等于640px时，默认状态下，左侧导航完全折叠

当整体宽度介于 641px 和 1007px 之间时，左侧导航折叠成条形，导航折叠后的宽度建议48px，展开后建议320px

当整体宽度大于1008px 时，左侧导航完全展开

2.2 对话框

对话框包括标题、内容区域、和按钮，一个按钮时右对齐，两个、三个时均分，弹窗用描边区分，描边的颜色会跟随着系统主题的变化而变化

一般情况下，确认按钮（主要按钮）位于左侧，取消按钮（辅助按钮）位于右侧

当有三个按钮时，左侧第一个为第一个可执行的操作，中间为第二个可执行的操作，此时还可以指定一个默认按钮，该按钮可以做特殊处理，比如颜色高亮。当用户在键盘上按 Enter 键时，默认按钮自动触发选中。不过建议慎用三个按钮，能用两个搞定的就用两个按钮

PS：上面所说的建议确定按钮放左侧，取消放右侧，与其他平台不同，是因为大多数用户习惯用右手拿着手机，那左侧的按钮处于用户的拇指拇指弧范围内，更为舒适，而右侧的按钮需要用户将拇指向内收缩到不太舒适的位置

2.3 颜色

在 UWP 应用中，颜色主要取决与系统主题以及程序主题，系统主题指的是通过系统设置更换的主题样式，更换后字体颜色、壁纸等都会发生改变

也可以为应用自定义主题色，使之不受系统主题的影响

而程序主题指的是 UWP 提供的深色、浅色主题，这个更换的话会对应用的背景、文本、图标和常见控件的颜色造成影响。所以在设计之初就需要确定选择哪一套

2.4字体

UWP 应用默认的字体是 Segoe UI ，适用于英语等一些语言，对于其他语种，官方也推荐了不同的字体样式，根据推荐表可以得出在简体中文的界面中，中文字体为 Microsoft YaHei UI，英文字体为 Segoe UI

而为了保证字体在界面中的层级，帮助用户轻松的阅读内容，在字体大小上也做了推荐

2.5图标

图标建议使用 SVG 格式的，保证在不同的屏幕进行缩放时不会模糊。官方有一个图标推荐库，做之前可以先看一下，如果你要的图标已经存在的话，就可以直接用官方自带的

2.6动效

用户即时感知的最长时间是 500ms ，建议以此作为基准，退出场景或关闭页面时，建议150ms

进入场景或打开页面，建议300ms

场景切换，建议≤500ms，持续时间受移动距离的影响

小贴士：用 AE 等一些软件做动效时，会涉及到帧与秒、毫秒之间的换算，很多人不知道怎么换算，这里简单的科普一下，AE 里面新建合成时有一个帧速率，多少帧等于 1s，建议设置成 25帧/s ，这样 1帧=0.04s=40ms

三、Fluent Design

Fluent Design 是微软在2017 Bulid 上公布的全新设计语言，它能够让 Windows 10 系统更加好看和好用。该设计语言有五大核心元素，Material（材质）、Light（光感）、Depth（深度）、Motion（动画）、和 Scale（缩放）

3.1 Material（材质）——亚克力设计

亚克力设计，俗称透明度，有点像 iOS 里的毛玻璃效果，主要目的是增加界面的层次感，用户可以在系统设置里自由选择是否开启

亚克力设计主要应用到两个场景：背景以及应用内，背景亚克力指的是当前窗口和桌面背景之间的效果

应用内亚克力多出现在左侧导航，或者局部地方，如下图音乐类 APP 的头部，为界面增加层次感

3.2 Light（光感） —— 模拟现实世界

在设计交互菜单和应用界面时， Light 通过照亮元素从而吸引用户，发光的元素能引导用户轻松上手一款应用或提示应用的亮点功能所在。

Material Design 通过光引入了 Shadow（投影），而 Fluent Design 引入了 Light（光感）

3.3 Depth（深度） —— 从二维到三维立体空间

Depth 将 Z 轴也考虑到了设计和交互中（类似 Material Design 的 Elevation），通过放大或伸缩的动作，一些重要的事项会放大呈现在用户面前，造成一种深度变化的错觉，从而增加设计载体的空间。借助 Depth 元素，UI 会呈现物理环境的变化，能减少审美疲劳，增加用户的黏性。同时也是为了在 VR/AR 应用做准备