大家好，我们是来自华中赛区的NCHU_文体两开花团队，意在文娱与体育，两面皆开花。 一、开篇 在路上，开着导航，副驾驶吐槽司机：“你又开错路了！路口慢点，赶紧找地方还车！” 在饭店，老师诧异着：“他们俩怎么还没过来？啥？你们租车去玩的？” 这就是我们在长沙最后一天的缩影——一群富有朝气的年轻人和两位负责的老师，喜悦地享受着长沙之行的尾巴。 我们是开心的，也是痛苦的。不过，好的是先经历了痛苦，后品尝了快乐。时光拉回到比赛前一天的晚上，为了使现场演示和答辩达到更好的效果，团队全体准备到凌晨3点，从一次次的排练，到PPT版本的兼容性，每一个细节，都尽心准备着。多少个日夜的辛苦，最终成就了我们的故事。 从南昌到长沙的一路走来，我们成长着、蜕变着。其中点点滴滴，心路历程，技术经验，无不是我们想要分享的。 二、源起，Attack！足球！ 为什么是Attack 足球？最初的Attack 足球，本是为南昌航空大学软件学院足球队能更好的在比赛中发挥而定做的。“我们不仅是足球队的一员，还是软件学院的一名学生，具有得天独厚的优势。如果将足球战术板与软件结合到一起，会碰撞出怎样奇妙的火花呢？”这句话，是我们在 《【征文大学篇】Attack！足球！》 对Attack 足球的一段描述。 [图片] 软件学院足球队，在战术讲解方面遇到了多种问题，我们本希望开发一款小程序，帮助其解决这些困难。但随着对产品的深入理解，不禁反问自己，既然软件足球队有使用战术板的不便，那么其他球队有没有这种不便呢？能不能做一款普适大众的 APP，让更多有需求的校园球队，享受Attack 足球带来的便利呢？ 三、市场分析，产品定位 要从哪几个方面去分析一个产品呢？在所做的工作中，我们选取了市场调研、应用场景、用户三个角度为大家进行分析，希望我们的思路能对大家有帮助。 既然有了方向，便要付出行动。经过研究调查，2019年7月23日教育部发布的《全国青少年校园足球工作报告》中指出，五年来参加小学、初中、高中、大学四级联赛学生共计1255万人次，有3万多名省(区、市)级最佳阵容的学生参加全国夏(冬)令营活动。“经过过去五年的努力，我们现在已经在全国38万所中小学中遴选认定校园足球特色学校24126所，设立校园足球改革试验区38个，遴选校园足球试点县（区）135个，在全国布局建设‘满天星’训练营47个。”教育部体育卫生与艺术教育司司长王登峰说。 校园足球目前主要集中在小、初、高、大学的校园四级联赛中，本就拥有大量的用户基数。且前有“一带一路”国际青少年足球邀请赛，后有《全国青少年校园足球工作报告》，国家政策的支持，意味着校园足球的发展前景广阔，越来越多的人会接触足球，这个群体也会愈加庞大。 有潜在用户群体，就会有市场，而Attack 足球能否在其中抓住一丝机会呢？ 从应用场景分析，战术板的使用场景可以分为三个阶段： （1）赛前的战术布置； （2）赛中的战术调整； （3）赛后的复盘分析。 显然 Attack 足球战术板不适用于赛中的战术调整阶段，因为大部分赛中的战术调整更多是临场发挥，管理人员再利用手机去调整录音发布安排效果不佳。以此为导向，Attack 足球的使用场景应集中在赛前及赛后的两个阶段。 从用户角度分析，谁才是Attack 足球的真正终端用户？教练/队长还是队员？To B or To C，这是一个问题。就目前看，教练/队长是管理和发布战术安排的用户，队员是查阅战术的用户，那么产品主要功能聚焦在数量较少的管理人员身上，是否会对用户量有实际上的影响。考虑目前国内的情况，教练员也未必是能够对足球理念和知识通透的管理者，小初高联赛中有条件的球队能够配备专业或者具备足球知识基础的教练进行指导训练，但还有大部分条件不够的球队是其他科老师进行兼职，该问题现象在大学阶段尤其显著，非校队或专业队员获得专业指导的机会少之又少。Attack 足球的问题在于，工具有了，谁来更好的使用工具。 因此，为什么一定要局限于教练/队长讲授战术的情景呢？如果能解决教与练的问题，Attack 足球战术板、战术安排、球队管理将是符合目前用户需求的一个有利导向工具，在减轻教练在绘制战术时的负担的同时，也能给予缺少专业教练球队队员获取优秀战术的机会。至此，我们将Attack 足球的产品定位定为高效、便捷提高校园足球战术素养的工具，旨在提高足球比赛赛前及赛后的两个阶段，教练讲授战术和队员学习、吸收战术的效率。 四、设计理念，足球文化 学习前人的优秀设计，总结自身的独特特点。设计大师Dieter Rams：十条优秀设计准则。足球文化：独特的设计理念。 产品定位有了，现在如何设计出一款超出用户体验预期，能够给用户带来长期价值的产品是关键。设计大师Dieter Rams曾总结出十条优秀的设计准则，我们对其进行了揣摩与解读，整理出符合Attack 足球的要点，并将其作为指导我们产品设计的准则。 Good design is innovative 与 Good design makes a product useful. Attack 足球作为一款工具类小程序，实用是基本属性。当然，创新也是Attack 足球的重要特点。Attack 足球除可以利用战术板功能绘制战术外，还能对战术进行保存，反复观看，解决了传统战术板零件携带不方便、零件易掉落，无法保存讲解战术的缺点；同时，它对应用场景进行了深度扩展，拥有实时演练功能，除用手机观看外，还可以利用PC，现场投影，供球队聚集在室内讲解战术。 Good design is aesthetic 与 Good design helps a product be understood. [图片] 如上图4-1，在UI设计方面，我们在不断的改进。Attack 足球经历了从最初的功能堆叠，到目前的结构清晰，再到即将发布的追求设计美感几个阶段。席克定律指出：面对更多选择，人们需要更多时间做出选择。某些情况下，需要花费的时间太长了，以至于他们根本做不出决定，因为决定的负担太沉重。在Attack 足球Version 1.0中，我们将所有功能铺开，用户进入小程序后很容易陷入选择的困境。而Version 2.0中，我们将功能模块化展示，界面也符合用户习惯的阅读模式——F模式。在Version 3.0中，保留了V2.0中功能模块及其布局，同时新增了功能战术库。为了不将功能杂糅在一个页面，给用户一个快速的选择反应，我们重新设计了界面，应用了导航栏,导航栏精简成三个，分别是战术板、战术库、我的。由V 2.0过渡到现在的V 3.0，我们将战术板与球队管理的功能分离，使导航栏的指向性更加明确。 Attack 足球不仅为第一次进入的用户精心准备了引导页，而且按功能模块划分了界面，使用户在不同场景下明确知道使用哪个功能模块，做到了“让产品不言自明”。 Good design is thorough to the last detail Attack 足球在每一个细节方面，都用心去思考，用心去打磨，这里举3个例子供大家参考。 （1）以引导页为例，在目前的版本中，我们的引导页只能通过点击下一步进行引导，通过思考，我们认为这是对用户不友好的。在即将推出的版本中，我们取消了这种强迫式设计，在引导页中增加了跳过与单击其他部位也可进入下一页功能。 [图片] （2）以我的球队页面为例，如上图4-2所示，Attack 足球使用了去线条化的方式，搭配卡片式设计，让页面看起来更加层次分明，干净利落。同时利用统一间距或符合五分原则、黄金比例的间距留白，区分信息的内容，将相互关联、相同或同类的内容放在一起, 使其形成一个视觉单元而不再是一个孤立的元素。这些细节的设计都是更好的帮助内容信息反馈的一种视觉形式，有助于组织信息、减少混乱、为用户提供清晰的结构。 （3）在Attack 足球战术板的功能中，之前的箭头有方向不确定的Bug，为了给用户更好的体验，我们的用心打磨，通过数学分析，目前已经解决该Bug，这个问题在下文的技术板块中也会提及。 除了吸收他人优秀的经验，我们也有属于自己的独特设计理念——将足球文化融入小程序的设计当中。如图，在初始使用界面，采用2.5D风格插画，模拟红蓝双方对垒，带来足球场的立体感。配色与图标方面，Attack 足球采用足球场的绿色作为主色调，搭配红牌黄牌的颜色，使用灰绿搭配的图标，整个画面更加明快活泼，简单大方而又不落俗套。如图，在Version 3.0 的首页，我们融入了更多的足球元素，如插画中的冠军杯、记分牌、战术板、足球、角旗杆等，并准备精心绘制每个省份的地方特色，比如天河足球场，希望给广大的足球爱好者以亲切感。 五、技术支撑，细节体现 在Attack 足球从idea变为现实的过程中，我们也遇到了很多技术难点。这里选取几个讲述，希望大家遇到相似的问题时，这些思路能够有些许帮助。 当我们的设计成型，就需要开发人员来实现了。好的产品背后必然有技术支撑，Attack 足球也不例外。我们采用分布式，基于微服务，将不同的功能部署到多个服务器中。图5-1是我们的系统总体架构。 [图片] 下面我们将从分布式服务注册发现、安全性、服务部署三个方面大致阐述一下。在阐述之前，先为大家讲述一下相关知识。 微服务是一种架构风格，一个大型复杂软件应用由一个或多个微服务组成。系统中的各个微服务可被独立部署，各个微服务之间是松耦合的。每个微服务仅关注于完成一件任务并很好地完成该任务。在所有情况下，每个任务代表着一个小的业务能力。 分布式是将系统独立分布在不同的物理机上面，其各个系统之间依赖网络来进行通信。在通信过程中处理繁多的服务器的主机与端口号、版本号、通信协议就是一个繁琐的过程，并且由于网络的隔离性，服务的状态并不能实时的被其他服务所发现。 因为分布式通信的繁琐性，我们在系统中引入了注册发现服务Eureka来实现以下功能。 服务注册：其构建一个注册中心，每个服务单元向注册中心登记自己提供的服务，将主机与端口号、版本号、通信协议告知注册中心，并为其配置相应的服务名。 服务发现：服务之间的调用不再通过IP或者Host来进行调用，而是通过其所分配的服务名来进行调用。 心跳机制：客户端将心跳发送到Eureka服务器，让服务器了解其状态,进而更新其注册中心的服务清单。 通过使用Eureka，我们将各个独立的服务注册到其上，共同组成一个分布式系统。 分布式系统不像单体系统，只需开放所需开放的端口，就可以保障系统一定的封闭性与安全性。因为资源有限，我们只能采用多个云服务器来实现。无法通过构建内网，来确保系统内部的安全性，基础服务实例的相关端口也不可避免的向公网暴露，此举带来了极大的安全隐患。 如图5-2我们开启服务端Centos的Firewall服务。Firewall 能将不同的网络连接归类到不同的信任级别。将其自身的公网IP归类到trusted zone (信任所有连接)。将其他于其有通信需求的服务器IP添加到public zone(允许指定的进入连接)，然后将其所需通信的端口与其自身的IP配置成rich rules来允许请求通过。 [图片] 这样公网只能访问到我们对外开放的两个433端口，我们只需对这两个端口的请求进行权限验证，就可以确保系统的安全性。在分布式架构中，传统的单体Session认证方案已经不能满足现有系统的需求。其服务独立分布在不同的服务器中，并且HTTP是无状态的。 传统的解决方案有以下两种： 使用共享Session机制。通过使用共享的Session缓存，各个服务的可以通过这个缓存获取的Session来进行认证,用户的权限信息保存在服务端，当系统的权限机制做出改变，可以灵活的对其进行修改 使用Token验证，将权限信息交由客户端来保存，可以减轻服务端的存储压力。每一次服务通过解析Token来验证用户的权限，需要合理设计加密机制，避免用户通过恶意更改Token来非法访问。 通过对上述两种机制的学习，我们为客户端产生唯一的身份标识符。用户的权限信息保存在Redis中，通过与客户端的身份标识符映射来确认用户的权限。这个技术方案提高了用户认证鉴定权限的效率，避免了大量的数据库和缓存查询。但是，这种方案的存在太大的性能开销，随着学习的深入，我们会在不久的将来采用JWT+ Refresh Token的方案对系统进行重构。 在最后的服务部署阶段。云服务器的带宽上限为5M，因此如果采用唯一的服务器来反向代理、路由处理，业务的性能上限将被这唯一的流量入口所限制。 如图5-3我们通过取消设立专门的路由服务器，直接将业务分为两块。用户直接访问两大业务服务器。将流量入口重定向为这两大业务服务器，可以在一定程度上降低服务带宽的限制。进一步将这两个业务的基础服务分别部署在不同的物理机上，可以在充分利用服务器的硬件资源和节省网络带宽开销中寻找一个平衡点。 [图片] 以上内容阐述了我们在架构微服务分布式后台架构时所面临的问题，通过使用这个架构我们将后台的服务解耦成了两大块业务，极大的提高了服务的灵活性。通过使用Fegin组件的服务端负载均衡功能，在一定程度上提高了业务的性能上限。 因个人才疏学浅以及对于微服务架构的理解不够透彻，内容中如有错误，敬请斧正。通过此次比赛，将个人所学的相关理论知识第一次应用到产品中。其中也走了不少弯路、错路，无论如何都是一次宝贵的经验。后续我们将会投了更多的精力去学习。 在产品的前端方面，如图5-4，初期版本存在一个极大影响了用户的使用体验的地方。那就是之前提到过的箭头方向问题——如何根据用户随意画的一条曲线，在这条曲线末尾加上正确方向的箭头。 [图片] 如何优化箭头的方向，给用户更好的体验呢？在Attack 足球中绘制的线条是一条不规则的曲线，描述一条不规则的曲线是比较难的，进而要判断这条不规则曲线的走向、根据走向添加箭头的方向是更加困难的。 首先，由图5-5可知，可以在一条曲线中取样若干离散的点来对这条曲线进行拟合，因此曲线的特征可以近似通过这些离散点序列来描述。每一条曲线都可以得到一个离散点的序列： [图片] 其中 L 表示由这条曲线取样得到的离散点序列，(x_n,y_n )表示曲线最终点坐标。 将连续的曲线转化为离散点的序列，我们便可以根据这个序列来确定曲线的特征。故可以选取序列中最后两个点坐标来近似描述曲线的方向，即有方向向量： [图片] 已知曲线终点方向向量，再由曲线终点坐标便可以确定箭头的位置和方向。 [图片] 由图5-6可知，箭头可以由三个点C,D,E,两条向量(CD) ⃗，(ED) ⃗ （(CD) ⃗代表向量CD，下同）来确定，我们假定向量(CD) ⃗与(ED) ⃗的夹角，即箭头的夹角为90度。已知曲线的方向向量(AB) ⃗与x轴夹角为θ，便可以确定(CD) ⃗与x轴夹角为θ+45°，(ED) ⃗与x轴夹角θ-45°，曲线终点作为D点从而确定箭头的方向与位置。 [图片] 在设计的初期中，我们粗略地认为L的终点方向是由第n个点和第n-1个点决定的，从而确定箭头的方向和位置。 不过，这种设计真的合理吗？让我们看看图5-7出现的问题。 [图片] 出现图5-7中的情况，是因为用户当即将绘制完成曲线L时误触屏幕造成了“回钩”，导致最后一个点（B点）落到了点A之前.按照之前的解决思路，箭头的方向是(AB) ⃗，因此就会出现图中的情况，如何避免这种情况呢？ [图片] 为解决上述问题，我们在确定曲线方向时由三个点A(x_(n-2),y_(n-2) )，B(x_(n-1),y_(n-1) )，C(x_n,y_n )来对曲线方向进行约束。在这里引出一个自定义概念叫做终点的有效落点：如图5-9所示，过A点做AB的垂线DF，过B点做AB垂线EG，落在矩形区域DFGE内的点均不是C的有效落点，否则点C就是C的有效落点，C的有效落点可以通过BC两点判断L的最终方向。 具体解决步骤如下： Step1：首先由点A，B可以确定直线方程： [图片] 其中a , b, c为未知参数，确定直线位置。将点A (x_(n-2),y_(n-2) ),B (x_(n-1),y_(n-1) )带入上式确定参数a ,b ,c。 由于直线DF，GE分别与直线AB垂直，故已确定了直线L,易确定直线DF方程L_1，GE方程L_2： [图片] Step2：已知C点坐标为(x_n,y_n )，可以分别求出点C到L_1的距离d_1，到L_2的距离d_2以及到L的距离d。设直线DF和EG长度已知为μ，AB直线长度d_l。 Step3：判断点C是否为有效落点。 若d_1+d_2>d_l或者d >μ，说明C点在矩形外面，即C点为C的有效落点。 若d_1+d_2≤d_l并且d<=μ,说明C点在矩形内，即C点不是C的有效落点。 [图片] [图片] 那么，DF、EG的长度μ，取何值是较为合理的呢？若想减少用户误触屏幕对箭头方向的影响，提高箭头方向的正确性，则在DF、EG构成的平面内，CC_1、CC_2不应与AB相交。 如图5-10，由直线CC_1，CC_2构成一个箭头，其中CC_1和CC_2长度均为v，并且CC_1⊥CC_2，则取μ=2*v，即两倍的CC_1。证明如下： C点从B点沿着BEDA路线移动时，直线CC_1与直线AB的夹角范围是45°~135°。 当C点在BE之间时，若CC_1与AB不相交，BC> √2/2v ,所以BE ≥ BC 当C点在ED之间时，若CC_1与AB不相交，则只要保证CC_1⊥AB时不想交，即BE > v。 当C点在DA之间时，若CC_1与AB不相交，设CC_1与AD夹角为θ，则需要保证μ>vcosθ（0°<θ<90°）。 综上，v > vcosθ >√2/2v ,所以取μ=2*v。 如图5-11所示，此时C为有效落点，将BC两点作为方最后两个点确定箭头方向。如图5-12所示，此时C不是有效落点，把AB两点作为最后两个点确定箭头方向。 [图片] [图片] 呼，终于解决了令人头疼的箭头，这可是个让我们的前端小哥哥头痛了七天七夜的问题。 六、尾声 回望这一路，时间过的很快，长沙站的赛区决赛也已经结束多日，我们小黑板上距离微信小程序全国总决赛的倒计时也从两位数变成了个位数，大胆展出我们的小黑板。 [图片] 这一路上，Attack 足球团队已经和足球结下了不解之缘。足球是一种文化，是一种艺术，更是一种精神。它蕴含着奉献、实干、进步，蕴含着团队协作、顽强拼搏、永不言败、永葆激情等精神。而这些精神，也是我们团队不断内化的地方。本次大赛提供了这么一个机会，以赛促学、以赛促教、以赛促用，使我们每个人都有了蜕变，我们也会抓住这个机会，带着足球教会我们的精神，全力以赴，将更好的Attack 足球呈现给大家。 最后放上我们的小程序二维码，为了保证鲁棒性，最新版的Attack足球还在最后的测试阶段，不过现在已上线的版本不影响基本功能的正常使用，各位可以体验一下，更欢迎有球迷朋友来和我们沟通交流！谢谢！ [图片]

