原型设计——摹客RP项目实践

2023-10-11 16:40

本文主要是介绍原型设计——摹客RP项目实践,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

原型设计的定义

原型设计工具介绍

项目准备——需求梳理

摹客RP项目实践——培训机构管理系统

一、用户登录

登录页面设计

找回密码页面设计

 二、用户首页

教务员首页设计

​编辑

教师首页设计

学生首页设计

三、教务员用户的五大核心模块 

教师管理模块页面设计

科目管理模块页面设计

课表管理模块页面设计

四、教师用户的三大核心模块 

课表管理模块页面设计

五、学生用户的三大核心模块 

报名管理模块页面设计

六、个人中心 

七、消息 

八、总结


原型设计的定义

        原型设计是产品经理将需求可视化的一个过程,它的产出物——原型图是展示系统的有力工具,是产品经理向执行团队进行阐述和说明需求的高效工具。借助原型图,产品经理可以对网站布局和功能等进行一一说明,给开发团队提供一个清晰的概念,清楚各自的职责是要做什么,尤其有助于前端人员进行布局设计以及后端人员进行接口定义,从而各司其职地同步系统开发。

 原型设计工具介绍

        没有最好的原型设计工具,只有最适合的原型设计工具! 客观来说,付出与收益是等价的。操作难度越高的原型设计工具,其功能越全面,反之亦然。但敏捷开发的思想警示我们,“可工作软件胜过面面俱到的文档”。从现实出发,我们不仅要考虑设计的完整性,同时也应该考虑时间效益,从而平衡两者之间的关系,找到一款适用于自身、适用于项目的原型工具。为了方便读者选择合适的原型工具,笔者将市面上几款热门的原型工具进行了整理,并根据使用难度从低到高进行评估。

        第一款,摹客RP,它是原型工具的后起之秀,堪称UI设计师的交互演示利器,在交互的设置上多以创建热区为基础,点击热区跳转页面为主要功能,几乎不需要任何学习成本,也没有什么操作难度。非常适合初学者!

        第二款,Mockplus,它是进行交互设计的好帮手,特点是设计上相对的轻便快捷,它直接提供高度封装组件,化简为繁,是懒人的天堂,学习成本和操作难度相对于摹客RP要高一些。非常适合进阶者!

        第三款,Axure RP,它应该是大家更为熟悉的一个,大家对它又爱又恨,爱在于它把设计难度和可用性平衡得比较好,恨在于它的变量、判断等功能对交互设计师并不是很友好。非常适合高阶者!

项目准备——需求梳理

        摹客RP是一款十分适合初学者的原型设计工具,下面笔者将通过一个培训机构管理系统,通过原型图的展示,来对幕客RP进行更加深入的讲解。在实践开始之前,请允许我先介绍系统相关需求:

  •  本培训机构管理系统有教务员、教师、学生三种用户角色
  • 课程信息、课表信息、教师信息、学生信息、作业信息都可以被管理。
  • 教务员给教师安排具体的上课时间。
  • 学生可以自己选择上课时间也可以接受机构提供的上课时间。
  • 支持自动在课前发上课提醒,从而提高出勤率。
  • 课程确定后,上课信息可以推送给教师和学生。
  • 教师可以发布作业,作业可以包含文字、图片。
  • 教师可以批改作业,给出评语,把优秀作业进行展示。
  • 家长(学生)可以查看自己作业的成绩和评语。
  • 家长(学生)可以对自己上的课程留言。
  • 教师可以查看回复管理留言。 

 摹客RP项目实践——培训机构管理系统

一、用户登录

        教务员、教师、学生三种用户角色初始密码为8888,首次登录时,用户跳转至修改密码页面,设置新的密码;非首次登录时,跳转至各自的用户首页。

  • 登录页面设计:

  •  找回密码页面设计:

 二、用户首页

        用户首页包括网址名、首页标语、网站数据展示、导航栏、用户名、用户身份以及退出登录, 不同用户会看到不同的网站数据和导航栏。

  • 教务员首页设计:
  •  教师首页设计:

  •  学生首页设计:

三、教务员用户的五大核心模块 

        教务员用户的增删改查操作包括教务员管理模块、教师管理模块、学生管理模块、科目管理模块和课表管理模块。

  • 教务员管理模块页面设计:

  • 教师管理模块页面设计:

  • 学生管理模块页面设计:

  • 科目管理模块页面设计:

  • 课表管理模块页面设计:

四、教师用户的三大核心模块 

        教师用户的增删改查操作包括课表管理模块、作业管理模块和留言管理模块。

  • 课表管理模块页面设计:

  • 作业管理模块页面设计:

  •  留言管理模块页面设计:

 

