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