切版是什麼，前端工程師帶你學習切版入門｜ALPHA Camp Blog

切版是前端工程師必須要具備的技能，但到底什麼是切版？白話來說，切版就是要把設計師針對使用者需求所完成的設計稿，透過程式讓它在網頁中實際呈現 ... Loading...首頁課程內容系列課程JavaScript全端開發課程學期一｜程式設計入門學期二｜掌握網頁開發學期三｜軟體工程師養成全年開課時間表最新消息非本科跨領域學程式最新課程DATA&AI公開課SQL14天入門課學習體驗成效Blog技術主題求職攻略數據入門文章首頁FAQ常見問題關於ALPHACamp加入我們學員專屬福利➡️課程說明會就在今晚馬上報名Web技術切版是什麼，前端工程師帶你學習切版入門Posted on 2021-01-15  by    byMike切版是前端工程師必須要具備的技能，但到底什麼是切版？白話來說，切版就是要把設計師針對使用者需求所完成的設計稿，透過程式讓它在網頁中實際呈現出來。

切版是很神聖的，因為少了這個過程，在網頁中就沒有畫面，少了畫面，使用者也就沒有任何方法，能獲取我們想提供的資訊和服務了。

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

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

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

切版的功能可大可小，複雜度也可能不同，在經驗還不夠充足的情況下，拿到設計稿切版和開發時，很可能會有以下這幾種反應：
被內容的豐富或版面的多元程度給嚇到，一時間不確定自己能不能完成，而過度緊張。

看到有些區塊的功能和版面設計沒實作過，感覺很難，而否定自己的能力。

因為時間壓力或一時的興奮，而立馬打開電腦開始撰寫程式碼。

切版到一半，才發現可能無法實作出來。

實作功能時，發現當前方式無法運作，在還沒了解原因，就到網路上查找方法，無腦逐一套用直到可行為止。

這些都是初學者常見的反應，對於多數對開發者來說，通常會帶來負面的影響、降低了開發效率和程式碼品質，甚至對於學習和成長毫無幫助。

探究原因會發現，事實上就是「經驗不足」—你的技術不夠扎實、你接觸的不夠多，不夠廣、你的實務經驗太少。

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

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


11個切版學習資源與工具：TheOdinProject、Codepen、DevTools開發前的心態準備與前置作業確認開發目標選定開發目標後，第一步要先做的就是「從頭到尾打量一遍需求」，從大方向到小細節一一確認有哪些是需要被完成的。

這個步驟是最基本的，因為如果等到開發完後才發現少了哪些功能或效果需要加，運氣好可能直接修一下即可，但有時卻是會需要回頭調整架構，如此一來，就會讓開發效率降低。

將大問題切成小問題有時開發所設定的目標是很大或很複雜的，一時間可能會不知道該如何下手。

此時，將大區塊切割成一個個小區塊來思考，就猶如遇到大問題，先切成小問題一一擊破──當小問題都解決了，大問題也就不難了。

以Nextmeal這個網站舉例（連結：https://nextmeal.herokuapp.com/#/），如果一下子要想怎麼刻出整個首頁，不如先從熱門餐廳這個區塊來剖析和練習（如下圖）；假使還是有點困難，也可以再切成一張張餐廳的卡片來看（如下圖一個紅色框框），那就更好下手了。

在這切割的過程中，你或許同時發現了許多重複性的區塊，例如一張張餐廳的卡片的樣式和內容排版都是一樣的，我們就能知道在程式碼、命名上，有很多能重複使用的地方。

這對於後續開發上的效率就能有所提升。

‍深呼吸，查找資料許多的功能「看似困難」，但實際上卻未必，有時難就難在「少了經驗」。

因此在看到沒看過的功能時，先不要自己嚇自己，慌了手腳。

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

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

資料查找毫無成本可言，先搜尋一下總是無傷大雅，或許還能找到更簡單、更好的實作方法！資料的查找仰賴於你有沒有搜尋對的關鍵字。

把握幾個面向的關鍵字，能大幅縮小搜尋結果的範圍，以下列了幾個面向幫助你去組裝你的搜尋關鍵字。

開始前，額外補充：以下為繁體中文舉例，如果你想找到更多資訊，可以嘗試使用英文或簡中去下關鍵字，你只需要先將關鍵字翻譯成當地的語言即可。

-使用的套件或框架，例如：Bootstrap、Element、Materialize-使用的語言，例如：HTML、CSS、JavaScript-使用的語法或組件，例如：Positioningabsolute、input元素、彈跳視窗元件-想要達成的目標，例如：背景圖片滿版、實作客製化radiobutton-遇到的問題，例如：圖片溢出、視窗無法開啟、點擊沒有效果-特別想要參考的網站或類型，例如：CSS-tricks、MDN、範例、心得簡單畫Wireframe組織切版架構Wireframe線框稿能用來呈現網頁的樣貌與排版佈局，如果規模比較大或功能較複雜時，也會包含使用的流程與規範。

在目標明確的情況下，我們能事先思考和規劃網頁HTML的架構和佈局，讓我們在開發前，對於接下來要開發的方向和內容有一定的構思，而非走一步算一步。

舉例來說，當我今天以下圖的導覽列做為練習的目標：在實作前，能先簡單畫出類似下面這個Wireframe──大致呈現HTML的結構與佈局，也把CSSClass名稱也先定義好，如此一來，我們能確保在開發前，是經過一段縝密的思考。

也由於已經勾勒出HTML結構和CSSClass命名，在開發時效率會更快：學習切版時，繪製Wireframe是用來幫助思考，因此美觀並非重點。

你可以用簡單的紙筆繪製，也能使用輔助性的軟體。

