商务网站设计与制作2017级 商务网站设计与制作2017级 2.1 网页风格设计.pptVIP

LOGO 商务网页设计与制作 商务网页布局与设计 第二章 学习目标 项 目 概 述 任务1：网页风格设计 任务2：草图绘制 学习内容 第二章?项 目 概 述—网页风格设计—草图绘制 项 目 概 述 长沙市碧雅园花卉苗木基地成立于2008年，位于美丽的湘江河畔，是长沙市著名的花卉苗木公司。近三年来，苗木基地面积一直稳居同行首位，荣获全国优秀苗木基地提名单位等多项荣誉称号。 公司经营的苗木品种有乔灌木、移栽大树、扦插小苗、树桩盆景、竹类植物、藤本植物、草本花卉、草皮草种、造林苗、新优果苗、种籽种苗等，其中红花紫薇、罗汉杉、红梅、广玉兰、海棠、樱花、香樟、桂花为其经营的特色苗木。公司希望通过企业网站的建设，提高网络知名度，开拓网络销售渠道。 小王所在的智越网络公司承接了基地的网站建设项目。网站建设部经理安排小王负责该项目，并要求小王在五天内提交网站首页草图。 第二章?项 目 概 述—网页风格设计—草图绘制 项 目 分 析 第二章?项 目 概 述—网页风格设计—草图绘制 网站建设业务流程图 1、网页草图是进一步挖掘客户需求的网页原型之一，也是制作效果图的蓝本。 2、具体工作包括页面布局、色彩搭配、文字图片编排、页面内容组织等。 任 务 分 解 第二章?项 目 概 述—网页风格设计—草图绘制 本项目可分解为以下两个任务： 任务1：网页风格设计 任务2：网页草图绘制 项 目 概 述 任务1：网页风格设计 任务2：草图绘制 学习内容 第二章?项 目 概 述—网页风格设计—草图绘制 任务一、网页风格设计 第二章?项 目 概 述—网页风格设计—草图绘制 风格设计的重点是版面布局、颜色的使用和搭配、文字和图片的编排等。要完成这一任务，可以从分析比较同类网站入手，以快速形成初步的设计方案。 【任务说明】 第二章?项 目 概 述—网页风格设计—草图绘制 【任务步骤----1、竞争对手网站对比分析】 竞争对手网站获取途径 关键词搜索 行业网站会员 相关统计报告 竞争对手网站筛选 用户体验度 百度权重、PR值 分析要点 网页配色 页面布局 文字、图像的编排 内容组织 栏目结构 第二章?项 目 概 述—网页风格设计—草图绘制 【任务步骤----2、网页配色】 主色调 在主色调的选择上，首先应该明确网站的主题、服务对象、所要传达的信息，还有利用色彩想要达到的视觉和心理效果，以确保所选用的色彩与网站形象相吻合。 主色调选取要点： 1）、色彩分为无彩色和有彩色两大类，无彩色是指黑、白、灰，其它的为有彩色。 2）、有彩色又可分为暖色调和冷色调两大类，它们分别给人以不同的感觉。 第二章?项 目 概 述—网页风格设计—草图绘制 冷暖色对比 第二章?项 目 概 述—网页风格设计—草图绘制 辅助用色 在确定了网页的主色调后，可以适当地辅以其它几种辅助色，但一般不超过三种（背景色和主体文字颜色不计入其中），这样可以对整个页面的色彩起着调和的作用，让页面生动活泼、富有生气，并使主色调更加流畅地贯穿整体。 辅助用色分类： 1）、辅助用色包括辅色调、点睛色、背景色三种。 2）、仅次于主色调的视觉面积的辅色调，能起到烘托主色调、支持主色调、融合主色调的作用；点睛色是在小范围内“点”上强烈的颜色来突出主题效果，使页面更加鲜明生动；背景色是衬托整体的色调，起到协调的作用。 第二章?项 目 概 述—网页风格设计—草图绘制 示例： 第二章?项 目 概 述—网页风格设计—草图绘制 辅助用色要点： 1）、可以考虑跟主色调相邻近的颜色，也可以用主色调的对比色。 2）、相邻色给人的感觉是稳定、和谐、内向；而对比色给人的感觉是冲突，强的对比色运用可以使画面的开放性增强，整体印象变得轻松舒畅。 3）、在具体应用的时候用把握整体和谐、局部对比的原则。