Win10应用设计的那些事儿

此文已由作者杨凯明授权网易云社区发布。

欢迎访问网易云社区，了解更多网易技术产品运营经验。

继Windows 10系统发布之后，很多Windows用户更新了系统。win10系统的发布，在以往的metro UI中加入了很多理性元素，可以看出win10在易用性和兼容性上面做了努力。

在之前的项目中接到了中国大学MOOC关于Windows应用设计的需求，在完成方案的过程中也从一知半解到认识这个Windows 10的通用应用平台UWP（Universal Windows Platform），在这里向大家分享一些个人的总结和想法。

什么是UWP

Windows提出了UWP的概念，简而言之，就是让这个应用能够在所有Windows设备平台运行起来。UWP在continuum模式识别设备类型和设备模式的基础上，根据目标设备的屏幕大小及断点（一些关键的宽度，例如360、640、1024和1366 epx等）的判断，实现以最少的开发量完成在多平台运行的应用。Win10还提供了自适应控件，使用这套跨设备的自适应控件，从而提供了快速实现通用化应用的有力支持。Windows设备存在多种输入模式共存的现象。UWP能够针对目标设备进行识别，判断出其兼容的输入类型（如键盘、鼠标、触摸、笔和Xbox One控制器），从而进行适配。例如Surface能够接收来自鼠标和触摸手势两种输入，故针对Surface我们将设计其输入模式兼容这两种模式，以避免在一个模式下造成某一种功能无法使用。在了解了UWP基本概念的基础上，展开了此次Win10应用设计，在此过程中一边摸索现有规范一边梳理业务范围和设计应用，得到了针对导航、命令栏、磁贴等几点的总结和思路。

如何挑选合适的导航结构

导航设计是应用设计的关键，Windows 10设计规范（以下简称『规范』）中将导航元素分为对等、层次和历史导航等几类，例如表和透视表、导航窗格是对等导航元素，中心、大纲/细节属于分层导航元素，返回则属于历史导航元素。

1.『发现课程/我的学习』导航

『发现课程和我的学习』是主要信息架构，需要选择合适的导航结构去承载这两个模块。导航窗格能够根据断点判断其模式，对于宽屏展开，对于窄屏则收起窗格。在PC版能够使用导航窗格的形式，将信息架构展现出来，而在移动版中若要复用该导航结构，则会将导航窗格的表现形式变为汉堡菜单。但是汉堡菜单在一定程度上对信息做了隐藏，增长了用户去到『我的课程』的路径。故在设计中，对移动版使用了和PC版不同的框架结构，即使用透视表来承载发现课程和我的学习，让用户能够快速到达我的学习。

在规范中将选项卡称为透视表和表，也称为枢纽，其中透视表就是纯文本的选项卡，而表就是带图标的选项卡。对于PC版本，透视表可用作用户课程类目页的类目筛选。移动版本，透视表将作为主体的导航框架。即使能够使用同一套代码，但针对不同的应用平台仍需考虑定制化，满足不同场景的业务露出，我们仍使用了两套结构。

2.『课程学习页』章节导航

大纲/细节，适合适用于列表细节布局的部分，常见的有邮箱客户端。课程学习页可采用该模式展示，课程目录即为大纲，具体的课件内容即为细节。移动端则显示大纲，点击进入细节。规范提供了一一清空历史所有细节再退出整体大纲的交互逻辑，但针对课件学习的行为来说，返回已经学习过的内容再次学习的场景较少，并且在学习页是相对独立的大纲细节模式，故学习的导航返回逻辑需要设置深度为1，即无需清空细节面板，直接退出学习页，返回外部的导航窗格。大纲/细节与导航窗格交互方式很类似，其不同的地方在于导航窗格用于顶层页面的显示，是整体信息架构模式，而大纲/细节是对于底层页面和功能的展现，应用于学习页也是相对合适的。

3.『返回/历史』

在规范中将返回归属于历史导航元素，返回操作主要存在于标题栏。这里的后退传承了Windows的资源管理器的后退逻辑，后退是返回到之前浏览的内容的一个操作。通过返回深度，记录了历史浏览记录或页面访问层级。Android的虚拟返回键，也是基于用户查看界面历史返回的。而对于应用内的返回，Android和iOS中基本一致，均是针对业务层级的返回，或者说是信息架构的返回。但对于存在Android存在两个返回的情况下，用户可能会混淆两个返回的不同逻辑，从而在使用过程中导致混乱。故在此次设计中，如上文提到的『课程学习页』，将所有页面的返回深度都设置为1，保证用户后退按钮导航到信息架构的上一层，而不是应用导航历史记录中的上一个位置。

命令栏和磁贴

UWP中的命令栏（也称为应用栏），可用于考虑边缘型的操作，例如分享、全部下载。定义边缘性操作需要确定业务和功能，边缘型操作用于辅助页面主要功能，可适量弱化，必不可少的边缘型操作可直接露出，非必要的可收起在溢出菜单中。针对页面的不同业务情况，承载对应的操作，例如在课件详情页中的分享操作、课程列表页中的排序、学习页的批量下载等；

磁贴是延续metro UI的控件，可用于展示应用品牌，或承载push消息内容。磁贴具有高度自定义设置，提供了主磁贴和辅助磁贴以及十几种样式，根据推送内容，选择合适的磁贴格式。当前磁贴的尺寸分为大、中、小、宽四种，而手机无法显示大的磁贴，故移动端上只有中、小、宽。需要至少定义一种磁贴的显示内容，兼容PC端和移动端。当前主要的消息体为课程维度消息，课程封面能够吸引用户的注意，因为用户报名的课程为多个，告知消息体时需突出课程标题。### 兼顾变化的屏幕尺寸规范还提出了有效像素的概念，它使应用能够自动调整控件、字体和其他UI元素的大小，以使它们在所有设备上清晰可见。
在本次项目中UI元素尽量使用有效像素，使得图标基于该设备的可用屏幕像素数自行调整，同时在其他连续的区间内，屏幕的断点将同步内容布局的变化，以保证在不同宽度的屏幕上的可读性。例如卡片使用动态计算能够使得整体的缩放效果是自适应的，用户也能够及时流畅地感受到改变窗口大小带来的布局变化。

别忘了输入设备的多样性

UWP根据适配设备的不同，对应的输入也不同，例如手机和平板拥有触摸和语音等，PC拥有鼠标、键盘、有时会使用游戏板，Surface还有触摸、手势、触笔等等。在这次项目中，移动场景主要的输入设备是触摸，移动场景可以借鉴已有的iOS和Android的交互形式。PC场景输入设备主要为鼠标和键盘，此时快捷键就很大程度上方便用户快速使用视频播放的相关功能，比如使用左右键控制视频进度、上下键控制视频音量、全屏模式下使用ESC键退出全屏等，并以用户首次引导，让用户能够在PC场景下更方便的学习课程视频。

总之，UWP还保持着很多操作系统的交互模式，包括返回的逻辑、顶部导航等。但相对于metro UI已经很大程度上做了平台统一的设计，也向用户提供更易用的平台努力。Windows也在不断更新中，最近也更新了新的系统UI，让我们期待Windows新的突破吧。

网易云免费体验馆，0成本体验20+款云产品！

更多网易技术、产品、运营经验分享请点击。

相关文章：
【推荐】 接口文档神器Swagger（上篇）
【推荐】 ==vs===inJavascript