@C7210 :上一篇聊到了自學期間的實戰項目,維生方式,求職時的四處碰壁與絕望,以及令我終身受用的珍貴激勵;自己也是感懷了些許。今天來聊我如何通過一次幸運的機會完成轉行,成為了一名網頁設計師。
前兩期回顧:
設計師成長自傳:從手機銷售到網頁設計師
從業14年,歷經大眾點評/騰訊多個大廠,但你可能沒想到,他不僅是非科班出身,而且第一份工作是手機銷售。
閱讀文章 >>
設計師成長自傳:從手機銷售到網頁設計師(二)
上一篇聊到我受了刺激之後決定不再從事手機銷售工作,並開始了以網頁設計師為目標的摧枯拉朽式的自學歷程,今天聊到的內容更豐富些。
閱讀文章 >>
本期話題包括:
- 與博客的不解之緣
- 筆試:流程,策略及「標準化開發」
- 「你一定要很努力」
- 成為網頁設計師
我,網頁設計師
「老鷹從來都是自己在天上飛的,可能艱難危險,但也精彩;只有小雞才在地上扎堆呢。」
在困境之中,被這樣一句話激勵得終於打起了精神;縱使客觀狀況沒有什麼改變,心裏也不會再軟弱地考慮回頭路,而是一門心思一路衝下去。在日常找工作(及繼續碰壁)之餘,我讓自己至少保持着 Photoshop 與 Illustrator 的手頭練習,拍照做圖,臨摹些當時很流行的矢量插畫等等;即便無法對找工作這事帶來直接幫助,也要保持技術積累及手感。
都說機會總是眷顧有準備的人。從「設計師基本素質」的角度來看,我在 2006 年初時怎樣也算不得準備充分,否則那些面試也不會毫無例外的全部失敗;但有時,真正屬於自己的機會卻可能來自於你意想不到的方向。
與博客的不解之緣
時至今日,博客(與公眾號)已經成為我生存路徑當中非常自然且必要的組成部分,而「Beforweb」也是我與業界(譬如屏幕對面的各位)保持溝通交流的重要途徑,至今已經做了超過八年(感謝各位長久支持)。我有太多的所得,都來自於這種在碎片化閱讀的年代略顯落伍的自媒體形式,從求職無門的那段日子直到如今,無不如此。
△ Beforweb,第八個年頭了。
印象里大約是 2003 年,博客在國內落地並逐漸普及(同時也象徵著 Web 2.0 時代的到來)。我從 2004 年開始接觸,最初在「博客中國」寫些現在看來有些玄幻的東西,譬如抓住現實中發生在身邊的一些事件,毫無道理地超現實放大,編成沒頭沒尾的故事;邊寫邊幻想自己是《陽光燦爛的日子》裏面的旁白角色。
2005 年改用博客大巴(Blogbus.com),因為更喜歡那裡乾淨清靜的味道,某些方面更契合自己,且文藝青年不少。從畢業前的荒誕時光,到賣手機的日子,再到自學設計及求職的階段,有的沒的隨便寫寫自娛自樂;有時甚至會全篇英文胡言亂語,現在想想也不知道要寫給誰看的樣子。
△ 博客大巴,2005。來自 archive.org 的網頁快照。
困境之下四處求索的日子里,某天突然了解到博客大巴就在上海;忐忑地去翻看他們的招聘頁面,赫然發現了「網頁設計師」幾個字。我的第一反應卻是「我不行」。畢竟此前已經經歷了那麼多的失敗 – 如果連那些毫不知名的小公司都會無一例外地拒絕掉我,那博客大巴這麼酷的、這麼科技又文藝范兒的 Web 2.0 創業團隊憑什麼給我機會呢?
我無意將自己最終給博客大巴投了簡歷的行為美化成「勇於挑戰」一類。那段時間更多是在用數量換幾率。「反正投簡歷又不花錢」,這樣。
筆試:流程,策略及「標準化開發」
然而,我收到了博客大巴的面試邀約。
一臉懵逼的狀態從放下電話的時候開始持續到了面試當天。出乎意料,無從準備,活着去就好了,坦誠相待,重在交流。
初次面試就是 CEO 橫戈,我們口中的老橫。當時的大巴還沒有自己的辦公室,借用着 Etang(億唐網,遙遠的名字哦?)的場子,在昌平路上一個老廠房改造的創意園區里。我沿着樓梯走上樓,四周的牆壁還保留着古老的綠色塗料,上面點綴着掛畫,文藝味兒十足。「我就要走進博客大巴了」,心裏反覆只有這一個念頭,開心而緊張着。
面試過程卻很短暫,印象里關於「設計」的話題並沒涉及很多,反而更多是在聊博客產品本身,譬如寫博客的習慣、動機、感受、互動方式等等。這有些出乎意料,同時也讓我放鬆下來更自然地進行交流,放鬆到我甚至會一邊聊天一邊盯着桌子下面鋪的草席同時心裏琢磨着夏天工作累了睡在上面應該很舒服。
事情自然不會這麼簡單。Bus 當時的設計團隊只有兩名成員,需要繼續招募一名可以同時完成視覺設計與前端實現的設計師,工作以博客模板的設計製作為主,同時也會涉及運營、平面和物料等方面。聊天結束后,老橫給到我接下來的筆試作業:一周之內做一個完整可用的博客大巴模板,包括設計和代碼實現。
△ 官方模板「Decay Age」,2007,作者 iZ(我)。來自 archive.org 的網頁快照。
博客模板是怎麼一回事,是怎樣「進」到博客後台的,用戶創作的內容又是怎樣「進」到模板里的?我完全不了解。作為用戶,一直以來只是套用官方模板來寫東西,而沒有關注過模板本身。時間是個問題,因為我知道憑自己當時的水平,即便照抄一個靜態頁面,從設計臨摹到代碼實現都很難在一周之內完成。
回到家立刻開始做作業。心裏雖然沒底,但身心興奮的狀態卻被徹底勾引了出來。接下來一周的過程不做詳述了,在這裏將期間一些關鍵的行動和心得分享給各位。
1. 不要急於動手
時間緊迫,但我沒有急於打開 Photoshop 開始實際設計,而是給了自己一天的時間,專心研究 Bus 的模板機制,包括實現技術與難點等等,不然心裏一點*數也沒有。當然,多年之後,「首先進行技術探索與可行性評估再進設計」已是我們再熟悉不過的項目流程;但自己在尚未入門的階段憑直覺採取的工作策略大致符合專業要求,這或許是一種幸運。
通過研究 Bus 的官方模板,我理解了整個博客前台的架構,即如何基於一套設計方案分別實現不同的頁面,譬如首頁、內容詳情頁、搜索結果頁等,以及評論模塊和側邊欄等等;同時也明白了動態內容的輸出方式,類似於畢業設計時魔改的進銷存系統,在靜態頁面框架中調用一系列封裝好的標籤,系統便會輸出相應的數據內容。這讓我心裏踏實了些,知道了設計可以發揮的地方在哪,局限又有哪些。
與此同時,我還發現了一片全新的大陸。
2. 標準化 Web 開發
第一次查閱官方模板代碼時是懵逼的,因為滿眼都是「div」、「span」一類我不認識的 HTML 標籤,同時卻找不到一段用於控制樣式的代碼;另外那個叫做「CSS」的文件又是怎麼回事?這和我所熟悉的基於「table」的頁面實現方式完全不同嘛。
谷歌一番(那時 Google 尚未被牆,且剛剛擁有正式的中文名「谷歌」),發現了「Web 標準」的概念,核心之一便是使用更加語義化的元素標籤構建 HTML,並通過「CSS」樣式表文件對頁面樣式進行統一管理,以實現內容與樣式的徹底分離。
△ W3Cschool.cn,當時最主要的學習平台。
當我把「div」、「span」、「p」、「h1」等一系列元素的概念搞清楚之後,再去讀那些 HTML 代碼,瞬間彷彿擁有了《黑客帝國》操作員的能力 – 內容的架構與層次看得一清二楚;這是抽離了具體樣式而單純承載功能語義的最純粹的信息,元素之間的邏輯關係一目瞭然,與基於「table」布局的混雜着內容與樣式的代碼相比簡直是天壤之別。此外,CSS 樣式表裡的代碼也是易讀易懂的,各類樣式屬性的名稱與值都能讓你看得明明白白。
我當時瘋了都。對自己讀改代碼的能力還算自信,加之看起來高度易用的新技術,一個星期內完成模板設計製作的目標真的有可能實現。
3. 設計策略
實際設計階段,為了確定模板的視覺主題,我從兩個方面進行了考慮和權衡。
一方面,我的作業是「製作一個博客大巴模板」,假想的使用者是全體 Bus 用戶,而非只有我自己。因此,模板的主題風格必須符合 Bus 的平台氣質以及典型用戶群體的口味需求,設計時必須避免片面任性地傳達我個人的喜好/情緒/風格。不過還好,我可以確定自己在大部分時間屬於 Bus 典型用戶群體,即更加傾向於清新淡雅寧靜的風格;不要使用任何粗糲、凝重、衝突的元素就好嘛。
另一方面,我知道自己此刻的「網頁設計」能力不容樂觀。既然一直以來的自學練習更多是基於照片素材進行風格創作,而博客模板這東西又不像普通網頁那樣中規中矩,那麼乾脆揚長避短,就以自己最擅長的方式做這件事,基於圖片素材進行創作擴展,構成核心主題。
基於以上兩點考慮,我搜羅來一打氣質相似的圖片,就像如今做情緒板那樣;最終選定了一張巨大的「向日葵田」作為主題素材。
△ 類似的「向日葵田」。圖為 Stone Temple Pilots 樂隊專輯封面。
從技術研究,到頁面設計,最後完成代碼實現,我在一周時間里潛移默化地體驗了一輪相比從前更加「專業」了一些的項目流程。雖然只是初次接觸「Web 標準化開發」,生疏而淺薄,但新方法確實讓前端實現環節容易了很多。最終完成(自認為足夠的)調修,新建了一個範例博客,將模板代碼與圖片素材導入後台,創建範例內容,然後打開前台頁面,看到真實的文字內容以自己定義的方式呈現在眼前 – 那一瞬間的開心與成就感真的難以通過文字形容。我愛極了這種僅依靠自己就能「完整創造事物」的體驗。你擁有的能力越多,完成目標所依賴的人與資源就越少,不是嗎。
完成筆試,鬆口氣,等待消息。在考試當中學習新知識來完成考試的體驗還蠻刺激的,我這麼琢磨着。
「你一定要很努力」
筆試通過,我收到了複試邀約。整個事情順利得甚至讓我開始感到不真實。
再次過去 Bus,見到了複試面試官:一位年齡與我相仿的老哥,從頭到腳一副日本地下青年藝術家的模樣,頭髮比我還長,胡茬比我還邋遢,衣着比我還不修邊幅,身上的煙味兒比我還衝,講話的聲音比我還小。我們站在一起時,老橫在旁邊直嘀咕:「這哥倆真像。」
並沒有真正意義上的面試,多數時候是在聊天。這位日後被大家稱作李老師的老哥(實際上在 Bus 所有人都互稱老師,以示調侃)指出了我作業當中的兩個非常不專業的地方:
- 網頁設計當中存在分辨率適配的問題。當時我僅懂得為自己 1024 的屏幕進行設計,看上去豐富沉浸,而一旦分辨率提升,固定寬度的頁面就會突兀地呈現在中央,兩邊則是尷尬的白色背景。
- 網頁設計當中存在瀏覽器兼容的問題。當時的主流瀏覽器仍是萬惡的 IE 6,以及一系列基於 IE 的套殼瀏覽器,例如「遨遊」等;而我僅針對自己常用的瀏覽器進行了調試,完全不了解頁面在不同的瀏覽器當中還會出現各種各樣的兼容性問題,更不知道應當首先基於 Firefox 這類標準化瀏覽器開發,實現最優效果,再面向其他環境進行必要的降級處理。
其他更多關於設計及代碼能力的反饋也是類似 – 感覺上還可以,學東西也挺快的,但距離專業水平還有一定的距離。
這也不出所料,我真的沒理由樂觀。就在我感覺心臟已經接近冰涼的時候,李老師告訴我,他們覺得可以讓我進來 Bus 試試看。
「但是,你一定要很努力。」
李老師繼續說,「無論設計還是代碼,都要盡最大努力把缺失的東西快速補齊,達到團隊要求。」 然後給我布置了新的作業:仍是一周時間,把 Bus 現有的代碼研究透,再產出一款必須達到上線標準的模板,由官方發布,然後順理成章地進入團隊。
我猜整個事情里,無論老橫還是李老師,之所以選擇信任我並給我嘗試的機會 – 從面試到筆試到大致認可 – 除了「感覺上還可以,學東西也挺快的」之外,更多的可能是出於其他方面的一些因素 – 或許和文藝方面的興趣愛好及氣質有關,或許和破釜沉舟自學設計的態度有關,或許和那些稚嫩的習作當中勉強體現出的「東西」有關,或許和初次面試時關於博客的見解有關,甚至或許和「這哥倆真像」有關。這些因素很難在面試其他公司時幫我加分,但在博客大巴這個地方,所有的「點」就自然而然地連接成了那條最正確的「線」。
△ 無名無狀的手頭練習。
而「你一定要很努力」這句話從那時起便也一直扎在了心裏,就像「老鷹…小雞…」那樣,在接下來的若干年甚至到如今都持續影響着我。這句話始終會讓我在心裏給自己保留着一種獨特的身份認知:無論到何時,我都是那個從「賣手機」轉行過來的、徹底外行的、毫無專業學歷與背景的設計師;無論在基礎知識、理念還是技能上,我與行業里專業出身的設計師們相比,都存在着差距;因此一定要很努力,無論那時,還是今後的所有日子。
成為網頁設計師
新作業很快完成,對於李老師提出的關鍵反饋也做了相應的補足;幾天的時間足以讓自己對「Web 標準化開發」的掌握程度又提升了一個檔次。幾天後,我為博客大巴設計製作的第一款官方模板正式上線。一切都像當時春天里天氣晴好萬物復蘇的景象那樣,讓人開心和充滿希望,陰霾一掃而光。
「是的我看見到處是陽光。」
最終,我收到了來自博客大巴的 offer,並於 2006 年 4 月 17 日正式入職,成為了一名真正的網頁設計師。
△ 抱歉的是,我甚至沒有正式的證件照。當時的入職照片也是靠牆自拍完成的。
其時月薪 1500 元,不足我賣手機時收入的三分之一。因此我也退掉了中山公園那邊的兩室一廳,找到一個當時普遍存在的「群租房」,租下其中一個只有七平米的隔間,月租 830 元。屋子里僅有,也僅夠放置一張單人床和一個電腦桌;但在我的記憶里,那卻是我人生當中最最開心的時刻之一。
歡迎關注作者的微信公眾號:「Beforweb」
未经-摩登3注册-摩登3测速官网-允许不得转载:摩登3注册-摩登3测速官网 » 無極五平台註冊登錄_設計師成長自傳:從手機銷售到網頁設計師(三)