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+款云产品！

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

文章来源： 网易云社区