網(wǎng)頁設(shè)計(jì)中圖片和文字合理搭配的4種技巧

圖片、文字和色彩一直是網(wǎng)站設(shè)計(jì)的核心內(nèi)容，設(shè)計(jì)師需對(duì)這三大塊內(nèi)容進(jìn)行合理的排版布局，讓每一個(gè)細(xì)節(jié)都發(fā)揮出應(yīng)有的作用。

網(wǎng)站設(shè)計(jì)中占據(jù)篇幅最多的就是圖片和文字，想要獲得一個(gè)好的網(wǎng)站設(shè)計(jì)效果，就需要將圖片和文字合理的搭配起來，讓每個(gè)元素都各在其位。

那么如何做好圖片與文字的配合呢？

1.字體選擇與字體組合方式

網(wǎng)站設(shè)計(jì)中，文字的不同字體和不同的組合方式，所得到的效果是完全不同的，

所以我們?cè)?a target="_blank">網(wǎng)站設(shè)計(jì)時(shí)應(yīng)做好這方面的準(zhǔn)備工作。

中文字體的選擇有很多種，比如“微軟雅黑”，就是一種在瀏覽器中看起來視效效果最好，也最舒服的字體。

2.文字與圖片的組合方式

文字與圖片的組合方式一般可以分為兩種，

一種是圖片突出，文字在組合中起到的是解釋說明的作用，

另一種是文字突出，圖片在組合中起到的作用是襯托和突出文字的重點(diǎn)。

3、主體物與視覺焦點(diǎn)

主體物與視覺焦點(diǎn)是攝影作品里的兩個(gè)基本要素，

因此在一張照片里通常會(huì)有一個(gè)突出的人或物作為主體。

在網(wǎng)站設(shè)計(jì)中，如果我們把主體物看作是一個(gè)面，就會(huì)更容易理解文字在圖片的作品里的作用，讓文字和圖片之間保持和諧統(tǒng)一。

文字部分與主體物之間的位置大小關(guān)系有三大原則：

M1

//C 文字“面”與主體“面”的邊線保持聯(lián)系（直線或平行），意思就是讓文字的平面與主體物的平面存在相關(guān)性。

A=B 文字“面”或者與畫面邊緣的距離幾乎相等于主體“面”與畫面邊緣的距離

4.字體與圖形的配合

以“圖片突出文字”為目的的排版，其特點(diǎn)是不需要分析照片里面的元素。

在大部分設(shè)計(jì)教程以及很多優(yōu)秀的設(shè)計(jì)作品里，圖片被認(rèn)為只是作為一個(gè)大色塊存在，它的存在只是為了最后你想要表達(dá)的文字（情感），鋪設(shè)基調(diào)。

大部分優(yōu)秀排版里采用的解決方案是運(yùn)用字體與圖形的配合，而其中類型有三種：

第一種形狀圖形

形狀圖形主要指方形、圓形以及一些不規(guī)則的形狀圖形。

方形的3種運(yùn)用方式：

突出：當(dāng)文字部分融入到圖片里變得難以看清的時(shí)候。在這里最好的辦法就是像這樣放置一個(gè)方形在背景，然后再調(diào)節(jié)字體的顏色與方塊對(duì)比，使文字部分突出。

集中：這種方法是為了不弱化圖片的情況下，讓文字部分集中在一個(gè)方形里，增加易讀性。是包裝設(shè)計(jì)常在出現(xiàn)的排版。

修飾：這個(gè)方形其實(shí)只是代表，代表所有不規(guī)則圖形的運(yùn)用。當(dāng)文字組合之間太過散亂，又或者字體之間大小的差異太大的時(shí)候，放置一個(gè)（不）規(guī)則圖形，盡可能連接到每一個(gè)字上，形成聯(lián)系。

圓形3種運(yùn)用方式：

普通：這是一個(gè)作為對(duì)比的普通排版。

突出：這個(gè)比起方形有著好的突出效果，這個(gè)圓形可以替換成一些素材，比如墨滴之類的圓形素材，甚至可以利用圖片本身存在一個(gè)巨大的圓形物體的，來突出文字部分。

適用：這個(gè)同樣可以突出“面”文字，這就也為什么這個(gè)方法經(jīng)常出現(xiàn)各類商業(yè)圖冊(cè)、海報(bào)以及各類宣傳單。

第二種直線

直線分兩種，一種就是純粹的一條直線，而另一種則是由細(xì)小的字組成的一段文字（通常是英文）。

直線的3種常見運(yùn)用

聯(lián)系：很常見的運(yùn)用方法。

集中：作用和方形“集中”相同，只是這個(gè)是用兩條線組成一個(gè)隱形的方塊，更有形式感。不同這種只能出現(xiàn)在色彩單一或大量留白的照片。

連接符：增加形似感的小東西… …可以用于連接兩段文字的內(nèi)容，時(shí)尚類設(shè)計(jì)作品最常用到。

第三種字符

一般是指的數(shù)字以及英文字母，配合文字能有更好的突出效果，而阿拉伯?dāng)?shù)字的效果好。

在網(wǎng)頁設(shè)計(jì)中，文字內(nèi)容和圖片的比重占了很大一部分，但差不多的信息量，呈現(xiàn)在網(wǎng)頁上的效果卻會(huì)大相徑庭。

如何將這些內(nèi)容和元素安置在最合適的位置，也許是這其中很主要的原因。

網(wǎng)頁標(biāo)題：網(wǎng)頁設(shè)計(jì)中圖片和文字合理搭配的4種技巧
文章轉(zhuǎn)載：http://www.bm7419.com/news/100283.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、搜索引擎優(yōu)化、做網(wǎng)站、品牌網(wǎng)站制作、軟件開發(fā)、標(biāo)簽優(yōu)化

廣告

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