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