一般而言,，沒有說哪個藝術(shù)元素或原理要比另一個更重要或更值得關(guān)注,。紋理與顏色同等重要，顏色與線也同等重要,，諸如此類,。然而，就web相關(guān)的元素和原理論,，形狀卻擁有關(guān)鍵性地位,。毫無疑問，web上滿眼都是幾何形狀,。與線類似,，形狀無論大小,，均很適合用來做網(wǎng)站內(nèi)容區(qū)域的界線,。實(shí)際上,，眾多網(wǎng)站對幾何形狀的使用量非常之大，以至于總的來看web傾向于一種“框式”美學(xué)設(shè)計(jì),。

保羅·克利的《快樂山風(fēng)景》（1929年）

對web頁面進(jìn)行抽象設(shè)計(jì)與討論時,，形狀極為有用,。對我們而言,，以內(nèi)容區(qū)塊或形狀來考慮web布局,，比起由文本和圖像個體來考慮web頁布局,，要容易得多,。設(shè)計(jì)師在建立線框或者低保真原型時,，設(shè)計(jì)便是由形狀組成的,。這些形狀用來表示內(nèi)容在網(wǎng)站的布局區(qū)域。

與線類似,，形狀可能看上去太基礎(chǔ)了，甚而不值一提。然而,，我們花些時間更新和質(zhì)疑我們的基本理解是很重要的。實(shí)際上，形狀是以邊與邊的對比來定義的,，因此我們不妨先從這兒開始探究一番,。

對比鮮明的元素

我們先來看看的形狀原始模樣,，你對它們應(yīng)該是已然十分熟悉了,。例如,，當(dāng)大多數(shù)人想起形狀時，他們想到的都是彩色幾何面,。

上面這些按學(xué)術(shù)描述是形狀無疑,。然而,，它們非常嚴(yán)格,，非常周正。正如我們前面所學(xué)過的,，線可直也可曲,，也可以是有機(jī)的。如你所料,，有機(jī)線會組成有機(jī)形狀,。我們甚至可以將幾何線和有機(jī)線合用，生出更多的變化來,。

關(guān)于形狀的奇特之事是，它們借助對比而定義,。雖然線可以作為邊，邊卻不一定要是線,。例如,，邊可能是屬性值（明暗差異）、顏色,、紋理乃至規(guī)律（圖像反復(fù)）的對比,，完全與線無關(guān)。

馬列維奇的《至上主義構(gòu)成：白上之白》（1918年）

形狀甚至比線更加抽象，因?yàn)樗鼈儗?shí)際上只是由感知的邊構(gòu)成的更高層級結(jié)構(gòu)而已。這些邊通過藝術(shù)元素與原理之間的對比來創(chuàng)建,。盡管如此，它還是令人迷惑,，所以我們提供一個更為明確的定義,。

“形狀是二維空間的一塊區(qū)域,，它與其周圍環(huán)境形成了鮮明對比?！?/span>

這一定義覆蓋了我們可能遇到的大多數(shù)形狀,，但形狀也并非總是嚴(yán)謹(jǐn)?shù)膶?shí)體。例如,，下面這些圖例是否能看作形狀呢,？也許可以，但對比卻是模糊不清的。

德穆思的《Aucassiu與Nicolette》（1921年）

頁面布局

使用CSS的border和background屬性,，在web上創(chuàng)建幾何形狀并非難事。對于創(chuàng)建將內(nèi)容組織在一起的有色扁平區(qū)域，這些塊狀形狀實(shí)在是太棒了,。再加入一些填充和空白,，嗯,，就是這樣,！突然之間，你就有了部分網(wǎng)頁，這可視為布局中的一“塊”內(nèi)容,。

不過,，與此同時，復(fù)雜布局可能遭受過度使用形狀的拖累,。如果頁面布局內(nèi)容太多,，或者將太多抽象概念塞入一頁里，設(shè)計(jì)師也許不得不用醒目的形狀來刺激用戶,。這往往不會是很有效的,，而且肯定觀感不好。與線相似,，形狀的使用應(yīng)適度,，我們要盡量避免視覺不諧感和“框中有框”的設(shè)計(jì)。

輪廓線

雖然形狀主要是通過元素間的對比來定義,，但它們也可以借助輪廓線或邊來定義,。目前為止，web主要限于使用四邊形,，這造就了經(jīng)典的“框式”設(shè)計(jì)美學(xué),，決定了大多數(shù)web的布局。就在幾年前,，要呈現(xiàn)曲線元素,，還差不多總需要對高度定制的圖像進(jìn)行切分，然后添加額外的標(biāo)注,。幸運(yùn)的是,，有了HTML和CSS的最新進(jìn)展,，如今輕而易舉便可以創(chuàng)建各類形狀的輪廓線,。除了畫布和新的border和background 等CSS屬性，還對帶有完全透明的alpha通道的圖像提供了普遍支持,，這些使得我們的設(shè)計(jì)看上去更加有機(jī),。

有豐富多樣的輪廓線確實(shí)不錯，因?yàn)樾螤钍且豁?xiàng)極為強(qiáng)大的設(shè)計(jì)工具,。通過變換形狀的輪廓線,，你很容易就能凸顯頁面元素。假設(shè)我們現(xiàn)有一個web應(yīng)用程序,，但沒多少人去點(diǎn)擊“注冊”（sign up）按鈕,。下面便是我們當(dāng)前注冊按鈕的圖例。這是一個外形非常標(biāo)準(zhǔn)的按鈕,，處于另一形狀之內(nèi),，該形狀將其與頁面內(nèi)容的其余部分隔離開。

假定我們能大致確定，更加突出的按鈕可以贏得更大的轉(zhuǎn)機(jī),，我們有了一些A/B測試的選項(xiàng),。我們也許會先嘗試各種不同的顏色。

一種顏色可能表現(xiàn)比其他顏色要好,，但是我們的改變還不大,。接下來，我們也許可以試著變化邊線的粗細(xì),、顏色和樣式,。

與顏色相似，邊線很容易就可以使用CSS進(jìn)行調(diào)整,，但是能做的也就到此為止,。最后，我們還可以變化形狀的實(shí)際輪廓線,。許多頁面元素都采用的是框式輪廓,，因而這些變化會營造一些獨(dú)特的對比效果。

杜斯堡的《算術(shù)組成》（1930年）