五、学生用户的三大核心模块 

        学生用户的增删改查操作包括报名管理模块、课表管理模块和作业管理模块。

  • 报名管理模块页面设计:

  • 课表管理模块页面设计:

  • 作业管理模块页面设计: 

六、个人中心 

        三种系统用户都拥有个人中心,可以查看个人信息,修改个人基础信息,修改密码。由于三种用户的信息查看、修改页面大同小异,下面仅以学生用户代例。

七、消息 

        三种系统用户都会收到消息,但是教务员收到的消息类型与教师和学生不同,教务员会收到排课请求消息,教师和学生会收到上课、结课、课程修改以及排课成功消息。由于教师和学生收到的消息类型一致,仅有个别消息信息有细微差别,故下面仅以学生收到的消息为例。

 八、总结

        画好原型图几乎是每一个产品经理的必经之路,以上仅代表本人的一些学习经历,仍有许多不足,但学习一直在路上,请各位大神读者不吝赐教!

这篇关于原型设计——摹客RP项目实践的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/189400

相关文章

不懂推荐算法也能设计推荐系统

本文以商业化应用推荐为例,告诉我们不懂推荐算法的产品,也能从产品侧出发, 设计出一款不错的推荐系统。 相信很多新手产品,看到算法二字,多是懵圈的。 什么排序算法、最短路径等都是相对传统的算法(注:传统是指科班出身的产品都会接触过)。但对于推荐算法,多数产品对着网上搜到的资源,都会无从下手。特别当某些推荐算法 和 “AI”扯上关系后,更是加大了理解的难度。 但,不了解推荐算法,就无法做推荐系

基于MySQL Binlog的Elasticsearch数据同步实践

一、为什么要做 随着马蜂窝的逐渐发展,我们的业务数据越来越多,单纯使用 MySQL 已经不能满足我们的数据查询需求,例如对于商品、订单等数据的多维度检索。 使用 Elasticsearch 存储业务数据可以很好的解决我们业务中的搜索需求。而数据进行异构存储后,随之而来的就是数据同步的问题。 二、现有方法及问题 对于数据同步,我们目前的解决方案是建立数据中间表。把需要检索的业务数据,统一放到一张M

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

如何用Docker运行Django项目

本章教程,介绍如何用Docker创建一个Django,并运行能够访问。 一、拉取镜像 这里我们使用python3.11版本的docker镜像 docker pull python:3.11 二、运行容器 这里我们将容器内部的8080端口,映射到宿主机的80端口上。 docker run -itd --name python311 -p

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

在cscode中通过maven创建java项目

在cscode中创建java项目 可以通过博客完成maven的导入 建立maven项目 使用快捷键 Ctrl + Shift + P 建立一个 Maven 项目 1 Ctrl + Shift + P 打开输入框2 输入 "> java create"3 选择 maven4 选择 No Archetype5 输入 域名6 输入项目名称7 建立一个文件目录存放项目,文件名一般为项目名8 确定

系统架构师考试学习笔记第三篇——架构设计高级知识(20)通信系统架构设计理论与实践

本章知识考点:         第20课时主要学习通信系统架构设计的理论和工作中的实践。根据新版考试大纲,本课时知识点会涉及案例分析题(25分),而在历年考试中,案例题对该部分内容的考查并不多,虽在综合知识选择题目中经常考查,但分值也不高。本课时内容侧重于对知识点的记忆和理解,按照以往的出题规律,通信系统架构设计基础知识点多来源于教材内的基础网络设备、网络架构和教材外最新时事热点技术。本课时知识

怎么让1台电脑共享给7人同时流畅设计

在当今的创意设计与数字内容生产领域,图形工作站以其强大的计算能力、专业的图形处理能力和稳定的系统性能,成为了众多设计师、动画师、视频编辑师等创意工作者的必备工具。 设计团队面临资源有限,比如只有一台高性能电脑时,如何高效地让七人同时流畅地进行设计工作,便成为了一个亟待解决的问题。 一、硬件升级与配置 1.高性能处理器(CPU):选择多核、高线程的处理器,例如Intel的至强系列或AMD的Ry

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

基于51单片机的自动转向修复系统的设计与实现

文章目录 前言资料获取设计介绍功能介绍设计清单具体实现截图参考文献设计获取 前言 💗博主介绍:✌全网粉丝10W+,CSDN特邀作者、博客专家、CSDN新星计划导师,一名热衷于单片机技术探索与分享的博主、专注于 精通51/STM32/MSP430/AVR等单片机设计 主要对象是咱们电子相关专业的大学生,希望您们都共创辉煌!✌💗 👇🏻 精彩专栏 推荐订阅👇🏻 单片机