Win8應用開發 入門篇(三) UX互動導航模式

2021-09-06 21:07:49 字數 1714 閱讀 7978

在本文中

組織 windows 應用商店應用中的內容,以便使用者可以輕鬆而直觀地進行導航。使用正確的導航模式可幫助你限制永久位於螢幕上的控制項。這樣使用者就可以將精力集中在當前內容上。

windows 應用商店應用中的導航基於兩種模式:分層模式和平面模式。應用可以使用其中乙個或者使用這兩種模式的組合。

此模式可使 windows 應用商店應用變得快速而流暢。它最適合具有大量內容或許多不同部分內容供使用者瀏覽的應用。 大多數 windows 應用商店應用都使用分層導航系統。

中心頁是使用者到應用的 入口點。此處的內容 以水平方式顯示在乙個豐富的 平移檢視中,這樣使用者 一眼就能看見新增內容和 可用功能。

中心由不同 別的內容構成,每個類別都對映到 應用的部分頁中。

部分頁是應用的第二個 層級。此處的內容可以採用 任何形式顯示,這些形式必須能夠 最好地表示該方案及該部分所包含 的內容。

部分頁由各個專案組 成,每個專案都有它自己 的詳細資訊頁。 部分頁還可以利用 分組和全景風格 布局。

詳細資訊頁是應用的第三個 層級。此處顯示了 各個專案的詳細資訊, 各項目的格式可能會根據 內容的特殊型別不同而 有很大的不同。

平面模式

許多 windows 應用商店應用都使用平面導航模式。諸如遊戲、瀏覽器或文件建立等應用使用此模式讓使用者可以在所有駐留在同一分層級別的頁面、選項卡或模式之間移動。與分層模式不同,通常沒有永久性的後退按鈕或導航堆疊,因此在頁面之間進行移動通常通過內容(如下面第乙個示例)或導航欄(如下面第二個示例)中的直接鏈結來完成。

當核心方案涉及在少量頁面或選項卡之間快速切換時,最適合使用此模式,例如在像 internet explorer、電子書和遊戲這樣的 web 瀏覽器應用中。

頁首和「後退」按鈕

頁首可對當前頁面進行標記,有助於查詢頁面。 使用「後退」按鈕可以快速返回你所在的 位置。

部分或類別標籤

這些標籤可以將使用者移動到內容的不同部分或類別。

其他目標你可以使用磁貼、箭頭、按鈕、搜尋結果或其他自定義目標作為導航元素。在某些遊戲中,你可以找到使用有趣形狀的導航元素示例。

通過從螢幕的頂部或底部邊緣輕掃,使用者可以顯示應用欄。頂部應用欄也稱為導航欄。你可以在頂部應用欄中放置導航元素,這樣可以騰出更多螢幕區域顯示應用中的內容。或者,如果使用者在使用你的應用時經常需要一些導航元素,則可以將它們放在畫布上,條件是將它們放在畫布上不會對應用體驗造成負面影響。你決定導航元素是在頂部欄中還是在畫布上。

通常,部分或類別標籤在導航欄中,如 hulu plus 中那樣。

許多應用使用頂部應用欄提供快捷方式。例如,在 espn 應用中,使用者通過單擊頂部應用欄中部分標籤上方的記分板可以導航到 gamecast 頁面。

頂部應用欄還可以為使用者提供目標頁面上內容的預覽。在以下購物應用示例中,可以在進入產品詳細資訊頁面前,在應用欄中預覽產品影象。

我們建議你以創新方式使用應用欄提高你的設計水平。在 fresh paint 中,頂部應用欄超越其專用導航功能,還用作繪畫工具箱。

語義式縮放可以快速順暢地 掃瞄和四處移動檢視, 尤其是當檢視為很長的 平移列表時。

例如,在 great british chefs 應用中,中心頁面有乙個焦點部分,後跟五個視覺豐富、可水平平移的部分。該應用使用語義式縮放,可使使用者更輕鬆地跳轉到五個部分中的每乙個。

Win8 應用開發介紹(二) Win8應用為王

1 win8應用商店 2 互相感知的應用 win8的應用之間可以互相感知,所謂互相感知就是應用知道相應格式的檔案怎麼處理,這個應用處理完了可以直接給下乙個應用接手。比如有一張,可以直接有按鈕上傳到facebook,或者我這邊在用編輯工具編輯的時候,旁邊就有shortcut可以直接分享到faceboo...

Win8 應用開發介紹(四)

本文為win8應用開發介紹系列的 win8應用開發介紹 四 win8應用開發步驟 4 打包 驗證和上傳你的應用 應用開發好之後就是打包分發了,當然,有visual studio,這些都是很便捷的。具體步驟如下 安裝 驗證和上傳應用的步驟如下 5 c c vb 開發步驟 由於win8設計是為了觸控螢幕...

Windows GDI應用 入門篇

一 基礎 gdi的繪圖函式基本上都是有狀態的,所有的函式都要求乙個hdc型別的控制代碼。這個hdc的獲得有幾個途徑beginpaint,getwindowdc,getdc.他們的引數都只需要乙個hwnd就差不多了。記得呼叫了beginpaint後要呼叫endpaint進行清理,呼叫getwindow...