Loading...

切版是前端工程師必須要具備的技能,但到底什麼是切版?白話來說,切版就是要把設計師針對使用者需求所完成的設計稿,透過程式讓它在網頁中實際呈現出來。切版是很神聖的,因為少了這個過程,在網頁中就沒有畫面,少了畫面,使用者也就沒有任何方法,能獲取我們想提供的資訊和服務了。

*這邊小知識補充一下:切版多由前端工程師來完成,而實際上,前端工程師的工作內容很廣泛,有些工程師的工作就是在切版,但對於不少前端工程師而言,切版只是其工作內容中的其中一項而已。

切版和開發流程的關係


透過以往的經驗,來簡單談談其中一種常見的開發流程,讓讀者對切版這個過程在實際開發流程中的環節有些基本概念:通常在需求確立後,設計師會針對需求,完成介面、使用流程與體驗的設計。

在工程師實際開發前,會先跟設計師走過一次設計稿和流程,透過這個過程能理解設計團隊在規劃上的概念和想法,工程師也能藉由這個機會和設計師溝通實作上的可行性—如果覺得仍有優化之處,會再一起討論和調整成更合適的方向和方式。

切版的功能可大可小,複雜度也可能不同,在經驗還不夠充足的情況下,拿到設計稿切版和開發

時,很可能會有以下這幾種反應:


  • 被內容的豐富或版面的多元程度給嚇到,一時間不確定自己能不能完成,而過度緊張。
  • 看到有些區塊的功能和版面設計沒實作過,感覺很難,而否定自己的能力。
  • 因為時間壓力或一時的興奮,而立馬打開電腦開始撰寫程式碼。切版到一半,才發現可能無法實作出來。
  • 實作功能時,發現當前方式無法運作,在還沒了解原因,就到網路上查找方法,無腦逐一套用直到可行為止。

這些都是初學者常見的反應,對於多數對開發者來說,通常會帶來負面的影響、降低了開發效率和程式碼品質,甚至對於學習和成長毫無幫助。探究原因會發現,事實上就是「經驗不足」—你的技術不夠扎實、你接觸的不夠多,不夠廣、你的實務經驗太少。

這其實就和小時候在學文言文一樣,如果底子不夠好,當你看到文章時,就會有種「彷彿看得懂,但其實不懂」或「文章看似短,但就是不了解含義」的感覺。

然而,這都能透過不斷的學習和練習,甚至面對不同的刺激和挑戰,來讓經驗值慢慢地累積——久了,不能說你就不會緊張,但你能夠更清楚地預想藍圖、可能遇到的障礙、什麼能做什麼不能做,以及你缺乏什麼,需要補足什麼,來完成眼前的任務。


11個切版學習資源與工具:The Odin Project、Codepen、DevTools

