藝術(shù)與web設計：線(xiàn)

藝術(shù)與web設計：線(xiàn)

線(xiàn)之入門(mén)

初識各類(lèi)藝術(shù)要素與原則時(shí)，你或許會(huì )以為它們太過(guò)簡(jiǎn)單甚而不屑一顧。然而，多花些時(shí)間，對每一類(lèi)要素與原則都仔仔細細地沉思默想一番，卻是十分重要的。什么是線(xiàn)?線(xiàn)能夠傳遞什么樣的情感?

在學(xué)習藝術(shù)要素與原則時(shí)，這些便是你要問(wèn)自己的基本問(wèn)題。思考一下如何你才能將它們融入到你的創(chuàng )意思維里，如何才能卓有成效地將它們應用于你自己的web項目中。因此，我們又回到了起初那個(gè)問(wèn)題：線(xiàn)是什么?

“線(xiàn)就是點(diǎn)的連續移動(dòng)，比如圖形的邊，或者畫(huà)筆筆觸的移動(dòng)軌跡�！�

線(xiàn)與許多其他要素和原則相互作用，因而我們應當予以高度關(guān)注。每條線(xiàn)均有粗細，長(cháng)度和線(xiàn)質(zhì)之分。除了這三個(gè)屬性以外，線(xiàn)還有方向，方向不同，籍以引發(fā)的情感反應也不同。方向對線(xiàn)的整體審美效果影響最為顯著(zhù)，因此，我們就從這開(kāi)始吧。

埃貢席勒的《母子》(1910)

橫線(xiàn)

在所有的線(xiàn)中，橫線(xiàn)讓人感覺(jué)最平和。因為橫線(xiàn)與地表平行，所以顯得平靜安詳。事實(shí)上，橫線(xiàn)與熟悉的景物遠方的地平線(xiàn)相似，由此，它們適于傳遞一種遼闊空曠之感。

在塞尚1885年的作品《The Bay of Marseilles, view from L’Estaque(從埃斯特克看馬賽灣)》里，請注意橫線(xiàn)是如何給這幅畫(huà)作帶去構圖的穩定性。沿屋頂和山水的一連串橫線(xiàn)還幫助傳遞出深度之感。此外，當橫線(xiàn)觸及畫(huà)布(或web頁(yè))的邊緣時(shí)，我們會(huì )感覺(jué)到空間變大了，視線(xiàn)之外另有天地�？粗�(zhù)這幅畫(huà)作，我們眼前很容易便顯現出：地平線(xiàn)與建筑延伸到了左右兩邊以外，就好像是透過(guò)一扇窗在看似的�；�點(diǎn)時(shí)間，想象一下這幅繪畫(huà)更寬闊時(shí)的模樣。在大幅繪畫(huà)中，這種“開(kāi)窗”效果可以得到增強，在大屏幕上用最大化瀏覽器瀏覽web頁(yè)面時(shí)也是如此。

橫線(xiàn)還可以劃分空間。例如，web頁(yè)頂端或底端的水平伸縮條就類(lèi)似于塞尚畫(huà)作中的橫線(xiàn)。在頁(yè)眉和頁(yè)腳的情形下，這種空間劃分也許恰好可以滿(mǎn)足在視覺(jué)上分隔頁(yè)面內容為邏輯組的需要。

保羅塞尚的《The Bay of Marseilles, view from L’Estaque》 (1885)

豎線(xiàn)

既然橫線(xiàn)傳遞的是平和與穩定，那么你可能以為豎線(xiàn)傳遞的就是混亂與動(dòng)蕩。然而，與畫(huà)布頂端和底端垂直的豎線(xiàn)往往更適于傳遞高度之感。實(shí)際上，屏幕由上往下的長(cháng)線(xiàn)類(lèi)似于橫線(xiàn)，同樣也可傳遞穩定有序的感覺(jué)，并給頁(yè)面賦予結構。

維奧萊勒迪克的《Pinacle of Notre-Dame de Reims》， 引自《11世紀至16世紀法國建筑辭典》(1856)

在哥特建筑中，豎線(xiàn)往往具有非凡的效果。那個(gè)時(shí)代的藝術(shù)家與建筑師想要建造可以通向天國的建筑，因為他們認為這樣可以離上帝更近。通過(guò)采用飛拱和高聳的尖頂，他們建造的教堂仿佛可以與天相接。哥特大教堂里強烈的高度感還可通過(guò)比例的精心運用來(lái)獲得。

例如，這棟建筑的主廳稱(chēng)為中殿，它獨特之處就在于高度大于寬度。在有些情形下，比例甚至放大到2:1，所建造的巨大的內部空間，直指天空。別忘了，這些哥特大教堂屬于那個(gè)時(shí)代最高的建筑之列，因而其宏偉的建筑正面和碩大的內部空間在當時(shí)或許更加令人敬畏。這些建筑常常有高高的柱子、飛拱、高聳的尖塔和逼仄的窗子，所有這些都構造出豎線(xiàn)，看上去，都突出來(lái)與地表垂直。這些建筑特色全是為了激起人們對宗教的崇敬之感。

