網(wǎng)站及網(wǎng)頁版式設(shè)計(jì)排版-圖版率

在設(shè)計(jì)師眼中,一切空間的存在，都是由點(diǎn)、線、面組成的。它們互相交織、融合、襯托,形成一種秩序和韻律。書裝設(shè)計(jì)就是運(yùn)用點(diǎn)、線、面的天地。如一個(gè)字、一個(gè)小的圖形就是點(diǎn),一行整齊排列的字就是線;一個(gè)圖形是面,一片文字也是面，而面的邊緣還是線。版式設(shè)計(jì)，純粹就是運(yùn)用點(diǎn)、線、面來組織。 黑、白、灰,是指設(shè)計(jì)作品的明暗關(guān)系。任何視覺藝術(shù)，不管其形態(tài)多么復(fù)雜,變化多么豐富,歸結(jié)起來,都是在體現(xiàn)黑、白、灰之間的相互關(guān)系。處理得好,看起來就舒服;否則,就會(huì)給人以灰暗、雜亂的感覺。在書籍設(shè)計(jì)中，處理好黑、白、灰的關(guān)系尤為重要。

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

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

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

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

一、通過對(duì)頁面底色的調(diào)整

取得與提高圖版率相似的效果，從而改變頁面所呈現(xiàn)出來的視覺效果。

二、如果素材圖像尺寸小，卻不想讓圖版率變低。

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

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

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

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

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

圖標(biāo)

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

數(shù)字

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

序號(hào)

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

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

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

網(wǎng)站及網(wǎng)頁版式設(shè)計(jì)排版之圖版篇

小編話：網(wǎng)站界面設(shè)計(jì)的美不美，除了構(gòu)圖之外，另一個(gè)重要手段的就是如何處理留白，也可以理解成版率。留白就是為了凸顯層次、突出內(nèi)容。當(dāng)然除了留白還有什么方法讓界面高大上和達(dá)到一定的視覺效果呢?讓我們跟著創(chuàng)新互聯(lián)一起來看看吧!

這篇主要說一下版面和圖形使用，對(duì)高手來說可能有些老生常談，但對(duì)移動(dòng)端界面設(shè)計(jì)或許會(huì)有點(diǎn)參考價(jià)值，用幾分鐘看看吧。

界面美不美，除了構(gòu)圖之外，另一個(gè)重要手段的就是如何處理留白，也可以理解成版率。留白就是為了凸顯層次、突出內(nèi)容。

手持設(shè)備屏幕較小，決定了信息顯示是有限的。用戶有效接受信息并不與界面內(nèi)提供的信息量成正比，有的時(shí)候提供的越多，用戶反而真正接受的越少。妄想滿屏都是信息是不可能的。用戶越來越受不了滿屏的信息了。

讓用戶接受該接受的有效信息，是關(guān)鍵。

在設(shè)計(jì)界面的時(shí)候，因?yàn)閮?nèi)容和頁面都比較多，為了保證頁面與頁面的統(tǒng)一性，首先需要設(shè)定頁面內(nèi)容四周的留白。在設(shè)定頁面的間距后相應(yīng)的內(nèi)容圖標(biāo)，圖片等的安排就確定下來了。用這樣的方法能使調(diào)整出來的頁面更為條理化。

紅色色的部分就是內(nèi)容。在頁面中一般會(huì)有導(dǎo)航的存在，那么內(nèi)容區(qū)的版面是從導(dǎo)航下面計(jì)算的。

界面四周增加留白。這樣的界面很容易集中用戶的視線到少數(shù)的內(nèi)容上去，突出了焦點(diǎn)，整體給人一種典雅高級(jí)的感覺。

反之，縮小留白或者不留白，頁面會(huì)顯得更豐富更充滿活力。而圖片的展示空間會(huì)增加，沖擊感增強(qiáng)，讓界面更顯得富更有張力。