大家好，我们是来自华中赛区的 “NCHU_文体两开花”团队，意在文娱与体育，两面皆开花。 当2019年5月31日晚，距离微信小程序大赛作品提交截止时间仅剩最后10分钟时，我们几乎颤抖着手将最后一项更新的文件上传到微信小程序比赛入口，看到网页上提示“提交成功！”的字样，所有人心中的一块大石头终于都落了地。 “辛苦了，辛苦了！” “我要先睡个三天三夜！终于能先睡个好觉了。”前端小哥哥如是说。 然而这只是参加微信小程序大赛的第一阶段，未来我们还有很长的路要走。从确认选题到提交作品，这不长不短的两个月以来，我们一起拼搏，一起在实验室里不断完善作品。个中辛苦，有目共睹。 关于我们的作品“Attack足球”，就要追溯到选题时期了。 一、选题idea 我们团队大部分的成员都身在软件学院足球队，秉持着一颗热爱足球的心，积极参与日常训练和比赛，然而每当比赛前后，不只是我们学院的球队，纵观全校，都会经常出现一个问题：在教练使用战术板讲解战术时，我们一些站得远的队友经常听不清、看不着、不理解，尤其是每次教练指导完战术之后，便很难再复盘了。 为了今后战术指导更加顺利地进行，我们要改变这种现状！我们不仅是足球队的一员，还是软件学院的一名学生，具有得天独厚的优势。如果将足球战术板与软件结合到一起，会碰撞出怎样奇妙的火花呢？ 我们想要将战术记录下来，在日后能够随时随地翻看已保存的战术指导，而微信小程序能够给一些优质服务提供平台，其即用即走的特性也是我们选择将战术板与微信小程序结合的重要原因之一，这便是我们开发Attack足球微信小程序的初衷。 为什么我们要叫“Attack足球”呢？ 其实在这之前，我们有想过最普通直白的名字——“足球战术板”、“战术足球”等，也想过稍加修饰后的“战术风云”，但总感觉缺了些韵味，在一番思考后，我们定下了“Attack足球”这么一个中西结合的名字。 在足球赛场上，要想成功夺冠，离不开正确的战术，成功组织战术、巧妙运用战术是克敌制胜的关键。 “进攻是最好的防御，防御是为了更好的进攻”。 Attack取其“进击”之意，希望能借助这个名字，鼓励人们无论是在球场上还是生活中，都应该拼搏向前，锐意进取。 二、我们是如何做的？ 需求分析对于一个项目来说是一个不容怠慢的关键点，一个好的需求分析代表着整个项目已经成功了一半。确认好Attack足球的基础功能后，如下图，便到了需要仔细考虑整个项目的功能需求的时候了。 [图片] 我们团队早期的会议并非是在讨论整个项目如何具体实施，而是提出自己对项目中还不理解的地方。例如： “在我们的Attack足球的球队管理功能中，被队长指派的教练可以像微信群一样把人踢出球队吗？” 有人提出疑问，就要进行解答。经过探讨，我们的答案是否定的，教练没有必要拥有对球队成员进行管理的权限，只有创建球队的队长才可以对成员进行管理工作。 由于要将整个项目细究，不放过任何一个点，因此需求分析确实花费了我们很多时间，但是这项工作绝不是在浪费时间。通过需求分析，我们所有人都对Attack足球有了十分具象的认识，团队中人人心中都有数，会让项目进展得更加顺利。 认真确定好需求，技术方案跟着便确定下来了： [图片] 我作为团队中的UI设计师，在刚开发Attack足球时，灵感乍现设计了一套方案，但是应用起来，如下图左图，效果并没有想象中好…… [图片] 没有得到预期的效果，对于UI设计师来说是一件很沮丧的事情。好在其余的团队成员帮助我及时调整心态，加上通过这些日子我对Attack足球有了更多了解，方案二也在我心中成型了。在与团队商量后，我们果断推翻方案一，及时止损，正式启用方案二，如上图右图。方案二与方案一比起来，不仅视觉效果好很多，考虑到的用户接口也会更加细致、更加贴近用户需求。 确定好界面风格，我需要将设计稿的各部分信息，例如间距、颜色等整理出来，接下来就由我们团队的前端小哥哥将设计稿付诸实践了。不过单独只有界面没有实际的功能可不行。要让Attack足球真正运作起来，前端小哥哥和后台小哥哥的配合必不可少。 在开发阶段，并非我就闲下来了，我还需要不断跟进项目，改进交互体验。我在尝试使用我们的作品Attack足球时，会将自己的身份定位为用户而不是开发者，这时又会发现很多用户体验不好的情况，例如：提示信息不够明确（此时用户的心理状态就是：嗯？我是谁？我接下来要做什么？）、界面观感太多繁杂（颜色爆炸！）等。我在设计球队管理功能界面时，就出现了这一类型的状况： [图片] 上图是我的球队管理界面设计稿，如左图，所有的教练、球员列表后都有按钮，红叉代表将成员踢出球队，黄色带有上下箭头的标志分别代表将教练降为球员和将球员设为教练。在没有教练、球员列表旁的提示信息时，仅看带有箭头的黄色标志不足以让用户明白这个按钮代表的是什么含义；而加上提示信息，整个界面颜色又过于杂乱、显得拥挤。 经过团队探讨后，我们确定了方案二，如右图：将队长对成员的操作按钮隐藏起来，当用户对球员信息从右向左滑时，显示按钮，才可以对其进行操作。 相比之下，方案二中左滑滚出选项的交互方式无弹窗、无等待，操作简便，也避免了整个画面过于杂乱而导致的糟糕的用户体验，这也证明了交互设计应该切实用用户之所用，想用户之所想，这样才能留住我们的用户大大！ 在开发录制战术模块时，我们会毫不留情地对前端小哥哥吐槽：这些工具真的太难用了！中号铅笔太粗、橡皮擦不干净、删除界面中的球员的方式极其不友好等等，同时在我们强烈建（yao）议（qiu）下，他花了一下午的时间研究怎么将代表球员前进路径的铅笔笔划加上箭头标志，最终，他确实做到了！最终的效果如下图，完美完成我们的预期： [图片] 接下来的日子，我们一步一步将功能添加：录制战术、球队管理、战术文件管理、实时演练等。在最后的冲刺阶段，小程序的鲁棒性与用户体验是我们的重中之重，团队全员皆测试工程师，一边绞尽脑汁找BUG，一边废寝忘食改BUG，尽力将每一步都做好，每天我们的开发小哥哥们都要面临我们团队集体的灵魂拷问： “我的长昵称显示到第二行啦！怎么还没有改过来？” “有人加入了我的球队，我这边怎么还没有消息提示呢？” “这里……改改改！” 开发小哥哥们也都是先仰天长叹，不过紧接着就燃起熊熊斗志，埋头修改，最终完成的成品就是我们已上线的“Attack足球”。 不知不觉，开发Attack足球的这两个月就过去了，我也见证了在整个团队的共同努力下，Attack足球从无到有的整个过程。这过程中我们有笑有疲惫，但还好，我们相互扶持、相互鼓励，没有什么问题是齐心协力不能解决的。 虽然作品已经提交，但是我们了解Attack足球仍旧存在一些不足的地方，我们依然还在不断思考如何拓展更多功能、怎样提供更佳的用户体验。 提升专业性：添加更多与足球专业相关的词汇，使其更具专业性； 重视小细节：增加引导页，让用户第一次进入不迷茫； 完善不停歇：在Attack足球今后的版本中，可能还会出现其他不足之处，我们会不断对此进行相应的修改，Attack足球走在前进的道路上永不停歇。 三、感悟 足球作为一项体育活动，能给人带来快乐的同时，其团队协作、努力拼搏的足球精神也深深影响着每一个热爱足球人士的心。对于一个开发团队而言，不仅需要有优秀的成员冲锋陷阵，也需要卓越的领导运筹帷幄。我们的PM小哥哥带领着我们团队一步一步从设计到实践，在整个项目开发，他贯穿始终，是我们前进的导向标，是我们强而有力的领导者。 经过此次微信小程序大赛的洗礼，我们团队中的所有人不仅是编程技术上有了突破，更在心灵上经历了一次历练，这次为了同一个目标奋斗的过程也在我们的人生经历中添上了浓墨重彩的一笔。 在此，我总结了一些经验，希望可以帮到有需要的人： 对于UI设计师来说，灵感是一项很重要的东西，当灵感出现时，要及时记录，同时在实现灵感的过程中，并不需要面面俱到，因为在此期间，还可能会产生新的灵感，将灵感整理成点子，再将点子完善成作品，这个过程十分重要。 用户体验成为软件成败的关键点之一，需要在满足需求的同时不做太多繁琐的操作，化繁为简，切实照顾到用户的主观意向，用户才不易流失。 团队协作对于一个项目的开发而言尤为重要，团队的每一个人都是不可或缺的。在小团队中，每个人都清楚了解其他成员的工作任务，团队所有成员的步调一致会让项目开发更加高效。 作品是不断完善的，要想做到无论多么简单的需求，执行出来的产品都或多或少会有些缺陷。我们要做的，就是尽可能弥补这些缺陷。在实践过程中，不断积累经验，可以在今后编程时规避同种类型的缺陷。 四、愿景 在从开始到完成Attack足球的这两个月内，我们执行了完成一个项目的所有流程。微信小程序大赛是一个正式的比赛，是一个开放的平台，我们真诚地希望通过这次比赛，能让更多人了解Attack足球，同时也希望能在微信小程序大赛上我们“NCHU_文体两开花”团队能够取得一个满意的成绩。 足球所代表的是一种团队精神，而开发一个项目也需要团队成员组成的凝聚力，需要成员为团队的共同目标而齐心努力奋斗。虽然如今的Attack足球还是一款主要面向校园足球队的战术板工具，但在今后，Attack足球面向的可能不仅是校园足球队，还有可能走出校园，步入专业足球队，我们也会带着足球教会我们的团队与拼搏精神，为了这一天努力奋斗。