第二章电子商务规划设计

网站规划设计网站规划设计 一个网站的成功，重在奠基。没有刻苦的学习，没有辛勤的付出，没有人随随便便能成功。第第 2 2 章章如何构思一个网站？如何构思一个网站？怎样开始创业之旅？怎样开始创业之旅？网易首席构架师丁磊网易首席构架师丁磊 第一节第一节 网站建设流程网站建设流程第二节第二节 内容设计内容设计第三节第三节 版式设计版式设计第二章第二章 网站建设概述网站建设概述第四节第四节 导航及目录设计导航及目录设计第五节第五节 风格设计风格设计一、网站制作流程概述一、网站制作流程概述 网站开发需要一个团队合作,所以,你不必全面“精精”,但要一门“通通”,整个网站制作过程都要学习,但是要有一项最突出,做到专一博百。网站制作流程网站制作流程指导每一个操作步骤指导每一个操作步骤 网站成功的有力保障网站成功的有力保障有效利用时间、提高制作效率有效利用时间、提高制作效率 便于团队合作，协同完成便于团队合作，协同完成 保障网站的科学性、严谨性保障网站的科学性、严谨性 二、网站制作流程二、网站制作流程1 1、规划设计、规划设计 2 2、实施制作、实施制作 3 3、发布维护、发布维护 二、网站制作流程二、网站制作流程1 1、规划设计、规划设计 确定主题确定主题规划分析规划分析 收集资料收集资料 撰写网站规划书撰写网站规划书 整体规划、系统分析整体规划、系统分析 文字、图片、影音素材文字、图片、影音素材 考虑周全、切实可行考虑周全、切实可行市市场场分分析析建建设设网网站站目目的的网网站站功功能能定定位位技技术术解解决决方方案案网网站站内内容容规规划划网网页页设设计计方方案案网网站站维维护护计计划划二、网站制作流程二、网站制作流程1 1、规划设计、规划设计 2 2、实施制作、实施制作 版面设计版面设计编辑排版编辑排版 后台功能实现后台功能实现 代码整合代码整合 PhotoshopPhotoshopDreamWeaverDreamWeaver前台美工前台美工 二、网站制作流程二、网站制作流程1 1、规划设计、规划设计 2 2、实施制作、实施制作 网站测试网站测试上传发布上传发布 日常维护日常维护 网站空间网站空间内容维护、版面维护内容维护、版面维护 功能测试功能测试3 3、发布维护、发布维护 链接测试链接测试流量压力测试流量压力测试响应时间测试响应时间测试如何撰写网站规划书如何撰写网站规划书一、建设网站前的分析一、建设网站前的分析 案案例例分分析析二、建设网站目的及功能定位二、建设网站目的及功能定位 三、网站技术解决方案三、网站技术解决方案 四、网站内容规划四、网站内容规划五、网页设计五、网页设计 六、网站维护六、网站维护如何撰写网站规划书如何撰写网站规划书一、建设网站前的分析一、建设网站前的分析 案案例例分分析析1.1.行业市场分析行业市场分析2.2.公司概况了解公司概况了解知彼知彼知已知已如何撰写网站规划书如何撰写网站规划书一、建设网站前的分析一、建设网站前的分析 案案例例分分析析二、建设网站目的及功能定位二、建设网站目的及功能定位 1.1.确定网站目的确定网站目的2.2.确定网站功能确定网站功能如何撰写网站规划书如何撰写网站规划书一、建设网站前的分析一、建设网站前的分析 案案例例分分析析二、建设网站目的及功能定位二、建设网站目的及功能定位 三、网站技术解决方案三、网站技术解决方案 1.1.服务器服务器2.2.服务器平台服务器平台3.3.开发技术开发技术4.4.数据库数据库自建服务器、租用虚拟主机自建服务器、租用虚拟主机操作系统类型操作系统类型开发技术类型开发技术类型数据库系统类型数据库系统类型如何撰写网站规划书如何撰写网站规划书一、建设网站前的分析一、建设网站前的分析 案案例例分分析析二、建设网站目的及功能定位二、建设网站目的及功能定位 三、网站技术解决方案三、网站技术解决方案 四、网站内容规划四、网站内容规划1.1.规划网站内容规划网站内容会员注册、信息检索、订单确认、会员注册、信息检索、订单确认、付款、跟人信息保密、相关帮助付款、跟人信息保密、相关帮助2.2.确定网站栏目确定网站栏目如何撰写网站规划书如何撰写网站规划书一、建设网站前的分析一、建设网站前的分析 案案例例分分析析二、建设网站目的及功能定位二、建设网站目的及功能定位 三、网站技术解决方案三、网站技术解决方案 四、网站内容规划四、网站内容规划五、网页设计五、网页设计 1.1.确定网站整体风格，网页色彩、版面规划确定网站整体风格，网页色彩、版面规划2.2.确定网站的布局确定网站的布局如何撰写网站规划书如何撰写网站规划书一、建设网站前的分析一、建设网站前的分析 案案例例分分析析二、建设网站目的及功能定位二、建设网站目的及功能定位 三、网站技术解决方案三、网站技术解决方案 四、网站内容规划四、网站内容规划五、网页设计五、网页设计 六、网站维护六、网站维护1.1.管理方案管理方案2.2.运营与推广方案运营与推广方案3.3.安全性措施安全性措施如何撰写网站规划书如何撰写网站规划书案案例例分分析析案例：案例：“古狗特色商品连锁店古狗特色商品连锁店”网站规划书网站规划书第一节第一节 网站建设流程网站建设流程第二节第二节 内容设计内容设计第三节第三节 板式设计板式设计第二章第二章 网站建设概述网站建设概述第四节第四节 导航及目录设计导航及目录设计第五节第五节 风格设计风格设计齐齐哈尔旅游网网站体部网站体部网站尾部网站尾部网站头部网站头部一、网站应该包括的内容一、网站应该包括的内容头部内容头部内容体部内容体部内容尾部内容尾部内容网网站站标标识识标标题题广广告告条条分分类类导导航航与与检检索索LogoTitleBannerMenuSearchBanner规格规格全全幅幅半半幅幅垂垂直直宽宽型型小小型型486x60234x60120 x240728x9088x31一、网站应该包括的内容一、网站应该包括的内容头部内容头部内容体部内容体部内容尾部内容尾部内容网网站站标标识识标标题题广广告告条条分分类类导导航航与与检检索索LogoTitleBannerMenuSearch用用户户注注册册与与登登陆陆各各类类栏栏目目相相关关站站点点链链接接LoginLinks版版权权声声明明管管理理入入口口联联系系方方式式CopyRight二、网站应包括的功能模块二、网站应包括的功能模块1 1网上电子商务系统网上电子商务系统商品目录、促销引擎、认证管理、信用管理、商品目录、促销引擎、认证管理、信用管理、支付和结算、订单处理、配送处理支付和结算、订单处理、配送处理 2 2用户认证管理系统用户认证管理系统注册信息注册信息 3 3报价系统报价系统 4 4商品检索引擎商品检索引擎5 5自助服务系统自助服务系统6 6论坛系统论坛系统 买卖双方交流平台买卖双方交流平台 7 7网上调查系统网上调查系统掌握客户需求掌握客户需求、市场走向市场走向 三、网站内容设计遵循的原则三、网站内容设计遵循的原则相关性相关性真实性真实性动态性动态性准确性准确性图像替换图像替换以以主题主题为主线展开内容设计为主线展开内容设计 对内容要对内容要严格把关严格把关 随时进行随时进行修改修改和和更新更新 尤其是尤其是报价报价、库存库存 适中地适中地使用图像代替文本使用图像代替文本 一、网站的一、网站的LOGOLOGO如何一分钟搞定如何一分钟搞定 案案例例分分析析将公司宣传彩页上的将公司宣传彩页上的公司标识公司标识扫描照搬即可扫描照搬即可二网站内容收集的技巧二网站内容收集的技巧案案例例分分析析1 1网站所有内容一律由客户负责提供网站所有内容一律由客户负责提供2 2文字材料一律要电子版文字材料一律要电子版3 3电子版的文字材料一律要通过邮箱发送，不要接受电子版的文字材料一律要通过邮箱发送，不要接受U U盘材料盘材料三确定栏目的的技巧三确定栏目的的技巧案案例例分分析析用处不大的栏目用处不大的栏目特色栏目特色栏目 每一个网站都有的栏目每一个网站都有的栏目70%70%以上网站都有的栏目以上网站都有的栏目50%50%网站有的栏目网站有的栏目加上加上不妨也加上不妨也加上询问客户的意见询问客户的意见上网浏览上网浏览10个同类网站个同类网站,例如做医院网站例如做医院网站,则浏览则浏览10个医院网站个医院网站.四、四、阿里巴巴网站内容分析阿里巴巴网站内容分析案案例例分分析析LOGO(LOGO(含标题）含标题）宣传标语宣传标语产品检索产品检索分类导航分类导航1 1、头部内容、头部内容四、四、阿里巴巴网站内容分析阿里巴巴网站内容分析案案例例分分析析2 2、体部内容、体部内容（1 1）资讯栏目）资讯栏目四、四、阿里巴巴网站内容分析阿里巴巴网站内容分析案案例例分分析析（2 2）社区栏目）社区栏目（1 1）资讯栏目）资讯栏目2 2、体部内容、体部内容四、四、阿里巴巴网站内容分析阿里巴巴网站内容分析案案例例分分析析（2 2）社区栏目）社区栏目（1 1）资讯栏目）资讯栏目2 2、体部内容、体部内容（3 3）交易栏目）交易栏目四、四、阿里巴巴网站内容分析阿里巴巴网站内容分析案案例例分分析析3 3、尾部内容、尾部内容第一节第一节 网站建设流程网站建设流程第二节第二节 内容设计内容设计第三节第三节 版式设计版式设计第二章第二章 网站建设概述网站建设概述第四节第四节 导航及目录设计导航及目录设计第五节第五节 风格设计风格设计一、版面布局的基础一、版面布局的基础左上角、页面顶部左上角、页面顶部分辨率确定分辨率确定内容与放置位置内容与放置位置 1280X10241024X768800X600高度高度宽度宽度随意随意10241000左右左右800776左右左右上部上部下部下部左侧左侧右侧右侧标志、通知新闻标志、通知新闻 轻快、积极轻快、积极 压抑、稳定压抑、稳定 轻便、自由轻便、自由 局促、庄重局促、庄重 二、网页的常用版式二、网页的常用版式左右结构布局左右结构布局左中右结构布局左中右结构布局上下结构布局上下结构布局20%30%70%80%菜菜单单用户登录用户登录流量统计流量统计联系方式联系方式主体内容主体内容1 1、结构化布局、结构化布局2 2、艺术化布局、艺术化布局二、网页的常用版式二、网页的常用版式左右结构布局左右结构布局左中右结构布局左中右结构布局上下结构布局上下结构布局菜菜单单用户登录用户登录流量统计流量统计联系方式联系方式主体内容主体内容链接等链接等1 1、结构化布局、结构化布局2 2、艺术化布局、艺术化布局二、网页的常用版式二、网页的常用版式左右结构布局左右结构布局左中右结构布局左中右结构布局上下结构布局上下结构布局主主体体标标题题1 1、结构化布局、结构化布局2 2、艺术化布局、艺术化布局二、网页的常用版式二、网页的常用版式左右结构布局左右结构布局左中右结构布局左中右结构布局上下结构布局上下结构布局最广泛最广泛比较呆板、不够灵活比较呆板、不够灵活二级页面、文章页面二级页面、文章页面1 1、结构化布局、结构化布局2 2、艺术化布局、艺术化布局二、网页的常用版式二、网页的常用版式2 2、艺术化布局、艺术化布局海报式布局海报式布局也称为也称为POPPOP布局布局页面布局善于变化页面布局善于变化综合式布局综合式布局 FLASH FLASH1 1、结构化布局、结构化布局三、版面布局的原则三、版面布局的原则1 1、根据网站的客户群选择合适的布局、根据网站的客户群选择合适的布局2 2、整体布局要遵循简洁大方的原则、整体布局要遵循简洁大方的原则 3 3、要注意视觉效果与内容翔实相结合的原则、要注意视觉效果与内容翔实相结合的原则4 4、主次分明条理清晰的原则、主次分明条理清晰的原则1、在百渡中检索相关网站，如“网上书店”。操作步骤操作步骤动动手手制制作作为某书店设计一个网站题题目目移花接木巧构思移花接木巧构思2、查看网站的头部，找到合适的用抓图工具截下，放到 Word中。3、查看网站体部的每一个模块及尾部，用抓图工具截下，放到Word中。4、最后用WORD组合成一个完整的页面，形成了整体网站 的构思。阿里巴巴网站布局分析阿里巴巴网站布局分析案案例例分分析析4、网站简洁大方、视觉效果极佳、主次分明、条理 清晰，符合网站制作的五大原则。1、网站的宽度依据1024X768像素进行设计；2、网页上面的黄金地带即放置了网站的LOGO、导航、Flash动画广告；3、网站符合结构化布局的标准，体部采用左右结构 布局，条理清晰；强化训练强化训练网站版式分析网站版式分析题目：题目：分析新浪博客、网易、齐齐哈尔大 学四个网站的版式要求：要求：1对给定网站进行仔细分析，对其结构、版式进行全面观察；2对照版面布局的原则，逐条对比分析。第一节第一节 网站建设流程网站建设流程第二节第二节 内容设计内容设计第三节第三节 板式设计板式设计第二章第二章 网站建设概述网站建设概述第四节第四节 导航及目录设计导航及目录设计第五节第五节 风格设计风格设计一、网站导航栏设计概述一、网站导航栏设计概述 1 1导航的作用导航的作用 2 2导航设计原则导航设计原则每个网页中应有一个指向主页的链接每个网页中应有一个指向主页的链接美观大方，而且要高效易用。美观大方，而且要高效易用。既直接又简单既直接又简单向导向导一、导航分类一、导航分类 全局导航全局导航局部导航局部导航主要栏目主要栏目一级目录一级目录出现在网站的每页上出现在网站的每页上次要栏目次要栏目二级以上目录二级以上目录三、网站导航栏设计方法三、网站导航栏设计方法 纯文字表现法纯文字表现法图片表现法图片表现法优点：显示速度快优点：显示速度快缺点：视觉效果差缺点：视觉效果差优点：视觉效果好优点：视觉效果好缺点：显示速度慢缺点：显示速度慢1 1、网站导航栏的表现形式、网站导航栏的表现形式三、网站导航栏设计方法三、网站导航栏设计方法 首首 页页简介类简介类如：单位概况、企业简介、走进企业如：单位概况、企业简介、走进企业如：产品介绍如：产品介绍如：论坛、留言板如：论坛、留言板2 2、网站导航栏的常见内容、网站导航栏的常见内容展示类展示类社区类社区类四、网站目录设计概述四、网站目录设计概述 网站目录是指建立网站时创建的目录，用于存放网站中所有的图片、网页、数据库等文件。站点本身的维护、未来的扩充和移植有着重要的影响。原则：原则：（1 1）分类存放、分别建立目录）分类存放、分别建立目录 分门别类，有序存放分门别类，有序存放 （2 2）目录的层次不要太深）目录的层次不要太深 不超过不超过3 3层层 （3 3）根目录下不要存放所有文件）根目录下不要存放所有文件 主页文件、流量统计的文本文件主页文件、流量统计的文本文件 （4 4）根据栏目内容建立子目录）根据栏目内容建立子目录 （5 5）在每个主栏目子目录下都建立独立的）在每个主栏目子目录下都建立独立的imagesimages目录目录 （6 6）不要使用中文目录）不要使用中文目录 （7 7）不要使用过长的目录）不要使用过长的目录 影响检索速度影响检索速度五、网站目录建设的步骤及方法五、网站目录建设的步骤及方法 1.1.建立一个用于存放网站的总目录建立一个用于存放网站的总目录如：如：MyWebMyWeb2.2.进入此网站目录，展开网站目录的建设工作进入此网站目录，展开网站目录的建设工作3.3.在网站的根目录下建立一个在网站的根目录下建立一个ImagesImages子目录子目录存放首页图像文件存放首页图像文件4.4.在网站的根目录下建立一个在网站的根目录下建立一个stylestyle子目录子目录存放样式表文件存放样式表文件5.5.在网站的根目录为每一个栏目建立对应子目录，在网站的根目录为每一个栏目建立对应子目录，每个子目录下建立每个子目录下建立ImagesImages子目录子目录存放子页面图像文件存放子页面图像文件案案例例分分析析1 1、常用栏目的英文拼写、常用栏目的英文拼写 网站导航 Sitemap 公司简介Profile or Company公司荣誉 Glories 企业文化Culture组织机构 organization 经理致辞 Managers oration发展历程 Development History 产品展示 Product合作加盟 Join In Cooperation 技术力量 Technology 工程案例 Engineering Projects 业务范围 Business Scope分支机构 Branches 供求信息 Supply&Demand产品销售 Sales 联系我们 Contact Us Contact Us信息发布 Information 返回首页 Homepage 分类浏览 Browse By Category 电子商务 E-business行业新闻 Trade News 客户留言 Customer Message客户服务 Customer Service 新闻动态 News&Trends销售热线 Sales Hot-Line 论坛 Forum在线订购 On-line order 招聘 Join Us社区 Community 业务介绍 Business Introduction在线调查 Online Inquiry 下载中心 Download会员登陆 Member Entrance 意见反馈 Feedback常见问题 FA 教育培训 Education&Training在线交流 Online Communication 专题报道 Special Report案案例例分分析析1 1、常用栏目的英文拼写、常用栏目的英文拼写（1）登陆http:/2 2、网上在线翻译、网上在线翻译（2）在搜索引擎网站上搜索“在线翻译”案案例例分分析析制作敦煌网的目录结构制作敦煌网的目录结构动动手手制制作作1敦煌网的敦煌网的LOGO及导航栏及导航栏 制作敦煌网的目录结构制作敦煌网的目录结构动动手手制制作作2敦煌网的目录结构设计敦煌网的目录结构设计 首页图像文件目录首页图像文件目录样式文件目录样式文件目录我的我的DhgateDhgate栏目栏目我的我的DhgateDhgate的图像文件夹的图像文件夹 功能与服务栏目功能与服务栏目 功能与服务的图像文件夹功能与服务的图像文件夹 热门求购栏目热门求购栏目 外贸通栏目外贸通栏目 热门求购的图象文件夹热门求购的图象文件夹 外贸通的图像文件夹外贸通的图像文件夹 黑龙江电教馆 黑龙江消费网 齐齐哈哈尔大学研究生处 上海家用电器研究所实验工厂 第一节第一节 网站建设流程网站建设流程第二节第二节 内容设计内容设计第三节第三节 板式设计板式设计第二章第二章 网站建设概述网站建设概述第四节第四节 导航及目录设计导航及目录设计第五节第五节 风格设计风格设计一、网站风格设计概述一、网站风格设计概述 1 1、什么是网站的风格、什么是网站的风格2 2、如何树立网站的风格、如何树立网站的风格 网站的风格是指站点的整体形象给浏览者的综合感受，是这个站点的与众不同之处。网站标志、色彩、字体、标语、版面布局、浏览方式、交互性、文字网站标志、色彩、字体、标语、版面布局、浏览方式、交互性、文字(1)(1)色调色调(2)(2)简繁简繁(3)(3)字体的使用字体的使用(4)(4)站内风格的统一站内风格的统一符合网站的内容、有独特的创意符合网站的内容、有独特的创意 把握好简洁与花哨尺度把握好简洁与花哨尺度 标准统一，正文的字体为宋体标准统一，正文的字体为宋体1212像素（五号字）像素（五号字）二、网站色彩搭配二、网站色彩搭配 1 1、色彩搭配概述、色彩搭配概述2 2、主色调的选择、主色调的选择粉色粉色蓝色蓝色红色红色绿色绿色黑色黑色企业、事业单位的网站企业、事业单位的网站政府网站、在重大节日期间改版为红色政府网站、在重大节日期间改版为红色食品、农业类网站、购物类、儿童类网站食品、农业类网站、购物类、儿童类网站科幻、游戏类网站科幻、游戏类网站女性、儿童类网站女性、儿童类网站主色调主色调:网站使用最多的颜色称为主色调网站使用最多的颜色称为主色调辅色调辅色调:与主色调配套的其它颜色与主色调配套的其它颜色三、网站文字使用三、网站文字使用 1 1、字体的运用、字体的运用2 2、字号的设置、字号的设置正文字体正文字体 非标准字体的使用非标准字体的使用 标题字体的使用标题字体的使用 栏目字体栏目字体 宋体宋体 指黑体、宋体、楷体、仿宋体以外指黑体、宋体、楷体、仿宋体以外的字体，以图形的形式表现出来的字体，以图形的形式表现出来 不得使用行楷等过于活泼的字体不得使用行楷等过于活泼的字体 黑体，用图形的方式，搭配一些小图标黑体，用图形的方式，搭配一些小图标 正文字号正文字号 大标题大标题 栏目标题栏目标题 1212像素、像素、1010磅、五号字磅、五号字 不超过不超过3636像素像素 16161818像素、三号、四号、小四号像素、三号、四号、小四号 三、网站文字使用三、网站文字使用 3 3、行间距的设置、行间距的设置1.21.2倍倍1.51.5倍行距倍行距宋体宋体1212像素正文文字，行间距为像素正文文字，行间距为1818像素像素总结总结字体字体 字号字号 字色字色 行距行距正文：宋体正文：宋体 题目：方方正正的，如黑体题目：方方正正的，如黑体 正文一律用黑色正文一律用黑色 标准文字的为标准文字的为1.51.5倍，如倍，如12PX12PX字，用字，用18PX18PX行距行距正文正文12px,12px,栏目标题栏目标题16-18PX16-18PX，大标题，大标题=36=36一、初学者网站配色技巧一、初学者网站配色技巧案案例例分分析析找同类网站做参考找同类网站做参考二、红、绿、蓝三基色使用的秘密二、红、绿、蓝三基色使用的秘密案案例例分分析析不要使用纯粹的单一颜色，不要使用纯粹的单一颜色，在每一种颜色中掺杂少许白色。在每一种颜色中掺杂少许白色。典型网站风格剖析典型网站风格剖析 设计剖析设计剖析动动手手制制作作中国建材网http:/www.c-题题目目 中国建材网，整体效果极佳。内容丰富，又井然有序，色彩斑斓，又不显花哨。两侧广告条的运用恰到好处，蓝色为主的色调配以红色点缀，平和中又突显重点，动画的运用再一次增强了整体效果。一、网站的整体风格一、网站的整体风格（1）主色调。本网站以蓝色为主色调，LOGO、导航、栏目标题均为蓝色，是标准的企业类网站配色方案，整体效果淡雅而清新。（2）辅助配色。该网站使用红色做为辅色调。吸引了浏览者的视觉，增强 了广告效应，而且红色与蓝色巧妙地进行了搭配，整体效果十分理想。二、网站颜色的使用二、网站颜色的使用 无论是标题还是正文都符合文字使用的规则，给人的感觉即标准又规范。三、网站文字运用三、网站文字运用