2011-12-3 藍藍設計的小編
轉載藍藍設計( m.ssll180.com )是一家專注而深入的設計機構 ，為期望卓越的國內外企業提供有效的 BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里 。
形狀是非常基礎的藝術元素，而在web上，“框式”設計一直很流行，但在使用時還是要注意適度，通過一些設計變化，往往能營造獨特新穎的效果。
一般而言，沒有說哪個藝術元素或原理要比另一個更重要或更值得關注。紋理與顏色同等重要，顏色與線也同等重要，諸如此類。然而，就web相關的元素和原理論，形狀卻擁有關鍵性地位。毫無疑問，web上滿眼都是幾何形狀。與線類似，形狀無論大小，均很適合用來做網站內容區域的界線。實際上，眾多網站對幾何形狀的使用量非常之大，以至于總的來看web傾向于一種“框式”美學設計。
保羅·克利的《快樂山風景》（1929年）
對web頁面進行抽象設計與討論時，形狀極為有用。對我們而言，以內容區塊或形狀來考慮web布局，比起由文本和圖像個體來考慮web頁布局，要容易得多。設計師在建立線框或者低保真原型時，設計便是由形狀組成的。這些形狀用來表示內容在網站的布局區域。
與線類似，形狀可能看上去太基礎了，甚而不值一提。然而，我們花些時間更新和質疑我們的基本理解是很重要的。實際上，形狀是以邊與邊的對比來定義的，因此我們不妨先從這兒開始探究一番。
對比鮮明的元素
我們先來看看的形狀原始模樣，你對它們應該是已然十分熟悉了。例如，當大多數人想起形狀時，他們想到的都是彩色幾何面。
上面這些按學術描述是形狀無疑。然而，它們非常嚴格，非常周正。正如我們前面所學過的，線可直也可曲，也可以是有機的。如你所料，有機線會組成有機形狀。我們甚至可以將幾何線和有機線合用，生出更多的變化來。
關于形狀的奇特之事是，它們借助對比而定義。雖然線可以作為邊，邊卻不一定要是線。例如，邊可能是屬性值（明暗差異）、顏色、紋理乃至規律（圖像反復）的對比，完全與線無關。
馬列維奇的《至上主義構成：白上之白》（1918年）
形狀甚至比線更加抽象，因為它們實際上只是由感知的邊構成的更高層級結構而已。這些邊通過藝術元素與原理之間的對比來創建。盡管如此，它還是令人迷惑，所以我們提供一個更為明確的定義。
“形狀是二維空間的一塊區域，它與其周圍環境形成了鮮明對比。”
這一定義覆蓋了我們可能遇到的大多數形狀，但形狀也并非總是嚴謹的實體。例如，下面這些圖例是否能看作形狀呢？也許可以，但對比卻是模糊不清的。
德穆思的《Aucassiu與Nicolette》（1921年）
頁面布局
使用CSS的border和background屬性，在web上創建幾何形狀并非難事。對于創建將內容組織在一起的有色扁平區域，這些塊狀形狀實在是太棒了。再加入一些填充和空白，嗯，就是這樣！突然之間，你就有了部分網頁，這可視為布局中的一“塊”內容。
不過，與此同時，復雜布局可能遭受過度使用形狀的拖累。如果頁面布局內容太多，或者將太多抽象概念塞入一頁里，設計師也許不得不用醒目的形狀來刺激用戶。這往往不會是很有效的，而且肯定觀感不好。與線相似，形狀的使用應適度，我們要盡量避免視覺不諧感和“框中有框”的設計。
輪廓線
雖然形狀主要是通過元素間的對比來定義，但它們也可以借助輪廓線或邊來定義。目前為止，web主要限于使用四邊形，這造就了經典的“框式”設計美學，決定了大多數web的布局。就在幾年前，要呈現曲線元素，還差不多總需要對高度定制的圖像進行切分，然后添加額外的標注。幸運的是，有了HTML和CSS的進展，如今輕而易舉便可以創建各類形狀的輪廓線。除了畫布和新的border和background 等CSS屬性，還對帶有完全透明的alpha通道的圖像提供了普遍支持，這些使得我們的設計看上去更加有機。
有豐富多樣的輪廓線確實不錯，因為形狀是一項極為強大的設計工具。通過變換形狀的輪廓線，你很容易就能凸顯頁面元素。假設我們現有一個web應用程序，但沒多少人去點擊“注冊”（sign up）按鈕。下面便是我們當前注冊按鈕的圖例。這是一個外形非常標準的按鈕，處于另一形狀之內，該形狀將其與頁面內容的其余部分隔離開。
假定我們能大致確定，更加突出的按鈕可以贏得更大的轉機，我們有了一些A/B測試的選項。我們也許會先嘗試各種不同的顏色。
一種顏色可能表現比其他顏色要好，但是我們的改變還不大。接下來，我們也許可以試著變化邊線的粗細、顏色和樣式。
與顏色相似，邊線很容易就可以使用CSS進行調整，但是能做的也就到此為止。最后，我們還可以變化形狀的實際輪廓線。許多頁面元素都采用的是框式輪廓，因而這些變化會營造一些獨特的對比效果。
杜斯堡的《算術組成》（1930年）