雖然一直以來(lái)微構(gòu)網(wǎng)絡(luò)都非常注重服務(wù)品質(zhì)，但所謂人無(wú)完人，而團(tuán)隊(duì)也是如此，我們非常清楚我們團(tuán)隊(duì)及所有成員有非常大的提升潛能；而從2016年度開(kāi)始我們更加注重服務(wù)品質(zhì)，大家可以看到我們官網(wǎng)最近幾個(gè)月更新頻率不像以往那么高，那是因?yàn)槲覀冏罱鼛讉€(gè)月一直在研究怎么樣才能進(jìn)一步提高服務(wù)品質(zhì)。

對(duì)于我們這種互聯(lián)網(wǎng)技術(shù)服務(wù)公司而言，所謂的服務(wù)品質(zhì)我認(rèn)為應(yīng)該就是看要求開(kāi)發(fā)項(xiàng)目、產(chǎn)品本身質(zhì)量精良、客戶服務(wù)到位。最近半年，我們除了對(duì)外為客戶提供網(wǎng)站開(kāi)發(fā)等互聯(lián)網(wǎng)相關(guān)服務(wù)外，我們內(nèi)部也在沉淀，比如即將上線的客戶工單服務(wù)系統(tǒng)及客戶服務(wù)系統(tǒng)，以及后續(xù)將上線的互聯(lián)網(wǎng)服務(wù)平臺(tái)，還有計(jì)劃今年下半年發(fā)布的微構(gòu)網(wǎng)絡(luò)自主研發(fā)的網(wǎng)站管理系統(tǒng)等等。

我們官網(wǎng)的首屏有“不忘初心”四個(gè)字，雖然這四個(gè)字對(duì)于營(yíng)銷而言并沒(méi)有什么用處，因?yàn)閷?duì)于很多用戶來(lái)講這僅僅一句很虛的口號(hào)而已；但對(duì)微構(gòu)人來(lái)講，卻顯然不是這樣子。還記得，我們團(tuán)隊(duì)是因?yàn)榭吹皆撔袠I(yè)個(gè)別不太好的一面、心懷改變?cè)妇岸咴谝黄?；還記得，我們的初衷就是為中小企業(yè)提供優(yōu)質(zhì)互聯(lián)網(wǎng)服務(wù)；還記得，我們一直以來(lái)把品質(zhì)放在第一位等等；還記得，我們堅(jiān)持小而精的初心。很欣慰，經(jīng)歷了這說(shuō)長(zhǎng)又短，說(shuō)短又長(zhǎng)的這些時(shí)間，我們依然堅(jiān)持了初心。

為了讓更多朋友了解我們團(tuán)隊(duì)，從現(xiàn)在開(kāi)始每隔合適的時(shí)間會(huì)上傳過(guò)去時(shí)間的部分案例到官網(wǎng)的案例中心，同時(shí)在這些上傳的案例中，在合適的時(shí)間跳出少部分來(lái)做項(xiàng)目的說(shuō)明。這是以前我們團(tuán)隊(duì)沒(méi)有做的工作，從現(xiàn)在開(kāi)始，將是一個(gè)新的開(kāi)始。

————————————我是一條分割線————————————

至上租車企業(yè)官網(wǎng)定制開(kāi)發(fā)項(xiàng)目是微構(gòu)網(wǎng)絡(luò)在2016年5月份承接的一個(gè)網(wǎng)站開(kāi)發(fā)項(xiàng)目，該項(xiàng)目規(guī)模較小，就是一個(gè)企業(yè)官網(wǎng)。但從設(shè)計(jì)到前端、再到后端都是定制的，也就是說(shuō)完全按照客戶的需求來(lái)做的?，F(xiàn)在我們就介紹一下該項(xiàng)目的基本信息：

客戶：長(zhǎng)沙至上汽車租賃有限公司

線上主頁(yè)：http://demo.zszoom.com（客戶更新自己的資料后會(huì)是http://www.zszoom.com）

開(kāi)發(fā)團(tuán)隊(duì)：微構(gòu)網(wǎng)絡(luò)

完成時(shí)間：2016年5月

網(wǎng)站類型：企業(yè)官網(wǎng)（PC端開(kāi)發(fā)）

