第1章商务网页设计导引

1、商务网页设计与制作商务网页设计与制作商务网页设计导引第一章了解网页的基本构成及主要元素了解常见的商务网站类型掌握客户需求分析的途径和方法能合理规划设计网站栏目。学习目标 第一节第一节 商务网站概述商务网站概述 第二节第二节 客户需求分析客户需求分析第三节第三节 网站栏目规划网站栏目规划学习内容 第一章商务网站概述商务网站概述客户需求分析网站栏目规划第一节第一节 商务网站概述商务网站概述商务网站，是经营性组织为实现其商业目标而建立的网站。准确表达和有效传递企业组织的商务诉求,是这类网站网页设计时要考虑的重点和难点。 第一章商务网站概述商务网站概述客户需求分析网站栏目规划一、一、商务网站类型商务网

2、站类型依据商务诉求侧重点的不同，可分为以下几类： 第一章商务网站概述商务网站概述客户需求分析网站栏目规划企业网站行业网站网上商城资讯网站1、展示型企业网站、展示型企业网站 第一章商务网站概述商务网站概述客户需求分析网站栏目规划2、功能型企业网站、功能型企业网站 第一章商务网站概述商务网站概述客户需求分析网站栏目规划3、综合型行业网站综合型行业网站 第一章商务网站概述商务网站概述客户需求分析网站栏目规划4、垂直型行业网站垂直型行业网站 第一章商务网站概述商务网站概述客户需求分析网站栏目规划5、综合型网上商城综合型网上商城 第一章商务网站概述商务网站概述客户需求分析网站栏目规划6、垂直型网上商城垂

3、直型网上商城 第一章商务网站概述商务网站概述客户需求分析网站栏目规划7、品牌型网上商城品牌型网上商城 第一章商务网站概述商务网站概述客户需求分析网站栏目规划8、门户类门户类资讯资讯网站网站 第一章商务网站概述商务网站概述客户需求分析网站栏目规划9、垂直资讯类网站垂直资讯类网站 第一章商务网站概述商务网站概述客户需求分析网站栏目规划10、分类信息网站分类信息网站 第一章商务网站概述商务网站概述客户需求分析网站栏目规划二、二、网页构成网页构成1、网页的空间结构网页的空间结构（1）网站LOGO（2）网站名称（3）导航条（4）Banner（5）网页正文区（6）网页底部 第一章商务网站概述商务网站概述客

4、户需求分析网站栏目规划2、网页的逻辑结构、网页的逻辑结构网页的基础 网页的条理 网页的显示 网页的互动 第一章商务网站概述商务网站概述客户需求分析网站栏目规划3、网页组成元素、网页组成元素文字文字图片图片动画动画背景音乐背景音乐视频视频表单表单脚本程序脚本程序 第一章商务网站概述商务网站概述客户需求分析网站栏目规划三、三、网页网页风格风格要点：要点： 网页风格就相当于网页的外衣，是指网页设计时使用的文字、颜色、布局等的组合搭配给人带来的视觉印象。 商务网页并不是纯粹的艺术设计作品，应围绕准确表达商务诉求、能被大多数浏览者接受和理解来确定页面风格。 第一章商务网站概述商务网站概述客户需求分析网站

5、栏目规划 http:/ http:/ http:/ 大幅用图，且画面精美，颜色鲜艳，文字样式及图片排版活泼、优美。 第一章商务网站概述商务网站概述客户需求分析网站栏目规划2、欧版风格、欧版风格特点：特点： 页面内容部分结构比较清晰，板快分明，页面颜色的使用主次分明，有较强的平面感。 第一章商务网站概述商务网站概述客户需求分析网站栏目规划3、中式风格、中式风格特点：特点： 气势磅礴、高贵典雅、独具韵味，页面具有平衡、和谐、庄重之美。 第一章商务网站概述商务网站概述客户需求分析网站栏目规划4、其它风格（、其它风格（1）Web2.0风格风格 ： 版块之间划分非常清晰，界限非常分明，页面简洁规整，以非

6、彩色搭配彩色为主。网页的logo、banner、导航区界线分明。 第一章商务网站概述商务网站概述客户需求分析网站栏目规划4、其它风格（、其它风格（2）印刷体风格印刷体风格 ： 采用衬线字体、大标题、多列式布局、大幅配图，页面具有强烈的平面媒体效果。 第一章商务网站概述商务网站概述客户需求分析网站栏目规划4、其它风格（、其它风格（3）简约风格简约风格： 大量留白，仅保留最基本的内容元素，从而让展示出来的元素具有最大的视觉冲击力 第一章商务网站概述商务网站概述客户需求分析网站栏目规划【讨论】浏览长职院网站，说一说它的设计风格是什么？技能训练1-1 访问你所在地区一家知名企业的网站，分析网站首页的空

