上個(gè)月接了個(gè)武漢本地企業(yè)的單子，要整個(gè)高大上的官網(wǎng)出來(lái)。甲方預(yù)算到位要求也明確，我就按老套路一步步推進(jìn)，整出來(lái)的效果他們還挺滿意。今天就把這趟活兒從頭捋捋，給大伙兒瞅瞅具體咋操作的。

第一步：跟甲方死磕需求

直接殺到他們漢口辦公室泡了兩天。抓著老板、市場(chǎng)總監(jiān)和銷售主管輪番嘮，連前臺(tái)小姐姐都問(wèn)了嘴她平時(shí)咋查企業(yè)信息的。重點(diǎn)摸清楚了三點(diǎn)：想吸引哪些客戶（結(jié)果人家專做海外貿(mào)易）、最想顯擺啥優(yōu)勢(shì)（廠房規(guī)模和生產(chǎn)視頻是關(guān)鍵）、同行誰(shuí)家網(wǎng)站他們眼紅（扒出來(lái)三家德國(guó)企業(yè)官網(wǎng)當(dāng)參考）。整理出個(gè)12頁(yè)的需求文檔，雙方簽字按手印才算完。

第二步：拿著地圖畫路線

回家就癱沙發(fā)上腦暴。根據(jù)他們提供的德國(guó)網(wǎng)站案例，結(jié)合國(guó)內(nèi)用戶習(xí)慣重新排布結(jié)構(gòu)：

• 首頁(yè)非得放那個(gè)航拍廠房視頻
• 產(chǎn)品頁(yè)要搞3D旋轉(zhuǎn)展示
• 聯(lián)系方式得帶地圖導(dǎo)航插件

順手畫了個(gè)樹杈狀站點(diǎn)地圖，把每個(gè)頁(yè)面要放啥內(nèi)容、按鈕點(diǎn)完跳哪去全標(biāo)得明明白白。這步折騰了三天甲方才點(diǎn)頭。

第三步：設(shè)計(jì)師差點(diǎn)被逼瘋

先按德國(guó)網(wǎng)站的性冷淡風(fēng)出了兩版，甲方嫌太素。改成一堆金光閃閃特效，又被罵像山寨賭場(chǎng)。折中方案是：電腦端走歐美簡(jiǎn)約路線，手機(jī)端加大按鈕和紅色咨詢框。最費(fèi)勁的是產(chǎn)品展示頁(yè)，為了讓3D模型加載不卡幀，跟設(shè)計(jì)師熬通宵砍掉了所有漸變陰影效果。

第四步：往骨架里塞血肉

這步最瑣碎。帶著他們小實(shí)習(xí)生蹲在車間拍設(shè)備，視頻剪輯時(shí)還特意保留機(jī)器轟鳴聲當(dāng)背景音。文案改了八遍：老板非要加"領(lǐng)軍企業(yè)"，律師說(shuō)這詞違法只能改成"行業(yè)先行者"。產(chǎn)品參數(shù)表更是噩夢(mèng)，德語(yǔ)翻譯英語(yǔ)再轉(zhuǎn)中文，有個(gè)零件名稱來(lái)回確認(rèn)了五遍。

第五步：程序員開始罵娘

技術(shù)活這趴最刺激：

• 響應(yīng)式布局測(cè)試時(shí)，發(fā)現(xiàn)安卓某型號(hào)手機(jī)顯示錯(cuò)位，凌晨三點(diǎn)打電話把前端薅起來(lái)改
• 德語(yǔ)版頁(yè)面字體突然崩盤，查半天是編碼沖突
• 那個(gè)要命的3D展示插件吃內(nèi)存太猛，后端小哥邊罵邊加緩存機(jī)制

關(guān)鍵節(jié)點(diǎn)我天天蹲他們技術(shù)部點(diǎn)奶茶，搞得現(xiàn)在小程序員見我就捂肚子。

第六步：上線前全員找茬

弄了張超長(zhǎng)檢查清單：

• 財(cái)務(wù)死活登錄不了后臺(tái)，發(fā)現(xiàn)是瀏覽器攔截了cookie
• 老板手機(jī)死活打不開產(chǎn)品頁(yè)，發(fā)現(xiàn)是他開了流量省電模式
• 最絕的是測(cè)試員用老年機(jī)訪問(wèn)，整個(gè)排版直接裂開，連夜加了個(gè)極簡(jiǎn)模式

光404頁(yè)面就設(shè)計(jì)了六個(gè)版本，選了張機(jī)械故障的動(dòng)圖配上客服電話。

第七步：上線才是真開始

以為發(fā)布完能松口氣，結(jié)果第二天甲方電話就打爆了：

• 百度搜公司名出來(lái)的是三年前舊網(wǎng)站
• 德語(yǔ)頁(yè)面有個(gè)產(chǎn)品參數(shù)小數(shù)點(diǎn)點(diǎn)錯(cuò)位
• 老板夫人用iPad說(shuō)橫幅圖片模糊

趕緊讓技術(shù)調(diào)了服務(wù)器配置，重新提交搜索引擎收錄?，F(xiàn)在每月還幫他們更兩次行業(yè)資訊，順手改改后臺(tái)收到的用戶建議。

折騰完這趟的最大感觸：高端站真不是堆特效，光那個(gè)3D展示就占了三成預(yù)算，結(jié)果后臺(tái)數(shù)據(jù)顯示用戶平均就停留8秒。反而他們車間實(shí)拍視頻觀看率超高，早知該把預(yù)算多砸點(diǎn)在這上頭。下次再做類似項(xiàng)目，開場(chǎng)就得按住甲方的手別急著點(diǎn)科技樹！