Win10应用设计的那些事儿

叁叁肆2018-10-29 09:30

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

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


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

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


相关文章:
【推荐】 InnoDB透明页压缩与稀疏文件