根據(jù)頁面的內(nèi)容不同和功能點(diǎn)，適當(dāng)?shù)恼{(diào)整界面周邊的留白非常重要。一般圖片本身比較有意境，可以直接采用“出血”的方式，不留白或者少留白。

下面創(chuàng)新互聯(lián)為你介紹一些版面的小規(guī)律、小技巧。

1.取其精華，一塊顏色也能定天下!

提取主要的信息，通過對(duì)整個(gè)頁面的顏色進(jìn)行調(diào)整，從而提高版面使用率。將一個(gè)或多個(gè)功能點(diǎn)作為主信息，提到首頁中進(jìn)行設(shè)計(jì)，從達(dá)到想要的視覺效果。這樣處理后的界面設(shè)計(jì)不僅能顯得大氣有張力，而且展現(xiàn)出來的信息聚合度高。

在缺少圖像素材的情況下，如何讓界面顯得有張力，整體感強(qiáng)，呈現(xiàn)出來的版面率高。

單色背景留白，凸顯主要信息。要求圖標(biāo)或者文字，相對(duì)簡(jiǎn)潔，能夠很好地和背景色融為一體。再通過線條和規(guī)則的圖形來分割留白區(qū)域，增加層次感。

做好這些的前提是，設(shè)計(jì)師要明確主要信息，以及它們之間的關(guān)系。

結(jié)合產(chǎn)品特點(diǎn)巧妙的運(yùn)用大色塊，將變化的信息用顏色區(qū)分出來。讓用戶最直觀的感知信息的變化。

2.多色塊靈活分割，加強(qiáng)內(nèi)容使用率

圖片素材少，還可以采用多色塊進(jìn)行分割，讓界面顯得不那么單調(diào)。

加強(qiáng)內(nèi)容使用率可以通過色塊(臨近色或是互補(bǔ)色)的延伸或是圖像的重復(fù)來組織頁面版式。將圖片和色塊進(jìn)行統(tǒng)一化排版布局，整體基調(diào)能使頁面豐富化。圖片與相同大小的色塊可以保持界面的統(tǒng)一性與簡(jiǎn)潔性，色調(diào)的一致的統(tǒng)一性和連續(xù)性使頁面更為整體，這樣看起來的頁面就像一張圖片一樣有張力。并且這種方式讓用戶感覺點(diǎn)擊的區(qū)域也會(huì)增加，從而操作也變得便捷起來。

3.構(gòu)圖不拘一格，找到最合適的內(nèi)容版率。

橫向和縱向分割，使界面顯得整齊、穩(wěn)定，而斜向分割讓界面沖擊感強(qiáng)。

使用不同的構(gòu)圖方式，穿插性地將少量的圖片整合在構(gòu)圖的形狀中，能讓界面變得活躍而富有活躍性。這樣的表現(xiàn)方式還能將產(chǎn)品的氣質(zhì)融入進(jìn)去，淋漓盡致地展現(xiàn)。有節(jié)奏感的設(shè)計(jì)更為取巧地加強(qiáng)了版式率。在界面設(shè)計(jì)中，圖文的穿插可以引導(dǎo)用戶的視線，讓原本簡(jiǎn)單的內(nèi)容變得有趣。在層次上，也可以區(qū)分內(nèi)容的主次性，讓閱讀更加的輕松。

4.簡(jiǎn)約化桌面或主頁，讓界面越近越美

常用方式：圖標(biāo)、加大文案字號(hào)、序號(hào)、數(shù)字等來達(dá)到加強(qiáng)版式率的運(yùn)用，提高視覺上的豐富性。

圖標(biāo)表達(dá)

人們?cè)絹碓秸J(rèn)同扁平化，一方面是因?yàn)楸馄交膱D標(biāo)看上去清新簡(jiǎn)潔，用戶理解快。另一方面，與圖標(biāo)搭配的背景更加單純，要么留白，要么炫簡(jiǎn)，盡可能減少給用戶在視覺上干擾。好的扁平化圖標(biāo)不是簡(jiǎn)單地刪減細(xì)節(jié)，而是著重凸顯有效的信息。

圖標(biāo)是最為直接的表達(dá)方式，簡(jiǎn)單明確的圖形，能讓用戶通過對(duì)圖標(biāo)的認(rèn)識(shí)快速找到想要的功能和需求點(diǎn)。圖標(biāo)與文案的搭配有效的降低了閱讀時(shí)候的疲勞感。從而加強(qiáng)了界面內(nèi)容的節(jié)奏。運(yùn)用圖標(biāo)的設(shè)計(jì)條理清晰，功能明確。

