WP8.1学习系列(第六章)——中心控件Hub面板部分交互UX

时间:2022-09-11 21:17:02

WP8.1学习系列(第六章)——中心控件Hub面板部分交互UX

本主题中呈现的模型类似于适用于 Windows Phone 的具有主页菜单(中心或透视控件)的中心应用中描述的模型。正如之前的案例所示,你要向用户呈现不同的功能区域。此处的区别在于你可以在顶层呈现所有主要 UI,而无需主页菜单。

WP8.1学习系列(第六章)——中心控件Hub面板部分交互UX

用于足球队管理的中心应用中心 UI

如果你的应用没有要导航到的子区域,则你的所有 UI 都可位于一组水平的可访问部分中。你仍可使用 中心控件,但在此案例中,你无需具有主页部分。Windows Phone 上的 People Hub 即属于这种情况。下图显示了中心的基本布局仍然不变。

WP8.1学习系列(第六章)——中心控件Hub面板部分交互UX

People Hub

对于 People Hub,每个部分都具有自己独特的 UI 并呈现功能区域。此设计模型和适用于 Windows Phone 的具有主页菜单(中心或 Pivot 控件)的中心应用中描述的设计模型之间的差别在于,你不仅仅在中心内重新突出显示应用的较低级别区域。在之前的模型中,主页部分右侧的部分使你可以快速浏览将使用菜单导航访问的内容。对于此处所述的模型,你的各个部分不会重新突出显示在其他位置找到的区域。

每个区域都有一个部分

对于你的设计,你可以确定在应用启动时选择哪个部分。一种选择是选中用户上次退出该应用时所处的部分。你也可以决定始终选择第一个部分。第一个部分是背景图像向左移动的部分,可在它的上方看见中心标题的最左侧边缘。

你可以决定右侧有多少个部分,但我们建议总体不要超过 4 个部分。如果你具有 4 个以上的部分,用户将难以跟踪其位置。

你可以在每个部分放置任何自己喜爱的 UI。如果你有 4 个主要功能区域,可在 4 个部分中分别放置 1 个区域。可使用你认为用户在应用启动时最希望看到的内容设计第一个部分。下图显示了此类将中心用作应用程序中心的使用方法。

中心的每个部分都具有用于单击的项目,它可带你转到该项目的详细信息。例如,People Hub 具有最近更新部分,它包含可点击的项目。采用垂直滚动的列表呈现这些项目,它们可能代表 Facebook 的帖子。单击项目之一可从中心导航到该帖子的详细信息。最近更新部分的每个条目都有多个点击目标。一个点击目标可使你转到帖子以查看该帖子的回复。另一个点击目标是某人的名字。点击它可使你导航到此人的透视控件,你可以在其中查看关于他们的信息的多个透视项目。

其他示例

每个部分都可以成为自己的独特区域,不必与其他部分相关。当用户点击单个区域的内容时,仍将从主要中心导航到其他位置。将导航到你点击的项目的详细信息,不会和从主页部分菜单一样导航到全新的子区域。

Samsung Now 应用在将中心控件用作应用中心时设计了 3 个部分。该应用的主题是向用户显示他们可能希望在早晨和一天中快速访问的信息 — 天气、新闻和股市信息。

WP8.1学习系列(第六章)——中心控件Hub面板部分交互UX

Samsung Now 应用

该用户仍然可以从中心向其他位置导航。例如,单击股票部分的股票符号将使你转到具有关于该公司的详细信息的单个页面。

建议

适用于 Windows Phone 的具有主页菜单(中心或透视控件)的中心应用主题和本主题都使用中心控件,前者提到的许多建议和警告同样适用于此处的使用。

