我們在進(jìn)行初期的網(wǎng)站設(shè)計時，總會糾結(jié)這樣一個問題：我應(yīng)該從哪開始做起呢?我們總是想著創(chuàng)造一些特別的樣式但是結(jié)果往往又與易用性和可測試性相違背。實(shí)際上，有一些網(wǎng)站的版式從來都沒有過時，它們已經(jīng)被用戶普遍的接受而且?guī)缀踹m用于任何類型的網(wǎng)站，這些版式不僅框架緊密，邏輯清晰，而且版式簡約時尚，充滿現(xiàn)代感;今天我們就以下面的五個案例展開，一起來看看如何在你的下一個項(xiàng)目中充分的利用它們。
1. 廣告主圖搭配簡潔的格柵系統(tǒng)
無論屏幕尺寸大小如何，這種結(jié)構(gòu)緊密的版式都會給用戶提供豐富的內(nèi)容，以便快速預(yù)覽或進(jìn)一步的深入了解;雖然這種布局的實(shí)際尺寸會隨著設(shè)備的類型有所變化，但是從整體上看還是大致一樣的。
網(wǎng)站主導(dǎo)航
主圖和標(biāo)題
2-4列附有小標(biāo)題信息元素的模塊
主體內(nèi)容區(qū)域
底部
這種布局方式簡約時尚，不僅為用戶建立了強(qiáng)烈的視覺秩序，并且它自身的代碼結(jié)構(gòu)非常適合響應(yīng)式網(wǎng)站設(shè)計。此外，你也可以改變主導(dǎo)航的樣式，或者把主圖換成短視頻都是可以的。
工作原理：每一個視覺元素與對應(yīng)的文字內(nèi)容都有屬于自己的位置，并且按照重要等級及邏輯流順序整齊排列;主圖作為用戶進(jìn)入網(wǎng)站第一眼看到的畫面應(yīng)該具有強(qiáng)烈的視覺沖擊力，其他的輔助信息則需具有激起用戶點(diǎn)擊的沖動的作用。
設(shè)計趨勢：在排列整齊的信息元素上添加明度較高的彩色圖標(biāo)，或者為矩形圖片添加描邊，除此之外，在整個設(shè)計中可采用扁平化的設(shè)計語言來統(tǒng)籌用戶界面。
2. 一頁，一列
當(dāng)網(wǎng)站的內(nèi)容比較少或只有一個焦點(diǎn)信息的時候，把所有的內(nèi)容合理分布在一個頁面是最好的布局方式;信息簡單，沒有復(fù)雜的邏輯關(guān)系，那我們就不用把頁面分割成許多模塊，只需要一個頁面，橫向分割各內(nèi)容區(qū)域，不僅層次分明，同時適當(dāng)?shù)牧舭?，搭配合適的配圖，尤其顯高端大氣上檔次。
主導(dǎo)航
圖文結(jié)合的主體內(nèi)容區(qū)域
底部
當(dāng)采用這種版式的時候，空間的規(guī)劃是一項(xiàng)很重要的內(nèi)容。我們要確保內(nèi)容之間有充足的留白，這個需求可以通過加大內(nèi)容邊緣間的間距來實(shí)現(xiàn);但這種方法也會帶來一些隱患，如果間距設(shè)置的較小或者間距不均等，則會使整個頁面顯得擁擠和混亂。
工作原理：單頁的網(wǎng)頁排版適用于小型網(wǎng)站，它能夠充實(shí)內(nèi)容匱乏或者結(jié)構(gòu)簡單的網(wǎng)頁;這種排版同時也適用于簡單的博客或只有一種內(nèi)容樣式重復(fù)排列的網(wǎng)頁。
設(shè)計趨勢：為單一的頁面添加視覺錯差效果來吸引用戶繼續(xù)滾動頁面，這些簡單有趣的交互效果能使用戶充滿興趣地進(jìn)一步了解，同時也豐富了網(wǎng)站的內(nèi)容(就好像用戶每滾動一次鼠標(biāo)就是一個新頁面一樣)。
3. 網(wǎng)格版式
整齊簡潔的網(wǎng)格排布(類似九宮格)樣式從來都沒有過時過，不管它是否按照柵格系統(tǒng)精細(xì)的劃分了板塊還是僅僅只有4X4的塊狀結(jié)構(gòu)，一排排整齊的網(wǎng)格方塊從一開始就清晰的為你展示了網(wǎng)站的內(nèi)容框架，它們經(jīng)過了高度的總結(jié)概括，開門見山的讓你看到了網(wǎng)站的大體輪廓，從而發(fā)現(xiàn)自己感興趣的板塊。
網(wǎng)格版式在設(shè)計師中非常的流行，他們常用來制作個人網(wǎng)站，通過網(wǎng)格的樣式錯落有致的展示自己的視覺作品，讓觀者有種走進(jìn)畫廊的感覺。
網(wǎng)格版式還可以以彩色色塊或容器與文本結(jié)合的樣式呈現(xiàn)，網(wǎng)格分割線根據(jù)實(shí)際情況可有可無。有很多參數(shù)需要考慮，記住要科學(xué)規(guī)劃每個格子的大小，以及網(wǎng)格間的間距，這些細(xì)節(jié)都是影響整個設(shè)計是否成功的重要因素。
工作原理：一個功能良好的網(wǎng)格版式是無與倫比的，它能夠讓用戶不費(fèi)吹灰之力便能找到并且深入了解自己感興趣的內(nèi)容，同時整個頁面在視覺上也會更加的和諧統(tǒng)一。
設(shè)計趨勢：在網(wǎng)格中使用簡單的交互動畫，當(dāng)鼠標(biāo)滑過或者點(diǎn)擊的時候，網(wǎng)格翻轉(zhuǎn)顯示輔助信息，想要其他的選擇嗎?可以參考谷歌的Material Design，采用紙片樣式代替網(wǎng)格。
4. 經(jīng)典的F模式
研究表明，人們在查看一個網(wǎng)站的時候眼睛滾動的區(qū)域呈現(xiàn)出特定的F模式。首先會查看網(wǎng)站頂部的導(dǎo)航，然后從左到右的閱讀，之后垂直向下移動，直到底部的輔助信息。
根據(jù)F模式我們就可以把用戶感興趣的內(nèi)容放到最合適的位置。同時，根據(jù)這個概念就可以把內(nèi)容的順序有序的排列下來。
頭部和導(dǎo)航
左邊欄作為主要內(nèi)容區(qū)
右側(cè)側(cè)邊欄可以放相關(guān)鏈接和一些輔助性的信息，側(cè)邊欄的高度適中即可，不必延伸到底部。
底部內(nèi)容
工作原理：人們是習(xí)慣性的生物，這個測試顯示出人們的思維方式以及瀏覽網(wǎng)站的習(xí)慣。把這種習(xí)慣充分應(yīng)用到網(wǎng)站設(shè)計中，就能夠設(shè)計出很棒的作品。
設(shè)計趨勢：側(cè)邊欄導(dǎo)航，點(diǎn)擊翻轉(zhuǎn)顯示全部導(dǎo)航信息，或者在F模式上面添加廣告主圖。
5. 最小分層
這種方式重點(diǎn)是突出最小分層的內(nèi)容區(qū)域，純色的大背景讓用戶感到很放松，這樣所有的精力都會集中對焦點(diǎn)信息瀏覽上了。大空間中排列著看似簡單整齊的圖層，但是這些圖層集合的信息卻并不簡單，它們可能比你想象更加復(fù)雜，而它的樣式也相對更加的精致。
這種把商業(yè)目的和簡約設(shè)計有機(jī)融合在一起的方式在許多的項(xiàng)目類型中得到了應(yīng)用，它的可行性和可塑性都是很高的。這就使用戶能夠不花費(fèi)任何學(xué)習(xí)成本就能習(xí)慣性的完成訂單的購買，例如Apple官網(wǎng)就是一個很好地例子。
工作原理：分層布局可以按照視覺元素的重要等級依次排列，尤其適用于簡約風(fēng)格的網(wǎng)站，圖層上非常精煉的把商品的特點(diǎn)用文字描述出來，再配合精致的圖片，極大的促進(jìn)了用戶的購買欲望。
使用細(xì)微的漸變和陰影來定義不同圖層內(nèi)容的差異性，雖然這種方式已經(jīng)很落伍了，但是使用得當(dāng)效果還是不錯的。這些細(xì)微的變化是只有用戶在進(jìn)行操作時才能察覺到的交互細(xì)節(jié)。谷歌的Material Design就是把現(xiàn)實(shí)的真實(shí)體驗(yàn)帶入二唯空間的最好的例子。
總結(jié)
當(dāng)我們在糾結(jié)使用哪種風(fēng)格進(jìn)行網(wǎng)頁設(shè)計的時候，最好的方法就是先要搞清楚項(xiàng)目最基本的目的是什么，然后再根據(jù)經(jīng)典的設(shè)計思維和原則決定如何設(shè)計。
從諸多優(yōu)秀網(wǎng)站案例中我們可以看出，版面簡潔，容易閱讀并且整體設(shè)計風(fēng)格統(tǒng)一是它們的共性。一旦我們把網(wǎng)站的基本框架設(shè)計完之后，就可以將當(dāng)下流行的設(shè)計元素融合到版式當(dāng)中。使用這些版式布局的方法指導(dǎo)設(shè)計，會幫你創(chuàng)建一個經(jīng)得起時間考驗(yàn)的時髦的網(wǎng)站。