信息化圖標(biāo)能給產(chǎn)品增色。有趣的圖標(biāo)設(shè)計(jì)不僅能很好的將功能點(diǎn)進(jìn)行區(qū)分，也能好的將軟件的特性和品牌展現(xiàn)出來。

把圖形融入到界面中，可讓內(nèi)容更為豐富，層次更加的分明。

5.突出重點(diǎn)文案，調(diào)整版面率，讓信息更清晰。

調(diào)整文字大小將調(diào)整版式的使用率，使原本空的界面內(nèi)容顯示的更為飽滿，用戶閱讀起立更為直接。使用較大的字號(hào)進(jìn)行加強(qiáng)頁面使用率能讓頁面顯得更為信息。突出重要的引導(dǎo)文案，加強(qiáng)了軟件的情景感和帶入感?？焖僖龑?dǎo)了用戶對(duì)功能的理解，從而準(zhǔn)確的使用。

在頁面中我們可以強(qiáng)調(diào)重點(diǎn)數(shù)據(jù)或功能詞等來區(qū)分界面中的層次感。讓用戶的視線更為集中。

6.串聯(lián)圖片，讓它們講故事，視圖化版面。

這種設(shè)計(jì)方法更多的是將文案用圖形或插圖展現(xiàn)出來。在數(shù)據(jù)頁面和引導(dǎo)頁中最為常見。

一段文案一副插圖的引導(dǎo)頁更為有特色，給用戶的情懷感更強(qiáng)。這種設(shè)計(jì)手法也是最容易體現(xiàn)產(chǎn)品特質(zhì)和吸引眼球的。圖案的易讀性高，能在極其短暫的時(shí)間內(nèi)快速傳達(dá)給用戶信息。用圖像來講故事，是設(shè)計(jì)中最根本的表現(xiàn)方法，也更是最為受歡迎的表達(dá)方式。

圖在界面中的運(yùn)用

三種方式：摳，邊界關(guān)系，殘缺

1.切摳弄，制造純色留白!

在處理圖片素材的時(shí)候，常常會(huì)碰到圖片背景雜亂，產(chǎn)品不夠突出的問題。在設(shè)計(jì)之前我們可以對(duì)素材先進(jìn)行處理，將產(chǎn)品直接摳出來。利用這種方式可以找到產(chǎn)品的形狀，越明確的形狀越能反映用戶對(duì)產(chǎn)品的認(rèn)知度。產(chǎn)品的獨(dú)特性能快速明確的表達(dá)給用戶，用戶從潛意識(shí)第一時(shí)間的判斷到產(chǎn)品的類型和使用特性。

下面是一個(gè)曲奇餅干的網(wǎng)站，將主餅干的勾出來，進(jìn)行層次感的區(qū)分。在產(chǎn)品介紹中采用了側(cè)面的實(shí)物摳圖，體現(xiàn)出了曲奇餅干最為真實(shí)的厚度。運(yùn)用碎落的餅干塊虛化拉開產(chǎn)品的層次。深色的背景與餅干對(duì)比強(qiáng)烈，直接凸顯了實(shí)物的形狀。讓用戶一目了然，食欲大增。從而增了用戶的購買欲望。

在很多的電商APP中也常采用摳圖，去除多余雜亂的信息，利用產(chǎn)品的形狀直接體現(xiàn)不同商品的特點(diǎn)。這樣的界面用戶閱讀起來輕松愉悅。

2.建立邊界，再打破邊界，破出重圍

如果需要展示的信息較多，采用分割區(qū)域的方法，可以使界面顯得整齊干凈。而當(dāng)信息較少時(shí)，設(shè)計(jì)師可以大膽選用“局部出血”的方式，建立邊界，再突破它，增加層次感和沖擊力，以凸顯主題。

一定要記得設(shè)定好的內(nèi)容范圍是為了讓頁面顯得整體化，而不僅僅是擺放和拼圖。

