《电子商务网页设计》课件-项目一 电子商务网站的规划与设计

项目一

电子商务网站的规划与设计1学习任务1 电子商务网站结构设计学习任务2 电子商务网站版面设计ONTENTSC目录2

电子商务网站结构设计013知识目标1. 熟悉电子商务网站建设流程。2. 了解电子商务网站类型。3. 掌握网站物理结构、目录结构和逻辑链接结构。技能目标1. 能够全面收集客户信息，精准分析客户需求。2. 能够根据客户需求，设计出既实用又符合用户期望的网站结构。

4

某鲜花店为拓展业务，决定创建“网上花店”网站，借助电子商务模式，提供网上鲜花销售、快递配送及订单管理等一站式服务，以期促进鲜花市场的进一步发展。本任务，我们将围绕行业特性、企业状况、市场态势及客户需求进行深入分析，充分挖掘“网上花店”网站所需功能，并对其进行合理规划与科学设计。5一、电子商务网站建设流程构建一个成功的电子商务网站并非易事，需要深思熟虑的规划和细致入微的建设过程。从深入的需求分析、精心的规划设计，到严谨的开发建设，再到最终的测试上线以及后续的运营维护，每一个环节都至关重要。电子商务网站建设流程如下图所示。6电子商务网站建设流程1. 需求分析首先要明确电子商务网站的具体需求，包括网站应具备的功能、页面设计风格、整体架构以及系统性能要求等。同时，进行深入的市场调研和竞争对手分析也是不可或缺的环节，这可以确保网站不仅满足用户需求，还能在激烈的市场竞争中脱颖而出。2. 规划设计在深入分析需求后，应根据所得结论来制定网站的整体规划和详细设计方案。这一过程涉及创建原型图、草图等多种设计初稿，为网站的具体构建提供明确指导。73. 开发建设进入开发阶段，就要进行细致的编码工作。在此过程中，要选择最适合项目需求的技术工具，精心编写程序代码，从而确保电子商务网站的每一个功能和模块都能按照设计要求完美实现。4.测试上线在网站开发完成后，需要进行一系列严格的测试，包括功能测试、兼容性测试以及性能测试等，旨在确保网站的稳定性和可靠性，以期在上线后能够无故障运行。895.运营维护网站正式上线后，需要进行日常的运营管理和维护工作，包括发布新闻、定期更新产品、及时处理用户订单等任务。同时，也要重视网站的安全问题，采取有效措施来防范黑客攻击，确保网站数据的安全。二、电子商务网站类型根据电子商务平台的不同经营性质，可以将其划分为多种类型。具体来说，按照交易主体的不同，可以将电子商务平台划分为六种类型，分别是B2B（企业对企业）、B2C（企业对消费者）、C2C（消费者对消费者）、O2O（线上到线下）、B2G（企业对政府）以及C2G（消费者对政府）。目前B2B、B2C和C2C是市场上主流的电子商务网站类型。10111. B2B（Business-to-Business）类型B2B即企业对企业的电子商务模式，专为企业间网上交易设计。它不仅提供供求信息服务和附加信息服务，还包括与交易相关的配套服务，并具备客户管理功能。这一模式主要依托互联网进行产品、信息和服务的交流与交易。通过这类网站，企业可以发布信息、查询所需内容、展示产品以及进行广告宣传。它为企业提供了一个平台，使他们能够直接促成大规模交易。此外，企业间还能通过网络进行协商，签署电子合同，并完成在线交易。阿里巴巴网是B2B模式的代表，其首页如下图所示。12阿里巴巴网2. B2C（Business-to-Customer）类型B2C即企业对消费者的电子商务模式，是企业直接向消费者销售产品和提供服务的商业零售方式。在此模式下，企业为普通消费者提供一系列在线功能，包括商品查询、商品展示、商品浏览、信息发布、用户登录以及前台购物等。通过这些功能，商家和消费者能够顺利完成各类商品交易。当当网是B2C模式的代表，其首页如下图所示。1314

