基于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]，简单极致的按钮更能激起用户点击的欲望。“知礼”着陆界面如图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前端交互。