@C7210?：跳樓式的降溫與陰冷過(guò)后，陽(yáng)光重新填滿四下的空間，顯得更加彌足珍貴，你幾乎都能聽(tīng)見(jiàn)光與空氣溫柔共舞時(shí)發(fā)出的聲音。

上一篇《設(shè)計(jì)師成長(zhǎng)自傳：從手機(jī)銷售到網(wǎng)頁(yè)設(shè)計(jì)師》聊到我受了刺激之后決定不再?gòu)氖率謾C(jī)銷售工作，并開(kāi)始了以網(wǎng)頁(yè)設(shè)計(jì)師為目標(biāo)的摧枯拉朽式的自學(xué)歷程。今天的話題像是更豐富了些，除了學(xué)習(xí)方面的故事以外，還包括：

• 來(lái)自《DOOM 啟世錄》的啟示
• 第一個(gè)實(shí)戰(zhàn)項(xiàng)目
• 要學(xué)習(xí)，也要活下去
• 堅(jiān)硬的現(xiàn)實(shí)與珍貴的激勵(lì)

艱難危險(xiǎn)，但也精彩

以一本「Down & Dirty Tricks」起步，經(jīng)過(guò)一段時(shí)間的案例模仿之后，雖然對(duì)于「網(wǎng)頁(yè)設(shè)計(jì)」這件事整體仍然沒(méi)有明確的概念，但至少在 Photoshop 的常規(guī)技術(shù)方面有了一定程度的掌握，看到其他期刊當(dāng)中的設(shè)計(jì)案例也能大致揣摩出實(shí)現(xiàn)方法，無(wú)需完全依賴教程。感到自己在進(jìn)步，這讓我很開(kāi)心。

接下來(lái)的任務(wù)，一方面要繼續(xù)保持 Photoshop 的手頭熱度，鞏固和深入；一方面要擴(kuò)大學(xué)習(xí)范圍，畢竟「網(wǎng)頁(yè)設(shè)計(jì)」有那么多「劍客」呢。

新目標(biāo)是 Flash。我猜 Flash 很重要。因?yàn)槟菚r(shí)幾乎每個(gè)網(wǎng)站、每個(gè)頁(yè)面的頂部和側(cè)邊欄都會(huì)被塞進(jìn)一打炫目的動(dòng)畫(huà) banner；而一些藝術(shù)、創(chuàng)意相關(guān)領(lǐng)域的網(wǎng)站甚至完全是基于 Flash 實(shí)現(xiàn)的，動(dòng)輒幾十秒甚至幾分鐘的頁(yè)面加載時(shí)間非常霸氣。當(dāng)然，這些也正是不久之后興起的 Web 標(biāo)準(zhǔn)化開(kāi)發(fā)運(yùn)動(dòng)所重點(diǎn)批判的負(fù)面典型之一；但在當(dāng)時(shí)，F(xiàn)lash 仍是網(wǎng)頁(yè)設(shè)計(jì)師所必備的基本能力之一。

△ 圖片來(lái)自網(wǎng)絡(luò)。

我選擇的上手教程是來(lái)自 Lynda.com 的教學(xué)視頻。為什么這次選擇這么重的形式？原因挺簡(jiǎn)單的：Flash 是動(dòng)的，我需要看它是怎樣一步步動(dòng)起來(lái)的；靜態(tài)文檔教程或案例文件都無(wú)法滿足這個(gè)需求。

說(shuō)起 Lynda.com，算得上是宗師級(jí)的教程視頻平臺(tái)，在那些年也推出了大量網(wǎng)頁(yè)設(shè)計(jì)相關(guān)的內(nèi)容。她家的內(nèi)容節(jié)奏很好，循序漸進(jìn)，老師們的英語(yǔ)表達(dá)簡(jiǎn)單易懂，沒(méi)有字幕也完全不成問(wèn)題。近些年在市面上蠻少再出現(xiàn)這個(gè)名字了，更多的是一家家開(kāi)放式在線培訓(xùn)平臺(tái)；這些平臺(tái)里的內(nèi)容確實(shí)多樣，價(jià)格也更親民，我個(gè)人在 Udemy 上買過(guò)不少，但總體感覺(jué)，在質(zhì)量上相比于 Lynda.com 這樣的老牌平臺(tái)來(lái)說(shuō)還是略顯欠佳。或許也只是自己在入門(mén)年代先入為主的印象罷了。

