Windows 10 響應式設計和設備友好的開發

使用Effective pixels有效像素設計UI

什麼是縮放像素和Effective有效像素：

 

當你的應用程序運行在Windows的設備，系統用一個算法控制的規範，字體，和其餘UI元素顯示在屏幕上。

該算法考慮了距離與屏幕密度（每英寸像素）爲感知大小優化的（而不是物理尺寸）。該算法保證了24px字體在平板電視10英尺的距離是同樣的清晰的用戶爲15像素字體在5的電話是幾英寸遠。

由於如何縮放系統工做，你設計你的Windows通用的應用程序時，你在有效像素的設計，而不是實際的物理像素。有效像素能夠變成多種物理像素。

 

有效像素，使您能夠專一於實際感知的大小一個UI元素而無需擔憂像素密度或不一樣設備的觀看距離。

例如，當你設計一個1X1的元素，該元素將出現約1的全部設備。對高像素密度很是大的屏幕元素，多是200X200的物理像素，而在一個較小的設備如手機，多是100X100的物理像素。

如何製做一個設備和屏幕都友好的應用

 

須要減小導航,使空間最有效的

若是你設計一個應用程序在一個小屏幕設備看起來很好，如電話，應用程序將在PC機上有一個更大的顯示器是可使用的，但可能會有一些浪費的空間。

您能夠自定義應用程序來顯示更多的內容，當屏幕必定規模以上的。例如，一個購物應用程序可能會顯示一個商品類別在時間上的電話，但顯示多個類別和產品同時在電腦或筆記本電腦。
經過把更多的屏幕上的內容，你下降用戶的須要執行導航數量。

利用設備的能力

某些設備更可能有必定的設備的能力。例如，手機可能會有一個位置傳感器和一個攝像頭，而電腦可能沒有。應用程序能夠檢測這些能力的可用性，讓功能使用它們。

優化輸入

universal control library適應全部的輸入類型（觸摸，筆，鍵盤，鼠標），可是你仍然能夠優化特定的輸入類型經過從新安排你的UI元素。例如，若是你把導航元素在屏幕的底部，他們將爲手機用戶更容易接觸到但大多數PC用戶指望看到導航元素向屏幕的頂部。

 

 

 

響應式設計技術

當你優化你的應用程序的用戶界面爲特定的屏幕寬度，咱們說你正在建立一個響應式設計。這裏有六個響應的設計技術，能夠自定義您的應用程序的用戶界面。

 

 

Reposition從新排布

你能夠改變以得到最大的每一個設備的位置和APP的UI元素的位置。

在這個例子中，phone或tablet縱向視圖須要滾動UI由於在一個時間是隻有一個可見的frame。

當應用程序轉換到一個設備，容許兩個全屏幕的frame，不管是在縱向或橫向，B幀能夠佔據一個專門的空間。

若是你使用一個Gird的佈局，你能堅持到同一網格時UI元素的從新定位。

Resize 調整大小

你能夠經過調整邊距和UI元素的尺寸優化的幀大小。這能讓你，做爲例子代表，經過簡單地增長的內容frame增長大屏幕上閱讀體驗

 

Reveal or hide 顯示和隱藏

 

當元素不適合在一個特定的裝置，或在必定的狀況下，或一個特定的屏幕方向，隱藏的UI元素時，應用程序能夠利用更多的屏幕空間，。
在這個例子中的標籤，用相機圖標中的按鈕不適應tablet因此隱藏掉。

 

 

Replace 替換

這項技術讓您能夠爲特定的設備大小或屏幕方向選擇更好的UI。

Re-architect從新設計

你能夠摺疊或分叉你的應用結構更好地針對特定設備。在這個例子中，從左到右裝置演示裝置的頁面導航。

 

 

自適應UI建議

爲了讓Windows 10 的UI顯示在不一樣的設備上，

推薦幾個關鍵的寬度設計：320，720，和1024

 

 

