大家好，我们是来自华中赛区的 “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足球仍旧存在一些不足的地方，我们依然还在不断思考如何拓展更多功能、怎样提供更佳的用户体验。

1. 提升专业性：添加更多与足球专业相关的词汇，使其更具专业性；
2. 重视小细节：增加引导页，让用户第一次进入不迷茫；
3. 完善不停歇：在Attack足球今后的版本中，可能还会出现其他不足之处，我们会不断对此进行相应的修改，Attack足球走在前进的道路上永不停歇。

三、感悟

足球作为一项体育活动，能给人带来快乐的同时，其团队协作、努力拼搏的足球精神也深深影响着每一个热爱足球人士的心。对于一个开发团队而言，不仅需要有优秀的成员冲锋陷阵，也需要卓越的领导运筹帷幄。我们的PM小哥哥带领着我们团队一步一步从设计到实践，在整个项目开发，他贯穿始终，是我们前进的导向标，是我们强而有力的领导者。

经过此次微信小程序大赛的洗礼，我们团队中的所有人不仅是编程技术上有了突破，更在心灵上经历了一次历练，这次为了同一个目标奋斗的过程也在我们的人生经历中添上了浓墨重彩的一笔。

在此，我总结了一些经验，希望可以帮到有需要的人：

1. 对于UI设计师来说，灵感是一项很重要的东西，当灵感出现时，要及时记录，同时在实现灵感的过程中，并不需要面面俱到，因为在此期间，还可能会产生新的灵感，将灵感整理成点子，再将点子完善成作品，这个过程十分重要。
2. 用户体验成为软件成败的关键点之一，需要在满足需求的同时不做太多繁琐的操作，化繁为简，切实照顾到用户的主观意向，用户才不易流失。
3. 团队协作对于一个项目的开发而言尤为重要，团队的每一个人都是不可或缺的。在小团队中，每个人都清楚了解其他成员的工作任务，团队所有成员的步调一致会让项目开发更加高效。
4. 作品是不断完善的，要想做到无论多么简单的需求，执行出来的产品都或多或少会有些缺陷。我们要做的，就是尽可能弥补这些缺陷。在实践过程中，不断积累经验，可以在今后编程时规避同种类型的缺陷。

四、愿景

在从开始到完成Attack足球的这两个月内，我们执行了完成一个项目的所有流程。微信小程序大赛是一个正式的比赛，是一个开放的平台，我们真诚地希望通过这次比赛，能让更多人了解Attack足球，同时也希望能在微信小程序大赛上我们“NCHU_文体两开花”团队能够取得一个满意的成绩。

足球所代表的是一种团队精神，而开发一个项目也需要团队成员组成的凝聚力，需要成员为团队的共同目标而齐心努力奋斗。虽然如今的Attack足球还是一款主要面向校园足球队的战术板工具，但在今后，Attack足球面向的可能不仅是校园足球队，还有可能走出校园，步入专业足球队，我们也会带着足球教会我们的团队与拼搏精神，为了这一天努力奋斗。