【在線音樂Web App的設(shè)計與實現(xiàn)探究4100字（論文）】

在線音樂WebApp的設(shè)計與實現(xiàn)研究目錄TOC\o"1-3"\h\u313971引言 引言隨著移動智能手機的日益普及和前端技術(shù)的發(fā)展，用戶可以在空閑時間獲得盡可能多的信息。移動應(yīng)用已成為我們生活中不可或缺的一部分。隨著移動應(yīng)用程序的日益普及，許多基于web的臺式機應(yīng)用程序開始轉(zhuǎn)向移動應(yīng)用程序。對于移動互聯(lián)網(wǎng)行業(yè)來說，HTML5的引入和傳播是網(wǎng)絡(luò)應(yīng)用的原因。Web應(yīng)用程序可以嵌入任何本機應(yīng)用程序或網(wǎng)頁中。作為一個單頁應(yīng)用程序，它還可以輕松適應(yīng)所有移動機型。它功能強大、易于使用且易于使用。預(yù)計隨著移動設(shè)備的未來改進(jìn)，對輕量級應(yīng)用程序的需求將大大增加。同時，隨著云的發(fā)展，Web應(yīng)用程序所需的數(shù)據(jù)和服務(wù)更易于訪問。用戶只需打開web應(yīng)用程序即可獲得所需的音樂、圖像等，允許社交媒體、游戲、娛樂等，同時大大降低操作的復(fù)雜性。對于開發(fā)者來說，開發(fā)人員不再需要同時開發(fā)多個代碼集。他們只需開發(fā)一個可適應(yīng)所有設(shè)備型號并支持跨平臺同步更新的web應(yīng)用程序。本文為移動音樂提供了功能強大、兼容且輕便的應(yīng)用。手機的web應(yīng)用程序兼容性和完整庫為用戶提供了完美的用戶體驗。2在線音樂系統(tǒng)需求分析2.1在線音樂系統(tǒng)功能需求分析2.1.1用戶登錄模塊該模塊是任何成熟產(chǎn)品的必要模塊，本項目也不例外。用戶也可以通過在輸入框中輸入的賬號或者密碼注冊。只有注冊后,用戶才可以完成各種基本操作,如收藏音樂、尋找歌曲、歌手等。而注冊界面中還需要設(shè)有登錄按鈕和忘記密碼的按鈕,以方便新手用戶注冊和檢索密碼。2.1.2推薦模塊當(dāng)用戶使用這個音樂網(wǎng)絡(luò)應(yīng)用程序時，他們會首先進(jìn)入頁面，因此頁面的設(shè)計應(yīng)該滿足引人注目的特點，用戶最需要的信息（如廣告、歌曲列表等）應(yīng)該放在頂部。由于信息量大，信息可以以疊加和順序顯示的方式呈現(xiàn)給用戶。此時，頂部旋轉(zhuǎn)圖將是最佳選擇；下面將顯示當(dāng)前期間最流行的歌曲列表，以提高流行歌曲的曝光率。由于要顯示大量歌曲列表，前端需要滾動。傳統(tǒng)的前端滾動碼強且不兼容，以確保與移動終端的兼容性。因此，本項目使用更兼容的滾動組件進(jìn)行無縫滾動。由于每個歌曲列表都包含一個圖像，因此由于需要加載多個歌曲，因此圖像加載會延遲。這可能會嚴(yán)重影響用戶體驗。因此，前端性能優(yōu)化是通過延遲加載圖像來實現(xiàn)的，從而提高了易用性。2.1.3歌手模塊當(dāng)使用這個網(wǎng)絡(luò)應(yīng)用程序時，用戶有時會找到一個特定的歌手，并聆聽其下的所有歌曲。因此，本模塊將根據(jù)所有流行歌手的姓名首字母排列他們的姓名。通常，它需要分為歌手列表和右側(cè)的字母導(dǎo)航欄。歌手名單包括歌手的頭像和姓名。同樣，由于歌手?jǐn)?shù)量眾多，化身圖像也將采用延遲加載技術(shù)。右側(cè)的字母列會連結(jié)，也就是說，當(dāng)使用者按一下右側(cè)導(dǎo)覽列上的字母時，左側(cè)音樂家的清單會自動移動到適當(dāng)?shù)奈恢?。?dāng)您將歌手列表移到左側(cè)時，相應(yīng)的位置也會在右側(cè)的字母導(dǎo)航欄中突出顯示。這樣，用戶就可以輕松找到要查找的歌手，從而提高易用性。2.1.4搜索模塊本模塊主要用于滿足用戶的搜索需求并進(jìn)行記錄。同時，它將整合并顯示當(dāng)前搜索頻率更高的術(shù)語。因此，整個頁面結(jié)構(gòu)將分為三個部分，頂部有一個搜索框和一個字?jǐn)?shù)限制；熱門搜索部分將顯示在中間。用戶可以點擊熱門搜索條目，進(jìn)入相應(yīng)的歌曲或歌手詳細(xì)信息列表。同時，頁面底部將顯示第三部分，即查看搜索進(jìn)度的功能。其功能是記錄用戶搜索路徑，即保存搜索的搜索路徑。2.1.5排行模塊嚴(yán)格的市場研究將不同的歌曲組合成一個音樂標(biāo)題列表，這取決于項目中不同的音樂愛好者，并根據(jù)歌曲列表的流行程度進(jìn)行排名。用戶可以點擊他們最喜歡的音樂風(fēng)格歌曲列表，進(jìn)入歌曲列表詳細(xì)信息頁面。由于此模塊中有許多圖像，因此前端加載性能通過更好的滾動組件和更好的圖形延遲加載技術(shù)得以提高，從而不會影響用戶體驗。2.1.6播放模塊本模塊是本項目的核心模塊。如果使用者按一下其他子模組，就會啟用播放模組。回放模塊的功能包括暫停功能、回放功能、前進(jìn)后退功能等基本功能；在播放模式上，主要包括順序播放功能和隨機播放功能，最后是單曲循環(huán)功能。此外，還有收集歌曲的功能。當(dāng)用戶單擊collect按鈕時，這首歌將被添加到用戶最喜愛的歌曲列表中。再次單擊將取消收藏。2.2在線音樂系統(tǒng)非功能需求分析通過實際調(diào)研和參考相關(guān)移動網(wǎng)絡(luò)應(yīng)用，本系統(tǒng)的非功能性需求主要包括以下需求：（1）實用性：由于移動web應(yīng)用具有可移植性和簡單性的特點，因此該項目必須具有操作簡單、易于維護(hù)等諸多優(yōu)點。它力求最大程度地與原生音樂應(yīng)用相似，符合用戶的基本習(xí)慣，以便用戶能夠更好地從原生應(yīng)用過渡到web應(yīng)用。（2）先進(jìn)性：隨著項目的發(fā)展，將開發(fā)一組兼容的項目，并嘗試使代碼集與所有設(shè)備兼容。這也是節(jié)省開發(fā)時間和成本的有效戰(zhàn)略。因此，符合利潤最大化目標(biāo)的高效先進(jìn)發(fā)展模式是新業(yè)務(wù)模式的最佳做法。（3）通用性：通過對競爭產(chǎn)品和用戶的調(diào)查，移動音樂網(wǎng)絡(luò)應(yīng)用將覆蓋各類用戶的需求，整合各方需求，努力開發(fā)出滿足所有用戶需求、擁有完整歌曲庫、兼容所有機型的應(yīng)用。（4）易擴展性：由于音樂web應(yīng)用的訪問量大且更新頻繁，因此該項目將具有良好的可擴展性，以滿足用戶訪問量的快速增長。（5）易維護(hù)性：系統(tǒng)的可維護(hù)性是衡量一個軟件是否可以改進(jìn)以及是否易于修復(fù)在線錯誤的重要指標(biāo)。2.3在線音樂系統(tǒng)數(shù)據(jù)需求分析數(shù)據(jù)分析主要包括項目所需的所有數(shù)據(jù)組件和數(shù)據(jù)操作，如下所述。1）數(shù)據(jù)組成根據(jù)上述對系統(tǒng)功能部分和非功能部分的需求分析，可以得出本項目的數(shù)據(jù)構(gòu)成主要包括以下部分：（1）用戶名以及密碼等信息（2）專輯信息（3）歌手信息（4）歌曲信息2）數(shù)據(jù)操作第一次調(diào)查后，數(shù)據(jù)操作主要由用戶對數(shù)據(jù)的操作決定。因此，項目結(jié)束階段將開發(fā)數(shù)據(jù)處理接口。在設(shè)計中考慮數(shù)據(jù)的流向和完整性，不僅考慮用戶查詢的需求，還考慮數(shù)據(jù)的及時捕獲和更新，以支持整體框架。3系統(tǒng)實現(xiàn)3.1用戶登錄模塊實現(xiàn)這個項目有一個用戶登錄模塊。首先，需要驗證用戶的身份。只有合法帳戶和密碼才能登錄系統(tǒng)。如果出現(xiàn)錯誤，系統(tǒng)會給出提示信息，如圖4.1所示。圖4.1用戶登錄模塊流程3.2推薦模塊實現(xiàn)推薦頁面模塊的實現(xiàn)主要關(guān)注新歌的推薦、廣告輪換圖和推薦歌曲列表。首先，根據(jù)廣告商的說法，已批準(zhǔn)的廣告材料信息存儲在后端。此時，前端收到數(shù)據(jù)后填寫并顯示相應(yīng)的鏈接，然后根據(jù)用戶點擊圖片進(jìn)入相應(yīng)鏈接。推薦歌曲列表位于推薦頁面的底部，此外，列表圖像將被延遲加載，前端頁面的上拉加載將提高前端加載性能，如圖4.2所示。圖4.2推薦模塊主界面圖3.3歌手列表模塊實現(xiàn)歌手名單頁面是該項目的另一個重要模塊。他的任務(wù)是按首字母順序列出所有流行歌手的名字。歌手名單按名字的前幾個字母排序。單擊歌手的名字會轉(zhuǎn)到音樂標(biāo)題列表頁面。單擊導(dǎo)航欄的右側(cè)字母時，會自動跳轉(zhuǎn)到歌手的相應(yīng)位置。歌手列表頁面上使用的技術(shù)不加載，前端在遍歷布局和顯示之前從vuex中檢索歌手信息和其他數(shù)據(jù)。如圖4.3所示。圖4.3歌手詳情列表頁示意圖3.4排行列表模塊實現(xiàn)排名列表模塊主要覆蓋多種類型的歌曲，并將它們分類到各自的歌曲列表中，形成某種音樂風(fēng)格的排名列表，如流行指數(shù)排名列表、新歌排名列表、熱門歌曲排名列表等。在實現(xiàn)方面，首先，Axios前端用于跨域請求數(shù)據(jù)并將其存儲到數(shù)據(jù)庫中，檢出所需數(shù)據(jù)，放置vuex進(jìn)行數(shù)據(jù)管理，以及基于收集的數(shù)據(jù)創(chuàng)建和配置前端頁。點擊并單擊后，用戶進(jìn)入模塊中的特定音樂標(biāo)題列表，單擊歌曲列表，然后打開播放指定音樂標(biāo)題的頁面。分級列表模塊頁面如圖4.4所示。3.5搜索模塊實現(xiàn)熱門搜索是指在特定時間在整個網(wǎng)絡(luò)中發(fā)現(xiàn)的前10個數(shù)據(jù)。從前端檢索數(shù)據(jù)后，這些數(shù)據(jù)將放置在vuex中以進(jìn)行數(shù)據(jù)管理，并最終顯示出來。主界面如圖4.5所示。圖4.5熱門搜索示意圖3.6播放模塊實現(xiàn)播放模塊是本項目的核心模塊。作為音樂網(wǎng)絡(luò)應(yīng)用程序，頁面質(zhì)量決定了產(chǎn)品的發(fā)展方向。主要功能包括:連續(xù)播放、隨機播放、前進(jìn)、后退、暫停、播放和收藏。首先，通過Axios在本地請求歌曲數(shù)據(jù)后，這些數(shù)據(jù)將存儲在數(shù)據(jù)庫中。前端讀取音樂播放列表數(shù)據(jù)并將其放入vuex以進(jìn)行數(shù)據(jù)管理。收到播放清單后，播放程式會在頁面上播放。主回放通過audio選項卡停止。順序播放主要檢索音樂列表的ID號。目前的ID+1會在播放目前的曲目之后以新的ID播放。randomplay函數(shù)主要使用random函數(shù)，該函數(shù)首先包含random函數(shù)，在播放當(dāng)前音樂標(biāo)題后調(diào)用以獲得新ID。然后，下一段音樂將按指定的值播放。主頁如圖5.17所示。圖4.6播放頁面示意圖4結(jié)語隨著移動終端技術(shù)的發(fā)展，各種移動終端產(chǎn)品競爭激烈。移動終端增強功能使移動終端web應(yīng)用程序成為迄今為止功能最強大的應(yīng)用程序替代方案。本文介紹、設(shè)計和實現(xiàn)了一種專為滿足用戶需求而定制的移動終端Web應(yīng)用程序。該項目功能強大、界面友好、易于使用且功能強大。對于提高移動web應(yīng)用程序的競爭力和優(yōu)化現(xiàn)有web應(yīng)用程序功能至關(guān)重要。本課題是基于移動音樂的Web應(yīng)用，在詳細(xì)的競爭研究中進(jìn)行了探討，分析、設(shè)計、實現(xiàn)和測試項目，選擇通用輕量級web形式作為開發(fā)環(huán)境中的前端開發(fā)工具，選擇mysql開源數(shù)據(jù)庫作為數(shù)據(jù)庫支持，并從系統(tǒng)功能分析和非功能分析的各個方面進(jìn)行詳細(xì)分析。最后，我們開發(fā)了一款功能優(yōu)化、易于使用且引人注目的移動音樂應(yīng)用程序。參考文獻(xiàn)[1]蔣一鳴.基于簡約風(fēng)格的移動音樂APP界面設(shè)計研究[J].美與時代：創(chuàng)意（上）,2015(3):3.[2]張寧.互聯(lián)網(wǎng)音樂APP社交化設(shè)計與未來趨向[J].中國電化教育,2020(10):2.[3]萬昀暉.基于心理學(xué)的音樂APP用戶體驗設(shè)計研究[D].華中師范大學(xué),2016.[4]朱怡潔.音樂APP界面設(shè)計[J].明日風(fēng)尚,2018(13):1.[5]張震,邵忠國.基于簡約風(fēng)格的移動音樂APP界面設(shè)計探究[J].明日風(fēng)尚,2017(1):1.[6]甘甜.論以用戶體驗為中心的手機音樂APP界面設(shè)計[D].天津工業(yè)大學(xué),2017.[7]吳政興.基于設(shè)計心理學(xué)的音樂類APP界面交互設(shè)計研究[D].湖南工業(yè)大學(xué),2019.[8]