[新手前端]前端工程師和「切版的」有什麼不同? 13


前端工程師和「切版的」有什麼不同?

以網頁而言所謂的前端設計指得就是相對於「程式」、「資料庫」這些所謂的後端其他的都叫前端。
也就包括視覺的呈現、流程、HTML、CSS、JS等的運用以及所謂的使用者體驗(UE)、、使用者介面(UI)、可使性(UX-usability)等等,其實包山包海,範圍可大可小。

其中的 使用者體驗(UE),更是一個舉世知名的大坑,所謂的使用者體驗,user 使用這個產品的所有體驗、感覺,當然不會只停留在你的UI設計的好不好,網站速度、效能、程式有沒有出錯、企劃本身有沒有符合需求、如何去評測UX、如何設計反饋…,UE確實負責了產品的成敗,但是UE絕對不是單一個人的責任,UE是整個團隊的共同問題,所以不管是視覺、企劃、UI、前端、後端,其實只要有把UE放在心裡就好。

撇開嚇死人的UE,所謂的前端一般來說負責的比較接近 UI+切版,網頁產品最終被使用者直接接觸到的部分,包括 HTML+CSS 再來就是js、jQ做出一些動畫效果。然後也要考慮到跨平台、瀏覽器的呈現要盡量一致,至少要優雅的降級,雖不夠好看但不能破版或無法使用,所以在前端的工作內包括不少的溝通,和企劃、視覺、後端程式都需要做溝通,彼此做出適當的建議。

至於「切版」,就是一個動作將視覺設計好的PSD切成HTML+CSS然後供後端的工程師上程式。比起廣義的前端來說沒有包括那麼多可怕的跨領域內容。

不過「切版」本身也是有他的技巧,比如適當的HTML語義tag及結構,用什麼方式來組成內容可以有比較好的呈現及效能,CSS怎麼寫比較好維護更新,跨瀏覽器時怎麼取得最佳的平衡,跨平台時要不要做隨硬體變更尺寸的響應式設計等等… 單說切版似乎也不是那麼容易,何況到真正的前端工程師,技能實在是包山包海而且是跨領域的。

前陣子看了篇文章 為什麼前端工程師很難找

裡面很多意見,大抵來說,前端光是切版的部分,本來就在這個網路二三十年的發展中處於一個沒人專職的狀況,以前網路一人包辨,隨著內容越來越複雜有了視覺、程式的分工,中間的HTML+CSS不是視覺用DW產生就是程式順手寫一下。可是HTML+CSS不斷的發展到近年來js, jQ開始熱門,對程式來說,多如牛毛的跨瀏覽器呈現還有對畫面的美感失調,或是對視覺來說光看就像火星文的HTML+CSS,都是沒人想碰的東西。

學校又還沒有專門科目,想學只好自修的情況下,熟手自然少,何況是要求平均屬性的前端工作。
前端技能也許不是很難,但是很雜。光是基本技能就要會 PS, HTML,CSS, js, jQ (雖然技能那裡寫會PS,但是這個會PS 可是等級有1–100之分,而且 就算你的PS等級有到100, 你的設計能力也不見得有到啊 =..=+),其他還有簡單的心理學、色彩學、使用者研究等心法類的,技術方面也要熟悉各大瀏覽器、新的技術、行動平台…。

而我這個小小的新手前端,是由視覺往後走的,有大眾傳播的底子及社群經驗讓我對UI的部分要學習比較好掌握,不過js 那個方面就進程緩慢啦。

當個能把版切好的前端,是基本。
當個能把前端做好的前端,是一種挑戰。

/*
這篇比較像是前端相關心得文,似乎不太技術的樣子 Orz
*/


About chibc

chibc《暗月之鏡》 從高中網路開始普及就開始成為重度網路使用者,早期主要活動集中於巴哈姆特。
G+ CHIBC


看完有什麼想和版主講的,沒有就留個「閱」吧

