WP8.1学习系列(第十章)——中心控件Hub设计指南

Windows Phone 应用商店应用中的中心控件指南

在本文中

重要的 API

说明

中心控件(在手机上,仅适用于按纵向使用)显示一系列可以来回平移的区域。它是应用的全屏容器和导航模型。

中心(以前称为全景)体验是本机 Windows Phone 外观的一区域。与旨在适合手机屏幕边界的应用不同,中心应用通过使用超出屏幕边界的水平虚拟宽画布提供了一个查看控件、数据和服务的独特方式。在 Windows Phone 上,这些固有的动态视图使用分层动画和内容,以便各层以不同的速度流畅地平移,类似于视差效果。

中心应用的区域用作更具体体验的起始点。你的目标应该是在视觉上向用户呈现丰富的内容。

示例

用户界面由独立移动的层组成:一个背景颜色或图像、一个中心标题、中心区域标题和中心区域。

如果设置,背景图像是最低的层,并为中心提供了丰富的杂志般的感觉。背景图像通常是一张整幅图像,它可能是应用最直观的区域。

中心标题应标识应用,并且应当清晰可见,而无论用户以何种方式进入应用。

中心区域是包含其他控件和内容的中心应用的组件。中心区域的移动速率与触控平移或轻拂的速率相同。中心区域标题对于任何给定的中心区域都是可选的。

缩略图可以是主要元素,它们链接到其他页面上的内容或媒体。

用法指南

基于应用的要求,你可以将多个中心区域添加到中心控件—其中每一个都提供一种具有独特目的的功能。例如,一个区域可能包含一系列链接和控件,而另一个则是缩略图图像的储存库。用户可以使用内置于中心控件的手势支持在这些区域之间来回平移。

设计指南

  • 仅在纵向方向上支持中心控件的行为和呈现。
  • 可以为中心控件添加主题,也可以替代默认颜色等。
  • 使用 Windows Phone 的中心控件的包装效果可从后向前包装,也可从前向后包装。包含 1 个或 2 个区域的中心不会换行。包含 3 个或多个区域的中心将换行。
  • 在 Windows Phone 上,如果在你的中心中使用应用栏,请将该应用栏的模式设置为“最小化”。此模式专门用于将中心页面上的屏幕空间最大化。有关详细信息,请参阅 Windows Phone 的应用栏
  • 在系统托盘中显示进度条,或在启动中心控件时全屏显示“加载”指示器。
  • 当更新或刷新中心控件的某个区域时,会在系统托盘中显示进度条,但不会阻止用户交互。
  • 首次访问:显示的第一个区域应将中心标题妥善左对齐。对于将哪一区域作为默认设置这一问题并无标准指南;具体取决于将要显示的内容。
  • 对于同一中心控件的后续访问,会将用户转到上次中断时访问的区域。
  • 不要在中心控件中创建五个以上的区域。这是出于性能原因考虑的,还可以限制用户要导航浏览的区域数量。当内容较为复杂时,请使用较少的区域。不要使用大量区域,这样会吓倒用户。用户只需使用四个或五个区域,用户即可获取其所在的方位以及左右两侧的内容。
  • 不要在中心控件内部使用透视控件,反之亦然。但是,你可以将中心区域中的某个项目链接到包含透视控件的不同页面。
  • 不要使用可在中心控件内部平移或滚动的控件。例如,将地图控件放入中心区域中可能会造成该中心控件难以使用。难以分辨所输入手势的用意。例如,如果你有一个滑块,尝试将其向左滑动,并且你是在中心控件的区域之中,则无法确定你是希望滚动区域还是希望移动滑块。需要手势输入的控件的解决方案是将其放置在其自己的页面中并导航到该页面。你可以在中心区域中放置一个禁用手势的控件—可能是地图。你可以覆盖会激活该地图的按钮。按下该按钮会导航到仅包含该地图的不同页面。用户随后可按下“后退”按键以返回到中心区域。
  • 有关何时使用中心控件与透视控件的更多指南,请查看以下主题:

