我個(gè)人網(wǎng)站的 2013 版上線已經(jīng)兩個(gè)多月了，沒想到這個(gè)并沒有下多少功夫去設(shè)計(jì)和制作的網(wǎng)站卻受到了不少人的喜愛和專業(yè)設(shè)計(jì)師的抬愛，我甚至還接到了相關(guān)的工作邀請。上線第一天，單日訪問量竟然超過了建站三年以來的總和。上線后，我一直都想寫一篇博文，簡述一下網(wǎng)站的建設(shè)過程。但因?yàn)楣ぷ魈啵恢睕]有心情寫，忙完后又去中國的東北地區(qū)旅行了一個(gè)月，直到今天才有時(shí)間和心情寫這篇博文。
上線以來，幾乎每天都有人通過 Email 和微博問我：“你的網(wǎng)站是怎么做出來的?”，對于如此籠統(tǒng)的問題，我實(shí)在不知道該如何回答?，F(xiàn)在，這個(gè)問題的所有答案幾乎都在這篇博文里。
某一天的搜索引擎入口記錄里，竟然有這么奇葩的關(guān)鍵詞
我有個(gè)強(qiáng)迫癥，做網(wǎng)站到每一個(gè)關(guān)鍵點(diǎn)時(shí)都會(huì)截圖留念，所以現(xiàn)在可以展示一個(gè)相對連續(xù)的建設(shè)過程。這里不談?dòng)蛎馕龊头?wù)器搭建，也不談 HTML、CSS 和 JavaScript 的具體代碼，互聯(lián)網(wǎng)上相關(guān)的優(yōu)秀文章和教程已經(jīng)相當(dāng)豐富，大家自行查閱即可，我不再贅述。
建設(shè)過程 基本構(gòu)想
國內(nèi)外很多網(wǎng)頁設(shè)計(jì)師都建議在開工之前先畫草稿(線框)圖，可我從來都不畫，只是在一個(gè)記事本里記下所有在腦海里一閃而過的靈感。因?yàn)槲彝窃诖蛩阕鲆粋€(gè)網(wǎng)站的時(shí)候，腦海里就已經(jīng)大概浮現(xiàn)出了它的樣子，雖然很模糊，但我認(rèn)為它沒必要太清晰。很多創(chuàng)意的靈感都是在做的過程中發(fā)現(xiàn)的，所以只要腦子里有一個(gè)大概的方向就可以開工了，具體的細(xì)節(jié)部份一邊做一邊想就好了，沒必要一開始就自己把自己的思維給框住。根據(jù)大概的構(gòu)想，我先整理出了一個(gè)大概的制作流程：
基本構(gòu)想 → 設(shè)計(jì)規(guī)劃 → 框架構(gòu)建 → 優(yōu)化文字 → 細(xì)節(jié)粗調(diào) → Retina 處理 → 響應(yīng)式處理 → 動(dòng)畫制作 → 細(xì)節(jié)微調(diào) → 回遷上線 → 離線緩存和 Web App → 多語言版本
設(shè)計(jì)規(guī)劃
談到設(shè)計(jì)，就不得不談到 Bootstrap。這是我首次使用 Bootstrap 框架制作網(wǎng)站。其實(shí)開始我一直在猶豫要不要用它，因?yàn)樗A(yù)置了很多 CSS 樣式和框架，用起來太方便了，以致于我覺得會(huì)減少那種完全自己設(shè)計(jì)制作的成就感。后來由于時(shí)間緊迫，加上 Bootstrap 的風(fēng)格也正好是我想要的那種，所以就采用了它。頁面由七個(gè)獨(dú)立模塊組成，按順序分別是：簡述、旅行、攝影、創(chuàng)造、Apple、聯(lián)系和關(guān)于，每個(gè)模塊都有它自己的特點(diǎn)。這種模塊化的設(shè)計(jì)也方便做響應(yīng)式處理。
框架構(gòu)建
解析測試版域名，掛一個(gè)簡單的頁面測試
引入 Bootstrap，測試
研究了一下 Bootstrap 的文檔，做出了大概的框架，開始做地圖的部份
細(xì)節(jié)粗調(diào)
這一步把所有的元素都擺到位，實(shí)現(xiàn)各元素基本的功能。
逐步輸入地圖的坐標(biāo)點(diǎn)數(shù)據(jù)
坐標(biāo)點(diǎn)數(shù)據(jù)輸入完成，簡單做一下完善地圖的細(xì)節(jié)
給 header 換個(gè)背景
用簡單的文字先拼出各個(gè)模塊大概的樣子
當(dāng)時(shí)的記事本草稿
Retina 處理
Retina 也就算高清視網(wǎng)膜屏幕的支持，作為一個(gè)果粉，這點(diǎn)當(dāng)然不能放過。不過這個(gè)當(dāng)時(shí)比較頭疼，先是用了一些 jQuery 的 Retina 框架，普遍都有加載速度慢的問題。看來還是不能偷懶，只有自己寫。思路是用 JavaScript 檢測 devicePixelRatio，將值寫入 Cookie 后刷新頁面，然后用 PHP 讀取該 Cookie，輸出對應(yīng)的圖片(高清或普通)。在 Retina Macbook Pro 上測試還遇到不少奇葩問題，逐個(gè)修復(fù)后最終效果非常震撼。后來發(fā)現(xiàn) iPhone 等小屏幕 Retina 設(shè)備不需要使用針對 Retina Macbook / iPad 制作的大尺寸圖片，只要將普通尺寸的圖片縮小即可，故給 JS 增加了檢測 screenwidth，PHP 再做相應(yīng)的調(diào)整，就提高了小屏幕 Retina 設(shè)備的加載速度。
響應(yīng)式處理
我在響應(yīng)式設(shè)計(jì)開始流行之前就已經(jīng)在實(shí)際應(yīng)用了，到現(xiàn)在已經(jīng)非常熟悉，所以毫無鴨梨的快速制作調(diào)試完成。
動(dòng)畫制作
動(dòng)畫的設(shè)計(jì)和制作花費(fèi)了我不少時(shí)間，既要有特色，又要夠酷夠炫，又不可浮夸，還要考慮性能。我本來還設(shè)計(jì)了很多動(dòng)畫，但實(shí)現(xiàn)后經(jīng)過反復(fù)測試，在某些設(shè)備和瀏覽器下非常容易崩潰，于是又移除了很多特效。但這個(gè)聯(lián)系方式的交互和動(dòng)畫仍是我的得意之作，在一個(gè)郵箱地址中隱藏了幾個(gè)不同的聯(lián)系信息，可以分別顯示。
細(xì)節(jié)微調(diào)
這里優(yōu)化了不少細(xì)節(jié)，譬如字體、字色、陰影、紋理、滾動(dòng)條等等，均使用 CSS3 實(shí)現(xiàn)，包括標(biāo)題文字的漸變和倒影。最后 header 背景還是選了我在甘南的尕海拍的一幅作品。
有一些略為浮夸的設(shè)計(jì)也換掉了，比如下面這兩個(gè)就是被換掉的頭像彩色陰影和 Apple 模塊的角標(biāo)
回遷上線
測試完成，從測試服務(wù)器遷回主服務(wù)器，換回域名。把網(wǎng)站發(fā)給位于全球各地、使用不同網(wǎng)絡(luò)的朋友測試。
離線緩存和 Web App
說實(shí)話，這倆功能其實(shí)沒有什么實(shí)際意義，因?yàn)檫@畢竟不是功能型網(wǎng)站，絕大多數(shù)訪客只會(huì)訪問一次，而這兩個(gè)功能都是反復(fù)訪問時(shí)才有用處。但是考慮到這兩項(xiàng)技術(shù)我已經(jīng)用的比較熟了，搬到這上面來也用不了多少時(shí)間，所以順手就做了，讓大家體驗(yàn)一下 HTML 5 離線緩存在一秒內(nèi)加載完一個(gè)網(wǎng)頁是多爽的一件事。考慮到旅行模塊的地圖需要?jiǎng)討B(tài)更新，所以沒有緩存它，而是用 AJAX 在頁面載入完成后再加載并渲染地圖。
多語言版本
一開始的計(jì)劃是要做多語言版本的，包括香港粵語繁體版、臺(tái)灣正體版和英文版，但到現(xiàn)在還沒有時(shí)間制作。
常見問題 FAQ
網(wǎng)站上線以來，天天都有人問我各種各樣的問題，現(xiàn)在我按問題出現(xiàn)的頻率排序，一起回答一下。
如果還有什么問題，也可以在此評(píng)論提出。但最好在提問前先搜索一下，我不喜歡回答任何 Google 知道的問題。
你的網(wǎng)頁設(shè)計(jì)是怎么學(xué)的？
(HTML / CSS / JavaScript / PHP / MySQL …)
我不是專業(yè)的設(shè)計(jì)師或程序猿，也沒有花費(fèi)太多的時(shí)間精力來學(xué)習(xí)這方面的知識(shí)，只是愛好而已。但我從小就對自己喜愛的事物有著無盡的好奇心和極強(qiáng)的自學(xué)、探索能力，這也是我在多個(gè)領(lǐng)域都能勉強(qiáng)算是“小有成就”的原因，嘿嘿。在網(wǎng)頁設(shè)計(jì)方面，我?guī)缀鯖]有讀過相關(guān)的書，只是研究優(yōu)秀網(wǎng)站的代碼，遇到不懂的就 Google。
網(wǎng)站用了多長時(shí)間開發(fā)？
先說說開發(fā)時(shí)間吧。我的個(gè)人網(wǎng)站每年都會(huì)徹底地重新設(shè)計(jì)一次，往年的更新一般都在過年前完成。但今年太忙，無奈拖至四月中旬才開工，五月中旬上線，平均每天只忙活一兩個(gè)小時(shí)。這期間還心血來潮做了一個(gè)智能手表 Pebble 的應(yīng)用下載平臺(tái) Pebbapps，后來發(fā)現(xiàn)實(shí)際意義不大，浪費(fèi)了不少時(shí)間。真正花在個(gè)人網(wǎng)站制作上的時(shí)間應(yīng)該在 20 小時(shí)左右。
網(wǎng)站是用什么軟件做的？
問這個(gè)問題的同學(xué)一看就是對 Web 開發(fā)還沒有基本的了解，理論上只要能進(jìn)行文本編輯的軟件都可以用作網(wǎng)站開發(fā)。我以前是用 Windows / Mac 自帶的記事本，簡簡單單，沒有任何復(fù)雜的功能，沒有代碼提示器也養(yǎng)成了我寫代碼的嚴(yán)謹(jǐn)習(xí)慣。后來做的網(wǎng)站 JavaScript 之類的代碼多了，記事本有點(diǎn)眼花繚亂，就開始用 Office FrontPage，至少代碼能上色了。后來在 Mac 上用 Dreamweaver 習(xí)慣之后，PC 上也開始用了，但也從來沒用過其他的功能，最喜歡的就是可以把編輯器調(diào)成黑色背景。
網(wǎng)站的加載速度怎么這么慢？
這有兩個(gè)原因：
其一，是服務(wù)器在美國，并且只有一個(gè)節(jié)點(diǎn)，因?yàn)槲疫€是未成年無法備案，無法將服務(wù)器放在國內(nèi)，所以我所有網(wǎng)站的訪問速度都普遍較慢;
其二，網(wǎng)站本身的前端性能確實(shí)不夠好，但這是網(wǎng)站采用大量圖片和動(dòng)畫的代價(jià)。我曾在加載速度和展示效果間做過權(quán)衡，后來考慮到這畢竟不是功能型網(wǎng)站，絕大多數(shù)訪客只會(huì)訪問一次，所以還是將效果放在了首位。后來我也發(fā)現(xiàn)一些可以提高加載速度的改進(jìn)方法，但現(xiàn)在暫時(shí)還沒有時(shí)間實(shí)現(xiàn)。
網(wǎng)站能開源嗎？
這個(gè)網(wǎng)站沒有后臺(tái)程序，是靜態(tài)頁面，所以用瀏覽器的開發(fā)者工具就能看到所有的代碼。我的所有代碼可供研究或?qū)W習(xí)之用，但最好不要直接整個(gè)復(fù)制，那樣你學(xué)不到任何東西。
你真的才 17 歲？
我真沒想到這個(gè)問題會(huì)有這么多人問……難道這個(gè)還能有假?我又不是李天一。(XD)
聯(lián)系客服
