先睹為快：Windows Phone 7界面框架

Win7之家（ afsion.com.cn）：先睹為快：Windows Phone 7界面框架

 Windows Phone 7系列CTP用戶界面的設(shè)計(jì)目標(biāo)是為最終用戶提供一個(gè)最佳的視覺體驗(yàn)。本節(jié)將教育開發(fā)者關(guān)于全屏幕模式(full screen mode)，屏幕方向(screen orientation)，框架和頁面導(dǎo)航(frame and page navigation)以及應(yīng)用程序滾動(dòng)(application scroling)等主題。

下面的主題將要在本節(jié)進(jìn)行討論：


屏幕方向 （Screen Orientation）

支持兩種類型的屏幕方向，豎屏(portrait)和橫屏(landscape)。

框架和網(wǎng)頁構(gòu)造 （Frame and Page Construction）
Windows Phone 7系列CTP的應(yīng)用程序是基于Silverlight的網(wǎng)頁瀏覽模式，在這模式下，用戶可以在不同的內(nèi)容頁面下相互導(dǎo)航。

滾動(dòng)查看器 （Scroll Viewer）
當(dāng)應(yīng)用程序的內(nèi)容大于屏幕大小的時(shí)候就會(huì)發(fā)生滾動(dòng)。

主題 （Themes）
主題是用于個(gè)性化Windows Phone視覺元素的資源。


屏幕方向
Windows Phone 支持三種類型的屏幕方向：豎屏，向左的橫屏和向右的屏幕。向左橫屏和向右橫屏之間的區(qū)別是應(yīng)用程序工具欄和系統(tǒng)托盤的方位不一樣。

注意：

應(yīng)用程序不能指定只是支持向左橫屏或者向右橫屏的應(yīng)用程序工具欄和系統(tǒng)托盤的方位，需要兩種都同時(shí)支持。


豎屏模式
在豎屏模式下，頁面在垂直方向的時(shí)候高度要比寬度大。當(dāng)設(shè)備旋轉(zhuǎn)或滑出物理鍵盤的時(shí)候，方向會(huì)發(fā)生改變。當(dāng)屏幕方向更改的時(shí)候，具有方向感知功能的應(yīng)用程序也應(yīng)當(dāng)去響應(yīng)該方向改變。

橫屏模式
在橫屏模式下，頁面顯示的寬度大于高度。下面是一些橫屏模式用途：

當(dāng)用戶使用一個(gè)橫向拉出鍵盤進(jìn)行輸入時(shí)，例如編寫email和短信的時(shí)候。
如果某個(gè)網(wǎng)頁更適合橫向?yàn)g覽的時(shí)候，橫屏模式能為用戶提供了更好體驗(yàn)。
拍照的時(shí)候。
查看單張照片或觀看幻燈片的時(shí)候。
欣賞電影或視頻的時(shí)候。
玩游戲的時(shí)候。
關(guān)于應(yīng)用程序設(shè)計(jì)的考慮
當(dāng)您設(shè)計(jì)應(yīng)用程序橫屏和豎屏模式的時(shí)候，需要考慮以下幾方面的因素。

應(yīng)用程序必須同時(shí)支持所有的屏幕方向。如果一個(gè)應(yīng)用程序能支持橫屏模式和豎屏模式，當(dāng)用戶翻轉(zhuǎn)手機(jī)的時(shí)候，或者滑出物理鍵盤的時(shí)候，屏幕顯示模式就會(huì)發(fā)生轉(zhuǎn)換。由于orientation屬性是只讀的，通過編程的方式不能直接轉(zhuǎn)換屏幕的顯示模式。但是也有個(gè)間接的方法可以實(shí)現(xiàn)這一功能，通過對(duì)Supported Orientations屬性的賦值可以實(shí)現(xiàn)。
當(dāng)更改為橫屏模式的時(shí)候，應(yīng)用程序工具欄和系統(tǒng)托盤，應(yīng)用程序菜單，用戶音量界面組件，消息通知模塊和系統(tǒng)對(duì)話框（如低電池的通知）等等將會(huì)變成橫屏感知。
在橫屏模式或者豎屏模式下的文字輸入是通過物理鍵盤（如果可用的情況下）或者屏幕軟鍵盤來完成。

