DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 總結網站導航怎麼設計才好呢?
總結網站導航怎麼設計才好呢?
編輯:關於網頁技巧     

網頁制作poluoluo文章簡介: 了解導航在互聯網上很多分析的例子,但是討論的焦點的目的都是一個——“不要迷路”。

導航,路標和找路

     了解導航在互聯網上很多分析的例子,但是討論的焦點的目的都是一個——“不要迷路”。
從導航說起,一般都會聯想到路標,因為用戶要找路,就想到了標識!

網頁常規的標識包含:
    頁面和窗口標題
    網頁標識(logo)
    其他有標記的設備
    Tab
    選擇指示器

標識使用到的模式:
    全局導航
    顏色編碼的欄目
    序列地圖
    面包屑層級結構
    注釋滾動條

如何找路呢?
    運用良好的標記
    環境線索
    地圖

    Jenifer提到有清晰的入口點模式結合良好的標記及環境線索的例子——鏈接必須在頁面上突出顯示。一個有序的地圖,使用總覽加細節,形成一個空間顯示地圖。

    總結導航如何好呢——讓距離保持簡短,避免太多的跳轉!

清晰的入口點

what:只在界面上顯示幾個入口;讓它們面向任務,並具有自描述性。
Where:當你正在設計一個面向任務的應用,或者其他任何主要供新用戶或不常訪問的用戶使用的應用時,可應用此模式。
Why:網站要清晰的展現給用戶信息和結構,大量平鋪的面板,毫不相關的信息(廣告等)都不能使用工具條。提供清晰的目的去口。
How:運用大門的概念,入口處很清晰的幾點重要的導航。標准例子就是google,首頁上集中處理好一件事。用戶很明確ta能做什麼。

圖例:http://home.ingdirect.com/

序列地圖What:在一系列頁面上的每一頁上,顯示一幅地圖,把所有的頁面按順序排序在改地圖,包括“你在這裡”的位置指示器。
Where:用戶訪問的路徑是線性的。按照順序一頁一頁訪問的。但是太多的層次就不能使用了,要使用面包屑了。(具體幾個層次jenifer沒有提到,個人覺得超過5-6步就要改了把!)
Why:用戶在按步驟走的時候迷路的可能很小,最擔心的反而是還要走多久才到頭。接下來我還要做什麼。
How:那就采用步驟地圖方式設計,用顏色深淺標識當前所在,用箭頭等標識標記下游的方向。例如很多注冊流程是這樣的。

圖例:

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved