網頁設計的關鍵！版式設計之圖版率

 

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

　　圖版率高低的區別：同樣的設計風格下，圖版率高的頁面會給人以熱鬧而活躍的感覺，反之圖版率低的頁面則會傳達出沉穩、安靜的效果。提高圖版率可以活躍版面，優化版面的視覺度。但完全沒有文字的版面也會顯得空洞，反而會削弱版面的視覺度。

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

　　有時在沒有圖像素材的情況下，但因為頁面性質的需要，頁面又需要呈現出圖版率高的效果。那麼，該如何進行設計呢?

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

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

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

　　三．版式的強節奏設計也能間接優化頁面的圖版率

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

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

　　無論是數字、序號、角標、圖標，甚至是視覺處理後的標題文字，都能提高頁面的視覺度，並給用戶留下活躍生動的印象。同時，圖形作為一種更直觀的傳達信息的方式，也使人一眼就能快速獲取信息，從效率上優於用 文字表達時的逐行掃描。

　　圖標

　　圖標的設計讓浏覽和交互操作更加方便。圖與文的搭配可以降低閱讀的疲勞感，也增強了排版的設計節奏感。

　　數字

　　 對數字的視覺處理也能起到類似插圖的裝飾效果，成為頁面上的視覺要素，同時增強頁面的設計感。

　　序號

　　頁面中的序號既有引導閱讀順序的功能，也可以作為圖片起到頁面的裝飾作用。另外，通過對序號的突出設計，可以讓布局更清晰靈活。即便是毫無規律的排版，也可以通過清晰的序號找准閱讀的軌跡。

　　標題文字的處理

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