您的位置：首页 > Web前端 > HTML

使用 HTML 控件创建出色的 Metro 风格应用

2012-09-20 18:31 183 查看



原文来自：http://www.devdiv.com/home.php?mod=space&uid=6998&do=blog&id=11370

使用 Windows 8，您可以利用 HTML 来构建 Metro 风格应用。您可能没有意识到的是，通过直接使用 HTML 控件，您会自动获得全新的 Windows 8 体验。我们已经在 HTML 中做了相关工作，以便您可以构建具有触摸功能的行业水准应用，同时仍然保持使用 HTML 能够获得的极大灵活性。我们希望您能够快速、高效地构建出色的应用。

特别是，我们希望您继续利用诸如 <button> 之类的常用 HTML 控件，以便可以借助现有的专业知识来创建出色的 Windows 8 体验。Windows 8 通过以新的方式实现内置有 Windows 8 体验的标准 HTML 控件来达到此目的。默认情况下，所有这些标准控件都具有新的 Windows 8 外观、出色的触摸体验以及强大的本地化和全球化支持。通过使用这些标准 HTML 控件，您可以构建您的客户喜爱的出色 Metro 风格应用，同时仍然保持您希望从 HTML 中获得的灵活性。

Windows 8 团队希望您能够尽可能轻松地创建您的用户乐于使用的出色应用。我们以一个最简单的控件 <button> 为例，演示 Windows 8 中新的 <button> 如何提高您的工作效率。通过此处讨论的技巧和诀窍，我们将帮助您在 Windows 8 中充分利用 HTML 来创建出色的 Metro 风格应用。


Windows 8 按钮

如果您已经查看了我们的一些讨论和设计指南，那么您已经知道出色的 Metro 风格应用的一些设计指南：
应用 Metro 风格外观
针对触摸而设计
编码时考虑到基本要求（如全球化和辅助功能）
快速流畅

Windows 8 中更新的 HTML 控件可帮助您毫无障碍地遵守这些设计指南，因为我们希望您掉进“成功的陷阱”：

成功的陷阱：与翻山越岭或穿越沙漠，通过多次尝试和意外才能找到成功之路不同的是，我们希望我们的客户通过使用我们的平台和框架轻松地找到制胜办法。就让您轻松陷入麻烦之中而言，我们是失败的。

-Internet Explorer 的合作伙伴架构师 Rico Mariani

因此，让我们来看一下使用 <button> 如何让您的应用落入成功的陷阱，并自然而然地实现出色 Metro 风格应用的特性。


应用 Metro 风格外观

我们希望您能够使用 Metro 风格设计轻松创建用户界面，同时为您提供根据应用本身独特的品牌和需要自定义用户界面外观所需的灵活性和强大功能。如果您曾尝试使用 VS 模板通过 JavaScript 和 HTML 创建 Windows 8 应用，您会注意到默认情况下 Metro 风格设计提供有 <button> 之类的所有标准 HTML 控件，如下所示：

<button>Windows 8 Rocks!</button>


 



图 1：Internet Explorer 10 中的默认按钮



图 2：Windows Metro 风格应用中的按钮
其幕后的工作原理是怎样的？Windows 8 在这里做了两项改进：首先，我们增强了为 HTML 控件（如 <button>）提供的样式功能，以使您能够比以往更灵活地通过 CSS 为不同的部件提供视觉效果并提供控件中的视觉状态。其次，我们通过两个现成的默认样式表为所有 HTML 控件提供了默认 Metro 风格视觉效果，这两个样式表是 Windows
JavaScript 库 (WinJS) 的一部分，并且默认包含在所有 VS 模板中。


新 HTML 控件基础结构

我们重新设计了从核心构建控件的方式，以便您能够更加灵活地设置控件的样式。事实上，我们对样式设置进行了同样的改进，以定义 Windows 8 中所有 HTML 控件的默认外观。

大多数浏览器目前都使用以前生成的图像呈现控件。每次向控件应用样式时，浏览器都会放弃硬编码的图像，以简单的基准外观重新呈现控件，然后在此基础上应用您所需的样式。