13 thoughts on “[新手前端]前端工程師和「切版的」有什麼不同?

  • donutella

    我也是在做前端的, 也覺得你的文章講的矕有道理的, 我其實滿懷疑為什麼台灣在現在web 2.0的時代還停留在flash的時代, 每天逛awwwards, 覺得台灣的網頁設計好遙遠, 或許有好的.. 可是…就是難找..

    • chibc Post author

      我覺得兩個主要原因:
      一是這個領域本來就相對比較新,而且會需要做到前端這種區分的是中大型的網站,台灣本身的市場有限
      二則是所有網路技術都是英文… 中文網域的進度一向都比較慢

  • 我也在做前端,對於前端”工程師”的定義隨著摸索的深度越發無法確切定位,究竟該把前端定位在html+css(意思是成為css整合跨瀏覽器的能手)這樣就夠了?還是以css+js/jq為主才算是好的前端?當然我覺得html+css+js/jq是密布可的,只是定位上該怎麼確立才好?主要任務該如何確立?由於跨越的範圍可寬可窄,會否變成全都包的窘竟…

    我也是從視覺往後走的,一直也認為好的前端人才應該從前端往後走最佳,因為有視覺基礎,對於畫面的呈現及美感,甚或互動的效果及感受力,才會更敏感且精確!但隨著接觸越深,發覺真正高強的前端應該有夠強的程式能力(主要會在js/jq),才能創造出夠豐富創造力的視覺效果,所以隨著越多的摸索,也越發覺得js/jq的能力甚為重要!

    好的前端要能接得住設計提供的視覺並網頁化,還要能接得住後端傳過來的data,所以ps得技能是不可或缺,能透過ajax等非同步技術運用後端提供的資料豐富版面也是重要技能,所以能懂點php或jsp也挺加分….越談好像要會的越多了XD

    以上是個人淺見啦!也算是小小心得分享,我覺得暗月定的這個標題真的很值得不斷的思考探究,畢竟前端工程師(f2e)也是這幾年才興起的新崗位!

    一起加油吧!

    • chibc Post author

      我總是在看過許多職場的問題後,回現實現面覺得… 台灣市場太小

      所以除非真的很優秀、機運好進入台灣少數幾家網路大公司,否則前端都是會得越多被操的越死… Orz
      只能撇開職涯不聊,專心的對這個領域有熱情了

      前幾天和朋友聊到傳統產業及網路界的差別,人家一個技能專精熟練就能用二三十年,網路技術則是日新月異,要永遠不斷的學習,如果沒有薪水或是其他動力支持,這一行的投資報酬率實在很低啊 XDD

      • candylkk

        “傳統產業及網路界的差別,人家一個技能專精熟練就能用二三十年,網路技術則是日新月異”

        會計 採購 人事 法律 –>一個技能專精熟練就能用二三十年

        IT 程式設計 網路管理 –>技術則是日新月異 難專精

        所以大學要讀什麼較划算? 哈 我重來還是想讀資工資管 雖然大學時讀超爛 程式也不會寫 但退伍後發現自己只懂資訊 下決心重來 慢慢發現程式並不難 雖然大學底子超爛 但能畢業還是有點基礎 現在我很快樂 有成就感

  • ronaldlin

    To: chibc

    我覺得話不能這樣說,「一個技能專精熟練」我們拿裁縫-縫包包來說好了,也是有各種的作法,各種的工具

    怎麼樣才可以把產品批次生產出來,這也是一直需要摸索學習的,只是程式設計比較明顯有「新技術」出來

    其實這些技術終究都是工具,就像是木匠的各種鑿子一樣

    最後的重點仍是你能呈現什麼樣的作品,至於你用什麼技術?除非合約寫死,不然使用者才不管你咧

    對開發者來說,低成本(開發時間),高效果(使用者感受),就是好技術拉~

    至於操死不操死,這真的是台灣老闆「物盡其用」的習慣,只能自己挑對主子

  • 湯圓

    我本身是在一家公司做網頁工讀生,目前工作就是幫公司寫官網,而在技術上公司主管基本上就沒分
    你是工讀還是正職,反正企劃案子一來就是要你想辦法解決,因為我本身也是新手,公司也沒甚麼人來幫我解決技術問題
    多半都是靠自己摸,其實台灣在前端工程師的定位上感覺就是你好像懂一些,基本上就會天馬行空想一些東西要你去做
    雖然我資歷較淺,但可能這是我認為這行最辛苦的地方,技術的更新和效能的追求 ,或許不要說做前後端 幾本上整個IT業就是這樣吧~~

  • 恐龍

    我一路從平面設計 → 網頁設計 ( 當初害怕flash的action script就轉去學css ) → 現在莫名其妙被公司丟了一堆bootstrap / jq ui / jq mobile….哀 還要畫wireframe,覺得…要學的東西好多也學不完 ( 還好不用加班,自己英文有些底子

    一起加油~

  • 只是個路人

    如果說切版就是利用軟體將圖片變成Html的過程
    那假設產出的Html碼必須固定,是不是結構長的插不多的圖
    都可以經由軟體神奇的切版出只有CSS不同但卻一模一樣的Html結構?

    不過話說,現在還有分視覺設計跟純切版的設計師喔….
    不是統一叫美工嗎 ==”
    我想起了公司前任美工曾板著臉對很多人說過….”我是設計不是美工”
    我知道原因了 ><

    • chibc Post author

      有些平台在賣的那種,換圖就好的網站,就差不多這個意思啊 XD

      一般很少結構完全一樣的頁吧