EE308 lab2-1

m0_57843239 2022-11-04 23:55:47
The Link Your Classhttps://bbs.csdn.net/forums/MUEE308FZU202201?category=0
The Link of Requirement of This Assignmenthttps://bbs.csdn.net/topics/608858956
The Aim of This AssignmentLearn prototype design
MU STU ID and FZU STU ID<20124279_832001119>
Teammate's MU STU ID and FZU STU ID<20124074_832001104>
Teammate's blog linkhttps://bbs.csdn.net/topics/609001827

Contents

  • 1. PSP Table
  • 2. Requirements Analysis
  • 2.1 Project Background
  • 2.2 User Analysis & Identification of Functions
  • 2.3 NABCD Model Analysis
  • N (Need)
  • A (Approach)
  • B (Benefit)
  • C (Competitors)
  • D (Delivery)
  • 3. Prototype Model
  • 3.1 Prototype Tool
  • 3.2 Visual Design Principle
  • 3.3 Low-fi Prototype & Interactive Design
  • 3.4 Logo Design
  • 3.5 UI Interfacial Design
  • 3.6 Prototype Display Online Link
  • 4. Pair Work Photo
  • 5. Summary

1. PSP Table

Personal Software Process StagesEstimated time(min)Actual Time(min)
Planning2015
Estimate1010
Development2020
Analysis3035
Design Spec90100
Design Review3030
Test1010
Reporting5050
Postmortem&Process Improvement3030
Summary290300

2. Requirements Analysis

2.1 Project Background

For holding a Mid-Autumn Festival event (Bobing) in the laboratory yesterday, but the rules need to be manually determined, the dice equipment is not complete, and remote students cannot participate in the epidemic prevention and control.

2.2 User Analysis & Identification of Functions

Analyzing the project background, we made a comprehensive consideration, and summarized the following pain points and the corresponding functions.

img

2.3 NABCD Model Analysis

N (Need)

The target user of our APP is the epidemic of college students. We designed the Mooncake Gambling for students who did not have game items (dice and bowls) and were unable to reunite with their families due to epidemic control. At the same time, connected with the characteristics of the international college, taking into account the overseas dissemination of the Bobing culture, we use English to design the APP.

A (Approach)

We combine students' offline group building and online playing, trying to simulate the real scene of Bobing: 2D simulate six dice rotating in the bowl, and randomly generate six points; click throwing will include the sound effect of dice falling into the bowl, giving users a more realistic experience.

B (Benefit)

1.China-fashion style design. Modern design integrating traditional Chinese elements is more inclusive to international friends and more in line with the aesthetic appreciation of contemporary young people.
2.Multipeople play online. It solves the problem of offline inability to reunite due to epidemic isolation.

C (Competitors)

We have analyzed the competing products of the existing Bobing mini program, and the results are as follows:

img

D (Delivery)

img

3. Prototype Model

3.1 Prototype Tool

Axure

img

3.2 Visual Design Principle

3.3 Low-fi Prototype & Interactive Design

img

3.4 Logo Design

img

3.5 UI Interfacial Design

img

img

img

img

img

img

https://hyiyqb.axshare.com/

4. Pair Work Photo

img

5. Summary

Through this protodesign, we learned a lot:
1.Use of Axure prototype tools and dynamic efficiency design.
We were familiar with XD and Figma before, but in this Lab, we met with complex dynamics (the generation of six random dice and animation). So I completely jumped out of my comfort zone, and re-learned the use of Axure, and achieved good results.
2.I learned the demand analysis and writing method.
3.The UI design specifications were reviewed in detail.

The next questions are faced:
1.Page switching is too slow, we can speed it up.
2.We can add a proper soundtrack to the game.
3.We can add the ability to store data, and can also try to make the game online

