个人随笔
技术改变世界

UWP App 的 UI 基础知识

现代用户界面是复杂的,它由文本、形状、颜色和动画组成,而动画归根结底由你所使用的设备屏幕中的各个像素组成。在开始设计用户界面时,你可能面临众多选择。

为使事情变得更简单,让我们从设计角度定义应用结构。假设应用由屏幕和页面组成。每个页面都具有一个用户界面,它由三种类型的 UI 元素组成:导航、命令和内容元素。

 

应用的结构

IC797940 导航元素

导航元素帮助用户选择他们希望显示的内容。导航元素示例包括表和透视表、超链接和导航窗格。

导航设计基础知识文章中详细介绍了导航元素。

 

命令元素

命令元素启动操作,例如处理、保存或共享内容。命令元素示例包括按钮和命令栏。命令元素还可以包括屏幕上实际不可见的键盘快捷方式。

命令设计基础知识文章中详细介绍了命令元素。

 

内容元素

内容元素显示应用内容。对于绘画应用,内容可能是一个图形;对于资讯应用,内容可能是一篇新闻报道。

内容设计基础知识文章中详细介绍了内容元素。

最低要求:应用具有一个初始屏幕和一个用于定义用户界面的主页。典型的应用将具有多个页面和屏幕,但各个页面的导航、命令和内容元素可能有所不同。

下图显示了一个包含各种页面的假设应用结构,每个页面都具有不同种类的导航、命令和内容元素:

IC794175

让我们看一下用于合并导航、命令和内容元素的一些常见 UI 模式。

常见 UI 模式

当你合并一个或多个元素时,即创建了一种模式。这五种 UI 模式通常用于提供导航、命令和内容—大多数应用将至少使用一种模式。 在为你的应用构建 UI 时,可以以这些 UI 元素为基础。 (还可以合并 UI 模式,以提供更复杂的功能。)

UI 元素 描述
 活动画布

IC794024

元素类型:命令 + 内容

活动画布适用于单视图应用或模式体验,例如浏览器、文档查看器、照片查看器/编辑器、绘画应用或使用自由滚动主视图的其他应用。它可以包含顶级和/或页面级操作。

此照片编辑应用的设计重点介绍活动画布的用法:

IC795390

 大纲/细节

IC794176

元素类型:导航 + 内容

大纲/细节模式可显示主列表和当前选定项的详细信息。此模式通常用于电子邮件和联系人列表/通讯簿。

此股票跟踪应用的设计使用大纲/细节模式:

IC795391

 导航窗格

IC794027

元素类型:导航 + 内容

导航窗格允许很多顶级导航项,同时又节省屏幕实际使用空间。它包含三个主要组件:按钮、窗格和内容区域。按钮是一个 UI 元素,允许用户打开和关闭窗格。窗格是用于导航元素的容器。内容区域通过选定导航项显示信息。导航窗格也可以处于停靠状态,在此状态下该窗格会始终显示。

此智能家居应用的设计以导航窗格模式为特色:

IC795392

 表和透视表

IC794177

IC794029

元素类型:导航 + 内容

显示指向页面的链接的持续列表,它还提供在不同的透视表之间快速移动的方法(视图或筛选器),这些透视表通常在同一组数据中。

此智能家居应用的设计使用表/透视表模式:

IC795393

 

创建你自己的模式

既然你已了解应用的基本结构以及几个常见的 UI 模式,请查看我们的导航、命令和内容设计指南。这些文章将帮助你了解何时使用哪些 UI 元素和模式。

导航

了解如何通过遵循以下三个简单的规则来设计出色的导航体验。

命令

了解命令元素以及如何使用它们来创建出色的交互体验。

内容

内容是应用的核心部分。它是用户在使用应用时绝大部分时间的焦点所在。本文提供了针对不同类型的内容和内容使用体验的建议。

 

 

本文转自:https://msdn.microsoft.com/zh-cn/library/windows/apps/dn958432.aspx

转载请注明出处王旭博客 » UWP App 的 UI 基础知识

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址