7、间结构，并将相应的分析结论填入表1-1中。 第一节第一节 商务网站概述商务网站概述 第二节第二节 客户需求分析客户需求分析第三节第三节 网站栏目规划网站栏目规划学习内容 第一章商务网站概述客户需求分析客户需求分析网站栏目规划【案例】： 近年来，浏阳市委、市政府不断为企业探索创新营销方式。一方面着手建立全球化营销网络，推行整体营销策略。目前已与世界100多个国家和地区建立了长期性的合作关系。另一方面以电子商务为主导，采用现代化信息手段实行网上直销。此前所做电子商务就是把产品拍成数码图片，在商务网站发布供求信息和广告。现在越来越多的企业和个人在网上开店甚至直接建立供求信息网站。据某烟花网的总经理透

8、露，自网站改版半年多的时间以来，已有2600多位英文会员、2300多位中文会员，他们在网上做生意、上网卖产品、上网买原材料、上网找客户等等。【讨论】 企业建立网站，如何设计适合的网页？客户导向客户导向第二节第二节 客户需求分析客户需求分析客户需求分析，即分析客户建立网站想要解决的问题或要达到的目标，以及相关的条件和要求。作为网页设计人员，在分析客户的需求时，关键是要明确客户要建立的网站类型，并了解客户想要通过网站展示的信息。 第一章商务网站概述客户需求分析客户需求分析网站栏目规划一、行业背景分析一、行业背景分析 -PEST方法方法 第一章商务网站概述客户需求分析客户需求分析网站栏目规划-波特五

9、力模型分析波特五力模型分析 第一章商务网站概述客户需求分析客户需求分析网站栏目规划二、典型网页分析二、典型网页分析 1、典型网页的选择、典型网页的选择 什么样的网页是我们设计时可以参照的网页？参考标准：用户体验度（竞争对手）（竞争对手） 第一章商务网站概述客户需求分析客户需求分析网站栏目规划用评价验度分析用评价验度分析 第一章商务网站概述客户需求分析客户需求分析网站栏目规划2、网页表现形式分析、网页表现形式分析 客户所在企业与竞争对手在目标受众群体、产品或服务特性、业务模式等方面存在着一定的相似性，甚至一致性。其典型竞争对手网页的风格是设计师可以认真考察和借鉴的对象。 重点分析考察两个方面：网

10、页配色网页布局 第一章商务网站概述客户需求分析客户需求分析网站栏目规划3、网站内容分析、网站内容分析 典型的竞争对手网站，可以说就是客户想要建立的网站内容结构的蓝本。通过分析其内容结构及页面内容组织，可以为与客户进行进一步沟通、明确需求、给出资料搜集清单等工作给出明确的线索。 重点分析考察两个方面：网站内容结构网页内容组织 第一章商务网站概述客户需求分析客户需求分析网站栏目规划 网站内容结构是指网站频道、栏目、子栏目、专题等组成结构。 中小型商务网站往往去掉频道的概念，统称为栏目结构。 网站内容结构网站栏目结构网站栏目结构 第一章商务网站概述客户需求分析客户需求分析网站栏目规划 网页的内容组织

11、是指对网页需要呈现的内容进行信息序化和优化，最终确定在合适的位置放置合适的内容，准确地向浏览者传递要表达的商务诉求。网页内容组织三、三、网页原型分析网页原型分析 第一章商务网站概述客户需求分析客户需求分析网站栏目规划网页原型是网页设计最终作品的模拟图，可以有以下形式： 使用笔和纸直接绘制简单的示意蓝图 在word、Excel中创建简单的框架图 基于竞争对手网页制作的网页原型 使用专业工具制作的网页原型 通过网页原型，重点要与客户进行深入的探讨几个问题： 1、网站建设的目的、网站建设的目的 ？2、网站服务对象？、网站服务对象？ 3、网站产品和服务定位？、网站产品和服务定位？ 技能训练1-2 一网

