WP8.1学习系列(第十章)——中心控件Hub设计指南
Windows Phone 应用商店应用中的中心控件指南
说明
中心控件(在手机上,仅适用于按纵向使用)显示一系列可以来回平移的区域。它是应用的全屏容器和导航模型。
中心(以前称为全景)体验是本机 Windows Phone 外观的一区域。与旨在适合手机屏幕边界的应用不同,中心应用通过使用超出屏幕边界的水平虚拟宽画布提供了一个查看控件、数据和服务的独特方式。在 Windows Phone 上,这些固有的动态视图使用分层动画和内容,以便各层以不同的速度流畅地平移,类似于视差效果。
中心应用的区域用作更具体体验的起始点。你的目标应该是在视觉上向用户呈现丰富的内容。
示例
用户界面由独立移动的层组成:一个背景颜色或图像、一个中心标题、中心区域标题和中心区域。
如果设置,背景图像是最低的层,并为中心提供了丰富的杂志般的感觉。背景图像通常是一张整幅图像,它可能是应用最直观的区域。
中心标题应标识应用,并且应当清晰可见,而无论用户以何种方式进入应用。
中心区域是包含其他控件和内容的中心应用的组件。中心区域的移动速率与触控平移或轻拂的速率相同。中心区域标题对于任何给定的中心区域都是可选的。
缩略图可以是主要元素,它们链接到其他页面上的内容或媒体。
用法指南
基于应用的要求,你可以将多个中心区域添加到中心控件—其中每一个都提供一种具有独特目的的功能。例如,一个区域可能包含一系列链接和控件,而另一个则是缩略图图像的储存库。用户可以使用内置于中心控件的手势支持在这些区域之间来回平移。
设计指南
- 仅在纵向方向上支持中心控件的行为和呈现。
- 可以为中心控件添加主题,也可以替代默认颜色等。
- 使用 Windows Phone 的中心控件的包装效果可从后向前包装,也可从前向后包装。包含 1 个或 2 个区域的中心不会换行。包含 3 个或多个区域的中心将换行。
- 在 Windows Phone 上,如果在你的中心中使用应用栏,请将该应用栏的模式设置为“最小化”。此模式专门用于将中心页面上的屏幕空间最大化。有关详细信息,请参阅 Windows Phone 的应用栏。
- 在系统托盘中显示进度条,或在启动中心控件时全屏显示“加载”指示器。
- 当更新或刷新中心控件的某个区域时,会在系统托盘中显示进度条,但不会阻止用户交互。
- 首次访问:显示的第一个区域应将中心标题妥善左对齐。对于将哪一区域作为默认设置这一问题并无标准指南;具体取决于将要显示的内容。
- 对于同一中心控件的后续访问,会将用户转到上次中断时访问的区域。
- 不要在中心控件中创建五个以上的区域。这是出于性能原因考虑的,还可以限制用户要导航浏览的区域数量。当内容较为复杂时,请使用较少的区域。不要使用大量区域,这样会吓倒用户。用户只需使用四个或五个区域,用户即可获取其所在的方位以及左右两侧的内容。
- 不要在中心控件内部使用透视控件,反之亦然。但是,你可以将中心区域中的某个项目链接到包含透视控件的不同页面。
- 不要使用可在中心控件内部平移或滚动的控件。例如,将地图控件放入中心区域中可能会造成该中心控件难以使用。难以分辨所输入手势的用意。例如,如果你有一个滑块,尝试将其向左滑动,并且你是在中心控件的区域之中,则无法确定你是希望滚动区域还是希望移动滑块。需要手势输入的控件的解决方案是将其放置在其自己的页面中并导航到该页面。你可以在中心区域中放置一个禁用手势的控件—可能是地图。你可以覆盖会激活该地图的按钮。按下该按钮会导航到仅包含该地图的不同页面。用户随后可按下“后退”按键以返回到中心区域。
- 有关何时使用中心控件与透视控件的更多指南,请查看以下主题:
中心标题:
- 使用纯文本或图像,例如徽标。你还可以使用多个元素,例如徽标和文本(或其他 UI 元素)。
- 确保标题的字体或图像颜色在整个背景图像内清晰可见(因为这两项独立移动)。使用系统字体和样式,除非需要特定的品牌体验(使用其他字体、大小或颜色)。
- 避免设置标题动画,或动态更改其大小。
- 为了一致性起见,使中心标题与“开始”屏幕中的启动磁贴相匹配。
- 设置中心控件的布局并设计标题时,请避免系统托盘或其他元素的封闭问题。
中心区域标题:
- 使用纯文本或图像,例如徽标。你还可以使用多个元素,例如徽标和文本(或其他 UI 元素)。
- 确保标题的字体或图像颜色在整个背景图像内清晰可见(因为这两项独立移动)。使用系统字体和样式,除非需要特定的品牌体验(使用其他字体、大小或颜色)。
- 避免设置标题动画,或动态更改其大小。
中心区域:
- 通过对区域内容中包含的文本和图像进行选择,保持中心控件体验的美感,使其不显得杂乱和拥挤。
- 如果使用垂直滚动,请考虑方向。只要区域的宽度大于屏幕宽度,即可在中心区域中进行垂直滚动。
- 考虑隐藏中心区域,直到它们具有要显示的内容。
背景艺术图像
- 最好是深色、柔和的低对比度背景。单个颜色或渐变。
- 背景中的一张精细且适宜的照片可使中心控件在视觉方面具有吸引力。但是避免使用包含大量明亮颜色的照片,因为它们会使区域难以阅读。一个实用技术是在照片顶部使用半透明的黑色或白色筛选器(矩形)。你可以在位图编辑工具中执行此操作,然后展开该图像。
- 背景图像应该平移整个中心控件。这表示其纵横比应该与中心控件的纵横比相匹配,其大小应该考虑使用最常用设备分辨率、最大设备分辨率,并考虑性能。若要使文件大小保持较小,建议使用 JPEG 格式。
- 你可以从一个背景图像切换到另一个背景图像,即使正在运行你的应用也是如此,但是一次只可以显示一张图像。
缩略图
- 使用突出显示可标识主题的已裁剪图像,而不是缩小整个图像。如果在没有文本的情况下无法标识图像,则最多可以使用两行文本来标识内容。
WP8.1学习系列(第十章)——中心控件Hub设计指南的更多相关文章
- WP8.1学习系列(第二十章)——添加控件和处理事件
先决条件 添加控件 设置控件的名称 设置控件属性 创建事件处理程序 新控件 总结 相关主题 通过使用如按钮.文本框和组合框等控件,你可以创建应用的 UI. 下面将显示如何将控件添加到应用.处理控件时, ...
- WP8.1学习系列(第十一章)——中心控件Hub开发指南
在本文中 先决条件 什么是中心控件? 添加中心控件 将分区添加到中心 添加交互式分区头用于导航 将展示磁贴添加到中心 使用窄应用中的垂直中心 借助中心使用语义式缩放视图 摘要和后续步骤 重要的 API ...
- WP8.1学习系列(第六章)——中心控件Hub面板部分交互UX
本主题中呈现的模型类似于适用于 Windows Phone 的具有主页菜单(中心或透视控件)的中心应用中描述的模型.正如之前的案例所示,你要向用户呈现不同的功能区域.此处的区别在于你可以在顶层呈现所有 ...
- WP8.1学习系列(第五章)——中心控件Hub或透视控件Pivot交互UX
具有主页菜单(中心或透视控件)的中心应用中心 你可能要设计包含许多功能的应用.当你看着这些功能时,可能会决定将它们整理到独立的区域中.这些区域最终会成为用户要访问的应用的独立部分.你需要设计一个简便的 ...
- WPF学习系列之五(WPF控件)
控件: 1.内容控件------这些控件能够包含嵌套的元素,为它们提供几乎无限的显示能力.内容控件包括Lable,Button 以及ToolTip类. 内容控件是更特殊的控件类型,它们可以包含( ...
- 【WPF学习】第二十章 内容控件
内容控件(content control)是更特殊的控件类型,它们可包含并显示一块内容.从技术角度看,内容控件时可以包含单个嵌套元素的控件.与布局容器不同的是,内容控件只能包含一个子元素,而布局容器主 ...
- <WP8开发学习笔记>修改panorama全景控件的标题的大小
panorama(全景)控件非常具有WinPhone特色,但是那个巨大的标题许多时候会让人觉得违和.怎么修改它呢? 最开始想到的是加一个FontSize,结果毫无影响.╮(╯-╰)╭ <phon ...
- WP8.1学习系列(第十八章)——Windows Phone 交互和可用性
本主题讨论了布局会对应用的可用性产生怎样的影响.在应用的可用性上下文中还讨论了其他常用 UI,例如搜索和设置. 在继续使用控件和交互之前,请执行以下操作: 有关概念化应用的策略,请参阅尽你所能,设计最 ...
- WP8.1学习系列(第八章)——透视Pivot设计指南
在本文中 描述 应做事项和禁止事项 其他使用指南 相关主题 重要的 API Pivot class (XAML) PivotItem class (XAML) Windows Phone 应用:具有透 ...
随机推荐
- e740. 向标签中加入一个图标
This example creates a JLabel component with an icon. // Fetch icon Icon icon = new ImageIcon(" ...
- LintCode #2 尾部的零
计算阶乘尾部的0的个数,初一看很简单. 先上代码 public static long GetFactorial(long n) { || n == ) ; ); } //Main方法中调用 ); ; ...
- Python——os(一)进程参数
python的os模块提供了一种使用操作系统相关函数的通用手段,如果只是想读或写文件请移步 open(),向操作路径请查阅 os.path 模块,如果想要读取命令行中所有文件里的所有行请查阅 file ...
- C# 时间比较方法DateTime.Compare
public static int Compare(DateTime t1,DateTime t2) 返回值 类型:System..::.Int32 有符号数字,指示 t1 和 t2 的相对值. 值类 ...
- Java常用系统变量收集
public static void main(String[] args) { System.out.println("java版本号:" + System.getPropert ...
- RGB转LAB色彩空间
1.原理 RGB无法直接转换成LAB,需要先转换成XYZ再转换成LAB,即:RGB——XYZ——LAB 因此转换公式分两部分: (1)RGB转XYZ 假设r,g,b为像素三个通道,取值范围均为[0,2 ...
- php public,static,private,protected,final,const,abstract
public:权限是最大的,可以内部调用,实例调用等. protected: 受保护类型,用于本类和继承类调用. private: 私有类型,只有在本类中使用. final:PHP 5:不被改,不被继 ...
- linux环境中安装NRPE插件执行远程"本地资源"检查?NRPE安装?
需求描述: 在安装完nagios之后,需要对本地资源进行监控,比如磁盘空间的使用,进程数,swap空间,等等.这些都不是通过网络提供出来的, 所以,都是本地资源,可以通过NRPE插件实现在客户端中采集 ...
- 理解linux 块, i节点
https://blog.csdn.net/zdf19/article/details/54424880 https://www.cnblogs.com/hnrainll/archive/2012/0 ...
- python2内置属性
# encoding: utf-8 # module __builtin__ # from (built-in) # by generator 1.145 from __future__ import ...