优秀网站设计案例分享及分析

1、 网络营销部门内训 -郑华伟 优秀网站设计案例分 享及分析（一） 网页设计中的分割法则 网页设计又没有规律 v为什么我们的网页就是差一点点感觉？为什么我们做了多年都是 那样的水准，而他人在短短时间内就能成长到一定高度，其原因就是因为一些 设计师在长期 不断学习、思考、动手过程中，领悟到了法则的存在。 v本文也许会帮到你，也许能够带你对网页设计有一个更深层的认识，也许能为你 提供一个有理有据，在客户面前装B的不二法则。 v那么我们下面首先看一些案例 案例一 从这张图中你 看到了 什么？ 案例一分析 v从上图中，我们可以看出，作者在做这个网页的时候是何等的严谨， 在他的页面中，连图两边的白色部分把

2、网页分割为8个模块，原网页的宽度是 1600PX，即每一块的宽度为200PX，在这个过程中，中间部分（1200宽度中） 采用了6分法则。 那么什么是六分法则？ 让我们重头开始，来还原网页设计中最本质的东西，其实这个网页并 不复杂。我们先去除网页要传达的信息他原始的骨架就是如此了。因 为6是一个很神奇的数字，他可以被3、2整除，我们网页的展示区域一 般是1200、960PX，在这个基础上除以6，就有了多种选择，我们可以 把版块分为200、400、600,1200PX，又可以划分为160、320、480、 960PX，分别对应的布局是6、3、2、1 同时我们在这个网页中学到的 还不止如此 左图中，

3、你会发现，网页中元素的位置是如此居中，对称，看图 你就可以知道为什么这个元素要在这个位置，而不是偏左或者偏 右。很多童鞋，其实就是缺乏的这种严谨 还有这个 v你可以感受一下这个网页的banner是不是 右边格子一样严谨 当我第一次看到这个网站 就被他的规则震撼住了 v他精确到每个元素间的距离正好都是10的整倍数，首屏banner 高度570， logo长度190，乘以3，正好就是570.底部more标签与底栏的距离是90,。 而底栏文字高度严格缩小在90像素以内，同时与上下之间的间距保持在40 像素。从这里我们可以看出：要做好一个网页，其网页中每一个元素，他们 的位置、大小，一定需要有关联的。

4、 小切糕全屏响应式 v网页中的很多元素，除了可以有等比、等高、等宽之类的联系外，其实还可 以有倍数之间的关系 v小切糕全屏响应式俗称瀑布流设计，是根据屏幕宽度进行计算，通常在设计 中会有一个基础最小切糕，然后以1倍、2倍、3倍、4倍进行拓展，并计算出 最合适完整的组合 实际运用 v从上到下，每一个模块，每一个版块的网页元素，他们相对称的分割在各个 版块当中，绝不越线。同时模特服装图片，在宽度不变的情况下，它的高度 分别是1倍、2倍、3倍、4倍，产生若有似无的联系。 v这就是六分法则，它让你的网页具备普通网页不具备的整体感。同样的法则， 我们看以下两个页面，抛弃了传统的栅格法则，取而代之的是，把

5、划分网页 的分割线变成了6条。 最后的最后 v那么电脑前的你懂了么？ v有了它，我们的设计才变得有理可据，在客户面前也能更具备说服力。掌握这个方法的你，一定可 以做得更好! 网页中的配色问题 一、需要配色的是你 的画布，而不是你的 图片 一个在网页设计中最 根本的原则是，无论 你花了多少时间创造 了一个辉煌的设计， 其最终的作用是发挥 出内容的核心位置。 你的配色方案永远不 应该比它呈现的内容 的更加“响亮”。你 的设计应该是在后台， 目的是帮助突出网站 的内容。 浅灰色的画布突出了图像，而明 亮的画布反而不能突出你的内容。 用Photoshop等软件设计网站的 时候，创建设计的过程往往是相

6、互独立的。有些设计单个看起来 很不错，也能被你的客户所接 受， 但是当它真正被设计成网 页的时候不适当的配色往往会分 散访客的注意力。事实上，网页 设计的过程是和内容紧密相连的， 很多制作高品质的网页看上去空 空荡荡， 几乎没有内容。 二、选择简单的灰色 作为你网站的基调 你可以为你的网站基调选择无数种颜色，不过我建议你采用最简单的颜色， 比如白色/浅灰色与深灰色的搭配文字背景。 你可以看看任何热门的网站、模版、主题，白色或浅灰色与深灰色搭配成 了大多数的选择，这当然也是有充分理由的。这样的搭配对访客而言提高 了你内容的可读性，并且把你的图片突出在最前方。 一般来说，你的文字最好避免使用墨黑 色，深灰色一般更容易阅读。 对于你的背景色，全白色（#FFFFFFF） 是可以搭配任何文本的最安全的颜色。 如果你想选用其他的背景颜色，我们建 议采用#FFFFFF到#CCCCCC 当然，这些颜色的选择都不是固定死的。 三、尽量不要使用颜色选择器右上角的颜色 颜色选择器的右上角是一块肥沃的土地。在右上角的颜色可以执行出惊人的效果，而且 非常诱人，但通常想用好需要大量的经验。如果没有这种经验，他们可能会导致事故的 发生，所以最好以削弱你的颜色，最好都保持比较淡化的色彩。 为了说明这一点，看如果我只是改变了我们设计的色调，到目前为止，会发生什么