12、全城一网全城作为东北三省首家区域性电子商务平台，集线上交易、线下物流配送、电商综合服务为一体的电子商务平台。http:/ 仔细浏览和分析其首页栏目内容，对其主要功能进行在线访问，给出体验度分析总结。 第一节第一节 商务网站概述商务网站概述 第二节第二节 客户需求分析客户需求分析第三节第三节 网站栏目规划网站栏目规划学习内容 第一章商务网站概述客户需求分析网站栏目规划网站栏目规划第三节第三节 网站栏目规划网站栏目规划网站栏目的规划，其实也是对网站内容的高度提炼。在明确了网站的商务诉求后，要对网站的定位形成一个清晰的认识，在此基础上，对网站的内容进行分类，用最简练的语言提炼出网站每一个部分内容，以

13、形成清晰的栏目结构。 第一章商务网站概述客户需求分析网站栏目规划网站栏目规划示例：示例： 第一章商务网站概述客户需求分析网站栏目规划网站栏目规划一级栏目一级栏目二级栏目二级栏目内内 容容公司概况公司概况公司介绍公司介绍介绍企业的一些基本情况、公司的历史等信息。组织机构组织机构公司组织机构拓扑图领导致辞领导致辞公司的证书发展规划发展规划领导致辞及领导照片公司发展目标及发展计划企业文化企业文化企业理念及员工风采等新闻中心新闻中心公司要闻公司要闻公司最新动态、活动行业信息行业信息行业相关资讯产品展示产品展示主营产品主营产品与其它竞争对手相比，最具竞争力的产品最新产品最新产品公司最新开发研制的产品产品

14、系列产品系列完整的产品系列展示客服中心客服中心常见问答常见问答用户常见的各类问题在线问答售后服务售后服务各地营销中心及售后服务中心联系方式下载中心下载中心支持word、excel、pdf、zip等产品说明或相关文件下载人才招聘人才招聘人才战略人才战略公司的人才战略，人才发展计划等内容的发布招聘职位招聘职位具体的招聘信息，能以表格形式在线填写并提交应聘信息联系我们联系我们联系方式联系方式公司联系电话和联系地址介绍一、一、栏目设置的基本原则栏目设置的基本原则 第一章商务网站概述客户需求分析网站栏目规划网站栏目规划原则一：简洁明了、层次清晰原则一：简洁明了、层次清晰原则二：突出重点、合理定位原则二：

15、突出重点、合理定位原则三：以客为尊、方便浏览原则三：以客为尊、方便浏览一、一、栏目设置的基本原则栏目设置的基本原则 第一章商务网站概述客户需求分析网站栏目规划网站栏目规划1、突出网站主题、突出网站主题 2、开门见义、开门见义3、层次分明、层次分明 4、设置互动交流类栏目、设置互动交流类栏目 5、提供下载类栏目、提供下载类栏目策划要点：策划要点：二、网站栏目的策划二、网站栏目的策划 第一章商务网站概述客户需求分析网站栏目规划网站栏目规划 网站栏目的策划，首先要考虑网站的定位、网站的方向是什么。当确定了一个方向后，就可以围绕这个方向去搜集相关资料、寻找相关文章，并整理为相应的栏目。 在确定网站栏目

16、结构时，既要考虑网站栏目的层次结构，还应设计好网站栏目的链接结构。1、网站内容定位、网站内容定位 第一章商务网站概述客户需求分析网站栏目规划网站栏目规划 网站内容定位，要考虑清楚的三个问题：网站最重要的信息是什么？哪些信息可以提升浏览者的信任度？目标受众群体可能还想了解的信息有哪些？ 第一章商务网站概述客户需求分析网站栏目规划网站栏目规划强调理性诉求的网站，以事实为依据，以产品或技术为核心，强化产品或技术内容的视觉冲击力和吸引力，网站栏目的设置也以此线索组织。 第一章商务网站概述客户需求分析网站栏目规划网站栏目规划强调感性诉求的网站，大多以服务为导向、以树立企业形象为主。这一类型的网站，一定要注重网站的风格设计和创意，以感性诉求为主。网站栏目的设置要着意渲染或营造一种特有的企业文化或团队氛围，来突出产品或服务的价值感。2、网站栏目结构、网站栏目结构 第一章商务网站概述客户需求分析网站栏目规划网站栏目规划三级栏目层次结构 ：2、网站栏目结构、网站栏目结构 第一章商务网站概述客户需求分析网站栏目规划网站栏目规划树形链接结构树形链接结构2、网站栏目结构、网站栏目结构 第一章商务网站