很多人做網(wǎng)頁(yè)版式設(shè)計(jì)的時(shí)候，很容易把內(nèi)容堆得慢慢當(dāng)當(dāng)，用戶在打開(kāi)后分不清重點(diǎn)，看半天都找不到核心信息。其實(shí)問(wèn)題的關(guān)鍵，是沒(méi)做好“空間層次感”，今天就帶大家聊聊怎么增強(qiáng)空間層次感。

　　1、用留白“分隔”內(nèi)容，不擠才清晰。

　　留白不是浪費(fèi)空間，而是劃分內(nèi)容區(qū)域的“隱形邊界”，比如標(biāo)題和正文之間、不同模塊之間、圖片和文字之間，也都要留足空白。比如正文段落間距保持在字號(hào)的1.5倍左右，模塊之間的留白至少20px，這樣不同內(nèi)容模塊就能明顯區(qū)分開(kāi)，用戶才不會(huì)覺(jué)得視覺(jué)擁擠。

　　2、靠大小和粗細(xì)定主次，重點(diǎn)先抓人眼。

　　內(nèi)容的重要程度，可以直接用字體大小和粗細(xì)來(lái)體現(xiàn)。比如網(wǎng)頁(yè)標(biāo)題用大號(hào)粗體，二級(jí)標(biāo)題用中號(hào)粗體，正文用常規(guī)字號(hào)和常規(guī)字重，輔助說(shuō)明文字用小號(hào)淺色字體。像首頁(yè)的核心標(biāo)語(yǔ)，字號(hào)可以再放大，搭配粗體，一眼就能成為視覺(jué)焦點(diǎn)；而“查看更多”“聯(lián)系我們”這類輔助信息，字號(hào)可以小一點(diǎn)，這樣不搶重點(diǎn)但又能找到，這樣層次就出來(lái)了。

　　3、用顏色區(qū)分層級(jí)，強(qiáng)化視覺(jué)引導(dǎo)。

　　顏色也是增強(qiáng)層次感的好工具，比如正文用深灰色（比純黑色更柔和），標(biāo)題用主色調(diào)，按鈕用和主色對(duì)比強(qiáng)烈的顏色，這樣用戶的視線才會(huì)被顏色鮮艷、對(duì)比度高的核心內(nèi)容吸引，再慢慢過(guò)渡到淺色的輔助內(nèi)容。要注意顏色別用太多，不然會(huì)顯得雜亂無(wú)章，反而破壞層次。

　　4、合理分區(qū)，給內(nèi)容“歸置”好位置。

　　可以用卡片、邊框或者背景色塊，把相關(guān)的內(nèi)容歸為一個(gè)區(qū)域，比如產(chǎn)品列表用卡片一個(gè)個(gè)分開(kāi)，表單區(qū)域用淺背景色塊框起來(lái)，導(dǎo)航欄用深色背景和正文區(qū)分開(kāi)。這樣每個(gè)區(qū)域的內(nèi)容都是一個(gè)獨(dú)立的整體，用戶能快速定位到自己想看的模塊。

　　另外，分區(qū)的時(shí)候要注意風(fēng)格統(tǒng)一，比如卡片的圓角大小、邊框顏色保持一致，別有的用方角、有的用圓角，反而顯得混亂。

　　5、按視覺(jué)流排版，順應(yīng)瀏覽習(xí)慣。

　　人瀏覽網(wǎng)頁(yè)的習(xí)慣大多是“從上到下、從左到右”，排版時(shí)要順著這個(gè)邏輯來(lái)。把最重要的內(nèi)容（比如Logo、核心標(biāo)語(yǔ)、導(dǎo)航）放在頁(yè)面上方，次要內(nèi)容放在中間，輔助信息（比如版權(quán)、聯(lián)系方式）放在底部；同一行內(nèi)容里，重點(diǎn)內(nèi)容放在左側(cè)，次要內(nèi)容放在右側(cè)。這樣用戶就能順著視覺(jué)流獲取信息，自然覺(jué)得網(wǎng)頁(yè)條理清晰。

　　其實(shí)增強(qiáng)網(wǎng)頁(yè)空間層次感的核心，就是以上為大家介紹的幾點(diǎn)，不用追求復(fù)雜的設(shè)計(jì)，只要把留白、字體大小、顏色、分區(qū)這幾個(gè)基礎(chǔ)點(diǎn)做好，再順應(yīng)用戶的瀏覽習(xí)慣排版，就能讓網(wǎng)頁(yè)內(nèi)容條理清晰，用戶瀏覽起來(lái)更輕松。