主要模塊：展示、資訊發(fā)布、企業(yè)信息單頁(yè)、自駕租車/代駕/企業(yè)租車預(yù)訂、預(yù)訂信息反饋、用戶中心等。

下面我代表微構(gòu)網(wǎng)絡(luò)團(tuán)隊(duì)從該項(xiàng)目的設(shè)計(jì)、前端、后端、上線前測(cè)試等方面（需求分析等過(guò)程這里不聊）來(lái)簡(jiǎn)要跟大伙聊聊這個(gè)項(xiàng)目我們開(kāi)發(fā)的過(guò)程，雖然任何事情在做的時(shí)候都是累的，但看到順利上線后一定是非常欣喜的。

UI篇

該項(xiàng)目客戶長(zhǎng)沙至上汽車租賃有限公司在之前就有一個(gè)網(wǎng)站，而且現(xiàn)在也在過(guò)渡期，后續(xù)會(huì)用我們的代碼完全替換掉網(wǎng)站。在我們最初接洽這個(gè)項(xiàng)目的時(shí)候就已經(jīng)非常清晰知道一個(gè)事實(shí)，那就是客戶為什么有網(wǎng)站了卻需要重新找我們做？答案很顯然，第一，客戶覺(jué)得以前網(wǎng)站不行被他嫌棄了；第二，是覺(jué)得我們可以做出更加優(yōu)質(zhì)的產(chǎn)品，對(duì)我們有信心。雖然這個(gè)項(xiàng)目規(guī)模不不大但我們非常重視，在溝通需求后我們提出了一套方案——采用偏扁平化設(shè)計(jì)，色彩使用藍(lán)和黑搭配；而這套方案主要是基于以下現(xiàn)實(shí)：

第一，客戶之前網(wǎng)站是那種看上去像十年前網(wǎng)站的風(fēng)格，我們知道有一部分年紀(jì)大點(diǎn)的用戶可能喜歡那種較為古老的風(fēng)格的；而在溝通中客戶似乎特別“嫌棄”之前的風(fēng)格。而他的感覺(jué)并不僅僅只是他的主觀判斷，還基于他客戶給他的反饋。因?yàn)樗目蛻糁心挲g層大多是20-45歲之間的；而在這個(gè)年齡層大多能接受現(xiàn)代風(fēng)格，而時(shí)下較為被人容易接受的就是扁平化了。

第二，在租車用車行業(yè)信任度是特別重要的，畢竟人家的安全之類的東西都交付給你，必須要有一個(gè)非?？孔V的感覺(jué)。而藍(lán)和黑的適度搭配可以做到視覺(jué)上簡(jiǎn)潔大氣，而又不失格調(diào)的效果。當(dāng)然了，藍(lán)色在網(wǎng)頁(yè)設(shè)計(jì)中是比較好把握的一個(gè)色系。

這里一些非常小的細(xì)節(jié)就不說(shuō)了，在與客戶溝通后，最終確認(rèn)設(shè)計(jì)稿，形成20個(gè)左右的PSD源文件，也就是說(shuō)這個(gè)項(xiàng)目不同的頁(yè)面數(shù)量多達(dá)十幾個(gè)，有了這些就開(kāi)始進(jìn)行編碼工作了。

前端篇

其實(shí)對(duì)于外行而言，前端和ui設(shè)計(jì)并沒(méi)有太大區(qū)別，都稱之為網(wǎng)頁(yè)設(shè)計(jì)，甚至部分朋友把整個(gè)開(kāi)發(fā)過(guò)程都稱之為網(wǎng)頁(yè)設(shè)計(jì)，嚴(yán)格的說(shuō)不是這樣的，當(dāng)然大家習(xí)慣了就好了。前端，在我們團(tuán)隊(duì)的流程中是處于UI設(shè)計(jì)的下游，也就是UI設(shè)計(jì)的輸出是前端開(kāi)發(fā)輸入的一部分。本項(xiàng)目采用原生的HTML+CSS開(kāi)發(fā)（包含部分HTML5及CSS3新增屬性），使用js及其知名庫(kù)jquery做前端開(kāi)發(fā)，同時(shí)采用ajax異步方式進(jìn)行前后端交互。我們下面從幾個(gè)小的細(xì)節(jié)說(shuō)明我們的理念：

輸入框的交互操作

