Skip to main content Skip to docs navigation

頁首

一個網站的第一印象,提供一目瞭然的整理架構。


關於頁首元件

頁首是一個網站的第一印象,一個好的頁首能提供使用者一目瞭然的整理,幫助使用者對網站的架構與規模有概念。清楚的架構能夠幫助使用者辨認出所在位置,並且被迅速地引導到達特定頁面。另一方面,頁首也扮演者當使用者迷路時可以總是找到並回到的地方。

使用規範

何時該使用頁首

每個網站都應該有頁首。

頁首易用性

只將最重要的部分放在頁首。 組織結構、服務一覽或是使用者較不常用但也存在的服務建議放在頁尾。 避免組織結構導航。 不要在頁首直接列出您的機構的組織結構。相反地,根據由使用者最常用服務、最常點的連結來建構您的頁首。 使用簡短易懂的文字。 使用簡短的文字,避免使用一般人難以理解的行話或術語。

元件設計

基本頁首 Basic Header

基本頁首包括網站名稱、頁面連結、搜尋列與網站設定。預設的語言設定選單是多語言。調整視窗寬度檢視響應式 (RWD) 設計,或從手機觀看此網頁檢視效果。

範例連結

頁首加下拉式選單 Basic header with dropdowns

服務項目可以是文字連結,也可以是下拉選單。

範例連結

語言設定 Language Setting

雙語或多語選單

範例連結
範例連結

底色 Background Color

三種不同底色

範例連結
範例連結
範例連結

一列式 Single Row

將所有重要內容排成一列,不分行顯示。

範例連結

長標題 Long Heading

當網站名稱長度超過適當範圍時,應換行顯示

範例連結

可以自行決定是否在頁首內加上商標

範例連結
範例連結

網站副標題 Sub-heading

在網站名稱下方,加上副標題或是補充文字,說明網站的定位、主要功能、或服務範圍。

範例連結
範例連結

手機版漢堡按鈕展開方式 Hamburger Button Interaction

百葉窗式向下展開或抽屜式從右滑入。

範例連結