网页设计布局知识

网页设计流程：
主题明确——设计思路——色彩作用——版本设计——形式内容


（1）内容决定形式
确定网站主题内容，定色调，分区块，再处理细节（交互区、链接区）。


电商网站    购物           消费人群          （不适合黑色，一般是橙色等较活泼的颜色）
企业网站    品牌形象    参观了解人群
教育网站    课程           学习人群
门户网站    信息分类    人群会很多
政府部门    服务          需要服务的人群  （蓝色、红色）
医疗网站    看病          看病的人群        （不适合黑色）


（2）功能决定设计方向
看网站的用途，决定设计思路


（3）先整体，后局部，最后回归到整体
全局考虑，占位置，然后定基调，分模块设计，最后调整不满意的几个布局细节。


网页的基本布局：头部及导航模块、内容模块、底部模块


（4）网页内容要易读
网页设计作为一种视觉语言，特别讲究排版和布局。合理运用版式设计，
通过文字图形的空间组合，使浏览者有一个流畅的视觉体验。


网站的功能分类
1.功能型网页设计（服务网站、电子商务类网站）
2.形象型网页设计（品牌形象站）
3.信息型网页设计（门户站）


网页的表现
现今流行趋势：网页设计主要流行响应式设计、扁平化设计、无限滚动、
固定标头、大胆的颜色、更少的按钮和更大的网页宽度。


网页配色营造出的氛围
（大局）统一感、（顺序）节奏感、（局部）深浅主次


页面色彩搭配方法
1.根据页面风格确定主色
2.根据主色确定配色


如何根据页面风格对页面基础色调定位？
LOGO色（logo需要去工商局注册，并且其他企业不能重复）、色彩的感情...


红色（情感：热情、活泼、热闹、革命、温暖、喜庆、幸福、吉祥、警告、危险...）
主要用途：logo色、产品色（红色汽车）、政府类、成人教育类、美食主题、女性主题、婚庆主题
促销专题：喜庆活动（过年、演出等）


橙色（情感：光明、华丽、兴奋、甜蜜、快乐、活力、激情...）
主要用途：logo色、产品色、电商类、美食主题、儿童主题（亲子、玩具等）、物流主题


黄色（情感：明朗、愉快、乐观、渴望、发展、注意...）
主要用途：logo色、产品色、美食主题、儿童主题（亲子、玩具等）、家具主题


紫色（情感：优雅、浪漫、高贵、神秘、魅力、自傲、轻率...）
主要用途：logo色、产品色、女性主题（浪漫）、化妆品主题、七夕专题


绿色（情感：新鲜、宁静、安逸、和平、环保、柔和、青春、安全、理想...）
主要用途：logo色、产品色、健康食品主题、药品主题、教育主题、环保主题、旅游主题、家具主题


蓝色（情感：深远、永恒、沉静、理智、诚实、寒冷...）
主要用途：logo色、产品色、服务型商业主题、电子软件主题、科技主题、后台管理平台主题、化工主题、教育主题


灰色（情感：谦虚、平凡、沉默、中用、沉稳、低调...）
主要用途：产品色、电子产品主题、金属、五金主题、科技主题、个人个性风格主题、家具主题
电子产品专题、金属质感专题


黑色（情感：严肃、庄重、酷、坚实、沉默、悲伤、黑暗、罪恶、恐怖、绝望...）
主要用途：产品色、电子产品主题、金属、五金主题、科技主题、个人个性风格主题、男装主题、摄影主题、音乐主题
电子产品专题、金属质感主题、悼念专题


白色：白色是网页设计中通用的颜色，它具有容易突出彩度的特性与其他颜色搭配使用，适用于所有类型网页。


如何根据主色进行色彩搭配？
单色搭配、类比色搭配、互补色搭配、分裂补色搭配、三原色搭配、二次色搭配、与黑、白搭配


顶部栏的内容：品牌logo、导航/菜单、搜索框、提示消息、登陆/注册、联系方式、语言切换、
其他产品或者移动端app的下载链接、行为召唤链接（我要投稿、我要发微博）


网页设计内容布局原则：亲密性、对齐、重复、对比


底部设计要展示的内容：
1.底部导航
2.版权说明
3.联系方式
4.备案与认证信息
5.企业服务条款
6.扩展链接
7.底部广告位
8.其它（比如企业logo、服务理念、特色等，自由拓展一定要警醒自己“不能信息过重”）


网站底部设计应该达到的目的：
1.权威可信（包括公司名称地址等联系信息、政府相关部门备案及认证信息）
2.便捷（底部导航、其它快捷入口）
3.合理拓展信息（广告位、友情链接、服务理念特色等）


常见企业网站首页设计的布局
1.大框套小框布局
2.导航在主视觉下方的布局
3.左中右布局
4.环绕式布局
5.穿插式布局
6.通栏布局（让视线不受方框的限制，大气，开阔，应用广泛）


常见二级页面设计的布局：左右布局、左中右布局、通栏布局