基于VUE2.0的移動端SPA單頁應(yīng)用

錢進(jìn)

摘 要：基于移動端設(shè)備的類如餓了么SPA單頁應(yīng)用，可以提供給客戶一個選擇多樣化功能豐富平臺。該系統(tǒng)嚴(yán)格按特點(diǎn)對商品進(jìn)行分類，便于客戶快速找到自己喜愛的食物，實(shí)時更新最新的商家外賣詳情，實(shí)現(xiàn)24小時不間斷滿足客戶的點(diǎn)餐需求，向用戶展示最為齊全的商品信息，形成系統(tǒng)而又高效率的外賣點(diǎn)餐平臺。

關(guān)鍵詞：SPA單頁;外賣APP

一、課題的背景、目的與意義

隨著移動APP的發(fā)展，訂餐APP已經(jīng)占領(lǐng)外賣市場。手機(jī)訂餐APP為用戶提供一種便捷的訂餐服務(wù)，用戶使用該APP可以快速搜索、瀏覽附近店鋪及菜品，進(jìn)而下單、結(jié)算、支付。

就商家層面而言，APP設(shè)計(jì)的功能重點(diǎn)放在店鋪管理、菜品管理方面，商戶端管理APP的功能重點(diǎn)放在餐廳下單、訂單管理及制作單管理方面，用戶通過社交網(wǎng)絡(luò)來分享美食，一次來提高自身的客源和并擴(kuò)大企業(yè)知名度;另外，商家還可以對自己下屬的門店進(jìn)行全方位的移動式管理，降低自身的運(yùn)營成本。就APP使用場景而言，用戶可以在辦公室、宿舍乃至家里，在用正餐時間，夜宵時間，下午茶等特定的開放的場景使用;使用商家只需將重心放在設(shè)計(jì)、推廣、運(yùn)營階段引入該類訂餐APP即可。

二、國內(nèi)研究現(xiàn)狀

科技的發(fā)展，不同軟件滿足人們的各種需求，O2O電商就是在這種新形勢下催生出的一種模式并且近年來發(fā)展越來越迅猛。

三、需求分析與總體設(shè)計(jì)

1.需求分析

需求分析將主要考察現(xiàn)在市面上的網(wǎng)頁需求和網(wǎng)站側(cè)重，根據(jù)用戶的體驗(yàn)、功能的以及非功能的情況進(jìn)行項(xiàng)目設(shè)計(jì)。

（1）用戶需求

在外賣點(diǎn)餐人群中，學(xué)生占很大比重，但是外賣平臺并沒有把學(xué)生當(dāng)作核心群體。外賣平臺更加重視學(xué)生群體的潛在價值，學(xué)生工作后很可能保留點(diǎn)外賣的習(xí)慣，對價格也不是那么敏感，消費(fèi)能力也更強(qiáng)，是外賣平臺不得不做的一塊。

白領(lǐng)群體是重點(diǎn)發(fā)展的對象，這一塊的利潤也更加豐厚。且這一人群，不用靠不斷燒錢補(bǔ)貼去刺激消費(fèi)，他們更加關(guān)注的是餐品的質(zhì)量以及配送的效率。該人群對服務(wù)的要求會更高。

（2）功能需求

功能需求就是確定了開發(fā)過程中需要實(shí)現(xiàn)的軟件功能，用戶可以通過這個軟件獲得自己想要的卒伍，因此才能滿足用戶需求。本項(xiàng)目由以下部分組成：商家詳情頁，商品列表頁以及評價詳情頁三個部分組成，如圖所示。

（3）非功能需求

非功能需求雖然相對于前兩項(xiàng)并不主要，但在實(shí)際的軟件開發(fā)過程中卻非常重要。首先SPA應(yīng)用是基于web的，對于用戶來說他們使用WEB平臺進(jìn)行操作，所以需要達(dá)到應(yīng)用可以在多個瀏覽器上兼容的效果。其次要求用戶界面美觀大方，并且直觀簡潔，在用操作方面盡可能達(dá)到原生app的流暢度。同時，在開發(fā)層面，通過組件化的開發(fā)思想將頁面細(xì)分為一個一個的小組件，大大提高了網(wǎng)頁的復(fù)用性。在視覺層面采用餓了么app的主色調(diào)，給人一種很舒適的扁平化風(fēng)格。在交互方面，通過框架自帶的過渡效果以及手寫實(shí)現(xiàn)一些動畫效果來實(shí)現(xiàn)原生app一樣的交互體驗(yàn)[3]。

2.總體設(shè)計(jì)

