UWP设计文档阅读笔记（七）：应用设计介绍

Design and UI > Introduction to UWP app design

Introduction to UWP app design

UWP应用跑在所有的Windows 10 devices。所以UWP需要帮助其应用程序适应不同的设备和尺寸。

在一个UWP应用在一种设备上运行的时候，系统使用算法来均衡UI元素在该设备屏幕上的显示。缩放算法会考虑观看距离以及屏幕像素密度（每英寸像素数目）。标准是24px的字体在Surface Hub上以10英尺的距离观看的效果，和24px的字体在5英寸手机屏幕上的观感一致。

由此，设计UWP应用时，参考的像素值是缩放算法给出的有效像素，而不是实际像素。也就是说，UWP应用设计时，对应的是有效分辨率，在 Screen sizes and breakpoints article中有对应。

在使用图片给屏幕建模的时候，将DPI设置为72，并将图片尺寸设置为对应设备的有效分辨率。

在应用跟尺寸相关的值（比如长宽、坐标、间距等等），应该以4epx为单位设计。这样可以让UWP应用以100%, 125%, 150%, 175%, 200%, 225%, 250%, 300%, 350%, and 400%等百分比缩放后的像素依然是整数。（文本大小不必按此要求设置）

UWP应用的图形界面以Window、Frame和Page的层级来组织。一个应用的页面可以设想成一组页面的集合，这组页面可以在Frame里面任意切换。

页面的布局方式有这几种：

• 导览式，帮助用户找到内容
• 命令式，帮助用户执行操作
• 内容式，帮助用户查看信息

Visual Studio的Windows Template Studio预设了很多页面布局类型。

UWP预置了一系列的通用控件。这些控件都遵循Fluent Design System。controls and patterns section提供更多控件信息。

<– Style –>

通用控件会遵循系统主题以及色调，并可以接受各种输入，以及在所有设备类型上工作。通用控件具有Fluent Design所提倡的轻量、动感以及递进等特点。与此同时，它们还具有高可定制性。你可以通过lightweight styling来使用自己的样式，或者索性通过custom controls来自定义整个控件

App会和窗口系统外壳打交道。比如贴片（tile）会在开始菜单中显示，可以用来显示一些简单的应用信息（比如日期和天气）。UWP应用有四种贴片大小（小、中、宽、大），应用的图标可能需要据此来进行自定义。参考Guidelines for tile and icon assets。

UWP应用支持灵活的输入，你可以相应一个点击事件，而不用知道这个点击是鼠标，笔尖还是手指触发。参考specific input modes。

应用可以针对特点的设备优化，参考optimize your UWP app for specific devices。

可用性是让你的用户可以被不同特点的用户使用。参考 usability for UWP apps。

面对国际化用户，你可能需要参考Globalization and localization.

针对特殊困难用户（比如视力障碍用户），需要考虑accessibility features。辅助性功能必须在设计时考虑，这样后期处理起来才比较容易，参考making your app accessible。

一些App资源：

• 设计资源：https://docs.microsoft.com/en-us/windows/uwp/design/downloads/
• 入门教程：https://docs.microsoft.com/en-us/windows/uwp/get-started/get-set-up
• 应用示例：https://developer.microsoft.com/windows/samples

视频总结

Navigation design basics for UWP apps

如果应用是由不同页面构成的，那么就要在不同页面之间导览。 导览设计有很多选择：

• 让用户按顺序经过一系列页面
• 提供一个菜单让用户方便跳转到各个页面
• 在单个页面内提供所有内容，并提供选择机制允许用户过滤内容

导览原则：

• Consistency, 一致性，避免不必要的猜测
  • 使用约定俗成的交互方式，避免违反直觉
• Simplicity, 简单性，避免不必要的动作
  • 内容组织有重点，避免过多信息对用户造成负担
• Clarity, 明了性，提供可预见的路径和选项
  • 不同页面之间的关系应该容易预见，避免用户迷失

一些推荐的做法：

• 以用户为中心。考虑清楚用户会如何在不同页面间切换的路径。在每个页面，考虑用户为什么在那，以及将要去哪里。
• 避免导览层级过深。如果超过3级导览，那么用户可能不知道如何从里面抽身。
• 避免“pogo-sticking"，避免同级的内容需要先经过上一级，然后再下一级才能访问。

如何组织页面，有两种常用方式：扁平（flat）和层级（hierarchal）：

• Flat/lateral使用条件：
  • 页面可以以任意顺序访问
  • 页面之间没有明显的父子关系
  • 总页面数不超过8个。超过了，用户可能无法很快理解每个页面的意图以及特殊性
• Hierarchical使用条件
  • 页面必须以特定顺序呈现
  • 页面之间有明显父子关系
  • 总共有超过7个页面

使用正确的控件：

• Frame，除了某些个例，大部分应用都在一个Frame里面显示多个页面。比如在主导览栏里面点击了某个页面，可以在旁边的Frame中显示。Frame可以有选择显示顶部或者底部工具栏
• Top navigation，在顶部显示导览，NavigationView支持这种模式。
  • 你希望所有导览选项都在屏幕上
  • 你希望有更多空间用来显示内容
  • 光使用图标无法表达导览的栏目
• Tabs，TabView支持这种导览方式
  • 你希望用户能够方便打开关闭标签
  • 用户可能同时打开大量标签
  • 标签可以移动