△?Lynda.com

其他一系列「必備能力」的上手過(guò)程大都保持著類似的節(jié)奏；我希望同時(shí)在多個(gè)方向上以最快的速度完成碎片化的初學(xué)期，盡早進(jìn)入實(shí)戰(zhàn)化的練習(xí)階段。不過(guò)期間也犯過(guò)一些錯(cuò)誤，譬如曾經(jīng)花費(fèi)不少時(shí)間去學(xué)習(xí) Adobe GoLive - 或許如今很多朋友都沒(méi)聽(tīng)說(shuō)過(guò)這個(gè)名字。同樣作為 WYSIWYG（所見(jiàn)即所得）網(wǎng)頁(yè)設(shè)計(jì)制作工具，GoLive 在功能上與 Dreamweaver 有很多重疊，當(dāng)時(shí)已經(jīng)逐漸退出主流舞臺(tái)；在選擇學(xué)習(xí)對(duì)象時(shí)沒(méi)有做好充分的了解工作，容易被盲目的主觀認(rèn)知所驅(qū)動(dòng)，這也算是門(mén)外漢常會(huì)犯的錯(cuò)誤之一了吧。

△?圖片來(lái)自網(wǎng)絡(luò)。

來(lái)自《DOOM 啟世錄》的啟示

那段日子忙里偷閑讀了這部傳記，連續(xù)兩遍難以自拔。書(shū)中講述了 John Carmack 和 John Romero 各自的自學(xué)與成長(zhǎng)歷程，以及如何成立 id Software 并改變世界的故事。你或許對(duì)這些名字感到陌生，但對(duì)于「德軍總部」、「DOOM」、「Quake」這一連串如雷貫耳的游戲大作或多或少會(huì)有所耳聞，且不論關(guān)于 Carmack 大神本神近些年擔(dān)任 Oculus 的 CTO 并繼續(xù)探索 VR 世界的各種新聞。

△?id Software。圖片來(lái)自網(wǎng)絡(luò)。

作為八零后，在上世紀(jì)九十年代里被「DOOM」和「Quake」浪費(fèi)掉的個(gè)人時(shí)間著實(shí)不少，即使在后來(lái)的全民 CS 時(shí)代，我也仍然會(huì)一個(gè)人在網(wǎng)吧里和一票 bots 在 Quake III 里對(duì)戰(zhàn)。有機(jī)會(huì)通過(guò)這本書(shū)了解到這些游戲背后的創(chuàng)業(yè)故事，看到兩個(gè)約翰如何找到人生方向并全情投入其中，看到他們的特立獨(dú)行與自信自負(fù)，看到他們偷電腦、入獄、相逢恨晚、借用公司的設(shè)備在周末創(chuàng)業(yè)、集體辭職成立 id Software 工作室、相繼推出前無(wú)古人的游戲產(chǎn)品、一次次推動(dòng)人類計(jì)算技術(shù)的發(fā)展...這些關(guān)于學(xué)習(xí)和創(chuàng)業(yè)的故事不僅讓我熱血澎湃，為我當(dāng)時(shí)的自學(xué)狀態(tài)帶來(lái)了極大的鼓勵(lì)和共鳴，同時(shí)也真的像「啟世錄」一樣啟發(fā)我對(duì)自己在當(dāng)時(shí)的狀況進(jìn)行了分析：

• 我需要更多的時(shí)間來(lái)確保更專注、高效、有效的學(xué)習(xí)，而不只是每晚的幾個(gè)小時(shí)。
• 我需要通過(guò)實(shí)際項(xiàng)目，對(duì)自己在之前幾個(gè)月里學(xué)到的所有知識(shí)進(jìn)行梳理、歸納和實(shí)踐。
• 我需要在完成轉(zhuǎn)行之前確保一定程度的收入。