框架和網(wǎng)頁的構(gòu)建
本節(jié)將詳細(xì)為您講述的應(yīng)用框架和網(wǎng)頁的構(gòu)建。它也將含括Windows Phone 7系列CTP的客戶化手機(jī)UI框架的設(shè)計(jì)。


注意：
在未來版本中本節(jié)將擴(kuò)展。


Windows Phone7系列CTP的應(yīng)用程序是基于Silverlight的網(wǎng)頁瀏覽模式，用戶可以在不同內(nèi)容的屏幕上相互導(dǎo)向和瀏覽。此外，您可以點(diǎn)擊Windows Phone的back 硬件按鈕來返回到上一個(gè)頁面。這個(gè)模型的設(shè)計(jì)目標(biāo)是減輕基于瀏覽的應(yīng)用程序的開發(fā)難度，使其更自然的適合Windows Phone 7系列CTP的導(dǎo)航模型。

核心元素包含了稱為PhoneApplicationFrame（框架）的頂層容器控件，其可以承載PhoneApplicationPage（頁面）。在應(yīng)用程序中，頁面可以實(shí)現(xiàn)內(nèi)容的分離。Windows Phone 7系列CTP提供框架和頁面類，以方便導(dǎo)航到獨(dú)立的內(nèi)容章節(jié)中。在應(yīng)用程序中，您可以根據(jù)您的需求創(chuàng)建多個(gè)不同的頁面，這些頁面可以通過框架來進(jìn)行導(dǎo)航。下面的圖示說明一個(gè)應(yīng)用程序中框架和頁面的層次結(jié)構(gòu)：




客戶化屏幕UI界面
這是一個(gè)頁面內(nèi)容轉(zhuǎn)換的狀態(tài)，用于轉(zhuǎn)換正常瀏覽狀態(tài)和全屏狀態(tài)。應(yīng)用程序可以選擇是否包括系統(tǒng)托盤或應(yīng)用程序工具欄�？墒情_發(fā)人員不應(yīng)該把這些行為實(shí)現(xiàn)成自動(dòng)改變（譯注：也就是需要用戶觸動(dòng)來改變），例如說，當(dāng)在Windows Phone啟動(dòng)一個(gè)游戲的時(shí)候會(huì)打開游戲設(shè)置菜單，用戶如果選擇啟動(dòng)新游戲的時(shí)候，頁面會(huì)進(jìn)入全屏模式啟動(dòng)。


注意：
以上被認(rèn)為是使用完全客戶化UI模式的最佳做法。如果應(yīng)用程序只是運(yùn)行全屏模式，所有視覺通知（包含來電通知）將被正常的傳遞到用戶界面。


當(dāng)您的應(yīng)用程序進(jìn)入全屏模式下，系統(tǒng)托盤欄和應(yīng)用工具欄會(huì)變成不可見。開發(fā)人員可以隱藏應(yīng)用程序欄或者把之顯示在最表面層。可以通過對(duì)顯示屬性（Page.FullScreen）賦值來決定是否顯示應(yīng)用程序工具欄和系統(tǒng)托盤。

滾動(dòng)查看器
當(dāng)內(nèi)容大于滾動(dòng)查看器的邊界的時(shí)候，應(yīng)用程序會(huì)發(fā)生滾動(dòng)。內(nèi)容被包含在滾動(dòng)面板下，這個(gè)滾動(dòng)面板將處理頁面的滾動(dòng)。滾動(dòng)面板會(huì)顯示出滾動(dòng)指示器來表示內(nèi)容是否否長(zhǎng)于或?qū)捰陧撁�，以及提示�?dāng)前內(nèi)容在整個(gè)頁面的分布位置。

