《商务网站设计与制作》课件-2.1 网页风格设计

商务网页设计与制作商务网页布局与设计第二章

理解并掌握网页风格设计要点

能针对商务诉求组织网页内容

能绘制网页布局草图学习目标项目概述

任务1：网页风格设计

任务2：草图绘制学习内容

第二章

项目概述—网页风格设计—草图绘制项

目

概

述长沙市碧雅园花卉苗木基地成立于2008年，位于美丽的湘江河畔，是长沙市著名的花卉苗木公司。近三年来，苗木基地面积一直稳居同行首位，荣获全国优秀苗木基地提名单位等多项荣誉称号。公司经营的苗木品种有乔灌木、移栽大树、扦插小苗、树桩盆景、竹类植物、藤本植物、草本花卉、草皮草种、造林苗、新优果苗、种籽种苗等，其中红花紫薇、罗汉杉、红梅、广玉兰、海棠、樱花、香樟、桂花为其经营的特色苗木。公司希望通过企业网站的建设，提高网络知名度，开拓网络销售渠道。小王所在的智越网络公司承接了基地的网站建设项目。网站建设部经理安排小王负责该项目，并要求小王在五天内提交网站首页草图。

第二章

项目概述—网页风格设计—草图绘制项

目分析

第二章

项目概述—网页风格设计—草图绘制网站建设业务流程图

1、网页草图是进一步挖掘客户需求的网页原型之一，也是制作效果图的蓝本。2、具体工作包括页面布局、色彩搭配、文字图片编排、页面内容组织等。任务分解

第二章

项目概述—网页风格设计—草图绘制本项目可分解为以下两个任务：任务1：网页风格设计任务2：网页草图绘制

项目概述

任务1：网页风格设计

任务2：草图绘制学习内容

第二章

项目概述—网页风格设计—草图绘制任务一、网页风格设计

第二章

项目概述—网页风格设计—草图绘制风格设计的重点是版面布局、颜色的使用和搭配、文字和图片的编排等。要完成这一任务，可以从分析比较同类网站入手，以快速形成初步的设计方案。【任务说明】

第二章

项目概述—网页风格设计—草图绘制【任务步骤----1、竞争对手网站对比分析】竞争对手网站获取途径关键词搜索行业网站会员相关统计报告竞争对手网站筛选用户体验度百度权重、PR值分析要点网页配色页面布局文字、图像的编排内容组织栏目结构

第二章

项目概述—网页风格设计—草图绘制【任务步骤----2、网页配色】主色调在主色调的选择上，首先应该明确网站的主题、服务对象、所要传达的信息，还有利用色彩想要达到的视觉和心理效果，以确保所选用的色彩与网站形象相吻合。主色调选取要点：1）、色彩分为无彩色和有彩色两大类，无彩色是指黑、白、灰，其它的为有彩色。

2）、有彩色又可分为暖色调和冷色调两大类，它们分别给人以不同的感觉。

第二章

项目概述—网页风格设计—草图绘制冷暖色对比

第二章

项目概述—网页风格设计—草图绘制辅助用色在确定了网页的主色调后，可以适当地辅以其它几种辅助色，但一般不超过三种（背景色和主体文字颜色不计入其中），这样可以对整个页面的色彩起着调和的作用，让页面生动活泼、富有生气，并使主色调更加流畅地贯穿整体。辅助用色分类：1）、辅助用色包括辅色调、点睛色、背景色三种。

2）、仅次于主色调的视觉面积的辅色调，能起到烘托主色调、支持主色调、融合主色调的作用；点睛色是在小范围内“点”上强烈的颜色来突出主题效果，使页面更加鲜明生动；背景色是衬托整体的色调，起到协调的作用。

第二章

项目概述—网页风格设计—草图绘制示例：

第二章

项目概述—网页风格设计—草图绘制辅助用色要点：1）、可以考虑跟主色调相邻近的颜色，也可以用主色调的对比色。

2）、相邻色给人的感觉是稳定、和谐、内向；而对比色给人的感觉是冲突，强的对比色运用可以使画面的开放性增强，整体印象变得轻松舒畅。

3）、在具体应用的时候用把握整体和谐、局部对比的原则。

第二章

项目概述—网页风格设计—草图绘制辅助用色基准---色环图：

第二章

项目概述—网页风格设计—草图绘制本项目拟建网站配色参考：主色调：白色；辅色调：绿色；点睛色：红色。

第二章

项目概述—网页风格设计—草图绘制【任务步骤----3、网页版式设计】在网页布局，即设计网页内容及各元素空间分布时，因充分考虑“F”型的阅读习惯，确保最重要的信息能有效展示在浏览者面前。

F型热点图

第二章

项目概述—网页风格设计—草图绘制国字型网页布局

第二章

项目概述—网页风格设计—草图绘制拐角型网页布局

第二章

项目概述—网页风格设计—草图绘制框架型网页布局

第二章

项目概述—网页风格设计—草图绘制“回”字型网页布局

第二章

项目概述—网页风格设计—草图绘制自由式结构布局

第二章

项目概述—网页风格设计—草图绘制“另类”结构

结构布局

第二章

项目概述—网页风格设计—草图绘制本项目拟建网站布局：在展示型企业网站中，产品往往是展示的重点。在产品线较长、产品品种较多的情况下，一般需要在页面中给出相应的列表，并将该列表置于页面的左侧，以符合“F型热点图”规律。在该项目中，“拐角型”布局可以作为首选。

第二章

项目概述—网页风格设计—草图绘制【任务步骤----4、文字和图像编排】文字的编排在网页中通过设置其字体、字号、行距，以及采用不同的排列和表现形式，还可以表达出特别的视觉效果，从而强化要传递的商业诉求。

第二章

项目概述—网页风格设计—草图绘制示例：通过文字大小及疏密的处理，可突出重点，给人层次分明的感觉。

第二章

项目概述—网页风格设计—草图绘制图像的编排图像在页面中的位置、排列方式及其大小、数量、外形等，对页面的均衡、视觉流程、文字的强调均能产生较大的影响。

第二章

项目概述—网页风格设计—草图绘制示例：图像的大小不仅决定着主从关系，也控制着页面的均衡与运动。大小对比强烈，给人跳跃感，使主角更突出；大小对比减弱，则页面稳定、安静。

第二章

项目概述—网页风格设计—草图绘制示例：不同的图像自由叠置或分类叠置，构成的块状组合，具有轻快、活泼的特性，却不失整体感。在图像较多时，会无法突出重点，这时可改变图像的面积，有效地区分层次。

第二章

项目概述—网页风格设计—草图绘制本项目拟建网站文字与图像编排要点：首页中需要展示的文字量不是很大，正文使用默认字体字号，即宋体、12磅字即可。在颜色的使用上，可考虑使用此前确定