对于 <button>，您可以看到，即使您只应用了一种背景色，第二个按钮现在也具有一个呈现三维棱台效果的边框。该三维边框是基准外观的一部分：

<button>Normal</button>

<button style="background-color: red;">Styled</button>






图 1：Internet Explorer 中的普通按钮和设置了样式的按钮

就样式设置而言，通过硬编码图像的默认外观存在一些限制。您不能只是简单地直接设置新样式，当您对之前生成的位图应用样式时，并不会立即显示出样式设置的效果。因此，Windows 8 不再通过硬编码图像提供 HTML 控件原来的外观。我们已经从根本上重新构建了所有 HTML 控件，使其使用基于矢量的基元 (CSS) 呈现，从而允许您直接在控件上设置样式。

我们还添加了一项使您能够访问控件的内部部件的功能。对于复选框之类的控件，您可以使用 -ms-check 伪元素来选择内部复选标记，并独立于复选框设置该内部元素的样式。

input[type=checkbox]::-ms-check
{
background-image: url("myCheckMark.svg");
}


要获得我们添加到 HTML 控件中的部件的完整列表，请参阅快速入门：设置控件的样式（使用 JavaScript 和 HTML 的 Metro 风格应用）。

如果您经常使用 CSS 样式，现在就可以对控件设置一些之前不可能实现的有趣样式。



 

图 2：设置了样式的复选框示例

请查看常用 HTMS 控件示例并查看快速入门：设置控件的样式，以了解详细信息。

根据 CSS 基元构建所有控件的另一个好处是我们获得了强大的缩放功能。这一功能特别重要，因为 Windows 8 支持各种各样的设备，控件必须能够缩放以适合所有屏幕分辨率和
DPI。

通过使用 CSS 基元，我们的控件可以针对所有屏幕分辨率和 DIP 自动正确缩放并更清晰地显示。





图 3：CSS 绘制的图像在每种分辨率下都非常清晰

因此，如果您选择对控件进行自定义，请确保继续使用基于矢量的技术，如 CSS 基元或 SVG。使用光栅图像会使控件在缩放时看起来像素化，从而导致您的应用在有些 Windows 8 设备上看起来不够精美。



图
4：图像最小化时看起来很模糊


图 5：图像被放大时看起来像素化
有关如何处理缩放的详细信息，请查看缩放 SDK 示例。

Internet Explorer 10 和 Windows 8 中的 HTML 共享同一 HTML 平台。这意味着 Internet Explorer 10 的所有 HTML 控件也是使用 CSS 和网页构建的，因此在 Windows 8 中，它们也可以在不同的屏幕分辨率和 DPI 之间清晰地缩放！


默认呈现 Metro 风格外观

我们通过 CSS 样式表为所有控件提供新的 Metro 风格外观。我们希望以透明方式显示新的 Windows 8 Metro 风格设计是如何实现的，并使您能够将自己的品牌集成到其中，例如，换掉控件上的颜色，以使用您自己的应用的品牌化配色方案。赶快利用这种灵活性！请查看可帮助轻松为控件着色的主题定制器
SDK 示例。

现在，为了获得默认外观，您只需要选取两个默认样式表的其中一个；它们之间的唯一差别在于它们基于的配色方案。ui-dark.css 包含的控件颜色最适合深色背景，而 ui-light.css 包含的控件颜色最适合浅色背景。对于主要显示图像或视频的应用，建议您使用深色样式表；对于包含大量文本的应用，建议使用浅色样式表。（如果您使用的是自定义配色方案，请使用最适合您应用的外观的样式表。）在选择应用配色方案时，首先要使用以下 HTML 代码在您的项目中引用其中一个样式表：

<head>

<!-- Dark Style Sheet reference -->

<link href="//Micr
150dd
osoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet">

<!-- or Light Style Sheet reference -->

<link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet">

<!—Other header content -->

</head>


了解如何应用默认样式以及基于默认样式进行构建的最简单方法是，实际打开 CSS 默认样式表并查看其中的 CSS 样式。

