長圖設計在讀屏時代被廣泛使用。除了最直接想到的網站和APP頁面，還有個人作品的長圖文包，長海報，電商的產品詳情頁，微博微信的長圖文廣告等等。所以不僅是界面設計師需要知道長圖文設計的構圖方法，普通設計師也可以知道壹些長圖文頁面的設計技巧。
為了讓讀者保持興趣，停留更久，我們的設計不僅要好看，還要提供壹些視覺引導，讓內容的體驗從頭到尾都是壹致的。為了實現這個目標，我們需要進行有針對性的設計。
希望這篇文章能給妳壹些幫助。那麽我們來看看幾種常見的長頁面設計的簡單設計方法。
重復是為了統壹視野，提醒用戶或讀者，他們仍然停留在相同的內容中。重復可以是重復的字體、顏色、大小、空格、表格、框架等。並不是嚴格復制相同的元素，而是按照壹定的規則在頁面中產生連續的變化。也就是說，在使用重復元素時，在變化中應該有規律和規則的變化。
數字、單詞、英語、排版形式、結構等的重復▼
重復排版形式、結構等▼
重復形狀、符號、特征等▼
重復顏色、色塊應用等▼
除了指出的重復之外，其實不難發現，各種重復的方法並不是獨立存在的，往往各種方法混合應用。當然，重復的方法遠不止列舉的幾種。
F-layout是壹種非常傳統但又非常科學的布局，是基於大量眼動追蹤實驗的經典布局。符合大多數人的瀏覽習慣。我們在看壹個頁面的時候，壹般會看左上角(比如logo、導航、標題等。)，然後從左到右優先橫向內容，再從上到下瀏覽整個頁面，這樣就形成了壹個F型的視覺路徑。
NNGroup的眼球追蹤研究圖(紅橙色代表註意力集中的熱點，藍色代表不感興趣的部分)▼
從F形布局和眼動追蹤實驗中，我們可以得出以下啟示:
1.最重要的信息(如徽標、公司名稱、標題、導航等。)應該盡量放在最上面(甚至到左上角)，而不是右邊。
2.壹般可以把壹些次要的東西放在右邊，比如反饋、咨詢、廣告、推薦等。
3.在設計的時候，左邊的信息要多下功夫，這是註意力集中的地方，右邊通常被當作空白。
4.多文本多內容頁面(如新聞、社區、活動介紹頁面等。)可以優先考慮F布局。
36Kr網頁的f型布局▼
envato tuts+ page的f型布局▼
遊戲活動頁面f型布局▼
活動頁面的f形布局▼
除了F型布局，S型(也叫Z型和Z型)也是非常經典的頁面布局。同樣，它也符合人類的瀏覽過程，這是通過眼動追蹤實驗證明的。
當我們瀏覽壹頁時，我們的眼睛會左右移動閱讀，視覺停止點會上下變化，從而形成壹個左右移動的“S”形路徑。這種布局廣泛用於長頁面，尤其是在介紹產品圖片時。使用S形布局會形成視覺導向，通順閱讀整頁。
眼球追蹤研究圖▼
S形布局在網頁中的最初應用可能是從官網開始的，蘋果，用左邊的字和右邊的字形成閱讀連貫性。
比如在《折疊之上》中，下面iPad的詳情頁落在iPad的圖片上(圖片比文字更容易成為視覺中心)，然後向左讀產品名稱和介紹。讀完後，隨著頁面向下滾動，視覺被第二塊屏幕上iPad的圖片吸引，繼續向右閱讀圖片的介紹...多次重復這種視覺運動，整個頁面就會閱讀流暢，形成壹個S形的視覺瀏覽路徑，非常明顯。
早期蘋果官網的產品詳情介紹頁面▼
除了蘋果，這種排列方式在很多網站頁面、長篇廣告、組合包裝中都有廣泛應用。
類似S型布局產品詳情介紹頁面▼
其他S型布局頁面▼
可以看出，S形布局很受長圖排版的歡迎，符合人們潛意識的閱讀習慣。
卡片布局是壹種源自網格系統的布局方法，也稱為容器風格設計。它將文字、圖片等信息元素分割成壹張卡片，通過卡片的積累形成完整、簡潔、規範的頁面，通常用於電子商務(如淘寶、京東。COM)、平臺網站(如戰酷、behance、Pinterest、優酷)等信息量較大的頁面。當然，如果我們在設計中遇到復雜的圖文，也可以考慮使用這種布局，讓我們的設計更加簡潔。
卡片布局頁面▼
當然，頁面的布局遠不止上面列舉的方法，但這些方法都是比較經典和常用的。同時，這些方法並不是單獨存在的，它們也會在應用中相互混合共存，服務於壹個完整美觀的頁面。相信在充分了解了這些排版方法之後，我們在設計長篇頁面或者包裝展示作品的時候就不會迷茫，不知道如何下手了。
先分享到這裏吧，希望對妳有幫助。