今兒給大伙嘮嘮我上周幫朋友公司做網(wǎng)站的全過(guò)程，特折騰但也特過(guò)癮。開(kāi)頭他們老板拍著桌子說(shuō)：“咱這網(wǎng)站看著跟十年前似的，客戶點(diǎn)進(jìn)來(lái)以為咱倒閉了！”得，需求就來(lái)了——要高端，要專業(yè)，得讓人一眼記住。

第一步：抄作業(yè)不丟人，關(guān)鍵得會(huì)抄

我沒(méi)急著動(dòng)手，先扒拉了二十幾個(gè)同行大牛的網(wǎng)站。電腦打開(kāi)三四個(gè)瀏覽器，標(biāo)簽頁(yè)堆得密密麻麻的，邊看邊拿本子記：“哎這家導(dǎo)航欄挺利索…臥槽這動(dòng)效炫…嘖他們產(chǎn)品展示頁(yè)咋排版的”。重點(diǎn)盯著那些國(guó)際大公司和行業(yè)領(lǐng)頭羊，看人家顏色咋搭配的，按鈕放哪兒順手?？赐暌缓嫌?jì)，深藍(lán)配金真有質(zhì)感，大圖加短文案看著就貴，這兩點(diǎn)先記小本本上。

第二步：掏空老板腦子里的想法

拉著老板喝了三杯咖啡才把需求榨出來(lái)。他光說(shuō)“要大氣”，我就問(wèn)：“大氣是字大圖大還是留白多？您瞅瞅這幾個(gè)參考網(wǎng)站哪個(gè)氣兒更足？”逼著他挑了三個(gè)最喜歡的案例，再讓他把必須放網(wǎng)站上的內(nèi)容一條條列出來(lái)：核心產(chǎn)品、專利證書、海外客戶案例…劃重點(diǎn)：“聯(lián)系電話必須首頁(yè)就能看見(jiàn)！客戶可沒(méi)耐心找！”

第三步：拿草稿紙開(kāi)整

直接打開(kāi)PS開(kāi)始畫框框。先從手機(jī)屏幕大小開(kāi)始折騰——現(xiàn)在人刷手機(jī)比電腦多多了。首頁(yè)最頂上就三要素：公司Logo放左邊，導(dǎo)航欄中間擠五個(gè)詞（再多老板自己都記不?。?，右邊杵個(gè)帶電話圖標(biāo)的聯(lián)系方式。下面直接懟了個(gè)占滿屏的產(chǎn)品大圖，配了句老板定的slogan，底下接個(gè)黃金按鈕寫著“了解解決方案”。畫完拿給團(tuán)隊(duì)看，被吐槽按鈕顏色像番茄炒蛋，連夜改了三次配色才定下深藍(lán)底金文字。

第四步：搬磚砌墻搞施工

打開(kāi)編輯器哐哐敲代碼。導(dǎo)航欄折騰最久——電腦上看挺正常，手機(jī)上一縮就成俄羅斯方塊了。抄了某大廠的方案：屏幕寬的時(shí)候橫著排，窄了自動(dòng)變漢堡菜單。產(chǎn)品展示頁(yè)更是掉坑里了，老板非要加3D旋轉(zhuǎn)特效，結(jié)果加載慢得能泡碗面。后來(lái)改成了鼠標(biāo)滑過(guò)微微浮起+陰影，又快又有質(zhì)感。證書展示頁(yè)更絕，客戶案例里塞了堆超清大圖，傳上去發(fā)現(xiàn)加載龜速，連夜開(kāi)了壓縮軟件批量瘦身。

第五步：上線前抓人肉測(cè)試機(jī)

做完把鏈接往工作群一甩：“是個(gè)人就給我點(diǎn)！”財(cái)務(wù)大姐最先吼：“我IE瀏覽器怎么排版全亂了！”趕緊加兼容代碼。業(yè)務(wù)部小哥截圖喊：“蘋果手機(jī)里按鈕怎么擠成糖葫蘆了？”查了半天是某條CSS在iOS抽風(fēng)。最絕的是老板，晚上十一點(diǎn)發(fā)語(yǔ)音：“首頁(yè)電話號(hào)能不能加個(gè)點(diǎn)擊自動(dòng)撥號(hào)？”行，又吭哧吭哧給按鈕加了段喚醒手機(jī)的代碼。

現(xiàn)在這網(wǎng)站掛著，深藍(lán)底色襯著產(chǎn)品圖特有檔次，老板見(jiàn)客戶就掏手機(jī)顯擺。說(shuō)白了，高端網(wǎng)站=把該藏的藏好+把該炫的懟臉上。按著這五步捋下來(lái)，起碼不會(huì)做出來(lái)個(gè)鄉(xiāng)鎮(zhèn)合作社風(fēng)格——如果老板非要加七彩閃爍字體的話...當(dāng)我沒(méi)說(shuō)！