天早上在微博上看到@前端農(nóng)民工 發(fā)了條關(guān)于前端工作細(xì)分的微博，大意是說(shuō)將前端的工作細(xì)分為頁(yè)面重構(gòu)(html/css)和js開發(fā)限制了工程師的發(fā)展，而且頁(yè)面功能模塊的開發(fā)維護(hù)也會(huì)變得割裂，一定程度上限制了js和css的配合方式，公司不應(yīng)該這樣做。

然而，事實(shí)上很多互聯(lián)網(wǎng)公司前端團(tuán)隊(duì)就是這么干的，包括我們團(tuán)隊(duì)，今天就來(lái)探討一下這個(gè)問(wèn)題，看看很多公司為什么要把前端工作細(xì)分，把前端工作細(xì)分有什么好處，能為我們解決那些問(wèn)題。

首先我們明確一下前端崗位職責(zé)的問(wèn)題，前端崗位的輸入是UED部門給到PSD效果圖、后端研發(fā)給到API，輸出產(chǎn)品成品。也就是說(shuō)拿到UED部門給到的PSD效果圖做成HTML、CSS，再拿到后端研發(fā)給到的API，完成前臺(tái)邏輯、前后端數(shù)據(jù)交互及其他JavaScript開發(fā)，最終產(chǎn)出產(chǎn)品成品并提交給測(cè)試。

由前端的崗位職責(zé)我們可以看出，前端工作可以分為兩種，一種是偏靜態(tài)，即HTML、CSS開發(fā)，一種是偏交互，即JavaScript、前臺(tái)邏輯和前后端交互。這兩種工作對(duì)人的要求是相差很大的，偏靜態(tài)的可以不涉及太多編程和邏輯，但要求心細(xì)、能把握細(xì)節(jié)、對(duì)視覺(jué)體驗(yàn)非常敏感、對(duì)用戶體驗(yàn)有一定的理解、能忍受IE6等瀏覽器帶來(lái)的痛苦、能持續(xù)學(xué)習(xí)，而后者對(duì)JavaScript要求較高、要有一定的編程能力、熟悉前后端協(xié)作模式、熟悉HTML和CSS、有一定的前端架構(gòu)能力。

從公司組建團(tuán)隊(duì)的角度來(lái)說(shuō)，要找一班優(yōu)秀的full stack前端工程師，是有一定難度的。比如我們鑫合匯前端團(tuán)隊(duì)，現(xiàn)在一共7個(gè)人，如果我們要求每一個(gè)人都寫HTML、CSS、JavaScript、前臺(tái)邏輯、前后端交互，并且都產(chǎn)出可維護(hù)的高質(zhì)量代碼，對(duì)很多人來(lái)說(shuō)做到?jīng)]問(wèn)題，但你知道要招到那么一班人有多難嗎？現(xiàn)在市場(chǎng)上本身優(yōu)秀前端就相當(dāng)奇缺，對(duì)于一個(gè)BAT以外的互聯(lián)網(wǎng)公司來(lái)說(shuō)，也許1個(gè)月都招不到1個(gè)讓你滿意的人，然而，如果我們換一種方式，找?guī)讉€(gè)偏靜態(tài)的，找?guī)讉€(gè)偏交互的，相對(duì)來(lái)說(shuō)，難度就小了很多，也許原來(lái)4個(gè)月都很難招到那么一班人，現(xiàn)在不到2個(gè)月就辦到了。千萬(wàn)別小看這一點(diǎn)，對(duì)于很多互聯(lián)網(wǎng)公司來(lái)說(shuō)，速度就是生命，不能迅速組建好團(tuán)隊(duì)并快速將產(chǎn)品推向市場(chǎng)，也許就意味著完蛋。

從公司用人成本的角度來(lái)說(shuō)，將前端細(xì)分為偏靜態(tài)和偏交互，能節(jié)約一筆開支。對(duì)每一個(gè)人都是高要求的話，自然成本要大一些，然而，如果把人員的要求都相對(duì)降下來(lái)了，成本自然也就降下來(lái)了。

