在開(kāi)始一個(gè)新的網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目的時(shí)候，不知道你會(huì)不會(huì)有那么一瞬間的猶豫，網(wǎng)頁(yè)設(shè)計(jì)該如何下手，想要實(shí)現(xiàn)的東西有很多，但是不知道怎么才能夠把網(wǎng)頁(yè)設(shè)計(jì)得好，這是很多網(wǎng)頁(yè)設(shè)計(jì)朋友遇到的問(wèn)題。網(wǎng)頁(yè)設(shè)計(jì)難也不難，只要我們抓住網(wǎng)頁(yè)設(shè)計(jì)規(guī)律和網(wǎng)頁(yè)設(shè)計(jì)方法即可。

　　大家都知道做網(wǎng)頁(yè)設(shè)計(jì)有柵格，有縱向柵格也有橫向柵格，柵格提供內(nèi)容布局的規(guī)范，讓信息組織更有條理，我們?cè)跂鸥褚?guī)范內(nèi)做設(shè)計(jì)，上下左右、垂直居中對(duì)齊，橫平豎直、方方正正的看著舒服，信息布局清晰易讀，表面看沒(méi)什么問(wèn)題，但經(jīng)常會(huì)有那么點(diǎn)死板，缺少點(diǎn)活力。

　　下面這幾點(diǎn)充分說(shuō)明：

　　1、延伸

　　古詞中“滿(mǎn)園春色關(guān)不住，一枝紅杏出墻來(lái)”，就是這個(gè)感覺(jué)，讓主體內(nèi)容不局限于頁(yè)面的條條框框之內(nèi)，適當(dāng)?shù)难由斐鋈?，橫跨兩個(gè)模塊，不僅能夠打破規(guī)則的布局，而且能夠讓兩個(gè)模塊有一定延伸感和連接感。

　　2、曲線(xiàn)

　　網(wǎng)頁(yè)設(shè)計(jì)中，免不了內(nèi)容模塊的分割，這種直線(xiàn)多了自然就會(huì)讓畫(huà)面死板，我們可以通過(guò)改變直線(xiàn)的方式，比如曲線(xiàn)、斜線(xiàn)等來(lái)解決這個(gè)問(wèn)題。用曲線(xiàn)來(lái)達(dá)到分割的模塊地目的，同時(shí)也表達(dá)出數(shù)據(jù)產(chǎn)品的特點(diǎn)。不論是背景還是主體圖形，都有12°角度的傾斜，讓畫(huà)面頓時(shí)就“活”了起來(lái)。

　　3、過(guò)渡

　　當(dāng)然我們很多時(shí)候任然無(wú)法避免分割中的直線(xiàn)，也不可能把所有的直線(xiàn)都改為曲線(xiàn)，這時(shí)候我們可以適當(dāng)利用一些元素讓模塊之間有個(gè)過(guò)渡。

　　左右分屏是*近一年比較流行的布局方式之一，這種布局能夠更加強(qiáng)調(diào)品牌的色彩調(diào)性，避免圖片與文字的疊加干擾閱讀，帶來(lái)的問(wèn)題就是中間死板的分割線(xiàn)，設(shè)計(jì)師將輸入框橫跨了兩個(gè)模塊，巧妙地打破了這個(gè)死板的形式，利用黃色的播放圖標(biāo)，讓左邊的線(xiàn)描圖與右側(cè)實(shí)景圖有較好的過(guò)渡，同時(shí)也成為畫(huà)面的點(diǎn)睛之筆。

　　4、隱藏

　　有些信息不一定完整的展示出來(lái)，可以只展示*重要的部分，將不重要的置于畫(huà)面之外，適度的隱藏，更有利于突出重要信息，也能夠讓畫(huà)面有一定的延伸感，不死板。 并沒(méi)有展現(xiàn)全部的圖形，部分留于瀏覽器之外，讓畫(huà)面更顯得大氣。

　　5、層疊

　　將圖形、圖片、文字等信息進(jìn)行層疊，打破傳統(tǒng)的左右、上下布局，增加畫(huà)面的透視與層次關(guān)系。主體人物與文字進(jìn)行疊加，文字雖然做了一定的遮擋，若隱若現(xiàn)卻不影響閱讀。不是一張圖干巴巴的詮釋?zhuān)枚鄠€(gè)元素層疊交錯(cuò)，營(yíng)造出畫(huà)面的層次、透視與場(chǎng)景。

　　6、錯(cuò)位

　　將圖形、圖片、文字等信息進(jìn)行錯(cuò)位布局，不拘泥于條條框框之內(nèi)。圖片與背景塊錯(cuò)位布局，看似好像沒(méi)做完，實(shí)際是設(shè)計(jì)師精心的布局方式，讓畫(huà)面充滿(mǎn)動(dòng)感，同時(shí)圖片的投影也讓這部分信息頓時(shí)有了層次感。

　　利用文字、方框與主體圖片進(jìn)行交錯(cuò)組合，讓這些碎片信息融為一個(gè)整體，視覺(jué)上也更加有層次感。將四張商品圖片進(jìn)行波浪式的排列，雖然只是稍微改變了水平對(duì)齊的方式，但是立刻讓畫(huà)面充滿(mǎn)了韻律感。