近十年來，互聯網已經發生了(Got it)翻天覆地的(Of)變化，然而它其實一(One)點也沒變。如果看看10年前，我們會發現大(Big)批網站都有一(One)套通行的(Of)排版模式。頁頭、頁腳、側邊欄和(And)内容區域，構成了(Got it)這(This)種直截了(Got it)當的(Of)布局。這(This)是(Yes)人(People)們預期中的(Of)網頁排版。同時(Hour)期Macromedia Flash的(Of)興起，引領其他(He)排版方式進入了(Got it)一(One)個(Indivual)新的(Of)時(Hour)代。布局不(No)必再拘泥于(At)固定格式。當然，随着FLASH的(Of)衰退，這(This)種方式也稍稍淡出(Out)……我說稍稍，是(Yes)因爲(For)它如今又卷土重來了(Got it)。

假如你研究一(One)個(Indivual)流行的(Of)作(Do)品集網站，裏面展示了(Got it)當今的(Of)網頁設計。毫無疑問，你會注意到網頁的(Of)基本結構千變萬化，根本沒有固定形态。它可以(By)伸縮變化成任何所需的(Of)東西。我認爲(For)這(This)是(Yes)響應式網頁設計帶來的(Of)最棒的(Of)副産品。事實上(Superior)，新的(Of)準則，就是(Yes)根本沒有固定準則。

綜上(Superior)所述，我們能觀察發現幾種重大(Big)的(Of)排版設計趨勢，能夠代表我所理解的(Of)非常規布局。說它們非常規，是(Yes)因爲(For)它們并不(No)嚴格遵循某種準則或既定體系。但這(This)種趨勢的(Of)例子，即使沒有幾百，我也能找出(Out)幾十個(Indivual)，歸入這(This)幾類中。

本文中，你會看到有趣的(Of)非常規排版趨勢大(Big)雜燴，希望它能給你帶來啓發，幫助你構思網頁設計的(Of)基本結構。我們這(This)就深入了(Got it)解一(One)下……

分割屏幕

在(Exist)這(This)類中，我們精選的(Of)網站都用(Use)了(Got it)垂直分隔線來分割屏幕。可能這(This)麽做有很多原因，通過研究大(Big)量此類案例，我發現主要(Want)有兩點。

原因之一(One)，有時(Hour)候在(Exist)一(One)套設計中，的(Of)确存在(Exist)兩個(Indivual)同等重要(Want)的(Of)主體元素。網頁設計的(Of)通常方法，是(Yes)按照重要(Want)性給内容排序。然後重要(Want)性會體現在(Exist)設計的(Of)層次和(And)結構上(Superior)。但是(Yes)假如你就是(Yes)要(Want)推廣兩樣東西呢?這(This)種方式，可以(By)讓你突出(Out)兩者，并讓用(Use)戶迅速在(Exist)其中做出(Out)選擇。

原因之二，有時(Hour)你要(Want)表現出(Out)一(One)種重要(Want)的(Of)兩重性。以(By)Eight and Four網站爲(For)例。他(He)們在(Exist)此要(Want)表達的(Of)是(Yes)，他(He)們的(Of)核心競争力來自植根數字領域，還有多才多藝的(Of)員工。這(This)兩點成就了(Got it)他(He)們。通過屏幕分割來表現這(This)一(One)點，是(Yes)種令人(People)愉快的(Of)方式。

去界面化!

網頁設計中的(Of)主要(Want)元素之一(One)，就是(Yes)容器元素：方塊、邊框、形狀和(And)所有類型的(Of)容器，用(Use)于(At)将内容從頁面中分離開。想象一(One)個(Indivual)古闆的(Of)頁頭，元素剛好容納其中，與内容分隔開。如今的(Of)一(One)項普遍趨勢，就是(Yes)去除所有這(This)些額外的(Of)界面元素。

這(This)是(Yes)種極簡主義的(Of)方式，但它更進一(One)步，帶來一(One)些有趣的(Of)轉變。

