Windows Phone 7 UI設計初學者入門
51CTO在Windows Phone 7 UI設計理念這篇文章中，介紹了當使用Windows Phone Developer Tools 來開發(fā)Windows Phone 7的應用程序時，不管是使用WPDT Beta開發(fā)Windows Phone應用程序，還是開發(fā)Windows Phone上的Silverlight應用程序和XNA 游戲程序，一個良好的用戶界面（User Interface，UI）是開發(fā)Windows Phone應用程序的第一關。
我們從未停止過追求美麗事物的步伐，也從未停止過設計出更美、更炫的產品出來。拿微軟來說，從Dos6.2到Windows 3.1、Windows 98、Windows XP以及2009年發(fā)布的Windows 7，用戶界面越來越美觀、漂亮，顏色越來越豐富，操作越來越方便，功能也越來越強大。這是微軟不斷追求用戶體驗的結果。在這篇文章中，將給大家介紹Windows Phone 7 UI設計中的幾個重要問題，分成三個部分來介紹：Windows Phone 7 UI設計特色、Windows Phone 7 UI設計原則、Windows Phone 7應用程序控件。
Windows Phone 7 UI設計特點
在介紹Windows Phone 7 UI設計特色之前，簡單介紹一下UI設計及特點。
UI設計 (UI Design)是與交互設計(interactive design)、可用性研究(usability research)、人力因素(human factors)、信息結構工程師(information architect)相互聯(lián)系又各有側重的一些概念和職業(yè)，這里我們不去深究。UI設計著重體現(xiàn)人機交互、操作邏輯和界面美觀三個方面。
UI設計更重要的是要理解用戶與程序的關系。一個良好的用戶界面關注的是用戶目標的實現(xiàn)，包括視覺元素與功能操作在內的所有東西都需要完整一致。
Windows Phone 7 中的UI設計也著重體現(xiàn)人機交換、操作邏輯和界面美觀三個方面，具體說來有以下幾個特點：
特點一：多種輸入方式，為觸摸而設計
Windows Phone 7的用戶界面有四種輸入方式：觸摸手勢、虛擬鍵盤、Windows Phone 7的硬件按鈕和傳感器。觸摸手勢是單指或者多個指頭在觸摸屏上進行一些移動。觸摸手勢是用戶和Windows Phone 7進行交互的主要方式，支持的觸摸有兩種：單點觸摸和多點觸摸，其中單點觸摸的手勢有：單擊、雙擊、平移、劃動、長按；多點觸摸的手勢有：縮放。
特點二：三種屏幕方向
Windows Phone 7支持三種類型的屏幕方向：豎屏，向左的橫屏和向右的橫屏。向左橫屏和向右橫屏之間的區(qū)別是應用程序工具欄和系統(tǒng)托盤的方位不一樣。應用程序不能指定只是支持向左橫屏或者向右橫屏的應用程序工具欄和系統(tǒng)托盤的方位，需要兩種都同時支持。這可能是和在計算機上運行的程序UI很大不同的一個方面。
特點三：獨特的頁面框架及布局
Windows Phone 7的應用程序是基于 Silverlight 的頁面瀏覽模式，用戶可以在不同內容的屏幕上相互導向和瀏覽。Windows Phone 7的頁面框架及布局如下圖1所示：
圖1 Windows Phone 7頁面框架及布局
在圖1中，Windows Phone 7的頁面中，包含了一個稱為Frame Control（框架）的頂層容器控件，其可以承載 Page Control（頁面）。在應用程序中，頁面可以實現(xiàn)內容的分離。Windows Phone 7提供框架和頁面類，以方便導航到獨立的內容章節(jié)中。其實這類似于ASP.Net應用程序中的Master Page（母版頁）。
特點四：使用主題
這個特點類似于ASP.Net應用程序中的主題，使用主題的優(yōu)點是保持與 Metro 設計原則的一致性和兼容性，能確保用戶界面元素以及控件呈現(xiàn)的一致性，防止不和諧的用戶體驗開發(fā)人員可以使用主題，也可以在應用程序級別使用代碼來改變主題。
Windows Phone 7 UI設計原則
界面設計是一個復雜的有不同學科參與的工程，認知心理學、設計學、語言學等在此都扮演著重要的角色。用戶界面設計的三大原則是：置界面于用戶的控制之下；減少用戶的記憶負擔；保持界面的一致性。結合Windows Phone 7UI設計的特點，在Windows Phone 7 UI設計中，應遵循以下原則：
原則一：支持多種輸入，包括觸摸、虛擬鍵盤、按鈕和傳感器
Windows Phone 7的用戶界面是為了觸摸交互而設計的，所有的導航通過一系列手指手勢的移動組合而完成。在使用觸摸時就需要設計點擊區(qū)域的大小，每一個可以被觸摸的 UI 元素應該可以被手指方便的點擊，如下圖2所示：
圖2 Windows Phone 7的輸入設計
原則二：統(tǒng)一的配色、頁面框架和整套文字
在計算機上的程序中需要使用統(tǒng)一的配色、頁面框架和文字設置，在Windows Phone 7設計中一樣要遵循這一原則。在Windows Phone 7的頁面設計中，考慮容器控件、導航控件和頁面布局的一致性，考慮列表的多種展現(xiàn)形式，如以列表顯示或者拆分屏幕以形象的圖片顯示。
原則三：使用Metro主題控件作為交互元素
推薦您在應用程序中使用的標準Metro主題控件。這些控件已經為支持觸摸交互并基于Windows Phone 7 UI設計及人機交互指南手冊做了優(yōu)化調整。Metro主題控件設計UI如下圖3所示：
圖3 Metro 主題
除此之外，在《Windows Phone 7 UI設計及人機交換指南V1.0》中提到了一下三點需要注意的：
◆要理解適當的利用語音語調可以創(chuàng)建一個更具吸引力的終端用戶體驗.開發(fā)人員應該精心開發(fā)應用程序，來提供清晰友好的用戶界面。
◆良好定義的標準化準則將使你的應用程序一致性，放置最終用戶在使用時有粗糙的體驗。
◆UI設計中必須使用正確的標點符號，同樣，在你的應用程序中要保持一致。
Windows Phone 7應用程序控件
Windows Phone 7應用程序開發(fā)的控件包括兩類：Windows Phone 7 應用程序控件和Windows Phone 7 系統(tǒng)控件。Windows Phone 7 應用的程序控件如下圖4中左圖所示：
圖4 Windows Phone 7標準控件與VS.Net標準控件
上圖中右側是VS.Net所帶的標準控件，由上圖比較我們可以看出：Windows Phone 7的控件比VS.Net標準控件要少，但是也有一些手機開發(fā)中使用的一些很有特點的控件：如Ellipse（橢圓）、Progress Bar（進度條）、Slider（滑動條）、Border（邊框）。
除了應用控件，還有一些控件也屬于Windows Phone 7的控件，這些控件是系統(tǒng)控件，包括：系統(tǒng)托盤和應用工具欄、上下文菜單、WP消息通知、進度顯示器。
小結
在Windows Phone 7UI設計過程中，我們一方面需要考慮屏幕的分辨率，另一方面還要考慮整體界面的風格，所幸Windows Phone 7提供了主題和metro標準控件來幫助我們設計風格統(tǒng)一并且支持個性化的UI。在UI設計的過程中，可以通過WPDT Beta以所見即所得的方式來進行UI的設計，還可以把UI設計與數據分離。
【編輯推薦】