當豎線(xiàn)與web頁(yè)面的上緣與下緣相接時(shí)，它常向用戶(hù)發(fā)出一個(gè)信號：可以上下滾動(dòng)，搜尋更多的內容。另外，寬度固定的布局有時(shí)會(huì )將豎線(xiàn)(要么是文字線(xiàn)，要么是暗含的邊)置于內容的左右兩邊，以模仿從上至下移動(dòng)紙張的感覺(jué)。這種視覺(jué)效果通常是下意識的，網(wǎng)站訪(fǎng)客幾乎從來(lái)沒(méi)注意過(guò)布局的左右兩邊。然而，他們卻能夠在周邊視覺(jué)里拾取這些隱約的信號。

橫線(xiàn)加豎線(xiàn)

當把橫線(xiàn)與豎線(xiàn)結合在一起使用時(shí)，可分別傳遞相同的有序和安靜之感。雖然橫線(xiàn)與豎線(xiàn)都可傳遞穩定感，但是放在一起其合力更甚于部分之和�；ハ啻怪钡木�(xiàn)構成的90度直角往往能創(chuàng )造視覺(jué)剛性，進(jìn)而聯(lián)想到永久與可靠。通過(guò)網(wǎng)格布局和矩形框，Web頁(yè)采用這種視覺(jué)建構的可謂數不勝數。CSS和布局引擎背后的基本原理使得這難以避免，結果可好可壞，要視預期效果而定。

橫線(xiàn)加豎線(xiàn)的永久與可靠也常用于古典與現代藝術(shù)中。例如，古希臘廟宇就將高大的立柱與寬闊的橫檐一并使用，以構造剛性的垂線(xiàn)。另外，有些古典廟宇還展現了符合黃金分割比的橫線(xiàn)與豎線(xiàn)比例。請注意，在下頁(yè)的圖中，隨著(zhù)你的視線(xiàn)沿螺旋線(xiàn)移動(dòng)，矩形與線(xiàn)的比例透出令人愉悅的美感。后面一頁(yè)展示了蒙德里安一幅廣為流傳的作品，它表現了橫線(xiàn)與豎線(xiàn)非常純粹的運用。

斐波那契螺旋是黃金螺旋線(xiàn)的近似表達。

皮特蒙德里安的《大紅塊、黃色、黑色、灰色與藍色的構圖》(1921)

斜線(xiàn)

斜線(xiàn)往往給人墜落之感。而且，較之橫線(xiàn)或豎線(xiàn)，斜線(xiàn)更加動(dòng)感，因為它們與畫(huà)布的任一邊都不平行。斜線(xiàn)的這兩項屬性賦予了它們大量的運動(dòng)感，使得它們在創(chuàng )作各種不同類(lèi)型作品時(shí)很有用。

大多數web頁(yè)往往缺乏明顯的斜線(xiàn)構圖。雖然這部分歸于技術(shù)限制，但web以信息與文字為主的本性才是最主要的原因。有了HTML5和CSS3之類(lèi)開(kāi)發(fā)標準提供的新功能，特別是畫(huà)布，更加大膽更加動(dòng)感的構圖可能會(huì )在不久的將來(lái)涌現。

在下一頁(yè)的繪畫(huà)里，這艘命運多舛的船的桅桿上的繩索構成了一個(gè)三角形。這些強烈的斜線(xiàn)引著(zhù)你的視線(xiàn)四下打量畫(huà)作，比起水平航行的船來(lái)說(shuō)，這艘船看起來(lái)要動(dòng)感得多。船顯然在行進(jìn)，在驚濤駭浪間猛烈地顛簸。關(guān)于斜線(xiàn)，需要牢記的最重要一件事在這幅繪畫(huà)中顯露無(wú)遺：它們引導視線(xiàn)，傳遞動(dòng)感。

西奧多席里柯的《梅杜莎之筏》 (1818)

曲線(xiàn)

曲線(xiàn)通常用來(lái)描繪活力。曲線(xiàn)看上去就像在“流動(dòng)”一樣，這是因為我們人類(lèi)有從周?chē)�世界里提取秩序的傾向，即使根本就沒(méi)有什么秩序。我們的眼睛會(huì )從始至終跟隨著(zhù)線(xiàn)條，試圖識別圖案。這與斜線(xiàn)給觀(guān)者的效果非常類(lèi)似;動(dòng)蕩與混亂讓我們的視線(xiàn)四處游走，這自然給圖畫(huà)賦予了活力。不那么明顯的曲線(xiàn)依然會(huì )促使觀(guān)者注視線(xiàn)條的走向，只不過(guò)活力稍欠而已。這不是壞事，只是審美不同罷了。