中心标题:

  • 使用纯文本或图像,例如徽标。你还可以使用多个元素,例如徽标和文本(或其他 UI 元素)。
  • 确保标题的字体或图像颜色在整个背景图像内清晰可见(因为这两项独立移动)。使用系统字体和样式,除非需要特定的品牌体验(使用其他字体、大小或颜色)。
  • 避免设置标题动画,或动态更改其大小。
  • 为了一致性起见,使中心标题与“开始”屏幕中的启动磁贴相匹配。
  • 设置中心控件的布局并设计标题时,请避免系统托盘或其他元素的封闭问题。

中心区域标题:

  • 使用纯文本或图像,例如徽标。你还可以使用多个元素,例如徽标和文本(或其他 UI 元素)。
  • 确保标题的字体或图像颜色在整个背景图像内清晰可见(因为这两项独立移动)。使用系统字体和样式,除非需要特定的品牌体验(使用其他字体、大小或颜色)。
  • 避免设置标题动画,或动态更改其大小。

中心区域:

  • 通过对区域内容中包含的文本和图像进行选择,保持中心控件体验的美感,使其不显得杂乱和拥挤。
  • 如果使用垂直滚动,请考虑方向。只要区域的宽度大于屏幕宽度,即可在中心区域中进行垂直滚动。
  • 考虑隐藏中心区域,直到它们具有要显示的内容。

背景艺术图像

  • 最好是深色、柔和的低对比度背景。单个颜色或渐变。
  • 背景中的一张精细且适宜的照片可使中心控件在视觉方面具有吸引力。但是避免使用包含大量明亮颜色的照片,因为它们会使区域难以阅读。一个实用技术是在照片顶部使用半透明的黑色或白色筛选器(矩形)。你可以在位图编辑工具中执行此操作,然后展开该图像。
  • 背景图像应该平移整个中心控件。这表示其纵横比应该与中心控件的纵横比相匹配,其大小应该考虑使用最常用设备分辨率、最大设备分辨率,并考虑性能。若要使文件大小保持较小,建议使用 JPEG 格式。
  • 你可以从一个背景图像切换到另一个背景图像,即使正在运行你的应用也是如此,但是一次只可以显示一张图像。

缩略图

  • 使用突出显示可标识主题的已裁剪图像,而不是缩小整个图像。如果在没有文本的情况下无法标识图像,则最多可以使用两行文本来标识内容。
时间: 2024-08-06 11:57:56

WP8.1学习系列(第十章)——中心控件Hub设计指南的相关文章

WP8.1学习系列(第二十章)——添加控件和处理事件

先决条件 添加控件 设置控件的名称 设置控件属性 创建事件处理程序 新控件 总结 相关主题 通过使用如按钮.文本框和组合框等控件,你可以创建应用的 UI. 下面将显示如何将控件添加到应用.处理控件时,你通常会使用此模式: 将控件添加到应用 UI. 设置控件的属性,如宽度.高度或前景色. 将代码连接到控件,从而使控制执行任务. 路线图: 本主题与其他主题有何关联?请参阅: 使用 C# 或 Visual Basic 的 Windows 运行时应用的路线图 使用 C++ 的 Windows 运行时应用

WP8.1学习系列(第十一章)——中心控件Hub开发指南

在本文中 先决条件 什么是中心控件? 添加中心控件 将分区添加到中心 添加交互式分区头用于导航 将展示磁贴添加到中心 使用窄应用中的垂直中心 借助中心使用语义式缩放视图 摘要和后续步骤 重要的 API Hub HubSection SemanticZoom 使用 Hub 控件创建一个进入应用的入口页.Hub 控件在丰富的平移视图中显示内容,这样用户一眼就能看见新鲜有趣的内容,从而吸引他们深入了解你的应用中的更多内容. 先决条件 查看并了解 Windows 导航模式. 查看并了解中心控件指南. 我

WPF学习系列之五(WPF控件)

控件:    1.内容控件------这些控件能够包含嵌套的元素,为它们提供几乎无限的显示能力.内容控件包括Lable,Button 以及ToolTip类. 内容控件是更特殊的控件类型,它们可以包含(并显示)一块内容.从技术角度来讲,内容控件是可以包含单个嵌套元素的控件.与布局容器不同的是内容控件只能包含一个子元素,而布局控件只要愿意可以包含任意多个嵌套元素.              提示:当然,仍然可以在单个内容控件中放置大量内容-----诀窍是使用单个容器,比如,使用StackPanel面

