報道公司事件 · 傳播行業(yè)動態(tài)
很多人做網(wǎng)頁版式設計的時候,很容易把內(nèi)容堆得慢慢當當,用戶在打開后分不清重點,看半天都找不到核心信息。其實問題的關(guān)鍵,是沒做好“空間層次感”,今天就帶大家聊聊怎么增強空間層次感。
1、用留白“分隔”內(nèi)容,不擠才清晰。
留白不是浪費空間,而是劃分內(nèi)容區(qū)域的“隱形邊界”,比如標題和正文之間、不同模塊之間、圖片和文字之間,也都要留足空白。比如正文段落間距保持在字號的1.5倍左右,模塊之間的留白至少20px,這樣不同內(nèi)容模塊就能明顯區(qū)分開,用戶才不會覺得視覺擁擠。
2、靠大小和粗細定主次,重點先抓人眼。
內(nèi)容的重要程度,可以直接用字體大小和粗細來體現(xiàn)。比如網(wǎng)頁標題用大號粗體,二級標題用中號粗體,正文用常規(guī)字號和常規(guī)字重,輔助說明文字用小號淺色字體。像首頁的核心標語,字號可以再放大,搭配粗體,一眼就能成為視覺焦點;而“查看更多”“聯(lián)系我們”這類輔助信息,字號可以小一點,這樣不搶重點但又能找到,這樣層次就出來了。
3、用顏色區(qū)分層級,強化視覺引導。
顏色也是增強層次感的好工具,比如正文用深灰色(比純黑色更柔和),標題用主色調(diào),按鈕用和主色對比強烈的顏色,這樣用戶的視線才會被顏色鮮艷、對比度高的核心內(nèi)容吸引,再慢慢過渡到淺色的輔助內(nèi)容。要注意顏色別用太多,不然會顯得雜亂無章,反而破壞層次。

4、合理分區(qū),給內(nèi)容“歸置”好位置。
可以用卡片、邊框或者背景色塊,把相關(guān)的內(nèi)容歸為一個區(qū)域,比如產(chǎn)品列表用卡片一個個分開,表單區(qū)域用淺背景色塊框起來,導航欄用深色背景和正文區(qū)分開。這樣每個區(qū)域的內(nèi)容都是一個獨立的整體,用戶能快速定位到自己想看的模塊。
另外,分區(qū)的時候要注意風格統(tǒng)一,比如卡片的圓角大小、邊框顏色保持一致,別有的用方角、有的用圓角,反而顯得混亂。
5、按視覺流排版,順應瀏覽習慣。
人瀏覽網(wǎng)頁的習慣大多是“從上到下、從左到右”,排版時要順著這個邏輯來。把最重要的內(nèi)容(比如Logo、核心標語、導航)放在頁面上方,次要內(nèi)容放在中間,輔助信息(比如版權(quán)、聯(lián)系方式)放在底部;同一行內(nèi)容里,重點內(nèi)容放在左側(cè),次要內(nèi)容放在右側(cè)。這樣用戶就能順著視覺流獲取信息,自然覺得網(wǎng)頁條理清晰。
其實增強網(wǎng)頁空間層次感的核心,就是以上為大家介紹的幾點,不用追求復雜的設計,只要把留白、字體大小、顏色、分區(qū)這幾個基礎點做好,再順應用戶的瀏覽習慣排版,就能讓網(wǎng)頁內(nèi)容條理清晰,用戶瀏覽起來更輕松。
Copyright 大連網(wǎng)龍科技 版權(quán)所有 遼ICP備14006349號 html - txt - xml