九十九度 2017 毕业清单

2017 年 6 月 20 日

九十九度(公众号:九十九度)的第一款 web app,也是我的第一份公开的前端作品。这些成就本会成为一篇普通的稿子,但在 Matt 的提议下最终发展成了一个 web app。今年 5 月和 6 月时,我通过几门视频教程学习了 HTML5、CSS3 和 JavaScript(包括 jQuery 和 Node.js),没想到这么快就会有实践的场合。

这个 web app 的开发耗时一天半,算上前期抛弃的第一稿和最后的推广制作阶段的话,总共花了三天半的时间。

UI 设计是开发过程中最为困难的阶段。相比起 UI 设计,前端的实现在此更为简单和机械化。UI 的构思整整花了一天时间,还曾经放弃了第一个稿子。说实话前段实现的逻辑并不困难,但是如果只用一个简陋的 UI 向公众呈现,这是令人无法接受的。因此在无法想出合适 UI 的第一天,我也曾经动了放弃这个项目的想法。不过好在在当晚凌晨时脑子里意外地蹦出了现在的这个 UI 的想法,整个项目得以免遭被砍的命运。

这个项目中令我较为满意的一点是,所有页面中从未出现过一张位图。首页和成就页的九十九度 Logo 和标题字,成就页中的田字格、楷体字和二维码,甚至连过场的解锁动画,都是矢量的 SVG。这既保证了不同分辨率的设备都能获得同样清晰的图像,也能够极大地减小文件的体积。

由于不同平台、不同浏览器的 web 渲染引擎和支持的 web 标准不尽相同,在各个设备上测试和适配变成开发过程中十分独特的体验。响应式设计(responsive design)仅仅是保证各个设备都有舒适体验的第一步,各个浏览器不同的标准才是真正考验人的时候。在各个设备上的测试得出,Android 设备中楷体字和田字格会发生位置偏移,Windows 平台上的 Google Chrome 也会发生同样的位置偏移情况,macOS 平台上的 Google Chrome 仅会在最小宽度时发生位置偏移情况,而 Microsoft Edge 由于其对 SVG transition 支持的不完整,过场解锁动画无法正常显示。针对以上的问题,在多次尝试无果后,我通过 JavaScript 针对 Android 设备移除了田字格,保证了楷体字的正常显示。至于剩下的几个问题,暂无法稳妥解决。

为了使 web app 更像一个真正的 app,我通过一些 hack 使得整个页面在触屏设备中无法拖动,此处在不同浏览器中也有不同解决方案,微信内置浏览器尤其困难。

在开发结束后我还制作了微信推送使用的头图和二维码,点此进入九十九度的微信推送

最后,还要感谢友人佳伟提供的备案后的域名和服务器,因为他的帮助,web app 才得以在微信中流畅的使用。

点此进入「九十九度 2017 毕业清单」 web app






首页




成就页




微信推送头图