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