需求分析是將業(yè)務(wù)需求和用戶需求歸納為一個個大致的功能點(diǎn)，這些功能仍舊停留在需求層面上，并未深入到軟件的結(jié)構(gòu)中。下一步的工作正是要將這些功能點(diǎn)逐步分解，確定軟件系統(tǒng)應(yīng)該由哪些模塊組成，各個模塊間的關(guān)系如何等。其目的是將需求逐步轉(zhuǎn)化為系統(tǒng)的功能模塊，并分析這些模塊的調(diào)用方式、層次關(guān)系等，最終完成軟件結(jié)構(gòu)的設(shè)計(jì)，并用系統(tǒng)結(jié)構(gòu)圖和總體類圖進(jìn)行描述。

四、詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)

1.界面交互設(shè)計(jì)

（1）商家界面頭部設(shè)計(jì)

從瀏覽器進(jìn)入系統(tǒng)后，頁面包括以下四個部分，整個應(yīng)用的header部份，顯示商家具體信息的遮罩層，顯示整個商品列表的content部分以及類似于淘寶購物車的footer部分。在應(yīng)用的header部分中，將商家的店鋪圖片，商家名稱，配送方式，配送時間以及部分活動信息顯示在頭部，并且分別提供一個顯示活動數(shù)量的按鈕以及一個公告欄來控制商家具體信息的遮罩層的顯示與隱藏。

（2）商家界面的遮罩層設(shè)計(jì)

在商家界面遮罩層設(shè)計(jì)上，通過設(shè)置色域偏深背景以及調(diào)整背景的透明度，與白色字體作比較，讓其整個應(yīng)用更符合移動端的material design設(shè)計(jì)風(fēng)格。在material design的設(shè)計(jì)風(fēng)格中有如下介紹和定義：采用獨(dú)特而又清新的UI界面，設(shè)計(jì)既遵循經(jīng)典風(fēng)格，還涵蓋科技創(chuàng)新的設(shè)計(jì)理念。

（3）商家界面的主體內(nèi)容設(shè)計(jì)

首先主體內(nèi)容部分的左側(cè)會展示商家的綜合評分并且將該商家與周圍商家作比較;在主體內(nèi)容部分的右側(cè)則通過自定義的星型組件將服務(wù)態(tài)度和商品評分展示給用戶。

（4）商家界面的底部設(shè)計(jì)

在底部購物車的設(shè)計(jì)風(fēng)格上，采用深黑色的色調(diào)作為背景色，與整個應(yīng)用的風(fēng)格形成比較強(qiáng)烈的對比。底部的購物車一共分為三種狀態(tài)：未選中商品狀態(tài)，選中部分商品但不夠最低起送價格狀態(tài)以及選中商品而且達(dá)到最低起送價格狀態(tài)。

此時購物車圖標(biāo)和商品總價已經(jīng)顯示為高亮狀態(tài)，并且在購物車圖標(biāo)的右上角會用紅色背景來顯示此時購物車商品的總數(shù)。此時購物車圖標(biāo)為可點(diǎn)擊的狀態(tài)，點(diǎn)擊購物車圖標(biāo)會彈出一個遮罩層，上面包含已選中商品的列表及其對應(yīng)的數(shù)量。

2.詳細(xì)設(shè)計(jì)與功能實(shí)現(xiàn)

（1）應(yīng)用的數(shù)據(jù)傳輸

在整個SPA單頁應(yīng)用中，首先通過Mockjs生成一個名為data.json格式的數(shù)據(jù)文件，數(shù)據(jù)文件的格式嚴(yán)格按照實(shí)際生產(chǎn)環(huán)境生成，這與在客戶端發(fā)送請求所拉取的數(shù)據(jù)是一樣的。

（2）應(yīng)用的樣式設(shè)計(jì)

在設(shè)計(jì)風(fēng)格上面采用的是普通SPA單頁應(yīng)用的扁平化風(fēng)格，色調(diào)偏柔和，界面風(fēng)格偏簡潔，比較符合現(xiàn)代大眾的審美。在用戶體驗(yàn)方面，因?yàn)槭且苿佣嗽O(shè)計(jì)，考慮便捷性，所以在交互方面盡可能去避免一些復(fù)雜的交互操作，盡可能通過touch事件和點(diǎn)擊事件來完成所有的交互。而且考慮到用戶的交互體驗(yàn)，在所有的交互操作中，盡可能用Vue框架中自帶的動畫效果對交互過程進(jìn)行過度，這樣有利于提高用戶的交互體驗(yàn)，也能使整個應(yīng)用看起來更加流暢，體驗(yàn)感覺也會更舒服。

參考文獻(xiàn)

[1]V.Prakesh Kainthola.Principles of hotel management[M].Spenter Inc.，2013.