Header的設計有規則嗎？

你沒有第二次機會去打造「第一印象」

對人的第一印象，幾秒就產生，對產品也是。因此頁首(Header)的設計會影響一個網頁/App 的第一印象。

這個「第一印象」可能就是
「這是什麼網站？介紹公司的？賣東西的？還是一個部落格？」
「形象是年輕的？成熟穩重的？有創意？」

看到購物車的icon，就知道這是一個購物網站。
看到「聯絡我們」，就知道這是一個咨詢/服務公司。

因此訪客是透過網站的第一眼，判斷這網站是否對他有用，並透過header瞬間在腦中建構網站的架構，快速找到想要的資訊。

Header 的定義

首先要說說什麼是Header.
header 泛指在手機state bar, 或者網站的網址列下方、有功能性的空間。

而header 常見於2種數碼產品（Digital Product) 上，App 及 Website. 雖然header 在website及app 的感覺很相似，但深入研究後，會發現header 在這2種產品上的表現會不一樣。

注意在程式員(Programmer)的世界中，header 可能是指HTTP header fields， 所以溝通時要說清楚是網站/App介面最上面的Header.即使同為手機App，Header 區域的名稱在iPhone 和Android 上是不同的稱呼，在iPhone 稱為Navigstion bar，在Andriod 稱為 Main action bar.

手機App

首先講比較簡單的App.

為什麼說App 比較簡單？因為手機螢幕大小相比電腦網站有限得多，所以沒有太多空間可以發揮，因此相對上就比較統一。而App 在Pad 的設計多數也根據手機版簡單拉寛。

另外就是，最常見的2種Header，是根據手機界的兩位大佬iOS及Android推出自身的Header設計範本。

即使同為手機App，Header區域的名稱在iPhone 和Android 上是不同的稱呼，在iPhone 稱為Navigstion bar，在Andriod 稱為 Main action bar。

iOS 的設計範本 Human Interface Guidelines 中有提到，Header 的標題置中，若有Menu 就放左。

Navigation bars