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

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

我們官網(wǎng)的首屏有“不忘初心”四個字，雖然這四個字對于營銷而言并沒有什么用處，因為對于很多用戶來講這僅僅一句很虛的口號而已；但對微構(gòu)人來講，卻顯然不是這樣子。還記得，我們團隊是因為看到該行業(yè)個別不太好的一面、心懷改變愿景而走在一起；還記得，我們的初衷就是為中小企業(yè)提供優(yōu)質(zhì)互聯(lián)網(wǎng)服務(wù)；還記得，我們一直以來把品質(zhì)放在第一位等等；還記得，我們堅持小而精的初心。很欣慰，經(jīng)歷了這說長又短，說短又長的這些時間，我們依然堅持了初心。

為了讓更多朋友了解我們團隊，從現(xiàn)在開始每隔合適的時間會上傳過去時間的部分案例到官網(wǎng)的案例中心，同時在這些上傳的案例中，在合適的時間跳出少部分來做項目的說明。這是以前我們團隊沒有做的工作，從現(xiàn)在開始，將是一個新的開始。

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

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

客戶：長沙至上汽車租賃有限公司

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

開發(fā)團隊：微構(gòu)網(wǎng)絡(luò)

完成時間：2016年5月

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

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

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

UI篇

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

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

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

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

前端篇

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

輸入框的交互操作

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

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

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

ajax提交表單

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

后端開發(fā)

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

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

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

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

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

上線前測試

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

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

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

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

第一，如果是我們的問題或者我們的疏忽，這顯然沒的說，這必須修改完善，而且我們會表示歉意。

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

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

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

至此，項目開發(fā)工作完成，將進入后續(xù)的維護工作！

?致謝

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

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