使用 HTML 控件创建出色的 Metro 风格应用
使用 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 風格應用的一些設計指南：
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="//Microsoft.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 控件创建出色的 Metro 风格应用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 电视鸿蒙beta版系统,鸿蒙系统2.0b
- 下一篇： 车辆灯具E-mark认证流程