微构网络:至上租车企业官网定制开发项目总结

2016-06-02 18:16 栏目:团队动态 查看(9404)

虽然一直以来微构网络都非常注重服务品质,但所谓人无完人,而团队也是如此,我们非常清楚我们团队及所有成员有非常大的提升潜能;而从2016年度开始我们更加注重服务品质,大家可以看到我们官网最近几个月更新频率不像以往那么高,那是因为我们最近几个月一直在研究怎么样才能进一步提高服务品质。

对于我们这种互联网技术服务公司而言,所谓的服务品质我认为应该就是看要求开发项目、产品本身质量精良、客户服务到位。最近半年,我们除了对外为客户提供网站开发等互联网相关服务外,我们内部也在沉淀,比如即将上线的客户工单服务系统及客户服务系统,以及后续将上线的互联网服务平台,还有计划今年下半年发布的微构网络自主研发的网站管理系统等等。

我们官网的首屏有“不忘初心”四个字,虽然这四个字对于营销而言并没有什么用处,因为对于很多用户来讲这仅仅一句很虚的口号而已;但对微构人来讲,却显然不是这样子。还记得,我们团队是因为看到该行业个别不太好的一面、心怀改变愿景而走在一起;还记得,我们的初衷就是为中小企业提供优质互联网服务;还记得,我们一直以来把品质放在第一位等等;还记得,我们坚持小而精的初心。很欣慰,经历了这说长又短,说短又长的这些时间,我们依然坚持了初心。

为了让更多朋友了解我们团队,从现在开始每隔合适的时间会上传过去时间的部分案例到官网的案例中心,同时在这些上传的案例中,在合适的时间跳出少部分来做项目的说明。这是以前我们团队没有做的工作,从现在开始,将是一个新的开始。

————————————我是一条分割线————————————

至上租车企业官网定制开发项目是微构网络在2016年5月份承接的一个网站开发项目,该项目规模较小,就是一个企业官网。但从设计到前端、再到后端都是定制的,也就是说完全按照客户的需求来做的。现在我们就介绍一下该项目的基本信息:

客户:长沙至上汽车租赁有限公司

线上主页:http://demo.zszoom.com(客户更新自己的资料后会是http://www.zszoom.com

开发团队:微构网络

完成时间:2016年5月

网站类型:企业官网(PC端开发)

主要模块:展示、资讯发布、企业信息单页、自驾租车/代驾/企业租车预订、预订信息反馈、用户中心等。

下面我代表微构网络团队从该项目的设计、前端、后端、上线前测试等方面(需求分析等过程这里不聊)来简要跟大伙聊聊这个项目我们开发的过程,虽然任何事情在做的时候都是累的,但看到顺利上线后一定是非常欣喜的。

UI篇

该项目客户长沙至上汽车租赁有限公司在之前就有一个网站,而且现在也在过渡期,后续会用我们的代码完全替换掉网站。在我们最初接洽这个项目的时候就已经非常清晰知道一个事实,那就是客户为什么有网站了却需要重新找我们做?答案很显然,第一,客户觉得以前网站不行被他嫌弃了;第二,是觉得我们可以做出更加优质的产品,对我们有信心。虽然这个项目规模不不大但我们非常重视,在沟通需求后我们提出了一套方案——采用偏扁平化设计,色彩使用蓝和黑搭配;而这套方案主要是基于以下现实:

第一,客户之前网站是那种看上去像十年前网站的风格,我们知道有一部分年纪大点的用户可能喜欢那种较为古老的风格的;而在沟通中客户似乎特别“嫌弃”之前的风格。而他的感觉并不仅仅只是他的主观判断,还基于他客户给他的反馈。因为他的客户中年龄层大多是20-45岁之间的;而在这个年龄层大多能接受现代风格,而时下较为被人容易接受的就是扁平化了。

第二,在租车用车行业信任度是特别重要的,毕竟人家的安全之类的东西都交付给你,必须要有一个非常靠谱的感觉。而蓝和黑的适度搭配可以做到视觉上简洁大气,而又不失格调的效果。当然了,蓝色在网页设计中是比较好把握的一个色系。

这里一些非常小的细节就不说了,在与客户沟通后,最终确认设计稿,形成20个左右的PSD源文件,也就是说这个项目不同的页面数量多达十几个,有了这些就开始进行编码工作了。

232

前端篇

其实对于外行而言,前端和ui设计并没有太大区别,都称之为网页设计,甚至部分朋友把整个开发过程都称之为网页设计,严格的说不是这样的,当然大家习惯了就好了。前端,在我们团队的流程中是处于UI设计的下游,也就是UI设计的输出是前端开发输入的一部分。本项目采用原生的HTML+CSS开发(包含部分HTML5及CSS3新增属性),使用js及其知名库jquery做前端开发,同时采用ajax异步方式进行前后端交互。我们下面从几个小的细节说明我们的理念:

输入框的交互操作

一个表单中的输入框可以说是非常常规的,对于很多人而言是不屑一顾的;有句话叫做做人要心怀敬畏,这样才能成长、才能脚踏实地。哪怕是这样的细节我们都要在时间可控的前提下做优化。比如下面的表单输入框,在有focus事件的时候,做一个样式上的响应。

