網站開發之頁面版式設計圖版率

 

在頁面設計中，除了(le)文字之外，通(tōng)常都會加入圖片或是插圖等視覺直觀性的(de)内容。表示這(zhè)些視覺要素所占面積與整體頁面的(de)之間比率的(de)就是圖版率。簡單說來(lái)，圖版率就是頁面中圖片面積的(de)所占比。這(zhè)種文字和(hé)圖片所占的(de)比率，對(duì)于頁面的(de)整體效果和(hé)其内容的(de)易讀性會産生巨大(dà)的(de)影(yǐng)響。

圖版率高(gāo)低的(de)區(qū)别：同樣的(de)設計風格下(xià)，圖版率高(gāo)的(de)頁面會給人(rén)以熱(rè)鬧而活躍的(de)感覺，反之圖版率低的(de)頁面則會傳達出沉穩、安靜的(de)效果。提高(gāo)圖版率可(kě)以活躍版面，優化(huà)版面的(de)視覺度。但完全沒有文字的(de)版面也(yě)會顯得(de)空洞，反而會削弱版面的(de)視覺度。

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

有時(shí)在沒有圖像素材的(de)情況下(xià)，但因爲頁面性質的(de)需要，頁面又需要呈現出圖版率高(gāo)的(de)效果。那麽，該如何進行設計呢(ne)?
　　一. 通(tōng)過對(duì)頁面底色的(de)調整，取得(de)與提高(gāo)圖版率相似的(de)效果，從而改變頁面所呈現出來(lái)的(de)視覺效果。

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

三.版式的(de)強節奏設計也(yě)能間接優化(huà)頁面的(de)圖版率。合理(lǐ)的(de)利用(yòng)排版的(de)節奏感以及跳躍率(文字和(hé)圖片的(de)跳躍率，是指版面中最大(dà)标題和(hé)最大(dà)的(de)圖與最小正文字體和(hé)圖片大(dà)小之間的(de)比率)。在版面設計中，圖片或是文字的(de)跳躍率可(kě)以獲得(de)較高(gāo)的(de)注意力，讓無趣的(de)版面充滿活力。另外，排版層次豐富，也(yě)可(kě)以區(qū)分(fēn)文章(zhāng)主次信息，讓浏覽更加輕松，并且提高(gāo)版面的(de)視覺度。

四.增加頁面中的(de)圖形也(yě)可(kě)以改善圖版率低的(de)問題。無論是數字、序号、角标、圖标，甚至是視覺處理(lǐ)後的(de)标題文字，都能提高(gāo)頁面的(de)視覺度，并給用(yòng)戶留下(xià)活躍生動的(de)印象。同時(shí)，圖形作爲一種更直觀的(de)傳達信息的(de)方式，也(yě)使人(rén)一眼就能快(kuài)速獲取信息，從效率上優于用(yòng) 文字表達時(shí)的(de)逐行掃描。
　　圖标
　　圖标的(de)設計讓浏覽和(hé)交互操作更加方便。圖與文的(de)搭配可(kě)以降低閱讀的(de)疲勞感，也(yě)增強了(le)排版的(de)設計節奏感。

數字
　　對(duì)數字的(de)視覺處理(lǐ)也(yě)能起到類似插圖的(de)裝飾效果，成爲頁面上的(de)視覺要素，同時(shí)增強頁面的(de)設計感。

序号
　　頁面中的(de)序号既有引導閱讀順序的(de)功能，也(yě)可(kě)以作爲圖片起到頁面的(de)裝飾作用(yòng)。另外，通(tōng)過對(duì)序号的(de)突出設計，可(kě)以讓布局更清晰靈活。即便是毫無規律的(de)排版，也(yě)可(kě)以通(tōng)過清晰的(de)序号找準閱讀的(de)軌迹。

标題文字的(de)處理(lǐ)
如果頁面中沒有圖片和(hé)插圖，那麽通(tōng)過對(duì)文字及其顔色的(de)處理(lǐ)，也(yě)可(kě)以使之起到與視覺要素相近的(de)作用(yòng)。下(xià)面的(de)例子中，對(duì)于标題文字都進行了(le)視覺加工，起到了(le)整體頁面的(de)裝飾效果。借助對(duì)這(zhè)種文字大(dà)小、顔色、形狀的(de)靈活運用(yòng)，來(lái)突出頁面的(de)重點，避免視覺上的(de)單調感。