參考著約翰們的故事，我碰巧想到了一個(gè)能同時(shí)滿足以上三點(diǎn)需求的方法：

正式辭掉「賣手機(jī)的」這份工作，同時(shí)說(shuō)服公司由我作為外包重新設(shè)計(jì)制作一個(gè)官網(wǎng)，并付我報(bào)酬。

第一個(gè)實(shí)戰(zhàn)項(xiàng)目

拿定主意之后立即辭職，并和老板談妥了新官網(wǎng)相關(guān)事宜，報(bào)酬是一千塊錢。不再是一個(gè)「賣手機(jī)的」了，心里很開(kāi)心，但也無(wú)法踏實(shí)：畢竟還沒(méi)有完整實(shí)現(xiàn)「轉(zhuǎn)行」這個(gè)目標(biāo)；相比于任性爽快的自學(xué)，真正的問(wèn)題恐怕還在后面。

不過(guò)眼前的首要任務(wù)是制作一個(gè)新官網(wǎng)。自學(xué)了幾個(gè)月，我還不具備從零開(kāi)始設(shè)計(jì)一個(gè)完整網(wǎng)站的能力，對(duì)于今后幾年才逐漸學(xué)到的設(shè)計(jì)流程與相關(guān)方法論則更是聽(tīng)都沒(méi)聽(tīng)說(shuō)過(guò)。跑去書(shū)店買來(lái)一本引進(jìn)版的 Photoshop 網(wǎng)頁(yè)設(shè)計(jì)書(shū)，全彩印；記得很清楚，64 塊錢，放到現(xiàn)在也不算便宜；書(shū)中提供了大量的頁(yè)面設(shè)計(jì)案例，而且針對(duì)每個(gè)案例提供了關(guān)鍵的設(shè)計(jì)技術(shù)指導(dǎo)。我選擇了一部分在風(fēng)格上可能適于數(shù)碼產(chǎn)品展示的，編上號(hào)，跑去前東家，捧著書(shū)給老板逐一評(píng)估，最終確定兩到三個(gè)，圈出其中最值得采用的模塊，留作下一步整合。

寫(xiě)到這里，我自己也笑了。各位朋友們，如今的你我都是行家里手，而我們?cè)诿鎸?duì)一個(gè)個(gè)「老板需求」時(shí)最常所采用的「以競(jìng)品分析為主要驅(qū)動(dòng)力」的「設(shè)計(jì)方法」，和我在十四年前作為一個(gè)野路子門(mén)外漢的做法，又有什么本質(zhì)區(qū)別呢？

接下來(lái)正式上手頁(yè)面設(shè)計(jì)，或是說(shuō)，臨摹；包括首頁(yè)、商品分類與列表相關(guān)頁(yè)面、商詳頁(yè)、公告列表與詳情頁(yè)等等，實(shí)際上并不算多，畢竟只是承載靜態(tài)內(nèi)容的展示型官網(wǎng)。期間有兩點(diǎn)最重要的心得：

• 在實(shí)際的網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目面前，之前幾個(gè)月里所有碎片化案例學(xué)習(xí)的意義，僅在于幫助我掌握了工具本身的基本使用方法。所謂「創(chuàng)意風(fēng)格」，「視覺(jué)特效」，在「網(wǎng)頁(yè)設(shè)計(jì)」這種動(dòng)物面前似乎不像我所設(shè)想的那樣至關(guān)重要，有時(shí)甚至找不到存在的位置感。譬如對(duì)于文本內(nèi)容，完全不需要進(jìn)行各種夸張的樣式處理，但文字自身的大小、深淺、擺放位置及段落距離等等卻會(huì)對(duì)頁(yè)面整體的「感覺(jué)」產(chǎn)生巨大的影響。我不知道這種「感覺(jué)」和背后的原理具體是什么，只覺(jué)得這里或許很有門(mén)道。
• 開(kāi)始體會(huì)到「設(shè)計(jì)模式」或「組件」的概念，感知到有這樣一些具有復(fù)用性的東西；它們相似卻又不完全相同，會(huì)時(shí)不時(shí)地出現(xiàn)在不同的頁(yè)面里，有些類似于過(guò)去在編程課里學(xué)過(guò)的「對(duì)象」和「實(shí)例」。我試著用 Photoshop 那時(shí)剛推出的「智能對(duì)象」功能做了些「母版」出來(lái)，發(fā)現(xiàn)有助于效率提升。

