最近幫朋友搞了個(gè)佛山本地公司的網(wǎng)站，從零開(kāi)始折騰了二十多天，總算順利上線(xiàn)了。今天就把整個(gè)過(guò)程捋一遍，全是實(shí)打?qū)嵅瘸鰜?lái)的經(jīng)驗(yàn)，沒(méi)半點(diǎn)虛的！

第一步：理清楚自己到底要啥

開(kāi)干前先抓朋友開(kāi)了個(gè)小會(huì)，問(wèn)了一堆問(wèn)題：網(wǎng)站干啥用的？展示產(chǎn)品還是接訂單？客戶(hù)都啥人群？能掏多少錢(qián)？啥時(shí)候要搞定？ 一開(kāi)始朋友就想整個(gè)“高大上”的，結(jié)果一問(wèn)預(yù)算就露怯了。我倆掰扯半天，把需求砍成了“能展示產(chǎn)品、有聯(lián)系方式、手機(jī)看著順眼、后臺(tái)操作別太復(fù)雜”，目標(biāo)明確了才敢往下走。

第二步：找?guī)褪植铧c(diǎn)跑斷腿

自己不會(huì)寫(xiě)代碼，只能找人做。先是刷了三天網(wǎng)頁(yè)，什么“佛山做網(wǎng)站”“靠譜建站公司”搜了個(gè)遍，看到好幾家吹得天花亂墜的。后來(lái)專(zhuān)門(mén)跑了趟禪城的創(chuàng)意產(chǎn)業(yè)園，面聊了三家本地團(tuán)隊(duì)：

• A公司：前臺(tái)愛(ài)答不理，坐了半天才見(jiàn)到人，看完案例感覺(jué)全是花里胡哨的動(dòng)畫(huà)，朋友公司搞機(jī)械的，根本用不上；
• B團(tuán)隊(duì)：工作室就倆人，老板兼銷(xiāo)售，技術(shù)小哥說(shuō)話(huà)沒(méi)底氣，問(wèn)“手機(jī)版出問(wèn)題咋辦”直接卡殼；
• C公司：一進(jìn)門(mén)就端茶倒水的，案例里剛好有家電廠(chǎng)的官網(wǎng)，看著挺清爽。最戳心的是那設(shè)計(jì)總監(jiān)直接說(shuō)：“你們這類(lèi)機(jī)械廠(chǎng)，首頁(yè)別整虛的，設(shè)備大圖懟上去，參數(shù)標(biāo)醒目點(diǎn)，聯(lián)系方式放右下角——工人師傅就愛(ài)這么看！”

當(dāng)場(chǎng)就定了C公司，本地團(tuán)隊(duì)真能省不少事——合同簽完第三天，人家直接帶著相機(jī)來(lái)廠(chǎng)里拍設(shè)備圖了，連叉車(chē)怎么擺都幫忙指揮，比我們車(chē)間主任還操心。

第三步：邊摳腳指頭邊改設(shè)計(jì)

設(shè)計(jì)稿來(lái)了三版：

• 第一版：整了個(gè)深藍(lán)背景配金色齒輪，朋友一看炸了：“這像KTV招牌！我們車(chē)間機(jī)油污漬都比這順眼！”
• 第二版：灰底配紅字，朋友撇嘴：“不知道的以為是賣(mài)滅火器的?！?/li>
• 第三版：設(shè)計(jì)師急眼了，直接拿了朋友廠(chǎng)里機(jī)械臂的工業(yè)灰當(dāng)主色，按鈕用帶銹跡感的橙色。朋友一拍大腿：“這色！就是我們扳手掉油漆桶的色！”

手機(jī)版特別讓加了“一鍵打電話(huà)”的紅色大按鈕——朋友原話(huà)：“老師傅們哪有耐心翻菜單，就得戳屏幕就能打通我電話(huà)！”

第四步：把鍵盤(pán)按出火星子上線(xiàn)

最磨人的是填內(nèi)容：產(chǎn)品圖對(duì)不上型號(hào)、車(chē)間照片拍到同事打哈欠、文案把“精密軸承”寫(xiě)成“精神軸承”…改到第六遍的時(shí)候，技術(shù)小哥微信語(yǔ)音都帶哭腔了：“哥，這‘關(guān)于我們’就200個(gè)字，咱能別每小時(shí)改一版不？”

用了個(gè)騷操作：讓公司文員在后臺(tái)直接敲字，我們坐旁邊盯著，屏幕有錯(cuò)別字立馬喊停，省了來(lái)回傳文件的麻煩。

測(cè)試時(shí)發(fā)現(xiàn)個(gè)坑：手機(jī)瀏覽器打開(kāi)產(chǎn)品頁(yè)居然卡成PPT！技術(shù)小哥熬了個(gè)通宵，把10MB的設(shè)備圖壓成“糊得剛好能看清”的300KB，加載速度嗖嗖的。

第五步：上線(xiàn)第二天就翻車(chē)

正式推送那天還挺美，結(jié)果隔天早上朋友狂打電話(huà)：“網(wǎng)站變俄羅斯方塊了！”原來(lái)辦公室小劉手賤點(diǎn)了后臺(tái)“風(fēng)格切換”，全站文字疊成了積木?；鸺被鹆谴螂娫?huà)找售后，人家五分鐘遠(yuǎn)程還原，還順手給小劉賬號(hào)砍了權(quán)限——這錢(qián)花得真值！

現(xiàn)在這網(wǎng)站就長(zhǎng)這樣：灰色打底帶銹橙按鈕，首頁(yè)三張機(jī)床大圖配參數(shù)表格，聯(lián)系方式直接飄在右下角。朋友說(shuō)最近多了幾個(gè)詢(xún)價(jià)電話(huà)，都是老師傅口音，一聽(tīng)就知道找對(duì)了人！搞網(wǎng)站真別想一步登天，重點(diǎn)是把事做扎實(shí)，尤其咱做實(shí)業(yè)的，整那些虛頭巴腦的動(dòng)畫(huà)不如把設(shè)備參數(shù)標(biāo)清楚實(shí)在。