优秀的排版是构图、图片、配色、字体等协调的共同结果。其实网页设计是没有规律可循的，审美从来不会发生在约束之内。为了让整个布局内容丰富，充满喘息的空间，需要整个思维方式流动。

　　没有界限

　　一段文字，一张图片，甚至一个图标……当你做一个布局的时候，就像这个布局一样，你只画一个大概的框架图。可能你只是想说这只是一个框架，因为很多设计策划前期的材料并不完美。

　　但是，您很可能会这样设计页面

　　当然，你会说这没有错，因为我们看到的平面网页几乎都是这种风格，但可以肯定的是，这个网页没有太多的喘息空间，整个网页充斥着信息。如果稍微改变布局元素的大小和位置，实际上会显示出不同的布局效果(下图)，显然后者的布局更加灵活。

　　界限造成的局限就是你的思维。你会习惯在这个框架内思考解决方案。想要逃离这个陷阱，就要学会跳出框架思考。即使你把框架做好了，也要意识到这只是一个方向不确定的前期测试，完全可以改变框架的结构。

　　创建焦点

　　这可能有点夸张，但任何好的平面作品都必须有一个重点。我们已经说过，十字准线视觉结构是用来把焦点放在中心的，有很多方法可以创建一个焦点，简而言之，就是制造冲突。想象你在一个人烟稀少的大厅里，突然两个人大声争论着什么，导致几个人围观。这一幕在原本安静的人群中制造了一个关注的焦点。同样，在视野中，使用对比冲突应该是创造焦点最有效的方式。

　　在这个页面设计中，字母和静物融合在一起的区域位于中间，成为虚拟焦点。通过使用颜色的对比，黄色眼镜从虚拟焦点区域突出，并成为真正的焦点

　　除了颜色，其他任何属性都可以通过对比形成焦点。这个时候你要做的就是注意不要太过专注。因此，除了焦点，设计中的其他元素应该保持一种相似性。

　　空间：全空，主动-被动，向前-向后，近-远，2D-3D，封闭-开放

　　形式：简单-复杂，美丽-丑陋，抽象-具体，清晰-模糊，几何-有机，直曲线，对称-不对称，完全破碎

　　结构：有序-无序，有序-随意摆放，衬线字体-无衬线字体，机械-手动

　　质地：细-粗，光滑-粗糙，反射-哑光，滑-粘，尖-钝位置：上下、高低、左右、上下、前后、有节奏-随机、分开-分组、靠近、居中-边缘、有序排列-不相关、内外

　　方向：垂直-水平、垂直-对角、向前-向后、稳定-活跃、内聚-分散、顺时针-逆时针、凹凸、规则-斜体

　　大小：大-小，长-短，窄-宽，扩-缩，深-浅

　　颜色：黑色、亮-暗、暖-冷、亮-暗、自然-人工、饱和(暗)-无色(普通)

　　密度：透明-暗淡，致密-稀薄，液-固

　　重力：轻-重，稳定-不稳定

　　突出重点的前提是非重点区域的元素要尽可能一致。似乎很容易产生冲突，但需要一步一步的方法来保持一致性。

　　比如下面页面中间的图案也是整个页面的焦点

　　可以看出，虚拟焦点区域是由手绘花卉、几何图案数字等手绘图案组成的图案几何图形，而真实焦点落在最大的手绘花卉上。这时手绘花卉的有机形态和相邻的几何形态就形成了对比，即几何形态和有机形态的对比。

　　三角形的几何形状和数字的位置只是三角形。经过仔细观察，整个画花的材料与画面中的几何形状和图形相同，但与手绘脑图明显不同。它们相互对比，相互统一。

　　经过分析观察，一个焦点的结构并不像想象的那么简单。如果把对比和统一看成一个平衡的两极，那么所有元素之间的关系就是取它们之间的值，最终达到平衡。这可以算是一种力学。

　　你的画面元素越多，就越需要加强整个画面的统一性。

　　下面的设计是一个由很多小插图聚合而成的页面，一不小心就陷入一片混乱。设计师将这些插画分为三段内容，每段内容用背景色分割成三个长方形，就是形状的统一。这些插画的材质和风格也是统一的，同时插画中展示的物体方向也是向下倾斜的，也形成了一种统一。所以你可以看到这张图的对比力比较弱，没有人怀疑焦点是左边的长方形，但是这个焦点里的插图可以看到是一件男式衬衫和一件女式衬衫，这就形成了男女产品的对比。这种对比相对不是很强烈。

