大家都知道做網(wǎng)頁設(shè)計有柵格 ， 有縱向柵格也有橫向柵格 ， 柵格提供內(nèi)容布局的規(guī)范 ， 讓信息組織更有條理 ， 我們在柵格規(guī)范內(nèi)做設(shè)計 ， 上下左右、垂直居中對齊 ， 橫平豎直、方方正正的看著舒服 ， 信息布局清晰易讀 ， 表面看沒什么問題 ， 但經(jīng)常會有那么點死板 ， 缺少點活力 。
如何在視覺設(shè)計中突破頁面布局的“格” ， 讓設(shè)計更具特點與眾不同 ， 下面通過幾個小技巧來解決頁面布局中死板的問題 。
延伸
古詞中“滿園春色關(guān)不住 ， 一枝紅杏出墻來” ， 就是這個感覺 ， 讓主體內(nèi)容不局限于頁面的條條框框之內(nèi) ， 適當(dāng)?shù)难由斐鋈?nbsp;， 橫跨兩個模塊 ， 不僅能夠打破規(guī)則的布局 ， 而且能夠讓兩個模塊有一定延伸感和連接感 。
曲線
網(wǎng)頁設(shè)計中 ， 免不了內(nèi)容模塊的分割 ， 這種直線多了自然就會讓畫面死板 ， 我們可以通過改變直線的方式 ， 比如曲線、斜線等來解決這個問題 。
用曲線來達(dá)到分割的模塊地目的 ， 同時也表達(dá)出數(shù)據(jù)產(chǎn)品的特點 。
不論是背景還是主體圖形 ， 都有12°角度的傾斜 ， 讓畫面頓時就“活”了起來 。
過渡
當(dāng)然我們很多時候任然無法避免分割中的直線 ， 也不可能把所有的直線都改為曲線 ， 這時候我們可以適當(dāng)利用一些元素讓模塊之間有個過渡 。
左右分屏是最近一年比較流行的布局方式之一 ， 這種布局能夠更加強(qiáng)調(diào)品牌的色彩調(diào)性 ， 避免圖片與文字的疊加干擾閱讀 ， 帶來的問題就是中間死板的分割線 ， 設(shè)計師將輸入框橫跨了兩個模塊 ， 巧妙地打破了這個死板的形式
隱藏
有些信息不一定完整的展示出來 ， 可以只展示最重要的部分 ， 將不重要的置于畫面之外 ， 適度的隱藏 ， 更有利于突出重要信息 ， 也能夠讓畫面有一定的延伸感 ， 不死板 。
層疊
將圖形、圖片、文字等信息進(jìn)行層疊 ， 打破傳統(tǒng)的左右、上下布局 ， 增加畫面的透視與層次關(guān)系 。
主體人物與文字進(jìn)行疊加 ， 文字雖然做了一定的遮擋 ， 若隱若現(xiàn)卻不影響閱讀 。
錯位
將圖形、圖片、文字等信息進(jìn)行錯位布局 ， 不拘泥于條條框框之內(nèi) 。
圖片與背景塊錯位布局 ， 看似好像沒做完 ， 實際是設(shè)計師精心的布局方式 ， 讓畫面充滿動感 ， 同時圖片的投影也讓這部分信息頓時有了層次感 。
利用文字、方框與主體圖片進(jìn)行交錯組合 ， 讓這些碎片信息融為一個整體 ， 視覺上也更加有層次感 。
結(jié)語
以上方法并非只是為了突破而突破 ， 是基于瀏覽體驗的前提下 ， 做出更具特點的視覺形式 ， 設(shè)計師不須拘泥于傳統(tǒng)的布局方式 ， 也無須受制于同類產(chǎn)品形式的影響 ， 可以大膽嘗試各種布局方式 ， 做出創(chuàng)新與特色 。
【6個小技巧讓你的網(wǎng)頁設(shè)計活力十足！】
推薦閱讀
- 玩手機(jī)頭暈惡心怎么緩解 玩手機(jī)頭暈惡心緩解小竅門
- 網(wǎng)頁設(shè)計中圖片有哪些常見的使用技巧？
- 10個網(wǎng)頁設(shè)計中字體的應(yīng)用技巧！
- 網(wǎng)頁設(shè)計師必備10個搜索引擎優(yōu)化技巧
- 七個實用的網(wǎng)頁設(shè)計技巧！
- 蒲公英的外形和特點 蒲公英的外形和特點的小練筆
- 移動端網(wǎng)頁設(shè)計小技巧分享，怎么讓移動端網(wǎng)頁更好看？
- 單頁面網(wǎng)站設(shè)計的5個技巧！
- 手機(jī)網(wǎng)站建設(shè)如何留住用戶，手機(jī)網(wǎng)站建設(shè)小建議
- 超實用的網(wǎng)頁設(shè)計六大技巧！