Size class	small	medium	large
Effective pixels	320	720	1024
Typical size	4''-6''	8''	13'' and wider
Typical devices	Phone, IoT	Phablet, tablet	PC, laptop, Surface Hub
Reposition	You make navigation easier on hand-held devices by placing navigation elements on the bottom of the screen so that users can easily reach them with their thumbs.在屏幕的底部在手持設備上更容易放置導航元素，這樣用戶能夠很容易地用大拇指到達導航。 Center tab elements 讓tab主元素在中心	Make tab elements left-aligned 讓tab主元素顯示在左邊	Put navigation at the top of the app window讓導航在窗口的上面 Make tab elements left-aligned讓tab主元素顯示在左邊
Resize	Set left and right margins to 12px. 讓左右邊距12px We recommend creating a visual separation between the left and right edges of the app window. 建議建立的應用程序窗口的左、右邊緣之間的視覺分離	Set left and right margins to 24px. 讓左右邊距24px   We recommend creating a visual separation between the left and right edges of the app window.	Set left and right margins to 24px. 讓左右邊距24px   We recommend creating a visual separation between the left and right edges of the app window.
Reflow	1 column/regions at a time 一列	Up to two columns/regions 兩列	Up to three columns/regions 3列
Reveal or hide	Use an icon to represent search (don't show a search box) 只顯示一個搜索圖標 Put the navigation pane in overlay mode to conserve screen space 將導航窗格變成覆蓋模式以節省屏幕空間	Show the search box 顯示一個搜索框 Put the navigation pane into docked mode so that it always shows 將導航窗格變爲停靠模式，它老是顯示	Show the search box Put the navigation pane into docked mode so that it always shows 將導航窗格變爲停靠模式，它老是顯示
Replace	Replace grid views with list views 將多列Gird變成單列List
Re-architect	If you're using the master detail element, use the stacked presentation mode to save screen space 若是你使用主從單元，使用堆疊的呈現方式能夠節省屏幕空間

 

用adaptive panels設計響應式UI

根據可用空間，將佈局元素的大小和間距交給他們的子元素。例如：StackPanel將子元素列表化（橫向或者縱向），而G、ird將子元素分配到像html的Gird+Css 的Cell格里。

新的RelativePanel實現風格的是由它的子元素之間的關係定義佈局，它是用於建立應用程序的佈局，在不一樣的屏幕分辨率的在輕鬆地調整變化。

RelativePanel還簡化了從新安排元素定義元素之間的關係的過程，它容許您不使用嵌套佈局創建更多的動態用戶界面。

 

例子：

 

 

 

使用VisualState創建UI適應可用的屏幕空間

 

除了屏幕大小的變化，你可能須要你的UI適應其餘屏幕的變化，它運行在設備爲例，在窗口的大小或方向的變化（橫向或縱向）。自適應視覺狀態容許你改變響應於在窗口/方向尺寸變化的視覺狀態。
statetriggers定義一個閾值，視覺狀態被激活，而後設置佈局屬性和其餘屬性窗口的適當的觸發狀態改變窗口大小。
在下面的例子中，組合框是並排的只有當窗口的寬度是600像素以上。視覺狀態稱爲widestate被觸發時，窗口是一個最低的600像素寬，並覆蓋在B的基本Value。

當窗口是599像素寬或窄的widestate觸發，再也不知足widestate再也不有效。

 

 

當寬度小於600的時候

 

當寬度大於等於600時候 B 添加的Below A 的特性，C也相對移動了

 

 

實際演示：

在小寬度下的信息頁面

 

在大寬度下的UI頁面

這兩個寬度對UI的列結構，內容的圖文混排結構都進行了響應式變化。

設備家族

 

Windows 8.1和Windows Phone 8.1應用程序的目標操做系統（OS）：Windows，或者Windows Phone。

與Windows 10再也不關注目標操做系統，但目標應用程序而不是一個或多個設備家族。一個設備家族肯定API，系統的特色，和行爲，你能夠指望在裝置內設備家族。這也決定了整套設備上，您的應用程序能夠從商店安裝。

這裏是設備家族結構:

 

一個設備家族是一組API收集在一塊兒並給予一個名字和版本號。一個設備的家庭是一個操做系統的基礎。電腦運行的桌面操做系統，它是基於桌面設備家族。手機和平板電腦等、運行的移動操做系統，它是基於移動設備家族，等等。

設備的一個好處是，你的應用程序能夠運行在任何，甚至全部，各類設備的手機，平板電腦和臺式電腦，上表面中心和Xbox遊戲機。你的應用程序也可使用自適應的動態檢測和使用的設備是通用設備的家庭外部硬件特徵。
定義應用程序須要，決定哪些設備或設備家族是應用程序的目標。

 

1. 這個APP能夠運行和須要的設備環境
2. 這個程序在條件語句保護下的安全的的SDK集合。
3. 哪些設備能夠從商店安裝這個程序

 

一個Phone包含的Universal + Mobile 的SDK，它屬於移動設備家族

 

 

一個平板、一臺筆記本和一臺PC都包含的Universal + Desktop的SDK，它是基於桌面設備家族

 

爲APP添加Mobile設備家族的SDK，給APP在手機上運行時使用更多的功能。

 

經過檢測API契約可用性的 開發設備友好的APP

 

例：物理Back鍵處理：

 

使用Windows.Foundation.Metadata.ApiInformation 判斷當前運行的設備環境是否支持物理Back按鈕API，

若是支持說明是一個帶有Back按鈕的設備，不然這個設備就沒有Back鍵，而後再後面的代碼裏面處理物理Back事件，也能夠對UI的虛擬back鍵進行隱藏。

並且設備的差別性也能夠經過API檢測來，檢測設備是否有拍照物理按鈕響應API，這樣能夠判斷這臺手機是否有物理拍照按鈕。

若是API有多個版本升級，可能會須要新版本，還能夠檢測這個硬件是否API是可用版本的。