如果我们回到原来的按钮示例，当您使用我们之前在 Metro 风格应用中看到的相同代码行时，现在您会得到如下结果：





图 6：普通按钮和设置了样式的按钮

在 Metro 风格应用中，现在只有您应用的样式会被覆盖。现在，您可以轻松地打造应用的品牌，同时保留新的 Metro 风格外观。

显而易见，现在您可以更好地设置控件的样式，它们会自动在各种屏幕分辨率和 DPI 之间清晰地缩放。我们希望您能够在应用中更轻松地获得所需外观，同时保留 Metro 风格外观。


针对触摸而设计

为了帮助您创建出色的应用，我们希望简化适用于触摸、鼠标和键盘的用户界面的创建，并为您的用户提供一组熟悉的交互，他们可以信赖这些交互在整个系统中能够稳定运行。

如今，HTML 控件已经拥有强大的键盘和鼠标支持。由于触摸是一种新的交互模式，因此我们需要在所有 HTML 控件中实现更好的触摸支持。为了针对触摸更好地进行编码，您必须首先了解触摸输入面临的特有挑战。


手指并不精准

与像素级精度的鼠标指针相比，手指是精确度较低的输入机制。

图 7：该图像显示成人手指的平均宽度大约为 11 毫米 (mm)，小孩的平均宽度为 8 mm，而一些篮球运动员的手指宽度超过 19 mm！


为了提高用户点击的精准度，Windows 8 HTML 平台添加了以下几项功能：
为了方便触摸而调整控件大小

默认情况下，Metro 风格 HTML 控件的大小会进行调整以适合平均手指宽度。这使用户能够自信地对准控件。如果可以通过一两个手势或在五秒钟内纠正触摸错误目标的情况下，那么适当的最小大小为 7x7 mm。在我们的默认样式表中，所有按钮控件的最小高度和最小宽度形成的最小面积均为 7x7 mm。下面是使用默认样式表中的值的示例。

button, input[type=button], input[type=reset], input[type=submit]
{
min-height: 32px;
min-width: 90px;
}


触摸重新定位

Windows 8 触摸定位通过让系统找到接触几何图形内最接近的控件并将触摸点的目标重新设定为该控件来帮助用户。

消除触摸不确定性

消除触摸不确定性引擎在系统中添加了一些技巧，以便在手指覆盖多个控件时，帮助更好地确定用户的目标。


无瞄准反馈

在使用鼠标时，用户可以首先瞄准光标，确保只有一个像素大小的点准确地位于他们想要激活的控件上，然后单击。但是使用触摸，您必须将手指悬停在屏幕上，不会出现任何反馈来指示您悬停的位置是否准确。当您与屏幕接触时，您会立即激活该 UI。这意味着，使用鼠标，您可以进行准备、瞄准，然后射击。而使用触摸，您必须直接射击。由于您没有瞄准的机会，触摸的错误率就高得多。

为了使用户能够放心地使用触摸，Windows 8 为控件定义了一组交互式视觉状态，在用户即将调用控件时进行指示。例如，用户将会看到视觉效果以告知他们激活的控件，同样，当他们改变主意而成功取消激活时，也会看到这些视觉效果。Windows 8 已通过默认样式表将这些视觉效果直接内置到控件中。Windows 8 通过将 CSS 状态映射到触摸交互状态来实现此目的。下面是 <button> 的 CSS 映射的示例：



图
8：触摸交互状态的 CSS 映射

我们来仔细看一下交互状态的设置以及我们如何将视觉效果融入控件中。


按下状态

现在，在按下控件时，控件可以给出明显的视觉反馈，以便用户对系统瞄准的按钮有十足的把握。





图 9：按钮触摸状态

当用户按该按钮时，我们向按钮同时应用 :hover 和 :active CSS 伪状态，并通过在 CSS 中设置背景色和字体颜色来提供视觉反馈：

button:hover:active {

color: rgb(255, 255, 255);
}


