《精编》电子商务网站的内容设计与开发

《《精编》电子商务网站的内容设计与开发》由会员分享，可在线阅读，更多相关《《精编》电子商务网站的内容设计与开发（69页珍藏版）》请在金锄头文库上搜索。

1、1 第5章电子商务网站的内容设计与开发 5 1网站内容设计的流程5 2网站信息结构的设计5 3网页的可视化设计5 4首页设计5 5其他网页的设计5 6网页制作 2 5 1电子商务网站内容设计的流程 5 11网站内容设计的原则 企业要在因特网上开展电子商务 就应该在网站的内容设计方面遵循一些基本原则 一般来说 最起码应考虑到以下三个方面 信息内容 访问速度和页面美感 以下分别从这三个方面来说明 3 1 新 精 专的信息内容 信息内容永远处于第一位 内容设计要有组织 及时更新信息内容 2 安全快速的访问 提高浏览者的访问速度 要有安全良好运转的硬件和软件环境 遵循 三次点击 原则 即网站的任何信息

2、都应在最多三次点击之内得到 4 3 美感十足 方便用户访问的页面 提供交互性 完善的检索和帮助功能 方便用户访问和购买 5 1 2网站内容设计流程 通常 电子商务网站的内容设计流程都必须经过如下步骤 5 收集关于该网站的一些关键信息 网站信息结构的设计 网站运行环境的选择 其具体选择标准和原则可参见第三章内容 进行网页可视化设计 网页制作 通常情况下 在网页制作过程中 需利用一定的web数据库技术进行信息和数据的动态发布和提供 网站的维护和管理 见课本p110图5 1 6 5 2电子商务网站信息结构的设计 一般来说 电子商务网站建设与企业的经营战略 产品特性 财务预算以及当时的建站目的等因素有

3、着直接关系 5 21网站信息内容及其功能模块 尽管每个电子商务网站规模不同 表现形式各有特色 但从经营的实质上来说 不外乎信息发布型和产品销售型这两种基本形式 一个综合性的网站可能同时包含了这两种基本形式 7 信息发布型的网站仍然是电子商务网站的主流形式 信息发布型网站中信息结构的设计主要是从以下几个方面来进行的 见书p112图5 2 公司概况 员工信息 产品目录 产品价格表 产品搜索 公司动态 网上订购 销售网络 售后服务 技术支持信息 8 联系信息 财务报告 辅助信息 用来弥补产品品种比较少 网页内容单调等不足 其他内容信息 比如反馈表 公司人才招聘信息 到其他相关站点的链接 增值服务 开

4、辟网络环境下的新服务项目 以增加其服务功能 吸引网民再次光临 9 在规划设计一个具体网站内容模块和功能时 主要应考虑企业本身的目标和所决定的网站功能导向 让企业上网成为整体战略的一个有组成部分 让网站真正成为有效的品牌宣传阵地 有效的营销工具 或者有效的网上销售场所 5 2 2网站链接结构的设计 网站链接结构的原则是 用最少的链接 使得浏览最有效率 10 一般地 建立网站的链接结构有如下两种基本方式 树状链接结构 一对一 类似dos的目录结构 首页链接指向一级页面 一级页面链接指向二级页面 立体结构像一棵树 优点 条理清晰 不会 迷路 缺点 浏览效率低 一个栏目下的子页面到另一个栏目下的子页面

5、 必须绕径首页 11 2 网状链接结构 一对多 类似网络服务器的链接 每个页面相互之间都建立有链接 立体结构像一张网 优点 浏览方便 随时可以到达自己喜欢的页面 缺点 链接太多 容易 迷路 12 这两种基本结构都只是理想方式 在实际的网站中 总是将这两种结构混合起来使用 最好的办法是 首页和一级页面之间用网状链接结构 一级和二级页面之间用树状链接结构 超过三级页面 在页面顶部设置导航条 例子 请见书p114倒数第三段 13 随着电子商务的推广 网站竞争越来越激烈 对链接结构设计的要求已经不仅仅局限与可以方便快速地浏览 更加注重个性化和相关性 5 2 3网站整体风格的设计 整体风格设计是网站设计

