一般来说，在网页设计中没有说哪个元素或原理要比另一个更重要或更值得关注。纹理与颜色同样重要，颜色与线条也同样重要，诸如此类。然而，就web相关的元素和原理论，形状却拥有关键性地位。毫无疑问，web上满眼都是几何形状。与线条类似，形状无论大小，均很适合用来做网站内容区域的界线。实际上，众多网站对几何形状的使用量非常之大，以至于总的来看web倾向于一种“框式”美学设计。

对web页面进行抽象设计与讨论时，形状非常有用。对我们而言，以内容区块或形状来考虑web布局，比起由文本和图像个体来考虑web页布局，要容易得多。设计师在设计线框稿时，设计便是由形状组成的。这些形状用来表示内容在网站的布局区域。

和线条类似，形状可能看上去太基础了，甚至不值一提。但是，我们花些时间来理解形状是很重要的。实际上，形状是以边与边的对比来定义的，因此我们不妨先从这儿开始探究一番。

形状是二维空间的一块区域，它与其周围环境形成了鲜明对比。使用CSS的border和background属性，在web上创建几何形状是非常简单的事。不过，与此同时，复杂布局可能受到过度使用形状的拖累。如果页面布局内容太多，或者将太多抽象概念塞入一页里，设计师也许不得不用醒目的形状来刺激用户。这样往往不会很有效，而且肯定观感不好。

虽然形状主要是通过元素间的对比来定义，但它们也可以借助轮廓线或边来定义。目前为止，web主要限于使用四边形，这造就了经典的“框式”设计美学，决定了大多数web的布局。就在几年前，要呈现曲线元素，还差不多总需要对高度定制的图像进行切分，然后添加额外的标注。幸运的是，有了HTML和CSS的最新进展，如今轻而易举便可以创建各类形状的轮廓线。除了画布和新的border和background 等CSS属性，还对带有完全透明的alpha通道的图像提供了普遍支持，这些使得我们的设计看上去更加立体。

有丰富多样的轮廓线确实不错，因为形状是一项极为强大的设计工具。通过变换形状的轮廓线，你很容易就能凸显页面元素。假设我们现在有一个web页面，但没多少人去点击“注册”（sign up）按钮。下面便是我们当前注册按钮的图例。这是一个外形非常标准的按钮，处于另一形状之内，该形状将其与页面内容的其余部分隔离开。

假定我们能大概确定，更加突出的按钮可以获得更多的关注和转化，那我们就有了一些A/B测试的选项。我们也许会先试试各种不同的颜色。如下图

嗯，这样的话 可能一种颜色表现比其他颜色要好，但是我们的改变还不大。接下来，我们也许可以试着变化边线的粗细、颜色和样式。如下图

与颜色相似，边线很容易就可以使用CSS进行调整，但是能做的也就到此为止。最后，我们还可以变化形状的实际轮廓线。许多页面元素都采用的是框式轮廓，因而这些变化会营造一些独特的对比效果。如下图。

小结：在web设计里，形状的合理利用会起到非常关键的作用。我们所有做的一切都是为用户服务，所谓的用户体验设计就是以用户为中心。也许我们不能完全做到以用户为中心，起码我们可以在做设计的时候多为用户考虑。用户希望以最简单的方式来访问网页，不要有太多花哨，不要太多复杂的元素，让他们简单明了的知道，这里是做什么的，那里是做什么的。哪里可以点击，哪里不可以点击。