我们对触摸同时映射 :hover 和 :active 而不仅仅是 :active 状态，以便我们可以使用与鼠标类似的编程模型。这样，您就可以轻松地对两种输入类型使用相同的代码。当您使用鼠标单击某个按钮时，鼠标通常已经位于按钮上面并且已经处于 :hover 状态。当您用鼠标单击按钮时，会添加一个额外的 :active 状态。


取消

如果用户看到他们触摸了错误的按钮，他们可以将手指移出该按钮并抬起手指以便取消。只要手指离开该按钮，它将会恢复为其正常状态，以指示交互已被取消。

为了实现已停用视觉效果，当用户的手指移出按钮时，我们继续将 :active 应用于该按钮并使 :hover 状态失效。由于 :active 状态本身没有样式，因此控件会恢复为正常样式，看起来就像按钮已恢复为静止不动状态。这会为用户提供视觉指示，告诉用户按钮操作已取消。这实际上是鼠标的现有行为。在 IE9 中，已通过一个专用主题位图切换实现了此功能。在 IE10 中，我们通过公用 CSS 状态公开了这一更改，以便您在设置控件样式时可实现相同的效果。

在设置控件样式时，确保不只是为按下样式设置 :active 状态，因为该状态表示取消行为，所以必须与正常状态具有相同的样式。用于激活的正确状态是 :hover:active 状态。





图 10：按钮取消状态

您不希望用户不知道该从何处抬起手指以避免无意中激活其他控件。例如，如果“确定”和“取消”按钮挨得非常近，当用户因为错误地触摸了“确定”按钮而想收回时，他们不应该担心会无意中触发“取消”按钮。在这种情况下，“取消”按钮不能使用其活动样式被激活。

默认情况下，这适用于 HTML 平台，因为 <button> 捕获触摸输入。因此，只要手指还按在按钮上，用户即可轻松地移开，而不必担心意外触发其他按钮。


不仅仅是一次单击

触摸使用户可以随时在屏幕上拥有多个指针；这称为多点触控，触摸输入的方向和速度（称为手势）具有特定的含义。例如，手指触摸屏幕的一侧并沿水平方向在屏幕上移动的手势称为“轻扫”。

使用 Windows 8 HTML 平台中的多点触控，我们现在允许多个控件同时具有 :active 状态和 click 事件，因此当用户触摸屏幕时，他们可以同时激活多个控件。<button> 之类的简单控件可用于各种方案，例如键盘应用上的键或游戏的控件！

此外，通过手势检测，您可以识别不同的手势并针对 HTML 控件为其分配含义。例如，轻扫按钮会快速翻译为页面平移。轻扫滑块 <input type=”range”> 会被解释为控件输入。这种工作可帮助应用流畅地响应触控手势，而不管您位于哪些控件上。

通过良好的视觉指示器、内置的触摸定位增强、多点触控支持以及对触控手势的流畅反应，我们的所有 HTML 控件在默认情况下都能提供出色的触摸体验，因此只要您使用控件并遵循此处讨论的技巧和诀窍，您的 HTML Metro 风格应用就将自动实现触摸功能！


基本要求：全球化和辅助功能

出色的应用应该吸引尽可能多的用户。这意味着应用需要全球化并且易于访问。为了帮助您实现这一目标，我们将这些基本功能内置到所有 HTML 控件中。


字体支持

我们在 HTML 控件中置入了适当字体支持。即使您不打算本地化您的应用，您的应用仍然能够显示 Windows 8 支持的任何一种语言的本地化文本。当您的应用必须基于用户的输入显示文本时（例如，在文本框控件中），这尤其有用。您的应用将能够正确显示文本，因为我们已经做了相关工作来确保控件使用支持这些字符的字体。我们还提供与 Windows 的本地化版本正确匹配的首选 Metro 风格字体。Windows 为所有语言选择首选的 Metro 风格字体。简言之，我们消除了字体支持中的不确定因素。