...全文
219 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
cms-Cloud后台管理系统 cms-Cloud 基于Spring Boot、Spring Cloud & Alibaba、OAuth2的前后端分离的后台管理系统,内置模块如:部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、代码生成等。在线定时任务配置;支持集群,支持多数据源。核心技术前端技术栈 ES6、vue、vuex、vue-router、vue-cli、axios、element-ui后端技术栈 Spring Boot、Spring Cloud & Alibaba、OAuth2系统需求JDK >= 1.8MySQL >= 5.5Maven >= 3.0主要特性1. 完全响应式布局(支持电脑、平板、手机等所有主流设备)2. 强大的一键生成功能(包括控制器、模型、视图、菜单等)3. 支持多数据源,简单配置即可实现切换。4. 支持按钮及数据权限,可自定义部门数据权限。5. 对常用js插件进行二次封装,使js代码变得简洁,更加易维护6. 完善的XSS防范及脚本过滤,彻底杜绝XSS攻击7. Maven多项目依赖,模块及插件分项目,尽量松耦合,方便模块升级、增减模块。8. 国际化支持,服务端及客户端支持9. 完善的日志记录体系简单注解即可实现技术选型1、系统环境Java EE 8Servlet 3.0Apache Maven 32、主框架Spring Boot 2.2Spring Cloud Hoxton.SR3Spring Framework 5.1Spring Security 5.13、持久层Apache MyBatis 3.4Alibaba Druid 1.14、视图层Vue 2.6Axios 0.18Element UI 2.11内置功能(1) 用户管理:用户是系统操作者,该功能主要完成系统用户配置。(2) 部门管理:配置系统组织机构(公司、部门、小组),树结构展现支持数据权限。(3) 岗位管理:配置系统用户所属担任职务。(4) 菜单管理:配置系统菜单,操作权限,按钮权限标识等。(5) 角色管理:角色菜单权限分配、设置角色按机构进行数据范围权限划分。(6) 字典管理:对系统中经常使用的一些较为固定的数据进行维护。(7) 参数管理:对系统动态配置常用参数。(8) 通知公告:系统通知公告信息发布维护。(9) 操作日志:系统正常操作日志记录和查询;系统异常信息日志记录和查询。(10) 登录日志:系统登录日志记录查询包含登录异常。(11) 在线用户:当前系统中活跃用户状态监控。(12) 定时任务:在线(添加、修改、删除)任务调度包含执行结果日志。(13) 代码生成:前后端代码的生成(java、html、xml、sql)支持CRUD下载 。(14) 系统接口:根据业务代码自动生成相关的api接口文档。(15) 服务监控:监视当前系统CPU、内存、磁盘、堆栈等相关信息。(16) 在线构建器:拖动表单元素生成相应的HTML代码。(17) 连接池监视:监视当期系统数据库连接池状态,可进行分析SQL找出系统性能瓶颈。 环境部署准备工作JDK >= 1.8 (推荐1.8版本)Mysql >= 5.5.0 (推荐5.7版本)Redis >= 3.0Maven >= 3.0Node >= 10nacos >= 1.1.0sentinel >= 1.6.0运行系统因为本项目是前后端分离的,所以需要前后端都启动好,才能进行访问。后端运行1、导入cms到Eclipse,菜单 File -> Import,然后选择 Maven -> Existing Maven Projects,点击 Next> 按钮,选择工作目录,然后点击 Finish 按钮,即可成功导入Eclipse会自动加载Maven依赖包,初次加载会比较慢(根据自身网络情况而定)2、创建数据库cms-cloud并导入数据脚本cms.sql(必须),quartz.sql(可选)3、创建数据库cms-config并导入数据脚本cms_config.sql(必须)4、配置nacos持久化,修改conf/application.properties文件,增加支持mysql数据源配置。# db mysqlspring.datasource.platform=mysqldb.num=1db.url.0=jdbc:mysql://localhost:3306/cms-config?characterEncoding=utf8&connectTimeout=1000&socketTimeout=3000&autoReconnect=true&useUnicode=true&useSSL=false&serverTimezone=UTCdb.user=rootdb.password=password5、打开运行基础模块(启动没有先后顺序)CmsGatewayApplication (网关模块 必须)CmsAuthApplication (认证模块 必须)CmsSystemApplication (系统模块 必须)CmsMonitorApplication (监控中心 可选)CmsGenApplication (代码生成 可选)CmsJobApplication (定时任务 可选)CmsFileApplication (文件服务 可选)前端运行# 进入项目目录cd cms-ui# 安装依赖npm install# 强烈建议不要用直接使用 cnpm 安装,会有各种诡异的 bug,可以通过重新指定 registry 来解决 npm 安装速度慢的问题。npm install --registry=https://registry.npm.taobao.org 本地开发 启动项目npm run dev打开浏览器,输入:http://localhost:80 (默认账户 admin/admin123)若能正确展示登录页面,并能成功登录,菜单及页面展示正常,则表明环境搭建成功提示前端安装完node后,最好设置下淘宝的镜像源,不建议使用cnpm(可能会出现奇怪的问题)部署系统因为本项目是前后端分离的,所以需要前后端都部署好,才能进行访问后端部署bin/package.bat 在项目的目录下执行然后会在项目下生成 target文件夹包含 war 或jar1、jar部署方式使用命令行执行:java –jar xxxx.jar 或者执行脚本:bin/run.bat2、war部署方式pom.xml packaging修改为war 放入tomcat服务器webapps提示SpringBoot去除内嵌tomcat前端部署当项目开发完毕,只需要运行一行命令就可以打包你的应用# 打包正式环境npm run build:prod# 打包预发布环境npm run build:stage构建打包成功之后,会在根目录生成 dist 文件夹,里面就是构建打包好的文件,通常是 ***.js 、***.css、index.html 等静态文件。通常情况下 dist 文件夹的静态文件发布到你的 nginx 或者静态服务器即可,其中的 index.html 是后台服务的入口页面。环境变量所有测试环境或者正式环境变量的配置都在 .env.development (opens new window)等 .env.xxxx文件中。它们都会通过 webpack.DefinePlugin 插件注入到全局。常见问题如果使用Mac 需要修改application.yml文件路径profile如果使用Linux 提示表不存在,设置大小写敏感配置在/etc/my.cnf 添加lower_case_table_names=1,重启MYSQL服务如果提示当前权限不足,无法写入文件请检查profile是否可读可写,或者无法访问此目录

285

社区成员

发帖
与我相关
我的任务
社区描述
福州大学 梅努斯国际工程学院 软件工程(2022秋) 教学
软件工程 高校
社区管理员
  • LinQF39
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