基于WebApp的禮物推薦平臺“知禮”系統(tǒng)設(shè)計

吳帥軍 倪友毅 劉漢妹

摘? 要：隨著社會的發(fā)展，人們對禮物挑選的需求越來越多，但傳統(tǒng)的禮物推薦系統(tǒng)長期以來存在一些不如人意的地方，不同的網(wǎng)站使用特定的推薦算法為用戶進行個性化推薦。不同推薦體系的推薦效果和績效也不同，雖然有所創(chuàng)新，但缺乏個性。本文根據(jù)用戶喜好標簽、瀏覽數(shù)據(jù)，針對不同的人群提出了一種的個性化混合推薦系統(tǒng)，以解決用戶禮物挑選的問題。

關(guān)鍵詞：禮物推薦;智能學(xué)習(xí);個性化設(shè)計

Abstract：With the development of society，peoples demand for gift selection is getting higher and higher，but the traditional gift recommendation system has long been unsatisfactory. Different websites use specific recommendation algorithms to personally recommend users. The recommendation effect and performance of different recommendation systems are also different. Although they are also innovative，they lack personalization. According to the users preference label and browsing data，this paper proposes a personalized hybrid recommendation system for different groups of people to solve the problem of user gift selection.

Keywords：gift recommendation;intelligent learning;personalized design

0? 引? 言

如今推薦系統(tǒng)在很多領(lǐng)域都有著突出的表現(xiàn)，例如購物網(wǎng)站、音樂網(wǎng)站、檢索網(wǎng)站和視頻網(wǎng)站等。推薦系統(tǒng)多種多樣，每個推薦系統(tǒng)都有自己的優(yōu)缺點。層出不窮的禮物導(dǎo)致人們很難從海量的商品中得到自己想要獲取的禮物，但是人們對禮物的需求又十分迫切。所以作為禮物推薦網(wǎng)站需要采取優(yōu)質(zhì)的禮物推薦算法參考大量，比如基于矩陣分解的協(xié)同過濾、基于用戶的協(xié)同過濾等算法，才能更加有效地向用戶推薦使其滿意的禮物，吸引更多的用戶訪問，并且節(jié)省禮物挑選時間，所以對禮物推薦系統(tǒng)進行研究是十分必要的。

而在這之上，是中國傳統(tǒng)文化的傳播與傳承。本文將以傳統(tǒng)文化為切入點，強化社會主義核心價值觀的宣傳，以青少年為核心進行傳播和創(chuàng)造新興產(chǎn)品產(chǎn)業(yè)，新文化的產(chǎn)生于傳統(tǒng)文化教育能夠很好地建立文化認同感、培育民族精神和增強文化自信。習(xí)近平總書記指出，“我們要善于把弘揚優(yōu)秀傳統(tǒng)文化和發(fā)展現(xiàn)實文化有機統(tǒng)一起來，緊密結(jié)合起來，在繼承中發(fā)展，在發(fā)展中繼承”[1]，所以“知禮”將以傳統(tǒng)文化的傳播與傳承，并結(jié)合現(xiàn)代文化的發(fā)展，在滿足年輕人需求的同時，提升新一代年輕人的思維、思想水平。

1? 開發(fā)環(huán)境

1.1? Web開發(fā)環(huán)境

本文是在WebStorm平臺上設(shè)計和開發(fā)的。它是Jet-Brains旗下的一個Javascript開發(fā)工具。目前，我國的JS開發(fā)者被譽為“Web前端開發(fā)工件”、“最強大的HTML5編輯器”和“最智能的JavaScript IDE”等。目前，它是大多數(shù)開發(fā)人員使用的開發(fā)軟件之一。

1.2? 后臺開發(fā)環(huán)境

本文是在IntelliJ思想平臺上設(shè)計開發(fā)的。IntelliJ被公認為是業(yè)界最好的Java開發(fā)工具之一。特別是在智能代碼助理、代碼自動提示等功能上，可以說是非常了不起的。有許多IDEA用戶開發(fā)的實用插件，開發(fā)人員更容易完成開發(fā)。因此，本文將利用IntelliJ思想進行開發(fā)。

Java語言被選擇用于開發(fā)，主要是因為Java是面向?qū)ο蟮木幊陶Z言。除了近年來Java語言的更新之外，Java在前進的道路上邁出了一大步，使開發(fā)人員能夠更好地開發(fā)和增強原有的功能，使以前復(fù)雜繁瑣的功能得到了明顯的簡化。

本文使用Spring系列框架進行WebApp的API快速開發(fā)，Spring在創(chuàng)建之初是用來代替更加重量級的企業(yè)級Java技術(shù)，尤其是EJB。Spring提供了比EJB更輕、更簡單的編程模型。經(jīng)過多年的發(fā)展，Spring在各個領(lǐng)域方面都有所涉及，并逐步向這些領(lǐng)域進軍。

Spring Boot是關(guān)鍵團隊提供的一個新框架，旨在簡化Spring開發(fā)。Spring Boot近年開發(fā)了諸如Redis、Session、Security等一系列以Spring為核心的組件，為開發(fā)者提供了很大的便利。因此，本文使用Spring系列的Spring Boot框架為核心進行開發(fā)，并結(jié)合相關(guān)組件。

