2014-8-4 藍藍設計的小編
轉載藍藍設計( www.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供有效的 BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
所有的頁面都應遵循左邊距12px或24px。
內容，標題，標頭以及標頭的圖標也應左對齊，距離左邊界為12px或是24px。
如果有需要進行右對齊，右邊距也應該是12px或是24px。
小貼士： 在調試模式運行應用時，你可以查看由25*25紅色方塊組成的半透明網格。這些方塊是以24px邊距填充頁面的，并且他們之間的距離是12px，這也恰恰體現了windows phone設計方塊的魔力。這些網格可以幫助你迅速找出任何對齊的問題。
當列表的字段與數值成對出現時，應以兩組左對齊的隊列出現，或是像系統聯系人應用中詳細信息頁面的設計那樣，標題在內容的上方。
元素的間距應該在水平和垂直兩個方向上保持一致。建議元素以12px的間距出現，以遵循設計網格。
當使用諸如按鈕、列表項等標準控件時，應該使用系統標準的傾斜效果
不要使用背景、前景或是外框顏色變化
其他控件，不采用動畫或是顏色的變化是允許的
在點擊時，任何信息的顏色變化都是不允許的。
列表項被點擊時，都應以傾斜動畫表明。
除了在選取器中，列表項都不應該有選中狀態。
請在應用中使用一致的字體，列表項的文字至少應有12像素的高度，并且是容易點擊的，同時確保文字在所有角度和大小下的可閱讀性。
背景
不建議使用背景，盡管他們可以傳達品牌并且增加一些對比度。取而代之，你可以給文字前景加一些相關元素。
布局
用文字的大小和顏色建立列表項的層級
列表增強
例如在菜單中，不要使用列表增強的設計。除非他們之間需要有明顯的差別。有條經驗法則：在圓圈里的圖標意味著操作而不在圓圈里的往往只有指示作用。
可滾動內容
如果在頁面中有可滾動的內容，你需要在內容的底端留出95px的距離，這樣內容就不至于貼著頁面的最底端。
例如，下圖就是一個只比可視區域高出一點點的頁面
當用戶滾動到頁面的最底端時， 會出現橡皮筋的效果，內容會被稍稍拉離頁面底部。當滾動動作結束時，內容會重新彈回頁面的邊界。
雖然這樣可行并且看起來還尚可，但是把內容一直伸展到頁面底部并不是完美的。最快解決的辦法就是在頁面底部設置95px的距離，為內容模塊與底部邊界騰出一些空間——不管是針對手機屏幕還是底部的菜單欄。這樣看起來會更順眼。
在系統的聯系人應用中的介紹或是歷史頁面，你都能看到同樣的底邊距。還有在日歷應用中的新建邀請頁面，亦或是IE瀏覽器的設置頁面，也是一樣的處理。說到設置，你可以到系統的設置應用中試試滾動到底部。
樞軸頁面
所有的樞軸使用至少需要兩個頁面
樞軸頁面中的禁用控件
撥動開關
滑動條
地圖控件——除非它們是靜態的（例如縮放和平移手勢應被禁用）
瀏覽器控件——除非它們是靜態的（例如縮放和平移手勢應被禁用）
手勢沖突
提供水平滾動區域或是水平滑動手勢的控件都是不允許在樞軸頁面中應用，因為水平滑動的手勢已被樞軸頁面間的切換占用。
空的樞軸頁面
如果某個樞軸頁面的內容顯示取決于用戶的操作，應該使用占位符文本/圖片來提示用戶。例如，當“未讀郵件”的樞軸頁面中沒有內容時，頁面不該被移走，保留的同時應該顯示簡單的信息來說明當前沒有可用的內容。
更多細節請查看：Windows Phone樞軸頁面設計指南
全景頁面中的禁用控件
撥動開關
滑動條
地圖控件——除非它們是靜態的（例如縮放和平移手勢應被禁用）
瀏覽器控件——除非它們是靜態的（例如縮放和平移手勢應被禁用）
菜單欄
在菜單欄中應當有如刷新，搜索及設置等常用操作
菜單欄里可用的選項可以隨著全景面板變化
全景中應當避免使用浮動按鈕或是盡量少使用
手勢沖突
提供水平滾動區域或是水平滑動手勢的控件都是不允許在全景頁面中應用，因為水平滑動的手勢已被全景頁面間的切換占用。
滾動面板
全景面板的滾動應當選擇水平或垂直方向，不能兩者皆有。
在全景頁面中，不可將所有的面板設置為都可垂直滾動，如果使用場景要求這樣的，樞軸頁面更為合適。
采用多樣化的全景面板（水平與垂直向滾動交替使用）可以提升總體的體驗并且更易瀏覽。
導航
避免使用浮動按鈕。如果必要的話提供一個導航模塊，提供給用戶尋找更深內同的入口
系統提供的圖片應用以及音樂&視頻應用就是全景導航使用的絕佳案例。常規任務的操作應該放在菜單欄里。
可交互內容
全景頁面中盡量少使用可以交互的內容（如表格，搜索框等）
全景頁面中的控件應對用戶有所引導（如應用的縮略圖）
頁面中的用戶任務應少而精，具有針對性并且引人注目
全景中的操作并不是整個應用的全部
面板數量
全景頁面中推薦最多使用五個面板。超過五個則會增加瀏覽的難度而且程序的響應會開始變得不流暢。
背景
全景頁面應采用背景，可以是帶具有品牌元素的紋理圖，各種圖形或者是照片。
理想的情況是具有吸引力且符合全景頁面內容的背景
標題
標題應帶有移動時的動畫效果
全景標題的動畫速度，相對于最頂上有內容的區域慢，如果有背景圖片，也應比它移動的速度慢
二級標題
字體的大小應該比它相應得內容大
標題應使用左對齊方式，不能使用背景，外邊框，下劃線等任何裝飾
唯一例外是在全景下可以使用企業品牌化的元素
參考本篇文章關于文字的章節
位置
只要可能，按鈕都應該放在菜單欄中。
以下情況除外：
全景中“出錯啦！無法找到參考源”之類的指引操作
彈出窗或是需要很多操作的設置頁面
快速操作（例如電話應用中的通話記錄）
關閉按鈕 （Close）
Windows Phone應用中不需要關閉按鈕，關閉操作應由返回的硬鍵負責。
回退按鈕 （Back）
Windows Phone在任何地方都禁用回退按鈕。用戶會通過回退的硬鍵進行操作。
主頁按鈕 （Home）
不應提供主頁按鈕，因為這會引起Windows Phone的導航模式的問題。如果用戶同時使用了這個主頁的按鈕和回退的硬鍵就會導致一個死循環。
標準的選擇器控件應用于選擇一個日期或時間，或者是選擇一個字母。
如果要使用非標準的選擇器，樣式應該遵循系統的設置應用中選擇鈴聲的選擇器。
主要瓦片
開始瓦片不應有圓角或是3D效果。應與開始菜單中的其他的瓦片使用同樣的樣式。
確保使用的標準瓦片的模板
應用的Logo應該遵循模板的設計
在瓦片中不應重復使用Logo
如果應用的名字是圖片里的一部分，那么瓦片上的名字信息應被移除避免出現兩次
避免使用本地化的文字在圖片或是瓦片中
避免使用純白或是純黑的背景，否則這樣的瓦片在亮或暗的背景上無法很好地顯示
避免使用相對時間戳或是日期（比如兩小時前），因為隨著時間推移會變得不太，請使用絕對時間（例如14：00）
次要瓦片
次要瓦片點擊不應鏈到相應的內容頁
次要瓦片中不應有和應用交互的操作（例如“下一首”）
兩個好的例子：新聞類應用會顯示常規更新，股票的應用會有實時的價格顯示。
避免顯示不具時效性的內容
寬瓦片
寬瓦片只能用作顯示經常更新的內容或是提醒（至少每周一次）
寬瓦片必須實時更新。
任何應用都不允許在任何頁面中使用內嵌瀏覽器，應將用戶直接帶到IE瀏覽器中。
會將用戶帶離應用的鏈接都應清楚地告訴用戶將會發生的事情
例外
當需要給用戶呈現認證頁面（例如Facebook或Twitter認證），如果沒有Xauth或是類似的API能夠滿足實現的需求，這個頁面可以允許以內嵌瀏覽器的形式出現在應用中。
請采用標準的Windows Phone的彈窗。彈窗中只有一個按鈕時左對齊，多個時居中對齊。
盡量避免使用自定義彈窗——如果一定要使用，請盡量模仿系統彈窗的行為。
Windows Phone工具包中也有一個允許一定程度自定義的彈窗控件。
頁面中所有的控件在前景與背景間都應采用有效的對比度。
這個對于全景頁面尤為重要，因為全景的圖片經常會影響文字的可讀性。如果你遇到這樣的情況，要么換一張背景，要么給背景上加一個半透明的黑色或灰色的遮罩。
大小寫
除了二級標題用全大寫外，所以的標題都應該用小寫。如果品牌有特殊的需求，請保證在整個app中的大小寫規則是統一的。
自定義/品牌化字體
應用中可適度使用自定義或符合品牌化字體。自定義字體可用在頁面標題或是全景區域標題上，而其他的地方應該使用Segoe WP字體。
請謹慎使用那些看起來特別像Segoe WP的字體，像Arial和Helvetica，因為與Segoe一起混搭使用這些字體看起來特別奇怪。
應用中用于背景或是界面元素的圖片需與應用相符
請保證圖片的比例，確保其不會因為縮放而變形或模糊。有透明度的圖片需要有一定的抗鋸齒屬性以確保在不同顏色的背景上較好地顯示。
對于大部分應用，我們建議只使用WXGA的圖片。WXGA相比之下質量最高，而且能夠自適應不同的分辨率。
隱喻
不要混用圖標的隱喻。用戶的認知是特定的圖標代表特定含義，要么因為他們在設備的其他地方見到用，或者這些圖標通常和某些功能掛鉤。例如：
如果你想表達的語義找不到相對應隱喻的圖標，就自己設計一個，切勿重用其他圖標。
視覺風格
圖標的設計應當遵循Windows Phone的視覺風格——簡單、單色、扁平。
確保你的應用在觸控體驗上最優化
最小字體的大小為15pt
推薦的觸控大小為9mm
最小的觸控大小為7mm
元素中最小的距離為2mm
視覺元素的大小與觸控范圍的比例應控制在60%-100%
元素被觸控后應提供響應
應用中不應有任何拼寫錯誤
重申一下，錯別字問題不僅看上去很糟糕，而且會對你的品牌造成負面影響
應用的設計應當考慮設備的主題和顏色變換，或是設定不受顏色改變的固定的主題
不管使用什么主題，應用的所有元素都應清晰可見而且有一定程度的對比度。
請為不同分辨率定制啟動頁
手機的返回鍵必須讓用戶完成以下的操作：
1. 關閉例如對話框，鍵盤或是選擇清單的臨時界面
2. 回退到上一步
返回鍵的功用在任何情況下都不允許改變，包括在次級瓦片時的使用
次級瓦片的設計用于給用戶展示應用的特殊部分，通過它用戶可以快速簡單地對內容進行瀏覽，而次級瓦片通常并不是這些細節的交互入口。
系統的應用中有許多關于次級瓦片設計的優秀案例。 例如，音樂和視頻應用的專輯，在用戶點擊時就會播放。而次級瓦片的特殊用途在于點擊會將用戶定位到該專輯并且直接播放。
用戶同樣可以將聯系人放置到開始頁面。通過點擊這些次級瓦片用戶可以進入到聯系人的樞軸頁面，查看聯系人信息，或是進行相關的操作。
點擊手機的返回鍵會將用戶帶回啟動頁面。
放置到開始頁面
大頭針圖標應當出現在應用的菜單欄中，表示可以將這個物件或是選擇放置到開始頁面。不得將此圖標用作它意。
點擊并保持的動作也可以出發選項，將物件放置到開始頁面——這是Windows
Phone工具包中的一部分
將應用放置到開始頁面的行為應當由用戶自主控制，或是獲得用戶許可。在未向用戶獲取權限之前，請不要擅自將任何應用或是物體放置在開始頁面。
手機的返回鍵
當用戶通過點擊次級瓦片啟動應用時，點擊手機上的返回按鈕會退出該應用程序（例如，返回開始頁面）。此返回鍵的交互行為在任何情況下都不許更改。
多媒體鏈接
鏈接應當以定制的體驗啟動應用，而非簡單地將用戶帶到啟動默認頁
避免在相機膠卷中使用品牌的元素——用戶需要在毫無視覺干擾的情況下進行分享和編輯。
頁面切換時需有動效，各種效果可以查看Windows Phone工具包中的Silverlight。
十字翻轉——用于不同區域變換的動效
旋轉——用于展現臨時的界面
滑動——用于沒有前進導航的平級操作
傾斜——用于控件被按下的自然反饋
進度條的使用
就像在界面中使用傾斜效果來表示點擊反饋一樣，進度條能夠讓用戶清楚地知道有事情正在發生，這能夠消除用戶對于應用是否正在運行的疑慮。以下是兩種進度條的樣式：確定進度和不確定進度
確定進度條通常用于顯示完成度的比例，例如已下載的大小。不確定進度條更為常用，特別是在不確定此進程的時長時，例如正在等待連接網頁服務的響應時。
不要使用計算機術語，十六進制的錯誤編碼，或是需要深厚計算機知識背景才能看懂的文字。
請使用真實清晰的語氣來描述用戶語言。
請使用友好的、愉快的或是情感化的語言，杜絕出現機械的描述或是對用戶憤怒的指責。
以上只是一些從各種案例分析中得出的常用設計建議，所以做你自己認為對的設計，同時以下有一些值得借鑒的成功經驗：
在任何移動平臺上設計出良好體驗就是要為平臺及其使用習慣定制應用
設計令人信服的Windows Phone界面的第一步就是要花些時間好好用一下系統發布的應用，這能幫助你熟悉Windows Phone平臺的特性和設計語言
多從那些優秀的第三方應用中獲得靈感，我最喜歡的一個應用，Cocktail Flow對設計原則進行了創新，提供了令人印象深刻的體驗。
當你已經準好基礎準備開始進行應用的頁面視覺設計時，請參考一下本篇文章中的指南。這對你避免一些常見的錯誤設計非常有幫助，之前我在設計自己應用的時候也遇到了。