　　保持比例

　　说到比例，难免和数学公式有关系。其实简单来说，我们可以把尺度看作一个视觉上的原子单位，位置和大小的所有关系都是以这个原子单位为基础的。

　　举个例子，如果我确定一个原子单位是一个50px大小的正方形，我会基于这个矩形创建一个图形，这个矩形是由这个正方形构建的，有点像我们玩的拼图游戏。添加50px网格线后，您会明白它们只是与原子单位成比例

　　您可以在Photoshop中随意设置网格的大小，网格的大小应该与您的文档成比例。例如，如果您的新文档的宽度是1600px，网格可以设置为80px或160px。根据网格线，网格线越小，最终结果就越灵活。但是也要注意，如果网格太小，就起不到很大的作用。

　　比例会让你的网页设计形成一种无形的稳定感，每一个元素都适当的显示在它适当的位置。如果选择对称布局，因为对称本身是稳定的，所以网格在不对称布局中起着更重要的作用。

　　下面这个展示栈音乐游戏乐趣的设计是用网格让每个色块各就各位。它不对称的布局总给人一种崩溃的张力，背后需要比例的支撑。

　　神奇几何

　　网页的布局几乎都是由几何图形组成的，显示屏本身是矩形的，所以最常用的布局是矩形。

　　矩形

　　它给人一种安定、踏实、有序的感觉，所以给人一种信任。在网页设计中，不仅图片可以设计成矩形，文本段落也可以是矩形。例如，在以下示例中，左图片和右图片布局中的图形和文本分别是矩形

　　作为矩形，也有直角矩形和圆角矩形，分别传达不同的感受。圆角矩形相对不那么尖锐，更趋于柔和和圆润。

　　除了图文，还有长方形作为色块，一般用来强调视觉重点。如下例所示，左边的矩形框用于聚焦文本段落

　　三角形的

　　三角形有一种稳定性，因为关于三角形的关联最多的是一座山或者金字塔，而这种结构本身就能抵御外界环境的入侵。你的潜意识会把一个正三角形看作是一种庇护。三角幂的稳定感，常用在有人工痕迹的领域，比如建筑。

　　三角的出现所呈现的稳定人心的气场，是不应该被打扰的。所以当三角形作为一个画面出现的时候，就是全场的焦点。当然，只以图案形式出现的三角形除外。这也表现出了一些霸气和三角的孤立。

　　由于三角形实际上是矩形的一半，所以矩形的意图可以通过三角形来扩展，矩形布局的效果也可以通过巧妙的构图安排来发挥。

　　圈

　　圆是完美的，也象征着循环。可以说圈子是东方风格的象征元素。圆灵活豁达，所以力量感比三角形的锐度弱，但更活泼。如果你的页面全是点点，毫无疑问，这一页必然会让人觉得是针对孩子或者女生的。

　　圆的魅力在于和谐，所以它可以用于任何布局，也可以形成一种焦点因为我们对于圆有流动性，所以它不具有稳定性的特征。如果使用圆形进行布局，其周围的布局表达式将受到影响。因此，我们需要进一步提高圆的使用。比如圆的尺寸不容易保持太大，因为太大的圆容易挤压屏幕本身的边缘线，在周围造成压迫感。

　　在使用几何图形进行版面设计时，大部分文字段落都是矩形版面，也就是说在绘图和图案造型时，要利用几何图形本身的魔力进行排版。自然界本身的结构其实可以简化为几何造型，甚至一张图片本身就具有几何造型的特点。因此，您可以将图像内容本身与几何图形相结合。

　　有些几何形状并不简单。比如矩形倾斜后变成平行四边形。两个三角形叠加在一起，就变成了六角星。四边形多一条边就是五边形，然后就变成多边形了。几何可以巧妙地组合成新的形状，这几乎使几何拥有无穷的魔力。

　　例如，在这个例子中，拐角被圆角后，图形的锐度消失了，这给整个图形增加了灵活性

　　设计最搞笑的是从来没有一个标准答案。哪怕是一部叫做大师的杰作，也在等待着有人来突破。也许我们应该放弃“突破”的竞争思维表达，但应该说，不同的人应该解读不同的风格。