在(Exist)這(This)個(Indivual)例子中，他(He)們把頁頭和(And)頁尾的(Of)概念統統去掉了(Got it)。反而更像一(One)個(Indivual)交互式雜貨攤。從左向右的(Of)排列，就基本完成了(Got it)内容層次的(Of)排布，有助于(At)讓排版更加直觀。用(Use)于(At)分隔導航和(And)内容的(Of)界面就不(No)需要(Want)了(Got it)。取而代之的(Of)是(Yes)漂亮的(Of)産品驚豔全場。

可以(By)發現，移除任何感官上(Superior)的(Of)頁頭和(And)頁尾後，内容得到了(Got it)極大(Big)的(Of)強調。你會先看到公司名稱，然後是(Yes)關于(At)他(He)們經營内容(和(And)場所)的(Of)清晰描述，而不(No)是(Yes)先看到頁頭。之後才是(Yes)主導航。讓用(Use)戶浏覽之前先重點強調品牌，這(This)個(Indivual)方式太棒了(Got it)!它造就了(Got it)優美的(Of)視覺流程。有趣的(Of)是(Yes)，當你滾動頁面時(Hour)，頁頭和(And)界面才出(Out)現。美觀且有效的(Of)排版，這(This)種模式的(Of)運用(Use)頗具啓迪性。

基于(At)模塊或網格

接下來這(This)些排版方式，建立在(Exist)模塊化或類似網格的(Of)結構上(Superior)。在(Exist)這(This)些設計中，每個(Indivual)模塊都力圖根據屏幕尺寸伸縮調整。實際上(Superior)這(This)并不(No)是(Yes)什麽新的(Of)方式，不(No)過響應式網頁設計讓它變得更加有用(Use)。它暗示了(Got it)一(One)種自适應布局模式，可以(By)像搭積木一(One)樣，由各種模塊組件創建而成。

這(This)個(Indivual)案例完美地诠釋了(Got it)這(This)一(One)點。整個(Indivual)設計都是(Yes)響應式的(Of)。随着屏幕尺寸變化，每個(Indivual)模塊都改變尺寸來适應空間。均勻劃分屏幕使得設計更易于(At)适應。他(He)們還(在(Exist)大(Big)屏幕尺寸中)引入一(One)些元素來打破模塊界限的(Of)束縛，這(This)是(Yes)畫龍點睛之筆。

這(This)個(Indivual)案例更加激進。當然，它也包含了(Got it)模塊化的(Of)方式，讓他(He)們能夠根據需要(Want)輕松增減内容。但此處還有一(One)個(Indivual)重要(Want)的(Of)設計元素在(Exist)發揮作(Do)用(Use)，之前的(Of)案例是(Yes)沒有的(Of)。模塊通過尺寸變化，來反映其重要(Want)程度和(And)在(Exist)各層級中的(Of)地位。這(This)類模塊化的(Of)布局方式存在(Exist)一(One)種風險，它使每樣東西尺寸都相同，這(This)意味着無法強調任何事物。相反，這(This)個(Indivual)案例還是(Yes)清晰地突出(Out)了(Got it)主要(Want)元素。

一(One)屏以(By)内

最後，還有一(One)些網站采用(Use)這(This)樣的(Of)方式，讓設計完全在(Exist)一(One)屏内展現。這(This)是(Yes)響應式設計的(Of)一(One)個(Indivual)分支，因爲(For)它會适應屏幕尺寸。不(No)過在(Exist)這(This)個(Indivual)絕佳案例中，整個(Indivual)設計的(Of)适應方式完完全全吻合屏幕，沒有産生滾動條。沒有滾動，意味着内容必須極度聚焦，而且要(Want)建立清晰的(Of)内容層次。我發現這(This)些網站的(Of)聚焦能力和(And)清晰程度，令人(People)耳目一(One)新。

結論

雖然我把這(This)幾種趨勢分開講，但其實他(He)們都表現爲(For)積木塊的(Of)形式。這(This)些積木可以(By)通過很多不(No)同方式組合。事實上(Superior)，本文中展示的(Of)很多案例，都可以(By)放在(Exist)我們讨論過的(Of)其他(He)幾個(Indivual)分類中。現代網頁的(Of)布局如此多樣化，而且确實合乎使用(Use)，造就了(Got it)如此激動人(People)心的(Of)互聯網媒體。