文档介绍：优秀网站设计案例分享及分析网页设计又没有规律

文档介绍：优秀网站设计案例分享与分析

网页设计没有规则

为什么我们的网页感觉有点不对劲？ 之所以我们在那个水平上工作了很多年，而其他人却能在短时间内成长到一定的高度，是因为有一些设计师通过长期不断的学习、思考、动手实现了方法——处理中。 存在。

这篇文章可能会对您有所帮助。 它可能会让您对网页设计有更深入的了解。 它或许为你提供了一种有理有据、有理有据的在客户面前装B的方式。

那么我们首先来看一些案例

案例一

你在这张照片中看到了什么？

案例一分析

从上图中我们可以看出作者在制作这个网页时的严谨程度。 在他的页面中，图片两侧的白色部分将网页分为8个模块。 原始网页的宽度为，即每一张的宽度为200PX。 在这个过程中，中间部分（1200宽度）采用6点法。

那么什么是六十六分呢？

让我们重新开始，还原网页设计中最本质的东西。 其实这个网页并不复杂。 我们先把网页要传达的信息的原始骨架去掉。 因为6是一个非常神奇的数字，它可以被3和2整除。我们网页的显示面积通常是1200或960PX。 在此基础上除以6，就有多种选择。 我们可以将截面分为200、400、600，也可以分为160、320、480、960PX。 对应的布局分别为6、3、2、1。

同时，我们在这个页面了解到了更多

在左图中，你会发现元素在网页中的位置是如此的居中和对称。 看图就知道为什么这个元素在这个位置，而不是向左或者向右。很多童鞋其实就缺乏这种严谨性。

和这个

你可以感受一下这个网页右侧的网格是否像

当我第一次看到这个网站时

我对他的规则感到非常震惊

他太精确了，每个元素之间的距离正好是10的整数倍，第一屏的高度是570，标志的长度是190，乘以3。底栏文字的高度是严格减少到90像素，而顶部和底部之间的间距保持在40像素。 从这里我们可以看出：要制作一个网页，网页中的每个元素，它们的位置和大小都必须是相关的。

小切蛋糕全屏响应式

网页中的很多元素除了具有等比、等高、等宽等关系外，还可以具有倍数关系。

小全屏响应式设计，俗称瀑布流设计，是根据屏幕宽度来计算的。 通常设计时会有一个基本的最小截断，然后将其扩大1x、2x、3x、4x网站设计实例网站设计实例，计算出最大值。 适合完整组合

实际使用

从上到下，各个模块、各个版块的网页元素相对对称地划分到各个版块中，从不越界。 同时，如果模特服装图片的宽度不变，其高度分别为1倍、2倍、3倍、4倍，产生一种存在与不存在的假设关系。

这就是六点规则。 它使您的网页具有普通网页所不具备的完整性感。 同样的，我们再看下面两页。 我们放弃了传统的网格方法，而是改变了将网页分为6等分的分割线。