2? 架構(gòu)設(shè)計

2.1? Web設(shè)計理念

對于Web的架構(gòu)設(shè)計和界面設(shè)計，本文有著較高的追求，核心宗旨是簡潔。為了方便團隊的分工和協(xié)作，提高代碼的可擴展性和可維護性，本文采用混合模式進行開發(fā)和設(shè)計。

代碼編譯遵循W3CARE的前端開發(fā)代碼編碼規(guī)范手冊和阿里巴巴Java開發(fā)手冊。該團隊在編碼風(fēng)格和命名規(guī)范方面具有很高的一致性。對于代碼注釋本文的基本要求是簡潔易懂，不編寫毫無邏輯的注釋，亦或者是使用生疏的英文編寫難懂的注釋，并撰寫接口文檔等開發(fā)文檔。

在Web界面設(shè)計方面，本文參考了約瑟夫·米勒-布羅克曼的《Grid Systems In Graphic Design》中的一些設(shè)計風(fēng)格和設(shè)計哲學(xué)，使用極簡主義設(shè)計與簡潔的排版、圖形和色彩，營造有層次感、簡潔分明的界面風(fēng)格，讓用戶更專注于Web的功能本身。不設(shè)計簡陋的界面，不做生硬的界面過渡和操作反饋，不提供復(fù)雜難懂的操作模式是本文在界面設(shè)計上遵循的基本原則。

2.2? 混合模式

（1）單例模式：單例模式的定義是確保一個類只有一個實例，并提供對它的全局訪問點。有些時候一些對象我們往往只需要一個，比如線程池、全局緩存、瀏覽器中的Window對象等。

（2）單例模式的優(yōu)點是：可以用來劃分命名空間，減少全局變量的數(shù)量;使用單例模式可以使代碼組織得更為一致，使代碼容易閱讀和維護;可以被實例化，且實例化一次

（3）工廠模式：工廠模式分為簡單工廠模式、工廠方法模式和抽象工廠模式，屬于設(shè)計模式中的創(chuàng)建模式。其主要功能都是幫助我們把對象的實例化部分抽取出來，目的是降低系統(tǒng)中的代碼耦合度，并且增強了系統(tǒng)的擴展性。工廠模式的優(yōu)點是弱化對象間的耦合，防止代碼重復(fù)。

2.3? 后臺設(shè)計

“知禮”后臺的構(gòu)建使用RESTful架構(gòu)，向前端提供RESTful API接口，通訊數(shù)據(jù)采用現(xiàn)在使用最廣泛的JSON格式：

（1）JSON是一種輕量級的數(shù)據(jù)交換格式;

（2）JSON通常用于服務(wù)器端向網(wǎng)頁傳遞數(shù)據(jù);

（3）JSON是存儲和交換文本信息的語法，類似XML;

（4）JSON是在AJAX中代替XML交換數(shù)據(jù)的更佳方案。

這種風(fēng)格的軟件可以更簡單、更層次化和更容易實現(xiàn)緩存機制。

以Spring引導(dǎo)為核心框架，IOC容器、AOP面對面、Spring系列組件、Spring安全為訪問授權(quán)模塊，結(jié)合My-Batis、Redis和OAuth2.0等技術(shù)，搭建“知禮”禮物推薦系統(tǒng)。

在推薦算法方面，“知禮”將使用基于用戶習(xí)慣偏好相似度的Slope One算法（UPS Slope One）[2，3]、基于協(xié)同過濾的個性化推薦[4]。UPS Slope One首先基于用戶習(xí)慣偏好聚類，得到三組不同的偏好用戶，然后分別計算各組的評分偏差，計算時將用戶習(xí)慣偏好相似度融入其中，最后使用線性回歸模型預(yù)測評分。對電影鏡頭數(shù)據(jù)集的實驗表明，該算法具有較高的推薦質(zhì)量、預(yù)測精度和穩(wěn)定性。

程序架構(gòu)圖如圖1所示。

3? 功能模塊設(shè)計分析

3.1? 著陸界面

用戶進入知禮官網(wǎng)，首先看到的是著陸頁，頁面的整體設(shè)計色彩方面采用了色號為FF0800色號的紅色，紅色代表熱情、奔放、激情，從視覺方面吸引用戶的眼球，引起用戶的共鳴。用戶可以選擇“先逛逛”和“個性化定制”兩個入口，入口的設(shè)計本文采用了極簡主義中的幽靈按鈕[5]，簡單極致的按鈕更能激起用戶點擊的欲望?！爸Y”著陸界面如圖2所示。

著陸頁主要分為三塊：一是歡迎語，在圖2上方的“WELCOMETOZHILI”，意為“歡迎來到知禮”;二是LOGO，為您精心挑選的禮物;三是幽靈按鈕，極簡主義的風(fēng)格吸引著用戶的目光，使用戶更想進一步了解相關(guān)內(nèi)容。

