李佳键，王风硕

摘要：针对手机用户有线上图书推荐以及图书购买的需求，本文以 Axure 作为运行环境，采用输出为RP以及HTML文件为模板，进行多页面图书购买界面设计，实现用户可以在本网站进行图书详情的查看，以及购买图书。

关键词：Axure;多页面;图书

中图分类号：TP311   文献标识码：A

文章编号：1009-3044（2021）34-0145-02

随着智能移动设备和移动互联网的普及，移动互联网在生活中的地位越来越重要。为了适应快速发展的前端技术以及更多的Web应用需求，同时用户对于界面美化以及界面功能需求越来越大，在当今社会中基于HTML背景当中Axure软件在平面设计中被大部分广泛利用，可以作为前端进行设计以及功能实现的一个很好的模板进行，对于页面的展示以及预览。

本设计初衷是为了让用户更加快捷，更加方便，通过更完整的渠道去购买正版的图书，让用户有更便捷的图书选择，更多的图书分类分化，将图书规整，详细页面将各个书本的价格进行透明化，让用户能够在本页面中进行更多的探索，将购买与浏览进行一个多方位的结合，实现类似于淘宝，京东等电子商城的功能實现，为了让用户更有更好的用户体验，参考了某些票据网站以及图书网站将整个页面加以优化，再进行完整的输出同时需要一个庞大的数据库来支撑，以及对于购买书籍资源的可靠性，出版社的详情页面所需要庞大的数据链，在本页面中都可以完整地体现出来。

1 公用模块设置

本网站是由注册页面、主页、登录页面、详情页、个人界面等部分组成，有很多页面进行相同的功能时，所用到的模块是相同的。该公用模块为整个主体程序的一部分，在编译公用模块时需要考虑每个模块的适应性以及对于全局变量，对于页面的影响，将模块的全局变量设置得更为明显、更加容易理解，将重要的两个主体页面的公用模块：主页以及详情页的两个共用模块串联起来，进行页面的跳转相同的道理将注册页面和登录界面以及个人中心给联动起来，将注册信息上面所填写的个人信息传递到全局变量中，再从全局变量传递到登录界面，以及将个人中心和登录界面逻辑串联，可由判断来产生登录条件进行，是否可以登录的结果。

2 完成网站页面设计需具备的能力

首先是对于界面的设计能有一个大概的了解，对前端某些技术实现方面比较统筹性的理解能力，能够熟练运用Axure软件，同时能够明白机械语言对于条件的设定，对各个方面环境搭建的相关知识。

实现目的同时，为了让整个界面显得简洁以及方便理解，在书写每一个函数以及功能的同时，会优先考虑页面编译的简洁化。为方便在团队编程的同时，在优化代码方面会从看似易懂的一个方向进行编译。

本产品运用到了UE与页面UI设计方面知识的相结合，进行对整个网站页面的设计，同时，为了让用户能够更加简洁地在用户中心中查询到自己的浏览历史，收件地址，购买信息及购物车将每一个独立的功能建立多个对应的数据库以作储存。

用户的主要体验在个人中心中，前端功能在于能对自己的信息修改例如：浏览历史删除，收件地址的增添以及查看购买书籍的订单详情，在主页中，我们可以将整个页面设计步骤划分为五个板块，第一个板块为对于整个页面的统一设计要求，第二个板块为区域作品划分，第三个板块为详情页面的显示，第四个板块为个性化推荐，第五个板块为对于个人界面中对于用户各方面信息的显示及交互。

3 开发环境及开发工具及方法介绍

该软件是在基于Windows10 的系统，利用Axure以RP软件的形式为出体现将Axure自带的HTML转换器，将文件格式也可输出为HTML格式。

Axure：Axure原型交互技术是解决网站及App等产品开发过程中快速实现产品原型的必备工具，Axure原型交互技术几乎可以不用或少用代码即实现网站及App等产品的功能展示，而Axure原型交互技术中视频引用的功能展示是个值得探讨的问题。因此，研究了从引用网络视频、引用本地视频、引用自己编写的demo. html文件完美解决Axure原型交互技术中视频引用问题，研究中采用了比较研究法、实践研究法等进行了实践应用研究。

