电子商务网站设计探析

作者：闫洪涛

来源：《成才之路》 2018年第27期

摘 要：电子商务网站设计是电子商务专业学生的主要课程。学生应从网站整体规划、网站技术要求、首页模块划分等方面对电子商务网站进行设计，从而掌握网站设计技能，更好地应用于未来的工作中。

关键词：电子商务；网页；规划；色彩 ；设计

中图分类号：G712；TP393.02 文献标志码：A 文章编号：1008-3561（2018）27-0089-01

随着网络的普及，网上购物越来越被人们喜欢，其中天猫店是目前社会上影响较大的网上购物网站。本文结合平常浏览网页和实际经验，选择天猫首页作为切入点，并结合目前流行过的双11网上购物节，来阐述网页设计的思路。

一、网站整体规划

1.网站布局规划

在规划设计一个网页的时候，首先要考虑它的功能，然后才是这个网页的结构和色彩搭配。这些设计成型的网页要符合该网站主题，也要符合人们普遍的审美观点，更要符合特定行业的规范。电商网站由自己的行业性质所决定，故一般天猫电子商务网站要至少有三种页面：首页、分类页和详情页。下面来介绍各自页面的功能。（1）首页的功能：天猫网站的首页介绍一部分本网站热卖的商品，通过首页链接到本网站的各个分页上。电子商务网站首页一般只有一个。（2）分类页的功能：分类页中将每个板块的内容具体化、深入化、详细化的同时，能让消费者深入了解商品的价格，并且有一定的比较性。一般分类页有很多，可以包括各种产品分类、活动分类、优惠分类等，天猫网站可以借着双11网上购物节，做一个简单的分类，“双

11会场”。（3）详情页的功能：通过分类页将该网站的各个相同产品的信息使其更加条理化，更加详细、方便地展现给消费者。电子商务网站的产品详情页有很多个，其中每个详情页以大量图片进行布局以增加美感。

2.网站配色分析

色彩在网页设计中起到了很大的作用，一个优秀的网页作品，它的色彩搭配和谐自然，观赏起来让人兴趣盎然。想要做到这一点，就要熟练掌握网页的主色调、辅色调、点睛色以及背景色的色彩搭配，而要完成这一点不是一蹴而就的事情，需要长期去观察优秀的成功作品，去吸收它们的精华，总结其中的规律，才会慢慢熟练运用。在选择网页色彩时，除了考虑网站本身的特点外，还要遵循一定的艺术规律，从而设计出精美的网页。第一，用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。第二，用两种色彩。先选定一种色彩，然后选择它的对比色。第三，用一个色系。简单来说就是用一个感觉的色彩，如暖色调的紫、红、橙，冷色调的绿、蓝、紫，中性色调有黑、白、灰三种颜色。色彩要根据主题来确定，不同的主题选用不同的色彩。例如，用蓝色体现科技型网站的专业，用粉红色体现女性的柔情等。可以棕红色为主色调，淡黄色为辅色调，黑色为点睛色。其中棕红色给人喜庆鲜艳的视觉效果，更给人很大视觉冲击，使之更吸引人；淡黄色给人高雅的感觉，同时可以和棕红色一同使用；点睛色正好是logo的颜色，可以更好地突出主题标识。

二、网站技术要求

一般效果要求：要适合在主流分辨率（1280px×960px）下正常显示，主页面宽度至少1200像素以上，高度不限；要有搜索栏；导航栏除了文字可以加其他网页元素；Banner通栏最好有动态效果；版权信息模块不得缺少。

一般版面设计要求：注意制作规范，包括网站文件，页面代码等；版面色彩协调，排版布局合理；网页中的部分文字及图片不要有空链接；动态效果分别用了JavaScript和Flash技术；网页布局以div+css技术为主，以表格为设计为辅。

三、首页模块划分

电子商务网站首页是一个网站的重点，关键部分，所以首页划分功能的全部实现是本网站的重要部分。第一，“网站头部”模块：（公司LOGO，标题宣传海报）。第二，“导航条”模块：首页、双11会场、冬季新款、休闲男鞋、商务男鞋。第三，“Banner”模块：以宣传公司形象为主题，编写广告语。第四，“产品分类”模块：优惠礼券、双11广告、疯狂抢不停、热卖产品等。第五，“版权信息”模块。

四、网页设计的重点分析

表格布局虽然简单，但是表格的访问速度和搜索引擎比较慢，最重要的是不同浏览器会对表格的解析效果有所差距，所以本网页使用了div+css布局，这也是目前所有网页排版和表现中最好的技术手段。网页设计中最难设计的就是主页的版面、布局的设计以及色彩的搭配是否合理。在首页的banner动态效果中，可采用JavaScript技术，在详情页的焦点图片可采用Flash技术，这样使页面有动态效果，令客户有过目不忘的感觉。

五、结语

在电子商务网站设计过程中，目前采用比较流行的程序，先用Photoshop设计效果图，然后切割图片，最后采用div+css技术实现静态效果，JavaScript和Flash技术实现动态效果。另外，在设计过程中尽可能将艺术美感与技术有效结合，这样电子商务网站将会给客户取得较好的视觉效果。

参考文献：

[1]胡蓉,宋文官.电子商务网站规划与管理教学实验方案设计[J].现代教育技术,2009(12).

[2]陈巍.电子商务网站设计课程建设初探[J].扬州职业大学学报,2008(03).

[3]袁传怀,殷彬,陶安.电子商务网站建设教学网络的实践和思考[J].电子商务,2013(05).