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