快速原型法，简称原型法，是惯用的软件开发方式之一。它是指在投入大量资源进行开发之前，确认基本的需求定义，通过可视化的开发环境，快速创建出一个可供用户测试的目标系统的初始版本。根据用户的反馈意见进行相应的补充修改，经过和用户反复沟通确认、版本修改，最终得到用户满意的原型版本。系统的原型能直观展现用户需求，可减少在系统开发过程中因需求改动而反复修改产生的工作量。而高保真原型设计能体现特定功能的交互，用户可从多个维度入手对系统进行体验，为系统的后期开发提供完善的设计流程和业务流程，有利于开发人员后期快速准确地开展工作。原型法的开发过程主要包括确定用户的基本需求、设计初始原型、试运行和评价原型、修改和完善原型及提供相关文档等阶段。

4 设计与实现

首先，使用Axure里面的中继器来编辑并作为传递载体，同时在MySQL当中所运用到的数据库，使之能在Axure相关能连接的网页中，能够进行搜索以及进一步的详情页的选择，同时筛选页面也可以运用中继器当中的数据进行排比，筛选每一个图书分类，将小部分的数据导入中继器中，并编写每一个中继器当中数据的价格种类，以及作者通过中继器当中每一列的属性，在筛选页面中进行分类，关于页面的制作，具体基础界面图如图1所示。

其次是登录和注册界面，在登录和注册界面当中，我们首先使用注册界面当中所有的函数参值，将所有的参值命名为全局变量，在登录当中，需要将信息暂时存入输入全局变量当中，注册界面已传入的量来确保能够将账号和密码对应进行判别是否正确。登录成功后，将会把注册当中所用到的全局变量当中的某些信息显示在个人页面当中，在修改个人界面当中，优先度会将个人界面当中的优先度高于注册界面，可将其归纳于中继器当中进行储存。每当用户进行个人中心当中信息的更改时，会以新的全局变量出现，再加以修改，将其存入中继器当中，每一个用户能够拥有自己单独的个人信息，用中继器来实现Axure当中更多的用户体验，能将不同的用户信息同时储存于页面当中，有利于将来的区分以及不同的用户更改以及购买。

再是主页采用以中继器为小单位，然后以动态面板为中继单位来进行数据的传递，对于页面的分割以及对于每个显示在主页上面的页面设定主页，也可直接跳转详情页面，在主页当中点击的话，可以直接显示筛选页面，筛选页面当中，点击图文，可以进入详情页面。

最后是购买界面，购买界面当中，用户可以通过输入自己的住址以及购买书籍数量进行付款，将自己的购买详情以及地址归纳于个人中心当中，也是通过全局变量来进行调配，具体流程图如图2所示。

整个网站总共需要16个全局变量，以及各个页面共72个局部变量。

5 结语

Axure所制作的是基于UI设计图以及UE设计图对于前端设计师对页面的功能是一个必不可少的环节，也是在前端以及设计师两方交互的理解方面起中间人的效果，是企业能在设计师能够将自己的表达完全运用于软件上，同时也可以让前端设计师能够更好地理解到设计师的设计理念、交互作用，以及所对应的功能。

本产品主要是在UI设计师设计到前端工程师编码的过渡阶段使用的。编写出来的显而易见，一个比较好的图书售卖网站原型，并将每一个细节点能够在此软件上进行修改，便于后期前端工程师进行代码的设计，以及方便于后期的更改。

参考文献：

[1] 苏文芝.Axure原型交互中内联框架解决视频引入的实践研究[J].济源职业技术学院学报，2021，20（1）：60-64，81.

[2] 张乐，张凯.复旦大学 以Axure原型设计一站式服务系统[J].中国教育网络，2020（Z1）：79-80.

[3] 尹文升. 基于Web平台的ERP财务核算管理系统研究[D].大连理工大学，2005.

[4] 刘英. 基于Intranet的高校教务管理信息系统的研究[D].西安理工大学，2002.

[5] 汪滟. 一种敏捷的Web软件快速开发工具的设计与实现[D].华中科技大学，2007.

【通联编辑：梁书】