技术服务于生活——羽毛球+程序员=?
前言
技术服务于生活,不久前在知乎看到一个问题:自己拥有一台服务器可以做哪些很酷的事情?答主们各有各的骚操作,搭博客的、搭个人网盘的、做爬虫的、配私人影院的等等,有位同学做了个离校登记系统,服务于大众,很不错的想法。这些都是技术服务于生活的典范。
我平时会打羽毛球,加了几个微信群,群内会不定时举行各种大大小小的比赛,比赛就需要记分,大家应该见过那种PVC硬塑料的记分牌,我也用过,一般记分员是坐在记分牌背面,自己看不见比分,经常一翻翻两页,翻页的体验极差,用户体验差的东西我是不能忍的,然后就打算做一个线上的记分牌,然而我又不想自己买服务器、建账号系统这些,首选当然是小程序。
小程序支持云开发,数据库、账号系统、项目部署不需要自己处理,我需要做的有:需求设计+原型设计+UI设计+前端逻辑+少量后端数据库增删改查逻辑(云函数)
需求设计
一、
目标用户是羽毛球爱好者,在各种大小比赛中用来记录比分,是比赛就会有对阵双方,双方会有队伍名称(或其他代号),稍微正式一点的比赛会有比赛名称,那么界面上显示的数据最多有5项:
比赛名称、队伍名称A、队伍名称B、A队得分、B队得分
比赛名称和两队队伍名称需要用户输入,得分则随着比赛的进行随时更改
二、
正式一点的比赛一般会比好几场,1/8决赛 => 1/4决赛 => 半决赛 => 决赛,这些场次和比分需要保存下来,随时可以查看。
三、
简单友好的用户体验
原型设计+UI设计
由于产品和开发都是我自己,原型就没画,和UI一块说
一、
需求点1,转换成原型就是一个比分展示界面,显示比赛名称、对阵双方队伍及比分,这个界面必须横屏显示,比分是最重要的数据必须凸显。
运动类的小程序,UI配色必须年轻、彰显活力,参考了YONEX的logo配色,蓝绿白,最终UI如下,没学过设计,UI只能设计成这样了
二、
需求点2,一次比赛会有很多场次,那么就需要一个创建比赛场次的界面,码字的时候,已经出了两个版本了
UI 1.0,没有凸显出羽毛球运动,很快更新了2.0
输入比赛名称、队伍名称,点击创建比赛跳转到记分页面
另外界面底部有个历史比赛的入口,里面保存着所有比赛场次,可以左滑删除
前端逻辑+后端逻辑
一、
逻辑并不复杂,只需要按羽毛球规则限,制比分为21分决出胜负,若双方得分都超过20分,则先得分到达30分那一方获胜
二、
第一个版本上线后,收到一些反馈,UI和羽毛球的关联性不够强,用户看到首页并不知道这是个什么小程序,于是更新了UI 2.0
UI 2.0,背景是一个羽毛球场地
在更新UI 2.0的同时,增加了分享比赛功能,用户点击分享的链接,可以查看比分直播
三、
今天,为了增加用户黏性,增加了羽毛球运动员世界排名,每周从世界羽联官方网站自动抓取,然后翻译成中文
未来计划
1、增加可选的专业模式,增加三局两胜制,局间间歇2分钟,具体发接发、交换场地等等,向专业比赛靠拢
2、增加世界羽联全年赛事概览,包括比赛名称、时间、地点、级别、奖金
后语
小程序上线后,添加率(添加到我的小程序的用户比例)还不错,接近30%
用户评价也还行,这是我持续做下去的动力,欢迎扫码体验
吐槽
小程序已经出来挺久了,还是有挺多槽点,随便列一下
比如云函数环境切换,没有一个固定的配置,对刚接触小程序的开发者极不友好
比如不支持less/sass等
比如Mac版模拟器渲染经常会出现字体放大等异常
比如分享小程序,默认图片没有居中显示
……
希望小程序越来越好吧
原文地址:https://www.cnblogs.com/wangmeijian/p/11349356.html
- Gershon Dublon & Nan Zhao:用传感器网络感知世界
- 即日起珠海可用微信乘公交,腾讯乘车码助力智慧城市建设
- 利用mk-table-checksum监测Mysql主从数据一致性操作记录
- mysql主从同步(4)-Slave延迟状态监控
- 浏览器窗口尺寸改变时的图片自动重新定位
- Mongodb主从复制/ 副本集/分片集群介绍
- Paul-Adrien Menez:互联网与抵制食物浪费的故事
- DRBD详细解说及配置过程记录
- Servant:基于Web的IIS管理工具
- Web前端知识体系精简——CSS 篇
- 几种异步操作方式
- 今天的面试小记
- objective-C中的序列化(serialize)与反序列化(deserialize)
- 微信小程序 template 模板功能实现循环
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 统计字符串中字符出现的次数-Python
- 类和对象的哲学思考
- MySQL进阶篇(03):合理的使用索引结构和查询
- 动态查看及加载PHP扩展
- 少有人知的 Python "重试机制"
- Gradle之恋(14)-实战spring mvc插件式多项目构建
- Spring Boot 开箱即用
- Qt音视频开发2-vlc回调处理
- cmake学习
- 数据分析:在缓慢变化中寻找跳变——基于缓慢变化维度的用户分群
- 02 Confluent_Kafka权威指南 第二章:安装kafka
- Kafka集群搭建过程(kafka2.5+eagle)
- 07 Confluent_Kafka权威指南 第七章: 构建数据管道
- java中的reference(二): jdk1.8中Reference的源码阅读
- 08 Confluent_Kafka权威指南 第八章:跨集群数据镜像