在頁(yè)面實(shí)現(xiàn)方面，則又拿出了畢業(yè)設(shè)計(jì)時(shí)魔改進(jìn)銷存系統(tǒng)的能耐 - 從一本 Dreamweaver 教程中搬出一套與設(shè)計(jì)方案最為接近的電商類網(wǎng)站前端代碼，剝離所有的動(dòng)態(tài)語(yǔ)言，僅留下 HTML 框架，然后把切圖一片片塞進(jìn)去，填充靜態(tài)文本內(nèi)容，同時(shí)調(diào)整樣式。

當(dāng)時(shí)對(duì)于 CSS、語(yǔ)義化、內(nèi)容樣式分離等「標(biāo)準(zhǔn)化 Web 開(kāi)發(fā)方式」完全沒(méi)有概念。手邊的案例代碼仍是基于布局，所有的樣式及腳本全部寫(xiě)死在框架與元素當(dāng)中，我自然認(rèn)為這一切都理所應(yīng)當(dāng)。調(diào)整工作最為磨人，一方面要現(xiàn)學(xué)現(xiàn)賣地運(yùn)用著各種蹩腳的技巧來(lái)調(diào)整布局，時(shí)常需要重新切素材以適應(yīng)布局方式的變化，一方面在靜態(tài)內(nèi)容和樣式代碼上也產(chǎn)生了大量的重復(fù)性勞動(dòng)，修改成本極高。

△?這樣的示例如今已經(jīng)很難找到了。圖片來(lái)自網(wǎng)絡(luò)。

然而即便如此，我仍然覺(jué)得自己在做著一件非常酷的事情，畢竟那是在真正制作一個(gè)網(wǎng)站；我可以連續(xù)幾個(gè)小時(shí)心無(wú)旁騖的對(duì)著著一堆亂七八糟的 HTML 代碼搗鼓來(lái)?yè)v鼓去，手邊是充足的可樂(lè)、速溶咖啡與香煙，耳邊是來(lái)自 Alice In Chains 等泥濘之音的持續(xù)轟炸 - 那些 Grunge 音樂(lè)極端黑暗避世，同時(shí)又極酷 - 所有這些都讓我感到自己仿佛正在破爛的車庫(kù)里做著創(chuàng)業(yè) - 卡馬克他們當(dāng)年寫(xiě) DOOM 時(shí)大體就是這樣嘛對(duì)不對(duì)。

△?Alice In Chains。圖片來(lái)自網(wǎng)絡(luò)。

我知道所有這些無(wú)與倫比的快感，在整整十四年后的如今，在這個(gè)與「粗糲」絕緣的精致年代，在自己早已習(xí)慣于藏身在一間間咖啡店或圖書(shū)館里做事的境況下，是再也無(wú)法尋找到的；但明明寫(xiě)到此處心里仍有一團(tuán)熾熱的像是叫做「渴望」的東西在燒著，是怎么回事。

要學(xué)習(xí)，也要活下去

辭職后，每天除了花費(fèi)幾個(gè)小時(shí)去搗鼓網(wǎng)站以外，仍有大把時(shí)間可以用來(lái)保持學(xué)習(xí)節(jié)奏，這就是裸辭的好處。

我不大睡懶覺(jué)，每天上午通常用于深入學(xué)習(xí) Flash，結(jié)合 ActionScript 做些比較復(fù)雜的動(dòng)畫(huà)案例；Illustrator 也是在那期間逐漸從生手開(kāi)始入門(mén)；下午往往會(huì)先背著個(gè)相機(jī)四處晃蕩，隨便拍些照片回來(lái)作為 Photoshop 手頭練習(xí)的素材；接下來(lái)則是幾個(gè)小時(shí)的「網(wǎng)頁(yè)設(shè)計(jì)師工作時(shí)間」，如前所述。