当当网153. C2C（Customer-to-Customer）C2C即个人对个人的电子商务模式。在这种模式下，电子商务平台提供在线交易的市场，卖方可以在平台上发布商品信息并由平台展示，买方则可以浏览并选择自己所需的商品进行竞价或直接购买。简而言之，这是一个允许个人之间进行商品交易的平台。拍拍网是C2C模式的代表，其首页如下图所示。16拍拍网三、客户信息收集1. 企业自身信息需要了解企业建立网站的动因，比如是为了塑造企业形象、推广产品、开展电子商务交易，还是旨在打造行业性质的交流平台；同时，还需了解这是否是企业发展的基本需求，抑或是为了市场进一步开拓的策略延伸；此外，还需要了解企业概况，如企业的组织结构、销售模式、当前的信息化程度、对设计的特定要求，以及产品的独特性等。172. 市场信息需要掌握当前行业的整体状况，深入了解竞争对手的网站设计及其策划理念，具备哪些功能以及这些功能在实际运营中的作用。3. 目标客户信息充分了解目标客户信息，包括他们的年龄层、性别比例、学历分布、职业特点、个性特征、行为习惯、兴趣偏好、收入水平，以及他们所处的地理位置等详细信息。这些数据将为网站的精准定位和个性化服务提供有力支持。18四、客户需求分析通过深入分析前期收集的客户信息，我们可以明确客户建立网站的具体目的，即其业务需求，以及客户期望网站能够实现的功能和包含的模块。除此之外，我们还会进一步了解客户的其他特殊要求。需求分析的主要内容如图所示。19需求分析的主要内容1. 业务需求业务需求是指在开展项目或解决问题之前，对业务方面提出的需求进行深入研究和细致分析的过程。其分析结果对于指导网站的设计、开发以及其他后续活动具有重要的指导意义。2. 功能需求功能需求分析则是对用户的需求进行深入挖掘和理解，从而明确在网站开发过程中前台和后台应具备的功能。203. 非功能需求非功能需求是指那些不直接关联网站具体功能的需求，但它们对网站的总体特性有着重要影响，如网站的安全性、响应时间等。4. 接口需求接口需求则主要关注数据传输的类型、格式、传输协议以及交互方式等，以确保各个模块之间能够实现准确高效的数据交换。21五、网站物理结构1. 网站物理结构的概念网站物理结构，即网站的实际存储结构，它反映了网站目录及所包含文件的真实存放位置。简而言之，物理结构就是网站的实际目录结构，它揭示了文件在服务器上的物理地址。一般来说，只有静态网站才具有明确的物理结构，而动态网站或伪静态网站则不具有物理结构。22232. 网站物理结构的类型网站物理结构主要分为扁平式物理结构和树形物理结构两种。（1）扁平式物理结构扁平式物理结构见下图主要适用于小型网站。若大型网站采用此结构，并将大量网页文件直接置于根目录下，将会导致文件查找和维护变得异常烦琐。这种结构的优势在于其清晰性和简洁性，对于搜索引擎优化极为有利。

扁平式物理结构24（2）树形物理结构对于规模较大的网站，通常需要采用两至三层甚至更多层级的子目录来确保网页能够正常存储。这种多层级的目录结构被称为树形物理结构，其特点是在根目录下进一步细分为多个频道或子目录。在每个子目录下，再存储与该目录相关的内容或商品网页如下图所示，这种结构有助于更好地组织和管理大量的网页内容。

树形物理结构25六、网站目录结构1. 

网站目录结构的概念网站目录结构指的是在建立网站时所设置的文件目录。尽管目录的质量对浏览者没有直接影响，但对于网站管理者而言却至关重要。它直接关系到站点的维护管理、后期的修改以及迁移等工作的便利性和效率。下表展示了网上商城的典型目录结构。26网上商城的典型目录结构272. 网站目录的建立原则（1）避免将所有文件都存放在根目录下将所有文件都存放在根目录下会导致文件管理混乱，降低工作效率，同时上传速度也会受影响。（2）根据主菜单栏目建立子目录根据主菜单栏目建立子目录，不仅方便文件查找，还有利于网站的高效运行。（3）根据更新频率管理次要栏目对于不需要频繁更新的栏目，应独立设置子目录，以便于管理和维护。28（4）各目录下设立独立的图片文件夹在网站维护过程中，图片管理往往较为复杂。建议在每个物理或逻辑目录下都创建一个独立的图片（image）文件夹。（5）控制目录的层级深度为了简化管理和维护工作，同时确保搜索引擎能够轻松检索网站内容，从而有利于网站的推广和优化，应避免创建过深的目录结构。（6）避免使用中文命名目录使用中文命名目录容易导致各种问题。建议使用英文命名目录。29七、网站逻辑链接结构1. 网站逻辑链接结构的概念网站逻辑链接结构，也称链接结构，主要指的是网站页面之间相互链接的关系。与物理结构不同，逻辑链接结构是由网站页面之间的相互链接关系所决定的，而物理结构则取决于网站页面的实际存储位置。302. 网站逻辑链接结构的基本形式（1）树状链接结构（一对一）在树状链接结构中，用户浏览页面时需逐级深入，同样也需要逐级返回，其结构如图所示。这种结构的优点在于其条理性强，访问者能够清晰地知道自己的当前位置，从而避免“迷路”的情况；其缺点在于浏览效率相对较低。

树状链接结构31（2）星状链接结构（一对多）在每个网页中设置一个共享的链接中枢，确保所有网页都能通过这个中枢相互链接。在这样的设计中，各个网页之间没有明显的层级划分，如下图所示。这种布局提供了灵活的导航方式，使得用户可以轻松地在不同页面之间跳转。

星状链接结构电子商务网站版面设计0232知识目标1. 了解网页构成、网站风格、网页结构的类型。2. 掌握电子商务网站页面构成。3. 熟悉网站页面色彩搭配。技能目标能够根据需要合理地设计网站风格、页面布局和色彩搭配。3334

网页的版面设计和色彩运用对于网站的功能性和视觉吸引力具有直接的影响。在此任务中，我们要根据“网上花店”的具体功能来明确网站的整体风格，并据此确定首页、商品列表页以及商品详情页的布局结构和色彩配置。这些设计既要满足电子商务网站标准，又要兼具美观与实用性。参考效果如下图所示。35商品列表页效果

