Website Virtual Structure: Navigation
網站虛擬結構:導覽設計 Expression Web

Web 結構包括3層涵義:網群結構網站結構網頁結構

As a project leader, you want to moderate the interaction among websites in a web community and to develop a full-scaled structure that has a scope of whole picture than to design details.

note However, according to previous experience, many students would have difficulties to comprehend the complications.  If you do not have a full vision in your mind yet, you may go to 'Website Structure' in the first place then come back latter.

Web 結構包括3層涵義:網群結構網站結構網頁結構。網群結構為網站之間的連結,伺服器與後端資料庫的配置。網站結構包括虛擬結構-導覽設計,與實體結構-資料夾設計。網頁結構常用2欄或3欄式,平面設計與分欄方法過去包括邊框法、表格法、框架法,但當前以CSS法為優,必要時可搭配綜合法。頁面導覽,有從單導覽,往雙導覽、多導覽發展的趨勢。另有Pop-up Page立體空間之彈出網頁設計。


Virtual vs. Physical _ Navigation vs. Path

虛擬實體-導覽/目錄資料夾/路徑

網站結構包括虛擬結構-導覽設計,實體結構-資料夾設計。

WEB 虛擬世界一文中,已介紹過網路的虛擬環境與實體環境。

虛擬環境是給瀏覽者/使用者的假(擬真)環境。

實體環境是設計者/管理者的真環境。

瀏覽者/使用者看到的是虛擬環境,所以設計者會從先設計虛擬環境入手。

在傳統-紙本媒體上呈現環境結構的是「目錄」,電腦問世時,表現電腦實體環境的名稱也稱為「目錄 Directory」。

在電腦虛擬環境的觀念與應用成熟後,虛擬目錄改稱為「導覽」,而實體目錄改稱為「路徑、資料夾」,資料夾相當於章節名稱,而路徑是章節的階層關係。

「目錄」一詞由於語意與習慣的變遷,可能是指虛擬導覽,也可能是指實體路徑,應特別注意。 

在電腦實務上,一個獨立的實體環境--如一個網站--的起點,其「根資料夾 Root Folder」,習慣上還是常稱為「根目錄 Root Directory」,這時,其對稱自然會使用「子目錄」。

Open a New Site and Check Settings

Navigation : Visual Virtual Structure

虛擬結構-導覽設計

Navigation structure provides a virtual structure of the appearance that your web looks like. It imply that it may not the same as your physical structure.

Navigation starts from the homepage, e.g. index.htm etc.

建立首頁作為導覽的中心 index.htm as Homepage

導覽是給閱聽人看的,是公開的網站內容組織方式。但考慮:

有公開、也有隱藏的部分。

閱聽人瀏覽的程序和彈性調整的需要。

網路各種多媒體資料管理與流量的效益。

資料與伺服器系統的安全性。

所以,導覽的組織應該與伺服器上的真正實體組織不同,而稱為「虛擬結構」。

Save as 'index.htm' and change its title.

Web Structure


導覽的內容就是企畫案的「結構」

網站專案企畫案範例

第一層導覽稱為「主導覽」,位置常在左側、亦稱左導覽,經常強調具「識別標幟系統」功能的視覺設計。

第二層以下的導覽稱為各層「子導覽」,視覺設計上以較樸實為宜。

導覽的數目

導覽的數目通常以 5-9 個為宜。

太少顯得薄弱;太多,則應規畫第二層子導覽。


導覽的命名 Naming system

導覽屬於虛擬物件,建議所有虛擬物件都以「當地語文」-也就是以中文命名。

避免以「首頁」作為名詞,而應取有個人化風格的站名。

導覽的命名通常在7-8個中文字以內。


主導覽列與導覽按鈕設計的視覺設計

主導覽強調具「識別標幟系統」功能的視覺設計,通常以同一風格的按鈕系列組成,稱為導覽列,其設計包括圖文框與自動化,故另以專文介述。

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

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

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

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

除此之外,還有進階的:

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

Website Structure- Physical 網站結構-實體結構

Web Community Structure 網路社群結構設計

Web Page Structure: Plane Design 網頁結構/平面設計

SharePoint Designer 的導覽設計 

回頁首 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
同類別內相關主題