Windows Phone 7 UI設計和互動規範隨筆（1）

當iPhone和Android在市場上所向披靡的時候，搭載Windows Phone 7的手機也終於進入了市場。我打算寫個Windows
Phone 7應用試一下，就隨便翻了翻Windows Phone
7的SDK，SDK寫的很細緻，上線也很及時，要是微軟其他產品的SDK也能這樣就好了。

Windows Phone 7 SDK的許多章節都提示要先閱讀《UI Design and Interaction Guide for Windows Phone 7 v2.0》，這份規範非常細緻，內容並不只是針對使用者體驗的設計，開發人員也能從中瞭解Windows Phone 7的一些能力以及限制。 

在這幾篇隨筆中，我不僅會摘錄一些對我而言比較重要的內容，還會適當的和Android以及iOS作比較。此外，這份規範中有許多內容其實是觸控螢幕使用者體驗的常識，我就不在隨筆裡贅述了。

Metro

Windows Phone 7的UI系統叫做Metro，它的設計構想來源於公用場所的標識（譬如地鐵和機場的路標），標識使用了簡單易懂的圖形、對比鮮明的顏色以及大號字型，所以清晰易辨，匆匆一瞥便知其意。

這就是Metro想要達到的效果，把現實世界中的大家習以為常的隱喻拿到手機介面中，我們在建立Windows Phone 7應用時應當把可用性和UI放到第一位考慮，並且要遵循Metro的設計原則：

• 乾淨、輕量、開放、快速、熱情、活潑
• 關注內容，而不是裝飾
• 軟硬體整合，響應物理按鍵事件
• 手勢操作

開始畫面

Windows Phone 7的開始畫面非常有特色，是由許多小方塊組成的，這個小方塊的名字叫做Tile，每個Tile都由背景圖片、表徵圖和標題組成。

背景圖片是256dpi的jpeg或png圖片，標準尺寸為172×173像素。如果圖片小於標準尺寸，則會被展開，如果大於標準尺寸，則會從左上方開始裁減。

表徵圖的尺寸為63×63像素，如果使用了多張圖片，請注意保持風格的一致性。

如果沒有指定表徵圖和標題，則會顯示系統定義的表徵圖和項目名稱，此外，還可以使用Tile Notification來更新Tile的圖片、標題以及計數器，但計數器的樣式是無法自訂的。

Windows Phone 7的開始畫面上還有一種雙倍寬度的Tile，比如Calendar Tile，很可惜的是，這種雙倍寬度的Tile目前只對微軟、手機廠商和電訊廠商開放。

Windows Phone 7內建了Dark和Light兩套背景以及10套顏色，除此之外，手機製造商和電信電訊廠商還可能會增加主題。

系統級主題是不可定製的，但應用可以重寫自己的主題。建議使用系統主題，沒有特殊理由不要重寫主題。如果應用定製了顏色，就請確保在該顏色各種主題下都可識別。

此外，盡量避免使用白色背景，因為它比較耗電。

通知

Windows Phone 7中的推播通知服務有3種：

• Tile Notification
• Toast Notification
• Raw Notification

Tile Notification屬於系統級通知，由可選的計數器、可選的標題和開發人員指定的背景圖組成。通知會在開始畫面的Tile上體現出來，但要小心使用，頻繁的通知會耗電。

Toast
Notification：同樣屬於系統級通知，當通知到達時，會在螢幕上方顯示10秒鐘，輕觸就會開啟發送通知的應用。通知的左側顯示應用程式圖示，右
側則是標題和子標題，其中標題的字型會加粗顯示。過長的文本會被階段。Toast
Notification應當主要用於點對點通訊。也應當小心使用，過多的Toast通知不僅會耗電，還會使使用者惱怒。支援Toast
Notification的應用必須預設將這一功能關閉，將開啟權交給使用者。

Raw Notification，屬於應用級通知，只能出現在應用內部，由應用自己控制。

Application Bar

Application Bar是最常用任務的操作入口，有點像Windows程式的工具列。它的高度為72像素，最多隻能顯示4個圖形按鈕。

