網(wǎng)站頁(yè)面版式設(shè)計(jì)之圖版率

在頁(yè)面設(shè)計(jì)中，除了文字之外，通常都會(huì)加入圖片或是插圖等視覺(jué)直觀性的內(nèi)容。表示這些視覺(jué)要素所占面積與整體頁(yè)面的之間比率的就是圖版率。簡(jiǎn)單說(shuō)來(lái)，圖版率就是頁(yè)面中圖片面積的所占比。這種文字和圖片所占的比率，對(duì)于頁(yè)面的整體效果和其內(nèi)容的易讀性會(huì)產(chǎn)生巨大的影響。

　　圖版率高低的區(qū)別：同樣的設(shè)計(jì)風(fēng)格下，圖版率高的頁(yè)面會(huì)給人以熱鬧而活躍的感覺(jué)，反之圖版率低的頁(yè)面則會(huì)傳達(dá)出沉穩(wěn)、安靜的效果。提高圖版率可以活躍版面，優(yōu)化版面的視覺(jué)度。但完全沒(méi)有文字的版面也會(huì)顯得空洞，反而會(huì)削弱版面的視覺(jué)度。

　　如果頁(yè)面的整體全部都是圖片的時(shí)候，圖版率就是100%。反之如果頁(yè)面全是文字，圖版率就是0%。

　　有時(shí)在沒(méi)有圖像素材的情況下，但因?yàn)轫?yè)面性質(zhì)的需要，頁(yè)面又需要呈現(xiàn)出圖版率高的效果。那么，該如何進(jìn)行設(shè)計(jì)呢?

一. 通過(guò)對(duì)頁(yè)面底色的調(diào)整，取得與提高圖版率相似的效果，從而改變頁(yè)面所呈現(xiàn)出來(lái)的視覺(jué)效果。

二.如果素材圖像尺寸小，卻不想讓圖版率變低。可以通過(guò)色塊(相近色或是互補(bǔ)色)的延伸或是圖像的重復(fù)來(lái)組織頁(yè)面結(jié)構(gòu)，避免這種素材資源不足的情況。采用和圖片相同大小的色塊可以保持界面的統(tǒng)一性與簡(jiǎn)潔性，而且這樣的排版會(huì)造成一種錯(cuò)覺(jué)，使用戶覺(jué)得有底色的方框整體視乎是一張圖片。而原本小尺寸的素材圖在背景色的映襯下也似乎變成了一張很大的圖。這種重復(fù)排列、添加變化的方法有效地避免了頁(yè)面的單調(diào)和無(wú)趣。

　三.版式的強(qiáng)節(jié)奏設(shè)計(jì)也能間接優(yōu)化頁(yè)面的圖版率。合理的利用排版的節(jié)奏感以及跳躍率(文字和圖片的跳躍率，是指版面中大標(biāo)題和大的圖與最小正文字體和圖片大小之間的比率)。在版面設(shè)計(jì)中，圖片或是文字的跳躍率可以獲得較高的注意力，讓無(wú)趣的版面充滿活力。另外，排版層次豐富，也可以區(qū)分文章主次信息，讓瀏覽更加輕松，并且提高版面的視覺(jué)度。

四.增加頁(yè)面中的圖形也可以改善圖版率低的問(wèn)題。無(wú)論是數(shù)字、序號(hào)、角標(biāo)、圖標(biāo)，甚至是視覺(jué)處理后的標(biāo)題文字，都能提高頁(yè)面的視覺(jué)度，并給用戶留下活躍生動(dòng)的印象。同時(shí)，圖形作為一種更直觀的傳達(dá)信息的方式，也使人一眼就能快速獲取信息，從效率上優(yōu)于用 文字表達(dá)時(shí)的逐行掃描。

圖標(biāo)

　　圖標(biāo)的設(shè)計(jì)讓瀏覽和交互操作更加方便。圖與文的搭配可以降低閱讀的疲勞感，也增強(qiáng)了排版的設(shè)計(jì)節(jié)奏感。

數(shù)字

　　對(duì)數(shù)字的視覺(jué)處理也能起到類似插圖的裝飾效果，成為頁(yè)面上的視覺(jué)要素，同時(shí)增強(qiáng)頁(yè)面的設(shè)計(jì)感。

序號(hào)

　　頁(yè)面中的序號(hào)既有引導(dǎo)閱讀順序的功能，也可以作為圖片起到頁(yè)面的裝飾作用。另外，通過(guò)對(duì)序號(hào)的突出設(shè)計(jì)，可以讓布局更清晰靈活。即便是毫無(wú)規(guī)律的排版，也可以通過(guò)清晰的序號(hào)找準(zhǔn)閱讀的軌跡。

標(biāo)題文字的處理

如果頁(yè)面中沒(méi)有圖片和插圖，那么通過(guò)對(duì)文字及其顏色的處理，也可以使之起到與視覺(jué)要素相近的作用。下面的例子中，對(duì)于標(biāo)題文字都進(jìn)行了視覺(jué)加工，起到了整體頁(yè)面的裝飾效果。借助對(duì)這種文字大小、顏色、形狀的靈活運(yùn)用，來(lái)突出頁(yè)面的重點(diǎn)，避免視覺(jué)上的單調(diào)感。

　　文章參考：《版面設(shè)計(jì)的原理》 《版式設(shè)計(jì)原理》

當(dāng)前標(biāo)題：網(wǎng)站頁(yè)面版式設(shè)計(jì)之圖版率
標(biāo)題URL：http://muchs.cn/news/168261.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、App設(shè)計(jì)、響應(yīng)式網(wǎng)站、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、ChatGPT

廣告

聲明：本網(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)