網(wǎng)頁設(shè)計(jì)中頁面導(dǎo)航設(shè)計(jì)原則

著名的格林童話故事里面漢賽爾和格萊特知道后母想要在深林里面丟掉他們的計(jì)劃，將面包屑撒在來時的路上，雖然當(dāng)月亮升起時，面包屑被鳥吃掉了，但是現(xiàn)在的互聯(lián)網(wǎng)設(shè)計(jì)師們從這個故事中找到了靈感，設(shè)計(jì)出不會被鳥吃掉的固定"面包屑"。

漢賽爾和格萊特為了在森林中找到回家的路，撒下了面包屑，這是一種導(dǎo)航方式，如果沒有被鳥吃掉，無論走到森林的任何地方都可以知道如何從當(dāng)前的位置走回家去。在互聯(lián)網(wǎng)信息爆炸的今天，互聯(lián)網(wǎng)的設(shè)計(jì)師們在網(wǎng)頁上設(shè)計(jì)出各種各樣的固定面包屑(如圖1)也是為了不讓用戶迷失在信息的大海中，給予用戶的一個導(dǎo)航的方式。Apple是大家公認(rèn)的用戶體驗(yàn)最好的設(shè)計(jì)公司，我們來看看apple.com是用什么方式完美地完成用戶導(dǎo)航需求的。

頁面導(dǎo)航原則

節(jié)點(diǎn)標(biāo)簽：有apple的logo、itunes和what's new。且節(jié)點(diǎn)標(biāo)簽有不同的樣式，what'new用了Bold的樣式。每個節(jié)點(diǎn)標(biāo)簽中間都用箭頭隔開。箭頭：是一個有方向指向的符號。

面包屑這種方式完成導(dǎo)航需求的方式為：

1、通過最后一個節(jié)點(diǎn)標(biāo)簽告知用戶當(dāng)前位置;2、面包屑整體從左到右告訴用戶來到當(dāng)前位置的固定路徑;3、除了當(dāng)前頁面的節(jié)點(diǎn)標(biāo)簽，其它節(jié)點(diǎn)標(biāo)簽均可點(diǎn)擊，可以讓用戶回到上一級頁面(可以回到最初起點(diǎn)的作用)。通過這三點(diǎn)任何用戶都不會在網(wǎng)站中迷失方向。 圖3: apple網(wǎng)站itunes新功能介紹的頁面

然后我們再對照這個面包屑所在的頁面(圖3)從上往下的各種導(dǎo)航方式的元素進(jìn)行分析，看頁面除面包屑之外是如何自我完成導(dǎo)航需求的：

1、首先導(dǎo)航菜單欄上的logo 告訴用戶在apple的網(wǎng)站上，導(dǎo)航上的菜單分類告訴用戶這個網(wǎng)站一共有多少個維度，菜單上被選中的Itunes ，告訴用戶當(dāng)前處于itunes的菜單維度下。 2、接著是itunes的頁面導(dǎo)航欄，大大的標(biāo)題itunes 告訴用戶下面的內(nèi)容都是講itunes，右邊的itunes的頁面菜單導(dǎo)航告訴用戶itunes頁面的內(nèi)容分類，其中不一樣狀態(tài)的what's new 告訴用戶目前選中的是這個類容，下文內(nèi)容是在這個分類下的。 3、最后是這個頁面的標(biāo)題What's new in iTunes ,表示當(dāng)前頁面的內(nèi)容是按照這個標(biāo)題全面鋪開內(nèi)容。上述導(dǎo)航元素也清楚地告知了我們1、用戶當(dāng)前位置(當(dāng)前頁面標(biāo)題);2、來到當(dāng)前頁面的固定路徑(從上往下的導(dǎo)航路徑布局和元素);3、如何返回上一級頁面(每個導(dǎo)航菜單均可點(diǎn)擊，除了當(dāng)前頁面標(biāo)題)。其中涉及到3級導(dǎo)航：apple網(wǎng)站主導(dǎo)航、itunes類別導(dǎo)航和what's new 內(nèi)容導(dǎo)航，每一級導(dǎo)航都有導(dǎo)航菜單和被選中的狀態(tài)。將每一級導(dǎo)航的起始點(diǎn)用箭頭鏈接起來。

一模一樣的頁面路徑。告知用戶是如何來到這個頁面的。

