設計中包含著形態的變化和空間的布置,要使得空間更加高效的利用,首先就是要積極的意識到這壹點,並從中觀察它如何在形狀、空間樣式和空間與空間之間如何相互聯系。這是壹系列初學者需要掌握設計原理的第二部分。第壹部分主要講了對於形狀的把控,而第二部分也是基於格式塔原則的,並很大的程度上獲得設計基本原則的知識。
最適合用於格式塔原則中的空間原理的就是圖形與背景。在壹切的設計之初都會視為彼此之間的關系是相互排斥的。既不能解除相互之間的關系,也不能改變彼此壹方。
所以圖形與背景的關系是互補的,它們可以通過相互之間的作用來增強或減少效果,並是有效的組織彼此之間的關系以達成設計目的的重要方法之壹。在設置壹個背景時我們應該仔細想想,如何聯系設計?並且它們之間的原理又是怎樣的?
“白色的空間會認為是壹個很活躍的元素,而不是只是壹個被動的背景。”— Jan Tschichold
從上面三個塊的樣式思考,在最左側的塊,我們看到壹系列的黑線,它們之間有等量的空間,總之,黑線和白線的等量間隔會形成壹種灰色的區域,也就是黑白間錯形成的壹種效果。在中間面板中去除白色就變成壹塊黑色的面板了,此時不僅看不到空間的樣式,其他的各個元素都變成壹個單壹的元素。
在最右邊的面板中,區域中有兩條黑線已經被刪除,這將會激活壹個空間,使得這個區域是位於灰色區域的頂部,背景就成為圖形,就可以進行更加深入的設計。
(1) 穩定 :很清楚元素與背景,以及壹個形狀和另壹個形狀中誰是要突出的主要元素。
(2) 可逆 :這裏的兩個圖形和背景能夠深深的吸引用戶,從而造成壹種緊張感,因此無論其他的什麽元素,可以使用類似的方法,營造壹種動態設計效果。
(3) 歧義 :元素可以和背景同時置換使用,彼此之間可以形成有趣的形狀,並讓觀眾以自己的切入點組成。
根據上面的關系,如何設置和平衡圖形與背景兩者之間的關系,可以使得觀眾看到不同部位的設計,並結合上下文之間的彼此關系來解釋理解它們。
圖形和背景之間的關系不是它們在格式塔原則的最突出作用,另外這裏還有兩個:
(1) 接近 :接近通過壹個封閉空間的元素來連接其他元素之間的關系。我們可以簡單的理解:段落之間的間距要大於段內行與行之間的間距。
(2) 封閉 :這會使得空間中的元素存在差異。觀眾根據自己的以往經驗會填補空白的信息來完成壹個整體。如果有大部分是背景,那麽封閉就沒有必要了。空間太少了就不需要設置封閉了,只有保持空白和內容區域的平衡才會正確處理兩者之間的關系。
現在想想音樂,如果說每壹個音符或者是和弦被同時演奏,那麽就不會產生音樂,此時會聽到噪音。
當聲音有壹種此起彼伏的對比時才會出現音樂。而不同的音符的開始和停頓就會創建出節奏和旋律,如果沒有停頓就沒有音樂。
同理,空間也可以執行類似的功能,它對空間的有透氣性提供了積極的作用。通過設計它會使得視線能夠自由的來回移動,尋找元素。作為正負反差,如果沒有空間就沒有設計,就會產生視覺噪點,除非妳的設計傾向於空間的設計。壹般情況下訪問者不會抱怨空白區域太多,而是太少。
對於留白區域,可以做到下面幾點:
(1)建立對立的壹面,突出重點和建立層次關系
(2)產生情感張力
(3)元素與元素之間有透氣性
正如圖形和背景的關系壹樣,意味著空間裏面只需要存在壹些基本的元素,加入太多的元素空間就顯得不太明晰了,因此圖形和背景之間應該建立某種關系,來保持彼此之間的聯絡。
其中對於空白區域最重要的功能應該是提高可讀性和易讀性。對於大片的留白,會使得文字部分更具有吸引力,而相對於比較局促的空間應該使得元素更加清晰。
微空間 :就是在壹組元素內的空間,這是字母、單詞和段落之間的空間。
大空間 :這是主要元素之間的空間。它們會是單獨的元件或元素,並提供路徑,眼睛能夠在這些元素之間有足夠的透氣性。
空白區域可以傳達品質,通常在大空間區只出現極少的元素。我們可以對比壹下高端的和折扣的商品包裝。哪壹個會使用更大的空間呢?哪壹個包裝的空白區域會更加多壹些,這些都是傳達壹些信息的。
空間可以傳達信息比如質量等,例如:
(1)精致
(2)簡單
(3)豪華
(4)幹凈
(5)個性
(6)開放度
當我們沒有足夠的空間使用時,可以使用填滿的設計方式。另外還可以通過捕捉設計元素之間的相關聯系來避免空間的浪費。
設計的最終形狀結構中也包括所用的留白形狀,因此不要恐懼使用留白。而是把留白看成自己完成設計的壹個元素。
留白在網頁設計中的幾個案例
為了更好的使用留白,首先要有很強的這種自我意識到這壹點,並熟悉識別不同的運用留白的設計。請仔細留意使用的形狀,以及思考它們與畫布元素之形成的相互聯系。為此讓我們看看壹些網站中的設計,是如何使用這種留白的!
“保守派”
湯姆·約翰遜的設計保守派就使用了大量空白,使文本和其他元素存在呼吸空間,觀眾不會弄錯什麽是背景,什麽是突出元素。
信息與信息之間,元素與元素之間進行相對應的隔開設計(可以回憶上壹篇文章提到的就近原則),進行區分元素組。我們可以很清楚的知道什麽時候開始什麽時候結束,這就取決於它們之間的空間。
其最重要的內容是在頁面的中心,兩側有較大的空白,而中間的元素時而間斷,並且又存在激活兩者之間聯系的線段元素。這樣就有助於提醒用戶這個區域是特別要註意的區域。
Heroku的狀態頁面
下面圖片顯示了部分Heroku的狀態頁面。這個網站上有很多事件被報道。在這裏,有更多的留白就意味著更好的服務。
值得註意的是頁面的背景不壹定要是白色的,雖然網頁的默認是白色的背景空間,而且它也很實用,不過這裏有壹些很重要的信息需要提示,例如狀態更新和最新報告,中間間斷的空白區域。
Introducing the Novel
在頂部的空間中文字“Introducing the Novel ”處於不對稱狀態,並起到積極的作用。請註意頁面的左邊的大塊空白區域直接導致眼睛看到內容。如果點擊頁面,從上向下滾動,就會發現頁面的空白之間是彼此分離和組合。
淺色的線條用於區分這些分離和分組的塊,當瀏覽這個網站時,會發現這些線條不僅起到區分塊的作用,還保持塊之間的透氣性和流動性,以避免集中於壹點。
Elliot Jay Stocks
這個網站對於其背後的設計相信很多人都熟悉,因為它使用壹種不對稱的空間設計出壹種很有動感的效果。
在這個頁面頂部大圖片可以作為壹個臨時的模塊,用於訪問下面的內容。另外大圖的周圍又留下足夠的空白,保持讓人很舒服的透氣性,如果在左側的側欄內容使用相同的背景,就很容易導致眼睛在兩者之間移動,而且顏色變化也會的更加困難。
另外和上面的網站類似,空間上既可以用於組裝和區分不同的信息,以及群體,還可以使得每個組從中脫引而出,從而在尋找信息的過程中有足夠的留白可以讓視覺放松休息。
菲爾·科夫曼
這個網站帶給人的感覺就是單壹的形式使用了大量的空白。盡管缺乏壹些積極的效果來突出那些本來元素的重要性。
使用了彩色的矩形背景,文本間距留有足夠的空間,使得周圍變得很容易閱讀,而不是被誤認為在頁面上其他文本。
重點元素需要適配不同瀏覽器窗口的寬度的,但單個形狀包圍仍然存在。
在2013年網站的New Adventures in Web Design會議上會看到很多類似這樣的網站。空間中不同的信息塊包含不同的信息,整體頁面上顯得那麽的活潑。
有壹些值得註意的地方,圖像的左上方有壹個帶向右的灰色圓形箭頭。這些箭頭並沒有遮擋了空間流動性,因為它並沒有觸碰到,每個虛線的地方有間斷,強調這個區域可以流動的,另外也限制了其他區域的流動。借助較淺的灰色,防止箭頭成為主導,以提高流動性。
總之,當我們的瀏覽很多頁面時會截圖,箭頭不會和主要內容重疊。然而,大約1280px的寬度為主要的內容區域。總之而言,它的工作原理在於我們能否更好的流動性,而不是箭頭。
我將會使用壹些logo來作為空間留白的經典案例。同時指出各使用的負空間,以及會做壹些指導的意見,並能自己思考空白的應用。
其中壹些標識依靠封閉原則。妳會看到它們不會真正的存在,但是仍然能看到它們,這些logo就是使用了圖形和背景的關系。當看到背景時,圖形會是什麽樣的,整個logo也會發生壹些變化。這種大量運用負空間的logo的核心就是讓觀眾想到什麽。
各種logo,有雲和床的結合,黑貓、轉換、海豚、牙科、森林等。
我希望妳們可以從這篇文章中收獲到最重要的兩點:首先是在格式塔原則中使用圖形與背景進行設計並彼此之間建立連接關系,而格式塔原則也作為設計師的基本指導。
其次,也許更重要的是需要努力觀察和花時間研究空間在設計中的應用。不要讓空間成為優秀設計的輔助地位,應該好好利用這種空間來更高效的完成設計因為任何頁面的布局都是空白區域的相互組織。能有意識的分析空白,有意為設計創建壹個更好的環境。不要使得它成為附屬品,而是作為壹個重要的元素,然後思考並塑造的元素和空白之間產生積極作用的關系。
在接下來的時間裏,我們將會增加更多壹系列有關的格式塔原則,更重要的是帶領我們如何應用到設計中,例如視覺重量和平衡關系。
/2014/05/design-principles-space-figure-ground-relationship/