從團(tuán)隊(duì)效率上來(lái)說(shuō)，將前端細(xì)分為偏靜態(tài)和偏交互，是高效的。打個(gè)比方，團(tuán)隊(duì)有50個(gè)頁(yè)面要做，一共有5個(gè)人，是每個(gè)人做10個(gè)靜態(tài)頁(yè)面，并實(shí)現(xiàn)所有的JavaScript、前臺(tái)邏輯、前后端交互效率高？還是2個(gè)人做所有的靜態(tài)頁(yè)面，3個(gè)人完成JavaScript、前臺(tái)邏輯、前后端交互效率高？肯定是后者，專注于做靜態(tài)頁(yè)面的同學(xué)可以做到平均一個(gè)頁(yè)面45分鐘完成，但如果全部都做，是很難做到的，并且寫JavaScript效率也變低了。

從團(tuán)隊(duì)技術(shù)管理的角度來(lái)說(shuō)，將前端細(xì)分為偏靜態(tài)和偏交互，人員相對(duì)易于管理，而且更容易產(chǎn)出可維護(hù)的高質(zhì)量代碼。偏靜態(tài)的幾個(gè)人可以致力于將靜態(tài)這一塊做到極致，偏交互的幾個(gè)人可以致力于將交互做到極致。

從個(gè)人職業(yè)上來(lái)說(shuō)，將前端細(xì)分為偏靜態(tài)和偏交互，降低了前端職位的從業(yè)門檻，有了一定技能的時(shí)候更容易安定下來(lái)。

有人說(shuō)前端細(xì)分這樣限制了JavaScript和CSS的配合方式，以我們鑫合匯團(tuán)隊(duì)的實(shí)踐經(jīng)驗(yàn)告訴大家，JavaScript和CSS的配合沒(méi)有問(wèn)題。

有人說(shuō)前端細(xì)分限制了工程師的職業(yè)天花板。這個(gè)在某些情況下是成立的，但是個(gè)人的職業(yè)天花板更多的還是由人本身決定的，一個(gè)對(duì)職業(yè)有追求的人，會(huì)想方設(shè)法讓自己的路越來(lái)越廣。馬云以前是英語(yǔ)老師，現(xiàn)在是中國(guó)首富，我初二的語(yǔ)文老師以前是挖煤的工人，主要還是由人本身決定的。當(dāng)然如果你想在你們團(tuán)隊(duì)中靜態(tài)和交互都做，也很簡(jiǎn)單，據(jù)說(shuō)騰訊有的團(tuán)隊(duì)就可以輪崗，干幾個(gè)月Node.js、再干幾個(gè)月做靜態(tài)頁(yè)面，你在你們團(tuán)隊(duì)中提出來(lái)，我相信你們老大會(huì)同意，只要不在項(xiàng)目非常緊急的時(shí)候。

我們程序員都希望自己能掌握更多的技術(shù)，精通前后端等所有技術(shù)，打敗Google，征服世界，相信我們程序員的思維是值得所有人尊敬的！

最后再來(lái)個(gè)總結(jié)吧，(*^__^*) ，將前端細(xì)分為偏靜態(tài)和偏交互，順應(yīng)了互聯(lián)網(wǎng)企業(yè)的發(fā)展需求，是今后的必然趨勢(shì)，無(wú)人能打敗的趨勢(shì)！

作者：Hoogle ；轉(zhuǎn)載自：簡(jiǎn)書

信ID：WEB_wysj(點(diǎn)擊關(guān)注) ◎ ◎ ◎ ◎ ◎◎◎◎◎一┳═┻︻▄

（點(diǎn)擊頁(yè)底“閱讀原文”前往下載）

● ● ●

各個(gè)領(lǐng)域的專業(yè)人士有個(gè)共同之處，他們總是在尋找各種方法和工具來(lái)改善自己的工作。他們探索的越多，就做的越好，做的越快。對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師而言，同樣是如此。

高素質(zhì)的網(wǎng)頁(yè)模板，更加有效的項(xiàng)目管理工具，豐富的設(shè)計(jì)靈感來(lái)源，實(shí)用可靠的生產(chǎn)力工具，這些都能從不同的層面加速你的網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目。也許今天推薦的網(wǎng)站和工具中，有不少你聽說(shuō)過(guò)，甚至已經(jīng)開始使用了，但是有些可能是你一直在搜索的。

學(xué)習(xí)資料

The UDX Book

如果你是剛剛開始了解用戶體驗(yàn)這個(gè)領(lǐng)域，那么這本書是個(gè)不錯(cuò)的入門資料。超過(guò)170頁(yè)的技術(shù)和實(shí)戰(zhàn)技巧，這本書涵蓋了這個(gè)領(lǐng)域最基礎(chǔ)最核心，同時(shí)也是相當(dāng)實(shí)用的知識(shí)，它值得你第一時(shí)間入手學(xué)習(xí)。

