7.2 停车管理系统展示

项目实施：停车管理系统展示项目分析实现过程扩展训练深入理解停车管理系统的项目分析方法掌握从用户需求调研到功能分析、原型设计的全流程知识熟练运用原型设计工具进行APP的原型设计熟悉人工智能在软件工程各开发阶段的应用原理项目分析01停车管理系统分为用户前台和管理后台两类，前台面向广大停车场用户，提供停车相关服务，基于使用的便利性，用户前台通过移动端APP呈现。后台则面向停车场管理员，提供停车位管理、车辆管理、收费管理等功能，管理后台可通过Web端呈现。在本项目中我们主要实现用户前台的需求分析，并使用原型设计工具墨刀设计一个高保真原型图。项目分析实现过程02通过用户调研规划制定访谈指南和问卷调查表，重点关注用户痛点（如找车位难、支付繁琐等），确保问题覆盖全面。选择具有代表性的用户群体进行访谈或问卷调查，以保证数据的广泛性和代表性。收集用户对于现有停车服务的意见和对新系统功能的期望。识别共性问题和特殊需求，整理出关键改进点和新增功能建议。比如对于该系统用户可能的需求有：用户希望快速找到空闲车位用户希望能够看到停车时长信息和停车费用用户希望能够提前预订车位用户希望支付流程简化，支持多种支付方式用户希望方便地查看停车历史记录用户希望能够提供反馈渠道实现过程—步骤一/用户需求分析在需求调研阶段，还需要初步确定导航结构，用户需求可以为导航栏的设计提供初步方向。APP的导航是指用户在应用内移动和访问不同功能或信息的方式。它通过菜单、按钮和其他交互元素，帮助用户理解应用结构，快速找到所需功能。在此阶段可以根据用户的高频需求和使用场景，大致规划出主要的导航模块。例如，在停车管理系统中，用户可能会频繁使用“查找车位”、“支付”等功能，因此可以初步设定“首页”、“预订”、“支付”、“我的”4个导航模块。实现过程—步骤一/用户需求分析根据用户需求描述，将需求转化为系统功能。系统的部分功能描述如下表所示。用户需求描述功能描述功能模块用户希望快速找到空闲车位实时展示当前停车场的总车位数、已占用车位数和空余车位数；实时车位信息展示快捷入口，支持检索和各个停车场列表查看，便于快速查找空余车位。车位查找快捷入口，可以查看车位信息，并导航至选定车位。去停车用户希望能够看到停车时长信息和卡内剩余余额显示用户的停车时长信息及卡内余额，确保用户了解费用情况。停车时长与余额用户希望能够提前预订车位支持在线预订车位，用户可以提前选择并锁定车位，确保到达时有车位可用。在线预订用户希望支付流程简化，支持多种支付方式提供多种支付方式（如移动支付、信用卡等），简化支付流程，支持一键支付和自动扣费设置。多种支付方式用户希望方便地查看停车历史记录提供停车历史记录查询功能，用户可以查看过去的停车地点、时间和费用明细。历史记录查询用户希望能够提供反馈渠道提供帮助文档、常见问题解答及用户反馈渠道，便于用户提出意见和解决问题。帮助与反馈实现过程—步骤二/系统功能分析接下来细化导航菜单与功能分配：当具体的功能描述逐步明确后，可以根据功能的重要性和使用频率进一步细化导航菜单，并将各个功能合理地分配到对应的导航模块中。此时应确保每个功能都能被用户轻松找到，同时避免导航栏过于复杂或冗长。系统的导航菜单与功能分配参考见下表：导航模块功能模块描述首页实时车位信息展示显示当前停车场的总车位数、已占用车位数和空余车位数。去停车快捷入口，可以查看车位信息，并导航至选定车位。车位查找快捷入口，支持检索和各个停车场列表查看，便于快速查找空余车位。停车时长与费用显示用户的停车时长信息及停车费。活动与优惠展示最新的停车优惠活动。预订在线预订用户可以选择并锁定特定时间的车位，确保到达时有车位可用。车位详情查看具体车位的详细信息，包括价格、类型。取消预订允许用户在必要时取消预订。实现过程—步骤二/系统功能分析导航模块功能模块描述支付多种支付方式支持多种支付方式，如微信支付、支付宝、银行卡等。费用明细显示本次停车的具体费用明细。自动扣费设置用户可以设置自动扣费选项，简化支付流程。支付历史查看近期的支付记录。我的个人信息管理编辑和管理用户的个人信息。账户设置修改密码、绑定手机号码等。优惠券管理查看和使用已有的停车优惠券。历史记录查询查看过去的停车记录和费用明细。帮助与反馈提供帮助文档、常见问题解答及用户反馈渠道。通知设置管理接收通知的方式和内容。实现过程—步骤二/系统功能分析原型图是APP或网站的一个简化、初步的设计版本，用来展示页面布局和基本功能。它就像是建造房子前的草图，帮助设计师、开发者和用户理解最终产品的大致样子和操作流程。在设计系统原型图之前，首先需要进行结构设计，将内容合理划分为易于理解和导航的层级，明确每个层级的具体内容及它们之间的跳转关系。这样可以确保信息组织清晰，用户能够轻松找到所需功能和信息。我们以首页模块为例，使用思维导图来绘制结构图。实现过程—步骤三/UI原型设计接下来我们依据首页的结构图，使用墨刀原型工具来设计首页的高保真原型图。墨刀是一款专为设计师和产品经理打造的在线原型设计工具，广泛应用于UI/UX设计、产品规划和团队协作。它提供了从草图到高保真原型的完整设计流程支持，帮助用户快速创建交互式原型，并进行实时预览和分享。进入墨刀官网，点击“进入工作区”按钮。并使用账号登录或注册新账号。实现过程—步骤三/UI原型设计①工作区首页介绍：登录成功后会看到下图所示的界面。实现过程—步骤三/UI原型设计②新建原型：点击上图中的“新建”按钮，选择“原型”，进入下图所示的新建原型界面。官方提供了APP、小程序、Web网站等的原型模型。在新建时可以选择官方提供的已经完成的原型然后在此基础上修改，也可以新建空白原型，自行设计。本项目选择新建空白原型，然后点击确定。实现过程—步骤三/UI原型设计③原型设计界面介绍：墨刀原型设计界面各模块的功能描述如下图所示。实现过程—步骤三/UI原型设计④重命名项目：点击下图所示的向下的箭头，选择“重命名”可更改项目名称。或者鼠标双击选中项目名称直接修改即可。实现过程—步骤三/UI原型设计⑤画布与页面管理：画布是整个设计项目的主工作区，提供了灵活的布局调整和多页面管理功能。在一个大型项目中，页面会有很多，所以可以将页面分模块（画布）进行管理。比如在停车管理系统中有首页、车位预订、支付、我的模块，所以可以创建多个画布，然后在不同的画布下新建各自的页面。页面是具体的屏幕或场景设计单元，允许设计师在不同页面间建立交互连接，模拟真实应用的使用流程。鼠标点击选中页面后还可以通过右侧的外观属性区设置页面的宽高、背景颜色等样式。实现过程—步骤三/UI原型设计在设计前我们需要先确定APP的主色调，通常用于导航栏、按钮等重要元素。本项目我们使用蓝色作为主色调。本项目的底部导航栏包括首页、预订、支付、我的四个模块，在呈现方式上我们通过图文上下排列的形式。这也是各APP常见的导航效果。图标、图形设计、文本等我们使用墨刀自带的组件库（如基础图形、表单、多媒体、图表等）、图标库。直接拖拽到画布上使用即可。为使导航栏和内容区有所区分，所以我们在组件菜单库中使用一个矩形作为导航条的背景色，设置填充为灰色。实现过程—步骤三/UI原型设计首先，在图标菜单库中搜索并选择适合的图标，然后将它们拖动到底部背景区域。按住Shift键，依次选中四个图标。接着，同时修改这些图标的宽高和填充颜色。在对齐选项中，选择底部对齐并水平等间距排列，以确保它们排列整齐，并位于底部背景的合适位置。如下图所示。实现过程—步骤三/UI原型设计在调整位置时，可以使用鼠标拖动或者使用键盘的上下左右键进行微调。为了防止在拖动时图标位置发生错乱，可以将四个图标进行组合。接下来按照同样的方式，插入图标对应的文本，并修改“首页”文本和首页图标为蓝色，以区分当前选中页。文字的设置这里就不再赘述。底部导航条的最终效果如下图所示。实现过程—步骤三/UI原型设计接下来设计活动与优惠功能，该功能通过轮播图来展示，当点击图片时可跳转到对应的活动介绍页面。①插入轮播图组件：首先从组件菜单库的多媒体组件中拖出轮播图组件，在右侧设置面板中「轮播图图片」部分，鼠标悬浮于右下角「···」按钮，可以选择从「本地上传」或者是从「素材库中」上传图片。最右侧的加号即可添加图片数量。实现过程—步骤三/UI原型设计②设置轮播效果：这里我们设置轮播图片为3张，设置其滚动方向为横向，每隔3秒进行切换。轮播点默认为白色，选中时为蓝色。实现过程—步骤三/UI原型设计③设置跳转链接：在右侧外观栏内相应图片中，点击需要设置跳转的图片，在其图片上方点击小闪电标志添加交互事件。事件有点击、滑动、长按等。为事件添加触发后的行为（如跳转页面、显示/隐藏元素等）。为行为选择预设动画效果（如淡入淡出、滑动等），增强用户体验。如右图所示，我们假设先设置其的跳转页面为查找车位页，动效为右弹入。实现过程—步骤三/UI原型设计然后点击右上角的播放演示按钮即可查看效果。该APP首页的最终效果如右图所示。首页剩余部分的设计这里就不再赘述，可参考下面的原型图自行完善。实现过程—步骤三/UI原型设计扩展训练03请参考项目实现过程中的功能描述完善预订、支付、我的模块的原型设计图。该过程包括使用思维导图绘制模块结构图，基于结构图创建详细的原型图，要求如下。①新建项目：登录墨刀点击“新建”项目，选择合适的设备尺寸。②新建画布：每个模块（预订、支付、我的）分别创建一个独立的画布。在每个画布下根据需要添加多个子页面。③构建界面：利用墨刀提供的常用UI组件（如按钮、文本框、导航栏、图标等），快速构建界面。④色彩搭配：选择符合品牌形象的主色调和辅助色，确保整体视觉效果和谐统一。使用中性色（如白色、灰色）作为背景色，保持界面简洁明了。扩展训练⑤组件放置：根据用户体验原则，合理安排组件的位置，确保重要功能易于访问。使用对齐工具和网格线保证布局整齐有序。⑥添加交互事件：设