2011-12-3 蓝蓝设计的小编
转载蓝蓝设计( www.lanlanwork.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年）