響應(yīng)式網(wǎng)頁設(shè)計需要一種非常不同的布局方式。 幾個世紀以來，平面以及數(shù)字化設(shè)計的布局藝術(shù)已經(jīng)變得足夠復雜，它由固定元素定義，現(xiàn)在隨著響應(yīng)式布局變得越來越受歡迎，元素的排版以及版塊的羅列等元素變得越來越復雜，但是越來越“有序”。

為了幫助讓你的設(shè)計思維以新的方式考慮布局，我們將向你展示一些有趣的響應(yīng)式設(shè)計模式，這些模式目前正在流行。

1.Starting Small

我能看到的最流行的方法之一是將頁面上的內(nèi)容以橫向模式排列開，實現(xiàn)簡單的排列布局。隨著頁面寬度的增加，這些內(nèi)容會變得越來越窄，但是在空間上卻越來越開放。 我們可以在137 Pillars House的網(wǎng)站設(shè)計中看到這種技術(shù)。



正如你所看到的，布局實際上只經(jīng)歷了一次重大轉(zhuǎn)變。 其余的調(diào)整是非常漸進的，僅僅是初始布局的縮小版本。

經(jīng)過設(shè)計師在響應(yīng)式設(shè)計過程中積累的經(jīng)驗以及優(yōu)化。 這可以是一個很好的開始，因為它可以提供比大多數(shù)的布局都更具有響應(yīng)性的布局和內(nèi)容，同時提供在任何視窗大小看起來都很棒的網(wǎng)頁。

雖然我想鼓勵你采取相應(yīng)的措施，探索你在布局中的巨大可能性，而不是簡單地為了響應(yīng)性而去調(diào)整。 不要誤解我的意思，上面的方法沒有任何問題，但是將你的技能提高一步并延伸到你的項目中需要根據(jù)你實際面臨的情況來決定。

2.Mondrian



我們的第一個響應(yīng)式網(wǎng)頁設(shè)計模式是Piet Mondrian所欣賞的模式。 它使用帶有明顯寬度的三條邊界來區(qū)隔開的三個簡單以及大的內(nèi)容塊。 初始狀態(tài)本身就非常靈活，可以很好地適應(yīng)不同的視窗大小。

一旦初始狀態(tài)的視窗大小太窄，寬屏布局就會適應(yīng)并變成垂直布局。 通過將右側(cè)兩個較小的盒子移動到大盒子的下方來實現(xiàn)布局上的統(tǒng)一和平衡。 這種布局可以看做標準的單列移動視圖，其中每個內(nèi)容都可以簡單地堆疊到內(nèi)容的最后。

3.Basic Gallery



Basic Gallery是一種流行的設(shè)計模式，它的使用周期幾乎自網(wǎng)站誕生以來就一直被沿用到現(xiàn)在。 如今，設(shè)計師通常會在極簡風格的設(shè)計中使用它們：簡單的矩形均勻排列在垂直的視覺區(qū)上。 隨著視口的變化，這種格式非常容易被重新排列。



想要在實際網(wǎng)站設(shè)計中查看這種模式的效果，你可以以Brad Sawicki為例。 在主頁上，它從一個簡單的三列布局開始，隨著視窗的變換，內(nèi)容區(qū)塊逐漸折疊成雙列，最后是一個列的布局。 這樣做的好處在于用戶可以以漂亮的大格式查看圖像。

4.Featured Items



這個布局其實很像上面的基礎(chǔ)布局，目的是為了一次性突出一些而不是太多的內(nèi)容。 這里的例子使用了四個特色項目，但它看起來很有用，用戶在實際的體驗過程中也不僅僅只會關(guān)注著四個項。

正如你所看到的，布局從四個重點項目開始并排，上面有一些介紹性內(nèi)容。 請注意介紹性內(nèi)容如何適應(yīng)：整體界面以統(tǒng)一的左對齊為布局方式，這樣在響應(yīng)的過程中任然能夠以同樣的形式進行內(nèi)容上的羅列。

5.Column Flip



這是最復雜的一種模式。 布局的頂部有一些非常大的元素，吸引你的注意力并介紹網(wǎng)站的目的。 下一部分是分為三列內(nèi)容塊的區(qū)域，在實際操作測試之前，你很難想想它們在小視窗的情況下將如何排列。

這是一個相當復雜的轉(zhuǎn)變，但它非常有效。

最后一步當然是將所有內(nèi)容再次固定于一個寬的列。 它可以使用滾動或滑動的效果進行平衡，只要你沒有多到讓人感覺要溢出頁面的內(nèi)容，那么這種模式不是太糟糕。

這種布局的靈感來自一家開發(fā)公司——Palantir。 請注意，網(wǎng)站開發(fā)人員是第一個嘗試響應(yīng)式設(shè)計的人，它既可以作為一個很好的學習經(jīng)驗，也可以作為向客戶展示的一個很好的例子。



Palantir可以作為你了解這種模式的一個很好的例子，你將明白響應(yīng)式網(wǎng)頁設(shè)計中的變革有多么激烈，這不僅僅是減少寬度或完全消除它，它代表了頁面內(nèi)容的主要排版變化，以不斷最大化可用寬度。

6.Feature Shuffle



最后一種模式對項目在排版理念有一定獨特的見解。 我非常喜歡它，因為它在第一次變動時會產(chǎn)生輕微的彎曲。 它不是簡單地變動為兩列進而到一列，而是創(chuàng)建一個交錯的兩列布局，其中部分浮動到任一側(cè)。

對于單列布局，則完全刪除縮略圖圖像以保持文本內(nèi)容的顯示。 這是一門可以根據(jù)你的想法進行選擇的模式。

Orestis在他們的網(wǎng)站設(shè)計上采用了這種模式。 三個強調(diào)性的項目是他們提供的服務(wù)，并用彩色插圖表示。



當調(diào)整瀏覽器大小時，不同服務(wù)的內(nèi)容塊會堆疊，圖像會向左或向右浮動。 這是一個有趣，古怪但同時又很有個性的網(wǎng)站。

總結(jié)

我希望你的思想現(xiàn)在處于超速思考響應(yīng)式布局的“風暴”狀態(tài)。 網(wǎng)頁設(shè)計花了大量時間討論有關(guān)如何通過各種技術(shù)和布局完成響應(yīng)式的設(shè)計。

隨著技術(shù)的革新以及設(shè)計的不斷創(chuàng)新，相信響應(yīng)式的網(wǎng)站設(shè)計會在未來越來越官方以及廣泛的被用于各種項目上，你所需要做的就是不斷嘗試，并時刻更新自己的知識。