首頁一進來是一個向下滑動的微交互動畫效果，將用戶的目光吸引到“先逛逛”與“個性化定制”的幽靈按鈕上，當鼠標在幽靈按鈕上時將會出現(xiàn)微交互的動畫效果，更加凸顯幽靈按鈕的存在，使用戶能夠清楚明了幽靈按鈕的意義。

首頁的每一個微交互本文都做到了站在用戶的角度進行設(shè)計，并借鑒了微信的微交互設(shè)計，使用戶擁有更舒適的體驗。

3.2? 首頁導(dǎo)航欄界面

Web的動態(tài)效果與操作邏輯是很重要的。用戶在一個Web里面最經(jīng)常操作的就是在導(dǎo)航尋找需要訪問的頁面，所以站在用戶的角度，本文采用了響應(yīng)式的導(dǎo)航菜單，使用戶能夠方便快捷地找到自己所需要訪問的頁面，并且友好地顯示在頁面上，不會過多阻礙用戶的交互體驗。

在首頁中有著隱藏的響應(yīng)式導(dǎo)航菜單，只需要鼠標移動到圖標上便能顯示出菜單欄，并且將貫徹微交互的設(shè)計理念，導(dǎo)航欄在顯示的時候?qū)袆赢嬓Ч恼故?，在鼠標移動到需要訪問的標題時，標題底色將會變色，使用戶更直觀地感受到自己的選擇。

3.3? 注冊登錄模塊

為了增強系統(tǒng)的安全性和清晰地了解用戶的需求，在用戶進行個性化定制時，將會進入“知禮”注冊頁面。如果用戶已經(jīng)登錄，將會進入用戶個性化定制頁面。

在注冊頁面上，本文使用手機號碼作為賬號的方式，這樣可以使用戶賬號具有唯一性，并且使用密碼對比功能，在用戶輸入第二遍密碼錯誤的情況下，將提示用戶兩遍密碼不正確，以防止用戶輸錯或者漏輸密碼。在注冊之前，用戶需要同意“知禮”的使用協(xié)議，并輸入手機驗證碼，以驗證是本人進行注冊。

在單擊注冊后，系統(tǒng)將會根據(jù)用戶的手機號碼驗證是否注冊過，如果已經(jīng)注冊，可以進入忘記密碼界面或者是登錄界面進行密碼修改與用戶登錄，以防止用戶的重復(fù)注冊導(dǎo)致系統(tǒng)數(shù)據(jù)的紊亂，使用戶賬號具有唯一性、可靠性與安全性。

4? 界面設(shè)計流程

在界面設(shè)計上，本文考慮到用戶的直觀感受，做到每一個界面的每一個細節(jié)都能很清晰地表達它的作用，充分發(fā)揮極簡主義的精神，并結(jié)合微交互的設(shè)計理念，使每一次跳轉(zhuǎn)和每一次提示都是有意義的存在，而不是無意義的展示，使用戶能夠獲得較好的用戶體驗，使“知禮”在用戶的使用過程中留下深刻的印象。界面流程如圖3所示。

5? 結(jié)? 論

本設(shè)計在Web端主要完成了“知禮”的設(shè)計思想，實現(xiàn)了登錄/注冊界面、首頁界面、響應(yīng)式導(dǎo)航菜單等功能的開發(fā);在服務(wù)端完成了整體架構(gòu)設(shè)計，實現(xiàn)了數(shù)據(jù)庫處理模塊及對應(yīng)服務(wù)端功能模塊的API模塊，部署單元測試，確保API的可靠性、可用性，并使用Spring系列的安全組件Security與緩存資源控制的Session等組件為Spring Boot框架的擴展與延伸提供了較好的基礎(chǔ)，并能夠在將來的優(yōu)化方面起到重大的作用。

參考文獻：

[1] 高福進.實現(xiàn)傳統(tǒng)文化的創(chuàng)造性轉(zhuǎn)化 [N].長江日報，2017-04-17（12）.

[2] 陳豪，王澤珺.個性化推薦算法綜述 [J].企業(yè)科技與發(fā)展，2019（2）：56-57.

[1] 黃仁，孟婷婷.個性化推薦算法綜述 [J].中小企業(yè)管理與科技（中旬刊），2015（3）：271-273.

[4] 劉國慶.基于協(xié)同過濾的個性化圖書推薦系統(tǒng)設(shè)計與實現(xiàn) [D].馬鞍山：安徽工業(yè)大學(xué)，2016.

[5] 顧佳鳳，何燦群，許丹妮.交易型信息亭用戶界面中的幽靈按鈕設(shè)計 [J].包裝工程，2016，37（24）：63-67.

作者簡介：吳帥軍（1997-），男，漢族，福建廈門人，本科在讀，研究方向：Java后端開發(fā)、Web前端開發(fā);劉漢妹（1997-），女，漢族，廣東茂名人，本科在讀，研究方向：UI設(shè)計與用戶交互、網(wǎng)站設(shè)計、移動端設(shè)計;倪友毅（1998-），男，漢族，福建泉州人，本科在讀，研究方向：Web前端開發(fā)、Web前端交互。