App Bar概述
Windows 8 Store應用中的App Bar(應用程序工具欄)起到的作用和Windows Phone中AppBar一樣。我們可以向用戶提供各種操作接口,實現導航或者觸發命令等。
AppBar一 般默認是隱藏的,也可以設置為始終可見。我們可以通過清掃屏幕上邊緣或下邊緣時顯示AppBar, AppBar被點擊之後或失去焦點後隱藏,當然我們也可以通過編程方式控制AppBar顯示或隱藏。
Windows 8 Store應用中通常包含兩種AppBar:
1)底部AppBar
底部AppBar通常 用於觸發命令,並且全局命令在右側,上下文命令在左側。當選中上下文命令的項目時,可以通過編程 方式調用。如果有單個常用命令,可以將其放置在畫布上。菜單彈出可以用於顯示相關的命令組。
2)頂部AppBar
頂部AppBar用於沉浸式視圖中的導航,例如:添加返回按鈕或標題等, 也可以用於在頁面或視圖間進行切換。
App Bar命令組織步驟
Step 1:組織命令
確定所有應用命令,然後按照方案或位置組織它們。
我們需要考 慮的問題包括:
1)什麼命令應該顯示在整個應用中;
2)什麼命令應該只顯示在某些頁 面上;
3)什麼命令應該使用超級按鈕或轉至設置;
下面是我們浏覽一個餐館應用時可 能用到的命令列表:
Step 2:創建命令集
我們需要將相似的命令分組到命令集。AppBar將命令集顯示為一個單元 ,每個命令集之間有一個分隔符。
我們需要考慮的問題包括:
1)哪些命令在功能上相 關;
2)哪些命令在功能上相關;
3)做出選擇時應該顯示哪些命令;
將上面的 餐館應用中命令分組到命令集:
Step 3:創建菜單
我們需要考慮命令集是否在一個命令菜單中更合適。
我們需要考 慮的問題包括:
1)AppBar是否太擁擠或存在太多命令而無法適應
2)是否存在一個集可 以從更長的標簽或互動控件中獲益
命令菜單給我們帶來的好處是:允許使用更少的空間提供更 多選項,並包含互動控件。
上圖中“排序”菜單彈出一個簡單列表,以方便選擇選項,“篩選”菜單彈出一組控件,允 許用戶按照更復雜的條件篩選項目。
Step 4:將命令添加到AppBar
我們可以通過多種方 式將命令放在AppBar中。但是需要盡可能遵守一些命令放置規則:
1)可預測性:盡可能在應用 的所有視圖上使用一致的互動和命令放置;
2)人體工程學:考慮具體命令的放置能如何改進操 作命令的速度或提高易用性;
3)美學:限制命令的數量,避免AppBar看起來太復雜。選擇易於 理解或預測的圖標。保持文本標簽簡短;
另外還有一個放置命令的常用技巧:
1)將永 久性的命令放在右側
首先將默認命令放在AppBar右側。若只有少量命令,AppBar可能僅在右側 有命令。
2)使用邊緣
如果有大量的命令,可以將不同的命令集分開在左側或右側,來 平衡AppBar並讓命令更容易訪問。
3)顯示/隱藏已禁用的命令
與某些環境不相關的命令 應該隱藏。當它們顯示時,不應該破環持久性命令的排序。
4)插入選擇命令
用戶執行 選擇後出現的命令會出現在最左側,任何在此處的命令會向右側滑動。
Step 5:為常用命令使用標准位置
一些命令是常用的,會在許多應用中出現,因此我們需要 建立一致性。
我們在決定將常用命令放在AppBar的何處時應該遵循以下原則:
1)選擇 命令
和我們的選擇相關的命令始終顯示在最左側,無論它們是在選擇時顯示的上下文命令還是 會影響選擇的命令。
2)新建命令
如果應用調用“新建”命令來創建(添加、創建、撰寫)任何新類型的實體, 將該命令放在AppBar的右邊。這會為每個“新建”命令提供一致的位置(無論具體的應用或上下文是什 麼),並使用縮略圖來方便訪問。
3)刪除命令
如果我們的應用將要管理的各個實體可能位於特定應用程序(比如郵件或相機 應用)的外部,可以使用“刪除/新建”。 “刪除/新建”應該始終按此順序顯示。
4)移除命令
如果你的應用將管理某個列表,如代辦事項列表、一個天氣應用中的城 市列表或一個添加到書簽中的餐館列表,可以使用“移除/添加”。“移除”應該始終顯示在“添加” 的左側。
5)清除命令
如果你正在對所有可能的項執行破壞性操作 ,可以使用“清除”。使用命令標簽明確表明命令的操作對象,如“清除選擇”。
App Bar最佳實踐
1)一定要以同樣的方式放置命令並按命令集對它們進行組織;
2)一定要將上下文命令放在AppBar上,在不更改視圖的情況下選擇某個項目時, 以編程方式 顯示AppBar;
3)當命令太多時時,一定要使用菜單;
4)一定要考慮AppBar在貼靠視圖 和豎屏視圖下的呈現;
5)一定將AppBar設計為水平滾動;
6)一定要使用命令、菜單和 彈出窗口的默認樣式;
7)不要將關鍵命令(用戶完成任務必不可少的命令)放在AppBar上;
8)不要在AppBar中放置登錄、注銷或其他帳戶管理命令;
9)不要將用於文本的剪貼板 命令放在AppBar上;
關於App Bar更多詳細信息可參考MSDN 中:添加應用欄。