一個(gè)表單中的輸入框可以說(shuō)是非常常規(guī)的，對(duì)于很多人而言是不屑一顧的；有句話叫做做人要心懷敬畏，這樣才能成長(zhǎng)、才能腳踏實(shí)地。哪怕是這樣的細(xì)節(jié)我們都要在時(shí)間可控的前提下做優(yōu)化。比如下面的表單輸入框，在有focus事件的時(shí)候，做一個(gè)樣式上的響應(yīng)。

右側(cè)（客服）懸浮框

在網(wǎng)站建設(shè)外包服務(wù)市場(chǎng)，絕大多數(shù)如果做一個(gè)這樣的東西，大多數(shù)是直接在一些源代碼素材網(wǎng)站下載一個(gè)代碼包完事。而我們都是自己寫(xiě)的，這樣才能保證與我們的項(xiàng)目整體的兼容性、協(xié)調(diào)性。在這里大家可能還發(fā)現(xiàn)了一個(gè)細(xì)節(jié)，就是在這個(gè)懸浮框中第三個(gè)是分享網(wǎng)頁(yè)的功能，這個(gè)東西確實(shí)非常簡(jiǎn)單，因?yàn)榘俣?、jiathis等服務(wù)商提供了完善的接口服務(wù)，但是，但是很多外包服務(wù)商為了省事，直接從哪些接口官網(wǎng)copy代碼就往網(wǎng)站代碼中放，結(jié)果功能上可能沒(méi)什么問(wèn)題，但視覺(jué)上會(huì)非常不搭。而我們會(huì)基于這些API重新開(kāi)發(fā)，應(yīng)用跟網(wǎng)站整體協(xié)調(diào)的樣式加入進(jìn)去。

ajax提交表單

表單處理是對(duì)開(kāi)發(fā)來(lái)講是非常常規(guī)和簡(jiǎn)單的，而品質(zhì)好的開(kāi)發(fā)和品質(zhì)不好的開(kāi)發(fā)，差別更多的是在于交互體驗(yàn)。舉個(gè)最基本的例子，假設(shè)在提交的時(shí)候要進(jìn)行信息過(guò)濾，而不符合預(yù)定要求的內(nèi)容將阻止提交，如果是同步表單的話那么提交后頁(yè)面被刷新了，之前已經(jīng)填寫(xiě)的內(nèi)容就被清空了，這樣想想都讓人抓狂。而通過(guò)ajax異步的方式進(jìn)行提交，那么就可以避免這種情況的發(fā)生；此外，在這個(gè)基礎(chǔ)上我們?cè)黾恿吮容^優(yōu)雅的信息反饋方式，用戶提交的信息不管是不是通過(guò)驗(yàn)證都及時(shí)給其進(jìn)行消息反饋，而過(guò)了一定時(shí)間后（消息基本上被用戶閱讀完成），消息框自動(dòng)優(yōu)雅地消失；同時(shí)引導(dǎo)用戶進(jìn)一步操作。

后端開(kāi)發(fā)

后端是一個(gè)網(wǎng)站的核心，因?yàn)楸卷?xiàng)目的業(yè)務(wù)邏輯并不復(fù)雜，于是我們采用輕量級(jí)的WordPress進(jìn)行快速開(kāi)發(fā)，使用其已有的信息發(fā)布功能（WordPress本身作為博客程序，文章發(fā)布是它最基本也是最重要的功能）。在此基礎(chǔ)上我們做了如下開(kāi)發(fā)：

實(shí)現(xiàn)前臺(tái)登錄注冊(cè)以及用戶中心，也就是把本在后臺(tái)才能進(jìn)行的部分工作搬到前臺(tái)。

在后臺(tái)添加全站配置模塊，用戶可以對(duì)全站基本信息在后臺(tái)可視化設(shè)置，比如聯(lián)系方式、SEO信息等等。

實(shí)現(xiàn)文章多字段，同時(shí)可根據(jù)多字段組合查詢篩選數(shù)據(jù)。

對(duì)接阿里大魚(yú)，在用戶提交預(yù)約信息后，網(wǎng)站管理者可以在5秒鐘內(nèi)接受到客戶的需求，然后及時(shí)響應(yīng)用戶需求。

上線前測(cè)試

