網(wǎng)頁設(shè)計(jì)的關(guān)鍵！版式設(shè)計(jì)之圖版率

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

文章參考自《版面設(shè)計(jì)的原理》 《版式設(shè)計(jì)原理》，更多好書，戳：《設(shè)計(jì)師圖書導(dǎo)航》

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

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

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

?一.?通過對頁面底色的調(diào)整，取得與提高圖版率相似的效果，從而改變頁面所呈現(xiàn)出來的視覺效果。

二．如果素材圖像尺寸小，卻不想讓圖版率變低。可以通過色塊（相近色或是互補(bǔ)色）的延伸或是圖像的重復(fù)來組織頁面結(jié)構(gòu)，避免這種素材資源不足的情況。

采用和圖片相同大小的色塊可以保持界面的統(tǒng)一性與簡潔性，而且這樣的排版會造成一種錯(cuò)覺，使用戶覺得有底色的方框整體視乎是一張圖片。而原本小尺寸的素材圖在背景色的映襯下也似乎變成了一張很大的圖。這種重復(fù)排列、添加變化的方法有效地避免了頁面的單調(diào)和無趣。

三．版式的強(qiáng)節(jié)奏設(shè)計(jì)也能間接優(yōu)化頁面的圖版率

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

四．增加頁面中的圖形也可以改善圖版率低的問題

無論是數(shù)字、序號、角標(biāo)、圖標(biāo)，甚至是視覺處理后的標(biāo)題文字，都能提高頁面的視覺度，并給用戶留下活躍生動的印象。同時(shí)，圖形作為一種更直觀的傳達(dá)信息的方式，也使人一眼就能快速獲取信息，從效率上優(yōu)于用?文字表達(dá)時(shí)的逐行掃描。

圖標(biāo)

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

數(shù)字

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

序號

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

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

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

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

原文地址：isux.tencent

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量72萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：