WP8.1学习系列(第五章)——中心控件Hub或透视控件Pivot交互UX
具有主页菜单(中心或透视控件)的中心应用中心
你可能要设计包含许多功能的应用。当你看着这些功能时,可能会决定将它们整理到独立的区域中。这些区域最终会成为用户要访问的应用的独立部分。你需要设计一个简便的方法,让用户在这些 UI 区域中导航。此类应用需要应用程序中心,用户可在其中启动到应用的每个子区域。
例如,请想象设计一个用于管理足球队的应用。此应用需要多个功能区域—一个用于比赛和练习的日历管理,一个用于球队花名册信息,一个用于得分和球员统计数据,另一个用于过往赛事的视频片段。你会希望提供一种方式,让用户可以分别导航到这些不同的 UI 区域。通过实现带有主页的应用程序中心,你可以达到此目的。
用于足球队管理的中心应用中心 UI
用户可以从 UI 中心导航到应用程序内的任何区域。一旦他们到达子区域,你将为他们提供此时需要的 UI。例如,在足球队应用中,用户可从应用程序中心页面转到允许他们查看给定比赛的球员统计数据的页面。当用户使用完应用的给定子区域并要转到不同的子区域时,他们会先返回应用程序中心。用户不能直接从得分和统计数据转到日历管理。他/她必须首先返回应用程序中心。
注意 使用带有主页的应用程序中心导航到应用的不同区域是一个出色的设计,它使用户可以与应用高效交互。
可使用多种方法将应用程序中心在视觉上呈现给用户。建议使用中心控件。本主题描述了该设计并向你显示了可能会考虑的变体。
将中心控件用作应用程序中心
Microsoft 提供称为中心控件的 UI 控件,它可用作应用程序中心。该控件允许用户导航到应用中的所有功能区域。中心控件的结构如下—在整个控件后方作为背景的中心背景图像、你在应用启动时进入的主页部分,以及划分应用顶层 UI 的其他部分。
Music Hub
该中心控件给用户提供较宽的虚拟画布,它以水平方向扩展到屏幕限制的区域外。用户通过在画布上轻弹,以水平方向逐个区域移动画布。在应用启动时,用户将进入中心的第一个部分。从此处开始,存在用法的变体,具体取决于你希望怎样导航。将解释每种变体。
主页部分
最左端的第一个部分可用作主页位置,作为导航到应用子区域的起点。此部分显示区域菜单,以供用户选择。在下图显示的 Music Hub 内,点击收音机将使你进入收音机页面,它其实是 Music Hub 内的子应用程序。中心 UI 将被完全替代,并且将为用户呈现收音机 UI。如果用户现在想转到播客区域,用户会使用硬件后退按钮重新导航到中心主页部分,然后在菜单列表中点击播客条目。如果子区域列表过长,不能在显示器中完整显示,可在主页部分使用滚动视图。
Music Hub 的收音机页面
主页部分中可导航的位置列表会包含使你启动全新应用的条目。例如,Music Hub 主页部分具有可将你带到应用商店的条目。点击它会使你启动应用商店音乐子区域,它自身也是中心控件。
右侧部分
主页面板右侧的部分包含你希望用户能轻松访问的 UI。你可以决定使用它们的方式。不要使子区域采用不同的访问方法,这会使用户感到迷惑。相反,使用右侧的区域包含关于子区域内容的某种类型的摘要信息。例如,在 Music Hub 的案例中,有两个显示最近访问媒体的其他部分。
Music Hub 中的历史记录部分是一个简便的方法,让你无需导航到子区域,即可快速访问最近听过或查看过的内容。如果你转到音乐子区域并听了特定的歌曲,该歌曲现在会在历史记录部分出现,以供快速访问。因此在该案例中,这些部分提供了对你在子区域访问过的内容的快速访问。
Facebook 应用是使用中心控件使用户轻松地在功能之间导航的另一个示例。它也具有相同的主页部分,提供用户可导航的区域列表。例如,点击好友条目会将用户带到用于管理其好友列表的 UI 中。
在顶层中心控件中,右侧的部分基本用于让用户更快地访问设计人员认为最需要在顶层显示的视图。中心内的最近访问部分实际上是来自子区域的 UI。要从主页部分转到它,请点击新闻源,然后你将被带到该子区域(实际上是透视控件)。新闻源子区域透视控件具有以下项目:最近访问、照片、链接和视频。设计人员认为他们还可以将最近访问显示为顶层中心控件中的一个区域,而无需要求用户依次导航到新闻源和最近访问。顶层中心控件中的照片和活动部分也发生了类似的过程。
Facebook 应用的应用程序中心 UI
使用图像网格
你可能希望显示可选择的图像的网格,而不显示可从主页部分导航的区域列表。已完成相同的流程;它看起来只有微小差异。你通过图像获得了视觉图标,它使你更容易确定选择操作将你带到哪个位置。每个图像可以在顶部覆盖文本以提供关于该应用区域及其活动的更多信息。
如果你有 3 x 3 网格,你可以包含最多 9 个供选择的图像(如果需要)。从包含图像网格的主页部分,用户可以单击任何图像以导航到应用提供的不同功能区域。
此主页部分实际上可以是宽度超过一个可显示部分的区域。例如,你可以让图像的主页部分向右水平扩展以占用一点额外的空间(如果需要)。Kelley Blue Book 应用使网格向右扩展,如下图所示。要转到其他图像,仅需轻拂以水平平移即可。该案例的中心控件主页部分具有两倍宽度。
Kelley Blue Book 应用的应用程序中心 UI
不要创建垂直滚动的图像网格,因为它对于用户而言过于混乱。
不要在主页部分启动
即使你使用中心控件并具有作为菜单或中心的可导航到应用功能区域的主页部分,也无需让它成为应用启动时显示的部分。你选择先显示其他部分的原因是为了达到要产生的影响。例如,如果你有一个显示电影和放映时间的应用,你可能会有包含可选择应用子区域的列表的主页部分。你可以让用户进入显示最新热门电影图像的部分,而不是比较无趣的部分。这样,用户打开应用时看到的内容会更吸引眼球。
当你打开 eBay 应用时,你不会首先进入主页部分。相反,该设计首先让用户进入具有当下精选交易的部分。通过向右轻拂,你可以转到应用程序中心主页部分,其中包括可单击导航到 Watching、Selling、Buying 和 Messages 应用子区域的图像。另请注意顶部搜索文本框的使用。这也是一个放在顶部用于快速查找内容的实用 UI 元素。
eBay 应用的应用程序中心 UI
不要创建垂直滚动的图像网格,因为它对于用户而言过于混乱。
UI 功能区域的自定义菜单
将类似的应用程序合并为一个
导航层级
使用背景图像
多个主页面板
你可能需要多个包含要导航的子区域列表的部分。你可能由于某个原因要分出两个不同的导航区域列表。在此情况下,这两个部分同时作为主页部分。
主要启动屏幕
你的应用可能不可以在启动时直接转到应用中心。原因之一是:你可能首先需要为用户提供某种类型的登录或密码解锁,然后用户才能访问该应用。你可能还希望提供一些在用户进入应用时向其显示的打造品牌的启动页面。
WP8.1学习系列(第五章)——中心控件Hub或透视控件Pivot交互UX相关推荐
- WP8.1学习系列(第二十三章)——到控件的数据绑定
在本文中 先决条件 将控件绑定到单个项目 将控件绑定到对象的集合 通过使用数据模板显示控件中的项目 添加详细信息视图 转换数据以在控件中显示 相关主题 本主题介绍了如何在使用 C++.C# 或 Vis ...
- Python学习系列(五)(文件操作及其字典)
Python学习系列(五)(文件操作及其字典) Python学习系列(四)(列表及其函数) 一.文件操作 1,读文件 在以'r'读模式打开文件以后可以调用read函数一次性将文件内容全部读出 ...
- [单刷APUE系列]第五章——标准I/O库
目录 [单刷APUE系列]第一章--Unix基础知识[1] [单刷APUE系列]第一章--Unix基础知识[2] [单刷APUE系列]第二章--Unix标准及实现 [单刷APUE系列]第三章--文件I ...
- 《SysML精粹》学习记录--第五章
<SysML精粹>学习记录 第五章:用例图(Use Case Diagram) 用例图简介 用例图外框 小结 第五章:用例图(Use Case Diagram) 用例图简介 用例图可以 ...
- Programming Entity Framework-dbContext 学习笔记第五章
### Programming Entity Framework-dbContext 学习笔记 第五章 将图表添加到Context中的方式及容易出现的错误 方法 结果 警告 Add Root 图标中的 ...
- 《Go语言圣经》学习笔记 第五章函数
<Go语言圣经>学习笔记 第五章 函数 目录 函数声明 递归 多返回值 匿名函数 可变参数 Deferred函数 Panic异常 Recover捕获异常 注:学习<Go语言圣经> ...
- [中级]Java命令学习系列(五)——jhat
转载自 [中级]Java命令学习系列(五)--jhat jhat(Java Heap Analysis Tool),是一个用来分析java的堆情况的命令.之前的文章讲到过,使用jmap可以生成Java ...
- HTML5 2D游戏引擎研发系列 第五章
HTML5 2D游戏引擎研发系列 第五章 <Canvas技术篇-画布技术-纹理集复杂动画> 作者:HTML5游戏开发者社区-白泽 转载请注明出处:http://html5gamedev.o ...
- WP8.1学习系列(第八章)——透视Pivot设计指南
在本文中 描述 应做事项和禁止事项 其他使用指南 相关主题 重要的 API Pivot class (XAML) PivotItem class (XAML) Windows Phone 应用:具有透 ...
最新文章
- CSS Animations vs Web Animations API
- GROMACS运行参数之nvt.mdp文件详解
- System Center 2012 R2 CM系列之安装Configuration Manager
- 机器学习领域中的六大误区
- Py之curses:curses库的简介、使用、安装方法详细攻略
- html点击按钮自动获取值,如何获取HTML按钮的文本值
- iptables--静态防火墙实例教程
- L型代码结构案例:Link访问权限(上)
- angularJs关于指令的一些冷门属性
- 一张图理解JS的原型(prototype、_proto_、constructor的三角关系)
- mybatisplus 操作另一个数据库的数据_实例分析:python操作数据库项目
- python数据结构剑指offer-重建二叉树
- 力扣题目——1. 两数之和
- 分析微博游戏名人数据
- 物流配送中商品订货数量的控制技术
- matlab实现拉依达准则,拉依达准则matalb程序
- thinkadmin 内置小程序授权获取openid和生成小程序二维码的使用
- 实体关系图(ER图)
- 深度学习实验总结:PR-曲线、线性回归、卷积神经网络、GAN生成式对抗神经网络
- linux 下oracle备份脚本,linux 下的 oracle 自动备份脚本