WordPress Design for Dummies

所有的“傻瓜”系列圖書都是相當(dāng)優(yōu)秀的入門圖書。這本的主題是 WordPress ，如果你是一個(gè)Wordpress 用戶，這本書能夠讓你更快更好地實(shí)用這套系統(tǒng)。內(nèi)容總體上是友好而易懂的，有提示有技巧，幫你更上一層樓。

免費(fèi)資源

Design Freebies by Visual Hierarchy

這是Visual Hierarchy 所提供的一個(gè)免費(fèi)設(shè)計(jì)資源合集，和其他的設(shè)計(jì)資源不同，這個(gè)合集中內(nèi)容的挑選更加“個(gè)人”。如果你需要的只是幾個(gè)免費(fèi)字體，一套圖標(biāo)，幾份視覺(jué)稿，也學(xué)這個(gè)200+免費(fèi)資源的合集正好能夠滿足你的需求。

Recipe App UI Kit

有一部分設(shè)計(jì)師喜歡將自己搜集的素材分享出來(lái)，還有一些設(shè)計(jì)師則更喜歡分享自己的設(shè)計(jì)作品。這個(gè)UIKit 設(shè)計(jì)項(xiàng)目來(lái)自Dribbble，其中每一個(gè)iOS UI的設(shè)計(jì)都相當(dāng)?shù)募?xì)致，值得收藏學(xué)習(xí)。

原型工具

Proto.io

Proto.io 是一款強(qiáng)大的原型設(shè)計(jì)工具，讓你可以在幾分鐘內(nèi)創(chuàng)建功能豐富功能完備的交互原型，無(wú)需編寫代碼。同時(shí)它還是一款協(xié)同工具，可以讓團(tuán)隊(duì)成員、客戶和利益相關(guān)者都參與到項(xiàng)目當(dāng)中來(lái)，在設(shè)計(jì)過(guò)程中實(shí)時(shí)分享設(shè)計(jì)原型。

PowerMockup

如果你更習(xí)慣使用PowerPoint，那么你應(yīng)該會(huì)喜歡PowerMockup這個(gè)工具。作為一個(gè)PowerPoint 的庫(kù)，你可以使用你所熟知的PPT來(lái)快速搭建一個(gè)桌面端或者移動(dòng)端界面的原型，簡(jiǎn)單的托拽就可以搞定一切，有了它，展示起來(lái)也更加便捷。如果你愿意添加自己定制的形狀和控件，你還可以同其他的PowerMockup 用戶進(jìn)行分享哦。

設(shè)計(jì)稿轉(zhuǎn)代碼服務(wù)

PSDgator

許多服務(wù)都能提供PSD轉(zhuǎn)代碼的功能，諸多服務(wù)當(dāng)中 PSDgator是佼佼者。它不僅可以將PSD轉(zhuǎn)化為響應(yīng)式的HTML5/CSS3代碼，還能識(shí)別 Sketch和AI的文檔，而這些設(shè)計(jì)稿還能有針對(duì)性的轉(zhuǎn)化為 Jquery/JS 代碼，甚至帶有視差效果。PSDgator 可以應(yīng)對(duì)不同的需求、不同類型的項(xiàng)目，包括制作Wordpress主題。

PSD2HTML

PSD2HTML? 是一個(gè)專注于數(shù)字化、營(yíng)銷和設(shè)計(jì)的Web前端開發(fā)公司，他們?cè)赑SD轉(zhuǎn)HTML這個(gè)領(lǐng)域深耕長(zhǎng)達(dá)11年，目前團(tuán)隊(duì)成員多達(dá)472人。他們能夠?yàn)槟闾峁┑拇a足夠?qū)I(yè)，質(zhì)量一流。

TheSiteSlinger

如果你需要將PSD/Sketch轉(zhuǎn)為HTML，需要郵件系統(tǒng)，BootStrap，或者CMS系統(tǒng)，那么The SiteSlinger 能幫你解決這一系列的問(wèn)題。The SiteSlinger 的團(tuán)隊(duì)是一個(gè)結(jié)果為導(dǎo)向的開發(fā)團(tuán)隊(duì)，你所需要做的就是聯(lián)系他們，提交你的設(shè)計(jì)，剩下的就由他們來(lái)操心吧。