以下介紹兩款我個人比較常使用的線上繪圖工具（如果你想尋找其他的免費線上繪圖軟體，關鍵字是：「online+drawwireframe+free」）：Wireframe是什麼？認識網站UI設計排版草圖與資訊架構Draw.iodraw.io是一款線上繪圖軟體，透過樣板，使用者能快速繪製流程圖、時間軸、網路架構圖、文宣等。

當然，其中也包含Wireframe的樣板，讓我們能快速繪製一張簡單的Wireframe。

雖然看似陽春，但功能也是不少，對於要畫張簡單Wireframe的我們來說，是相當充足的了。

連結:https://app.diagrams.net/Figma如果你覺得draw.io的功能不夠用，你能嘗試看看更專業的設計工具Figma。

Figma允許多人協作，且在你每次做出變更時，能自動存取到雲端當中。

在介面上與功能上都更精緻，也更符合設計上的需求。

對於較複雜的功能設計，也能依照需求安裝外掛（例如：嵌入圖表和分析圖等）。

另一個很棒的附加功能，是當你在設計時，元素會產生相對應的CSS設定，協助工程師在開發上的效率。

掌握網頁開發：鍛鍊把設計稿活化成專業網頁的切版功力更多的經驗分享談對於剛起步學習切版的新手來說，你可能是第一次認真在觀察各種平常會拜訪的網站和裡面的功能，什麼都覺得很新鮮、很想嘗試──這種好奇心與熱情是非常珍貴的。

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

在本篇的最後，來分享一下我這一路走來的的經驗，希望有機會能讓大家能在接下來的道路上，少採一些坑：大方向上，永遠都要抱持著那份好奇心與熱情，並為自己設下一個目標，期許自己在一定的、適合的時間內能走到。

將大目標切小──確認有哪些技術點需要拿到，並安排學習的優先順序後。

至於有哪些技術點，你可以跟著或參考如TheOdinProject或其他課程的設計，又或是查詢關鍵字「CSS/HTML/Front-end+roadmap」。

扎實的學習每項技術，最好針對那個主題，找一些練習切版的小目標實作。

隨著技術點越撿越多，開始找一些複合型的目標來練習。

例如：客製化註冊表單，能練習不同的HTML和CSS結構與樣式設定等。

當技術學習到一定階段，實作也有一定的量後，開始嘗試多個區塊、多個頁面、為不同螢幕尺寸開發的目標練習。

最後，等技術底子夠了，未來則能去學習如何優化程式碼和架構──讓程式碼寫得更乾淨、更有結構性、可讀性與可維護性增強等。

這些方向的查詢關鍵字如：「CSSBestPractice/AdvanceCSS/WriteBetterCSS」。

網頁設計入門，一文讀懂HTML、CSS最後的最後，我想分享的是：在這條道路上，有太多東西需要學習了，況且技術也會不斷推陳出新，老實說真的很難學習的完。

所以再容我說一句「吸吸吐～不要慌！不要慌！不要慌！」會這麼撈叨是因為在這條道路上的某個時間點，我也曾擔心自己是不是還學得不夠多、不夠好，甚至因為想快點把Roadmap上的技術點都採集完畢，迷失了自我，最後陷入失落的境界。

然而，在跟我的主管請益後，他只回了我一句話：「開心最重要！」至今我還是很感謝他——做一件喜歡和熱情的事情，你能一直做一直做，甚至做到廢寢忘食、渴望挖得更深。

即便如此，你都走在對的道路上，而當時間久了，你的實力也會越來越強；相反的，學一些完全沒有興趣的領域，你會做得痛不欲深，我也相信這無法持久，甚至會想放棄。

祝福大家都能找到適合自己的道路，持續學習、持續練習、持續發光發熱！‍三分鐘小測驗，找到你學習網頁開發的入口Mike半路出家，愛上了網頁開發。

正持續努力和精進自己，以成為一位更優秀的網頁開發工程師👉喜歡旅遊，喜歡音樂，喜歡探險，喜歡學習，喜歡解決問題SeeAllPostSearch熱門搜尋自學程式學習方法學習教練助教跨領域職涯軟體工程師前端全端AllCategoriesAC動態AC評價Web技術人物專訪程式學習自學能力資料科學軟體職涯FollowUs延伸閱讀更多好文章推薦給你！Web技術React教學，系統性學習React的步驟Web技術CSS教學：認識語法規則與基本功Web技術演算法(Algorithm)是什麼?演算法應用的例子與場景Web技術助教開講活動回顧：網頁開發必學技巧不藏私公開Web技術LeetCode解題的思考策略，刷題的4個階段Web技術什麼是Scrum？認識Scrum的做法與它的限制Web技術CSS學習與實作經驗分享，如何建立扎實基本功Web技術為什麼要用Docker？如何用Docker構築不同MongoDB架構？ALPHACamp的使命是「幫助人們發展有意義、有價值的職涯」。

自2014年以來，我們以新加坡和台灣為教學據點，培訓超過6500名學員。

校友遍及台灣、新加坡、中國、以及全球的科技新創。

JavaScript全端開發課程三學期系統化課程設計學期一：程式設計入門學期二：掌握網頁開發學期三：軟體工程師養成最新課程New數位職涯RPGDATA&AI公開課SQL14天入門課LearnMore非本科跨領域學程式理工科職涯升值挑戰學習體驗成效Blog技術主題職涯攻略常見問題關於ALPHACamp加入我們ContactUsEmail：[email protected]電話：+886-2-2546-9766（※防疫期間AC採遠距上班，如需聯繫請來信或FB私訊）地址：105台北市復興北路201號6樓之4獲取最新資訊業界經驗分享、職涯諮詢、學習技能提升！訂閱電子報ALPHACamp｜創新職涯的線上學校©2022AllRightsReserved