Metro 风格应用的导航设计
轉(zhuǎn)載地址: http://msdn.microsoft.com/zh-cn/library/windows/apps/hh761500.aspx
- 分層系統(tǒng)
- 平面系統(tǒng)
- 導(dǎo)航剖析
- 通過輕掃邊緣進(jìn)行導(dǎo)航
- 使用標(biāo)題菜單和部分標(biāo)簽進(jìn)行導(dǎo)航
- 使用篩選、透視、排序和查看進(jìn)行導(dǎo)航
| 了解如何組織 Metro 風(fēng)格應(yīng)用中的內(nèi)容,以便用戶可以輕松而直觀地進(jìn)行導(dǎo)航。使用正確的導(dǎo)航模式可幫助你限制永久位于屏幕上的控件,如選項(xiàng)卡。這樣用戶就可以將精力集中在當(dāng)前內(nèi)容上。 |
?
分層系統(tǒng)
| Windows?8 中的大多數(shù) Metro 風(fēng)格應(yīng)用都將使用導(dǎo)航的分層系統(tǒng)。此模式比較常見并且為人們所熟悉,但是使用 Metro 風(fēng)格中心導(dǎo)航模式效果會(huì)更好。這種模式使得 Metro 應(yīng)用更快速流暢,同時(shí)易于使用。 此模式最適合具有大量內(nèi)容或許多不同的內(nèi)容部分供用戶瀏覽的應(yīng)用。 |
?
層次結(jié)構(gòu)中的各層
中心設(shè)計(jì)的實(shí)質(zhì)是將內(nèi)容分為不同的部分和不同級(jí)別的詳細(xì)信息。
| 中心頁 中心頁是用戶到應(yīng)用的入口點(diǎn)。此處的內(nèi)容以水平方式顯示在一個(gè)豐富的平移視圖中,這樣用戶一眼就能看見新增內(nèi)容和可用功能。 中心由各個(gè)內(nèi)容類別組成,每個(gè)類別映射到應(yīng)用的部分頁中。每個(gè)部分都應(yīng)該顯示內(nèi)容或功能。中心應(yīng)該提供許多可以看到的變化,吸引用戶,并將他們吸引到應(yīng)用的各個(gè)部分。 ? 部分頁 部分頁是應(yīng)用的第二個(gè)層級(jí)。此處的內(nèi)容可以采用任何形式顯示,這些形式必須能夠最好地表示該方案及該部分所包含的內(nèi)容。 部分頁由各個(gè)項(xiàng)目組成,每個(gè)項(xiàng)目都有它自己的詳細(xì)信息頁。部分頁還可以利用分組和全景風(fēng)格布局。 ? 詳細(xì)信息頁 詳細(xì)信息頁是應(yīng)用的第三個(gè)層級(jí)。此處顯示了各個(gè)項(xiàng)目的詳細(xì)信息,各項(xiàng)目的格式可能會(huì)根據(jù)內(nèi)容的特殊類型不同而有很大的不同。 詳細(xì)信息頁由項(xiàng)目詳細(xì)信息或功能組成。詳細(xì)信息頁可能包含許多信息,也可能包含一個(gè)單一對(duì)象,例如圖片或視頻。 |
?
平面系統(tǒng)
| Windows?8 中的許多 Metro 風(fēng)格應(yīng)用都使用平面導(dǎo)航系統(tǒng)。此模式在游戲、瀏覽器或文檔創(chuàng)建應(yīng)用中較為常見,用戶可以在所有駐留在同一分層級(jí)別的頁面、選項(xiàng)卡或模式之間移動(dòng)。 這種模式最適合核心方案涉及少量頁面或選項(xiàng)卡之間的快速切換時(shí)。 |
?
內(nèi)容頁
平面系統(tǒng)在本質(zhì)上會(huì)將內(nèi)容分解為不同的頁。
| 導(dǎo)航欄 導(dǎo)航欄非常適用于在多個(gè)上下文之間執(zhí)行切換操作。示例包括選項(xiàng)卡、文檔以及消息或游戲會(huì)話。 導(dǎo)航欄是一個(gè)暫時(shí)元素,駐留在屏幕的頂部,并且當(dāng)用戶從屏幕的上邊緣或下邊緣輕掃時(shí),導(dǎo)航欄可見。雖然導(dǎo)航欄中各項(xiàng)目的格式可能會(huì)不同,但是一個(gè)典型的處理方法是使用一個(gè)簡單的縮略圖。 ? 切換 與分層系統(tǒng)不同,在平面系統(tǒng)中通常沒有永久性的后退按鈕或?qū)Ш蕉褩?#xff0c;因此在頁面之間進(jìn)行移動(dòng)通常通過內(nèi)容或?qū)Ш綑谥械闹苯渔溄觼硗瓿伞?/p> 你可以選擇在導(dǎo)航欄中包括其他功能,例如添加一個(gè)“+”按鈕以創(chuàng)建一個(gè)新的選項(xiàng)卡、頁面或會(huì)話。 |
?
導(dǎo)航剖析
下面顯示了一個(gè)應(yīng)用中的各部分之間、層次結(jié)構(gòu)中的不同層之間和一個(gè)應(yīng)用頁面內(nèi)的導(dǎo)航剖析。
頁眉和“后退”按鈕
頁眉可對(duì)當(dāng)前頁面進(jìn)行標(biāo)記,有助于查找頁面。使用“后退”按鈕可以快速返回你所在的位置。
中心頁
中心頁將應(yīng)用程序不同區(qū)域中的信息顯示在一個(gè)屏幕上。這樣用戶就可以鳥瞰該應(yīng)用中可用的所有內(nèi)容。
內(nèi)容部分,即類別
可以設(shè)置內(nèi)容部分的格式以便最佳地顯示其推銷的功能或項(xiàng)目。
語義縮放:在層次結(jié)構(gòu)中的各層之間導(dǎo)航
語義縮放可以快速順暢地掃描和四處移動(dòng)視圖,尤其是當(dāng)視圖為很長的平移列表時(shí)。
導(dǎo)航欄
使用導(dǎo)航欄可以暫時(shí)訪問導(dǎo)航控件或應(yīng)用的其他區(qū)域。
頁眉菜單
頁眉菜單可從應(yīng)用中的任意位置獲取,使用頁眉菜單用戶可以快速從應(yīng)用的一個(gè)部分跳轉(zhuǎn)到另一個(gè)部分
主頁鏈接
主頁鏈接位于頁眉菜單的底部,通過它可以快速返回應(yīng)用的根目錄。
應(yīng)用欄
使用應(yīng)用欄可以暫時(shí)訪問與特殊視圖相關(guān)的命令。
查看/排序/篩選
這些命令用于更改在特定視圖中內(nèi)容顯示的方式。駐留這些命令的最佳場所是應(yīng)用欄。
邊緣
從屏幕邊緣輕掃可顯示應(yīng)用欄、導(dǎo)航欄和超級(jí)按鈕。
通過輕掃邊緣進(jìn)行導(dǎo)航
| 用戶可通過從一邊輕掃一個(gè)手指或拇指,在應(yīng)用內(nèi)和系統(tǒng)中進(jìn)行導(dǎo)航。為了有效地使用 Metro 風(fēng)格應(yīng)用,用戶需要了解以下每個(gè)邊緣輕掃執(zhí)行什么操作。
|
?
使用標(biāo)題菜單和部分標(biāo)簽進(jìn)行導(dǎo)航
我們將使用一個(gè)名為“Food with Friends”的示例應(yīng)用,演示使用后退按鈕、標(biāo)題菜單以及內(nèi)容部分導(dǎo)航 Metro 風(fēng)格應(yīng)用的模式。
| ? ? ? 標(biāo)題菜單包含一個(gè)指向每個(gè)部分頁面的鏈接(第 2 級(jí))以及一個(gè)返回中心的鏈接(第 1 級(jí)),從而用戶能夠快速在應(yīng)用周圍移動(dòng)。該菜單顯示在每個(gè)級(jí)別以及應(yīng)用的每個(gè)頁面上,用戶可以使用該菜單可靠有效地去往所需的位置。 |
?
| ? ? ? 用戶可以點(diǎn)擊部分標(biāo)簽以進(jìn)入該部分的對(duì)應(yīng)頁面。提供視覺提示,如“查看全部(x)”,以指示用戶中心顯示了此部分中的更多項(xiàng)目。使用此模式不需要使用磁貼空間或在內(nèi)容中放置鏈接的位置。 |
?
使用此模式,這是 Food with Friends 示例的導(dǎo)航插圖的外觀。這個(gè)簡化的插圖僅顯示了導(dǎo)航元素的規(guī)范示例,用于表示交互的所有內(nèi)容。
使用篩選、透視、排序和查看進(jìn)行導(dǎo)航
應(yīng)用導(dǎo)航的另一個(gè)部分就是確定何時(shí)、何地以及如何讓用戶更多地控制他們體驗(yàn)內(nèi)容的方式。篩選、透視、排序和查看切換程序都是應(yīng)用設(shè)計(jì)時(shí)需要考慮的內(nèi)容。
| 篩選 | 根據(jù)某些條件,刪除或隱藏?cái)?shù)據(jù)集中的內(nèi)容。 | 查找要播放的游戲時(shí),可能選擇只查看類別為“冒險(xiǎn)”的那些游戲。 |
| 透視 | 根據(jù)某些條件,重新組織數(shù)據(jù)集中的內(nèi)容。 | 查看音樂集時(shí),可能選擇按藝術(shù)家、唱片或流派對(duì)歌曲進(jìn)行組織。 |
| 排序 | 更改數(shù)據(jù)集中顯示內(nèi)容的順序。 | 在新聞應(yīng)用中瀏覽要閱讀的文檔時(shí),可能選擇查看第一個(gè)列出的最新文檔。 |
| 查看 | 更改顯示內(nèi)容的風(fēng)格或方法。 | 在餐館查找應(yīng)用中瀏覽吃飯的地點(diǎn)時(shí),可能選擇在地圖上查看餐館,而不是以列表方式查看。 |
?
On-canvas
當(dāng)查找項(xiàng)為主要任務(wù)(如在集合或搜索結(jié)果頁面中)時(shí),使用 on-canvas 控件進(jìn)行篩選、透視或排序。
如果應(yīng)用的重點(diǎn)是瀏覽內(nèi)容(如雜志或購物應(yīng)用),則控件應(yīng)該進(jìn)入應(yīng)用欄。
頁面篩選和排序
若要在集合視圖中篩選和排序內(nèi)容,則可以將篩選和排序命令放置在標(biāo)題和內(nèi)容之間的行中。在以下示例中,篩選視圖以僅顯示 TV節(jié)目,可按系列進(jìn)行排序和分組。
在這個(gè)商店應(yīng)用的示例中,下拉選擇控件篩選當(dāng)前視圖的內(nèi)容。如菜單所示,當(dāng)前活動(dòng)的篩選器在下拉列表中顯示為已選擇。
?
導(dǎo)航欄
導(dǎo)航欄主要用于導(dǎo)航使用平面導(dǎo)航模式的應(yīng)用的部分或頁面。也可以與分層模式結(jié)合使用,代替標(biāo)題菜單,作為一種提供全局導(dǎo)航控件的方式。導(dǎo)航欄應(yīng)該顯示在應(yīng)用的每個(gè)頁面上以及所有級(jí)別上,目的是為用戶提供一種便利的確定性導(dǎo)航方法。
在此金融應(yīng)用示例中,應(yīng)用的中心 (L1) 促銷部分(標(biāo)題、關(guān)注列表)進(jìn)入中心,并且其中包含指向它們的部分標(biāo)題鏈接。在部分級(jí)別 (L2),當(dāng)通過輕掃上邊緣或下邊緣來調(diào)用導(dǎo)航欄時(shí),用戶可以訪問應(yīng)用的根部分以及所有其他部分。
應(yīng)用欄視圖切換
應(yīng)用欄主要用作命令界面,但也可以用于改變查看內(nèi)容的方式。切換視圖、透視、篩選以及排序全都可以使用應(yīng)用欄完成。請(qǐng)勿使用應(yīng)用欄從應(yīng)用中的一個(gè)位置導(dǎo)航到另一個(gè)位置。所有應(yīng)用欄項(xiàng)都應(yīng)該對(duì)當(dāng)前視圖中的內(nèi)容進(jìn)行操作。
在此日歷應(yīng)用示例中,視圖默認(rèn)值為月視圖,并針對(duì)該視圖對(duì)此應(yīng)用進(jìn)行了優(yōu)化。選擇其他日歷視圖的命令位于應(yīng)用欄中,可以通過從上邊緣或下邊緣輕掃來進(jìn)行訪問。其他命令,如生成新約會(huì),也可能會(huì)出現(xiàn)在此欄中。
在 Food with Friends 示例的“所有餐館”頁面中,查看項(xiàng)的選項(xiàng)以列表或地圖的形式提供,并且根據(jù)某些條件(如花銷、位置和等級(jí))對(duì)視圖進(jìn)行篩選和排序。此處,篩選選項(xiàng)顯示為菜單彈出窗口中的控件。
總結(jié)
以上是生活随笔為你收集整理的Metro 风格应用的导航设计的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: matlab 光栅 傅里叶,Matlab
- 下一篇: 云服务总线CSB:“连”无边界