從上述頁面中的面包屑樣式分析和頁面自己的內(nèi)容分析，可以看出整個頁面里所有的導(dǎo)航方式所要傳達(dá)描述的信息是一致的，那么我們可以歸納出頁面導(dǎo)航原則：1、告知用戶當(dāng)前位置;2、告知用戶來到當(dāng)前頁面的固定路徑;3、可以讓用戶返回上一級頁面。

頁面導(dǎo)航原則指導(dǎo)設(shè)計(jì)

1、符合頁面導(dǎo)航原則的設(shè)計(jì)：

我們用導(dǎo)航原則來檢驗(yàn)nestle.com的導(dǎo)航設(shè)計(jì)，這個頁面通過頁面標(biāo)題"baby foods"告訴我們當(dāng)前位置，通過網(wǎng)站logo，二級導(dǎo)航欄中選中的"Brands"，左側(cè)三級導(dǎo)航欄選中的"Baby foods"，告訴我們這個頁面的固定路徑是從home，選擇brands分類，再選擇Babyfoods。且導(dǎo)航欄的每一個分類都可以被點(diǎn)擊，可以讓用戶返回到上一級。這個頁面完成了導(dǎo)航所需要的所有信息傳達(dá)元素。我們也可以明顯地找到頁面中的：

頁面路徑。是根據(jù)它的面包屑的節(jié)點(diǎn)標(biāo)簽元素，將頁面中的相同元素找出來，這些元素都已比較明顯的樣式表示選中，與相同信息不同狀態(tài)的內(nèi)容區(qū)分開來，導(dǎo)航布局從上而下形成了包含與被包含的關(guān)系，圖5是將這些選中的元素用箭頭連接起來，這樣就找到了頁面中的的頁面路徑。

是在amazon瀏覽到web navigation的搜索結(jié)果頁。圖中將隱藏的頁面路徑和實(shí)際存在的面包屑都標(biāo)示出來了。面包屑的每個節(jié)點(diǎn)標(biāo)簽在頁面的其它導(dǎo)航方式中都有被選中的狀態(tài)，且自上而下，從外到內(nèi)形成包含與被包含的關(guān)系，從而形成一個隱藏的頁面路徑。這里使用的導(dǎo)航方式和前面都不一樣，不止用了導(dǎo)航菜單，還使用了樹形的級聯(lián)菜單的方式。當(dāng)前頁面也不是用頁面標(biāo)題，而是直接用的實(shí)體面包屑的最后一級節(jié)點(diǎn)標(biāo)簽的強(qiáng)化樣式。這個頁面通過不同的方式完成了用戶的導(dǎo)航需求。

2、其它符合頁面導(dǎo)航原則的新型樣式：

3、不符合頁面導(dǎo)航原則的設(shè)計(jì)：

Meilishuo的一個雜志內(nèi)容頁面，沒有實(shí)際存在的面包屑，那么我們尋找其它導(dǎo)航方式，如上圖網(wǎng)站logo、導(dǎo)航欄、頁面標(biāo)題等，如箭頭所指，我們會發(fā)現(xiàn)頁面路徑少了了一段。我們不知道從首頁去了什么分類，然后來到"所在雜志"。這樣用戶想找雜志所在的上一分類就找不到了，回不到上一級。這個頁面的導(dǎo)航原則就沒有滿足，用戶在此處就會迷失。它主要少了主導(dǎo)航條沒有選中當(dāng)前所在內(nèi)容分類，從而讓路徑斷了一節(jié)。

小結(jié)

設(shè)計(jì)師的創(chuàng)意是無限的，但是用戶的導(dǎo)航需求是固定的，任何樣式，只要能夠符合導(dǎo)航原則的幾點(diǎn)要求，就可以完成用戶的導(dǎo)航任務(wù)。更加簡便的方法就是只要能在頁面元素中找到這個頁面的頁面路徑，就相當(dāng)于滿足了導(dǎo)航原則。這樣的原則和方法既可以用來檢驗(yàn)我們的設(shè)計(jì)是否達(dá)標(biāo)，也可以用來指導(dǎo)我們對導(dǎo)航方式的設(shè)計(jì)。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

當(dāng)前名稱：網(wǎng)頁設(shè)計(jì)中頁面導(dǎo)航設(shè)計(jì)原則
路徑分享：http://muchs.cn/news1/315501.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、網(wǎng)站設(shè)計(jì)公司、動態(tài)網(wǎng)站、云服務(wù)器、Google、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)