1 / 22
文档名称:

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

格式:ppt   大小:3,153KB   页数:22页
下载后只包含 1 个 PPT 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

分享

预览

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

上传人:陈潇睡不醒 2020/12/4 文件大小:3.08 MB

下载得到文件列表

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

相关文档

文档介绍

文档介绍:网络营销部门内训
----郑华伟
优秀网站设计案例分享及分析(一)
网页设计中的分割法则
网页设计又没有规律
为什么我们的网页就是差一点点感觉?为什么我们做了多年都是 那样的水准,而他人在短短时间内就能成长到一定高度,其原因就是因为一些 设计师在长期 不断学****思考、动手过程中,领悟到了法则的存在。
本文也许会帮到你,也许能够带你对网页设计有一个更深层的认识,也许能为你 提供一个有理有据,在客户面前装B的不二法则。
那么我们下面首先看一些案例
案例一
从这张图中你看到了什么?
案例一分析
从上图中,我们可以看出,作者在做这个网页的时候是何等的严谨, 在他的页面中,连图两边的白色部分把网页分割为8个模块,原网页的宽度是 1600PX,即每一块的宽度为200PX,在这个过程中,中间部分(1200宽度中) 采用了6分法则。
那么什么是六分法则?
让我们重头开始,来还原网页设计中最本质的东西,其实这个网页并不复杂。我们先去除网页要传达的信息他原始的骨架就是如此了。因为6是一个很神奇的数字,他可以被3、2整除,我们网页的展示区域一般是1200、960PX,在这个基础上除以6,就有了多种选择,我们可以把版块分为200、400、600,1200PX,又可以划分为160、320、480、960PX,分别对应的布局是6、3、2、1
同时我们在这个网页中学到的还不止如此
左图中,你会发现,网页中元素的位置是如此居中,对称,看图你就可以知道为什么这个元素要在这个位置,而不是偏左或者偏右。很多童鞋,其实就是缺乏的这种严谨
还有这个
你可以感受一下这个网页的banner是不是右边格子一样严谨
当我第一次看到这个网站 就被他的规则震撼住了
他精确到每个元素间的距离正好都是10的整倍数,首屏banner 高度570,logo长度190,乘以3,,。而底栏文字高度严格缩小在90像素以内,同时与上下之间的间距保持在40像素。从这里我们可以看出:要做好一个网页,其网页中每一个元素,他们的位置、大小,一定需要有关联的。
小切糕全屏响应式
网页中的很多元素,除了可以有等比、等高、等宽之类的联系外,其实还可以有倍数之间的关系
小切糕全屏响应式俗称瀑布流设计,是根据屏幕宽度进行计算,通常在设计中会有一个基础最小切糕,然后以1倍、2倍、3倍、4倍进行拓展,并计算出最合适完整的组合
实际运用
从上到下,每一个模块,每一个版块的网页元素,他们相对称的分割在各个版块当中,绝不越线。同时模特服装图片,在宽度不变的情况下,它的高度分别是1倍、2倍、3倍、4倍,产生若有似无的联系。
这就是六分法则,它让你的网页具备普通网页不具备的整体感。同样的法则,我们看以下两个页面,抛弃了传统的栅格法则,取而代之的是,把划分网页的分割线变成了6条。