導覽方式與按鈕設計

Lagoon>網站製作流程>互動性>導覽設計>

、文字導覽連結

這是最基本的導覽連結,常常會配合 HTML 的表格來安排連結的相對位置,瀏覽的人可以藉由這些文字連結快速地找到他想看的網頁,文字導覽連結常常在搜尋引擎的查詢網頁中看到,因為這種導覽連結可以很容易地用程式自動產生。

  範例:1, 2

網頁中使用文字導覽連結時最需要注意的問題是:

、圖片導覽連結

由於我們希望導覽連結能夠兼具方便性與美觀性,網頁設計者常常會以較美觀的字體以及配色來設計,這些效果需要使用圖片來完成。

  範例: 1, 2, 3

基本的圖片按鈕是沒有動態動作的 (滑鼠在操作點選時按鈕不會有外觀的改變),如果需要讓瀏覽者感受到滑鼠操作時系統的反應的話,需要以 JavaScript 或是 Java 來輔助設計,也因此通常在設計圖片按鈕時為了讓瀏覽者比較容易分辨出這是一個按鈕,設計者常常都會設計有立體效果的按鈕。

、影像導覽圖 (image map)

有時候在使用多張圖片來製做連結時需要將圖片間以 HTML 的語法來排出希望的效果,對 HTML 來說其實這是一件和它的特性有一些衝突的工作 (HTML 的排版是相對的,可以在不同的瀏覽器設定下都可以順利地看到文件的內容),此時就可以用一張完整的圖片作為多個連結共用的導覽圖片,不過相對地修改的彈性也就比較小。

範例:1

應用影像導覽圖時需要注意的是圖片的大小不要太大,因為瀏覽者要等到整張圖下載後才能夠進行點選的操作,因此通常設計者需要在網頁中配合放入文字的導覽連結,另外由於大張影像在做失真性的壓縮時效果較難控制、一大張影像只有一個 alt 文字欄位、下載時必須依照固定的方式來下載等等原因,設計者也常常把影像導覽圖再進行細部的分割。

、Java Script/DHTML 活頁

使用 JavaScript/DHTML 活頁設計出來的導覽連結比較活潑,例如下面幾種:

  1. 樹狀圖
  2. 文字選單
  3. 影像按鈕 1, 2
  4. 幻燈片式按鈕
  5. 滑動展開選單
  6. 下拉式選單
  7. 右拉式選單
  8. 平面影像按鈕導覽
  9. 其它

這些導覽選單按鈕最主要是使用 JavaScript 能夠抽換頁面中圖片的能力以及更改活頁 (layer) 的位置、活頁顯示與否的能力實作出來的。

除了 6, 7 兩類之外,其他的導覽選單按鈕都需要配合框頁 (frame) 一起使用,這些選單的作用除了要讓瀏覽者很快地找到他所要看的資料之外,還要讓瀏覽者知道他現在到底在看哪一個網頁,如果使用文字連結或是影像導覽圖來實作的話,通常都沒有辦法達到這一點。

使用 JavaScript 製作出來的頁面在 HTML 原始檔中都含有原始的 JavaScript 程式,如果要製作相同效果的網頁的話,通常可以參考這些程式。

、Java Applet

除了使用 JavaScript 來製作動態效果之外,另外一種常用的方法是使用 Java 這種可以跨越不同執行平台的程式環境來製作,Java 不像 Script 形式的語言, Java 有嚴謹的資料型態、強大的 GUI 與網路類別庫、並且提供完整的物件導向系統設計機制,因此除了網頁上的一些工具 (例如:動畫, Hover Button, 導覽按鈕, 樹狀導覽資料夾等等),也常常用來設計功能比較完整的系統 (請參考範例)

、Active X 元件

Active X 元件是安裝在瀏覽者機器上可以執行的程式,不只是在某一個網頁上的一個元件而已,是這台機器上任何一個應用程式都可以載入使用的軟體元件。

要在一台機器上安裝一個 Active X 元件,通常只需要拷貝元件的執行檔或是動態連結函式庫到這台主機上執行一次或是執行 regsvr32 以後元件就會在登錄資料庫中加入此元件的識別資料 (如 ProgID 或是 CLSID),以後任意的 ActiveX 容器程式都可以載入此元件來運作。

使用 Active X 元件時如果瀏覽者的機器上沒有安裝該元件或是他不相信網頁上所提供的下載元件檔案 (因為要安裝在他的機器上,可能怕有惡意的程式或是病毒),此時都沒有辦法正確的瀏覽,因此 ActiveX 元件常常都是在封閉式的環境 (例如企業體、機關團體) 中使用,目前在網際網路中使用的 ActiveX 元件通常會透過認證中心來提供基本的來源保證,例如你在觀賞 flash 製作的 shockwave 格式動畫時就需要由 MacroMedia 下載一個解譯的元件 (你可以用 regedit 這個登錄資料庫編輯程式來搜尋 ShockwaveFlash.ShockwaveFlash.1 元件),然而由於公開金鑰基礎建設這些安全機制還沒有普及化,使用量仍然不是那麼多。

範例

、3D VRML 及 QTVR

VRML 的全名是虛擬實境的模型語言 (Virtual Reality Modelling Language),它能夠描述三度空間中立體物件與環境,透過瀏覽器中 VRML 的解譯程式可以將所描述的立體模型顯示出來,瀏覽者可以看到三度空間的透視影像,藉由改變自己的位置與視角,瀏覽者可以讓 VRML 的解譯程式即時地產生這些透視影像並且在螢幕上顯示出來。

範例:1, 2

QTVR 的全名是 Quick Time Virtual Reality,這是由蘋果電腦公司發展出來的互動式三度空間影像瀏覽技術,基本的原理是在某一個定點將四面環繞的影像拍攝下來,並且以電腦程式將這些照片加以縫合,如此當瀏覽者站在同一個點上面往任何一個方向看過去的時候,只要再顯示那一部份的影像就可以了,同樣的方法也可以應用在顯示三度空間中的物體,一般我們在觀察物體的時候,可能從上下左右前後去看它,所以也需要由一個環繞物體的球面上的各個角度先照相下來,然後以電腦程式將照片縫合為 QTVR 的格式。

範例:1, 2

導覽選單這種界面元件其實只是使用者界面中最表面的一部份,比方說海大的網站上有各個學院、系所網頁的導覽連結,這些連結用類似階層式的組織架構結合在一起,通常瀏覽者因為心中能夠接受這種一般組織團體的階層式架構,所以看到這種界面元件時也很容易地接受它、使用它,所以使用者介面事實上還包括使用者心中的抽象模型在內,與看得到的、操作得到的一併構成整個資訊系統的使用者介面。

如果有一個網站在介紹海大校園內的建築與景觀的話,它的導覽連結用階層式的就有麻煩了,這和瀏覽者心中的意象可能毫無交集,瀏覽者如果想看一下龍崗步道的介紹,它無法猜到製作網站的人究竟會把這部份的資訊連結到什麼地方去。這個時候比較適宜的導覽選擇可能是一個簡化的地圖,由地圖上去點選,更進一步如果有一個海大的三度空間 VRML 模型或是 QTVR 的影像縫合模型的話,就可以在模型中對應的部分加上解釋說明的連結了。

丁培毅製作