關(guān)于應(yīng)用程序設(shè)計(jì)的考慮
位于右邊滾動(dòng)指標(biāo)器用于垂直滾動(dòng)，而位于底部的滾動(dòng)指示器用于水平滾動(dòng)，滾動(dòng)指標(biāo)器只在您與頁面進(jìn)行交互的時(shí)候才出現(xiàn)的。
如果沒有手勢(shì)（gesture）運(yùn)動(dòng)（例如點(diǎn)擊或者平移）事件，滾動(dòng)指示器在一段時(shí)間內(nèi)會(huì)消失。當(dāng)有手勢(shì)運(yùn)動(dòng)事件發(fā)生時(shí)，滾動(dòng)指示器會(huì)重新出現(xiàn)。
滾動(dòng)指示器標(biāo)明用戶在內(nèi)容的方位。例如，如果用戶在頁面的頂部，滾動(dòng)指示器顯示在頂部。
避免在滾動(dòng)查看器上使用具有很多內(nèi)容的列表框控件，這可能會(huì)降低性能。


主題
主題是用于個(gè)性化的Window Phone視覺元素的資源。Windows Phone 7系列CTP的開發(fā)人員在創(chuàng)建應(yīng)用程序的時(shí)候從文體的角度（Stylistic standpoint）下可以保持原有設(shè)備UI外觀以及感覺的一致性。這些樣式屬性包括背景顏色和重點(diǎn)色彩（Accent colors）。主題能確保用戶界面元素以及控件呈現(xiàn)的一致性，防止不和諧的用戶體驗(yàn)。

此功能的目標(biāo)包括：

在Windows Phone 7系列CTP的開發(fā)人員可以構(gòu)建應(yīng)用程序并且直接在他們的代碼中訪問主題的屬性。
開發(fā)人員可以明確地改變?nèi)魏沃黝}的的屬性，使其與滿足他們自己的品牌要求。
使用主題的優(yōu)點(diǎn)是保持與Metro設(shè)計(jì)原則的一致性和兼容性。開發(fā)人員可以直接使用默認(rèn)的控件設(shè)置，而不需要更改的一些通用的屬性（例如色彩風(fēng)格），這些屬性的風(fēng)格將在運(yùn)行時(shí)根據(jù)主題文件中設(shè)置而更改。在Windows Phone下運(yùn)行的應(yīng)用程序會(huì)自動(dòng)根據(jù)相應(yīng)的主題而修改視覺效果。此外，開發(fā)人員可以在應(yīng)用程序級(jí)別上覆蓋主題。例如，某些公司如果需要特顯其本身強(qiáng)烈的色彩元素，在開發(fā)開發(fā)的應(yīng)用程序的時(shí)候可以保持自身的色彩風(fēng)格。開發(fā)人員可以使用自己的資源來覆蓋任何主題的屬性。但是，他們不能關(guān)閉的主題。

注意：
主題只包含色彩。字體或者控件大小等其他元素都不能改變。



關(guān)于應(yīng)用程序設(shè)計(jì)的考慮

用戶可以選擇一個(gè)光亮或者灰暗的主題，開發(fā)人員在開發(fā)UI的時(shí)候應(yīng)該考慮到這一點(diǎn)。例如，如果您在整個(gè)應(yīng)用程序中的所有背景都選擇為白色。這可能會(huì)影響到LED顯示屏的電池壽命。在開發(fā)過程中，你應(yīng)該永遠(yuǎn)考慮應(yīng)用程序背景顏色對(duì)電池壽命的影響。
用戶可以在您的應(yīng)用程序中選擇5個(gè)不同的重點(diǎn)色彩方案。如果您應(yīng)用程序中支持重點(diǎn)色彩方案，這些色彩方案將根據(jù)用戶的原先偏好設(shè)定而發(fā)生改變。這些重點(diǎn)色彩方案包括包括橙色，藍(lán)色，綠色和紅色。手機(jī)的制造商可以自己定制最后一種重點(diǎn)色彩方案。
您不能修改系統(tǒng)級(jí)別的主題，只能修改您的應(yīng)用程序級(jí)別的主題。
如果你明確地設(shè)置控件前景或背景的顏色，您應(yīng)該同時(shí)驗(yàn)證在黑白方案主題中是否都可見。如果您選擇的顏色是不可見的，要么選擇更合適的顏色或者設(shè)定背景或前景的對(duì)比度。

翻譯自UI Design and Interaction Guide for Windows Phone 7 Series 

翻譯活動(dòng)由www.wpmind.com 的站長(zhǎng)小指發(fā)起