多功能 WordPress 主題

Be Theme

我們?cè)?jīng)推薦過(guò) Be Theme 系列主題，這個(gè)團(tuán)隊(duì)提供了超過(guò)200個(gè)預(yù)搭建網(wǎng)站，超過(guò)40項(xiàng)核心功能，覆蓋的網(wǎng)站類型非常的全面。如果你需要特定功能的Wordpress主題，就去挑一個(gè)吧。

X Theme

如果你更傾向于功能完備可以自行定制的主題的話，那么這個(gè)幾乎在ThemeForest 平臺(tái)上近乎登頂?shù)腦 Theme 可能就是你的菜。X Theme 嚴(yán)格按照目前最高的標(biāo)準(zhǔn)來(lái)開發(fā)，基礎(chǔ)扎實(shí)，設(shè)計(jì)創(chuàng)新，功能也足夠前沿。最重要的是，圍繞著 X Theme 有一個(gè)完整的用戶社群，你可以得到最全面的幫助。

電商 WordPress 主題

Shopkeeper

Shopkeeper 是 ThemeForest 平臺(tái)上的另外一個(gè)熱賣的電商類主題。這個(gè)主題為你提供了足夠優(yōu)秀的用戶體驗(yàn)，并且沿著WooCommerce的思路來(lái)進(jìn)行整體的設(shè)計(jì)，它能讓用戶近乎無(wú)障礙的使用，并且內(nèi)置了漂亮炫酷的主題。

Xstore

XStore 是一款迷人而小巧的主題，簡(jiǎn)單看看他們官網(wǎng)上提供的演示模板就能體會(huì)到這一點(diǎn)。主題中所使用的特效被廣泛使用，但是在這里用的恰到好處，不顯累贅。

網(wǎng)站搭建工具與平臺(tái)

Webydo

Webydo 為專業(yè)的網(wǎng)頁(yè)設(shè)計(jì)師提供了無(wú)縫的網(wǎng)頁(yè)設(shè)計(jì)體驗(yàn)，并且無(wú)需使用代碼。Webydo 一開始就是針對(duì)沒(méi)有編程經(jīng)驗(yàn)的設(shè)計(jì)師來(lái)研發(fā)的，雖然市場(chǎng)上同類工具并不少，但是Webydo 的專業(yè)性上并不弱于其中任何一款。它不僅僅是從設(shè)計(jì)師的需求出發(fā)，而且便于結(jié)算，還提供了整潔的控制面板和專業(yè)的客戶端，以及強(qiáng)大無(wú)比的內(nèi)容管理系統(tǒng)。如果你是設(shè)計(jì)師，也許Webydo 就是你夢(mèng)寐以求的那個(gè)工具。

XPRS

XPRS 也是一款網(wǎng)站搭建工具，它會(huì)讓你的網(wǎng)站搭建像樂(lè)高一樣簡(jiǎn)單好玩兒。XPRS 讓你告別復(fù)雜、混亂、昂貴的開發(fā)過(guò)程，優(yōu)秀可靠的設(shè)計(jì)和可靠的托管服務(wù)，加上簡(jiǎn)單易用的集成編輯環(huán)境，還有什么樣的Web項(xiàng)目搞不定的呢？

WordPress 插件

wpDataTables

wpDataTables 是一個(gè)表單和圖表相關(guān)的插件。Wordpress主題中最麻煩的東西應(yīng)該就是表單和圖表了，尤其是當(dāng)它們還需要跟著頁(yè)面一起響應(yīng)式地聯(lián)動(dòng)的時(shí)候，效果相當(dāng)不可控。而這個(gè)插件就很好的解決了這個(gè)問(wèn)題，即使數(shù)據(jù)量很大它也能Hold得住。

W3 Total Cache

也許你一直解決不了的問(wèn)題能借助W3 Total Cashe搞定，滿足客戶對(duì)于網(wǎng)站瀏覽速度的需求。它提供的用戶體驗(yàn)也許一般，但是它確實(shí)能讓網(wǎng)站的相應(yīng)速度和交互效率提升到一個(gè)新的層次。它能提升服務(wù)器性能，減少文件下載的時(shí)間。

圖庫(kù)網(wǎng)站

PhotoSpin Royalty Free Stock Images and Subscriptions

