用靈魂感悟設(shè)計(jì) · 用設(shè)計(jì)創(chuàng)造價(jià)值
WITH SOUL FEELING DESIGN WITH DESIGN TO CREATE VALUE
您當(dāng)前位置:  設(shè)計(jì)中國(guó)    ⁄    網(wǎng)頁(yè)設(shè)計(jì)    ⁄ 資訊內(nèi)容

4種網(wǎng)頁(yè)設(shè)計(jì)技巧:圖文搭配,網(wǎng)頁(yè)不累!

作者:admin      來(lái)源:互聯(lián)網(wǎng)      發(fā)布時(shí)間: 2019/4/8 9:06:15     瀏覽:
圖片、文字和色彩一直是網(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ì)效果,就需要將圖片和文字合理的搭配起來(lái),讓每個(gè)元素都各在其位。那么如何做好圖片與文字的配合呢?

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

  網(wǎng)站設(shè)計(jì)中,文字的不同字體和不同的組合方式,所得到的效果是完全不同的,所以我們?cè)诰W(wǎng)站設(shè)計(jì)時(shí)應(yīng)做好這方面的準(zhǔn)備工作。中文字體的選擇有很多種,比如“微軟雅黑”,就是一種在瀏覽器中看起來(lái)視效效果最好,也最舒服的字體。

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

  文字與圖片的組合方式一般可以分為兩種,一種是圖片突出,文字在組合中起到的是解釋說(shuō)明的作用,另一種是文字突出,圖片在組合中起到的作用是襯托和突出文字的重點(diǎn)。

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

  主體物與視覺(jué)焦點(diǎn)是攝影作品里的兩個(gè)基本要素,因此在一張照片里通常會(huì)有一個(gè)突出的人或物作為主體。在網(wǎng)站設(shè)計(jì)中,如果我們把主體物看作是一個(gè)面,就會(huì)更容易理解文字在圖片的作品里的作用,讓文字和圖片之間保持和諧統(tǒng)一。

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

  M1

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

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

  4、字體與圖形的配合

  以“圖片突出文字”為目的的排版,其特點(diǎn)是不需要分析照片里面的元素。在大部分設(shè)計(jì)教程以及很多優(yōu)秀的設(shè)計(jì)作品里,圖片被認(rèn)為只是作為一個(gè)大色塊存在,它的存在只是為了最后你想要表達(dá)的文字(情感),鋪設(shè)基調(diào)。

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

  第一種:形狀圖形

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

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

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

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

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

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

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

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

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

  第二種:直線(xiàn)

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

  直線(xiàn)的3種常見(jiàn)運(yùn)用方式:

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

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

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

  第三種:字符

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

  在網(wǎng)頁(yè)設(shè)計(jì)中,文字內(nèi)容和圖片的比重占了很大一部分,但差不多的信息量,呈現(xiàn)在網(wǎng)頁(yè)上的效果卻會(huì)大相徑庭。如何將這些內(nèi)容和元素安置在最合適的位置,也許是這其中很主要的原因。


品牌資訊MORE