• Pivot，更顶部导览类似，不过对触摸设备有更多支持
  • 可以用手指扫屏的方式切换栏目
  • 可以在栏目间循环切换
  • 切换栏目的时候不需要太多自定义
• Left navigation， 竖直显示导览
  • 页面层级在顶级
  • 有非常多的导览栏目（超过5个）
  • 用户不会再页面间频繁切换
• Master/details，主辅显示
  • 用户可以频繁在不同页面间切换
  • 允许用户能够对某个条目或者一些条目执行高层级的操作，例如删除、排序
  • 允许用户对某个条目的细节进行调整
• Hyperlinks，超链接方式
  • 在内容中嵌入到其他页面的超链接，如同网页一样

Implement navigation between two pages

讲述不用页面间导览的实现细节，具体来说就是使用Frame.Navigate方法。

注意，如果Frame.Navigate失败，可以在相应的事件中处理，也可以在Frame.Navigate的返回值处理。

Frame能够保存历史记录。Frame会把导览过的页面以PageStackEntry的结构存放到BackStack或者ForwardStack中。

Frame.Navigate的重载版本可以在导览的时候向目标传递参数。

默认情况下，不缓存页面的内容和状态。也就是说从一个页面切出然后返回，页面之前的状态不会保存。如果需要缓存的话，可以在每个页面中设置NavigationCacheMode 部属，来把页面缓存在Frame中：

Page1::Page1()
{
    InitializeComponent();
    NavigationCacheMode(Windows::UI::Xaml::Navigation::NavigationCacheMode::Enabled);
}

Frame的缓存有大小限制（CacheSize），如果需要一个页面长期驻留，那么可以把其NavigationCacheMode设置成Required 。

Navigation history and backwards navigation for UWP apps

既然有导览历史，那么就可以回退到之前的页面上。如果使用NavigationView，它内置有一个回退按键。如果不使用NavigationView，那么也可以自己设置一个回退按键（通常在左上角）：

        <Button Style="{StaticResource NavigationBackButtonNormalStyle}"/>

NavigationBackButtonNormalStyle的高度是44px，如果你在CommandBar中使用的话，由于后者的默认高度是48px，建议上边界对齐：

        <CommandBar>
            <CommandBar.Content>
                <Button Style="{StaticResource NavigationBackButtonNormalStyle}" VerticalAlignment="Top"/>
            </CommandBar.Content>
        </CommandBar>

Code example列举了一个 使用回退按键的例子。

在不同类型的设备上适配回退按键：

• Phone/Tablet，虽然存在一个物理的或者系统级别的回退按键，但是还是建议在应用中显示一个回退来使其更明了
• Desktop/Hub, 在上左方绘制一个回退
• Xbox/TV，不要绘制回退，依赖物理按键

可以参考create a custom visual trigger for Xbox来适应不同的设备。

回退操作可以由下列事件触发：

• BackReqeusted
  • Windows-Backspace key
  • Hardware back button
  • Shell tablet mode back button
• PointerPressed
  • VirtualKey.XButton1
• KeyboardAccelerator.BackInvoked
  • VirtualKey.GoBack
  • Alt+LeftArrow Key

先前，UWP支持AppViewBackButtonVisibility方式的回退。虽然这种支持依然存在，但已经不建议使用。

Guidelines for custom back navigation behavior描述了页面切换的一些具体场景。

Command design basics for UWP apps

UWP的命令元素（command elements）是交互式的UI元素，可以让用户执行某些操作，比如发送邮件，删除条目，提交标单等待。

一些通用的命令过程：

• 发送或者提交信息
• 选择设置选项
• 搜索或者过滤内容
• 打开、关闭、删除文件
• 编辑或者创建内容

参考Commanding design for Universal Windows Platform (UWP) apps

根据具体目的选择不同的元素：

• Buttons，触发一个即时的操作
• Lists，可以以交互的方式来展现信息，示例包括：drop-down list，list box， list view以及grid view
• Selection controls，让用户选择一些选项，例子： check box, radio button以及toggle switch
• Calendar, date and time pickers，一些跟日期相关的操作
• Predictive text entry，给用户的搜索带来一定的建议

更多参考Controls and UI elements

如果排布命令元素是需要仔细考虑的。如果能够让用户直接操作内容，那么就避免让用户通过额外的方式来操作命令元素。

下面是一些常用的命令元素界面：

• App canvas （内容区域），让命令元素和内容一起出现
• Command bars and menu bars，命令栏可以出现在页面顶部或者底部，菜单栏一部在顶部
• Menus and context menus，当用户需要的时候弹出菜单，command bar flyout 就是一个例子。更多参考menus and context menus overview

应用需要对命令元素的执行提供一些反馈。下面是一些例子：

• Commandbar，其内容区域是显示操作反馈的一个好地方
• Flyouts，以弹出方式显示信息也是可以的
• Dialog controls， Dialog controls，也就是模态对话框也是一种选择

When to confirm or undo actions列举了一些例子，说明何时需要确认或者撤销操作。

Interaction primer 介绍了如何在不同输入设备下优化体验。

Content design basics for UWP apps

略过

Tutorial: Create a user interface

通过一个应用级别的例子，来说明如何创建UI。

（本篇完）