來源:無錫網(wǎng)站建設(shè)阿凡達(dá) 瀏覽次數(shù):371 發(fā)表日期:2023-05-30
在開始一個新的網(wǎng)頁設(shè)計項目的時候,不知道你會不會有那么一瞬間的猶豫,網(wǎng)頁設(shè)計該如何下手,想要實現(xiàn)的東西有很多,但是不知道怎么才能夠把網(wǎng)頁設(shè)計得好,這是很多網(wǎng)頁設(shè)計朋友遇到的問題。網(wǎng)頁設(shè)計難也不難,只要我們抓住網(wǎng)頁設(shè)計規(guī)律和網(wǎng)頁設(shè)計方法即可。
大家都知道做網(wǎng)頁設(shè)計有柵格,有縱向柵格也有橫向柵格,柵格提供內(nèi)容布局的規(guī)范,讓信息組織更有條理,我們在柵格規(guī)范內(nèi)做設(shè)計,上下左右、垂直居中對齊,橫平豎直、方方正正的看著舒服,信息布局清晰易讀,表面看沒什么問題,但經(jīng)常會有那么點死板,缺少點活力。
下面這幾點充分說明:
1、延伸
古詞中“滿園春色關(guān)不住,一枝紅杏出墻來”,就是這個感覺,讓主體內(nèi)容不局限于頁面的條條框框之內(nèi),適當(dāng)?shù)难由斐鋈?,橫跨兩個模塊,不僅能夠打破規(guī)則的布局,而且能夠讓兩個模塊有一定延伸感和連接感。
2、曲線
網(wǎng)頁設(shè)計中,免不了內(nèi)容模塊的分割,這種直線多了自然就會讓畫面死板,我們可以通過改變直線的方式,比如曲線、斜線等來解決這個問題。用曲線來達(dá)到分割的模塊地目的,同時也表達(dá)出數(shù)據(jù)產(chǎn)品的特點。不論是背景還是主體圖形,都有12°角度的傾斜,讓畫面頓時就“活”了起來。
3、過渡
當(dāng)然我們很多時候任然無法避免分割中的直線,也不可能把所有的直線都改為曲線,這時候我們可以適當(dāng)利用一些元素讓模塊之間有個過渡。
左右分屏是*近一年比較流行的布局方式之一,這種布局能夠更加強調(diào)品牌的色彩調(diào)性,避免圖片與文字的疊加干擾閱讀,帶來的問題就是中間死板的分割線,設(shè)計師將輸入框橫跨了兩個模塊,巧妙地打破了這個死板的形式,利用黃色的播放圖標(biāo),讓左邊的線描圖與右側(cè)實景圖有較好的過渡,同時也成為畫面的點睛之筆。
4、隱藏
有些信息不一定完整的展示出來,可以只展示*重要的部分,將不重要的置于畫面之外,適度的隱藏,更有利于突出重要信息,也能夠讓畫面有一定的延伸感,不死板。 并沒有展現(xiàn)全部的圖形,部分留于瀏覽器之外,讓畫面更顯得大氣。
5、層疊
將圖形、圖片、文字等信息進行層疊,打破傳統(tǒng)的左右、上下布局,增加畫面的透視與層次關(guān)系。主體人物與文字進行疊加,文字雖然做了一定的遮擋,若隱若現(xiàn)卻不影響閱讀。不是一張圖干巴巴的詮釋,利用多個元素層疊交錯,營造出畫面的層次、透視與場景。
6、錯位
將圖形、圖片、文字等信息進行錯位布局,不拘泥于條條框框之內(nèi)。圖片與背景塊錯位布局,看似好像沒做完,實際是設(shè)計師精心的布局方式,讓畫面充滿動感,同時圖片的投影也讓這部分信息頓時有了層次感。
利用文字、方框與主體圖片進行交錯組合,讓這些碎片信息融為一個整體,視覺上也更加有層次感。將四張商品圖片進行波浪式的排列,雖然只是稍微改變了水平對齊的方式,但是立刻讓畫面充滿了韻律感。
技術(shù)熱線
400-189-1319
添加微信