首先、網(wǎng)頁排版就是將有限的視覺元素進行有機的排列組合,讓邏輯清晰、閱讀順暢、交互便捷,產(chǎn)生良好的體驗。
網(wǎng)頁排版有以下原則:
1、重復(fù)與交錯、節(jié)奏與韻律、對稱與均衡、對比與調(diào)和、比例與適度、變異與秩序、虛實與留白、變化與統(tǒng)一
2、同時還要強調(diào):
功能與形式(深入理解功能和內(nèi)容,使之形式更好的體現(xiàn)主題思想)
兼容與響應(yīng)(跨平臺,不同的分辨率、不同的設(shè)備環(huán)境下的呈現(xiàn)效果)
其次、下面我們以不同的方面說一下網(wǎng)頁排版。
1、 網(wǎng)頁文字排名
通過對字號、字體、字色、粗細、間距、行距等屬性來體現(xiàn)出內(nèi)容的層次結(jié)構(gòu)。做好網(wǎng)頁中文字的排版,特別對于大篇幅的文字,可以增加網(wǎng)頁的美觀性使讀者更有耐心閱讀,提高用戶體驗度。在網(wǎng)頁設(shè)計里,文字排版主要由三個因素控制:
字體大小(font-size)
行距(line-height)
間距(margin,padding)
認真調(diào)整這三個因素的值,可以實現(xiàn)理想的效果。
根據(jù)之前的經(jīng)驗得出基本文字排版對行距、間距的要求如下:
設(shè)行距為 dl px ,設(shè)垂直方向上的間距和為 ∑ds = dst (段前距) + dsb (段后距) (px) ①,假設(shè)基礎(chǔ)行距為k px,則
n*k = dl + ∑ds (n為自然數(shù)) 即行距和間距之和應(yīng)當(dāng)是18的倍數(shù) ②
由方程①、② 得出:
行距和全部垂直間距之和為18的倍數(shù)。
2、網(wǎng)頁顏色
網(wǎng)頁運用顏色的形體、位置、面積,及色相、明度、純度等屬性并結(jié)合內(nèi)容與環(huán)境來組織色彩。氛圍效果營造,同產(chǎn)品的統(tǒng)一性,優(yōu)化(品質(zhì)大小,色彩信息,實現(xiàn)方案)。
3、網(wǎng)頁圖片排版
網(wǎng)頁圖片排版要做到主圖次文,圖文節(jié)奏,空隙,模塊化。同時要強調(diào)尺寸樣式的定位,同一頁面的和諧性,圖片的優(yōu)化,位置的節(jié)奏,大小對比。
4、網(wǎng)頁導(dǎo)航/圖表排版
網(wǎng)頁導(dǎo)航/圖表排版要通過對信息數(shù)據(jù)的歸納整理,有效分類、排布,將復(fù)雜信息高效、清晰地傳遞給用戶——清晰、直觀。更多的是要將信息內(nèi)容有效的組織、排布,使其規(guī)范有序、清晰明確,便于用戶高效、準(zhǔn)確獲取相關(guān)信息,把網(wǎng)站設(shè)計的更友好、易用、真實可信