在網站建設中，對(duì)網頁空白空間設計的(de)一些想法

作者：龍 時(shí)間：2018-07-28 浏覽：

空白，在網頁上主要是指除圖形&文字内容之外的(de)空間。網頁中的(de)空白雖沒有像山水(shuǐ)畫(huà)中“計白當黑(hēi)”的(de)那麽浪漫，但他(tā)在引導用(yòng)戶視覺和(hé)創造流暢的(de)視覺感受方面卻是至關重要的(de)。

施樂(yuè)公司在推出《施樂(yuè)出版标準》中，他(tā)們這(zhè)樣描述他(tā)們設計的(de)原則：”頁面設計的(de)主要目标是視覺認知和(hé)清楚易讀。這(zhè)些目标必須通(tōng)過和(hé)諧的(de)排印、有效地利用(yòng)圖畫(huà)和(hé)空白空間，有節制的(de)利用(yòng)（字行）來(lái)完成… …多(duō)次重複，在視覺上形成必然聯系可(kě)以引導視線和(hé)幫助讀者快(kuài)速浏覽。設計中，留出大(dà)量空白空間作爲空白表現領域，使标題”突出”，大(dà)的(de)圖畫(huà)得(de)到視覺上的(de)延伸。”
下(xià)面，結合一些例子，談談我對(duì)空白設計的(de)一些簡單理(lǐ)解。

例子1：

A:

B:

這(zhè)是兩個(gè)彩票(piào)投注的(de)頁面，從整個(gè)網頁的(de)功能來(lái)說幾乎是一樣的(de)，但是A網站的(de)設計空白使用(yòng)的(de)比較散亂再加之内容過多(duō)，會産生不知從哪裏開始也(yě)不明(míng)白到哪裏結束的(de)視覺感覺，對(duì)于用(yòng)戶來(lái)說會花費更多(duō)時(shí)間精力去分(fēn)辨和(hé)判斷什(shén)麽是什(shén)麽；B網站頁面的(de)空白使用(yòng)相對(duì)合理(lǐ)，在用(yòng)戶會花時(shí)間最多(duō)的(de)操作區(qū)域内保留了(le)更多(duō)的(de)空白空間，這(zhè)樣不單可(kě)以起到強調操作區(qū)的(de)作用(yòng)，同時(shí)爲眼睛找到一點點休息的(de)區(qū)域，這(zhè)相對(duì)擁擠的(de)頁面更能幫助用(yòng)戶再操作的(de)過程中不容易著(zhe)急。空白在這(zhè)裏首先是頁面看上去更清爽一些了(le)，同時(shí)也(yě)提高(gāo)了(le)網頁的(de)可(kě)用(yòng)性。

例子2：

先看soso和(hé)百度的(de)，很明(míng)顯兩個(gè)頁面使用(yòng)了(le)同樣的(de)排版的(de)手法，産生的(de)效果也(yě)是類似的(de)。這(zhè)樣橫縱像表格一樣的(de)排版，在每一個(gè)項目周圍會産生一些暧昧的(de)空白空間，請試著(zhe)體驗一下(xià)眼睛在需找其中一項的(de)時(shí)候是如何在這(zhè)些并不明(míng)确的(de)空白空間中遊走的(de)，這(zhè)樣做(zuò)的(de)結果很明(míng)顯的(de)導緻了(le)頁面實用(yòng)性的(de)下(xià)降，用(yòng)戶很可(kě)能在尋找的(de)過程中産生很難找到東西的(de)心理(lǐ)感受，但是soso的(de)内容較少所以可(kě)用(yòng)性還(hái)是不錯的(de)。再看看google的(de)做(zuò)法，google的(de)做(zuò)法也(yě)許你會說這(zhè)樣排版太浪費空間了(le)。的(de)确這(zhè)樣的(de)做(zuò)法的(de)确是浪費空間，但是這(zhè)樣做(zuò)的(de)好處在于：這(zhè)兩列加右側留白空間，在視覺上給了(le)用(yòng)戶足夠的(de)引導——-非常明(míng)顯的(de)從上到下(xià)的(de)浏覽方向，可(kě)用(yòng)性相對(duì)較高(gāo)。

空白其實也(yě)就是圖形和(hé)背景的(de)關系，但是和(hé)圖形設計中陰形陽形的(de)使用(yòng)有所不同的(de)是，圖形設計中圖底之間的(de)關系更爲複雜(zá)，形成的(de)美(měi)感更富變化(huà)，圖底可(kě)能分(fēn)别都作爲視覺的(de)主題在進行設計，從而形成非常暧昧互相變化(huà)的(de)複雜(zá)圖形，如：下(xià)圖。

但這(zhè)種做(zuò)法在網頁的(de)設計中要慎用(yòng)，這(zhè)樣很容易造成圖形的(de)底形分(fēn)不清，造成視覺上的(de)困擾。