首页效果

36商品详情页效果一、网页构成网页融合了多样元素，包括文本、图像、音频和视频等。文本，作为网页信息的核心传递者，其设计必须清晰易读，同时与网页的整体风格和布局和谐相融。图像，包括照片、图标以及图表，是网页中不可或缺的视觉元素。它们不仅需要与网页的主题和内容紧密相连，还需要兼顾加载速度，以确保网页性能的优化。随着多媒体技术的进步，视频和音频元素在网页中的应用愈发普及，它们以更直观、生动的方式呈现内容，有效吸引并维持用户的注意力。37二、网站风格网站的外观、内容和文字等方面共同塑造了其独特风格。这种风格可能体现在色彩运用、技术应用或交互方式上，使得浏览者能够清晰地识别出这是该网站的独特标志。根据风格与功能的不同，网站可以大致分为功能型网站和展示型网站两大类。功能型网站是指那些为实现特定功能或提供专门服务而设计的网站。展示型网站主要是指以展示企业产品与服务为主要功能的网站。它们通常包含企业产品与服务介绍、企业概况、企业文化阐释、企业荣誉与资质展示等内容。38三、网页结构的类型1. “国”字型布局“国”字型布局的典型特征为在页面顶端设置logo（标志）、导航栏以及横幅广告。紧接着的下方区域是网站的主体内容，该部分常被分为左侧、中间和右侧三个主要区块见下图。页面底部则用来展示网站的基本信息、联系方式、版权声明等内容。这种布局结构常见于大型网站，便于系统地罗列和展示大量的信息与产品。3940“国”字型布局2. 拐角型布局拐角型布局与“国”字型布局在整体构思上较为相似，仅在细节表现上略有差异在页面上方，同样醒目地展示logo、导航栏和横幅广告。页面中间部分采用左右分栏设计，其中左侧设置一列相对较窄的菜单或快捷链接，右侧则是较为宽敞的内容展示区域见下图所示。页面底部依旧展示网站的辅助性信息和版权声明等内容。这种布局方式因其灵活性和实用性，也被广泛采用。4142拐角型布局3. 左右框架型布局左右框架型布局的页面设计，其典型特征是在页面左侧设置一列清晰的文字链接，便于用户快速导航。在这一列的顶部，通常会放置主导航栏，以便用户轻松跳转到网站的不同部分。有时，还会在导航栏上方添加醒目的标题或logo，以增强品牌识别度。页面右侧则主要用于展示正文内容或网站的主体信息见下图所示。这种布局方式因其能够提供良好的用户体验和便捷的导航功能，在论坛设计中尤为常见。4344

左右框架型布局4. 上下框架型布局上下框架型布局与左右框架型布局在结构上相似，主要区别在于元素排列的方向。在上下框架型布局中，文字链接被置于页面上方，这样的设计便于用户一眼就能找到所需导航。页面下方则主要用于展示正文内容和网站主体信息见下图所示。这种布局为用户提供了直观且高效的浏览体验。4546上下框架型布局5.

标题文本型布局标题文本型布局方式，其设计理念与杂志排版风格颇为相似。在这种布局中，页面最上方醒目地展示标题或类似的引导性元素，紧接着的中间部分则是翔实的正文内容见下图所示。页面最下方通常会设置一些版底信息，如联系方式、版权声明等。这种布局方式由于能够清晰地引导用户关注核心内容，并提供必要的辅助信息，常见于搜索引擎类网站和注册页面。4748

标题文本型布局6. 封面型布局封面型布局的页面，其特色在于直接采用富有设计感的图像或动画作为醒目的网页背景。页面上通常仅配置一个简洁的“进入”按钮，该按钮即为页面的全部内容。这种布局风格极具开放性和自由度，若能巧妙运用，将为用户带来极致的视觉享受，如下图所示。4950封面型布局四、电子商务网站页面分类1. 首页首页是展示最新、最热门信息的窗口，它集中了网站的所有核心卖点。同时，首页还承担着引导用户通过导航菜单访问网站其他栏目的重要任务。在首页的顶部中央位置，通常会设置主导航菜单，这样的设计便于用户快速、便捷地进入他们感兴趣的列表页面，见下图所示5152华为商城首页2. 商品列表页商品列表页是一个集中展示多款产品的聚合页面。用户可以通过在首页主导航中点击相应的导航菜单项，轻松进入商品列表页。该页面根据网站的整体定位，对提供给用户的内容进行了细致的分类和整合。每一个列表页都有其独特的定位，同时，它们都服务于网站的核心定位。在这样的页面上，商品按照不同的系列进行展示，内容通常按时间顺序排列，方便用户便捷地查找更多同类信息，具体页面见下图所示。5354

华为商城商品列表页3. 商品详情页商品详情页，又称商品展示页，是用户获取特定商品详细信息并作出购买决策的关键页面。它必须提供详尽、清晰的商品信息，包括购买选项和用户交互功能。当用户从商品列表页点击某个具体商品时，就会进入该商品详情页。一个完善的商品详情