网页布局的分类
九宫布局（多数网站采用）
网页布局的分类
米字布局
网页布局的技巧
黄金分割布局：主要用于构图a: (a+b)=b:a 左右对齐布局： 全景式布局： 卫星式布局： 包围式布局： 散开式布局： 单侧齐行式布局： 对称式布局
0.618
网页色彩
• • • • • • • 色彩与印象 色彩的原理 色相环 网页色彩模式 色彩索引 色调变化效果 色彩分类
• 网页布局技巧
黄金分割布局、左右对齐布局、全景式布局、卫星式布局、 包围式布局、散开式布局、单侧齐行式布局、对称式布局
网页布局基础
网页基本元素：文本、图像、动画、音频、视频、表单、表格、框架等 网页构成：标题、页眉（ LOGO 导航主题）、内容（文本、图片、搜索、列表等功能区）、 页脚 空间与页面尺寸：网页空间比屏幕空间小；屏的概念；像素；分辨率；标准宽度。 元素分布：LOGO、搜索框、导航条等分布规律。
网页布局设计
布局的方法： 准备工具—确定尺寸—设计版式—绘制页眉—绘制内容—绘制页脚—调整页面—实现效果图 确定版面率： 版面率是指图片和文字在浏览器中所占的比率，又叫留白。 网格设计： 网页布局又可以叫做网格设计 ，将网页分解生多个矩形块。 从大到小设计
网页布局的分类
满版布局
网页布局的分类
十字布局
教育类网站
特点： 1、内容多，功能多。 2、以点盖面为主。 3、首页一般突出教育文化 布局： 横向布局较多 色彩： 以绿色、蓝色较多 ……
功能型网站
特点： 1、布局简单，学问多。 2、用户体验很重要。 3、精神感受和粘合度高。 布局： 布局简单，速度快。 色彩： 色彩平和、简约。 ……
企业型网站
特点： 1、突出企业文化。 2、展现企业产品。 3、能提高客户的认知度。 布局： 横向布局较多，风格简约。 色彩： 以企业的VI色为主。 ……
网页布局 • 网页布局基础
网页基本元素、网页构成、空间与页面尺寸、元素分布
• 网页布局设计
布局的方法、确定版面率、网格设计
• 网页布局分类
满版布局、十字布局、九宫布局、米字布局
色彩索引
1、红色：+喜庆、激情、能量、热情、活力；-血腥、残忍、危险； 2、橙色：+温暖、活力、青春、活跃、健康；-时髦、喧嚣、妒忌、焦躁 3、黄色：+聪明、醒目、乐观、喜悦、光明、希望；-警告、欺骗 4、绿色：+和平、自然、和谐、丰收、成长、安全、新鲜；-妒忌、恶心、侵略 5、蓝色：+安静、沉稳、正义、理智、深远、永恒；-冷漠、消沉 6、紫色：+优雅、高贵、奢侈、时尚、女性；-虚荣、疯狂 7、黑色：+权利、重量、严肃、高贵、孤独、神秘；-恐惧、邪恶、悲哀、阴沉 8、白色：+神圣、纯洁、柔软、简介、真实；-虚弱、孤独 9、灰色：+平衡、安全、信任、成熟、古典、平凡；-失意、厌倦、优柔寡断
网页色彩模式
1、RGB模式 2、色彩的HTML语言描述 3、网页安全色
网页色彩模式
RGB — 加色混合色彩模型 前面我们已经提到，基于色彩的三刺激理论，人类眼睛的视网膜中假设存在三种锥体视觉细胞，它们分别对红（Red）、绿(Green)、蓝 (Blue)三种色光最敏感。根据人眼光谱灵敏度实验曲线证明，这些光在波长为630nm(红色)、530 nm（绿色）和450 nm（蓝色）时的刺激达 到高峰。通过光源中的强度比较，我们感受到光的颜色。这种视觉理论是使用三种颜色基色：红（R）绿（G）蓝（B）在视频监视器上显示 颜色的基础，称之为RGB色彩模型。 计算机彩色显示器是典型的RGB色彩模型。RGB色彩模型用一个三维笛卡儿直角坐标系中的立方体来描述，RGB色彩框架是一个加色模型，模 型中的各种颜色都是由红、绿、蓝三基色以不同的比例相加混合而产生的。 CMY （CMYK） -- 减色混合色彩模型 青（Cyan）、品红（Magenta）、黄（Yellow）分别是红（R）、绿（G）、蓝（B）三色的互补色，是硬拷贝设备上输出图形的颜色，如彩 色打印、印刷等。它们与荧光粉组合光颜色的显示器不同，是通过打印彩墨（ink）、彩色涂料的反射光来显现颜色的，是一种减色组合。 由青、品红和黄三色组成的色彩模型，使用时相当于从白色光中减去某种颜色，因此又叫减色系统。 在笛卡儿坐标系中，CMY色彩模型与RGB色彩模型外观相似（如图），但原点和顶点刚好相反，CMY模型的原点是白色，相对的顶点是黑色。 CMY模型中的颜色是从白色光中减去某种颜色，而不是象RGB模型那样，是在黑色光中增加某种颜色。 因此，CMY三种被打印在纸上的颜色，我们可以理解为： 青（C）= 白色光 — 红色光 品红（M）= 白色光 — 绿色光 黄（Y）= 白色光 — 蓝色光 由于白色光是由红、绿、蓝三色光相加得到的，上面的等式可以还原为我们常用的加色等式： 青（C）=（红色光+绿色光+蓝色光）—红色光=绿色+蓝色 品红（M）=（红色光+绿色光+蓝色光）—绿色光=红色+蓝色 黄（Y）=（红色光+绿色光+蓝色光）—蓝色光=红色+绿色 在实际应用中，CMY色彩模式也可称为CMYK色彩模型。在彩色打印及彩色印刷中，由于彩色墨水、油墨的化学特性，色光反射和纸张对颜料 的吸附程度等因素，用等量的CMY三色得不到真正的黑色，所以在CMY色彩中需要一个黑色（Black,K）,才能弥补这三个颜色混合不够黑的 问题
色彩与印象
• 色彩决定整体印象 • 色彩印象不能更改？ • 色彩的效果
色彩原理
• 光与色彩 色彩是由光的刺激产生的视觉反应 • 物体色 物体呈色是因为光源色经物体表面吸收反射到视 觉中产生光色感觉 • 色彩类型：分为无彩色系和有彩色系 • 色彩三要素：色相、饱和度、亮度
色相环
1、色相环由12种基本颜色组成。 三原色：红黄蓝 二次色：三原色混合 三次色：二次色混合 2、色环特点 3、色彩关系： 单色搭配、 类比色搭配、 补色搭配 、分离补色搭配、 原色搭、产品信息量大，导航支持。 2、图文结合。 3、搜索注册等功能模块多。 布局： 以三栏竖排为主 色彩： 以洋红、蓝色、橙色等活泼色为主 …… 产品如何展示 订单如何生成 订单如何执行
互动游戏类网站
特点： 1、页面以图片为主，视觉冲击力强。 2、内容少，以图片和分栏为主。 色彩： 以游戏环境色为主， 色彩一般强烈、刺激 …… 游戏官方网站 在线游戏站
网页设计理论
• • • • • • 网页设计流程 网站策划 网站类型 网页布局 网页色彩 网站开发技术
网页设计流程
网页设计流程
网站策划 人员组织 页面设计 程序开发 测试发布 维护推广 项目总结
网页设计流程之效果图
网站策划 提交资料 整体设计 客户审核 审核通过
绘制结构草图 绘制辅助线 绘制结构底图 添加内容 效果图切片 优化切片 输出切片
色彩的色调变化
配色决定印象的三要素 1、色调 2、色相 3、对比
色彩的分类
1、主色 2、背景色 3、融合色 4、强调色
网页设计流程实例
网站策划
收集客户信息 分析网站类型 确定网站风格 网站类型 网站导航 策划 网站风格 网站功能 网页布局 效果图
网站策划实例-达利园
网站类型
• • • • • • 资讯类网站 电子商务类网站 互动游戏类网站 教育类网站 功能型网站 企业类网站
资讯类网站
特点： 1、页面信息量大，很高，屏数多。 2、重要信息放顶部。 3、内容以文字形式为主。 4、布局紧凑，以不同颜色区分。 布局： 以三栏或四栏竖排 色彩： 政府类以红色系为主 娱乐类以紫、蓝等流行色为主 ……