优秀网站设计案例分享及分析
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
优秀网站设计案例分 享及分析（一）
网页设计中的分割法则
网络营销部门内训 ----郑华伟
1
网页设计又没有规律
❖ 为什么我们的网页就是差一点点感觉？为什么我们做了多年都是 那样的水准，而他人在短短时间内就能成长到一定高度，其原因就是因为一些 设计师在长期 不断学习、思考、动手过程中，领悟到了法则的存在。
12
网页中的配色问题
一、需要配色的是你 的画布，而不是你的 图片 一个在网页设计中最 根本的原则是，无论 你花了多少时间创造 了一个辉煌的设计， 其最终的作用是发挥 出内容的核心位置。 你的配色方案永远不 应该比它呈现的内容 的更加“响亮”。你 的设计应该是在后台， 目的是帮助突出网站 的内容。
13
15
一般来说，你的文字最好避免使用墨黑 色，深灰色一般更容易阅读。 对于你的背景色，全白色（#FFFFFFF） 是可以搭配任何文本的最安全的颜色。 如果你想选用其他的背景颜色，我们建 议采用#FFFFFF到#CCCCCC 当然，这些颜色的选择都不是固定死的。
16
三、尽量不要使用颜色选择器右上角的颜色
❖ 他精确到每个元素间的距离正好都是10的整倍数，首屏banner 高度570 ，logo长度190，乘以3，正好就是570.底部more标签与底栏的距离是90, 。而底栏文字高度严格缩小在90像素以内，同时与上下之间的间距保持在 40像素。从这里我们可以看出：要做好一个网页，其网页中每一个元素， 他们的位置、大小，一定需要有关联的。
4
那么什么是六分法则？
让我们重头开始，来还原网页设计中最本质的东西，其实这个网页并 不复杂。我们先去除网页要传达的信息他原始的骨架就是如此了。因 为6是一个很神奇的数字，他可以被3、2整除，我们网页的展示区域一 般是1200、960PX，在这个基础上除以6，就有了多种选择，我们可以 把版块分为200、400、600,1200PX，又可以划分为160、320、480 、960PX，分别对应的布局是6、3、2、1
浅灰色的画布突出了图像，而明 亮的画布反而不能突出你的内容。 用Photoshop等软件设计网站的 时候，创建设计的过程往往是相 互独立的。有些设计单个看起来 很不错，也能被你的客户所接 受， 但是当它真正被设计成网 页的时候不适当的配色往往会分 散访客的注意力。事实上，网页 设计的过程是和内容紧密相连的， 很多制作高品质的网页看上去空 空荡荡， 几乎没有内容。
5
同时我们在这个网页中学到的
还不止如此
左图中，你会发现，网页中元素的位置是如此居中，对称，看图 你就可以知道为什么这个元素要在这个位置，而不是偏左或者偏 右。很多童鞋，其实就是缺乏的这种严谨
6
还有这个
❖ 你可以感受一下这个网页的banner是不是 右边格子一样严谨
7Байду номын сангаас
当我第一次看到这个网站
就被他的规则震撼住了
18
分分钟亮瞎了访客的双眼！如果 你想确保你不烧焦你的访客的视 网膜，遵循留出颜色选择器的右 上角的格子的一半原则。
19
案列
20
21
8
小切糕全屏响应式
❖ 网页中的很多元素，除了可以有等比、等高、等宽之类的联系外，其实还可 以有倍数之间的关系
❖ 小切糕全屏响应式俗称瀑布流设计，是根据屏幕宽度进行计算，通常在设计 中会有一个基础最小切糕，然后以1倍、2倍、3倍、4倍进行拓展，并计算出 最合适完整的组合
9
实际运用
❖ 从上到下，每一个模块，每一个版块的网页元素，他们相对称的分割在各个 版块当中，绝不越线。同时模特服装图片，在宽度不变的情况下，它的高度 分别是1倍、2倍、3倍、4倍，产生若有似无的联系。
颜色选择器的右上角是一块肥沃的土地。在右上角的颜色可以执行出惊人的效果，而且 非常诱人，但通常想用好需要大量的经验。如果没有这种经验，他们可能会导致事故的 发生，所以最好以削弱你的颜色，最好都保持比较淡化的色彩。
为了说明这一点，看如果我只是改变了我们设计的色调，到目前为止，会发生什么。
17
看上去还是听舒服的对吧？但 是如果你把颜色调整为选择器 右上角的颜色，我们再来看看 效果如何：
❖ 本文也许会帮到你，也许能够带你对网页设计有一个更深层的认识，也许能为你 提供一个有理有据，在客户面前装B的不二法则。
❖ 那么我们下面首先看一些案例
2
案例一
3
你 从这张图中 看到了 什么？
案例一分析
❖ 从上图中，我们可以看出，作者在做这个网页的时候是何等的严谨， 在他的页面中，连图两边的白色部分把网页分割为8个模块，原网页的宽度是 1600PX，即每一块的宽度为200PX，在这个过程中，中间部分（1200宽度中） 采用了6分法则。
❖ 这就是六分法则，它让你的网页具备普通网页不具备的整体感。同样的法则 ，我们看以下两个页面，抛弃了传统的栅格法则，取而代之的是，把划分网 页的分割线变成了6条。
10
11
最后的最后
懂了么？ ❖ 那么电脑前的你
❖ 有了它，我们的设计才变得有理可据，在客户面前也能更具备说服力。掌握这个方法的你，一定可 以做得更好!
14
二、选择简单的灰色
作为你网站的基调 • 你可以为你的网站基调选择无数种颜色，不过我建议你采用最简单的颜色，
比如白色/浅灰色与深灰色的搭配文字背景。 • 你可以看看任何热门的网站、模版、主题，白色或浅灰色与深灰色搭配成
了大多数的选择，这当然也是有充分理由的。这样的搭配对访客而言提高 了你内容的可读性，并且把你的图片突出在最前方。
网页设计中的分割法则
网络营销部门内训 ----郑华伟
1
网页设计又没有规律
❖ 为什么我们的网页就是差一点点感觉？为什么我们做了多年都是 那样的水准，而他人在短短时间内就能成长到一定高度，其原因就是因为一些 设计师在长期 不断学习、思考、动手过程中，领悟到了法则的存在。
12
网页中的配色问题
一、需要配色的是你 的画布，而不是你的 图片 一个在网页设计中最 根本的原则是，无论 你花了多少时间创造 了一个辉煌的设计， 其最终的作用是发挥 出内容的核心位置。 你的配色方案永远不 应该比它呈现的内容 的更加“响亮”。你 的设计应该是在后台， 目的是帮助突出网站 的内容。
13
15
一般来说，你的文字最好避免使用墨黑 色，深灰色一般更容易阅读。 对于你的背景色，全白色（#FFFFFFF） 是可以搭配任何文本的最安全的颜色。 如果你想选用其他的背景颜色，我们建 议采用#FFFFFF到#CCCCCC 当然，这些颜色的选择都不是固定死的。
16
三、尽量不要使用颜色选择器右上角的颜色
❖ 他精确到每个元素间的距离正好都是10的整倍数，首屏banner 高度570 ，logo长度190，乘以3，正好就是570.底部more标签与底栏的距离是90, 。而底栏文字高度严格缩小在90像素以内，同时与上下之间的间距保持在 40像素。从这里我们可以看出：要做好一个网页，其网页中每一个元素， 他们的位置、大小，一定需要有关联的。
4
那么什么是六分法则？
让我们重头开始，来还原网页设计中最本质的东西，其实这个网页并 不复杂。我们先去除网页要传达的信息他原始的骨架就是如此了。因 为6是一个很神奇的数字，他可以被3、2整除，我们网页的展示区域一 般是1200、960PX，在这个基础上除以6，就有了多种选择，我们可以 把版块分为200、400、600,1200PX，又可以划分为160、320、480 、960PX，分别对应的布局是6、3、2、1
浅灰色的画布突出了图像，而明 亮的画布反而不能突出你的内容。 用Photoshop等软件设计网站的 时候，创建设计的过程往往是相 互独立的。有些设计单个看起来 很不错，也能被你的客户所接 受， 但是当它真正被设计成网 页的时候不适当的配色往往会分 散访客的注意力。事实上，网页 设计的过程是和内容紧密相连的， 很多制作高品质的网页看上去空 空荡荡， 几乎没有内容。
5
同时我们在这个网页中学到的
还不止如此
左图中，你会发现，网页中元素的位置是如此居中，对称，看图 你就可以知道为什么这个元素要在这个位置，而不是偏左或者偏 右。很多童鞋，其实就是缺乏的这种严谨
6
还有这个
❖ 你可以感受一下这个网页的banner是不是 右边格子一样严谨
7Байду номын сангаас
当我第一次看到这个网站
就被他的规则震撼住了
18
分分钟亮瞎了访客的双眼！如果 你想确保你不烧焦你的访客的视 网膜，遵循留出颜色选择器的右 上角的格子的一半原则。
19
案列
20
21
8
小切糕全屏响应式
❖ 网页中的很多元素，除了可以有等比、等高、等宽之类的联系外，其实还可 以有倍数之间的关系
❖ 小切糕全屏响应式俗称瀑布流设计，是根据屏幕宽度进行计算，通常在设计 中会有一个基础最小切糕，然后以1倍、2倍、3倍、4倍进行拓展，并计算出 最合适完整的组合
9
实际运用
❖ 从上到下，每一个模块，每一个版块的网页元素，他们相对称的分割在各个 版块当中，绝不越线。同时模特服装图片，在宽度不变的情况下，它的高度 分别是1倍、2倍、3倍、4倍，产生若有似无的联系。
颜色选择器的右上角是一块肥沃的土地。在右上角的颜色可以执行出惊人的效果，而且 非常诱人，但通常想用好需要大量的经验。如果没有这种经验，他们可能会导致事故的 发生，所以最好以削弱你的颜色，最好都保持比较淡化的色彩。
为了说明这一点，看如果我只是改变了我们设计的色调，到目前为止，会发生什么。
17
看上去还是听舒服的对吧？但 是如果你把颜色调整为选择器 右上角的颜色，我们再来看看 效果如何：
❖ 本文也许会帮到你，也许能够带你对网页设计有一个更深层的认识，也许能为你 提供一个有理有据，在客户面前装B的不二法则。
❖ 那么我们下面首先看一些案例
2
案例一
3
你 从这张图中 看到了 什么？
案例一分析
❖ 从上图中，我们可以看出，作者在做这个网页的时候是何等的严谨， 在他的页面中，连图两边的白色部分把网页分割为8个模块，原网页的宽度是 1600PX，即每一块的宽度为200PX，在这个过程中，中间部分（1200宽度中） 采用了6分法则。
❖ 这就是六分法则，它让你的网页具备普通网页不具备的整体感。同样的法则 ，我们看以下两个页面，抛弃了传统的栅格法则，取而代之的是，把划分网 页的分割线变成了6条。
10
11
最后的最后
懂了么？ ❖ 那么电脑前的你
❖ 有了它，我们的设计才变得有理可据，在客户面前也能更具备说服力。掌握这个方法的你，一定可 以做得更好!
14
二、选择简单的灰色
作为你网站的基调 • 你可以为你的网站基调选择无数种颜色，不过我建议你采用最简单的颜色，
比如白色/浅灰色与深灰色的搭配文字背景。 • 你可以看看任何热门的网站、模版、主题，白色或浅灰色与深灰色搭配成
了大多数的选择，这当然也是有充分理由的。这样的搭配对访客而言提高 了你内容的可读性，并且把你的图片突出在最前方。