设计的框架：视觉解剖
早之前大部分网站的首页设计，可以清晰的看到这种矩形块状的**切割。
如何从视觉上解剖一个网页设计
随着网页设计的发展，其框架也慢慢渐隐，但它依然发挥着支撑起整个视线框架。这里，有人会与栅格系统联系起来。网页的栅格系统更多发挥的是对齐元素的作用，而框架的功能会更加笼统。
网站建设中页面设计的框架，针对的是每一页面的框架。每一个网站都会有不同的页面，我们会把页面分级为首页——二级页面——三级页面。通常来说，首页运用一个框架，二级页面、三级页面也分别有一个框架。首页的框架有时还会根据分屏展示的不同展示不同的框架样式。但无论有多少变化，一个网站的诸多页面的框架之间，都会存在一种内在的视觉统一。
首页的视觉框架尤其重要，因为首页承担着网页的第一印象，还主导着整个网站的风格方向，因此确定好首页的视觉框架，是设计最初最难明确的问题。很多设计师在设计最初所耗费最多时间，用于实验各种页面版式的类型以期最完美的效果展现，而事实上，最完美其实是个伪命题，在有限的时间精力内，你需要做得就是找好自己的表达目标，每个页面设置好一个视觉焦点，根据焦点来表达你的重点内容。换句话说，你最希望用户了解什么？这个问题的答案应该是要无比清晰的在大脑中伴随设计全过程。
中心展现方式-瞄准视觉
人的视线总是集中在页面中心，因此将焦点设置在中心位置最迎合视线的做法。例如将网站的简介放置于页面中心，为了让页面更丰富，可以增加大图的背景加强表达的维度。十字线条经过的地方即是视线引导的路径，因此需要在线条的位置放上重要的元素。中心的位置其实也是一个期待点，瞄准视觉期待点，对设计师来说最大的便利就是省力。
如何从视觉上解剖一个网页设计无论网页的导航等其他元素放置于页面的哪个位置（尽量围绕线条经过的方向），这两个页面都是属于十字准星型的框架结构，焦点始终位于正中，导航无论居于哪里，都属于次要的视觉地位。
如何从视觉上解剖一个网页设计
正中的地位带来绝对的稳定感，它也是设计师最容易做到的表达。这种框架结构，相对比较稳定，因此在需要在细节上营造一些惊喜，来打破这种相对静止的版式。
左右分栏式-双面一体
将一个网页分成两栏并不意味着均分，它们是按照垂直方向形成了两列的不同布局。常见的的确是平均分配的表现情况，网页的焦点内容可以选择任一侧，另一侧作为补充。简称双面一体是因为，你不能制造两个焦点，分两个部分，它们也应该共同营造一个焦点。
如何从视觉上解剖一个网页设计
如何从视觉上解剖一个网页设计
如何从视觉上解剖一个网页设计
双栏式的页面设计表现比较灵活，通常会有一偏倚轻重这，样就能确立好视觉焦点，形成对比，制造情景冲突。视觉重点在某一侧，利用背景色的不同加强视觉重量的对比。
如何从视觉上解剖一个网页设计
两列缩略图垂直排列，让版式活跃起来的方法就是增加某一处高度的不同，强调一点细微的变化。
有序与无序排列
这种框架样式通常是基于某一个网格而搭建内容，网格的表现形式多样，每个网格都用以展示不同的内容，可以是比较规范的网格，也可以是错落有致……虽说每个网页都可以基于网格而设计，但是网页的表现未必要严格遵循网格本身。
规范的网格通常比较倾向古典怀旧，它传递出一种相对严格的秩序之美。
如何从视觉上解剖一个网页设计
相对有些错落变换的网格，更具现代风格，规则与反规则的交错。
如何从视觉上解剖一个网页设计
倾斜式表现
倾斜的线条容易形成动感的张力，利用这一点所形成的视觉框架就能很好表现与“运动”“冲击力”等动感较强的内容页面。
如何从视觉上解剖一个网页设计
斜向的页面所制造的坠落式的冲击力应该和配图样式相关，因此对慎选斜向的配图非常重要，尤其是当大部分图片其实都只适合正向方向的展示。
这些所谓的框架原理在于隐藏于表层下方的最基地的视觉结构，事实上，其他的元素通常并不严格局限于某个区域，这就让顶层的枝叶更加丰富。
在我们着手进行页面设计前，确定好一个视觉框架的方向至关重要，这让我们并不依赖于运气去“撞”到某个好的表达，并且你也不需要单独设定某个固定的框架，还可以两两并用，一个网站有多个页面，多个页面都可以拥有不同的布局。同一个页面，也会因为内容的不同采用不同的视觉结构表达。
下面这一个网页里的多个页面，每个页面都根据不同的焦点表现形态选择了不同的布局，框架总是为内容而服务的。
如何从视觉上解剖一个网页设计
始终要承认的是，内容应该是高于形式的，设计时的任何视觉框架都是为内容而服务的，因此内容可以以任何外在的形式来表现。网页设计的视觉也就是我们平时说的“颜值”，至于网站的布局框架设计好之后，内容的设计也是非常重要的，放什么图片，怎么放都是有讲究的。
