切圖是UI設計師的工作還是Web前端工程師的工作呢？

Web前端作為一門入門門檻不是很高的學科，一直以來，受到很多IT學習者的青睞。但是，一些Web前端的大牛往往在基礎技能的前提下，掌握著大多數從業者不曾注重的技能，比如說切圖。那麼，切圖在Web前端開發工作中佔據什麼地位呢?下面，我就相關切圖問題給大家做下梳理。

首先，我們先來簡單瞭解下切圖的歷史。Web 2.0的時期，最流行的趨勢就是大字型、鮮豔色、高光和倒影，甚至許多人沒有自己的想法，盲目去追求，致使Web 2.0的網站變得千篇一律。這時有一些前衛的人，把平面設計等許多模式引入的網頁設計，他們用Photoshop做精準Mock up，然後通過CSS來實現，也就是所謂的切圖。通俗來講，切圖就是把設計稿切成一片片的，然後前端工程師運用DIV+CSS功能，最大限度的還原設計圖，也就是要把零碎的圖片整合成一張完整的圖片。

那麼切圖是不是必須的呢？毫無疑問，切圖是實際開發過程中不可或缺的一步。由於一張完整的設計稿是由不同的元素組成的，比如Logo、背景圖、圖示、文字等等，而部分元素，前端工程師是無法使用程式碼實現效果的，因此，需要將其單獨切出來使用。切圖資源的輸出將直接決定產品的最終效果。

此外，還有一部分人認為極簡主義是頁面所需要的，極簡主義放棄了花哨的圖案和設計，把重心放到了瀏覽器的字型、line-height、佈局、留白、以及互動。崇尚極簡主義的人覺得網頁不必要看起來很漂亮，但一定要用起來很舒服。當然對於從使用者的角度來講，用得舒服很重要，美好的視覺享受更容易讓你的APP脫穎而出。所以切圖仍然是前端開發中不可缺少的一步。

有的公司UI設計師會把需要的圖切好，但更多時候是需要前端工程師自己來切。我們不能每次都依賴UI設計師，自己掌握切圖技能還是很有必要的。切圖的實現，很大程度上讓網頁設計變得個性化，有生機，所以會切圖的前端工程師也更加受市場歡迎。關注我，會定期為大家分享最新Web前端發展趨勢、學習資料，助力大家學好Web前端。