- 相關(guān)推薦
留白在網(wǎng)頁設(shè)計當中的運用
優(yōu)秀的網(wǎng)頁設(shè)計需要關(guān)注許多方面,而留白的運用肯定是其中之一。下面是關(guān)于留白在網(wǎng)頁設(shè)計當中的運用,歡迎大家閱讀了解!
1、圖片留白
圖片留白就是在圖片的設(shè)計上,處理好標題和主題圖/背景色之間的關(guān)系,切勿因為要表現(xiàn)主題而堆砌一堆文字或是元素,要知道,適當?shù)纳釛壭Ч麜选?/p>
2、文本留白
文本留白就好理解很多,這里的文本指的是區(qū)塊當中的文字段落。寫過網(wǎng)頁的大家都知道,在區(qū)塊中有Margin和Padding的設(shè)置,還有段落的行距設(shè)置。標題和段落之間,行與行之間,適當?shù)牧舭卓梢宰屛淖钟幸欢ǖ暮粑,也方便瀏覽者去閱讀。
這里的Margin和Padding指的是網(wǎng)頁設(shè)計中元素標簽外部范圍的區(qū)域。參考下圖可以幫助理解。
3、區(qū)塊留白
區(qū)塊留白這個有點類似上面的文字段落留白,在網(wǎng)頁當中,每個區(qū)塊與區(qū)塊之間也要適當?shù)牧舭,而這個留白主要還是體現(xiàn)在Margin和Padding上。如果取消兩個區(qū)塊的Margin和Padding,那兩個區(qū)塊的內(nèi)容會聚集在一起,這樣不利于觀者去區(qū)分區(qū)塊之間的關(guān)系,也不利于閱讀。所以一般我們在給網(wǎng)站做界面的時候,都會設(shè)置一定的間距,就像蟬知系統(tǒng)中默認的間距是7px,當然,這個間距的大小都是可以調(diào)整的,看你怎么去設(shè)計這個頁面和頁面的整體風(fēng)格是否和諧而定。
不同的留白可以區(qū)分不同的區(qū)塊和同一區(qū)塊之間的層次。留白能夠增加或者降低元素的易見性。元素周圍留白越多,越能醒目突出。
4、布局留白
布局留白不難理解,正常情況下,網(wǎng)站會有一個寬度限制,一般寬屏模式下,有些網(wǎng)站的頭部和幻燈片設(shè)計是百分百的寬度,但是幻燈片下的主體內(nèi)容,可以給設(shè)定一個固定的寬度大小且居中顯示,這樣主體部分兩側(cè)留出一定的空白區(qū)域,這就是布局留白。
當然,現(xiàn)在也有很多網(wǎng)站打破常規(guī),布局的兩邊不留白,而將布局留白體現(xiàn)在其他細微的地方。
IGE定制展臺設(shè)計這個界面的設(shè)計體現(xiàn)了很多留白的地方,比如下面主體部分四周的留白。這也是布局上的一種留白體現(xiàn)。善用網(wǎng)頁當中的各種留白,可以更能突出品牌內(nèi)容、提升可讀性與易讀性、從而展現(xiàn)出網(wǎng)站強大的影響力。
俗話說“少即是多”,這是留白的真諦,當然,前提是你需要很好的運用留白。
適當?shù)牧舭卓梢赃_到更平衡的布局,元素更清晰的呈遞效果,更能吸引用戶注意。留白作為設(shè)計原則中的一種,不僅僅在各個領(lǐng)域被廣泛運用,在網(wǎng)頁當中也尤為重要。入門的設(shè)計師可能只是簡單的將要傳達的內(nèi)容元素擺放在網(wǎng)頁當中便可,但對于一個高級的設(shè)計師,更多的是怎么使用留白去引導(dǎo)用戶交互進而達到網(wǎng)站的目的
【留白在網(wǎng)頁設(shè)計當中的運用】相關(guān)文章:
網(wǎng)頁設(shè)計中插畫的運用及風(fēng)格07-14
網(wǎng)頁設(shè)計中flash動畫的特點與運用08-28