移動(dòng)UI設(shè)計(jì)中的7種主要導(dǎo)航模式.doc

《移動(dòng)UI設(shè)計(jì)中的7種主要導(dǎo)航模式.doc》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫(kù)。

1、移動(dòng)UI設(shè)計(jì)中的7種主要導(dǎo)航模式正如精良的設(shè)計(jì)一樣，優(yōu)秀的導(dǎo)航也大象無形。不管是瀏覽好友信息，還是租賃汽車，完美的導(dǎo)航設(shè)計(jì)能讓用戶根據(jù)直覺使用應(yīng)用程序，也能讓用戶非常容易地完成所有任務(wù)。一款應(yīng)用的導(dǎo)航可以被設(shè)計(jì)成各種樣式，但我想著重介紹６種主要的導(dǎo)航模式，也就是主菜單的導(dǎo)航模式（見圖1-1）。圖1-1主要導(dǎo)航模式跳板式?跳板式導(dǎo)航對(duì)操作系統(tǒng)并沒有特殊要求，在各種設(shè)備上都有良好表現(xiàn)。它有時(shí)也被稱為“快速啟動(dòng)板”（Launchpad）。跳板式導(dǎo)航的特征是，登錄界面中的菜單選項(xiàng)就是進(jìn)入各個(gè)應(yīng)用的起點(diǎn)。Facebook應(yīng)用沿用了iOS

2、主界面上的跳板式設(shè)計(jì)，其他應(yīng)用隨之跟風(fēng)（見圖1-2至圖1-4）。圖1-2Facebook的跳板式導(dǎo)航和OviMaps應(yīng)用、圖1-3Trulia和LinkedIn的導(dǎo)航設(shè)計(jì)圖1-4Palm手機(jī)上的NewsRoom和Nokia手機(jī)上的Yahoo！個(gè)性化的跳板式導(dǎo)航可在顯示菜單選項(xiàng)的同時(shí)顯示用戶個(gè)人資料。通常會(huì)提供自定義功能，允許用戶改變跳板式導(dǎo)航的布局（見圖1-5）圖1-5PayPal用戶個(gè)性化的跳板式導(dǎo)航和Gowalla應(yīng)用的早期版本常見的布局形式是3×3、2×3、2×2和1×2的網(wǎng)格（見圖1-6）。但跳板式導(dǎo)航不一定非要拘泥于

3、網(wǎng)格布局，你可以成比例地放大某些選項(xiàng)，以彰顯其重要性。在iPhone的應(yīng)用Masters中，VIDEO選項(xiàng)就是其他菜單選項(xiàng)的2～3倍大（見圖1-7）圖1-6跳板式導(dǎo)航的網(wǎng)格布局圖1-7NortonMobile的2×2網(wǎng)格布局和Masters的不規(guī)則布局為同等重要的內(nèi)容項(xiàng)使用網(wǎng)格布局，為相比之下更為重要的內(nèi)容項(xiàng)使用不規(guī)則布局形式。視情況使用個(gè)性化設(shè)置和自定義選項(xiàng)。列表菜單式?列表菜單式導(dǎo)航與跳板式導(dǎo)航的共同點(diǎn)在于，每個(gè)菜單項(xiàng)都是進(jìn)入應(yīng)用各項(xiàng)功能的入口點(diǎn)。這種導(dǎo)航有很多種變化形式，包括個(gè)性化列表菜單（PersonalizedLis

4、tMenu）、分組列表（GroupedList）和增強(qiáng)列表（EnhancedList）等。增強(qiáng)列表是在簡(jiǎn)單的列表菜單之上增加搜索、瀏覽或過濾之類的功能后形成的（見圖1-8至圖1-11）。圖1-8列表菜單：ValsparPaint和Kayak應(yīng)用圖1-9列表菜單：Palm手機(jī)上的RadioTime和Cozi應(yīng)用圖1-10個(gè)性化列表：Blackboard和ZohoCRM應(yīng)用圖1-11增強(qiáng)列表：AmazonMP3應(yīng)用；分組列表：Stratus應(yīng)用列表菜單很適合用來顯示較長(zhǎng)或擁有次級(jí)文字內(nèi)容的標(biāo)題。使用列表菜單的應(yīng)用要在所有次級(jí)屏幕內(nèi)