因?yàn)檫@個(gè)客戶是非常用心的，因此網(wǎng)站暫時(shí)是掛在二級(jí)域名上，現(xiàn)在已經(jīng)接受用戶的修改調(diào)整需求并調(diào)整完成，用戶自己把內(nèi)容完善后就掛到正式域名上邊去。這里要說(shuō)的是，為什么說(shuō)這個(gè)客戶是比較用心的？因?yàn)楹芏嗫蛻粑覀冮_(kāi)發(fā)完后直接就不管了，在他的心里網(wǎng)站建設(shè)就是套個(gè)模板，然后幫他填寫(xiě)內(nèi)容，汗。

這里值得我們欣慰的是，在我們交付測(cè)試版給客戶看的時(shí)候客戶還沒(méi)有寫(xiě)修改調(diào)整需求，就給我們一個(gè)肯定。

下面是客戶提交的調(diào)整微調(diào)建議（其實(shí)就是要求啦）

雖然也許在看這篇文章的您以后是我們的客戶，但我在這里并不為了討好大家說(shuō)用戶的修改要求我們都會(huì)接受，這也得看具體情況，但我覺(jué)得合情合理的，我覺(jué)得這樣對(duì)雙方都好，這樣才是愉快的合作。我們針對(duì)修改調(diào)整的原則是：

第一，如果是我們的問(wèn)題或者我們的疏忽，這顯然沒(méi)的說(shuō)，這必須修改完善，而且我們會(huì)表示歉意。

第二，客戶自身想法改來(lái)改去，原則上是不接受需求，但如果工作量較小，我們可以酌情提供服務(wù)。

第三，客戶增加需求，但愿意適當(dāng)額外付費(fèi)的，可以接受。

本項(xiàng)目修改調(diào)整在上面截圖之前還有一份，其中很多都根本就不是問(wèn)題，比如說(shuō)首頁(yè)四張幻燈片改成三張（這顯然在后臺(tái)就可以設(shè)置的）。就該項(xiàng)目最后的修改而言，有的問(wèn)題，是我們確實(shí)疏忽了，而又一些是之前沒(méi)溝通過(guò)的，相當(dāng)于用戶突然想到的，而還有一些也不算什么不是問(wèn)題，比如關(guān)于我們圖片不顯示，因?yàn)楸镜販y(cè)試是改host模擬正式域名，后臺(tái)設(shè)置也是正式域名，放到線上用戶說(shuō)更好域名，但外鏈圖片相關(guān)設(shè)置項(xiàng)卻沒(méi)改。但在較短的時(shí)間內(nèi)，這些問(wèn)題都解決；而那些對(duì)于我們不算問(wèn)題的，比如說(shuō)圖片不顯示，但對(duì)于客戶來(lái)說(shuō)，因?yàn)樗恢?，就是?wèn)題；我們解釋為什么，并協(xié)助他進(jìn)行調(diào)整。

至此，項(xiàng)目開(kāi)發(fā)工作完成，將進(jìn)入后續(xù)的維護(hù)工作！

?致謝

本次項(xiàng)目雖然是由微構(gòu)網(wǎng)絡(luò)團(tuán)隊(duì)完成的，但本項(xiàng)目的順利完成離不開(kāi)更多的人直接或者間接的幫助。在此，我代表微構(gòu)網(wǎng)絡(luò)團(tuán)隊(duì)向以下機(jī)構(gòu)和個(gè)人致謝：

• 長(zhǎng)沙至上汽車租賃有限公司——項(xiàng)目甲方，因?yàn)槟鷤兊男湃?，讓微?gòu)網(wǎng)絡(luò)又一次體現(xiàn)自己存在的價(jià)值。
• WordPress——成熟的快速web開(kāi)發(fā)開(kāi)源程序，讓我們的開(kāi)發(fā)更加敏捷。
• SuperSlide——本項(xiàng)目采用的一款基于jquery的庫(kù)，部分效果基于它實(shí)現(xiàn)。
• 阿里云——項(xiàng)目采用的計(jì)算托管，提供高速、穩(wěn)定的計(jì)算服務(wù)。
• 阿里大魚(yú)——提供快速、穩(wěn)定的通信解決方案，并提供完善的SDK及開(kāi)發(fā)文檔。
• 每一個(gè)微構(gòu)人——我們的共同努力，讓我們又一次驚艷表現(xiàn)。
• 更多…..