如果您想知道我们是如何做到的，可以再次打开默认样式表，您会看到，对于许多语言，我们都自动设置了回退字体列表。在下面的示例中，对于日语，选择的第一种字体是 Meiryo UI。但是，如果您的应用具有 Meiryo UI 字体不支持的任何 Unicode 字符，那么下一个回退字体是 Segoe UI，如果 Segoe UI 仍然不行，我们会使用 Ebrima，依此类推。因此，对于大多数情况，您的字符都将由 Windows Metro 风格首选字体所涵盖。即使您没有特定语言的默认字体，我们也会默认使用 Web 平台中的回退字体。因此，用户永远不会在您的控件中看到占位字符！

body:lang(ja), .win-type-xx-large:lang(ja), .win-type-x-large:lang(ja), .win-type-large:lang(ja), .win-type-medium:lang(ja), .win-type-small:lang(ja), .win-type-x-small:lang(ja), .win-type-xx-small:lang(ja), input:lang(ja),textarea:lang(ja), .win-textarea:lang(ja), button:lang(ja), select:lang(ja), option:lang(ja)
{
font-family: "Meiryo UI", "Segoe UI", "Ebrima", "Nirmala UI", "Gadugi", "Segoe UI Symbol", "Khmer UI", /* etc.*/
}

此外，如前面的示例所示，我们并不只是将其添加到 <body> 元素中或者只是添加到 HTML 控件中。我们还提供了一个版式样式列表，您可以将这些样式应用于您的应用内容，以便自动获取这组漂亮的字体。有关详细信息，请参阅 WinJS
CSS 版式类。

选取正确的资源
我们创建了一个资源加载器，以便您可以更轻松地将您的应用本地化。使用它可以为您的应用加载一组适用于所有 HTML 控件的已本地化的正确字符串。资源加载器提供有反馈机制，因此您不必担心需要支持的语言组合。现在，您可以通过声明的方式在
HTML 中引用您的资源，资源加载器会自动为您选择正确的资源。

<button data-win-res="{textContent: ‘string2’}">OK</button>



内置辅助功能
为了帮助您的应用覆盖更广泛的受众，所有 HTML 控件都内置有辅助功能基础结构。

首先，因为所有 HTML 控件在语义上都有特定的含义，因此我们内置了“讲述人”和屏幕阅读器支持。屏幕阅读器的目标是识别屏幕上的视觉效果并将其翻译给弱视用户。对于 <button>，屏幕阅读器可以让最终用户知道应用需要用户采取操作，而使用 <div> 构建的具有类似外观的按钮则不需要。因此，为了让屏幕阅读器和“讲述人”能够与 <div> 一起正常运行，您需要添加您自己的 ARIA
属性。

其次，我们确保所有 HTML 控件继续支持高对比度。高对比度专为视力不佳的人士设计。高对比度配色方案通过使用替代颜色组合来提高屏幕的对比度，使某些用户更容易查看屏幕。

我们将这些颜色内置到默认样式表中，当 Windows 被设置为以高对比度主题显示时，控件会自动切换为高对比度颜色，从而使您的应用默认情况下与高对比度兼容。因此，即使您为默认固有控件设置了样式并更新了其颜色，只要您使用的选择器具有相同特征，Windows
就能确保可以显示正确的高对比度颜色。您可以从我们的 BUILD 讨论：通过为 HTML 应用设置样式使其脱颖而出中了解有关此内容的详细信息。

我们实现高对比度切换的方法只是为高对比度模式添加一个媒体查询，并为默认样式表中的每个固有控件定义所有必要的颜色。如果您想知道究竟都有哪些颜色，只需打开默认样式表查看一下即可。

@media (-ms-high-contrast)
{
/* high contrast definition */
}


通过提供强大的字体支持、可帮助选取正确的本地化资源的资源加载器以及内置辅助功能，我们使您的应用尽可能轻松地吸引范围广泛的 Windows 用户。

使您的应用快速流畅
为了确保您的 HTML 应用在所有 Windows 8 设备（包括 ARM）上都能完美运行，我们需要确保应用的构建基块（即控件）能够完美运行。

Windows 8 包含的 HTML 引擎不仅支持浏览体验（Metro 风格浏览体验和桌面浏览体验），还支持使用 HTML5 和 JavaScript 的 Metro 风格应用。该通用 HTML 引擎针对浏览器体验和 Metro 风格应用，为 Web 标准和 Web 编程模型提供始终如一的快速、安全和强大的支持。这意味着，HTML Metro 风格应用具有 IE10 的所有性能优势。下面是一些影响
HTML 控件的性能优势：
Direct2D 硬件加速

