文|?I C E H?圖?|來自網(wǎng)絡(luò)及各網(wǎng)站截圖

長圖設(shè)計在屏幕閱讀時代應(yīng)用得非常廣泛，除了最直接想到的網(wǎng)站和APP頁面，還有個人作品集的長圖包裝、長條海報、電商的產(chǎn)品詳情頁、微博微信的長圖廣告等等。所以不只是界面設(shè)計師需要了解長圖設(shè)計的構(gòu)圖方法，作為普通設(shè)計者，我們同樣可以了解一些長圖長頁面的設(shè)計技巧。

為了能夠讓閱讀者保持興趣不停讀下去，停留更長的時間，我們的設(shè)計不僅要好看而且還要提供一定的視覺引導(dǎo)，讓內(nèi)容從頭到尾的體驗都是一致的。為了達(dá)成這個目標(biāo)，我們需要有針對性地進(jìn)行設(shè)計。

希望這篇文章能夠帶給你一些幫助。那么下面我們一起來了解一下，關(guān)于長圖長頁面設(shè)計的幾種較為常用的簡單設(shè)計方法。

01/利用重復(fù)的元素進(jìn)行布局

重復(fù)是為了讓視覺形成統(tǒng)一，提醒用戶或閱讀者依然是停留在同個內(nèi)容之中，重復(fù)可以是重復(fù)字體，顏色，大小，空間，形式，框架等，它并非是嚴(yán)格復(fù)制同樣的元素，而是按照一定的規(guī)律，在頁面中產(chǎn)生連續(xù)的變化。也就是說在利用重復(fù)元素的時候，應(yīng)該在規(guī)律中有變化，在變化中有規(guī)律。

重復(fù)數(shù)字、文字、英文、排版形式、架構(gòu)等▼

重復(fù)排版形式、架構(gòu)等▼

重復(fù)形狀、符號、特性等▼

重復(fù)顏色、色塊應(yīng)用等▼

除了點出來的重復(fù)外，其實也不難發(fā)現(xiàn)各種重復(fù)的方法其實不是獨立存在的，常常是各種方法摻雜著應(yīng)用。當(dāng)然，重復(fù)的方法也遠(yuǎn)遠(yuǎn)不止是列舉的幾種。

02/利用F型排版進(jìn)行空間布局

F型布局是一種十分傳統(tǒng)但又非?？茖W(xué)的版式布局方式，它是基于大量的眼動追蹤實驗后總結(jié)出來的一種經(jīng)典布局方式。符合大部分人的瀏覽習(xí)慣。我們看一個頁面，通常情況下是先看左上角（例如logo、導(dǎo)航、標(biāo)題等），然后優(yōu)先從左往右看水平方向的內(nèi)容，再著從上往下瀏覽整個頁面，由此便形成一個F狀的視覺路徑。

NNGroup 的眼動跟蹤研究圖（紅橙代表注意力集中熱區(qū)，藍(lán)色代表不感興趣部分）▼

從F形布局及眼動追蹤實驗我們可以得出以下幾點啟發(fā)：

1.最重要的信息（例如logo、企業(yè)名稱、標(biāo)題、導(dǎo)航等）盡量放在頂部（甚至精確到左上角），盡量不要放在右邊

2.右邊通?？梢苑乓恍┍容^次要的東西，例如意見反饋、咨詢、廣告、推薦等

3.設(shè)計的時候左邊信息要更下功夫，這是注意力比較集中的地方，右邊通常會以留白處理

4.多文字多內(nèi)容的版面（例如新聞、社區(qū)、活動介紹頁等）可以優(yōu)先考慮F型布局

36Kr網(wǎng)頁的F型布局▼

envato tuts+頁面的F型布局▼

游戲活動頁面的F型布局▼

活動頁面的F型布局▼

03/利用S型或Z型排版進(jìn)行空間布局

除了F型布局外，S型（也叫“之”型、“Z型”）也是頁面布局中非常經(jīng)典的一種，同樣，他也是符合人類的瀏覽流程，都是通過眼動追蹤實驗證明的。

當(dāng)我們通覽一個頁面時，我們的眼球會左右移動進(jìn)行閱讀，視覺停留的點也會頁面從上往下隨著變化，由此形成一個左右移動的“s”型路徑。這種布局在長頁面中應(yīng)用得非常廣泛，特別是介紹某個產(chǎn)品某張圖片的時候，利用S型布局，會形成一個視覺引導(dǎo)，很流暢地閱讀完整個頁面。

眼動跟蹤研究圖▼

最初在網(wǎng)頁中應(yīng)用S型布局的可能是從蘋果官網(wǎng)最先開始的，利用左圖右字、右圖左字形成閱讀連貫性。

比如下面這張iPad的詳情頁，在第一屏中，我們視覺中心起來便落到iPad的圖片上面（圖片比文字更容易成為視覺中心），然后是往左讀取產(chǎn)品名稱和介紹，讀完之后隨著頁面往下滾動，視覺又被第二屏的iPad圖片所吸引，繼續(xù)往右閱讀圖片的介紹......多次重復(fù)這種視覺移動，整個頁面就很流暢地閱讀完，形成s型的視覺瀏覽路徑，顯得非常直觀，閱讀起來十分輕松自然，獲取信息也非常輕松。

早期蘋果官網(wǎng)的產(chǎn)品詳情介紹頁面▼

除了蘋果，現(xiàn)在許多網(wǎng)站頁面、長圖廣告、作品集包裝中也廣泛應(yīng)用這種排列布局。

類似的S型布局產(chǎn)品詳情介紹頁面▼

其他S型布局頁面▼

由此可見S型布局的非常受歡迎的長圖排版方式，符合人們潛意識的閱讀習(xí)慣。

04/利用卡片式布局

卡片式布局是柵格系統(tǒng)下引申出來的一種布局方式，也叫容器風(fēng)格設(shè)計，是把文字圖片等信息元素集中劃分在一個卡片之中，通過卡片的累積形成一個完整而又簡潔規(guī)范的頁面，通常用在電商（例如淘寶、京東）、平臺網(wǎng)站（例如站酷、behance、Pinterest、優(yōu)酷）等信息量大而復(fù)雜的頁面之中。當(dāng)然，設(shè)計中如果我們在遇到圖文非常復(fù)雜的情況下，我們也可以考慮用這種布局來讓我們的設(shè)計更加簡潔。

卡片式布局的頁面▼

05/最后的總結(jié)

頁面的布局當(dāng)然遠(yuǎn)遠(yuǎn)不止上面列舉的這幾種方法，但這幾種是比較經(jīng)典和常用的方法。同時，這些方法也并非是單獨存在的，他們在應(yīng)用中也會互相摻雜，相互并存，共同服務(wù)一個完整美觀的頁面。相信充分了解這幾種布局的方法后，我們在設(shè)計長圖頁面或包裝展示自己的作品的時候不會一頭霧水，不知如何下手。

先分享到這里啦，希望對你有所幫助。