6、中的重点和难点 是所有网页开发者最希望掌握的 也是最难以学习的 因为没有一个固定的程式可以参照和模仿 14 网站风格是抽象的 是指站点的整体形象给浏览者的综合感受 有风格的网站与普通网站的区别在于 在普通网站上看到的只是堆砌在一起的信息 浏览者只能用理性的感受来描述 但有风格的网站可以使人有更深一层的感性认识 15 通常情况下 网站的设计者要根据企业的具体情况 找出其最有特色 特点的东西 即是最能体现网站风格的东西 并以它作为网站的特色加以重点强化 突出宣传 具体做法没有定式 这里仅提供以下一些参考 使企业的标志尽可能出现在每个页面上 或者在页眉 或者页脚 或者背景 突出网站的标准色彩 16

7、突出网站的标准字体 设计一条朗朗上口宣传标语 使用统一的图片处理效果 创造一个企业站点特有的符号或图标 17 5 3网页的可视化设计 5 3 1网页设计原则 网页命名要简洁这样既会有助于以后方便地管理网页 又会在向搜索引擎提交网页时更容易被别人检索到 确保页面的导览性好一般来说 网站应提供一个关于本站点的地图 让用户知道在哪儿以及能去哪儿 18 3 网页要易读这就意味着需要规划文字与背景颜色的搭配方案 此外 网页的字体 大小也是需要考虑的因素 4 合理设计视觉效果视觉效果主要体现在网页的结构和排版上 要善用表格来布局网页 突出显示出网站内容的层次性和空间性 19 为图片添加文字说明 这样一来

8、当网速很慢不能把图象下载下来时或者用户在使用文本类型的浏览器时 照样能阅读网页的内容 6 不宜使用太多的动画和静态图片 太多的动画和静态图片会增大网页容量 浪费用户的金钱和时间 20 页面长度要适中 一个长页面的传输时间要比较短的页面的传输时间长 太长的页面传输会使用户在等待中失去耐心 如有大量的基于文本的文档 就应当以AdobeAcrobat格式的文件形式来放置 8 Java程序少用为宜 因为目前来讲Java的运行速度还比较慢 往往使浏览者没有耐心等待页面全部显示出来 21 整个页面风格要一致 10 计数器能不用最好不用 计数器也是由程序设计成的 显示计数器的过程其实就是一个程序的执行过程

9、它需要占用用户宝贵的上网时间 并且往往毫无意义 这样用户就会在浏览网页时觉得舒服 顺畅 对网站留下深刻的印象 22 11 尽量使用超级链接 这样制作的网页的可移植性比较强 输入量较小 另外要保证超链接的直观有效 以便使用户能够很快地找到其想要的东西 12 不要滥用尖端技术 使用尖端技术有可能会打击企业部分用户访问网站的兴趣和积极性 另一方面 最新的网站开发技术还存在用户浏览器的版本支持问题 23 5 3 2网页版面布局的设计 版面指的是用户在浏览器中看到的一个完整页面 可以包含框架和层 布局就是指以最适合用户浏览的方式将图片和文字排放在页面的不同位置 1 网页版面布局步骤 创建初始方案 这属于

10、创造阶段 不讲究细腻工整 不必考虑细节功能 只以粗陋的线条勾画出创意的轮廓即可 24 初步设计网页的布局 注意必须遵循突出重点 平衡谐调的原则 将网站标志 主菜单等最重要的模块放在最显眼 最突出的位置 然后在考虑次要模块的排放 定案 将初步布局精细化 具体化 25 2 常见的版面布局形式 T 结构布局 所谓 T 结构 就是指网页上边和左边相结合 页面顶部的横条网站标志和广告条 下方左面为主菜单 右面显示内容的布局 这是网页设计中用的最广泛的一种布局方式 优点 信息能被用户最大限度的获取 而且很方便 其次是页面结构清晰 主次分明 易于使用 26 缺点 规矩呆板 让人 看之无味 口 型布局 指页面

11、上下各有一个广告条 左面是主菜单 右面是友情链接等 中间是主要内容 优点 页面充实 内容丰富 信息量大 缺点 页面拥挤 不够灵活 27 三 型布局 特点是页面上横向两条色块 将页面整体分割为四部分 色块中大多放广告条 对称对比布局 优点 视觉冲击力强 缺点 将两部分有机地结合比较困难 28 POP布局 指页面布局像一张宣传海报 以一张精美图片作为页面的设计中心 优点 漂亮吸引人 缺点 速度慢 3 页面版面布局原则与技巧 只有当内容和形式 即具体的网页的排版布局达到一种协调的状态才算是一种真正成功的网页设计 29 正常平衡 多指左右 上下对照形式 2 异常平衡 即非对照形式 但也要平衡和韵律 3

