2014-11-28 藍(lán)藍(lán)設(shè)計(jì)的小編
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供有效的 UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
來源：http://uedc.163.com/7206.html
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里
空白，在網(wǎng)頁上主要是指除圖形&文字內(nèi)容之外的空間。網(wǎng)頁中的空白雖沒有像山水畫中“計(jì)白當(dāng)黑”的那么浪漫，但他在引導(dǎo)用戶視覺和創(chuàng)造流暢的視覺感受方面卻是至關(guān)重要的。
施樂公司在推出《施樂出版標(biāo)準(zhǔn)》中，他們這樣描述他們設(shè)計(jì)的原則：”頁面設(shè)計(jì)的主要目標(biāo)是視覺認(rèn)知和清楚易讀。這些目標(biāo)必須通過和諧的排印、有效地利用圖畫和空白空間，有節(jié)制的利用（字行）來完成… …多次重復(fù)，在視覺上形成必然聯(lián)系可以引導(dǎo)視線和幫助讀者快速瀏覽。設(shè)計(jì)中，留出大量空白空間作為空白表現(xiàn)領(lǐng)域，使標(biāo)題”突出”，大的圖畫得到視覺上的延伸?！?br /> 下面，結(jié)合一些例子，談?wù)勎覍瞻自O(shè)計(jì)的一些簡單理解。
例子1：
B: http://trade.500wan.com/ssq/
這是兩個彩票投注的頁面，從整個網(wǎng)頁的功能來說幾乎是一樣的，但是A網(wǎng)站的設(shè)計(jì)空白使用的比較散亂再加之內(nèi)容過多，會產(chǎn)生不知從哪里開始也不明白到哪里結(jié)束的視覺感覺，對于用戶來說會花費(fèi)更多時間精力去分辨和判斷什么是什么；B網(wǎng)站頁面的空白使用相對合理，在用戶會花時間最多的操作區(qū)域內(nèi)保留了更多的空白空間，這樣不單可以起到強(qiáng)調(diào)操作區(qū)的作用，同時為眼睛找到一點(diǎn)點(diǎn)休息的區(qū)域，這相對擁擠的頁面更能幫助用戶再操作的過程中不容易著急?？瞻自谶@里首先是頁面看上去更清爽一些了，同時也提高了網(wǎng)頁的可用性。
例子2：
A: http://www.baidu.com/more/
B: http://www.soso.com/more.shtml
C: http://www.google.com.hk/intl/zh-CN/options/
先看soso和百度的，很明顯兩個頁面使用了同樣的排版的手法，產(chǎn)生的效果也是類似的。這樣橫縱像表格一樣的排版，在每一個項(xiàng)目周圍會產(chǎn)生一些曖昧的空白空間，請?jiān)囍w驗(yàn)一下眼睛在需找其中一項(xiàng)的時候是如何在這些并不明確的空白空間中游走的，這樣做的結(jié)果很明顯的導(dǎo)致了頁面實(shí)用性的下降，用戶很可能在尋找的過程中產(chǎn)生很難找到東西的心理感受，但是soso的內(nèi)容較少所以可用性還是不錯的。再看看google的做法，google的做法也許你會說這樣排版太浪費(fèi)空間了。的確這樣的做法的確是浪費(fèi)空間，但是這樣做的好處在于：這兩列加右側(cè)留白空間，在視覺上給了用戶足夠的引導(dǎo)——-非常明顯的從上到下的瀏覽方向，可用性相對較高。
空白其實(shí)也就是圖形和背景的關(guān)系，但是和圖形設(shè)計(jì)中陰形陽形的使用有所不同的是，圖形設(shè)計(jì)中圖底之間的關(guān)系更為復(fù)雜，形成的美感更富變化，圖底可能分別都作為視覺的主題在進(jìn)行設(shè)計(jì)，從而形成非常曖昧互相變化的復(fù)雜圖形，如：下圖。
但這種做法在網(wǎng)頁的設(shè)計(jì)中要慎用，這樣很容易造成圖形的底形分不清，造成視覺上的困擾。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com