PhotoSpin.com 提供了數(shù)以百萬(wàn)計(jì)的圖片，其中圖片都已經(jīng)被精心分類，并且每張圖片都提供了不同的尺寸供用戶進(jìn)行選擇。這個(gè)圖庫(kù)的素質(zhì)相當(dāng)?shù)母撸贿^(guò)是收費(fèi)的（當(dāng)然是物有所值了）。促銷代碼：BAW20

Stockfresh

Stockfresh 是另外一個(gè)值得推薦的圖庫(kù)，實(shí)際上在國(guó)外這個(gè)網(wǎng)站是相當(dāng)一部分設(shè)計(jì)師的圖片來(lái)源。這里圖片的價(jià)格相對(duì)比較實(shí)惠，類別廣泛，質(zhì)量也足夠上乘。收費(fèi)方式也相當(dāng)靈活，定期會(huì)有促銷活動(dòng)。

協(xié)作與任務(wù)管理

InVision

目前InVision 是最熱門也是最有影響力的數(shù)字產(chǎn)品設(shè)計(jì)原型設(shè)計(jì)和協(xié)作平臺(tái)，包括Adobe、Google、Facebook在內(nèi)的許多知名大公司以及先鋒的創(chuàng)業(yè)公司都在使用InVision 作為協(xié)作平臺(tái)。無(wú)需代碼，在原型設(shè)計(jì)階段，團(tuán)隊(duì)成員可以在這個(gè)平臺(tái)上更加頻繁自由的進(jìn)行設(shè)計(jì)、協(xié)同和反饋。

Azendoo

你的設(shè)計(jì)工具能夠很好的幫你完成原型設(shè)計(jì)，搞定網(wǎng)頁(yè)、APP的設(shè)計(jì)，但是你依然缺乏一個(gè)協(xié)同、跟蹤大型而復(fù)雜的設(shè)計(jì)項(xiàng)目的有效渠道，那么這個(gè)時(shí)候，你需要Azendoo。這款工具能夠讓你的團(tuán)隊(duì)和項(xiàng)目更緊密的結(jié)合起來(lái)，從審查、反饋到推進(jìn)都有條不紊。這樣一來(lái)，作為設(shè)計(jì)師的你可以更加專注于設(shè)計(jì)本身，事務(wù)上的事情更多由Azendoo來(lái)代勞。

UX 和 UI

Loop11

Loop 11 可以為你的網(wǎng)站提供最快速最便捷用戶體驗(yàn)測(cè)試，在它的幫助下，你再也不用在大數(shù)據(jù)和用戶反饋之間進(jìn)行糾結(jié)的決策了。Loop 11 所進(jìn)行的測(cè)試每次會(huì)選取幾百名用戶，隨時(shí)分析任務(wù)和執(zhí)行的成功率，根據(jù)點(diǎn)擊熱圖和回復(fù)來(lái)幫你更直觀的了解網(wǎng)站的實(shí)際效果，并且可以深入到用戶個(gè)人，了解他們碰到的具體問(wèn)題，甚至能夠?qū)С鎏囟ㄓ脩舻牟僮饕曨l來(lái)進(jìn)行研究。

Google Content Experiments

Google Content Experiments 這是另外一個(gè)測(cè)試平臺(tái)，它的A/B 測(cè)試非常有用。這個(gè)免費(fèi)的測(cè)試框架已經(jīng)被整合到Google Analytics當(dāng)中了。它能夠幫你針對(duì)特定的目標(biāo)進(jìn)行優(yōu)化。

其他實(shí)用工具

Coolors

Coolors 是一款直觀的配色工具，你可以以更加簡(jiǎn)單的方式創(chuàng)建色彩組合，還可以生成不同的格式，比如SVG、PDF或者SCSS，可用于Android、iOS、PS和AI等不同的平臺(tái)。

Fontea

Fontea 可以幫你在Photoshop中直接調(diào)用涵蓋700多款在字體的Google Fonts。這款插件最大的優(yōu)勢(shì)是你再也不用打開瀏覽器找字體，而是直接在程序內(nèi)調(diào)用了。

干貨！免費(fèi)領(lǐng)取騰訊高級(jí)講師網(wǎng)頁(yè)設(shè)計(jì)教程

點(diǎn)我領(lǐng)取

???

關(guān)注網(wǎng)頁(yè)設(shè)計(jì)自學(xué)平臺(tái)，99%的努力都在這里

▼文件下載點(diǎn)擊「閱讀原文」噢！在群文件里哦！