一、设计思路

1.业务模型

约球类业务模型需要具备交易撮合和社交交友两大特性，业务运营方需要具备较强的资源整合能力和流量运营能力才能将此类业务发展升华。

• 交易撮合是这类业务模型的生存基础。拉通上游场地资源，引入下游用户流量，在此业务平台上实现更多的供需匹配交易，是此类业务持久经营的根本。
• 社交交友是这类业务模型的生长催化剂。在多人参与的体育项目中，熟人间固化、稳定的约球自然是优质的生意形态。但这种形态的规模有限，很难提升业务的交易规模。并且这种形态是由球友自带的属性形成的，可挖掘，难培养。若要培养这种生意形态，就需要注入社交交友的业务属性。应用内，业务流程和功能上提供公开约球的途径；应用外，利用成熟的交友软件，促成球友互加好友，客服“球童”组建球友群，做私域用户运营。

2.原型结构

1）原型尺寸

此原型参照华为 Pura 70 Pro 的尺寸（1260X2844）进行缩放设计，采用 24 个格栅对页面做了分割。具体的页面尺寸规格如下：

• 高 948，宽 420
• 格栅个数 24，两侧留白尺寸 6，格栅尺寸17

2）页面整体结构

主页面由两个板块组成，分别是页面展示区和一级菜单。

1. 页面展示区是一块 inline frame 元件，通过点击下方的一级菜单，动态调整它展示的子页面。
2. 一级菜单由一个中继器实现，中继器的每一行代表一级菜单内的一个功能菜单，包括了功能菜单的图片和功能名。点击不同的功能菜单，在上方的页面展示区切换显示不同的子页面。

3）单页面板块结构

嵌套的子页面由 6 部分组成，分别是上图可以看见的手机顶部区域、小程序标题区域、主功能展示区域和底部功能区域，以及上图未展示的弹出框区域和自动消失提示框区域。

1. 手机顶部区域是一个相对固定的区域，基本不会有什么变动，采用母版实现。
2. 小程序标题区域没有采用母版实现，主要因为回退按钮和标题在不同子页面的交互动作差异比较大。
3. 主功能展示区域由两层动态面板组成，一个外部，一个内部，通过动态面板的 drag交互动作实现功能展示区超长内容的上下滑动。
4. 底部功能区域是一块动态面板，根据页面的业务需求，包含多个 stat 的功能按钮组合。
5. 弹出框区域是一个包含蒙层和动态面板的组合，蒙层和动态面板的大小一样，占据整个页面的大小。动态面板根据业务要求，分为居中对话框和底部对话框，分别完成信息提醒、功能二次确认和下拉选择的任务。
6. 自动消失提示框区域是居中页面的一小块半透明显示块，显示重要的功能结果提示。能够自动展示，自动消失。

3.提取&复用

此原型做了细致的内容分组，方便大家快速定位到不同区域进行查看，也可以快速复制提取想要的功能区域进行二次调整复用。后续我会根据此原型提取可复用的元件，放进一个单独的移动端元件库。

二、功能页面

1.首页

“首页”由三部分组成，从上往下分别是广告轮播区域、最新约球区域和今日球局区域。

1. 广告轮播区域每隔 3 秒自动循环轮播多个广告图，也可以通过鼠标滑动或点击轮播示意小图标查看上下页的广告图。
2. 最新约球区域分为两种状态，一是没有约球信息，可以点击按钮进入约球功能页面；二是存在约球信息（需要鼠标左滑），点击进入此约球活动的详情页面。
3. 今日球局区域以卡片的形式展示最新的约球活动，应用了鼠标左右滑动事件，显示下一条约球活动。

2.约球

“约球”页面由两部分组成，分别是查询区域和列表区域。

查询区域包括常用的 5组查询条件，分别是城市、区域、筛选、日期选项和一个排序选项。

列表区域同样采用卡片的形式展示每一个约球活动。点击后进入约球详情页面，逐步完成报名操作。

3.发布

“发布”页面是一整块约球信息的填写表单。完成一场约球活动的发布，需要经历多个步骤，分别是选择场馆，选择场地时段，完成订场支付。整个过程需要经历 4个子页面，请逐个点击查阅。

4.穿线

“穿线”板块是一个简易化的商城页面，包括包括商铺、商品、商品详情、商品订单 4个子页面。它没有购物车的概念，用户完成商品和规格的选择后，即可下单支付。

5.我的

“我的”板块包含多个功能子页面，分别是信息编辑、名片制作、我的约球、我的穿线、我的地址、储值卡和黑名单。

1. 信息编辑是一整块数据表单，用来注册用户信息和实名认证。
2. 名片制作是用户个性展示的编辑页面。
3. 我的约球展示用户已经发布或报名的约球活动。
4. 我的穿线展示用户已支付的穿线订单。
5. 我的地址展示用户的地址管理。
6. 储值卡展示用户在不同场馆拥有的储值卡信息。
7. 黑名单展示被用户打入的约球活动中爽约或体验差的球友。