随着时代的飞速发展，人们的胃口和审美也在不断升级，从最初的吃饱穿暖，到现在追求身心双健的高阶生活哲学。这个高阶生活哲学里，身体健康跟体育锻炼手拉手，心理健康跟社交活动肩并肩，这不，近年来火得一塌糊涂的互联网约球应用就应运而生啦！这些应用不仅把运动场地的老板们串成一串，把场地资源整理得井井有条，给大伙儿提供最新鲜的场地信息；还提供了组织集体活动的超级功能，不管是老朋友还是新面孔，都能在网上轻松召集一场球赛，线上线下都能找到志同道合的球友，一起挥洒汗水，享受运动的乐趣！

设计思路

1.业务模型

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

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

2.原型结构

1）原型尺寸

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

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

2）页面整体结构

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

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

3）单页面板块结构

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

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