为伊斯兰学校教育平台进行游戏化、用户体验和用户界面设计
作为 MBRGI 计划的一部分，我们受邀合作开发他们的伊斯兰学校教育平台。合作的目的是将用户体验游戏化，通过用户之间的对抗鼓励他们更多、更频繁地练习。
我们设计了游戏化流程和不同的屏幕，以实现我们的目标，同时遵循项目的平台、教育和文化特点。
如今，Madrasa 为数百万用户免费提供阿拉伯语和英语的数学和科学课程。
Ux：主页 Wireframind，V1。 Madrasa 主页概念：全民电子学习。
该图显示了在线教育平台 Madrasa 主页初始版本的线框图。关键元素包括专门用于用户简介、新闻以及获胜者或比赛介绍的部分。在中心，一个名为“学习路径”的部分提供了一个搜索引擎和带有指定点的交互式进度图。底部包含有关该平台的愿景、目标和功能的信息，以及 Android 和 iOS 应用程序的下载链接。
Ui：个人资料页面的最终确定。宗教学校动态主页。
该图展示了 Madrasa 电子学习平台主页的最终版本。顶部有一条横幅，邀请用户成为所在国家/地区的最佳人选，同时还重点介绍了获奖者和奖项。中间部分有一个交互式“学习路径”，其中包含丰富多彩的类别和进度点。一个盒子突出了穆罕默德·本·拉希德·阿勒马克图姆鼓舞人心的名言。该平台在底部概述了其使命、愿景和目标，并附有 iOS 和 Android 上应用程序的下载链接，所有应用程序均采用紫色和白色调色板，呈现出有吸引力且专业的设计。
Ui：创建弹出窗口。选择头像。头像定制 – Madrasa。
该图显示了 Madrasa 平台上专门用于头像定制的弹出窗口。主要区域展示了一系列带有各种配件和主题的插图恐龙图标。每个图标都附有一个图例，指示需要解锁的点数。已解锁的项目是彩色的，而锁定的项目是灰色的，并带有“锁定”徽章。紫色背景的界面简单而有吸引力，鼓励用户在平台上互动并个性化他们的体验。
Ux：个人资料页面的线框图。 Madrasa 上的交互式用户个人资料。
该图展示了 Madrasa 教育平台上“我的个人资料”页面的模型。顶部显示用户的等级和昵称，以及用于提高等级的按钮。 “每日课程”部分提供了一个教育视频，观看后可以赚取积分。再往下，显示了一系列徽章，表明用户在不同类别中取得的成就。最后，“观看列表”和“我的最后 5 节课”列表允许您跟踪已观看或将观看的视频，以及每个内容的关联点。该设计直观，强调互动性和学习者参与度。
Ui：创建地图弹出窗口。埃及宗教学校前 10 位用户。
该图显示了埃及 Madrasa 教育平台上前 10 位用户排名的模型。每个排名（从第 1 名到第 10 名）都附有用户昵称、头像和已完成视频数量的指示（此处为每个用户 50 个视频）。排行榜分为两栏，设计清晰，紫色独特。顶部显示国家名称及其国旗，增强了平台的竞争性和社区性。
Ui：最终确定我的个人资料模型。 Madrasa 上的用户个人资料页面。
该图显示了 Madrasa 教育平台上的用户个人资料页面。在顶部，排名和积分以标志性的金色奖杯视觉效果显示。下一部分将介绍每日课程，并附有教育视频和观看视频可获得的积分。再往下，“徽章”部分用彩色图标显示了获得或要解锁的不同区别。最后，用户可以查阅他们的“观看列表”和“最后 5 节课”，按类别和获得的积分进行组织。该页面采用简洁的设计和紫色，这是宗教学校图形章程的典型特征。
用户界面;学习路径模型的最终确定。宗教学校教育之旅。
该图像代表宗教学校的“学习路径”部分。在页面顶部，有一条消息祝贺用户当前的排名和积分。中央部分列出了不同的教育路径（“路径列表”），其中包含有关要获得的积分、视频数量以及完成它们的预计时间的信息。下面，视频播放器显示了一个示例课程，其中包含教育科学内容。右侧的“路径观察列表”允许用户跟踪他们的学习情况。布局清晰直观，紫色调与平台的视觉形象相对应。
Ui：排行榜模型。宗教学校的排名和表现。
此图显示了 Madrasa 的排行榜部分，用户可以在其中查看基于累积积分的排行榜。上部显示一条祝贺信息，其中包含当前用户的排名和积分。主排行榜显示前 100 位用户的排名、积分和头像。再往下，具体排名按类别（A、B、C）划分，每个部分都有彩色标签。底部部分使用阿拉伯国家的交互式地图展示了“按国家/地区排名前 10 位”，其中紫色标记表示活跃位置。紫色和蓝色调色板反映了 Madrasa 的视觉形象，提供了清晰且引人入胜的用户体验。
Ux：主页 Wireframind，V2。 Madrasa 主页模型（版本 2）。
此图显示了拟议的 Madrasa 主页的线框图，展示了清晰且有组织的布局。顶部部分包括竞赛和获奖者的号召性用语，后面是选择学习领域的部分。另一部分以地图和进度指示器的形式提供教育路径。用户还可以使用登录或帐户创建按钮来跟踪他们的进度。底部的“关于”部分描述了 Madrasa 的使命、愿景和目标，而按钮则允许您下载移动应用程序。布局采用圆形和流畅的过渡，增强了愉快和直观的导航。
