PMP知识系统（02）- 原型设计

1. 前言

注意：本项目所有的项目涉及到内容及代码已开源，Gitee开源地址：https://gitee.com/19931024/pmp.git

在上一篇博客《PMP知识系统（01）- 系统介绍》已经为本系统做了简单的介绍，以及做了基本的调研，并使用XMind来列出功能需求列表。

本文主要讲解Axure的使用以及为本系统做原型设计。

2. Axure的安装与学习

在曾经的博客Axure专栏已经详细的讲解了Axure安装与基本的使用，阅读本文前，需要童鞋们先去阅读之前我写的博客（会使用的可以直接忽略）：

• 《Mac 下Axure RP9下载与安装》
• 《Axure快速入门教程》
• 《Axure快速入门（01） - 面板介绍》
• 《Axure快速入门（02） - 入门例子（登录案例）》
• 《Axure快速入门（03） - 丰富的元件库》
• 《Axure快速入门（04） - 元件位置调整》
• 《Axure快速入门（05） - Master母版减少重复操作》
• 《Axure快速入门（06） -动态面板例子》
• 《Axure快速入门（07） -选项组例子》
• 《Axure快速入门（08） -网格和参考线》
• 《Axure快速入门（09） -变量和表达式（计算商品总价例子）》
• 《Axure快速入门（10） -变量和表达式总结》
• 《Axure快速入门（11） -函数总结》
• 《Axure快速入门（12） -轮播图案例》
• 《如何加速打开Axure分享的链接》
• 《Axure快速入门（完结） -终章总结》

3. 原型设计 3.1 导入元件库

首先需要明确的是，我们到时的前端开发是使用ElementUI框架的，所以我们需要去Element官网去搜索是否有元件库，可以看到是有元件库的（地址：https://element.eleme.cn/#/zh-CN/resource）：

我们下载ElementUI的元件库： 下载完成后，打开Axure，在元件模块导入，如下图： 导入成功后，内容如下：

接下来可以设计系统的原型了。

3.2 开始原型设计 3.2.1 主页设计

首先我们看看主页的设计：

3.2.2 首页设计

3.2.3 总纲页

3.2.3 内容页

① 过程组-子管理过程-概念页面： ② 过程组-子管理过程-输入页面： ③ 过程组-子管理过程-工具与技术页面： ④ 过程组-子管理过程-输出页面： ④ 过程组-子管理过程-巩固页面：

3.2.3 分章习题页

3.2.4 模拟题页

3.2.5 收藏本页面

3.2.6 内容设置

3.2.6.1 内容设置-新增概念

3.2.6.2 内容设置-新增输入

新增输入、工具与技术、输出界面一致：

3.2.6.3 内容设置-新增巩固

3.2.7 题目设置

新增内容：

4. 小结

以上就是所有《PMP知识管理系统》的页面设计了，原型已上传至Github，有兴趣的童鞋可以下载下来运行浏览观看。

声明：未经本人同意，禁止转载！