程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> 關於.NET >> Windows 8風格應用開發入門 二十三 App Bar概述及使用規范

Windows 8風格應用開發入門 二十三 App Bar概述及使用規范

編輯:關於.NET

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 中:添加應用欄。

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved