淄博網站設計如何在視覺設計中突破頁面(miàn)布局的“格”,讓設計更具特點與衆不同,下面(miàn)淄博網站設計通過(guò)幾個小技巧來解決頁面(miàn)布局中死闆的問題。
1、延伸
古詞中“滿園春色關不住,一枝紅杏出牆來”,就(jiù)是這(zhè)個感覺,讓主體内容不局限于頁面(miàn)的條條框框之内,适當的延伸出去,橫跨兩(liǎng)個模塊,不僅能(néng)夠打破規則的布局,而且能(néng)夠讓兩(liǎng)個模塊有一定延伸感和連接感。
下圖:電腦的圖片不局限在藍色背景區域,延伸到了下一個模塊,除了掩蓋掉兩(liǎng)個模塊間死闆的分割線,更能(néng)讓用戶在閱讀時(shí)能(néng)夠流暢的從A區域過(guò)渡到B區域,中間不會(huì)出現斷節。
下圖:相機圖片在兩(liǎng)個模塊的中間,從綠色背景模塊延伸到淺灰色模塊,將(jiāng)模塊中間死闆的分割線去除,完美的過(guò)渡方案。
2、曲線
網頁設計中,免不了内容模塊的分割,這(zhè)種(zhǒng)直線多了自然就(jiù)會(huì)讓畫面(miàn)死闆,我們可以通過(guò)改變直線的方式,比如曲線、斜線等來解決這(zhè)個問題。
下圖:用曲線來達到分割的模塊地目的,同時(shí)也表達出數據産品的特點。
下圖:不論是背景還(hái)是主體圖形,都(dōu)有12°角度的傾斜,讓畫面(miàn)頓時(shí)就(jiù)“活”了起(qǐ)來。
3、過(guò)渡
當然我們很多時(shí)候任然無法避免分割中的直線,也不可能(néng)把所有的直線都(dōu)改爲曲線,這(zhè)時(shí)候我們可以适當利用一些元素讓模塊之間有個過(guò)渡。
下圖:左右分屏是最近一年比較流行的布局方式之一,這(zhè)種(zhǒng)布局能(néng)夠更加強調品牌的色彩調性,避免圖片與文字的疊加幹擾閱讀,帶來的問題就(jiù)是中間死闆的分割線,設計師將(jiāng)輸入框橫跨了兩(liǎng)個模塊,巧妙地打破了這(zhè)個死闆的形式
下圖:利用黃色的播放圖标,讓左邊的線描圖與右側實景圖有較好(hǎo)的過(guò)渡,同時(shí)也成(chéng)爲畫面(miàn)的點睛之筆。
4、隐藏
有些信息不一定完整的展示出來,可以隻展示最重要的部分,將(jiāng)不重要的置于畫面(miàn)之外,适度的隐藏,更有利于突出重要信息,也能(néng)夠讓畫面(miàn)有一定的延伸感,不死闆。
下圖:并沒(méi)有展現全部的圖形,部分留于浏覽器之外,讓畫面(miàn)更顯得大氣。
5、層疊
將(jiāng)圖形、圖片、文字等信息進(jìn)行層疊,打破傳統的左右、上下布局,增加畫面(miàn)的透視與層次關系。
下圖:主體人物與文字進(jìn)行疊加,文字雖然做了一定的遮擋,若隐若現卻不影響閱讀。
下圖:不是一張圖幹巴巴的诠釋,利用多個元素層疊交錯,營造出畫面(miàn)的層次、透視與場景。
6、錯位
將(jiāng)圖形、圖片、文字等信息進(jìn)行錯位布局,不拘泥于條條框框之内。
下圖:圖片與背景塊錯位布局,看似好(hǎo)像沒(méi)做完,實際是設計師精心的布局方式,讓畫面(miàn)充滿動感,同時(shí)圖片的投影也讓這(zhè)部分信息頓時(shí)有了層次感。
下圖:利用文字、方框與主體圖片進(jìn)行交錯組合,讓這(zhè)些碎片信息融爲一個整體,視覺上也更加有層次感。
下圖:將(jiāng)四張商品圖片進(jìn)行波浪式的排列,雖然隻是稍微改變了水平對(duì)齊的方式,但是立刻讓畫面(miàn)充滿了韻律感。
結語
以上方法并非隻是爲了突破而突破,是基于浏覽體驗的前提下,做出更具特點的視覺形式,設計師不須拘泥于傳統的布局方式,也無須受制于同類産品形式的影響,可以大膽嘗試各種(zhǒng)布局方式,做出創新與特色。
上一篇:沒(méi)有了
走過(guò)十六年曆程的互聯網整合營銷機構,以技術與思想,提升您網站的廣度傳播與深度。
咨詢問題或預約面(miàn)談,可以通過(guò)以下方式聯系我們。
淄博企業網站建設淄博手機網站建設響應式網站建設營銷型網站建設淄博高端網站建設電子商務網站建設商城購物網站建設淄博大型網站開(kāi)發(fā)淄博門戶網站建設淄博行業網站建設品牌創意網站建設淄博房産網站建設
16年網絡服務經(jīng)驗專業網站建設團隊資深行業分析策劃完備的項目管理突出技術研發(fā)能(néng)力完善售後(hòu)服務體系豐富網絡運營經(jīng)驗前沿視覺設計能(néng)力獨立項目開(kāi)發(fā)能(néng)力服務行業超100+品牌與技術并重高端網站建設者