5、提供一個(gè)選項(xiàng)，用來返回菜單列表。通常的做法是在標(biāo)題欄上顯示一個(gè)帶有列表圖標(biāo)或“菜單”字樣的按鈕。選項(xiàng)卡式選項(xiàng)卡式導(dǎo)航在不同的操作系統(tǒng)上有不同表現(xiàn)，對(duì)于選項(xiàng)卡的定位和設(shè)計(jì)，不同操作系統(tǒng)有不同的規(guī)則（見圖1-12）。如果要為你的應(yīng)用選擇這種導(dǎo)航模式，就要為不同的操作系統(tǒng)專門定義選項(xiàng)卡的位置。圖1-12不同操作系統(tǒng)內(nèi)選項(xiàng)卡的位置iOS、WebOS和BlackBerry系統(tǒng)都把選項(xiàng)卡放在了屏幕底端，這樣用戶就可以用拇指進(jìn)行操作（見圖1-13和圖1-14）。圖1-13位于屏幕底部的選項(xiàng)卡：JamieOliverRecipes和Molom

6、e應(yīng)用圖1-14位于屏幕底部的選項(xiàng)卡：BlackBerry系統(tǒng)的應(yīng)用World和WorldMate屏幕底部水平滾動(dòng)的選項(xiàng)卡是個(gè)非常不錯(cuò)的設(shè)計(jì)，如圖1-15中的Starbucks和BlueMobile應(yīng)用，它可以在同一屏內(nèi)提供更多的操作選項(xiàng)。圖1-15位于屏幕底部的滾動(dòng)選項(xiàng)卡：Starbucks和BlueMobile應(yīng)用Android、Symbian和Windows系統(tǒng)都把選項(xiàng)卡定位在屏幕的頂端，這種形式看上去很眼熟，因?yàn)樗７铝藰?biāo)準(zhǔn)的網(wǎng)站導(dǎo)航模式。Nokia和Windows都在屏幕頂端設(shè)計(jì)了可滾動(dòng)的選項(xiàng)卡，用戶移動(dòng)選項(xiàng)卡后能看

7、到更多的菜單項(xiàng)（見圖1-16和圖1-17）。圖1-16位于屏幕頂端的滾動(dòng)選項(xiàng)卡：HarvestTimeTractor應(yīng)用和Nokia上的Fring應(yīng)用圖1-17位于屏幕頂端的選項(xiàng)卡：Foursquare和HitPost應(yīng)用為已選擇的菜單項(xiàng)設(shè)置不同的視覺效果，用戶就能清晰地知道自己選擇了哪一項(xiàng)。使用易于識(shí)別或帶有標(biāo)簽的圖標(biāo)。陳列館式陳列館式的設(shè)計(jì)通過在平面上顯示各個(gè)內(nèi)容項(xiàng)來實(shí)現(xiàn)導(dǎo)航，主要用來顯示一些文章、菜譜、照片、產(chǎn)品等，可以布局成輪盤、網(wǎng)格或用幻燈片演示（見圖1-18至圖1-20）。圖1-18BBC和PULSE應(yīng)用圖1-19

8、Flickr應(yīng)用和Palm手機(jī)上的PictureIt應(yīng)用有時(shí)，對(duì)這些內(nèi)容進(jìn)行分組更易于用戶瀏覽。Dwell利用側(cè)邊選項(xiàng)卡把陳列館式導(dǎo)航里的內(nèi)容組織成了可供用戶管理的內(nèi)容塊。圖1-20Dwell應(yīng)用陳列館式導(dǎo)航能很好地應(yīng)用于用戶需要經(jīng)常瀏覽，頻繁更新的內(nèi)容。儀表式儀表式導(dǎo)航提供