無(wú)論觀(guān)者是有意還是無(wú)意，光滑曲線(xiàn)會(huì )讓他們常常聯(lián)想到人體的柔軟曲線(xiàn)。更令人愉悅的是，不那么混亂的曲線(xiàn)實(shí)際可讓你將觀(guān)者的注意力引向特定的元素，雖說(shuō)斜線(xiàn)通常更適于這個(gè)目的。下頁(yè)里這幅蒙德里安的作品比我們前面所看到的那幅更流行的畫(huà)作要更早一些。雖然這與他更著(zhù)名的彩色幾何線(xiàn)截然不同，但兩幅藝術(shù)作品有著(zhù)相似的目的。在這幅作品中，蒙德里安試圖通過(guò)使用混亂的曲線(xiàn)來(lái)詮釋樹(shù)的活力。宏觀(guān)來(lái)看，互相交叉的黑線(xiàn)條使得視線(xiàn)很難跟隨任何一條線(xiàn)。細處來(lái)看，更小的畫(huà)筆筆觸也有相似的效果。這種曲線(xiàn)糾纏在一起的混亂具有視覺(jué)破壞性，使得樹(shù)看上去好像它同時(shí)在伸展和聚攏。

蒙德里安的《灰樹(shù)》 (1911)

對計算機而言，畫(huà)直線(xiàn)總是會(huì )更容易，而畫(huà)曲線(xiàn)總是會(huì )更困難。雖然用畫(huà)布、CSS屬性如border-radius，或者就用純背景圖，今天畫(huà)曲線(xiàn)已經(jīng)容易多了，但是仍然不常見(jiàn)。帶邊框和填充色的實(shí)邊塊狀元素是web審美的主流。如果是有意為之，這種審美本身并不是件壞事，不過(guò)，由此可以看出：人們?yōu)榱俗層嬎銠C處理簡(jiǎn)單而落入了設計的窠臼，并沒(méi)有實(shí)現面向用戶(hù)的設計。不管怎樣，熟知web的技術(shù)限制有時(shí)會(huì )抑制創(chuàng )意思維的發(fā)展。

工具是偏愛(ài)實(shí)線(xiàn)90度角，但那不應當妨礙我們將斜線(xiàn)、鋸齒線(xiàn)和波浪線(xiàn)引入我們的設計。它也許在技術(shù)上更具挑戰性，但它可以跳出框框，非常自由地運用更有機的元素和設計。時(shí)間與金錢(qián)的確是實(shí)實(shí)在在的限制，不過(guò)，唯一能限制創(chuàng )意的只有我們的思維。

線(xiàn)的性質(zhì)

線(xiàn)條不僅只有方向。你也可以采用連續筆觸的不同粗細和樣式，以求達到不同的視覺(jué)審美效果。CSS的border屬性大致與此概念吻合，所以我們就以此為例吧。

實(shí)線(xiàn)

實(shí)線(xiàn)就如它看上去那般關(guān)鍵。應當節約使用它們，只用作兩種元素之間的明確分界線(xiàn)。

虛線(xiàn)

虛線(xiàn)或折線(xiàn)被認為是隱含線(xiàn)，因為預期觀(guān)者會(huì )將片段連接在一起成為完整的一筆。這具有分裂性，適于凸顯極為重要的信息。

點(diǎn)線(xiàn)

比起虛線(xiàn)來(lái)，點(diǎn)線(xiàn)的分裂性稍弱，這是因為片段的出現規律是一致的。

當然，還有許多其他的邊線(xiàn)樣式，你可以靠改變邊線(xiàn)的粗細來(lái)達到不同效果。更有趣的是，一個(gè)新的CSS屬性border-image可讓你直接將圖片應用于邊線(xiàn)上。這意味著(zhù)不僅你能使用直線(xiàn)分隔，你也可以采用線(xiàn)條紋理來(lái)使之更粗糙更自然。例如，現在你就可以使用畫(huà)筆創(chuàng )建如下的筆觸，然后將之應用到一個(gè)元素上。

線(xiàn)的另一性質(zhì)更加難以企及，那便是軟硬的變化。由技術(shù)角度看，CSS的background-image通常是能達到此種效果的唯一之途，但你也許還能夠從box-shadow和border-image屬性獲得創(chuàng )意。下一頁(yè)有美國藝術(shù)家喬治婭奧吉弗(Georgia O’Keeffe)的一幅早期作品。她的畫(huà)作嫻熟地運用了線(xiàn)，是線(xiàn)質(zhì)變化的極佳范例。如果你細看兩種顏色間的邊界，你就會(huì )注意到有些線(xiàn)似乎非常剛硬而刻板，而另一些線(xiàn)則柔軟而模糊。這種硬軟線(xiàn)之間的微妙表現是奧吉弗的畫(huà)作欣賞起來(lái)非常生動(dòng)的主要原因。web上有許多軟邊和硬邊的例子，不過(guò)，軟度變化的中間筆觸很少看到。

【藝術(shù)與web設計：線(xiàn)】相關(guān)文章：

web前端設計師的職責02-10

Web前端設計師崗位職責06-09

[轉]網(wǎng)頁(yè)寬度Web頁(yè)面設計規范07-10

web前端設計師的職責15篇02-10

web前端設計實(shí)訓心得范文（精選10篇）12-27

web前端課程設計心得體會(huì )08-30

藝術(shù)教學(xué)設計03-28

《線(xiàn)的認識》教學(xué)設計04-26

藝術(shù)設計簡(jiǎn)歷07-04

藝術(shù)設計論文07-28