圖形按鈕由文字和表徵圖組成，二者缺一不可。表徵圖應該使用現實世界的隱喻來設計，清晰明確，易於理解。表徵圖的尺寸為48×48像素（其他尺寸會被縮放
到此尺寸），建議使用白色作為前景色彩，背景色保持透明，儲存為包含alpha通道的png檔案。系統會根據當前主題自動著色，並為表徵圖加上圓環，所以設計
表徵圖時不需要考慮圓環。安裝了Windows Phone 7開發工具之後，可以在C:\Program Files\Microsoft
SDKs\Windows Phone\v7.0\Icons中找到一些圖表示例。

除了圖形按鈕之外，Application Bar還會顯示一個省略符號，點擊省略符號之後會開啟Application
Bar菜單。菜單為那些很難用表徵圖描述或者不常用的功能提供入口。菜單中最多可以包含5個功能表項目，每個功能表項目的文字長度為14-20個英文字元，過長的文
字會被截斷，設計時要謹記“少即是多”，精簡文字。

Application Bar的透明度可以自由調節，建議值為0、0.5和1。當透明度小於1時，Application Bar會覆蓋在頁面之上，等於1時，頁面尺寸會變化，為Applicaiton Bar騰出空間。

對於Application Bar，規範中的建議是能不用就不用，給使用者過多的選項並不見得是一件好事情。

這裡再順便提一下，Android也有類似的機制，就是菜單，而且Android手機還都配備了一個用於顯示菜單的物理菜單鍵，這本來是一個很好的
設計，但Android卻沒有一種機制去提示使用者當前頁面中包含菜單，以至於我現在嘗試一個新應用，每每跳轉到一個新的頁面，都要試著按一下菜單鍵，看看
有什麼選項，這個體驗糟透了。

控制項

使用Silverlight開發Windows Phone 7應用時，可以使用內建的許多控制項進行快速開發，這裡簡單的介紹一下部分控制項。

Progress indicator是一個系統級控制項，它有兩種模式：

• Determinate：進度條從開始增長到結束。
• Indeterminate：進度條一直迴圈，直到任務完成。

Checkbox支援中間狀態，但不建議使用，因為中間狀態會使使用者感到迷惑。

Hyperlink應該僅用於導航以及顯示剩餘文字，不應該當作Button來用。

Image控制項不支援GIF，在Silverlight裡就是這樣的。

可以在頁面中添加多個MediaElement控制項，但同時只能有一個處於活動狀態。不要用MediaElement控制項來播放效果音或者全屏播放，有可能會中斷。

MultiScaleImage控制項沒有內建任何手勢功能，需要開發人員自己實現。

Panorama控制項的背景可以是單色或者圖片，尺寸介乎480×800像素到1024×800像素之間，尺寸太大的圖片會影響效能。控制項中每一個
Section的比例都是16:9。Panorama控制項的Title可以是文字，也可以是圖片，但要和應用的Tile標題保持一致。Panaorma控
件的Section標題可以是文字或圖片。Section中的縮圖如果不加文字描述的話，可以一行放置兩個，並且建議一行最多隻放置兩個。

Pivot控制項用來顯示簡單類型的資料，不要將它嵌套在Pivot控制項中，也不要嵌套在Panorama控制項中。此外，Pivot控制項的頭部高度是固定不可變的。

Slider控制項用來在某一範圍中選擇值，有橫向和縱向兩種方向，但建議使用橫向。

按鈕的文字最好是簡單明確的動詞。

對話方塊中的按鈕，表示正面意義的應該位於左側（比如“確定”、“儲存”）。

在多層嵌套控制項時，Canvas的效能要優於Grid。但Grid支援伸縮和旋轉，而Canvas不支援。所以開發時請綜合頁面內容和效能加以考慮。

建立自訂控制項時也要注意遵守Metro原則。

順便談一下設定頁面，Windows Phone 7有專門的系統設定頁面，但開發人員無法在系統設定中添加應用的設定頁面，應用的設定頁面只能添加在應用中。

設計設定頁面的目標是使其保持簡短清晰，避免建立多於兩頁的設定選項，否則使用者會懷疑自己進入了另一個應用。

應用設定頁面的標題必須和系統級設定頁面風格一致。

從網路中擷取資料的應用必須提供禁用連網的選項。

使用者對設定頁面的更改應該是及時生效的，也就是說要避免使用“完成”、“確定”或其他形式的確認機制。

原文發佈於coding.windstyle.cn，歡迎訪問、訂閱並和我交流。