【WPF学习】第二十章 内容控件

原文:[WPF学习]第二十章 内容控件 内容控件(content control)是更特殊的控件类型,它们可包含并显示一块内容.从技术角度看,内容控件时可以包含单个嵌套元素的控件.与布局容器不同的是,内容控件只能包含一个子元素,而布局容器主要愿意可以包含任意多个牵头元素. 正如前面所介绍,所有WPF布局容器都继承自抽象类Panel,该类提供了对包含多个元素的支持.类似地,所有内容控件都继承自抽象类ContentControl.下图显示了ContentControl类的层次结构. 图 Conten

<WP8开发学习笔记>修改panorama全景控件的标题的大小

panorama(全景)控件非常具有WinPhone特色,但是那个巨大的标题许多时候会让人觉得违和.怎么修改它呢? 最开始想到的是加一个FontSize,结果毫无影响.╮(╯-╰)╭ <phone:Panorama Title="我的应用程序" FontSize="30"> <phone:Panorama.Background> <ImageBrush ImageSource="/PanoramaApp3;component/

WP8.1学习系列(第五章)——交互UX中心或透视控件

具有主页菜单(中心或透视控件)的中心应用中心 你可能要设计包含许多功能的应用.当你看着这些功能时,可能会决定将它们整理到独立的区域中.这些区域最终会成为用户要访问的应用的独立部分.你需要设计一个简便的方法,让用户在这些 UI 区域中导航.此类应用需要应用程序中心,用户可在其中启动到应用的每个子区域. 例如,请想象设计一个用于管理足球队的应用.此应用需要多个功能区域—一个用于比赛和练习的日历管理,一个用于球队花名册信息,一个用于得分和球员统计数据,另一个用于过往赛事的视频片段.你会希望提供一种方式

WP8.1学习系列(第十八章)——Windows Phone 交互和可用性

本主题讨论了布局会对应用的可用性产生怎样的影响.在应用的可用性上下文中还讨论了其他常用 UI,例如搜索和设置. 在继续使用控件和交互之前,请执行以下操作: 有关概念化应用的策略,请参阅尽你所能,设计最佳 Windows Phone 应用. 阅读控件设计指南中关于标准系统控件的内容. 触摸目标和文本 你的应用应该向用户呈现具有足够大小的触摸目标.用户在点击控件时应得到反馈,说明其点击已对控件产生作用,并允许其在应用内继续执行操作.为此,Windows Phone 对触摸目标和文本的使用有一些特定要

WP8.1学习系列(第七章)——应用选项卡Pivot交互UX

“应用选项卡”模式用于用户经常在中间导航的多个 UI 页面.如果你的应用基于单个主题(例如,电影.棒球等),该模式尤其有用.每页都将为用户显示与该应用呈现的整体数据相关的一些内容.“应用选项卡”模式可能构成整个应用,或者还可用于应用的子区域.例如,你可以使用中心控件作为应用主要的第一层级(如之前主题所述),然后让用户从该控件导航到应用使用“应用选项卡”模式的子部分(使用透视控件). 想象你希望拥有一个将你家里收藏的电影分类的应用.你可以使用“应用选项卡”模式提供几个不同的电影筛选视图.你可能希望

WP8.1学习系列(第八章)——透视Pivot设计指南

在本文中 描述 应做事项和禁止事项 其他使用指南 相关主题 重要的 API Pivot class (XAML) PivotItem class (XAML) Windows Phone 应用:具有透视项目的透视控件 描述 透视控件是全屏的容器和导航模型,它还提供在不同的透视之间快速移动的方法(视图或筛选器),这些透视通常在同一组数据中.例如,一个使用透视控件的电子邮件应用可能在第一个透视项目(或视图)中列出所有电子邮件,然后将同一列表在其他透视项目中筛选为未读.已标记和紧急电子邮件. 应做事项