開發前的心態準備與前置作業

  • 確認開發目標
    選定開發目標後,第一步要先做的就是「從頭到尾打量一遍需求」,從大方向到小細節一一確認有哪些是需要被完成的。這個步驟是最基本的,因為如果等到開發完後才發現少了哪些功能或效果需要加,運氣好可能直接修一下即可,但有時卻是會需要回頭調整架構,如此一來,就會讓開發效率降低。
  • 將大問題切成小問題
    有時開發所設定的目標是很大或很複雜的,一時間可能會不知道該如何下手。此時,將大區塊切割成一個個小區塊來思考,就猶如遇到大問題,先切成小問題一一擊破──當小問題都解決了,大問題也就不難了。以 Nextmeal 這個網站舉例(連結:https://nextmeal.herokuapp.com/#/),如果一下子要想怎麼刻出整個首頁,不如先從熱門餐廳這個區塊來剖析和練習(如下圖);假使還是有點困難,也可以再切成一張張餐廳的卡片來看(如下圖一個紅色框框),那就更好下手了。
    在這切割的過程中,你或許同時發現了許多重複性的區塊,例如一張張餐廳的卡片的樣式和內容排版都是一樣的,我們就能知道在程式碼、命名上,有很多能重複使用的地方。這對於後續開發上的效率就能有所提升。


  • 深呼吸,查找資料

許多的功能「看似困難」,但實際上卻未必,有時難就難在「少了經驗」。因此在看到沒看過的功能時,先不要自己嚇自己,慌了手腳。

我的習慣是,是先深呼吸三口,想想看有沒有看過類似的功能,或想一下可能可以實作的方式,甚至翻一下學過的技巧中有沒有能擦上邊的,再從那個方向著手,甚至先在 CodePen 上開個專案嘗試看看。

假使還是沒有頭緒,資料查找就是很好的方法──我的天真想法總會是:「當我遇到了這個問題,很大的機率有其他前輩或大大們也有遇過」。

資料查找毫無成本可言,先搜尋一下總是無傷大雅,或許還能找到更簡單、更好的實作方法!

資料的查找仰賴於你有沒有搜尋對的關鍵字。把握幾個面向的關鍵字,能大幅縮小搜尋結果的範圍,以下列了幾個面向幫助你去組裝你的搜尋關鍵字。

開始前,額外補充:以下為繁體中文舉例,如果你想找到更多資訊,可以嘗試使用英文或簡中去下關鍵字,你只需要先將關鍵字翻譯成當地的語言即可。
- 使用的套件或框架,例如:Bootstrap、Element、Materialize
- 使用的語言,例如:HTMLCSSJavaScript
- 使用的語法或組件,例如:Positioning absolute、input 元素、彈跳視窗元件
- 想要達成的目標,例如:背景圖片滿版、實作客製化 radio button
- 遇到的問題,例如:圖片溢出、視窗無法開啟、點擊沒有效果
- 特別想要參考的網站或類型,例如:CSS-tricks、MDN、範例、心得

  • 簡單畫 Wireframe 組織切版架構

    Wireframe 線框稿能用來呈現網頁的樣貌與排版佈局,如果規模比較大或功能較複雜時,也會包含使用的流程與規範。在目標明確的情況下,我們能事先思考和規劃網頁 HTML 的架構和佈局,讓我們在開發前,對於接下來要開發的方向和內容有一定的構思,而非走一步算一步。舉例來說,當我今天以下圖的導覽列做為練習的目標:
  • 在實作前,能先簡單畫出類似下面這個 Wireframe ──大致呈現 HTML 的結構與佈局,也把 CSS Class 名稱也先定義好,如此一來,我們能確保在開發前,是經過一段縝密的思考。也由於已經勾勒出 HTML 結構和 CSS Class 命名,在開發時效率會更快:
  • 學習切版時,繪製 Wireframe 是用來幫助思考,因此美觀並非重點。你可以用簡單的紙筆繪製,也能使用輔助性的軟體。以下介紹兩款我個人比較常使用的線上繪圖工具(如果你想尋找其他的免費線上繪圖軟體,關鍵字是:「online + draw wireframe + free」):

Wireframe是什麼?認識網站UI設計排版草圖與資訊架構

draw.io 是一款線上繪圖軟體,透過樣板,使用者能快速繪製流程圖、時間軸、網路架構圖、文宣等。當然,其中也包含 Wireframe 的樣板,讓我們能快速繪製一張簡單的 Wireframe。雖然看似陽春,但功能也是不少,對於要畫張簡單 Wireframe 的我們來說,是相當充足的了。

連結: https://app.diagrams.net/

如果你覺得 draw.io 的功能不夠用,你能嘗試看看更專業的設計工具 Figma。Figma 允許多人協作,且在你每次做出變更時,能自動存取到雲端當中。在介面上與功能上都更精緻,也更符合設計上的需求。對於較複雜的功能設計,也能依照需求安裝外掛(例如:嵌入圖表和分析圖等)。另一個很棒的附加功能,是當你在設計時,元素會產生相對應的 CSS設定,協助工程師在開發上的效率。
掌握網頁開發:鍛鍊把設計稿活化成專業網頁的切版功力

更多的經驗分享談

對於剛起步學習切版的新手來說,你可能是第一次認真在觀察各種平常會拜訪的網站和裡面的功能,什麼都覺得很新鮮、很想嘗試──這種好奇心與熱情是非常珍貴的。

然而,有時將目標放得太大,一次想嘗試的太多,反而容易亂了陣腳,也容易因為難在短時間內做出成果,就落入了失落的狀態,甚至開始懷疑自己到底適不適合走這條路,這其實不是我們所期待的。

在本篇的最後,來分享一下我這一路走來的的經驗,希望有機會能讓大家能在接下來的道路上,少採一些坑:

  1. 大方向上,永遠都要抱持著那份好奇心與熱情,並為自己設下一個目標,期許自己在一定的、適合的時間內能走到。
  2. 將大目標切小──確認有哪些技術點需要拿到,並安排學習的優先順序後。至於有哪些技術點,你可以跟著或參考如 The Odin Project 或其他課程的設計,又或是查詢關鍵字「CSS / HTML / Front-end + roadmap」。
  3. 扎實的學習每項技術,最好針對那個主題,找一些練習切版的小目標實作。
  4. 隨著技術點越撿越多,開始找一些複合型的目標來練習。例如:客製化註冊表單,能練習不同的 HTML 和 CSS 結構與樣式設定等。
  5. 當技術學習到一定階段,實作也有一定的量後,開始嘗試多個區塊、多個頁面、為不同螢幕尺寸開發的目標練習。
  6. 最後,等技術底子夠了,未來則能去學習如何優化程式碼和架構──讓程式碼寫得更乾淨、更有結構性、可讀性與可維護性增強等。這些方向的查詢關鍵字如:「CSS Best Practice / Advance CSS / Write Better CSS」。

網頁設計入門,一文讀懂HTML、CSS

最後的最後,我想分享的是:在這條道路上,有太多東西需要學習了,況且技術也會不斷推陳出新,老實說真的很難學習的完。

所以再容我說一句「吸吸吐~不要慌!不要慌!不要慌!」

會這麼撈叨是因為在這條道路上的某個時間點,我也曾擔心自己是不是還學得不夠多、不夠好,甚至因為想快點把 Roadmap 上的技術點都採集完畢,迷失了自我,最後陷入失落的境界。

然而,在跟我的主管請益後,他只回了我一句話:「開心最重要!」至今我還是很感謝他——做一件喜歡和熱情的事情,你能一直做一直做,甚至做到廢寢忘食、渴望挖得更深。即便如此,你都走在對的道路上,而當時間久了,你的實力也會越來越強;相反的,學一些完全沒有興趣的領域,你會做得痛不欲深,我也相信這無法持久,甚至會想放棄。

祝福大家都能找到適合自己的道路,持續學習、持續練習、持續發光發熱!

三分鐘小測驗,找到你學習網頁開發的入口