基于WebApp的禮物推薦平臺“知禮”系統設計

吳帥軍 倪友毅 劉漢妹

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

關鍵詞：禮物推薦;智能學習;個性化設計

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? 引? 言

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

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

1? 開發環境

1.1? Web開發環境

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

1.2? 后臺開發環境

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

Java語言被選擇用于開發，主要是因為Java是面向對象的編程語言。除了近年來Java語言的更新之外，Java在前進的道路上邁出了一大步，使開發人員能夠更好地開發和增強原有的功能，使以前復雜繁瑣的功能得到了明顯的簡化。

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

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

2? 架構設計

2.1? Web設計理念

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

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

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

2.2? 混合模式

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

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

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

2.3? 后臺設計

“知禮”后臺的構建使用RESTful架構，向前端提供RESTful API接口，通訊數據采用現在使用最廣泛的JSON格式：

（1）JSON是一種輕量級的數據交換格式;

（2）JSON通常用于服務器端向網頁傳遞數據;

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

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

這種風格的軟件可以更簡單、更層次化和更容易實現緩存機制。

以Spring引導為核心框架，IOC容器、AOP面對面、Spring系列組件、Spring安全為訪問授權模塊，結合My-Batis、Redis和OAuth2.0等技術，搭建“知禮”禮物推薦系統。

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

程序架構圖如圖1所示。

3? 功能模塊設計分析

3.1? 著陸界面

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

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

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

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

3.2? 首頁導航欄界面

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

在首頁中有著隱藏的響應式導航菜單，只需要鼠標移動到圖標上便能顯示出菜單欄，并且將貫徹微交互的設計理念，導航欄在顯示的時候將會有動畫效果的展示，在鼠標移動到需要訪問的標題時，標題底色將會變色，使用戶更直觀地感受到自己的選擇。

3.3? 注冊登錄模塊

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

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

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

4? 界面設計流程

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

5? 結? 論

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

參考文獻：

[1] 高福進.實現傳統文化的創造性轉化 [N].長江日報，2017-04-17（12）.

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

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

[4] 劉國慶.基于協同過濾的個性化圖書推薦系統設計與實現 [D].馬鞍山：安徽工業大學，2016.

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

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