頁面布局
頁面布局大致可分為網(wǎng)頁（web）噪舀、軟件魁淳、手機三類，其中web和軟件有較大相似性与倡，不作區(qū)分界逛。軟件界面布局依功能而決定，布局復(fù)雜蒸走。因為定義種類的標(biāo)準(zhǔn)和方式不同仇奶，頁面布局類型分類較多，先總結(jié)比較常用和普遍的布局方式，以其他方式做補充该溯。
頁面布局的定義
頁面布局是指岛抄，在設(shè)計頁面的過程將頁面各要素通過合理、有效狈茉、統(tǒng)一的規(guī)則進行排版夫椭，產(chǎn)生很好的傳播信息的視覺效果。一般來說氯庆，都會基于下原則進行頁面布局設(shè)計：
（１）對比：是防止頁面元素過于單一或沒有差異性蹭秋。假如空間、大小堤撵、形狀仁讨、字體、線條实昨、顏色等設(shè)計元素都要各不相同洞豁，那么就要制造較大的差別，要讓頁面引人注目荒给。
（２）重復(fù)：可Ｗ重復(fù)顏色丈挟、形狀、線寬志电、字體曙咽、大小和圖片等等。既能夠増加條理性挑辆，也可増強頁面的統(tǒng)一性例朱。
（３）對齊：在頁面上，不同元素不能孤立存在之拨，而應(yīng)當(dāng)構(gòu)建特殊的視覺關(guān)聯(lián)效果茉继，從外觀上給予用戶更為清爽咧叭、稽巧和情緒化的體驗蚀乔。
（４）親密性：頁面上的元素不應(yīng)當(dāng)孤立的存在，彼此之間存在親密性菲茬，形成一個視覺單元吉挣。這樣可有助于信息的架構(gòu)，減少信息組織的混亂婉弹。
網(wǎng)頁布局類型
網(wǎng)頁版式的基本類型主要有骨骼型睬魂、國字型、拐角型镀赌、框架型氯哮、滿版型、分割型商佛、中軸型喉钢、曲線型姆打、傾斜型、對稱型肠虽、焦點型幔戏、自由型等12種。
1.“國”字型布局
也可以稱為“同”字型税课，是一些大型網(wǎng)站所喜歡的類型闲延，即最上面是網(wǎng)站的標(biāo)題以及橫幅廣告條，接下來就是網(wǎng)站的主要內(nèi)容韩玩，左右分列兩小條內(nèi)容垒玲，中間是主要部分，與左右一起列到底找颓，最下面是網(wǎng)站的一些基本信息侍匙、聯(lián)系方式、版權(quán)聲明等叮雳。這種結(jié)構(gòu)是我們在網(wǎng)上見到的差不多最多的一種結(jié)構(gòu)類型想暗。
口字型、同字型帘不、回字型都可歸屬于此類说莫，是一些大型網(wǎng)站所喜歡的類型，即最上面是網(wǎng)站的標(biāo)題寞焙、導(dǎo)航以及橫幅廣告條储狭，接下來就是網(wǎng)站的主要內(nèi)容，左右分列一些小條內(nèi)容捣郊，中間是主要部分辽狈，與左右一起羅列到底，最下面是網(wǎng)站的一些基本信息呛牲、聯(lián)系方式刮萌、版權(quán)聲明等。這種布局的優(yōu)點是充分利用版面娘扩，信息量大着茸，缺點是頁面擁擠，不夠靈活琐旁。這種結(jié)構(gòu)是我們在網(wǎng)上見到的差不多最多的一種結(jié)構(gòu)類型涮阔，常用于門戶網(wǎng)站的設(shè)計。
2.拐角型匡型布局或T型布局可歸于此類灰殴，在匡型布局中敬特，常見的類型有上面是標(biāo)題與導(dǎo)航，左側(cè)是展示圖片的類型和最上面是標(biāo)題及廣告，右側(cè)是導(dǎo)航鏈接的類型伟阔。這種版式在韓國的網(wǎng)站中常見尸变。T布局就是指頁面頂部為橫條網(wǎng)站標(biāo)志與廣告條，下方左面為主菜單减俏，右面顯示內(nèi)容的布局召烂，因為菜單背景色彩較深，整體效果類似英文字母T娃承，所以稱之為T形布局奏夫。這種布局的優(yōu)點是頁面結(jié)構(gòu)清晰，主次分明历筝，是初學(xué)者最容易上手的布局方法酗昼。缺點是規(guī)矩呆板，如果在細(xì)節(jié)色彩上不注意梳猪，則很容易讓人感覺枯燥無味麻削。
2.1“匡”字型布局
這種結(jié)構(gòu)與上一種其實只是形式上的區(qū)別，它去掉了“國”字形布局的最右邊的部分春弥，給主內(nèi)容區(qū)釋放了更多空間呛哟。這種布局上面是標(biāo)題及廣告橫幅，接下來的左側(cè)是一窄列鏈接等匿沛，右列是很寬的正文扫责，下面也是一些網(wǎng)站的輔助信息。
2.2.T型布局
“T”結(jié)構(gòu)布局形式逃呼。所謂“T”結(jié)構(gòu)鳖孤，就是指頁面頂部為橫條網(wǎng)站標(biāo)志+廣告條，下方左面為主菜單抡笼，右面顯示內(nèi)容的布局苏揣，整體效果類似英文字母“T”，所以稱之為“T推姻，形布局平匈。這是網(wǎng)頁設(shè)計中用得最廣泛的一種布局方式。這種布局的優(yōu)點是頁面結(jié)構(gòu)清晰拾碌，主次分明吐葱，是初學(xué)者最容易上手的布局方法街望。缺點是規(guī)矩呆板校翔，如果不注意細(xì)節(jié)色彩，很容易讓人”看之無味“
3.“三”字型布局
是一種簡潔明快的網(wǎng)頁布局灾前，在國外用的比較多防症，國內(nèi)比較少見。這種布局的特點是在頁面上由橫向兩條色塊將網(wǎng)頁整體分割為三部分，色塊中大多放置廣告條與更新和版權(quán)提示蔫敲。
4.“川”字型布局
整個頁面在垂直方向分為三列饲嗽，網(wǎng)站的內(nèi)容按欄目分布在這三列中，最大限度地突出主頁的索引功能奈嘿。
5貌虾，封面型布局（滿版型/海報型/POP型）
POP布局屬于此類。就是指頁面布局像一張宣傳海報裙犹，以一張精美圖片作為頁面的設(shè)計中心尽狠，頁面以圖像充滿整版。主要以圖像為訴求點叶圃，將少量文字壓置于圖像之上袄膏。滿版型給人以舒展、大方的感覺掺冠，視覺傳達效果直觀而強烈沉馆，缺點就是速度慢。隨著當(dāng)今網(wǎng)絡(luò)帶寬不斷變大德崭，這種版式在商業(yè)網(wǎng)站設(shè)計尤其是網(wǎng)絡(luò)廣告中比較常見斥黑。
這種類型基本上是出現(xiàn)在一些網(wǎng)站的首頁，大部分為一些精美的平面設(shè)計結(jié)合一些小的動畫眉厨，放上幾個簡單的鏈接或者僅是一個“進入”的鏈接甚至直接在首頁的圖片上做鏈接而沒有任何提示心赶。這種類型大部分出現(xiàn)在企業(yè)網(wǎng)站和個人主頁，如果說處理的好缺猛，會給人帶來賞心悅目的感覺缨叫。
6.Flash布局
這種布局是指整個網(wǎng)頁就是一個Flash動畫，它本身就是動態(tài)的荔燎，畫面一般比較絢麗耻姥、有趣，是一種比較新潮的布局方式有咨。其實這種布局與封面型結(jié)構(gòu)是類似的琐簇，不同的是由于Flash強大的功能，頁面所表達的信息更豐富座享。其視覺效果及聽覺效果如果處理得當(dāng)婉商，會是一種非常有魅力的布局
7.標(biāo)題文本型布局
標(biāo)題文本型布局是指頁面內(nèi)容以文本為主，這種類型頁面最上面往往是標(biāo)題或類似的一些東西渣叛，下面是正文丈秩，比如一些文章頁面或注冊頁面等就是這一類。
8.框架型布局,
采用框架布局結(jié)構(gòu)淳衙，常見的有左右框架型蘑秽、上下框架型和綜合框架型饺著。由于兼容性和美觀等因素，這種布局目前專業(yè)設(shè)計人員采用的已不多肠牲，不過在一些大型論壇上還是比較受青睞的幼衰，有些企業(yè)網(wǎng)站也有應(yīng)用。
框架型版式常用于功能型網(wǎng)站缀雳，例如郵箱渡嚣、論壇、博客等肥印。1）左右框架型這是一種左右分別為兩頁的框架結(jié)構(gòu)严拒，一般左面是導(dǎo)航鏈接，有時最上面會有一個小塊標(biāo)題或標(biāo)志竖独，右面是正文裤唠。我們見到的大部分的大型論壇都是這種結(jié)構(gòu)，一些企業(yè)網(wǎng)站也喜歡采用莹痢。這種類型結(jié)構(gòu)非常清晰种蘸，一目了然。
2）上下框架型與左右框架類似竞膳，區(qū)別僅僅在于這是一種上下分為兩頁的框架航瞭。
3）綜合框架型這是上述兩種結(jié)構(gòu)的結(jié)合，是一種相對復(fù)雜的下型框架結(jié)構(gòu)坦辟，較為常見的類似于“拐角型”結(jié)構(gòu)的刊侯，只是采用了框架結(jié)構(gòu)。常見的郵箱網(wǎng)站的版式都是綜合框架型锉走。
9.頂部大圖Banner+簡單的柵格
無論屏幕多大滨彻，這種布局都能夠為用戶展示充足的內(nèi)容，供用戶瀏覽和探索挪蹭。雖然這種布局隨著屏幕亭饵、設(shè)備而有所差異，有的設(shè)計師會傾向于設(shè)計成固定寬或者橫跨整個頁面的布局梁厉，但是總體的模式都大同小異辜羊。
·導(dǎo)航欄·頂部大圖，圖片上疊有文字標(biāo)題·2~4個分欄词顾，承載不同類別的信息八秃，有的會有圖標(biāo)·主要的內(nèi)容區(qū)域·頁腳
這種布局設(shè)計干凈清爽，有足夠強的視覺表現(xiàn)力肉盹，并且常常采用的響應(yīng)式設(shè)計昔驱，斷點也很好控制。頂部大面積的輪播圖或者Banner 也有許多插件或者應(yīng)用來幫你實現(xiàn)垮媒。
原理：這種布局中，每個元素都各司其職，并且整個流程是富有邏輯的，頂部大圖足以營造氛圍，給予用戶特定的體驗，下面的次一級元素能夠做的很好的支撐。
相關(guān)趨勢：越來越多這類網(wǎng)頁開始采用色彩豐富的插畫式的圖標(biāo)验残，而扁平化的設(shè)計和這種布局頁面有著天然的契合胆绊。
10.單頁設(shè)計，單欄布局
單頁式設(shè)計這幾年非陈道火辽聊，它非常適宜于展現(xiàn)極簡的內(nèi)容玛臂，或者專注呈現(xiàn)一個主題。當(dāng)網(wǎng)站的主題集中膜蠢，內(nèi)容也比較固定的時候庶橱，無需復(fù)雜的布局來呈現(xiàn)奏瞬，單頁單列式的布局足以應(yīng)付一切。
·導(dǎo)航·主要內(nèi)容區(qū)域，文字+圖片為主·頁腳
采用這種布局模式的時候，空間的控制至關(guān)重要赶舆，相當(dāng)考驗設(shè)計師設(shè)計留白和布局平衡的功力。元素和元素之間的疏密關(guān)系是需要設(shè)計師反復(fù)推敲的悠咱，如果空間控制不合理會給用戶一種混亂的感覺谆奥，如果過于緊密則會產(chǎn)生局促感闯第。
原理：單頁式設(shè)計適合于小網(wǎng)站或者小型項目的展示填帽，它可以用來制造一個簡單的介紹頁面，讓簡單的內(nèi)容顯得不那么單調(diào)咙好，強化內(nèi)容的形式感和重量感篡腌。對于內(nèi)容簡單的博客網(wǎng)站而言，單頁式設(shè)計也是不錯的選擇勾效。
相關(guān)趨勢：和單頁設(shè)計結(jié)合最緊密的應(yīng)該是動效設(shè)計和視差滾動嘹悼，他們可以讓單頁式設(shè)計更加生動有趣，淡化單調(diào)的設(shè)計层宫，賦予頁面更強的生命力杨伙。
11、自定義柵格
方塊元素被用來組織排列他的作品卒密。這是組織排列任意數(shù)量內(nèi)容的簡單途徑缀台，讓事物保持簡潔。
到處都是方塊哮奇，移動鼠標(biāo)時還有個有趣的動畫效果膛腐。不過除了組織內(nèi)容之外睛约，你會發(fā)現(xiàn)方塊元素也成為了設(shè)計風(fēng)格的一部分。它是這種風(fēng)格關(guān)鍵的決定性元素哲身。
那些被整齊分割出來的網(wǎng)頁布局從來都沒有過時過辩涝。無論是分割得細(xì)碎的網(wǎng)頁區(qū)域還是大塊的頁面區(qū)塊，大多都需要借助一套干凈整齊的柵格來支撐勘天。在此基礎(chǔ)上怔揩，內(nèi)容按部就班地被置于不同的區(qū)塊中，被精心地組織展示出來脯丝。
在設(shè)計師的作品集頁面中商膊，你可以發(fā)現(xiàn)各種各樣自定義的柵格布局。自定義柵格展示內(nèi)容的優(yōu)勢在于宠进，它可以同時呈現(xiàn)大量的視覺化的內(nèi)容晕拆，看起來足夠豐富又不會落于下乘。下面這個圖庫的效果看起來就相當(dāng)震撼材蹬。
在柵格中填充色彩实幕，還可以用來承載文字內(nèi)容。不同的區(qū)塊之間不一定非要用線條進行分割堤器，可供選擇的方案有很多昆庇，不過千萬要控制好柵格尺寸和間距≌⒗＃控制不好的細(xì)節(jié)整吆，整個設(shè)計的平衡感可能會被破壞。
原理：柵格的優(yōu)勢在于它的組織性圈暗，對于用戶而言掂为，它具有規(guī)律性和可預(yù)期性。一個漂亮的柵格系統(tǒng)能夠讓用戶更快找到需要的內(nèi)容员串，在視覺上也更加協(xié)調(diào)自然勇哗。
相關(guān)趨勢：柵格很容易被人視為卡片這樣的元素，可以為其加入翻轉(zhuǎn)等各式各樣的動效寸齐，呈現(xiàn)出更多的信息和視覺層次欲诺。
12.經(jīng)典的F式布局
傳統(tǒng)的布局方式，依賴布置視覺線索渺鹦，“控制”用戶的視覺路徑扰法，相較之下毅厚，F(xiàn)式布局更加自然塞颁，更加友好。F式布局符合用戶的瀏覽習(xí)慣，更自然祠锣。符合“從上到下酷窥，從左到右”的閱讀模式。
研究表明伴网，用戶在瀏覽網(wǎng)頁的時候蓬推，習(xí)慣于沿著F式的閱讀軌跡來瀏覽信息，也就是說澡腾，用戶喜歡從左到右閱讀沸伏，然后向下移動，再繼續(xù)從左到右閱讀动分。
這種F式的閱讀模式對應(yīng)的網(wǎng)頁布局就是F式布局毅糟，最關(guān)鍵的信息靠左顯示，從上到下盡量保持在一條線上刺啦。
·頁頭和導(dǎo)航·靠左的一欄相對較寬留特，展示主要的內(nèi)容·靠右常為側(cè)邊欄纠脾，展示相關(guān)鏈接等內(nèi)容·頁腳
原理：人的行為很容易受到習(xí)慣的影響玛瘸，而研究也證實了人思考、行為確實是模式化的苟蹈。從左到右糊渊，自上而下，人們大多習(xí)慣了這種行為模式慧脱。F式的布局模式擁有良好的適用性渺绒，便于用戶理解和交互。
相關(guān)趨勢：F式布局中側(cè)邊玩法很多菱鸥，有的設(shè)計師會將導(dǎo)航與之結(jié)合宗兼，或者在頁面頂部加上大圖Banner。
13氮采、極簡分層
極簡化的設(shè)計一直都在流行殷绍，它的流行不是沒有原因的。開放式的空間讓用戶感覺更加輕松鹊漠，也使得其中展現(xiàn)的內(nèi)容更容易被聚焦主到。如果極簡化的頁面中加入不多的幾個并列的內(nèi)容層，可以讓信息更有層次躯概，也使得極簡的頁面擁有了細(xì)節(jié)登钥。
這種設(shè)計并不復(fù)雜骚秦，但是讓頁面更加有趣了滔灶，它可以適配更多不同類型的項目了。這也解釋了為什么用戶如此的喜愛類似Apple 官網(wǎng)這樣的設(shè)計誓沸。
原理：極簡化的頁面中加入簡單的幾個分層，讓頁面有了視覺焦點塔鳍，尤其是當(dāng)設(shè)計者想要引導(dǎo)用戶關(guān)注到某個關(guān)鍵的內(nèi)容的時候度陆，這種頁面布局很很容易實現(xiàn)這一點。
相關(guān)趨勢：微妙的陰影和漸變常常被用在這樣的頁面當(dāng)中献幔，強化元素之間的層次感懂傀。雖然這些設(shè)計手法一度“過時”，但是現(xiàn)在大有卷土重來之勢蜡感，而Material Design 這樣的設(shè)計風(fēng)格就是它們的沖鋒號蹬蚁。
14.Z-模式
Z-模式是最簡單、最通用的模式,普遍用于任何基于文本的網(wǎng)頁郑兴。讀者首先橫向的瀏覽頂部犀斋，接著回到左邊，然后再橫向地瀏覽整個底部情连。
理解通用的Z-模式很重要叽粹，因為它解決了網(wǎng)站的核心需求：層次結(jié)構(gòu)、品牌化和用戶行為號召却舀。它的美在于既簡單又具有“用戶號召”型網(wǎng)站的理想布局虫几。當(dāng)然，對于更復(fù)雜的或包含大量內(nèi)容的網(wǎng)站挽拔，Z-模式可能過于簡單辆脸。
考慮一下Z-模式是否適合你的網(wǎng)站？下面有一些最佳實踐可以更好的優(yōu)化該模式：
背景：保持背景在它應(yīng)該處于的位置：隱蔽在內(nèi)容之下螃诅。不讓它分散讀者的注意力啡氢。
要點1：作為第一個要點，將Logo放置在固定位置术裸。
要點2：雖然主要的用戶號召應(yīng)該放在后面倘是，這對二級用戶號召來說是一個好位置，可強調(diào)或突出導(dǎo)航條（一個漂亮的圖形或圖像滑塊將有助于分割頁面的頂部和底部袭艺，鼓勵讀者按照Z模式所期待的方式來瀏覽）搀崭。
要點3：選取最佳位置來吸引讀者對其它鏈接的注意，或者吸引讀者的目光到網(wǎng)站的最終目標(biāo)：要點4匹表。
要點4——作為“終點”门坷，這是一個完美的放置主要用戶號召的地方。
首先你需要做的是把頁面上的元素按照重要性進行排序袍镀。然后默蚌，從結(jié)果中挑選出適當(dāng)?shù)摹盁狳c”就會變得很簡單。
此外苇羡，Z-模式可以重復(fù)和擴展到整個頁面绸吸。我們來看看Evernote是如何按“之”字型向下放置他們的“用戶號召”和賣點的。
DropBox沒有使用任何背景圖片，很簡單地實現(xiàn)了這種“曲折”的模式锦茁。相反的攘轩，更多功能型的設(shè)計內(nèi)置在了布局中，比如用戶號召“瀏覽更多”码俩，當(dāng)用戶瀏覽整個網(wǎng)頁時度帮，它幫助用戶鏈接進入每一板塊的細(xì)節(jié)部分。這也有助于通知讀者點擊到下一個相關(guān)頁面稿存，而不需要先去通讀頁面所有內(nèi)容笨篷。
15.分割屏幕
在這類中，我們精選的網(wǎng)站都用了垂直分隔線來分割屏幕瓣履÷食幔可能這么做有很多原因，通過研究大量此類案例袖迎，我發(fā)現(xiàn)主要有兩點冕臭。
原因之一，有時候在一套設(shè)計中燕锥，的確存在兩個同等重要的主體元素辜贵。網(wǎng)頁設(shè)計的通常方法，是按照重要性給內(nèi)容排序脯宿。然后重要性會體現(xiàn)在設(shè)計的層次和結(jié)構(gòu)上念颈。但是假如你就是要推廣兩樣?xùn)|西呢？這種方式连霉，可以讓你突出兩者，并讓用戶迅速在其中做出選擇嗡靡。
原因之二跺撼，有時你要表現(xiàn)出一種重要的兩重性。以Eight and Four網(wǎng)站為例讨彼。他們在此要表達的是歉井，他們的核心競爭力來自植根數(shù)字領(lǐng)域，還有多才多藝的員工哈误。這兩點成就了他們哩至。通過屏幕分割來表現(xiàn)這一點，是種令人愉快的方式蜜自。
16.去界面化
網(wǎng)頁設(shè)計中的主要元素之一菩貌，就是容器元素：方塊、邊框重荠、形狀和所有類型的容器箭阶，用于將內(nèi)容從頁面中分離開。想象一個古板的頁頭，元素剛好容納其中仇参，與內(nèi)容分隔開嘹叫。如今的一項普遍趨勢，就是去除所有這些額外的界面元素诈乒。
這是種極簡主義的方式罩扇，但它更進一步，帶來一些有趣的轉(zhuǎn)變怕磨。
17.基于模塊或網(wǎng)格
接下來這些排版方式暮蹂，建立在模塊化或類似網(wǎng)格的結(jié)構(gòu)上。在這些設(shè)計中癌压，每個模塊都力圖根據(jù)屏幕尺寸伸縮調(diào)整仰泻。實際上這并不是什么新的方式，不過響應(yīng)式網(wǎng)頁設(shè)計讓它變得更加有用滩届。它暗示了一種自適應(yīng)布局模式集侯，可以像搭積木一樣，由各種模塊組件創(chuàng)建而成帜消。
這個案例更加激進棠枉。當(dāng)然，它也包含了模塊化的方式泡挺，讓他們能夠根據(jù)需要輕松增減內(nèi)容辈讶。但此處還有一個重要的設(shè)計元素在發(fā)揮作用，之前的案例是沒有的娄猫。模塊通過尺寸變化贱除，來反映其重要程度和在各層級中的地位。這類模塊化的布局方式存在一種風(fēng)險媳溺，它使每樣?xùn)|西尺寸都相同月幌，這意味著無法強調(diào)任何事物。相反悬蔽，這個案例還是清晰地突出了主要元素扯躺。
18.一屏以內(nèi)
最后，還有一些網(wǎng)站采用這樣的方式蝎困，讓設(shè)計完全在一屏內(nèi)展現(xiàn)录语。這是響應(yīng)式設(shè)計的一個分支，因為它會適應(yīng)屏幕尺寸禾乘。不過在這個絕佳案例中澎埠，整個設(shè)計的適應(yīng)方式完完全全吻合屏幕，沒有產(chǎn)生滾動條盖袭。沒有滾動失暂，意味著內(nèi)容必須極度聚焦彼宠，而且要建立清晰的內(nèi)容層次。我發(fā)現(xiàn)這些網(wǎng)站的聚焦能力和清晰程度弟塞，令人耳目一新凭峡。