22

右侧(客服)悬浮框

在网站建设外包服务市场,绝大多数如果做一个这样的东西,大多数是直接在一些源代码素材网站下载一个代码包完事。而我们都是自己写的,这样才能保证与我们的项目整体的兼容性、协调性。在这里大家可能还发现了一个细节,就是在这个悬浮框中第三个是分享网页的功能,这个东西确实非常简单,因为百度、jiathis等服务商提供了完善的接口服务,但是,但是很多外包服务商为了省事,直接从哪些接口官网copy代码就往网站代码中放,结果功能上可能没什么问题,但视觉上会非常不搭。而我们会基于这些API重新开发,应用跟网站整体协调的样式加入进去。

32

ajax提交表单

表单处理是对开发来讲是非常常规和简单的,而品质好的开发和品质不好的开发,差别更多的是在于交互体验。举个最基本的例子,假设在提交的时候要进行信息过滤,而不符合预定要求的内容将阻止提交,如果是同步表单的话那么提交后页面被刷新了,之前已经填写的内容就被清空了,这样想想都让人抓狂。而通过ajax异步的方式进行提交,那么就可以避免这种情况的发生;此外,在这个基础上我们增加了比较优雅的信息反馈方式,用户提交的信息不管是不是通过验证都及时给其进行消息反馈,而过了一定时间后(消息基本上被用户阅读完成),消息框自动优雅地消失;同时引导用户进一步操作。

3242

后端开发

后端是一个网站的核心,因为本项目的业务逻辑并不复杂,于是我们采用轻量级的WordPress进行快速开发,使用其已有的信息发布功能(WordPress本身作为博客程序,文章发布是它最基本也是最重要的功能)。在此基础上我们做了如下开发:

实现前台登录注册以及用户中心,也就是把本在后台才能进行的部分工作搬到前台。

在后台添加全站配置模块,用户可以对全站基本信息在后台可视化设置,比如联系方式、SEO信息等等。

实现文章多字段,同时可根据多字段组合查询筛选数据。

对接阿里大鱼,在用户提交预约信息后,网站管理者可以在5秒钟内接受到客户的需求,然后及时响应用户需求。

535

上线前测试

因为这个客户是非常用心的,因此网站暂时是挂在二级域名上,现在已经接受用户的修改调整需求并调整完成,用户自己把内容完善后就挂到正式域名上边去。这里要说的是,为什么说这个客户是比较用心的?因为很多客户我们开发完后直接就不管了,在他的心里网站建设就是套个模板,然后帮他填写内容,汗。

这里值得我们欣慰的是,在我们交付测试版给客户看的时候客户还没有写修改调整需求,就给我们一个肯定。

222

 

下面是客户提交的调整微调建议(其实就是要求啦)

242

虽然也许在看这篇文章的您以后是我们的客户,但我在这里并不为了讨好大家说用户的修改要求我们都会接受,这也得看具体情况,但我觉得合情合理的,我觉得这样对双方都好,这样才是愉快的合作。我们针对修改调整的原则是:

第一,如果是我们的问题或者我们的疏忽,这显然没的说,这必须修改完善,而且我们会表示歉意。

第二,客户自身想法改来改去,原则上是不接受需求,但如果工作量较小,我们可以酌情提供服务。

第三,客户增加需求,但愿意适当额外付费的,可以接受。

本项目修改调整在上面截图之前还有一份,其中很多都根本就不是问题,比如说首页四张幻灯片改成三张(这显然在后台就可以设置的)。就该项目最后的修改而言,有的问题,是我们确实疏忽了,而又一些是之前没沟通过的,相当于用户突然想到的,而还有一些也不算什么不是问题,比如关于我们图片不显示,因为本地测试是改host模拟正式域名,后台设置也是正式域名,放到线上用户说更好域名,但外链图片相关设置项却没改。但在较短的时间内,这些问题都解决;而那些对于我们不算问题的,比如说图片不显示,但对于客户来说,因为他不知道,就是问题;我们解释为什么,并协助他进行调整。

至此,项目开发工作完成,将进入后续的维护工作!

 致谢

本次项目虽然是由微构网络团队完成的,但本项目的顺利完成离不开更多的人直接或者间接的帮助。在此,我代表微构网络团队向以下机构和个人致谢:

  • 长沙至上汽车租赁有限公司——项目甲方,因为您们的信任,让微构网络又一次体现自己存在的价值。
  • WordPress——成熟的快速web开发开源程序,让我们的开发更加敏捷。
  • SuperSlide——本项目采用的一款基于jquery的库,部分效果基于它实现。
  • 阿里云——项目采用的计算托管,提供高速、稳定的计算服务。
  • 阿里大鱼——提供快速、稳定的通信解决方案,并提供完善的SDK及开发文档。
  • 每一个微构人——我们的共同努力,让我们又一次惊艳表现。
  • 更多…..
与我们的项目经理联系
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

转载请注明出处:微构网络:至上租车企业官网定制开发项目总结 - 微构网络
分享: