作為一個在上海做企業(yè)網(wǎng)站設(shè)計十幾年的老油條，今天想跟大家伙聊聊怎么讓網(wǎng)站更漂亮。這事兒說起來挺簡單，但實際動手時一大堆坑，我就分享下自己前陣子幫一家咖啡館改網(wǎng)站的經(jīng)歷，從頭到尾給大伙掰扯清楚。

為啥要折騰這事兒？

那咖啡館在上海外灘附近，老板是我老同學(xué)，開店好幾年了，生意不錯，但網(wǎng)站跟個模板站似的，圖片模糊糊，顏色亂糟糟，點(diǎn)進(jìn)去一看加載慢得不行。他找我說："哥們兒，店里客人投訴說用手機(jī)點(diǎn)單老卡殼，你們設(shè)計圈有啥招能救救？"我當(dāng)時就笑了，"你這網(wǎng)站，就像穿個花褲衩上街，拉低整條路顏值！"不過老同學(xué)嘛我就答應(yīng)下來，想著正好試試點(diǎn)新法子。

第一招：選對顏色和字體

我一開始琢磨著，顏色就是門面，千萬不能瞎搞。比如咖啡館網(wǎng)站，得讓人看著就舒服，對？我那會兒親自跑去店里蹲點(diǎn)，看看環(huán)境色調(diào)，結(jié)果發(fā)現(xiàn)他招牌是墨綠配金色，挺復(fù)古風(fēng)?；剞k公室后，我拿個調(diào)色板一頓比劃，定了主色是墨綠，輔色加點(diǎn)奶白和金邊，這組合看著跟咖啡館氣質(zhì)匹配，不像以前那種刺眼紅藍(lán)拼。字體，也是關(guān)鍵——挑了個圓潤點(diǎn)的，太棱角的字人家讀著累。試了十幾種，用了個免費(fèi)字體庫里的，改完整體清爽多了。

第二招：加點(diǎn)視覺小亮點(diǎn)

我尋思網(wǎng)站不能干巴巴，得有點(diǎn)吸引眼球的。以前老掉牙方法，塞一堆大圖，結(jié)果加載慢得人點(diǎn)叉退出。這回我學(xué)聰明了，自己拿手機(jī)拍了幾張咖啡館特寫，還加了點(diǎn)微動畫。比如首頁上，那咖啡杯圖標(biāo)輕輕晃悠一下，不搶戲但有趣。最關(guān)鍵的是搞了張動態(tài)菜單，上傳時壓縮大小，保證手機(jī)上看不卡。過程中還出過岔子，有一回我整太大，測試時客人反饋死機(jī)了，氣得我連夜重做，換工具壓體積。

第三招：手機(jī)體驗必須頂

這招我覺得最實在。上海人都忙，誰沒事坐電腦前刷網(wǎng)站？八成用手機(jī)。所以我就把重點(diǎn)放響應(yīng)式上，先拿自己手機(jī)狂點(diǎn)，結(jié)果發(fā)現(xiàn)老版在iPhone和小米上顯示歪七扭八。我重新排布局，按鈕放大，點(diǎn)單流程簡化到一步到位。測試時找了幾個老顧客幫忙，他們直喊"這下順溜了"。結(jié)束前，我還加了個夜間模式，免得晚上點(diǎn)單屏幕亮瞎眼。

整套弄完，網(wǎng)站上線那天，老同學(xué)打電話謝我，說客人反饋好多了，手機(jī)點(diǎn)單率漲一大截。說白了，搞網(wǎng)站就是細(xì)節(jié)活兒，別想復(fù)雜，從顏色、圖片到手機(jī)體驗一步步試錯。我在上海幫過幾十家小企業(yè)，經(jīng)驗就是多動手少廢話——下次要是再碰到類似活兒，準(zhǔn)保這三招還能用上，大家試試唄！