由于这些控件是 HTML 平台固有的，因此我们可以利用 HTML 平台的 Direct2D 硬件加速。现在我们可以对您的
Windows 8 HTML 应用中的所有图形和文本使用 GPU。GPU 可以利用专门的硬件来高效地更新屏幕。通过使用 GPU 进行视觉呈现，我们可以释放 CPU 来执行其他操作，例如可以进一步改善应用性能的 JavaScript 代码的 JIT（实时）编译。

独立的触摸功能

我们对 Web 平台性能进行增强的一个方面是平移和缩放。我们做了大量工作来确保控件能够与我们针对平移和缩放进行的优化无缝地一起工作。例如，如果您在平移区域使用标准按钮控件，那么当用户开始平移时，系统将会并行处理平移区域的触摸操作和按钮。因此，最终用户不会感觉速度变慢，因为我们使用了额外的控件进行处理，并且平移实际上就像没有按钮一样迅速开始。我们努力确保控件的使用不会造成某些更简单的控件实现方法可能遇到的任何速度问题。

控件的触摸可靠性

为了确保出色的触摸性能，我们对系统进行了调整以使其更加可靠。我们的示例是，在 <button> 中，我们在激活按下状态中引入了延迟，以便系统能够先处理 <button> 上其他与触摸相关的手势（如点按或轻扫）。这样，我们就不必立即为每个交互执行复杂的 CPU 密集型父布局计算。结果是，如果用户只打算点按按钮，那么按钮将会快速进入和离开按下状态并返回正常状态，而不需要父容器来更新其布局。诸如此类的小调整有助于提高 HTML 应用的整体可靠性。


集成工具
除了此处概述的所有出色平台功能外，我们还为 HTML 控件提供了一流的工具。

下面重点介绍了我们的 Visual Studio 和 Blend 工具中的一些工具增强：
Visual Studio 和 Blend 中为 HTML、CSS 和 JavaScript 提供了一流的智能感知功能。例如，在 Visual Studio 中，当您指示您需要设置背景色时，现在我们会提供颜色选取器，而不是仅仅提供基于文本的智能感知。



图
11：Blend 中的嵌入式颜色选择器

在 Blend 中，现在您可以将所有控件从工具箱直接拖放到设计图面上。此外，您现在还可以直接在设计图面上排放控件和调整控件大小。这样您就可以直观地排放应用中的控件。



图
12：Blend 设计图面中的按钮

在 Blend 中，您可以使用样式面板设置控件的样式。

例如，您可以使用内置的颜色选取器设置背景色和前景色。





图 13：Blend 中带有颜色选取器的样式面板

或者，您也可以执行更复杂的操作，例如在控件上设置切换效果。



图
14：Blend 中的切换属性面板

有关这些工具中提供的功能的更多信息，请参阅 Soma 的博客。

总结
在本篇博文中，我详细介绍了 <button> 控件，但适用于 <button> 的所有出色功能同样适用于所有其他固有 HTML 控件。

为了优化 HTML 控件以方便您构建 Metro 风格应用，我们进行了大量投资。这些控件现在可以在各种尺寸的设备上出色运行，可为用户带来更好的体验并且能扩大您的应用的影响力。Release Preview 中提供的一些重要应用大体上都使用了 HTML 控件，例如 Windows 8 应用商店、邮件、日历和照片应用。通过使用这些控件，您的应用可以获得 Metro 风格外观，并且您可以集中精力开发应用的核心价值。

有关更多信息，请参阅：

添加控件和内容

Metro 风格应用的控件 UX 指南

SDK 示例：

CSS 样式：打造应用品牌示例

HTML 控件示例

以及有关控件和样式的
//BUILD/ 讨论。

-- Windows 高级项目经理 Kathy Kam
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                html
                                                windows
                                                button
                                                blend
                                                javascript
                                                css
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航