<form id="933nb"><th id="933nb"><track id="933nb"></track></th></form><noframes id="933nb"><form id="933nb"><th id="933nb"></th></form>

      <address id="933nb"><address id="933nb"></address></address><sub id="933nb"></sub>
      <address id="933nb"><listing id="933nb"><meter id="933nb"></meter></listing></address>
      <form id="933nb"></form><address id="933nb"><listing id="933nb"><meter id="933nb"></meter></listing></address><form id="933nb"><nobr id="933nb"><progress id="933nb"></progress></nobr></form>

      <address id="933nb"><address id="933nb"><nobr id="933nb"></nobr></address></address>
      <noframes id="933nb"><address id="933nb"></address>

        <address id="933nb"></address>
        <form id="933nb"></form>
        <form id="933nb"><th id="933nb"></th></form>

        當前位置:主頁 > 網頁教程 > 網頁制作 > 制作技巧 > 內容歡迎大家投稿

        網頁設計實例:超級下拉導航菜單

        時間:2009-11-06 08:40來源:未知 作者:大寶庫 點擊:讀取中
        閱讀工具:字體:

        【摘要】

        導航菜單不一定是一個文字鏈接的簡單集合,它可以豐富地表示導航信息的層級, 甚至反應整個網站內容的層次結構。由于普通下拉菜單存在很多可用性問題,促使Mega drop-down menu應運而生,由于這種菜單真的很牛X,所以我叫它超級下拉菜單。相關測試證明了超級下拉菜單克服了普通下拉菜單的缺陷,值得推薦廣泛使用。

        【正文】

        首先結合實例,我們先分析一下超級下拉菜單是什么樣子的。

        2009-09-30_mega drop down

        1.巨型的、二維的面板將導航選項明確的信息分組;

        2.通過布局、版式和圖標等手段來組織導航選項的內容;

        3.一次性、快速地發現所有信息,無需滾動;

        4.當主導航在頁面頂部時,可垂直或水平展開菜單;當主導航在頁面左側時,可以飛出的形式展開菜單。


        其次,我們來看看超級下拉菜單之于普通下拉菜單的優勢。

        1.一目了然

        對于大型網站來說,普通下拉菜單通常隱藏了大多數用戶需要看到的選項。雖然通過滾動可以解決展示的問題,但由于用戶無法直觀比較所有的選項,他們不得不依賴短期記憶來記下掃視過的信息,記憶力的好快直接影響了完成任務的效率。尤其是下拉菜單過長時,普通下拉菜單就更讓人苦惱。

        而面對復雜的網站(尤其電子商務網站)超級下拉菜單充分體現了“一目了然”的原則,全部信息盡收眼底,用戶無需承擔記憶的負擔。


        2.明確分組

        普通下拉菜單層級和分組都不明確,一般是在二級菜單名稱前加一個“ – ”,或者縮進處理。

        而超級下拉菜單由于包含的信息眾多,所以從信息組織、布局、視覺表達上均強調了選項之間的層級和分組關系,幫助用戶了解他們的選擇。


        3.信息可視化

        普通的下拉菜單一般只適用文本鏈接,我們需運用排版、文本樣式來區分不同選項的層級關系和重要程度。

        而超級下拉菜單可以通過使用圖標、圖片、提示等豐富的形式,讓選項信息可視化,更直觀,更容易理解。在windows Word 2007的下拉菜單中用圖標代替了文本,且鼠標移上每個圖標時顯示提示信息,幫助用戶做選擇。


        接著,重點切具體地研究下超級下拉菜單的應用規則。

        我所說的規則是針對超級下拉菜單的,對普通下拉菜單同樣適用的規則此處省略××字。

        1.響應速度

        響應速度是設計用戶界面時要重要考慮的因素之一,之于超級下拉菜單也不例外。一般界面元素必須在短時間(0.1秒內)作出反應,好讓用戶覺得是他們操作導致了屏幕上的變化,過慢的響應使他們感覺操控電腦與自己無關,所以響應需要及時。但是針對超級下拉菜單的特點,速度過快也不太好,用戶要瀏覽的信息眾多,如果鼠標不小心移出菜單就關閉菜單的話反而干擾用戶的操作。

        因此,在設計中我們應該注意響應速度的設置,并且針對不同的系統和瀏覽器予以測試,保證它的可用性。如何設定這個時間呢?根據尼老爺多年的實驗得出以下建議:

        A.鼠標在導航的某個選項上懸停0.5秒。

        B.如果鼠標仍停在這個選項,則需要在0.1秒之內展開超級下拉菜單。

        C.如果鼠標移出導航選項,且停留在導航以外區域超過0.5秒,則在0.1秒內收起超級下拉菜單。

        D.對角線原則:如果鼠標如下圖的路徑左上至右下滑行,期間會移出導航選項和菜單的區域,在這種情況下應該保持超級下拉菜單的展開狀態。雖然多數用戶不存在這個問題,但是針對老年人和行動不便當用戶應該適當的加長這個時間。


        2.合理的組織菜單中的眾多信息

        超級下拉菜單包含的信息從形式上有文本、鏈接、圖標、提示等,從內容上又包含多級導航選項、網站流程、具體的產品信息等,合理的組織這些信息,明確了分組,才能是超級下拉菜單發揮真正的作用。從主要分組的準則是:(責任編輯:大寶庫)



        ------分隔線----------------------------
        推薦內容
        • 2010年網頁設計的流行趨勢

          網頁設計就像時裝,每一年都會流行新的設計。一起來看看2010年,網頁設計師們將會有什...

        • 專業網頁設計教程

          看過很多網頁設計教程文章,但不是說的太高深,對我們實際設計工作并無什么用處,就是...

        • 全面解答:如何進行網頁設計

          在網頁設計的認識上,許多人似乎仍停留在網頁制作的高度上。認為只要用好了網頁制作軟...

        • 網頁設計經驗和技巧總結

          ■ 網站主題規劃 注意不要讓你的網站主題過于分散。因為網站主題越集中,一般情況下網...

        • 專業主頁設計原則

          在任何Web站點上,主頁是最重要的頁面,會比其他頁面有更大的訪問量。主頁對公司收入...

        • 2009年不要制作的幾種網站

          這六種網站內千萬不能做,最先被淘汰的肯定是這六種網站: 第一種:大打擦邊球的網站 ...

        贊助商鏈接
        贊助商鏈接


        彩37