12、 对比 色彩 色调等技巧的对比 及内容上的古今 新旧 贫富对比 以下是一些设计原则 30 凝视 指利用页面中人物的视线 使浏览者仿照跟随的心理 以达到注视页面的效果 空白 突出卓越和优越感 有效体现网页格调 尽量用图片解说 31 5 3 3网页色彩设计 在网页设计中 应根据和谐 均衡和重点突出的原则 将不同的色彩进行组合 搭配来构成美丽的页面 研究表明 彩色的记忆效果是黑白色得3 5倍 也就是说 彩色页面较完全的黑白页面更加吸引人 32 在网页设计中较常的做法 主要内容文字用非彩色 黑色 边框 背景 图片用彩色 这样页面整体不单调 用户看主要内容也不会眼花 1 网页色彩搭配的原理 色彩的鲜明性

13、 色彩的独特性 色彩的合适性 色彩的联想性 33 2 网页色彩搭配的技巧 相同色系色彩 运用对比色或互补色 使用过渡色 用黑色和一种彩色 34 不要将所有颜色都用到 尽量控制在三种色彩以内 背景和文字的对比尽量要大 要有足够的对比度来保证页面易于阅读 在设计中要考虑主要用户群的背景和构成 35 5 3 4网页中图片和文字的设计 1 善用图片 现今web上展现的绝大多数图片和图象是GIF和JPEG格式 PNG和FlashPix文件格式 一般情况下 GIF格式 漫画 图标 动画和平铺式图案背景 JPEG格式 照片和艺术复制品 36 图象可以弥补文字的不足 但并不能够完全取代文字 因此 制作页面时

14、必须注意将图象所包含的重要信息或链接到其他页面的指示用文字重复表达一次 图像的内容应有一定的实际作用 切忌虚饰浮夸 最佳的图象应集美观与信息内容与一身 37 2 网站字体 下面是网页设计中有关字体的使用原则和技巧 不要使用超过三种以上的字体 不要用太大或太小的文字 避免过多使用不停闪烁的文字 38 5 4首页设计 首页也叫主页 它是网站的形象页面 是网站的 门面 故被称为 HomePage 它的设计是一个网站成功与否的关键 首页的设计应该遵循快速 简洁 吸引人 信息概括能力强 易于导航的原则 同时应纳入企业CIS 企业形象识别系统 计划 与企业CIS的其他内容协调起来 39 5 4 1首页的功

15、能模块 首页的功能模块是指在首页上需要实现的主要内容及其功能 最简单地在主页上必须清楚地列出三项要点 机构名称 提供的产品或服务以及主页内容 即网站上其他页面还载有什么资料 40 41 页头 用来准确无误地标示企业的网站 它应该能够体现出企业网站的主题 而该主题是与企业的产品和服务紧密相关的 主菜单 即导航条 它提供了对关键页面的简捷导航 其超链接或图标应明确地表明企业网站的其他页面上还载有什么样的信息 42 最新消息的传递 如果企业网站的主页从不改变 用户很快会厌倦 在主页上预告即将有新资料推出 可吸引用户再来浏览 为保新鲜感 应时刻确保主页提供的是最新信息 电子邮件地址 在页面底部设计简单

16、的电子邮件链接 可使用户与网站的有关负责人迅速取得联系 有利于用户节省大量搜索时间 同时企业也能及时获得信息反馈 43 联络信息 可以列出通讯地址 公关或营业部门的电话号码等 以便用户联系 版权信息 其他信息 如广告条 搜索 友情链接 邮件列表 计数器等 44 5 4 2首页的可视化设计 确定好首页的内容和功能后 就可以设计首页的版面了 在图文类首页中 通常以图片和标题为视觉兴趣点 为吸引浏览者的注意力 可将文字标题融合在画面中 使两个兴趣点合为一体 45 设计版面的最好方法是 找一张白纸 一支笔 先将理想中的草图勾勒出来 然后再用网页制作软件实现 设计人员要了解企业的CIS 熟悉企业标志 吉祥物 字体及用色标准 以便在网站的局部将之体现出来 于平淡之中勾画出一个优美的符合企业特点的曲线 从而将企业印在浏览者的脑海里 46 在设计中 应避免 封面 问题 封面是指没有具体内容 只放一个标徽Logo点击进入 或者只有简单的图象菜单的首页 5 4 3首页设计要注意的问题 首页明确 主题突出 尽可能缩短下载时间 此外 还需注意配合最抵挡的设备 47 5 5其他页面的设计 5 5 1新闻页面的设