在網(wǎng)頁設(shè)計(jì)中有時(shí)候會(huì)見到這種方式，其實(shí)在手機(jī)、平板等UI設(shè)計(jì)中我們完全可以套用。

運(yùn)用圖片的穿插來區(qū)分背景和產(chǎn)品或形象的層次感，處理完的界面更加富有生命力。放大需要突出的主形象，把它作為第一焦點(diǎn)展現(xiàn)在用戶的眼前，有種強(qiáng)烈的“面對(duì)面”感受。

在APP中采用將圖片局部突出出來，能拉開信息的層次，將需要突出的圖片信息第一時(shí)間展示給用戶。一方面可以方便和引導(dǎo)用戶點(diǎn)擊，另一方面在上下滾動(dòng)的長副瀑布流里，適當(dāng)?shù)卮蚱破胶?，可以豐富頁面的節(jié)奏感。

在ICON的設(shè)計(jì)中我們也常用到破圖的方法。在統(tǒng)一的圓角矩形中，將表達(dá)寓意的圖形局部超出，使圖標(biāo)更為有空間感和靈活性。

采用這種方式設(shè)計(jì)的圖標(biāo)空間感強(qiáng)，層次感強(qiáng)烈，能使產(chǎn)品形象顯得更為突出。

在字體中也經(jīng)常運(yùn)用到破圖的方法，讓字體更為生動(dòng)。在破字的過程中也能引發(fā)出不同的創(chuàng)意點(diǎn)。

大美青海字體設(shè)計(jì)我把數(shù)字9破出了方塊。而在優(yōu)車尚品字體的設(shè)計(jì)中，我通過品字的破圖找到了車的聯(lián)想，讓整個(gè)字體設(shè)計(jì)的更為貼切靈動(dòng)。

3.沖出畫面，只保留局部，讓產(chǎn)品再大一點(diǎn)!

有時(shí)候，我們拿到素材，在處理后發(fā)現(xiàn)，圖片比較平常，用戶一眼就知道是什么。這個(gè)時(shí)候，可以考慮保留局部的方式，營造殘缺美，增加時(shí)尚感。不要小看用戶的的腦補(bǔ)能力，當(dāng)然，這種方案還是要與客戶或者產(chǎn)品經(jīng)理及時(shí)溝通，殘缺美不是所有人動(dòng)能接受的。

我們將圖片進(jìn)行放大，找出產(chǎn)品特點(diǎn)。選擇能撐起整個(gè)頁面構(gòu)圖的位置，切除不必要的圖形，讓圖片沖出畫面!這樣處理后，頁面顯得非常富有張力，激發(fā)了用戶想看到產(chǎn)品整個(gè)形象的欲望，起到產(chǎn)品預(yù)熱的效果。

在WATCH的預(yù)熱官網(wǎng)中，設(shè)計(jì)師將圖片放大，裁取有特點(diǎn)的部位進(jìn)行展示，引導(dǎo)了用戶點(diǎn)擊觀看產(chǎn)品的整體形象，激發(fā)了用戶更多的去了解產(chǎn)品的特性。

從版面角度看，局部放大裁切圖片，增加了留白，增加了版式率，讓整個(gè)頁面顯得飽滿，微距的效果使用戶與產(chǎn)品更貼切。

這一篇主要理順了一下版面和圖形使用知識(shí)，并不全面，大家還是以欣賞為主。看完了能有個(gè)留白、破圖的印象就不算白看。

設(shè)計(jì)大方向上的東西終于絮叨得差不多了，我知道其實(shí)大家都懂，就是不知道從何下手而已，下一篇來點(diǎn)小方向的實(shí)用東西，歡迎大家在創(chuàng)新互聯(lián)網(wǎng)頁設(shè)計(jì)欄中留言。

分享名稱：網(wǎng)站及網(wǎng)頁版式設(shè)計(jì)排版之圖版篇
分享網(wǎng)址：http://jinyejixie.com/news19/163319.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、網(wǎng)站營銷、電子商務(wù)、動(dòng)態(tài)網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、微信公眾號(hào)

廣告

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