一、簡單的網格搭配視覺突出的Banner
無論屏幕的大小，這種展現形式可以通過用戶的滾動來展現網站的內容。雖然這種方式的最終效果可能會因為設備的不同、是否喜歡全寬背景或者圖片風格決定，但是在設計之初所繪制的草圖都是大致相同的。
-導航
-文字疊加的首頁banner
-2至4列不帶圖標的信息元素
-主體區(qū)域
-頁腳
這種布局方式可以設計的很干凈，而且可以通過圖片的質量建立一個強大的視覺吸引，并且對響應式框架的良好兼容。頁頭 Banner 除了可以放置出彩的圖片以外，也可以搭配視頻。
二、單頁設計，單欄布局
單頁式設計這幾年非?；穑浅＿m宜于展現極簡的內容，或者專注呈現一個主題。當網站的主題集中，內容也比較固定的時候，無需復雜的布局來呈現，單頁單列式的布局足以應付一切。
-導航
-以圖片文字為主的主體區(qū)域
-頁腳
采用這種布局模式的時候，空間的控制至關重要，相當考驗設計師設計留白和布局平衡的功力。元素和元素之間的疏密關系是需要設計師反復推敲的，如果空間控制不合理會給用戶一種混亂的感覺，如果過于緊密則會產生局促感。
三、經典F式布局
研究表明，用戶在瀏覽網頁的時候，習慣于沿著 F 式的閱讀軌跡來瀏覽信息，也就是說，用戶喜歡從左到右閱讀，然后向下移動，再繼續(xù)從左到右閱讀。
-頁頭和導航
-靠左的一欄相對較寬，展示主要的內容
-靠右常為側邊欄，展示相關鏈接等內容
-頁腳
這種 F 式的閱讀模式對應的網頁布局就是 F 式布局，最關鍵的信息靠左顯示。
四、自定義刪格
那些被整齊分割出來的網頁布局從來都沒有過時過。無論是分割得細碎的網頁區(qū)域還是大塊的頁面區(qū)塊，大多都需要借助一套干凈整齊的柵格來支撐。在此基礎上，內容按部就班地被置于不同的區(qū)塊中，被精心地組織展示出來。
-導航
-柵格
-頁腳
在設計師的作品集頁面中，你可以發(fā)現各種各樣自定義的柵格布局。自定義柵格展示內容的優(yōu)勢在于，它可以同時呈現大量的視覺化的內容。
五、極簡分層
極簡化的設計一直都在流行，它的流行不是沒有原因的。開放式的空間讓用戶感覺更加輕松，也使得其中展現的內容更容易被聚焦。如果極簡化的頁面中加入不多的幾個并列的內容層，可以讓信息更有層次，也使得極簡的頁面擁有了細節(jié)。
-導航
-簡單但視覺力強的輪播圖
-主體區(qū)域
-頁腳
這種設計并不復雜，但是讓頁面更加有趣了，它可以適配更多不同類型的項目。這也解釋了為什么用戶如此的喜愛類似 Apple 官網這樣的設計。
六、瀑布流布局
近幾年比較流行的布局形式，參差不齊的多欄布局，這種布局還會不斷加載數據塊并附加至當前尾部。最早采用此布局的網站是 Pinterest，最適合大量的圖片或者輕量級信息展現。
-輕量級頁頭
-多欄的瀑布流內容展示
-滾動后加載或者手動選擇繼續(xù)加載
-輕量級頁腳或者無頁腳
瀑布流就像我們現實中的平鋪的貨架展示一樣，能夠方便我們快速的瀏覽精美的圖片，有效的降低了界面復雜度，對于觸屏設備來講，交互方式更加直觀。
七、傳統(tǒng)博客類垂直直線性布局
F 型布局的一個特殊分類，文章博客類網站最常用的布局形式，左右兩欄布局，左邊為文章區(qū)域，右側為側邊欄，放置一些輔助功能元素，由上向下的線性瀏覽模式方便我們不會錯過任何一篇文章，由于更新的內容不會很多，所以更加適合文章或者精品內容展現。
-頁頭導航
-精品內容推薦的輪播圖（可選）
-主內容區(qū)域
-側邊欄
-頁腳
垂直線性布局也經常適用于訂閱文章的網頁設計，例如Medium 社區(qū)。
八、單頁分塊布局
顧名思義，就是將單頁的所有內容拆分成塊，隨著滾動，顯示單一塊兒的內容。搭配視差滾動效果，視覺表現會更加出色。由于是先將內容按照屏幕尺寸進行了分塊展現,這樣在瀏覽的時候可以最大限度的減少視覺干擾，專注于
-塊內容的瀏覽。
-導航
-主內容區(qū)域（分塊展現）
-頁腳
單頁分塊兒布局更加適合產品類網頁類展示。
九、其他布局
除了以上的 8 種布局形式，你還可以結合自己網站的功能和特點進行相互的組合，結合每種布局的特點進行合理的結合，這樣才能設計出更加易用美觀的網站。
13450931319
微信登錄
QQ登錄
微博登錄
售前咨詢
