Windows Phone 7開發工具UI設計新特性
我們曾介紹過Windows Phone 7正式版本的開發工具- Windows Phone Developer Tools RTW。在新版本的開發工具中，微軟加入了Metro UI中最重要的兩個控件：Panorama和Pivot（中文為全景視圖和樞軸視圖）。本文主要內容如下：首先對Panorama視圖和Pivot視圖作深入的分析；然后結合開發工具，給出這兩個控件的使用方法；最后從開發者的角度，對這兩個控件進行了比較，給出了設計建議。
Panorama視圖
1. Panorama視圖簡介
Panorama視圖
Panorama視圖是Windows Phone OS 7.0核心體驗的一部分。標準應用存在手機屏幕界限的局限；與標準應用不同，Panorama視圖應用利用一個超出手機屏幕局限的長水平畫布提供一種獨特的方式來瀏覽控件、數據和服務。這些內在的動態應用利用分層的動畫和內容，實現了層與層之間以不同速度平滑過渡，就和視差效果類似。
2. Panorama視圖組件
Panorama視圖的用戶接口由四個類型組成：背景圖片、全景標題、全景區域和全景區域標題，它們有各自獨立的動作邏輯。
Panorama視圖組件
2.1. 背景圖片（Background Image）
背景圖片（Background Image）
背景圖片位于全景應用的底層，由它來給出類似于雜志的體驗。背景圖片通常是一張全景圖，它可能是應用程序最直觀的部分。如何創建一個好的應用體驗，我們在設計過程中，必須牢記以下因素：
◆利用單色的背景，或者是跨度為整個全景的圖片。如果你決定使用圖片，從大小來考慮，你可能會使用JPG圖片，但是Silverlight支持的任何UI圖片類型都是可以接受的。
◆可以使用多個圖片作為背景，但是在任何時刻，只能顯示其中一張。
◆為了確保良好的程序性能，最少的加載時間，并且無需剪裁，圖片大小應該在800 x 480和800 x 1024像素（高x寬）中選擇。
◆對于一個具備4個全景區域的應用，使用16 x 9的屏幕高寬比。
◆為了提高文本的易讀性，使用一個透明的黑色或者白色過濾器。
◆在動態UI元素上，避免使用下拉陰影效果（drop-shadow effects）。
◆使用一定比例的與panning手勢相關的動作，該panning手勢和頂層內容寬度與背景圖片的寬度比例有關。
◆只有背景藝術出現在應用中時，才使用動畫。
◆當用戶的pan手勢超出圖片的寬度時，關閉并且返回可見區域。
2.2. 全景標題（Panorama Title）
全景標題（Panorama Title）
全景標題是整個全景應用的標題。其目的是讓用戶識別該應用，無論是以何種方式進入應用，它都必須是可見的。下面是全景標題的設計建議：
◆使用簡潔的文字或者圖片，例如一個logo作為全景標題。使用多個UI元素，例如一個logo加文字（或者其他UI元素）也是可以接受的。
◆確保字體或者圖片的顏色與整個背景相匹配，而且，標題的可視性不依賴于背景圖片。
◆為了保持一致性體驗，在Start菜單中的應用程序名稱和該標題一致。
◆避免標題動畫，或者動態改變標題的字體。
◆使用一定比例的動作，相對于最頂層內容來說較慢，而相對于底層圖片來說較快。
◆當用戶的pan手勢超出圖片的寬度時，關閉并且返回可見區域。
2.3. 全景區域（Panorama Sections）
全景區域（Panorama Sections）
全景區域是全景應用的組成部分，它封裝了其他控件和內容。以下是全景區域的設計建議：
◆最大化利用四個全景區域，確保全景應用的平滑性能。
◆在列表或者網格內使用垂直滾動是可以接受的，但前提是它處于全景區域內，并且不同時與水平滾動出現。
◆只要全景區域的寬度小于屏幕的寬度，垂直滾動是可以接受的。
◆支持所有自定義控件和標準控件。
◆與手指拖拽的移動比例相同。
◆當用戶導向到一個新的區域時，開啟屏幕動畫。
◆設計全景區域的布局，使得少量的下一個全景區域可見。提供輕微的重疊，使得用戶直覺地利用Pan手勢來切換應用。
◆直到該全景區域有內容要表示時，才顯示該全景區域。
2.4. 全景區域標題（Panorama Section Titles）
全景區域標題（Panorama Section Titles）
全景區域標題是全景區域的可選部分。如果提供標題，考慮下面的設計建議：
◆盡管可以使用圖片，最好使用簡潔的文本。使用多個元素，例如一個圖片加文字（或者其他UI元素）也是可以的。
◆確保全景區域標題不依賴于背景圖片。
◆避免使用標題動畫，因為標題可以移動。
◆跨越整個區域，即使存在多個控件。
◆當用戶導向到一個新的區域時，開啟屏幕動畫。
【編輯推薦】
