LCCNET 聯成電腦

菜鳥救星

m_nav_line m_nav_line

HOT影片

m_nav_line m_nav_line

不可不知!3種常見的版面設計

icon_fb icon_twitter icon_google LINE it!
article_main_img

文、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
 

 

 

 

痞客邦Blog:http://lccnetvip.pixnet.net/blog
FB粉絲團:https://www.facebook.com/lccnetzone
菜鳥救星:https://www.facebook.com/greensn0w