浅析电子商务的网站设计

时间:2019-09-27

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

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

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

　　一、网站整体规划

　　1. 网站布局规划

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

　　2. 网站配色分析

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

　　二、网站技术要求

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

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

　　三、首页模块划分

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

　　四、网页设计的重点分析

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

　　五、结语

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

　　参考文献
　　[1]胡蓉, 宋文官.电子商务网站规划与管理教学实验方案设计[J].现代教育技术, 2009 (12) .
　　[2]陈巍.电子商务网站设计课程建设初探[J].扬州职业大学学报, 2008 (03) .
　　[3]袁传怀, 殷彬, 陶安.电子商务网站建设教学网络的实践和思考[J].电子商务, 2013 (05) .

TAG标签： 网页  色彩  规划  

上一篇：网站创新设计中的四种版式探析
下一篇：在营销视角下的茶企网站设计