空白,在網(wǎng)頁上主要是指除圖形&文字內(nèi)容之外的空間。網(wǎng)頁中的空白雖沒有像山水畫中“計白當(dāng)黑”的那么浪漫,但他在引導(dǎo)用戶視覺和創(chuàng)造流暢的視覺感受方面卻是至關(guān)重要的。
施樂公司在推出《施樂出版標(biāo)準(zhǔn)》中,他們這樣描述他們設(shè)計的原則:”頁面設(shè)計的主要目標(biāo)是視覺認知和清楚易讀。這些目標(biāo)必須通過和諧的排印、有效地利用圖畫和空白空間,有節(jié)制的利用(字行)來完成… …多次重復(fù),在視覺上形成必然聯(lián)系可以引導(dǎo)視線和幫助讀者快速瀏覽。設(shè)計中,留出大量空白空間作為空白表現(xiàn)領(lǐng)域,使標(biāo)題”突出”,大的圖畫得到視覺上的延伸!
下面,結(jié)合一些例子,談?wù)勎覍瞻自O(shè)計的一些簡單理解。
例子1:
A: http://ssq.cpdyj/
B: http://trade.500wan/ssq/
這是兩個彩票投注的頁面,從整個網(wǎng)頁的功能來說幾乎是一樣的,但是A網(wǎng)站的設(shè)計空白使用的比較散亂再加之內(nèi)容過多,會產(chǎn)生不知從哪里開始也不明白到哪里結(jié)束的視覺感覺,對于用戶來說會花費更多時間精力去分辨和判斷什么是什么;B網(wǎng)站頁面的空白使用相對合理,在用戶會花時間最多的操作區(qū)域內(nèi)保留了更多的空白空間,這樣不單可以起到強調(diào)操作區(qū)的作用,同時為眼睛找到一點點休息的區(qū)域,這相對擁擠的頁面更能幫助用戶再操作的過程中不容易著急?瞻自谶@里首先是頁面看上去更清爽一些了,同時也提高了網(wǎng)頁的可用性。
例子2:
A: http://www.baidu/more/
B:http://www.soso/more.shtml
C:http://www.google.hk/intl/zh-CN/options/
先看soso和百度的,很明顯兩個頁面使用了同樣的排版的手法,產(chǎn)生的效果也是類似的。這樣橫縱像表格一樣的排版,在每一個項目周圍會產(chǎn)生一些曖昧的空白空間,請試著體驗一下眼睛在需找其中一項的時候是如何在這些并不明確的空白空間中游走的,這樣做的結(jié)果很明顯的導(dǎo)致了頁面實用性的下降,用戶很可能在尋找的過程中產(chǎn)生很難找到東西的心理感受,但是soso的內(nèi)容較少所以可用性還是不錯的。再看看google的做法,google的做法也許你會說這樣排版太浪費空間了。的確這樣的做法的確是浪費空間,但是這樣做的好處在于:這兩列加右側(cè)留白空間,在視覺上給了用戶足夠的引導(dǎo)——-非常明顯的從上到下的瀏覽方向,可用性相對較高。
空白其實也就是圖形和背景的關(guān)系,但是和圖形設(shè)計中陰形陽形的使用有所不同的是,圖形設(shè)計中圖底之間的關(guān)系更為復(fù)雜,形成的美感更富變化,圖底可能分別都作為視覺的主題在進行設(shè)計,從而形成非常曖昧互相變化的復(fù)雜圖形,如:下圖。
但這種做法在網(wǎng)頁的設(shè)計中要慎用,這樣很容易造成圖形的底形分不清,造成視覺上的困擾。
長沙科聯(lián)環(huán)?萍加邢薰
長沙科聯(lián)環(huán)?萍加邢薰咀溆趪壹夐L沙經(jīng)濟技術(shù)開發(fā)區(qū),星沙工業(yè)園、我們以“科技創(chuàng)新,聯(lián)合共...南京尚上防腐木
南京尚上防腐木是一家專業(yè)致力于加工、制作、銷售戶外景觀防腐木,并為客戶設(shè)計安裝一站式服務(wù)的現(xiàn)...長沙昱霆機電有限公司
長沙昱霆機電有限公司是長沙空壓機_長沙空壓機保養(yǎng)_湖南空壓機維修_長沙空壓機機頭維修-長沙昱...湖南省土地學(xué)會,湖南土地學(xué)會,湖南土地學(xué)會官網(wǎng)
湖南省土地學(xué)會是全省土地科技工作者自愿組成,并依法登記的學(xué)術(shù)性、非盈利性、公益性的法人社會團...湖南為美環(huán)保技術(shù)有限公司,醫(yī)療污水凈化機組...
湖南為美環(huán)保技術(shù)有限公司應(yīng)“綠水青山就是金山銀山”之勢而生,秉持“為民環(huán)保,美麗干凈”理想信...長沙租車公司-長沙鑫晨租車
長沙鑫晨租車(長沙租車網(wǎng))于2008年,已精工細作多年,F(xiàn)以成為長沙地區(qū)較早的租車公司之一。...聯(lián)系方式
地址:湖南省長沙市天心區(qū)韶山南路248號南園503室
電話:13637482004 0731-88571521
網(wǎng)址:http:///
郵箱:123@123007.com
微信咨詢
掃一掃進移動端