△?典型的手頭練習(xí)。

通常工作到到晚間九點(diǎn)左右，然后出門(mén)去接女友收工。與我的狀況類似，她在那段日子剛剛辭掉安安穩(wěn)穩(wěn)的語(yǔ)文教師工作，開(kāi)了一間屬于自己的衣店。

「這是更想做的事。」

她的理由大致如此。我顯然不會(huì)反對(duì) - 同樣是能折騰的人，心中有不一樣的光亮，不安及不滿于現(xiàn)狀，一定要去嘗試在自己向往的道路上硬著頭皮莽撞前行一番才肯罷休。我通常會(huì)帶著一杯珍珠奶茶等她打烊；深冬晚間，奶茶易冷，揣在懷里，既保溫，又能讓自己在路邊等待的時(shí)間里不至于凍到胃疼。

日子如此一天天過(guò)下去。畢竟經(jīng)歷過(guò)將近一年收入還不錯(cuò)的工作狀態(tài)，生活方式早已不如大學(xué)時(shí)那樣節(jié)儉。裸辭時(shí)剩下的幾千塊錢扛不住許久；兩千多的相機(jī)買回來(lái)了，大量的香煙咖啡可樂(lè)等消耗品從未間斷，中山公園旁邊的兩室戶房租再隔三差五地交一交，積蓄很快就見(jiàn)了底。當(dāng)我發(fā)現(xiàn)所剩的錢僅夠買一袋饅頭作為接下來(lái)一整周的食物時(shí)，我猜可能需要向現(xiàn)實(shí)稍稍低頭，去干些老本行才行 - 我不再是「賣手機(jī)的」了，但這不妨礙我做相關(guān)的副業(yè)，至少要活到成為網(wǎng)頁(yè)設(shè)計(jì)師的那一天對(duì)不對(duì)。

于是問(wèn)女友借了一千塊錢，連同網(wǎng)站項(xiàng)目掙得的一千塊錢報(bào)酬，共兩千作為本金，去聯(lián)系之前認(rèn)識(shí)的一票數(shù)碼產(chǎn)品代理商，進(jìn)貨掛淘寶。正如在「第一代觸屏智能手機(jī)」里提到過(guò)的，當(dāng)時(shí)的數(shù)碼配件利潤(rùn)率極高，況且我的本金連一臺(tái)手機(jī)都進(jìn)不到，于是拿了一批在當(dāng)時(shí)還不多見(jiàn)的智能手機(jī)藍(lán)牙游戲手柄、PSP 航空鋁保護(hù)殼一類。2005 年的淘寶尚未做大，同類賣家少之又少，且多數(shù)是我從前的下家；我可以從最上游進(jìn)貨，價(jià)格優(yōu)勢(shì)很大，因此貨跑得很快，現(xiàn)金流立刻動(dòng)了起來(lái)。

因?yàn)槊恐軙?huì)有那么一兩天陪女友到服裝市場(chǎng)進(jìn)貨，我就順便拿些很酷的貨車帽一并掛在淘寶店賣。同樣，那時(shí)競(jìng)爭(zhēng)并不激烈，只要價(jià)格不離譜，很快就會(huì)脫手，利潤(rùn)率在 200% 以上；一些款式非常棒的舍不得賣掉，就留給自己，直到現(xiàn)在還藏在衣柜里面。

堅(jiān)硬的現(xiàn)實(shí)與珍貴的激勵(lì)

網(wǎng)站好歹做了一個(gè)出來(lái)，各種習(xí)作也積累了不少，自認(rèn)為不能算一窮二白了。加之生活資本在短期內(nèi)還算周轉(zhuǎn)得起來(lái)，節(jié)奏不壞，于是著手找工作，目標(biāo)是成為一名真正的網(wǎng)頁(yè)設(shè)計(jì)師，完成轉(zhuǎn)行。

那是 2006 年初。當(dāng)我實(shí)際去看網(wǎng)頁(yè)設(shè)計(jì)師的招聘信息時(shí)，才發(fā)現(xiàn)自己還差的太多太多，嚇得我腦子嗡嗡直響。

