一、B2C食品电商网站设计的现状与发展趋势
蒙牛早在2009年8月就开通了电商平台,人们买牛奶足不出户,网上购奶,心情愉快,为蒙牛与广大奶饮者之间开展沟通开辟了新的途径。尽管在其整体战略中独领风骚,但蒙牛网商仅限于乳制品销售,品种单一,奶饮者选择空间很小。这个例子显然属于单一型食品B2C网站。
中粮“我买网”是中粮集团旗下食品B2C网站,2009年8月上线运作。该网上线的时候,食品界尚未有专业的B2C平台,建设这样的网购平台的市场机遇空前,换句话说,中粮“我买网”获得了先发优势,前途一片光明。传统实体店没办法与之抗争,也是这一网站的优势。如今它主卖生活必需品、办公用品及零食,包括几百种商品,兼有三元、德芙自己旗下的竞品热销,由此可见,这一网站前景看好。但是,由于储藏、运输等环节的条件限制,迄今为止,该网站尚未完成生鲜冷链食品直配业务。同时加上消费者众口难调,很多人习惯于首先进行实物比较、然后才买生鲜食品,这也是一种不小的挑战。综上,都属于综合型食品B2C网站的现状和发展趋势。
(一)视觉设计
(二)元素设计
网站导航部分主要有六个页面:主页、购物、作品、菜谱、社区、购物车。导航悬浮在页面的右上方,方便用户一眼看到页面的主要内容,当鼠标移动到文字部分时,下方有白色下划线出现,并随着鼠标移动,同时文字变为白色。
网站的背景以白色为底,左右排列俯拍的食品素材,贴合食品购物网站的主题,鲜艳的食品图片背景能激发用户的食欲以及购买欲。
(三)排版设计
(四)页面实现
网页的页面实现可用HTML和DIV+CSS写出框架,并可用JavaScript和Jquery实现网页特效。DIV+CSS布局能把Web标准中所要求的网页内容与表现完全分离,从而提高网站的维护效率,操作起来更加方便快捷。使用DIV+CSS布局方式在很大程度上缩减代码,加快页面浏览速度,方便修改页面。一个CSS样式表文件可供多个网页使用,增加更多用户而不需建立独立版本,而且使表现和内容分离,结构性强。[3]
登陆和注册框的表单属性让用户输入信息。横向列表可以制作导航,并且新建鼠标cur格式的类,实现鼠标特效。菜谱分类目录以表格方式建立分类目录,接下来是菜谱页的文字介绍。在网页中一个固定位置循环滚动图片,当鼠标经过图片时滚动停止,当鼠标离开图片时又重新滚动。在网页中一个固定位置,通过滚动方式显示更多的信息,一是节省了网页空间,二是让网页整体效果看起来更灵活,更吸引人,循环滚动图片或文字展示更多的信息。[5]最后是购买商品页的商品图片设置。
网站后台包含用户管理、商品管理、作品管理、菜谱管理管理、用户管理模块、商品管理模块、作品管理模块和菜谱管理模块等基本功能。
通过需求分析和功能转化,将普通用户、商品、作品、菜谱分别看作实体,分别对应用户实体集、商品实体集、作品实体集、菜谱实体集。同时,一个用户可以上传多个作品,同一作品可以被多个用户上传;用户实体集和作品实体集之间的联系可用多对多(M对N联系)的“上传”联系集来联系;一个用户可以查看多个商品,商品可以被多个用户查看;用户实体集和商品实体集之间的联系可以用多对多(M对N联系)的“查看”联系集来联系;一个用户可以上传多个菜谱,菜谱可以被多个用户上传;菜谱实体集和用户实体集之间的联系可以用多对多(M对N联系)的“上传”联系集来联系;一个商品可以被多个用户购买,一个用户能购买多个商品;商品实体集和用户实体集之间的联系也可用多对多(M对N联系)的“购买”联系集来联系