如何讓網(wǎng)頁設計不死板有活力

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

如何在視覺設計中突破頁面布局的“格”，讓設計更具特點與眾不同，下面通過幾個小技巧來解決頁面布局中死板的問題。

1、延伸

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

下圖：電腦的圖片不局限在藍色背景區(qū)域，延伸到了下一個模塊，除了掩蓋掉兩個模塊間死板的分割線，更能讓用戶在閱讀時能夠流暢的從A區(qū)域過渡到B區(qū)域，中間不會出現(xiàn)斷節(jié)。

下圖：相機圖片在兩個模塊的中間，從綠色背景模塊延伸到淺灰色模塊，將模塊中間死板的分割線去除，好的過渡方案。

2、曲線

網(wǎng)頁設計中，免不了內(nèi)容模塊的分割，這種直線多了自然就會讓畫面死板，我們可以通過改變直線的方式，比如曲線、斜線等來解決這個問題。

下圖：用曲線來達到分割的模塊地目的，同時也表達出數(shù)據(jù)產(chǎn)品的特點。

下圖：不論是背景還是主體圖形，都有12°角度的傾斜，讓畫面頓時就“活”了起來。

3、過渡

當然我們很多時候任然無法避免分割中的直線，也不可能把所有的直線都改為曲線，這時候我們可以適當利用一些元素讓模塊之間有個過渡。

下圖：左右分屏是最近一年比較流行的布局方式之一，這種布局能夠更加強調(diào)品牌的色彩調(diào)性，避免圖片與文字的疊加干擾閱讀，帶來的問題就是中間死板的分割線，設計師將輸入框橫跨了兩個模塊，巧妙地打破了這個死板的形式

下圖：利用黃色的播放圖標，讓左邊的線描圖與右側(cè)實景圖有較好的過渡，同時也成為畫面的點睛之筆。

4、隱藏

有些信息不一定完整的展示出來，可以只展示最重要的部分，將不重要的置于畫面之外，適度的隱藏，更有利于突出重要信息，也能夠讓畫面有一定的延伸感，不死板。

下圖：并沒有展現(xiàn)全部的圖形，部分留于瀏覽器之外，讓畫面更顯得大氣。

5、層疊

將圖形、圖片、文字等信息進行層疊，打破傳統(tǒng)的左右、上下布局，增加畫面的透視與層次關系。

下圖：主體人物與文字進行疊加，文字雖然做了一定的遮擋，若隱若現(xiàn)卻不影響閱讀。

下圖：不是一張圖干巴巴的詮釋，利用多個元素層疊交錯，營造出畫面的層次、透視與場景。

6、錯位

將圖形、圖片、文字等信息進行錯位布局，不拘泥于條條框框之內(nèi)。

下圖：圖片與背景塊錯位布局，看似好像沒做完，實際是設計師精心的布局方式，讓畫面充滿動感，同時圖片的投影也讓這部分信息頓時有了層次感。

下圖：利用文字、方框與主體圖片進行交錯組合，讓這些碎片信息融為一個整體，視覺上也更加有層次感。

下圖：將四張商品圖片進行波浪式的排列，雖然只是稍微改變了水平對齊的方式，但是立刻讓畫面充滿了韻律感。

結(jié)語

以上方法并非只是為了突破而突破，是基于瀏覽體驗的前提下，做出更具特點的視覺形式，網(wǎng)頁設計師不須拘泥于傳統(tǒng)的布局方式，也無須受制于同類產(chǎn)品形式的影響，可以大膽嘗試各種布局方式，做出創(chuàng)新與特色。

本文名稱：如何讓網(wǎng)頁設計不死板有活力
文章地址：http://www.muchs.cn/news37/193737.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設計、網(wǎng)站營銷、App開發(fā)、網(wǎng)站改版、網(wǎng)站收錄、虛擬主機

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)