Marvin's Blog【程式人生】

Ability will never catch up with the demand for it

04 Apr 2020

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 Systemcontrols 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

视频总结

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

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

导览原则:

  • 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 。

既然有导览历史,那么就可以回退到之前的页面上。如果使用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。

(本篇完)

Categories

Tags

comments powered by Disqus