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

錢進(jìn)

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

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

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

隨著移動(dòng)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è)知名度;另外，商家還可以對(duì)自己下屬的門店進(jìn)行全方位的移動(dòng)式管理，降低自身的運(yùn)營成本。就APP使用場景而言，用戶可以在辦公室、宿舍乃至家里，在用正餐時(shí)間，夜宵時(shí)間，下午茶等特定的開放的場景使用;使用商家只需將重心放在設(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é)生占很大比重，但是外賣平臺(tái)并沒有把學(xué)生當(dāng)作核心群體。外賣平臺(tái)更加重視學(xué)生群體的潛在價(jià)值，學(xué)生工作后很可能保留點(diǎn)外賣的習(xí)慣，對(duì)價(jià)格也不是那么敏感，消費(fèi)能力也更強(qiáng)，是外賣平臺(tái)不得不做的一塊。

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

（2）功能需求

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

（3）非功能需求

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

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

需求分析是將業(yè)務(wù)需求和用戶需求歸納為一個(gè)個(gè)大致的功能點(diǎn)，這些功能仍舊停留在需求層面上，并未深入到軟件的結(jié)構(gòu)中。下一步的工作正是要將這些功能點(diǎn)逐步分解，確定軟件系統(tǒng)應(yīng)該由哪些模塊組成，各個(gè)模塊間的關(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)后，頁面包括以下四個(gè)部分，整個(gè)應(yīng)用的header部份，顯示商家具體信息的遮罩層，顯示整個(gè)商品列表的content部分以及類似于淘寶購物車的footer部分。在應(yīng)用的header部分中，將商家的店鋪圖片，商家名稱，配送方式，配送時(shí)間以及部分活動(dòng)信息顯示在頭部，并且分別提供一個(gè)顯示活動(dòng)數(shù)量的按鈕以及一個(gè)公告欄來控制商家具體信息的遮罩層的顯示與隱藏。

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

在商家界面遮罩層設(shè)計(jì)上，通過設(shè)置色域偏深背景以及調(diào)整背景的透明度，與白色字體作比較，讓其整個(gè)應(yīng)用更符合移動(dò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è)會(huì)展示商家的綜合評(píng)分并且將該商家與周圍商家作比較;在主體內(nèi)容部分的右側(cè)則通過自定義的星型組件將服務(wù)態(tài)度和商品評(píng)分展示給用戶。

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

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

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

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

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

在整個(gè)SPA單頁應(yīng)用中，首先通過Mockjs生成一個(gè)名為data.json格式的數(shù)據(jù)文件，數(shù)據(jù)文件的格式嚴(yán)格按照實(shí)際生產(chǎn)環(huán)境生成，這與在客戶端發(fā)送請(qǐng)求所拉取的數(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)槭且苿?dòng)端設(shè)計(jì)，考慮便捷性，所以在交互方面盡可能去避免一些復(fù)雜的交互操作，盡可能通過touch事件和點(diǎn)擊事件來完成所有的交互。而且考慮到用戶的交互體驗(yàn)，在所有的交互操作中，盡可能用Vue框架中自帶的動(dòng)畫效果對(duì)交互過程進(jìn)行過度，這樣有利于提高用戶的交互體驗(yàn)，也能使整個(gè)應(yīng)用看起來更加流暢，體驗(yàn)感覺也會(huì)更舒服。

參考文獻(xiàn)

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