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)的一種,可將檔案轉為另一個檔案。

導覽列與導覽按鈕的設計方法導覽列與導覽按鈕的設計方法

導覽列與導覽按鈕的設計方法,常用的有以下類型:

導覽列與導覽按鈕的設計方法導覽列設計/微軟網路機器人 Webbot 法
導覽列與導覽按鈕的設計方法導覽列設計/互動式按鈕設計法
導覽列與導覽按鈕的設計方法導覽列設計/自訂 Java 法
導覽列與導覽按鈕的設計方法導覽列設計/Html5 CSS 法

其中以互動式按鈕設計法、與 Html5 CSS 法在效果與未來性上較優。當然,如果程式與美工能力均強,則 Html5 CSS 法應是第一選擇。

除此之外,還有進階的:

導覽列與導覽按鈕的設計方法導覽列設計/下拉選單與樹狀導覽法
導覽列與導覽按鈕的設計方法導覽列設計/雙導覽列_多導覽列法
導覽列與導覽按鈕的設計方法導覽列設計/固定位置導覽列法

 

動態導覽列的命名 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

儲存 Navi_left.htm

出現〈儲存內嵌檔案〉對話框

〈儲存內嵌檔案〉對話框

出現1套3個按鈕,如 bottonF1 ~ F3,bottonF 是按鈕的系統自動命名,1~3 分別表示 3種色彩。

〉變更資料夾

儲存到圖形共用資料夾內,此處如 !Cashe。

個人化按鈕圖形

如有需要,可在事後再置換  !Cashe 資料夾中的按鈕圖形。 

如果採用個人化導覽按鈕,使用 PhotoImpact〈元件設計師〉的〈按鈕列〉,可一次設計 4 個待瀏覽按鈕,再改變色彩,一次設計 4 個瀏覽中按鈕。


回頁首 Up to page head 至相關主題 Go to related pages
上一頁 Back to previous page 回頁首 Up to page head 下一頁 Go to nex page  
請點這裡看所有留言分類 Please click here to view categories of comments
同類別內相關主題