萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 程式設計 >  >> 網頁製作 >> 互動設計

Windows Phone 8 UI 設計指南:打造優質應用的關鍵規範

Windows Phone 8 擁有獨特的設計語言,遵循其 UI 設計指南能讓應用體驗更加流暢、一致。本文整理自微軟內部資源(WPDPS),涵蓋了佈局對齊、元素間距、觸控回饋、列表設計、樞軸與全景控件等核心規範,是快速入門 WP 設計的絕佳參考。

1. 元素對齊與邊距

所有頁面應遵循左邊距 12px 或 24px 的基準。內容、標題、頁首及圖標皆需左對齊,距左邊界 12px 或 24px;若需右對齊,右邊距同樣為 12px 或 24px。這套網格系統源於 24px 基準單位,輔以 12px 間距,構成了 WP 設計的「魔力方塊」。

小貼士:在調試模式下,可開啟由 25×25 紅色方塊組成的半透明網格,快速檢視對齊問題。

當標籤與數值成對出現時,建議採用兩組左對齊隊列,或參考系統「通訊錄」詳細頁:標題置於內容上方。

2. 元素間距

水平與垂直方向的元素間距應保持一致,建議使用 12px 間距以符合設計網格。

3. 控制點擊響應

  • 標準控件(按鈕、列表項)必須使用系統標準的傾斜效果。
  • 不可透過背景、前景或邊框顏色變化來表示點擊狀態。
  • 非標準控件允許無動畫或顏色變化。
  • 點擊時,任何文字資訊的顏色變更均被禁止。

4. 列表設計

  • 列表項被點擊時,皆以傾斜動畫回饋。
  • 除選取器外,列表項不應有「選中狀態」。
  • 全應用使用一致字體,列表文字高度至少 12px,確保可點擊性與可讀性。

背景

不建議使用大面積背景圖,雖能傳達品牌與對比,但易干擾閱讀。替代方案:為文字前景添加相關裝飾元素。

佈局

利用文字大小與顏色建立層級關係。

列表增強

選單中避免使用「列表增強」設計(如圓形圖標容器),除非項目間需明顯區分。經驗法則:圓圈內的圖標代表「操作」,圓圈外的僅作「指示」。

可滾動內容

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

5. 樞軸控件

頁面數量

樞軸至少包含兩個頁面。

禁用控件

樞軸頁面內不可放置:撥動開關、滑動條、地圖控件(除非靜態)、瀏覽器控件(除非靜態)。

手勢衝突

水平滾動區域或水平滑動手勢的控件禁止用於樞軸頁面,因水平滑動已被頁面切換佔用。

空頁面處理

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

6. 全景控件

禁用控件

同樣禁止:撥動開關、滑動條、非靜態地圖/瀏覽器控件。

應用程式列

  • 應包含「重新整理」、「搜尋」、「設定」等常用操作。
  • 選項可隨全景面板變化。
  • 避免使用浮動按鈕,或極少使用。

手勢衝突

同樣禁止水平滾動/滑動控件。

滾動面板

單一全景面板僅允許水平或垂直單向滾動,不可雙向。若需大量垂直滾動面板,應改用樞軸。交替使用水平與垂直滾動面板可提升瀏覽體驗。

導航

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

copyright © 萬盛學電腦網 all rights reserved