B2C食品電商購物網(wǎng)站后臺設計研究發(fā)布者：本站     時間：2020-05-05 12:05:16

都市生活節(jié)奏加快, 人們對快餐與外賣食品的依賴度越來越高, 網(wǎng)購食品以其便利性和廣泛性已經(jīng)成為人們生活的重要部分。然而, 調(diào)研發(fā)現(xiàn), 我國食品電商網(wǎng)站設計仍處在初級階段, 食品電商購物與分享網(wǎng)站的主要目標是滿足年輕學生與白領女性的心理需求, 通過自身平臺傳遞健康快樂、獨立自信、溫馨和諧的情緒價值, 利用網(wǎng)絡購物的優(yōu)勢, 讓買菜做飯成為一件方便而且有趣的事情。

一、B2C食品電商網(wǎng)站設計的現(xiàn)狀與發(fā)展趨勢

蒙牛早在2009年8月就開通了電商平臺, 人們買牛奶足不出戶, 網(wǎng)上購奶, 心情愉快, 為蒙牛與廣大奶飲者之間開展溝通開辟了新的途徑。盡管在其整體戰(zhàn)略中獨領風騷, 但蒙牛網(wǎng)商僅限于乳制品銷售, 品種單一, 奶飲者選擇空間很小。這個例子顯然屬于單一型食品B2C網(wǎng)站。

縱觀其他食品網(wǎng)站, “懶家伙”比較有名, 專為懶客供應?！叭杖场本W(wǎng)站主要經(jīng)營進口食品, 對愛好嘗鮮的年輕人具有很大的吸引力?！耙惶柕辍本W(wǎng)站號稱要成為比超市更優(yōu)惠的網(wǎng)上超市, 然而意想不到的是, 低價商品經(jīng)常會出現(xiàn)在它的網(wǎng)站。這些小品類B2C食品網(wǎng)站運營理念鮮明, 商品具有吸引都市白領和宅男宅女的特點。然而, 像“懶家伙”、“日全食”和“一號店”, 備貨投入很大, 品類有數(shù)千種之多, 假如賣的不多, 商品的購貨價就沒有什么優(yōu)勢, 勢必造成庫存積壓, 商品極易過期。網(wǎng)站離不開宣傳, 配送需要費用, 本來利潤空間就小的小品B2C食品網(wǎng)站舉步維艱, 送貨時間不均, 多數(shù)是在下班后的時段, 物流配送要花上一小時到一天不等的時間, 配送成本太高。另外, 如何尋找固定群體, 增加網(wǎng)站注冊量, 培養(yǎng)客戶忠誠度等, 都成為小品B2C食品網(wǎng)站在實際運作中需要洞察和培育的大問題。

中糧“我買網(wǎng)”是中糧集團旗下食品B2C網(wǎng)站, 2009年8月上線運作。該網(wǎng)上線的時候, 食品界尚未有專業(yè)的B2C平臺, 建設這樣的網(wǎng)購平臺的市場機遇空前, 換句話說, 中糧“我買網(wǎng)”獲得了先發(fā)優(yōu)勢, 前途一片光明。傳統(tǒng)實體店沒辦法與之抗爭, 也是這一網(wǎng)站的優(yōu)勢。如今它主賣生活必需品、辦公用品及零食, 包括幾百種商品, 兼有三元、德芙自己旗下的競品熱銷, 由此可見, 這一網(wǎng)站前景看好。但是, 由于儲藏、運輸?shù)拳h(huán)節(jié)的條件限制, 迄今為止, 該網(wǎng)站尚未完成生鮮冷鏈食品直配業(yè)務。同時加上消費者眾口難調(diào), 很多人習慣于首先進行實物比較、然后才買生鮮食品, 這也是一種不小的挑戰(zhàn)。綜上, 都屬于綜合型食品B2C網(wǎng)站的現(xiàn)狀和發(fā)展趨勢。

二、食品電商購物與分享網(wǎng)站的前端設計

在目標明確的基礎上完成網(wǎng)站的構思創(chuàng)意即總體設計方案是極為必要的。對食品電商購物與分享網(wǎng)站的整體風格與特色做好定位, 規(guī)劃好其組織結構。務必做到主題鮮明、簡潔、明確, 以優(yōu)美畫面告訴上網(wǎng)者站點主題, 進而吸引有需求人士的眼球。對于一些行業(yè)標志和公司標志應充分加以利用, 使網(wǎng)頁形成簡潔明快的風格, 力求達到表格簡單, 色彩搭配協(xié)調(diào), 文字處理人性化, 有親切感。[1]

(一) 視覺設計

在設計食品電商購物與分享網(wǎng)站LOGO時, 強調(diào)統(tǒng)一。統(tǒng)一并不是說不斷重復設計原理, 而是說將比如主導性、均衡、比例、反復、反襯、變異等設計原理恰如其分地應用到設計之中的完美表現(xiàn)。網(wǎng)站LOGO強調(diào)辨別, 強調(diào)獨特, 圖案字體設計要和被標識體進行適度關聯(lián), 具備相似風格造型。更應該強調(diào)的是要把握好事物的張力、文化、背景、對象、理念和各種設計原理的高度濃縮, 確保實現(xiàn)最沖動的視覺體現(xiàn)。[2]

LOGO要概括網(wǎng)站的功能、定位, 精簡地表達網(wǎng)站的內(nèi)容與風格。網(wǎng)站以食品購物和菜譜分享為主, 網(wǎng)站設計圍繞“食品”和“烹飪”展開, 因而在LO-GO設計中, 這兩個元素一定要結合好。

