
Navigation Bar & Navigation Buttons Design by Interactive Method
導覽列與導覽按鈕設計2:互動式按鈕設計法
Web Design:
Automations - Epistemological/Digital Aesthetics
- Formation Methodology
網站/網頁設計:自動化實作-知識美學/數位美學之建構方法
Links, Navigation and Mata page 超連結、導覽與重新導向
超連結:以<a></a>所構成,各種站間、站內物件的相互連結。
導覽:對具有結構性的內容引導,通常具備按鈕或統一性的視覺設計。
重新導向:是統合標籤(Meta Tag)的一種,可將檔案轉為另一個檔案。
[!Related/Navi.htm]動態導覽列的命名 Naming system
導覽屬於虛擬物件,建議所有虛擬物件都以「當地語文」-也就是以中文命名。
動態導覽列設計策略 Navigation design tips
動態導覽設計有以下策略:
1. 使用互動式按鈕設計。
2. 應在共用資料夾內(如 !Related),設定1導覽頁(如 Navi_left.htm)。
3. 導覽頁應內嵌在「動態範本」上。
4. 如果軟體提供的互動式按鈕範本,不盡滿意,可在事後再置換按鈕圖形。
互動式按鈕導覽列設計實作
建立,或在 !Related資料夾內開啟 Navi_left.htm 。
〉插入
〉互動式按鈕
出現〈互動式按鈕〉對話框
〉按鈕
選擇1個範本,注意造型與網站性格、主色的配合。
動態導覽按鈕的設計風格,常應與橫幅呼應。
如果沒有適合的,就從簡,事後再置換按鈕圖形。
〉文字
這是首頁,故輸入個人化的站名。
〉瀏覽
指定首頁
〉字型
理性選擇〈微軟正黑體〉,感性選擇〈標楷體〉,其他字型有可能使用者看不到,而變成不理想的細明體。
〉大小
以 12px 為宜。
〉色彩
依據網站主色,與選色與四大配色定律配色。
〉影象
〉維持比例
先將預設的「勾選」取消,改為不選。
如果是作「頁面頂端導覽」,則可斟酌保留。
〉寬度
必須按照「動態範本」的設計固定寬度,此處為 140px。
〉高度
可浮動,此處為 30px。
原則上,應使用 gif 檔案。
〉確定
〈互動式按鈕〉對話框消失
〉儲存圖示
儲存 Navi_left.htm
出現〈儲存內嵌檔案〉對話框
出現1套3個按鈕,如 bottonF1 ~ F3,bottonF 是按鈕的系統自動命名,1~3 分別表示 3種色彩。
〉變更資料夾
儲存到圖形共用資料夾內,此處如 !Cashe。
個人化按鈕圖形
如有需要,可在事後再置換 !Cashe 資料夾中的按鈕圖形。
如果採用個人化導覽按鈕,使用 PhotoImpact〈元件設計師〉的〈按鈕列〉,可一次設計 4 個待瀏覽按鈕,再改變色彩,一次設計 4 個瀏覽中按鈕。




