中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

網(wǎng)頁布局設(shè)計(jì)小技巧

2022-06-20    分類: 網(wǎng)站建設(shè)

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

如何在視覺設(shè)計(jì)中突破頁面布局的“格”,讓設(shè)計(jì)更具特點(diǎn)與眾不同,下面通過幾個小技巧來解決頁面布局中死板的問題。


延伸

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

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


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


曲線

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


△ 用曲線來達(dá)到分割的模塊地目的,同時也表達(dá)出數(shù)據(jù)產(chǎn)品的特點(diǎn)。


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

過渡

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


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


△ 利用黃色的播放圖標(biāo),讓左邊的線描圖與右側(cè)實(shí)景圖有較好的過渡,同時也成為畫面的點(diǎn)睛之筆。

隱藏

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


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

層疊

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


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


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

錯位

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


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


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


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

結(jié)語

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

分享文章:網(wǎng)頁布局設(shè)計(jì)小技巧
標(biāo)題路徑:http://www.rwnh.cn/news21/169471.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供搜索引擎優(yōu)化、服務(wù)器托管定制開發(fā)、微信小程序用戶體驗(yàn)、網(wǎng)頁設(shè)計(jì)公司

廣告

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

成都網(wǎng)站建設(shè)
呼伦贝尔市| 烟台市| 永新县| 武平县| 郎溪县| 湘潭县| 普宁市| 牡丹江市| 华池县| 馆陶县| 濉溪县| 廊坊市| 额尔古纳市| 建德市| 砚山县| 宜昌市| 丰县| 马山县| 屏东县| 河东区| 贵溪市| 左贡县| 宁安市| 安吉县| 金华市| 南汇区| 中宁县| 阿图什市| 鹤庆县| 荣成市| 太湖县| 塘沽区| 峨山| 定襄县| 中卫市| 周宁县| 荣昌县| 谷城县| 景谷| 荆州市| 英山县|