轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(     www.li-bodun.cn    )是一家專注而深入的設(shè)計(jì)機(jī)構(gòu) ，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的     BS界面設(shè)計(jì)    、     cs界面設(shè)計(jì)    、     ipad界面設(shè)計(jì)    、    包裝設(shè)計(jì)    、     圖標(biāo)定制    、     用戶體驗(yàn)    、交互設(shè)計(jì)、     網(wǎng)站建設(shè)    、平面設(shè)計(jì)服務(wù)

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里  。

  形狀是非常基礎(chǔ)的藝術(shù)元素，而在web上，“框式”設(shè)計(jì)一直很流行，但在使用時(shí)還是要注意適度，通過(guò)一些設(shè)計(jì)變化，往往能營(yíng)造獨(dú)特新穎的效果。

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

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

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

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

對(duì)比鮮明的元素

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

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

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

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

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

“形狀是二維空間的一塊區(qū)域，它與其周圍環(huán)境形成了鮮明對(duì)比。”

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

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

頁(yè)面布局

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

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

輪廓線

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

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

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

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

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

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