都市生活节奏加快, 人们对快餐与外卖食品的依赖度越来越高, 网购食品以其便利性和广泛性已经成为人们生活的重要部分。然而, 调研发现, 我国食品电商网站设计仍处在初级阶段, 食品电商购物与分享网站的主要目标是满足年轻学生与白领女性的心理需求, 通过自身平台传递健康快乐、独立自信、温馨和谐的情绪价值, 利用网络购物的优势, 让买菜做饭成为一件方便而且有趣的事情。
创新互联公司是一家集网站建设,丰林企业网站建设,丰林品牌网站建设,网站定制,丰林网站建设报价,网络营销,网络优化,丰林网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
一、B2C食品电商网站设计的现状与发展趋势
蒙牛早在2009年8月就开通了电商平台, 人们买牛奶足不出户, 网上购奶, 心情愉快, 为蒙牛与广大奶饮者之间开展沟通开辟了新的途径。尽管在其整体战略中独领风骚, 但蒙牛网商仅限于乳制品销售, 品种单一, 奶饮者选择空间很小。这个例子显然属于单一型食品B2C网站。
纵观其他食品网站, “懒家伙”比较有名, 专为懒客供应。“日全食”网站主要经营进口食品, 对爱好尝鲜的年轻人具有很大的吸引力。“一号店”网站号称要成为比超市更优惠的网上超市, 然而意想不到的是, 低价商品经常会出现在它的网站。这些小品类B2C食品网站运营理念鲜明, 商品具有吸引都市白领和宅男宅女的特点。然而, 像“懒家伙”、“日全食”和“一号店”, 备货投入很大, 品类有数千种之多, 假如卖的不多, 商品的购货价就没有什么优势, 势必造成库存积压, 商品极易过期。网站离不开宣传, 配送需要费用, 本来利润空间就小的小品B2C食品网站举步维艰, 送货时间不均, 多数是在下班后的时段, 物流配送要花上一小时到一天不等的时间, 配送成本太高。另外, 如何寻找固定群体, 增加网站注册量, 培养客户忠诚度等, 都成为小品B2C食品网站在实际运作中需要洞察和培育的大问题。
中粮“我买网”是中粮集团旗下食品B2C网站, 2009年8月上线运作。该网上线的时候, 食品界尚未有专业的B2C平台, 建设这样的网购平台的市场机遇空前, 换句话说, 中粮“我买网”获得了先发优势, 前途一片光明。传统实体店没办法与之抗争, 也是这一网站的优势。如今它主卖生活必需品、办公用品及零食, 包括几百种商品, 兼有三元、德芙自己旗下的竞品热销, 由此可见, 这一网站前景看好。但是, 由于储藏、运输等环节的条件限制, 迄今为止, 该网站尚未完成生鲜冷链食品直配业务。同时加上消费者众口难调, 很多人习惯于首先进行实物比较、然后才买生鲜食品, 这也是一种不小的挑战。综上, 都属于综合型食品B2C网站的现状和发展趋势。
二、食品电商购物与分享网站的前端设计
在目标明确的基础上完成网站的构思创意即总体设计方案是极为必要的。对食品电商购物与分享网站的整体风格与特色做好定位, 规划好其组织结构。务必做到主题鲜明、简洁、明确, 以优美画面告诉上网者站点主题, 进而吸引有需求人士的眼球。对于一些行业标志和公司标志应充分加以利用, 使网页形成简洁明快的风格, 力求达到表格简单, 色彩搭配协调, 文字处理人性化, 有亲切感。[1]
(一) 视觉设计
在设计食品电商购物与分享网站LOGO时, 强调统一。统一并不是说不断重复设计原理, 而是说将比如主导性、均衡、比例、反复、反衬、变异等设计原理恰如其分地应用到设计之中的完美表现。网站LOGO强调辨别, 强调独特, 图案字体设计要和被标识体进行适度关联, 具备相似风格造型。更应该强调的是要把握好事物的张力、文化、背景、对象、理念和各种设计原理的高度浓缩, 确保实现最冲动的视觉体现。[2]
LOGO要概括网站的功能、定位, 精简地表达网站的内容与风格。网站以食品购物和菜谱分享为主, 网站设计围绕“食品”和“烹饪”展开, 因而在LO-GO设计中, 这两个元素一定要结合好。
(二) 元素设计
网站导航部分主要有六个页面:主页、购物、作品、菜谱、社区、购物车。导航悬浮在页面的右上方, 方便用户一眼看到页面的主要内容, 当鼠标移动到文字部分时, 下方有白色下划线出现, 并随着鼠标移动, 同时文字变为白色。
网站的背景以白色为底, 左右排列俯拍的食品素材, 贴合食品购物网站的主题, 鲜艳的食品图片背景能激发用户的食欲以及购买欲。
(三) 排版设计
首页设计旨在介绍网站的各个功能, 让用户在最短时间内了解网站的基本功能与架构, 并在有限的页面里向用户展示够用的信息。用户首次进入网站首页即可看到网站的slogon, 即让用户了解到网站功能。对于没有明确目的的用户, 进入网站首页亦可看到商品展示信息的轮播, 了解到最新热销的商品;往下拉动, 可看到最受欢迎的作品, 以及最受欢迎的菜谱。点击图片能放大并轮播图片, 将鼠标移到图片可以出现文字, 增强交互性。
登陆与注册页面是用户登录网站的第一个页面。商品详情页的主要功能是展示商品的具体信息。作品页展示用户上传的菜肴图片、菜谱社区的分享菜谱以及收藏菜谱。用户信息页面有用户头像、用户性别、地区、简介等基本信息, 并且能查看到用户上传的菜谱、作品, 以及用户收藏的作品。购物车页面展示用户放在购物车中的商品, 用户能删除商品、修改商品的数量。
(四) 页面实现
网页的页面实现可用HTML和DIV+CSS写出框架, 并可用Java Script和Jquery实现网页特效。DIV+CSS布局能把Web标准中所要求的网页内容与表现完全分离, 从而提高网站的维护效率, 操作起来更加方便快捷。使用DIV+CSS布局方式在很大程度上缩减代码, 加快页面浏览速度, 方便修改页面。一个CSS样式表文件可供多个网页使用, 增加更多用户而不需建立独立版本, 而且使表现和内容分离, 结构性强。[3]
对于j Query语言来讲, 其语法非常简单, 用户在输入代码和检查代码语法上的时间大大缩短, 编写代码效率大幅提高。j Query有很强大的功能函数, 借助函数帮助, 浏览器的各个不同界面间的问题很容易得到解决。另外, j Query使脚本稳定, 很少出错, 可读性强。[4]
登陆和注册框的表单属性让用户输入信息。横向列表可以制作导航, 并且新建鼠标cur格式的类, 实现鼠标特效。菜谱分类目录以表格方式建立分类目录, 接下来是菜谱页的文字介绍。在网页中一个固定位置循环滚动图片, 当鼠标经过图片时滚动停止, 当鼠标离开图片时又重新滚动。在网页中一个固定位置, 通过滚动方式显示更多的信息, 一是节省了网页空间, 二是让网页整体效果看起来更灵活, 更吸引人, 循环滚动图片或文字展示更多的信息。[5]最后是购买商品页的商品图片设置。
三、食品电商购物与分享网站的后台设计
食品电商网站集购物与分享为一体, 用户可浏览商品、购买商品、上传作品、分享菜谱等。登陆者身份分为普通用户和管理员两种。开展用户调查, 结果发现网站需求有用户管理、商品管理、作品管理和菜谱管理这几种。
网站后台包含用户管理、商品管理、作品管理、菜谱管理管理、用户管理模块、商品管理模块、作品管理模块和菜谱管理模块等基本功能。
通过需求分析和功能转化, 将普通用户、商品、作品、菜谱分别看作实体, 分别对应用户实体集、商品实体集、作品实体集、菜谱实体集。同时, 一个用户可以上传多个作品, 同一作品可以被多个用户上传;用户实体集和作品实体集之间的联系可用多对多 (M对N联系) 的“上传”联系集来联系;一个用户可以查看多个商品, 商品可以被多个用户查看;用户实体集和商品实体集之间的联系可以用多对多 (M对N联系) 的“查看”联系集来联系;一个用户可以上传多个菜谱, 菜谱可以被多个用户上传;菜谱实体集和用户实体集之间的联系可以用多对多 (M对N联系) 的“上传”联系集来联系;一个商品可以被多个用户购买, 一个用户能购买多个商品;商品实体集和用户实体集之间的联系也可用多对多 (M对N联系) 的“购买”联系集来联系