B2C食品電商購(gòu)物網(wǎng)站后臺(tái)設(shè)計(jì)研究發(fā)布者：本站     時(shí)間：2020-05-05 12:05:16

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

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

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

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

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

二、食品電商購(gòu)物與分享網(wǎng)站的前端設(shè)計(jì)

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

(一) 視覺(jué)設(shè)計(jì)

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

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

(二) 元素設(shè)計(jì)

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

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

(三) 排版設(shè)計(jì)

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

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

(四) 頁(yè)面實(shí)現(xiàn)

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

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

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

三、食品電商購(gòu)物與分享網(wǎng)站的后臺(tái)設(shè)計(jì)

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

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

通過(guò)需求分析和功能轉(zhuǎn)化, 將普通用戶(hù)、商品、作品、菜譜分別看作實(shí)體, 分別對(duì)應(yīng)用戶(hù)實(shí)體集、商品實(shí)體集、作品實(shí)體集、菜譜實(shí)體集。同時(shí), 一個(gè)用戶(hù)可以上傳多個(gè)作品, 同一作品可以被多個(gè)用戶(hù)上傳;用戶(hù)實(shí)體集和作品實(shí)體集之間的聯(lián)系可用多對(duì)多 (M對(duì)N聯(lián)系) 的“上傳”聯(lián)系集來(lái)聯(lián)系;一個(gè)用戶(hù)可以查看多個(gè)商品, 商品可以被多個(gè)用戶(hù)查看;用戶(hù)實(shí)體集和商品實(shí)體集之間的聯(lián)系可以用多對(duì)多 (M對(duì)N聯(lián)系) 的“查看”聯(lián)系集來(lái)聯(lián)系;一個(gè)用戶(hù)可以上傳多個(gè)菜譜, 菜譜可以被多個(gè)用戶(hù)上傳;菜譜實(shí)體集和用戶(hù)實(shí)體集之間的聯(lián)系可以用多對(duì)多 (M對(duì)N聯(lián)系) 的“上傳”聯(lián)系集來(lái)聯(lián)系;一個(gè)商品可以被多個(gè)用戶(hù)購(gòu)買(mǎi), 一個(gè)用戶(hù)能購(gòu)買(mǎi)多個(gè)商品;商品實(shí)體集和用戶(hù)實(shí)體集之間的聯(lián)系也可用多對(duì)多 (M對(duì)N聯(lián)系) 的“購(gòu)買(mǎi)”聯(lián)系集來(lái)聯(lián)系