掌上指路標(biāo) —– APP架構(gòu)與導(dǎo)航設(shè)計(jì)(4)

按鈕返回上一層級(jí)，整個(gè)導(dǎo)航給用戶的感覺就如同在一棵大樹上沿著縱向進(jìn)行攀爬。 而另外一種設(shè)計(jì)則是Windows Phone7上的Metro UI設(shè)計(jì)。如圖所示，所屬層級(jí)的下級(jí)內(nèi)容如同平鋪一般展現(xiàn)在同一維度上，而逐層的導(dǎo)航則以左右推移的方式進(jìn)行，此種導(dǎo)航的設(shè)計(jì)讓用戶在逐層深入時(shí)，也縱觀到全局的設(shè)計(jì)。
 

Step3: 導(dǎo)航具體表現(xiàn)形式：控件形式and擺放位置

通過前面兩個(gè)步驟的分析與設(shè)計(jì)，App的導(dǎo)航結(jié)構(gòu)可以算是基本完成。但因?yàn)楝F(xiàn)在手機(jī)平臺(tái)眾多，用戶使用習(xí)慣各不相同。所以在產(chǎn)品的具體設(shè)計(jì)中，為了給產(chǎn)品提供最好的用戶體驗(yàn)，還需要把握平臺(tái)特性，選擇合適的控件形式，并且根據(jù)用戶手持設(shè)備的操作系統(tǒng)，為用戶設(shè)計(jì)導(dǎo)航最易操作的位置。

 

如對(duì)于樹狀層級(jí)導(dǎo)航欄設(shè)計(jì)， iOS的導(dǎo)航欄控件被安排在了屏幕上方，因?yàn)樵谟|屏的使用時(shí)，頂部區(qū)域是信息展現(xiàn)率最完整的區(qū)域，在手指操作的過程中，該區(qū)域的信息不易被手的運(yùn)動(dòng)軌跡遮擋。通過此導(dǎo)航欄用戶能實(shí)時(shí)定位自己所處的當(dāng)前位置以及可以返回的上層界面。


整個(gè)導(dǎo)航欄控件由“返回按鈕”，“頁面標(biāo)簽”和“可選管理區(qū)域”三個(gè)子控件組成。“返回按鈕”一般放置于左上角區(qū)域，允許用戶在進(jìn)行樹狀層級(jí)信息的瀏覽后，通過此按鍵逐層地返回上一層級(jí)。按鈕本身的設(shè)計(jì)該返回按鈕只對(duì)應(yīng)唯一的入口信息，不允許放置多層級(jí)返回按鈕。頁面標(biāo)簽則應(yīng)是顯示對(duì)當(dāng)前視圖信息的高度概括，可對(duì)應(yīng)顯示視圖標(biāo)題，序號(hào)位置等?？蛇x管理區(qū)塊可放置對(duì)于該屏幕的一些重要操作，實(shí)現(xiàn)屏幕內(nèi)容的管理（如添加，編輯，翻頁，刪除，播放，詳細(xì)內(nèi)容等）。但只能放置一種管理按鈕。

 

（圖片來源： http://www.androidpatterns.com/  ）

而對(duì)于Android的樹狀層級(jí)導(dǎo)航，則更多的依賴于下部的硬件實(shí)體導(dǎo)航控件。主流的Android硬件導(dǎo)航提供四種功能：返回，菜單按鈕，手機(jī)桌面，以及搜索。


返回按鈕讓用戶返回上一步的功能操作。菜單按鈕可以顯示當(dāng)前視圖中相關(guān)的操作，最多可以有6個(gè)，但和iOS的“可選管理區(qū)域”的設(shè)置方式略有不同，該區(qū)域一般是全局的功能操作，所以不一定和每個(gè)視圖都密切相關(guān)。