Windows Phone 8 擁有獨特的設計語言,遵循其 UI 設計指南能讓應用體驗更加流暢、一致。本文整理自微軟內部資源(WPDPS),涵蓋了佈局對齊、元素間距、觸控回饋、列表設計、樞軸與全景控件等核心規範,是快速入門 WP 設計的絕佳參考。
所有頁面應遵循左邊距 12px 或 24px 的基準。內容、標題、頁首及圖標皆需左對齊,距左邊界 12px 或 24px;若需右對齊,右邊距同樣為 12px 或 24px。這套網格系統源於 24px 基準單位,輔以 12px 間距,構成了 WP 設計的「魔力方塊」。
小貼士:在調試模式下,可開啟由 25×25 紅色方塊組成的半透明網格,快速檢視對齊問題。
當標籤與數值成對出現時,建議採用兩組左對齊隊列,或參考系統「通訊錄」詳細頁:標題置於內容上方。
水平與垂直方向的元素間距應保持一致,建議使用 12px 間距以符合設計網格。

不建議使用大面積背景圖,雖能傳達品牌與對比,但易干擾閱讀。替代方案:為文字前景添加相關裝飾元素。
利用文字大小與顏色建立層級關係。
選單中避免使用「列表增強」設計(如圓形圖標容器),除非項目間需明顯區分。經驗法則:圓圈內的圖標代表「操作」,圓圈外的僅作「指示」。

頁面底部應預留 95px 空白,避免內容貼邊。系統原生應用(通訊錄、日曆、IE 設定)皆遵循此規則,滾動到底時會出現橡皮筋效果,內容略微回彈,預留空白可使視覺更舒適。



樞軸至少包含兩個頁面。
樞軸頁面內不可放置:撥動開關、滑動條、地圖控件(除非靜態)、瀏覽器控件(除非靜態)。
水平滾動區域或水平滑動手勢的控件禁止用於樞軸頁面,因水平滑動已被頁面切換佔用。

若頁面內容依賴用戶操作(如「未讀郵件」),空狀態下不應移除頁面,而應顯示佔位符文字/圖片提示「暫無內容」。

同樣禁止:撥動開關、滑動條、非靜態地圖/瀏覽器控件。
同樣禁止水平滾動/滑動控件。
單一全景面板僅允許水平或垂直單向滾動,不可雙向。若需大量垂直滾動面板,應改用樞軸。交替使用水平與垂直滾動面板可提升瀏覽體驗。

避免浮動按鈕;必要時提供導航模組作為深層內容入口。系統「相片」與「音樂+影片」應用是優秀範例,常規操作置於應用程式列。