WP8.1学习系列(第六章)——中心控件Hub面板部分交互UX的更多相关文章

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

    在本文中 先决条件 什么是中心控件? 添加中心控件 将分区添加到中心 添加交互式分区头用于导航 将展示磁贴添加到中心 使用窄应用中的垂直中心 借助中心使用语义式缩放视图 摘要和后续步骤 重要的 API ...

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

    具有主页菜单(中心或透视控件)的中心应用中心 你可能要设计包含许多功能的应用.当你看着这些功能时,可能会决定将它们整理到独立的区域中.这些区域最终会成为用户要访问的应用的独立部分.你需要设计一个简便的 ...

  3. WP8.1学习系列(第二十三章)——到控件的数据绑定

    在本文中 先决条件 将控件绑定到单个项目 将控件绑定到对象的集合 通过使用数据模板显示控件中的项目 添加详细信息视图 转换数据以在控件中显示 相关主题 本主题介绍了如何在使用 C++.C# 或 Vis ...

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

    Windows Phone 应用商店应用中的中心控件指南   在本文中 说明 示例 用法指南 设计指南 相关主题 重要的 API Hub (XAML) HubSection (XAML) 说明 中心控 ...

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

    “应用选项卡”模式用于用户经常在中间导航的多个 UI 页面.如果你的应用基于单个主题(例如,电影.棒球等),该模式尤其有用.每页都将为用户显示与该应用呈现的整体数据相关的一些内容.“应用选项卡”模式可 ...

  6. Ext入门学习系列(五)表格控件(1)

    上节学习了Ext面板控件,为后面的各个控件学习奠定基础,在此基础上本章将学习网络开发最期待的功能——表格控件. 我们都知道网络编程语言中,除了.net其他的基本没有提供网格控件,而最近的asp.net ...

  7. WP8.1学习系列(第十七章)——Windows Phone重要图形、视觉指示器和通知

    美感在手机应用中是不可或缺的,它是直观操作的代名词.在 Windows Phone 中,你的磁贴.初始屏幕.图标.控件和导航的视觉元素会引起用户对应用程序内的相关任务.优先事项或操作的注意,并采用新颖 ...

  8. WP8.1学习系列(第四章)——交互UX之导航模式

    交互模式和指南 这部分包括三部分内容,分别是导航模式.命令模式和输入模式. 导航模式 虽然 Windows 导航模式提供了框架,但它提倡创新.激发你的创造力并在已建立的模式上构建. 命令模式 使用应用 ...

  9. Ext入门学习系列(五)表格控件(3)

    上节学习了Ext中如何绑定服务器端传递的数据.分别用asp.net和asp.net MVC.PHP.XML为例.本节主要介绍绑定之后的分页功能. 一.Ext的表格控件如何绑定? 分页是Ext自带的一个 ...

随机推荐

  1. mysql 相关问题解决

    Windows下解决mysql中文乱码问题 在my.ini中, 在[mysqld]下添加 character_set_server = utf8 在[client]下添加 default-charac ...

  2. VS辅助工具

    tfs签入策略修改工具Team Foundation Server 2015 Power Tools(tfpt) 添加签入禁止策略 \*/bin \*/obj \*/Release \*/Debug ...

  3. Javascript 判断变量类型的陷阱 与 正确的处理方式

    Javascript 由于各种各样的原因,在判断一个变量的数据类型方面一直存在着一些问题,其中最典型的问题恐怕就是 typeof null 会返回 object 了吧.因此在这里简单的总结一下判断数据 ...

  4. 深入浅出docker

    笔者在海外工作多年,所以文中多用英文单词,有些时候是为了更精准的描述,请见谅.希望这篇随笔能帮大家入门docker.由于在海外连博客园有些慢,所以我图片用的比较少,以后再考虑一下如何更好的解决图片上传 ...

  5. 开源项目——小Q聊天机器人V1.3

    小Q聊天机器人V1.0 http://blog.csdn.net/baiyuliang2013/article/details/51386281 小Q聊天机器人V1.1 http://blog.csd ...

  6. pyqt5在textBrowser添加文本并自动滑动到底

    pyqt5在textBrowser添加文本并自动滑动到底 说明: 1.按下按钮pushButton,把单行文本框lineEdit里的内容循环不断的添加到多行文本展示框textBrowser.2.必须要 ...

  7. 树莓派3B+(一)

    第一步:安装raspbian系统 介绍:Raspbian是为树莓派设计,基于Debian的操作系统,由一个小团队开发.其不隶属于树莓派基金会,但被列为官方支持的操作系统. 下载地址:https://w ...

  8. Java容器解析系列(8) Comparable Comparator

    Comparable和Comparator接口是两个用于对对象进行大小比较的接口,在java集合相关类中,也被经常地使用到. 关于其使用,可以参考网络上的其他博客(没什么好说的);这里阐述关于这两个接 ...

  9. 使用ADO.NET操作Oracle数据库

    本文将示例使用C#的ADO.NET技术调用Oralce的存储过程和函数及操作Oracle数据库. 在oracle的hr数据库中建立存储过程 在oralce的hr数据库中建立函数 新建控制台项目,在主函 ...

  10. 关于windows下的虚拟机Homestead在推送代码上github 步骤

    1.ssh 秘钥登录配置 使用以下命令检查主机是否生成SSH Key: > ls -al ~/.ssh 2.如果有秘钥,那就跳过这个步骤,如果没有秘钥,则运行以下命令来生成秘钥: ssh-key ...