- 相關(guān)推薦
藝術(shù)與web設(shè)計：線
線之入門
初識各類藝術(shù)要素與原則時，你或許會以為它們太過簡單甚而不屑一顧。然而，多花些時間，對每一類要素與原則都仔仔細(xì)細(xì)地沉思默想一番，卻是十分重要的。什么是線?線能夠傳遞什么樣的情感?
在學(xué)習(xí)藝術(shù)要素與原則時，這些便是你要問自己的基本問題。思考一下如何你才能將它們?nèi)谌氲侥愕膭?chuàng)意思維里，如何才能卓有成效地將它們應(yīng)用于你自己的web項目中。因此，我們又回到了起初那個問題：線是什么?
“線就是點(diǎn)的連續(xù)移動，比如圖形的邊，或者畫筆筆觸的移動軌跡。”
線與許多其他要素和原則相互作用，因而我們應(yīng)當(dāng)予以高度關(guān)注。每條線均有粗細(xì)，長度和線質(zhì)之分。除了這三個屬性以外，線還有方向，方向不同，籍以引發(fā)的情感反應(yīng)也不同。方向?qū)�的整體審美效果影響最為顯著，因此，我們就從這開始吧。
埃貢席勒的《母子》(1910)
橫線
在所有的線中，橫線讓人感覺最平和。因為橫線與地表平行，所以顯得平靜安詳。事實上，橫線與熟悉的景物遠(yuǎn)方的地平線相似，由此，它們適于傳遞一種遼闊空曠之感。
在塞尚1885年的作品《The Bay of Marseilles, view from L’Estaque(從埃斯特克看馬賽灣)》里，請注意橫線是如何給這幅畫作帶去構(gòu)圖的穩(wěn)定性。沿屋頂和山水的一連串橫線還幫助傳遞出深度之感。此外，當(dāng)橫線觸及畫布(或web頁)的邊緣時，我們會感覺到空間變大了，視線之外另有天地。看著這幅畫作，我們眼前很容易便顯現(xiàn)出：地平線與建筑延伸到了左右兩邊以外，就好像是透過一扇窗在看似的。花點(diǎn)時間，想象一下這幅繪畫更寬闊時的模樣。在大幅繪畫中，這種“開窗”效果可以得到增強(qiáng)，在大屏幕上用最大化瀏覽器瀏覽web頁面時也是如此。
橫線還可以劃分空間。例如，web頁頂端或底端的水平伸縮條就類似于塞尚畫作中的橫線。在頁眉和頁腳的情形下，這種空間劃分也許恰好可以滿足在視覺上分隔頁面內(nèi)容為邏輯組的需要。
保羅塞尚的《The Bay of Marseilles, view from L’Estaque》 (1885)
豎線
既然橫線傳遞的是平和與穩(wěn)定，那么你可能以為豎線傳遞的就是混亂與動蕩。然而，與畫布頂端和底端垂直的豎線往往更適于傳遞高度之感。實際上，屏幕由上往下的長線類似于橫線，同樣也可傳遞穩(wěn)定有序的感覺，并給頁面賦予結(jié)構(gòu)。
維奧萊勒迪克的《Pinacle of Notre-Dame de Reims》， 引自《11世紀(jì)至16世紀(jì)法國建筑辭典》(1856)
在哥特建筑中，豎線往往具有非凡的效果。那個時代的藝術(shù)家與建筑師想要建造可以通向天國的建筑，因為他們認(rèn)為這樣可以離上帝更近。通過采用飛拱和高聳的尖頂，他們建造的教堂仿佛可以與天相接。哥特大教堂里強(qiáng)烈的高度感還可通過比例的精心運(yùn)用來獲得。
例如，這棟建筑的主廳稱為中殿，它獨(dú)特之處就在于高度大于寬度。在有些情形下，比例甚至放大到2:1，所建造的巨大的內(nèi)部空間，直指天空。別忘了，這些哥特大教堂屬于那個時代最高的建筑之列，因而其宏偉的建筑正面和碩大的內(nèi)部空間在當(dāng)時或許更加令人敬畏。這些建筑常常有高高的柱子、飛拱、高聳的尖塔和逼仄的窗子，所有這些都構(gòu)造出豎線，看上去，都突出來與地表垂直。這些建筑特色全是為了激起人們對宗教的崇敬之感。
當(dāng)豎線與web頁面的上緣與下緣相接時，它常向用戶發(fā)出一個信號：可以上下滾動，搜尋更多的內(nèi)容。另外，寬度固定的布局有時會將豎線(要么是文字線，要么是暗含的邊)置于內(nèi)容的左右兩邊，以模仿從上至下移動紙張的感覺。這種視覺效果通常是下意識的，網(wǎng)站訪客幾乎從來沒注意過布局的左右兩邊。然而，他們卻能夠在周邊視覺里拾取這些隱約的信號。
橫線加豎線
當(dāng)把橫線與豎線結(jié)合在一起使用時，可分別傳遞相同的有序和安靜之感。雖然橫線與豎線都可傳遞穩(wěn)定感，但是放在一起其合力更甚于部分之和。互相垂直的線構(gòu)成的90度直角往往能創(chuàng)造視覺剛性，進(jìn)而聯(lián)想到永久與可靠。通過網(wǎng)格布局和矩形框，Web頁采用這種視覺建構(gòu)的可謂數(shù)不勝數(shù)。CSS和布局引擎背后的基本原理使得這難以避免，結(jié)果可好可壞，要視預(yù)期效果而定。
橫線加豎線的永久與可靠也常用于古典與現(xiàn)代藝術(shù)中。例如，古希臘廟宇就將高大的立柱與寬闊的橫檐一并使用，以構(gòu)造剛性的垂線。另外，有些古典廟宇還展現(xiàn)了符合黃金分割比的橫線與豎線比例。請注意，在下頁的圖中，隨著你的視線沿螺旋線移動，矩形與線的比例透出令人愉悅的美感。后面一頁展示了蒙德里安一幅廣為流傳的作品，它表現(xiàn)了橫線與豎線非常純粹的運(yùn)用。
斐波那契螺旋是黃金螺旋線的近似表達(dá)。
皮特蒙德里安的《大紅塊、黃色、黑色、灰色與藍(lán)色的構(gòu)圖》(1921)
斜線
斜線往往給人墜落之感。而且，較之橫線或豎線，斜線更加動感，因為它們與畫布的任一邊都不平行。斜線的這兩項屬性賦予了它們大量的運(yùn)動感，使得它們在創(chuàng)作各種不同類型作品時很有用。
大多數(shù)web頁往往缺乏明顯的斜線構(gòu)圖。雖然這部分歸于技術(shù)限制，但web以信息與文字為主的本性才是最主要的原因。有了HTML5和CSS3之類開發(fā)標(biāo)準(zhǔn)提供的新功能，特別是畫布，更加大膽更加動感的構(gòu)圖可能會在不久的將來涌現(xiàn)。
在下一頁的繪畫里，這艘命運(yùn)多舛的船的桅桿上的繩索構(gòu)成了一個三角形。這些強(qiáng)烈的斜線引著你的視線四下打量畫作，比起水平航行的船來說，這艘船看起來要動感得多。船顯然在行進(jìn)，在驚濤駭浪間猛烈地顛簸。關(guān)于斜線，需要牢記的最重要一件事在這幅繪畫中顯露無遺：它們引導(dǎo)視線，傳遞動感。
西奧多席里柯的《梅杜莎之筏》 (1818)
曲線
曲線通常用來描繪活力。曲線看上去就像在“流動”一樣，這是因為我們?nèi)祟愑袕闹車澜缋锾崛≈刃虻膬A向，即使根本就沒有什么秩序。我們的眼睛會從始至終跟隨著線條，試圖識別圖案。這與斜線給觀者的效果非常類似;動蕩與混亂讓我們的視線四處游走，這自然給圖畫賦予了活力。不那么明顯的曲線依然會促使觀者注視線條的走向，只不過活力稍欠而已。這不是壞事，只是審美不同罷了。
無論觀者是有意還是無意，光滑曲線會讓他們常常聯(lián)想到人體的柔軟曲線。更令人愉悅的是，不那么混亂的曲線實際可讓你將觀者的注意力引向特定的元素，雖說斜線通常更適于這個目的。下頁里這幅蒙德里安的作品比我們前面所看到的那幅更流行的畫作要更早一些。雖然這與他更著名的彩色幾何線截然不同，但兩幅藝術(shù)作品有著相似的目的。在這幅作品中，蒙德里安試圖通過使用混亂的曲線來詮釋樹的活力。宏觀來看，互相交叉的黑線條使得視線很難跟隨任何一條線。細(xì)處來看，更小的畫筆筆觸也有相似的效果。這種曲線糾纏在一起的混亂具有視覺破壞性，使得樹看上去好像它同時在伸展和聚攏。
蒙德里安的《灰樹》 (1911)
對計算機(jī)而言，畫直線總是會更容易，而畫曲線總是會更困難。雖然用畫布、CSS屬性如border-radius，或者就用純背景圖，今天畫曲線已經(jīng)容易多了，但是仍然不常見。帶邊框和填充色的實邊塊狀元素是web審美的主流。如果是有意為之，這種審美本身并不是件壞事，不過，由此可以看出：人們?yōu)榱俗層嬎銠C(jī)處理簡單而落入了設(shè)計的窠臼，并沒有實現(xiàn)面向用戶的設(shè)計。不管怎樣，熟知web的技術(shù)限制有時會抑制創(chuàng)意思維的發(fā)展。
工具是偏愛實線90度角，但那不應(yīng)當(dāng)妨礙我們將斜線、鋸齒線和波浪線引入我們的設(shè)計。它也許在技術(shù)上更具挑戰(zhàn)性，但它可以跳出框框，非常自由地運(yùn)用更有機(jī)的元素和設(shè)計。時間與金錢的確是實實在在的限制，不過，唯一能限制創(chuàng)意的只有我們的思維。
線的性質(zhì)
線條不僅只有方向。你也可以采用連續(xù)筆觸的不同粗細(xì)和樣式，以求達(dá)到不同的視覺審美效果。CSS的border屬性大致與此概念吻合，所以我們就以此為例吧。
實線
實線就如它看上去那般關(guān)鍵。應(yīng)當(dāng)節(jié)約使用它們，只用作兩種元素之間的明確分界線。
虛線
虛線或折線被認(rèn)為是隱含線，因為預(yù)期觀者會將片段連接在一起成為完整的一筆。這具有分裂性，適于凸顯極為重要的信息。
點(diǎn)線
比起虛線來，點(diǎn)線的分裂性稍弱，這是因為片段的出現(xiàn)規(guī)律是一致的。
當(dāng)然，還有許多其他的邊線樣式，你可以靠改變邊線的粗細(xì)來達(dá)到不同效果。更有趣的是，一個新的CSS屬性border-image可讓你直接將圖片應(yīng)用于邊線上。這意味著不僅你能使用直線分隔，你也可以采用線條紋理來使之更粗糙更自然。例如，現(xiàn)在你就可以使用畫筆創(chuàng)建如下的筆觸，然后將之應(yīng)用到一個元素上。
線的另一性質(zhì)更加難以企及，那便是軟硬的變化。由技術(shù)角度看，CSS的background-image通常是能達(dá)到此種效果的唯一之途，但你也許還能夠從box-shadow和border-image屬性獲得創(chuàng)意。下一頁有美國藝術(shù)家喬治婭奧吉弗(Georgia O’Keeffe)的一幅早期作品。她的畫作嫻熟地運(yùn)用了線，是線質(zhì)變化的極佳范例。如果你細(xì)看兩種顏色間的邊界，你就會注意到有些線似乎非常剛硬而刻板，而另一些線則柔軟而模糊。這種硬軟線之間的微妙表現(xiàn)是奧吉弗的畫作欣賞起來非常生動的主要原因。web上有許多軟邊和硬邊的例子，不過，軟度變化的中間筆觸很少看到。
【藝術(shù)與web設(shè)計：線】相關(guān)文章：
web前端設(shè)計師的職責(zé)02-10
[轉(zhuǎn)]網(wǎng)頁寬度Web頁面設(shè)計規(guī)范07-10
web前端設(shè)計實訓(xùn)心得范文（精選10篇）12-27
web前端課程設(shè)計心得體會08-30
《線的認(rèn)識》教學(xué)設(shè)計04-26
藝術(shù)設(shè)計簡歷07-04
藝術(shù)設(shè)計論文07-28