做最酷的Windows Phone應用

        應用程式的UI至關重要，應用程式開發者與使用者的接觸，始于UI也止于UI。使用者界面就是我們的臉面。我們都想把最完美的UI呈現在使用者面前，那麼我們到底該怎麼做呢？做了這麼久的WindowsPhone相關工作，積累了些許的感悟，下面就和大家談談對如何做出最酷的WindowsPhone應用的一些體會。

         WindowsPhone 是一個全新的智能手機作業系統，它有着自己獨特的系統UI風格和操作要求，是以一個優秀的WindowsPhone應用至少應該從以下9個方面着力。

一   Tile

         Tile通常被稱為窗格，它是WindowPhones7系統的一個獨特設計。應用程式的Tile可以PIN到主界面，并在上面顯示圖檔，數字或者文字資訊。基于Metro簡潔性的要求，Tile至少應該是純色的方塊，在此基礎上，我們可以添加背景圖檔，數字和文字資訊，但不可過分修飾（如圖1左側所示）。例如，3D字型，漸變色，圓角都是不可取的（如圖1右側所示）。除此之外，Tile不能是沒有含義的圖檔，應該是應用程式相關的一個标志。由于WindowsPhone系統主題有“深”和“淺”兩種，是以Tile也應該是在這兩種主題下都能清晰顯示的，這也意味着白底黑景的Tile不是好的設計。

<a target="_blank" href="http://blog.51cto.com/attachment/201110/195716458.png"></a>

圖一

二   定制啟動頁

         啟動頁是應用程式啟動時顯示的第一個頁面，也是一個可以修改的頁面。啟動頁是位于工程目錄下的一個名為SplashScreenImage.jpg的圖檔。隻要用自己的圖檔替換掉系統預設圖檔，并使用相同的名字，當應用程式在此啟動時，就可以在啟動頁看到自己的圖檔了（如圖二）。另外，啟動頁面停留的時間不可太長，應在5秒内結束，轉入應用程式頁面。否則的話，使用者有可能會用腳投票，關掉你的應用。

<a target="_blank" href="http://blog.51cto.com/attachment/201110/195929717.png"></a>

圖二

三  布局對齊

         在應用程式界面中的文字内容，很多時候會是一種多行布局模式，在這種布局下要求螢幕上所有的文字左對齊，每行的第一個文字元素距離螢幕邊緣24像素（如圖三所示）。這種布局的典型用例就是全景視圖和樞軸視圖。

圖三

四  使用深淺兩主題

         幕的文字配色應該與系統的主題背景“深”或者“淺”相适應（如圖四所示）。例如黑色字型在“深”主題背景下看不清，白色字型在“淺”主題背景下也會不清晰（如圖四所示）.總之，你要管理好你的主題，使其與系統的色彩規範相适應。

<a target="_blank" href="http://blog.51cto.com/attachment/201110/200257719.png"></a>

圖四

五  觸碰

         相對于PC螢幕，手機的螢幕要小得多，可很多時候，我們總想把大量的内容放進去，其結果就是圖檔，文字尺寸都比較小，且間隔也很小。這就會産生一個問題：當你用手指點選某一進制素的時候，很可能會觸碰到與其相鄰的其他元素。為了解決這一問題，設計出具有更好使用者體驗的UI,我們建議：

·         字型最小15pt.

·         建議觸碰區域9mm以上

·         最小觸碰區域7mm以上

·         元素間最小間距2mm

·         視覺目标尺寸是觸碰目标大小60%-100%

·         發生觸碰時提供回報

<a target="_blank" href="http://blog.51cto.com/attachment/201110/200634716.png"></a>

圖五

六  回報與互動

         好的使用者體驗，要求應用對使用者的操作提供及時的回報與互動。例如，當應用在執行大數量的任務時，應該在界面給使用者以提示，可以是一個進度條或者是不斷變化的數字等（如圖六所示）。這裡需要提一下，在WindowsPhone下的進度條有兩種動畫效果，一種是漸變式的，另一種是循環滾動，大家可以根據自己的需求選擇合适的動畫效果。

<a target="_blank" href="http://blog.51cto.com/attachment/201110/200741616.png"></a>

圖六

七  控件

         WindowsPhone為大家提供了很多好用的控件，可如果使用不當的話，也會産生反效果。例如使用Silverlight控件，盡量避免使用内嵌Web控件，當應用必須内嵌Web内容時，關閉平移和縮放等觸碰功能，確定内容完全可讀。在全景視圖和樞軸視圖中，避免使用開關控件，避免使用遊标控件，因為這容易導緻手勢操作沖突。

         此外，為了降低使用者在向TextBox輸入内容時的複雜度，WindowsPhone針對不同的輸入狀态提供了有針對性的螢幕鍵盤。例如針對數字輸入的鍵盤針對撥号輸入的鍵盤，針對登入輸入的鍵盤等。在輸入時彈出哪種類型的鍵盤，由TextBox的InputScope屬性決定。需要注意的是，螢幕鍵盤可以自動彈出，但建議僅當頁面中不多于兩個文本框時才自動彈出，且要避免擋住螢幕的其他元素（如圖七所示）。

<a target="_blank" href="http://blog.51cto.com/attachment/201110/200855417.png"></a>

圖七.A

<a target="_blank" href="http://blog.51cto.com/attachment/201110/201057541.png"></a>

圖七.B

八  全景視圖

         Panorama控件是WindowsPhone中一個非常重要的控件，提供跨越多屏的全景式視圖(如圖八所示)。Panorama控件可以設定背景，要求背景480×800像素到1024×800像素之間，太小會被拉伸，太大會被自動裁切。此外，背景圖檔要與主題内容相适應，背景太絢麗會過分吸引使用者注意，起到喧賓奪主的反效果，背景顔色與主題顔色太接近，會掩蓋主題内容。Panorama的每一個Section比例16:9，Section中縮略圖如果不加文字描述的話，可以一行放置兩個，并且建議一行最多隻放置兩個。Panorama的屏數最好不要超過4屏。Panorama的每一屏的内容可以超出螢幕範圍，但一定要慎重使用，否則會呈現很不好的使用者體驗。

圖八.A

<a href="http://blog.51cto.com/attachment/201110/231630517.jpg" target="_blank"></a>

 圖八.B

九  導航

         在做WindowsPhone開發時，我們應該盡量利用手機硬體本身給我們提供的資源，減少開發複雜度。就應用的導航操作來說，所有的WindowsPhone都有一個“傳回”鍵，當我們需要從一個頁面傳回之前的頁面時，直接操作“傳回”鍵就可以了。如果目前頁面是應用的第一個頁面，操作“傳回”鍵之後，我們應該退出應用。我們不需要在自己的應用中添加“傳回”圖示，用以提供傳回上一頁功能，這實際是浪費資源（如圖九所示）。同時，除了購物車等複雜場景，很少應用真正需要使用Home鍵(如圖九所示)。

<a target="_blank" href="http://blog.51cto.com/attachment/201110/201915933.png"></a>

圖九

         說了這麼多算是抛磚引玉，開發者還是要結合自己的産品，去實際驗證一下如何做一個最酷的應用。願應用開發者在Windows Phone平台上開發出最酷的應用，和最精彩的使用者體驗。

本文轉自 

飛雁 51CTO部落格，原文連結：http://blog.51cto.com/felixyan/690374 ，如需轉載請自行聯系原作者