聊聊我的一个平庸产品 - ReadMark专注时钟

题外话

题外话并不重要,若无心思,跳过即可。

驱动一个产品的诞生,有少数来源于生活灵感。灵感和创意的迸发,决定了由此诞生的产品有别于千篇一律,剩下的大多数只是模仿。只有少数人能成为“第一个吃螃蟹” 的人,剩下的人只能去谈论“谁第一个吃螃蟹”。很遗憾,ReadMark并不属于一个创新的产品。但我们谈论一个产品的好,并不仅因为它第一个出现。精雕细琢,弥补不足,亦是每个产品该走的路,于是到了最后,每个产品定然具备其独有的特点。

聊点与ReadMark有关的。

读书本身是一件极其普通的事情。对我们来说,其目的或学或娱。对学,是更深一步的,我们从书中获取的东西有什么,有多少,这是一门高深的学问。而如果是后者,事情就会变得异常简单。但终归已选择阅读,尝试记录下来,或许是个不错的选择。

ReadMark

回归正题,谈谈ReadMark本身。

image

ReadMark.jpg
ReadMark是一个记录读书时间的小程序。

功能我就不多介绍了,自己使用领会即可。这并非了不得的产品,甚至市面上多的是同类产品,如以上所说,这只是一种模仿。但或许,我能做出些不一样的东西(事实上并不)。罢,对于你们来说,关注其本身功能,拿来用便是。

界面UI

总体界面

开始,我采取了微信官方小程序统一风格的的UI,以灰为底色,内容部分则为白色小圆角的区域。

image

ReadMark-old-ui.png

但效果并不十分令人满意,于是便弃了这种风格。我总觉得首页的内容展示并非十分重要,封面加书名足矣,于是最终改用了卡片风格。效果还不错,对吧!

image

ReadMark-ui.png

动画

动画上并没有下多大功夫,效果上不过只是各种缩放,事件组件的按下触发缩放效果为.9,container隐藏显现的交互只是0到1的变化。而在专注页面上,如果只是单单时间数字的改变实在乏味,于是背景做成波浪效果,予人一种时间缓慢流逝的感觉,无论从视觉或是精神上,效果颇佳。

image

专注动画

Coding中的一些坑

即便只是一个功能简单的小产品,期间亦有不少坑,简单聊几个吧。

事件发起的时机

小程序的页面形成分为加载、渲染、显示三个部分,一般内容读取、网络请求等放在加载部分进行。开始我便是如此,但这引来一个问题:假设用户对书籍进行删除或者修改等操作,那么如何保证操作后页面上显示的内容能实时更新?起先我通过再setData一次以实现该功能,毕竟小程序由数据驱动。但另一个问题是,书籍展示页面和编辑页面是两个页面,一个页面上的操作如何才能触发另一个页面进行setData呢?我还不知道。于是简单粗暴的,我把缓存读取放在了显示部分进行,以此保证每次回到页面都是最新的数据。且仅仅请求不足几K的数据,又能浪费多少时间呢?

日期

日期存储格式选择何种?正常Y年m月d日,或是直接储存时间戳。为便于数据操作,选择了时间戳。主要是为了做出“**天前”的效果,直接储存时间戳的话,事情就好办了,不需要各种转换;而另一方面,单单出于个人喜好。

下拉刷新无限卡

真实设备(Samsung S8+ Android9)下拉刷新会无限卡,朋友的魅族16th也同样出现了这个bug,但在微信开发者工具上的终端模拟一切正常,bug原因暂不清楚,推测是读取本地缓存引起的,只能把锅推到官方身上了。本身如果没有这个bug,可能我就不会做页面内容实时更新这个功能,只需用户下拉刷新即可。既然如此,好,那就禁用下拉刷新吧。不需要用户做无用操作的设计,就是好设计。

其他

有加入云端功能的想法,但并不知道微信官方是否允许个人号接入登录功能获取用户信息。

关于书籍的封面自定义功能,还未实现云端功能,且又不是很想拿自己服务器作为图库空间,之后再说吧。

熊野

业余程序员、摄影师、设计师

发表留言

人生在世,错别字在所难免,无需纠正。