本周是实习的第一周,很幸运碰到了产品部很有耐心的leaderX老师。 实习第二天他让我做一个H5的游戏类应用, 主要用于微信中分享。之前对于自己的水平是否能完成完全没底,但感觉第一次实操确实也有点让人兴奋,之前关于产品开发的印象只停留在书本上。
X老师让我模仿“过家家gogaga”所开发的“打电话认师姐”微信小游戏写一个类似的应用。 我把原始应用找出来便开始抠代码, 第一步是将套在微信接口中的原始应用抠出来(套在微信接口的原始应用只能在微信浏览器中运行,无法在电脑上测试),周二开始做, 一开始我的效率非常低, 因为我很多测试方法并不熟悉, 在参阅了微信JS-SDK后总算把原始代码抠出来, 厘清该应用的基本逻辑后开始重写, 在x老师的耐心地指导和对基础知识的讲解下,我们将原始代码中120行的CSS代码优化到60行,将五百多行的JS代码优化到只有60行,这事实上是在原有的逻辑上完全重写了,这让我开始有点成就感了。
也第一次感受到产品开发中的大局观,这种大局观更多的是体现在细节上,比如代码变量名的设置需要与文件存放联合考虑,以便日后修改和维护。 x老师在讲代码逻辑的时候亲自写了一个例子让我体会, 虽然消化这些用了快一天,但感觉真的收获很大, 有拔云见日之感。
实习一周后所遇到的种种困难也让我意识到自己很多问题,归纳如下:
1.尽管之前对于书本的学习有一定积累,但还是暴露出代码的不熟练,细节方面处理能力差,在细节上耗费时间太多。
2.缺乏基本的软件开发测试思路, 比如之前不知道chrome具有相当强大的错误测试功能,它对于没有触发的函数也有错误提示。
3. 缺乏专注的习惯,比如x老师让我先完成功能方面,但我却习惯于去找找界面的素材, 这就导致两边都没有做好。虽然认识上知道不该这么做,但是习惯上却很难改。
4.自己很多时候虽然有问题但是不能完全阐述清楚,所以跟leader沟通的时候往往支支吾吾,以后有问题自己首先得想清楚,将问题讲明白也是很关键的能力。
另外也记录一些自己的浅薄感受:
1.工科出身的x老师对于代码的运行效率有很多的考虑,但对于用户体验和交互效果似乎稍微少点,当然也可能是我新来并不了解的原因。
2. 公司在做小应用的时候并不会在用户测试和产品结构功能上讨论太多,公司要的是迭代效率, 就是要快速出应用,然后再快速上线下一个。
本周接到新的任务,为制作H5的招聘页面, 之前的“给师姐打电话”的H5应用还没有优化好,能做的改进的地方还有很多,leaderx老师让我先把招聘网站做好, H5应用先放放, 他给了我大街网做的“中国好Offer”作为参考, 拿到之后确实感觉这些页面都做得很好, x老师搜集的资源确实十分丰富,从实习到现在他发给我的参考很实用,在看完了五六十个H5的招聘页面之后开始构思, 在将产品架构基本做好后,测试又发现很多问题, 有技术层面的,但更多的设计本身的问题。技术的细节的问题:基于jquery mobile的开发框架国内的资料十分有限,不得不查阅原始的英文API,很多问题也只能去JQM的论坛查找,这些都十分考验英文阅读能力。CSS的布局问题繁杂,在各个浏览器,各个应用的渲染都不一样, 也是很折磨人的过程,我现在就碰到了css中font-weight属性在Safari没有渲染的问题,至今没有解决。
逐渐体会到前端工作的繁琐与细节, 需要学的东西很多, 有时候可以凭自己一些小聪明在当前解决,但并没有摸到问题的根源,扬汤止沸不是长久之计,但又好像没有足够的时间来系统的摸索,我只能先将这些问题一一记下来。这些技术的体会是一方面,另一方面便是产品的设计层面, 现在就是因为产品快做好后发现有很多地方犯了低级错误, 以往的纸上谈兵头头是道,等到自己亲身实践却感到把握不住很多设计原则, 比如界面设计给用户造成的不必要的干扰, 功能可见性的不足,逻辑上的不严谨, 以下我归纳了下岗做好的H5界面存在的交互问题:
1.页面的设计初衷是左右滑动来切换页面,但给几个朋友测试后都不能进入页面后就自然而然的知道是左右滑动。
2.join us的图标给用户是按钮的错觉,在测试中很多用户以为是按钮,都会下意识的点击。
3.交互效果的乏善可陈,与滑动的逻辑似乎也没有太大关联,只是单纯的加入了一些css3的动画。
4.用于提示左右滑动的动态箭头会让用户以为是点击作用
改进:
1.放弃join us 图标
2.改为上下滑动,箭头提示更改
3.重新设计图标摆放结构
总结: 这次的H5页面主要在于设计问题, 事先并没有完全构思好原型就急切投入到代码的编写中,这种开发方式本身是十分幼稚的!
因篇幅问题不能全部显示,请点此查看更多更全内容