專業(yè)背景無(wú)效，實(shí)際經(jīng)驗(yàn)約等于沒(méi)有。大中型公司的機(jī)會(huì)完全沒(méi)得看，不用說(shuō)兩三年起步的經(jīng)驗(yàn)要求，有些甚至連職能要求里面的信息我都看不懂。于是聚焦在小型創(chuàng)業(yè)公司；多少有些起色，至少可以獲得一些面試機(jī)會(huì)。

背包里不再是賣手機(jī)時(shí)用來(lái)發(fā)放的傳單，而是一打求職簡(jiǎn)歷。我去過(guò)那些寄居在群租房里的只有兩三個(gè)程序員的「互聯(lián)網(wǎng)公司」；去過(guò)號(hào)稱曾志偉投資的娛樂(lè)公司，與一位滿頭銀發(fā)的用著 Mac 的老阿姨「交流設(shè)計(jì)」；去面試過(guò)朋友介紹的廣告公司，在那么漂亮的巨鹿路上，光鮮精致的人們又讓我想起了「決定不要再賣手機(jī)」的那個(gè)下午。

無(wú)一例外，全部被拒。

那是我人生當(dāng)中第一次體驗(yàn)到什么叫做「眼前一片漆黑」。在堅(jiān)硬的現(xiàn)實(shí)面前，才懂得什么是差距。隨著接下來(lái)一次次面試不出意外地全部碰壁，之前幾個(gè)月里所有支持自己自學(xué)的熱情幾乎徹底熄滅。繼續(xù)找工作？該怎樣找？回去繼續(xù)學(xué)習(xí)？該如何學(xué)？沒(méi)有學(xué)科專業(yè)與背景經(jīng)驗(yàn)的死結(jié)怎么破？還要學(xué)多少東西才能達(dá)到最基本的招聘要求？全然不知。

一時(shí)間，所有的努力，連同轉(zhuǎn)行這件事本身是否正確和有意義，我都不那么確定了。我甚至在考慮要不要重新回去做一個(gè)「賣手機(jī)的」，就那么正正常常地上班工作，安安穩(wěn)穩(wěn)地掙錢度日，就像所有人那樣，又有什么不好。

一次陪著女友去進(jìn)貨，我們狼狽地拎著大包小包，坐在服裝市場(chǎng)門(mén)口的小店里吃老鴨粉絲湯。人在疲憊時(shí)，能量大概不足以支撐意志力。我一邊吃一邊忍不住難過(guò)起來(lái)，和她說(shuō)起我所有的沮喪和困惑。我猜那時(shí)我真的已經(jīng)開(kāi)始進(jìn)入徹底的自我批判狀態(tài)，真的幾乎要決定放棄轉(zhuǎn)行而安穩(wěn)地走些常規(guī)道路才好。

眼前這個(gè)為了能開(kāi)一間屬于自己的衣店而辭掉教師工作的姑娘，對(duì)我說(shuō)了一句令我此生都不會(huì)忘記的話：

「老鷹從來(lái)都是自己在天上飛的，可能艱難危險(xiǎn)，但也精彩，只有小雞才在地上扎堆呢。」

寫(xiě)到這里，又已淚目。這句話不僅在當(dāng)時(shí)給到我彌足珍貴的激勵(lì)，讓我打起了精神，決定一條路走下去決不回頭，同時(shí)也在之后所有這些年里給了我巨大的影響，使我在遇到任何「扎堆」或「茍且」的境況時(shí)，都會(huì)條件反射一般地警惕起來(lái)，雖然有時(shí)可能會(huì)警惕過(guò)頭。

在那整整十年之后，我們走完了戀愛(ài)與婚姻的旅途，成為彼此的前任。但 2006 年初她在我最為沮喪和無(wú)力的時(shí)候?qū)ξ艺f(shuō)的那句話，讓我無(wú)論到任何時(shí)候，只要一想起，便會(huì)如此時(shí)此刻這般心存感激。

歡迎關(guān)注作者的微信公眾號(hào)：「Beforweb」