首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> .NET 網頁程式設計 >> 關於.NET

Windows 8 風格應用開發入門:應用程式列概觀與設計規範

     編輯:關於.NET

AppBar(應用程式列)提供導航、命令與工具的隱藏式容器,支援頂部/底部/雙列模式,遵循嚴格的命令組織與放置規範。

AppBar 核心特性

  • 預設隱藏,右鍵/Win+Z/邊緣滑動顯示
  • 可程式化控制顯示/隱藏(IsOpen、IsSticky)
  • 分為底部命令列與頂部導航列兩種角色

兩種 AppBar 角色定位

類型位置用途命令分佈
底部 AppBar螢幕底部觸發命令、操作動作全域命令右側,情境命令左側
頂部 AppBar螢幕頂部沉浸式導航、視圖切換返回鍵、標題、分頁切換

AppBar 角色示意

命令組織五步驟法

命令組織步驟

Step 1:盤點所有命令

依方案/位置分類:全域顯示、特定頁面、超級按鈕/設定代管。

餐廳應用命令清單

Step 2:建立命令集

功能相關命令分組,組間以分隔符區隔。

命令分組範例

Step 3:建立選單

命令過多時使用彈出選單,支援較長標籤與互動控件。

選單範例:排序/篩選

Step 4:AppBar 命令放置規則

  • 可預測性:所有視圖一致的互動與放置
  • 人因工程:優化操作速度與易用性
  • 美學:限制數量、易懂圖示、簡短標籤

常用技巧:

  1. 永久命令放右側
  2. 大量命令利用左右邊緣平衡
  3. 無關命令隱藏,不破壞永久命令排序
  4. 選取命令插入最左側,其他右移

命令放置技巧

Step 5:常用命令標準位置

選取命令最左側 新建命令最右側 刪除/新建順序 移除/添加順序 清除命令標籤

最佳實踐 9 原則

  1. 命令放置一致、按命令集組織
  2. 情境命令程式化顯示 AppBar
  3. 命令過多使用選單
  4. 考慮貼靠/縱向視圖呈現
  5. 設計為水平捲動
  6. 使用預設命令/選單/彈出視窗樣式
  7. 不放置關鍵任務命令
  8. 不放置登入/登出/帳號管理
  9. 不放置剪貼簿命令

參考資源:MSDN「添加應用欄」、AppBar 控件範例。下一章將示範 AppBar 程式碼實作。

  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved