一、F型
F式布局源於NNGroup（Nielsen Norman Group）的一項研究項目，他們跟蹤了超過200名用戶瀏覽各種網頁時的眼動軌跡，發現用戶的眼球快速瀏覽網頁時，瀏覽的軌跡會先水平方向瀏覽內容區塊的上部，接者快速沿螢幕左側向下垂直瀏覽，看到感興趣的內容才會再繼續橫向仔細瀏覽，但人的專注力是很有限的所以越往下半部，會發時間橫向仔細瀏覽的內容就愈少，因此整體瀏覽的熱點圖看起來就大致會像是一個F的形狀。
- 許多關於新聞或是部落格或是搜尋引擎等，內容著重於文字閱讀的網站都會使用這種排版，方便使用者快速閱讀及找到有效的資訊
- 在F型的布局中，為了避免使用者因快速瀏覽的習慣，而遺漏掉我們希望在網站中傳達的重要訊息，可以參考下列幾點作法:
- 在頁面的前兩個段落中提供最重要的資訊。
- 使用標題和副標題，讓它們看起來比普通文本更重要，更明顯，因此使用者可以快速區分它們，例如透過文字的字級大小、粗體等。
- 用帶有大部分信息的單詞開始標題和副標題，讓使用者透過標題就可以大致清楚知道接下來的內容。
- 利用設計元素將相關的內容作分組，例如用邊框或使用不同的背景來標註出不同的文字區塊。
- 使用項目符號和數字來調出列表或流程中的項目。
二、Z型
Z型的網站布局基本上也是根據使用者的瀏覽習慣，在不是以文本為主的頁面上，會從頂端水平線開始，由左至右(根據閱讀習慣)掃描，因此Logo及導覽列多被放置在頂端。結束後往下一部分移動重複水平瀏覽。
- Z型布局，是在開始網頁設計項目時很好起步的方法，因為它解決許多網站的核心要求：品牌(Logo)，層次結構(清楚的導覽列)，結構(圖文搭配的內容說明)和號召性用語(CTA按鈕)。來達到提高轉換等商業上的目標。
- Z型布局最令人讚賞的是它的簡單性和引導搭配號召性用語。所以若硬是在復雜的內容結構上強制使用Z型布局可能會效果不佳，但對於設計一個基本的網站構建，是可以成功帶來有助於提高轉換率的順序感。
三、雜誌式布局
雜誌式布局常用在媒體出版物的網站，搭配格線去做布局可以首頁展示出較多內容(例如最新訊息，焦點文章等等)，再加上可以在格線中做出變化，創造出資訊的層次結構，讓使用者快速判斷哪些資訊是最重要或是最新的，進而透過首頁的展示更輕易地進入更詳細的資訊內容文章。
因此首頁的搭配縮圖，以及標題很重要，因為是決定是否吸引使用者重要元素。
四、卡片式布局
需要展示大量內容例如作品收集展示、圖片展示、視頻網站、新聞部落格網站等。適合利用卡片式布局讓大量內容有組織的呈現，並且對資訊內容有一致的編輯或操作功能。利用卡片式布局可清楚的展示內容，並讓使用者簡單快速的進行相關操作。
- 卡片和卡片之間要有適當留白不可太過壅擠，資訊會較被凸顯，使用者瀏覽也較不會疲勞。
五、首頁大圖布局
首頁大圖布局的重點在一開始就展現一張強而有力的圖片或是一段影片給使用者，吸引目光也激起想看下去的慾望，讓使用者繼續瀏覽網站。適合用在特定產品展示。利用網站替品牌打造一個好的形象。
文章標籤
全站熱搜
留言列表
書籍分享 (0)