(二) 元素設計

網(wǎng)站導航部分主要有六個頁面:主頁、購物、作品、菜譜、社區(qū)、購物車。導航懸浮在頁面的右上方, 方便用戶一眼看到頁面的主要內(nèi)容, 當鼠標移動到文字部分時, 下方有白色下劃線出現(xiàn), 并隨著鼠標移動, 同時文字變?yōu)榘咨?

網(wǎng)站的背景以白色為底, 左右排列俯拍的食品素材, 貼合食品購物網(wǎng)站的主題, 鮮艷的食品圖片背景能激發(fā)用戶的食欲以及購買欲。

(三) 排版設計

首頁設計旨在介紹網(wǎng)站的各個功能, 讓用戶在最短時間內(nèi)了解網(wǎng)站的基本功能與架構, 并在有限的頁面里向用戶展示夠用的信息。用戶首次進入網(wǎng)站首頁即可看到網(wǎng)站的slogon, 即讓用戶了解到網(wǎng)站功能。對于沒有明確目的的用戶, 進入網(wǎng)站首頁亦可看到商品展示信息的輪播, 了解到最新熱銷的商品;往下拉動, 可看到最受歡迎的作品, 以及最受歡迎的菜譜。點擊圖片能放大并輪播圖片, 將鼠標移到圖片可以出現(xiàn)文字, 增強交互性。

登陸與注冊頁面是用戶登錄網(wǎng)站的第一個頁面。商品詳情頁的主要功能是展示商品的具體信息。作品頁展示用戶上傳的菜肴圖片、菜譜社區(qū)的分享菜譜以及收藏菜譜。用戶信息頁面有用戶頭像、用戶性別、地區(qū)、簡介等基本信息, 并且能查看到用戶上傳的菜譜、作品, 以及用戶收藏的作品。購物車頁面展示用戶放在購物車中的商品, 用戶能刪除商品、修改商品的數(shù)量。

(四) 頁面實現(xiàn)

網(wǎng)頁的頁面實現(xiàn)可用HTML和DIV+CSS寫出框架, 并可用Java Script和Jquery實現(xiàn)網(wǎng)頁特效。DIV+CSS布局能把Web標準中所要求的網(wǎng)頁內(nèi)容與表現(xiàn)完全分離, 從而提高網(wǎng)站的維護效率, 操作起來更加方便快捷。使用DIV+CSS布局方式在很大程度上縮減代碼, 加快頁面瀏覽速度, 方便修改頁面。一個CSS樣式表文件可供多個網(wǎng)頁使用, 增加更多用戶而不需建立獨立版本, 而且使表現(xiàn)和內(nèi)容分離, 結構性強。[3]

對于j Query語言來講, 其語法非常簡單, 用戶在輸入代碼和檢查代碼語法上的時間大大縮短, 編寫代碼效率大幅提高。j Query有很強大的功能函數(shù), 借助函數(shù)幫助, 瀏覽器的各個不同界面間的問題很容易得到解決。另外, j Query使腳本穩(wěn)定, 很少出錯, 可讀性強。[4]

登陸和注冊框的表單屬性讓用戶輸入信息。橫向列表可以制作導航, 并且新建鼠標cur格式的類, 實現(xiàn)鼠標特效。菜譜分類目錄以表格方式建立分類目錄, 接下來是菜譜頁的文字介紹。在網(wǎng)頁中一個固定位置循環(huán)滾動圖片, 當鼠標經(jīng)過圖片時滾動停止, 當鼠標離開圖片時又重新滾動。在網(wǎng)頁中一個固定位置, 通過滾動方式顯示更多的信息, 一是節(jié)省了網(wǎng)頁空間, 二是讓網(wǎng)頁整體效果看起來更靈活, 更吸引人, 循環(huán)滾動圖片或文字展示更多的信息。[5]最后是購買商品頁的商品圖片設置。

三、食品電商購物與分享網(wǎng)站的后臺設計

食品電商網(wǎng)站集購物與分享為一體, 用戶可瀏覽商品、購買商品、上傳作品、分享菜譜等。登陸者身份分為普通用戶和管理員兩種。開展用戶調(diào)查, 結果發(fā)現(xiàn)網(wǎng)站需求有用戶管理、商品管理、作品管理和菜譜管理這幾種。

網(wǎng)站后臺包含用戶管理、商品管理、作品管理、菜譜管理管理、用戶管理模塊、商品管理模塊、作品管理模塊和菜譜管理模塊等基本功能。

通過需求分析和功能轉化, 將普通用戶、商品、作品、菜譜分別看作實體, 分別對應用戶實體集、商品實體集、作品實體集、菜譜實體集。同時, 一個用戶可以上傳多個作品, 同一作品可以被多個用戶上傳;用戶實體集和作品實體集之間的聯(lián)系可用多對多 (M對N聯(lián)系) 的“上傳”聯(lián)系集來聯(lián)系;一個用戶可以查看多個商品, 商品可以被多個用戶查看;用戶實體集和商品實體集之間的聯(lián)系可以用多對多 (M對N聯(lián)系) 的“查看”聯(lián)系集來聯(lián)系;一個用戶可以上傳多個菜譜, 菜譜可以被多個用戶上傳;菜譜實體集和用戶實體集之間的聯(lián)系可以用多對多 (M對N聯(lián)系) 的“上傳”聯(lián)系集來聯(lián)系;一個商品可以被多個用戶購買, 一個用戶能購買多個商品;商品實體集和用戶實體集之間的聯(lián)系也可用多對多 (M對N聯(lián)系) 的“購買”聯(lián)系集來聯(lián)系