B2C食品電商購物網(wǎng)站后臺設(shè)計(jì)研究發(fā)布者：本站 時間：2020-05-05 12:05:16
都市生活節(jié)奏加快, 人們對快餐與外賣食品的依賴度越來越高, 網(wǎng)購食品以其便利性和廣泛性已經(jīng)成為人們生活的重要部分。然而, 調(diào)研發(fā)現(xiàn), 我國食品電商網(wǎng)站設(shè)計(jì)仍處在初級階段, 食品電商購物與分享網(wǎng)站的主要目標(biāo)是滿足年輕學(xué)生與白領(lǐng)女性的心理需求, 通過自身平臺傳遞健康快樂、獨(dú)立自信、溫馨和諧的情緒價(jià)值, 利用網(wǎng)絡(luò)購物的優(yōu)勢, 讓買菜做飯成為一件方便而且有趣的事情。
一、B2C食品電商網(wǎng)站設(shè)計(jì)的現(xiàn)狀與發(fā)展趨勢
蒙牛早在2009年8月就開通了電商平臺, 人們買牛奶足不出戶, 網(wǎng)上購奶, 心情愉快, 為蒙牛與廣大奶飲者之間開展溝通開辟了新的途徑。盡管在其整體戰(zhàn)略中獨(dú)領(lǐng)風(fēng)騷, 但蒙牛網(wǎng)商僅限于乳制品銷售, 品種單一, 奶飲者選擇空間很小。這個例子顯然屬于單一型食品B2C網(wǎng)站。
縱觀其他食品網(wǎng)站, “懶家伙”比較有名, 專為懶客供應(yīng)。“日全食”網(wǎng)站主要經(jīng)營進(jìn)口食品, 對愛好嘗鮮的年輕人具有很大的吸引力?！耙惶柕辍本W(wǎng)站號稱要成為比超市更優(yōu)惠的網(wǎng)上超市, 然而意想不到的是, 低價(jià)商品經(jīng)常會出現(xiàn)在它的網(wǎng)站。這些小品類B2C食品網(wǎng)站運(yùn)營理念鮮明, 商品具有吸引都市白領(lǐng)和宅男宅女的特點(diǎn)。然而, 像“懶家伙”、“日全食”和“一號店”, 備貨投入很大, 品類有數(shù)千種之多, 假如賣的不多, 商品的購貨價(jià)就沒有什么優(yōu)勢, 勢必造成庫存積壓, 商品極易過期。網(wǎng)站離不開宣傳, 配送需要費(fèi)用, 本來利潤空間就小的小品B2C食品網(wǎng)站舉步維艱, 送貨時間不均, 多數(shù)是在下班后的時段, 物流配送要花上一小時到一天不等的時間, 配送成本太高。另外, 如何尋找固定群體, 增加網(wǎng)站注冊量, 培養(yǎng)客戶忠誠度等, 都成為小品B2C食品網(wǎng)站在實(shí)際運(yùn)作中需要洞察和培育的大問題。
中糧“我買網(wǎng)”是中糧集團(tuán)旗下食品B2C網(wǎng)站, 2009年8月上線運(yùn)作。該網(wǎng)上線的時候, 食品界尚未有專業(yè)的B2C平臺, 建設(shè)這樣的網(wǎng)購平臺的市場機(jī)遇空前, 換句話說, 中糧“我買網(wǎng)”獲得了先發(fā)優(yōu)勢, 前途一片光明。傳統(tǒng)實(shí)體店沒辦法與之抗?fàn)? 也是這一網(wǎng)站的優(yōu)勢。如今它主賣生活必需品、辦公用品及零食, 包括幾百種商品, 兼有三元、德芙自己旗下的競品熱銷, 由此可見, 這一網(wǎng)站前景看好。但是, 由于儲藏、運(yùn)輸?shù)拳h(huán)節(jié)的條件限制, 迄今為止, 該網(wǎng)站尚未完成生鮮冷鏈?zhǔn)称分迸錁I(yè)務(wù)。同時加上消費(fèi)者眾口難調(diào), 很多人習(xí)慣于首先進(jìn)行實(shí)物比較、然后才買生鮮食品, 這也是一種不小的挑戰(zhàn)。綜上, 都屬于綜合型食品B2C網(wǎng)站的現(xiàn)狀和發(fā)展趨勢。
二、食品電商購物與分享網(wǎng)站的前端設(shè)計(jì)
在目標(biāo)明確的基礎(chǔ)上完成網(wǎng)站的構(gòu)思創(chuàng)意即總體設(shè)計(jì)方案是極為必要的。對食品電商購物與分享網(wǎng)站的整體風(fēng)格與特色做好定位, 規(guī)劃好其組織結(jié)構(gòu)。務(wù)必做到主題鮮明、簡潔、明確, 以優(yōu)美畫面告訴上網(wǎng)者站點(diǎn)主題, 進(jìn)而吸引有需求人士的眼球。對于一些行業(yè)標(biāo)志和公司標(biāo)志應(yīng)充分加以利用, 使網(wǎng)頁形成簡潔明快的風(fēng)格, 力求達(dá)到表格簡單, 色彩搭配協(xié)調(diào), 文字處理人性化, 有親切感。[1]
(一) 視覺設(shè)計(jì)
在設(shè)計(jì)食品電商購物與分享網(wǎng)站LOGO時, 強(qiáng)調(diào)統(tǒng)一。統(tǒng)一并不是說不斷重復(fù)設(shè)計(jì)原理, 而是說將比如主導(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)識體進(jìn)行適度關(guān)聯(lián), 具備相似風(fēng)格造型。更應(yīng)該強(qiáng)調(diào)的是要把握好事物的張力、文化、背景、對象、理念和各種設(shè)計(jì)原理的高度濃縮, 確保實(shí)現(xiàn)最沖動的視覺體現(xiàn)。[2]
LOGO要概括網(wǎng)站的功能、定位, 精簡地表達(dá)網(wǎng)站的內(nèi)容與風(fēng)格。網(wǎng)站以食品購物和菜譜分享為主, 網(wǎng)站設(shè)計(jì)圍繞“食品”和“烹飪”展開, 因而在LO-GO設(shè)計(jì)中, 這兩個元素一定要結(jié)合好。
(二) 元素設(shè)計(jì)
網(wǎng)站導(dǎo)航部分主要有六個頁面:主頁、購物、作品、菜譜、社區(qū)、購物車。導(dǎo)航懸浮在頁面的右上方, 方便用戶一眼看到頁面的主要內(nèi)容, 當(dāng)鼠標(biāo)移動到文字部分時, 下方有白色下劃線出現(xiàn), 并隨著鼠標(biāo)移動, 同時文字變?yōu)榘咨?
網(wǎng)站的背景以白色為底, 左右排列俯拍的食品素材, 貼合食品購物網(wǎng)站的主題, 鮮艷的食品圖片背景能激發(fā)用戶的食欲以及購買欲。
(三) 排版設(shè)計(jì)
首頁設(shè)計(jì)旨在介紹網(wǎng)站的各個功能, 讓用戶在最短時間內(nèi)了解網(wǎng)站的基本功能與架構(gòu), 并在有限的頁面里向用戶展示夠用的信息。用戶首次進(jìn)入網(wǎng)站首頁即可看到網(wǎng)站的slogon, 即讓用戶了解到網(wǎng)站功能。對于沒有明確目的的用戶, 進(jìn)入網(wǎng)站首頁亦可看到商品展示信息的輪播, 了解到最新熱銷的商品;往下拉動, 可看到最受歡迎的作品, 以及最受歡迎的菜譜。點(diǎn)擊圖片能放大并輪播圖片, 將鼠標(biāo)移到圖片可以出現(xiàn)文字, 增強(qiáng)交互性。
登陸與注冊頁面是用戶登錄網(wǎng)站的第一個頁面。商品詳情頁的主要功能是展示商品的具體信息。作品頁展示用戶上傳的菜肴圖片、菜譜社區(qū)的分享菜譜以及收藏菜譜。用戶信息頁面有用戶頭像、用戶性別、地區(qū)、簡介等基本信息, 并且能查看到用戶上傳的菜譜、作品, 以及用戶收藏的作品。購物車頁面展示用戶放在購物車中的商品, 用戶能刪除商品、修改商品的數(shù)量。
(四) 頁面實(shí)現(xiàn)
網(wǎng)頁的頁面實(shí)現(xiàn)可用HTML和DIV+CSS寫出框架, 并可用Java Script和Jquery實(shí)現(xiàn)網(wǎng)頁特效。DIV+CSS布局能把Web標(biāo)準(zhǔn)中所要求的網(wǎng)頁內(nèi)容與表現(xiàn)完全分離, 從而提高網(wǎng)站的維護(hù)效率, 操作起來更加方便快捷。使用DIV+CSS布局方式在很大程度上縮減代碼, 加快頁面瀏覽速度, 方便修改頁面。一個CSS樣式表文件可供多個網(wǎng)頁使用, 增加更多用戶而不需建立獨(dú)立版本, 而且使表現(xiàn)和內(nèi)容分離, 結(jié)構(gòu)性強(qiáng)。[3]
對于j Query語言來講, 其語法非常簡單, 用戶在輸入代碼和檢查代碼語法上的時間大大縮短, 編寫代碼效率大幅提高。j Query有很強(qiáng)大的功能函數(shù), 借助函數(shù)幫助, 瀏覽器的各個不同界面間的問題很容易得到解決。另外, j Query使腳本穩(wěn)定, 很少出錯, 可讀性強(qiáng)。[4]
登陸和注冊框的表單屬性讓用戶輸入信息。橫向列表可以制作導(dǎo)航, 并且新建鼠標(biāo)cur格式的類, 實(shí)現(xiàn)鼠標(biāo)特效。菜譜分類目錄以表格方式建立分類目錄, 接下來是菜譜頁的文字介紹。在網(wǎng)頁中一個固定位置循環(huán)滾動圖片, 當(dāng)鼠標(biāo)經(jīng)過圖片時滾動停止, 當(dāng)鼠標(biāo)離開圖片時又重新滾動。在網(wǎng)頁中一個固定位置, 通過滾動方式顯示更多的信息, 一是節(jié)省了網(wǎng)頁空間, 二是讓網(wǎng)頁整體效果看起來更靈活, 更吸引人, 循環(huán)滾動圖片或文字展示更多的信息。[5]最后是購買商品頁的商品圖片設(shè)置。
三、食品電商購物與分享網(wǎng)站的后臺設(shè)計(jì)
食品電商網(wǎng)站集購物與分享為一體, 用戶可瀏覽商品、購買商品、上傳作品、分享菜譜等。登陸者身份分為普通用戶和管理員兩種。開展用戶調(diào)查, 結(jié)果發(fā)現(xiàn)網(wǎng)站需求有用戶管理、商品管理、作品管理和菜譜管理這幾種。
網(wǎng)站后臺包含用戶管理、商品管理、作品管理、菜譜管理管理、用戶管理模塊、商品管理模塊、作品管理模塊和菜譜管理模塊等基本功能。
通過需求分析和功能轉(zhuǎn)化, 將普通用戶、商品、作品、菜譜分別看作實(shí)體, 分別對應(yīng)用戶實(shí)體集、商品實(shí)體集、作品實(shí)體集、菜譜實(shí)體集。同時, 一個用戶可以上傳多個作品, 同一作品可以被多個用戶上傳;用戶實(shí)體集和作品實(shí)體集之間的聯(lián)系可用多對多 (M對N聯(lián)系) 的“上傳”聯(lián)系集來聯(lián)系;一個用戶可以查看多個商品, 商品可以被多個用戶查看;用戶實(shí)體集和商品實(shí)體集之間的聯(lián)系可以用多對多 (M對N聯(lián)系) 的“查看”聯(lián)系集來聯(lián)系;一個用戶可以上傳多個菜譜, 菜譜可以被多個用戶上傳;菜譜實(shí)體集和用戶實(shí)體集之間的聯(lián)系可以用多對多 (M對N聯(lián)系) 的“上傳”聯(lián)系集來聯(lián)系;一個商品可以被多個用戶購買, 一個用戶能購買多個商品;商品實(shí)體集和用戶實(shí)體集之間的聯(lián)系也可用多對多 (M對N聯(lián)系) 的“購買”聯(lián)系集來聯(lián)系
選擇我們，優(yōu)質(zhì)服務(wù)，不容錯過
1. 優(yōu)秀的網(wǎng)絡(luò)資源，強(qiáng)大的網(wǎng)站優(yōu)化技術(shù)，穩(wěn)定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設(shè)經(jīng)驗(yàn)，優(yōu)秀的技術(shù)和設(shè)計(jì)水平，更放心
3. 全程省心服務(wù)，不必?fù)?dān)心自己不懂網(wǎng)絡(luò)，更省心。
------------------------------------------------------------
24小時聯(lián)系電話：021-58370032