zoom教室下載
文、G小編
隨著人手不只一機的網路時代來臨，每天被一大堆資訊轟炸，在這眾多的廣宣要如何突破重圍，引起別人注意呢？除了有好的設計、好的文案外，版面設計更為重要，而版面設計不僅是針對網頁和網站，就連Banner、DM…等平面廣宣其實也都適用喔！
設計的前提必需建立在使用者之上，如果設計的在好，不合觀眾的胃，那麼一樣是白做工，所以UX設計變得更為重要。
優質網站導覽(navigation)的簡單4步驟
6個技巧 更了解使用者體驗
接下來分享Gutenberg Diagram、Z-Pattern和F-Pattern三種常見的版面設計模式。
Gutenberg Diagram
Gutenberg Diagram所提出的概念，是人們習慣由左而右、從上到下的閱讀，因此，將可視的內容劃分為四個象限，而左上至右下的箭頭Reading Gravity，則稱為人們閱讀時注意力移動的軌跡。
圖片來源：https://goo.gl/E49JSJ
(1). 頁面的左上區域Primary optical area，是使用者視覺聚焦的區域，也是較重要的部分，因此建議，將品牌的logo或是重要的資訊放置於此區。
(2). 閱讀習慣的第二階段，則是頁面的右上區域Strong follow area，是第二焦點。
(3). 左下區域Weak visual area，是使用者較易忽略的內容。
(4). 最後，當使用者觀看到右下區域Terminal area時，已經是內容的終點，要喚起使用者的行動這會是最好的地方，建議可以放置call-to-action的按鈕或是聯繫資訊。
圖片來源：https://goo.gl/UX6Afi
所以，在設計頁面時，除了這四個象限外，還必需考量Reading Gravity，將重要的內容移動到圖表的路徑中，接下來看看幾個Gutenberg Diagram的範例。
OH Tele
Rocket Club
Revyver HQ
Wellness Class
以上範例圖片來源：https://goo.gl/LFbaa2
Z-Pattern
Z-Pattern和Gutenberg Diagram概念很相似，起點、終點位置一樣，也都有個Z字型，不同的是，Z-Pattern的概念認為Reading Gravity不是由左上至右下，而是像Z字母，如下圖。
圖檔來源：https://goo.gl/Q4uNZ9
在Z-Pattern下，會建議配置如下圖。
圖檔來源：https://goo.gl/stijeS
Z-Pattern有時也被稱為反向的S-Pattern，因為瀏覽頁面時的路徑可能是曲線的關係，當網頁資訊過多，則發展出Zig-Zag Pattern，就是由很多個Z組成，而這和一般人在閱讀時的習慣相同。
而Z-Pattern也造就了黃金三角形，在這麼多的三角形的組成中，當然屬頁面最上方的最重要，也是視覺最聚焦的位置，因此，重要的資訊一定要記得放在黃金三角形中。(如下圖)
接下來，看看屬於Z-Pattern的範例吧！
Facebook
Basecamp
Evernote
Dropbox
以上範例圖片來源：https://goo.gl/Vo9x88
F-Pattern
F-Pattern由Nielsen Norman Group企業，在一項研究中所發現的結果。他們紀錄下232位使用者瀏覽網頁的軌跡，看似F字母。使用者瀏覽網頁時會先平行看過上方，接著往第二行水平閱讀，閱讀的軌跡會比第一次更短，最後，眼球會垂直往下移動左側的內容，如果看到有興趣的內容，則會往右側細看(如下圖)。
當然，人們瀏覽的方式不會只是簡單的F，有時候看起來更像E或是L，從下圖可以看到這三個網站，使用者眼球瀏覽的熱點圖，這三個網站類型由左而右分別是：一般網站的關於我們頁、電商網站的產品頁、搜尋引擎的結果頁；看最多的依序是紅色、黃色、藍色、灰色。
圖檔來源：https://goo.gl/vsLdBH
這樣的模式告訴我們，人們的閱讀模式不再是一行一行觀看，只是概略掃瞄，針對有興趣的議題才會去細看，因此，延著F作為重要資訊的佈局，而F以外的位置則可針對內容延伸。
F-Pattern的版面設計比較適用於文字密集的頁面，例如部落格文章、搜尋結果頁、或是比較長的產品銷售頁，來看看有哪些F-Pattern的範例吧！
CNN
圖檔來源：https://goo.gl/c2RBXH
Dovico
Dynamic Yield
The Joint Chiropractic
以上範例圖片來源：https://goo.gl/iq7bjn
上面三種版面設計的方式沒有絕對的好壞，它並不是一定要遵循的準則，只是一個提供參考的原則。看完了小編的分析，可以從中得知，人們瀏覽的方式幾乎都是從頁面的左上角開始，不管，你會採用哪種設計模式，重要的是，資料必需區分其重要性，透過清晰的視覺設計可以引導使用者聚焦，並且完成期望的目標，例如call-to-action、landing page…等。下次設計前不妨參考一下常見的版面設計模式吧！
參考文章：
1.3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern
2.THE GUTENBURG DIAGRAM IN DESIGN
3.The Gutenberg Diagram in Web Design
4.Understanding the Z-Layout in Web Design
5.Z-Shaped Pattern For Reading Web Content
6.Understanding the F-Layout in Web Design
7.F-Shaped Pattern For Reading Web Content
8.F-Shaped Pattern for Reading Content
9.What is the F-Pattern and How to Use It for Increased Conversions
