自己專注Web設(shè)計(jì)與開發(fā)已經(jīng)有七八個(gè)年頭，并不算是什么大神，我自認(rèn)為還是一個(gè)行業(yè)菜鳥，從最原始的Flash，到當(dāng)今的一些交互趨勢、風(fēng)格，都經(jīng)歷了過來。雖然自己還有很多很多不足，但是對整個(gè)Web市場環(huán)境和對一些Web? UI設(shè)計(jì)和前端開發(fā)的底層探索和深入學(xué)習(xí)，并沒有停止腳步。也經(jīng)過自己的努力，得到過很多推薦和大大小小的獎項(xiàng)，也許，這是我夢想的必經(jīng)的一個(gè)“彎路”。

有時(shí)候，團(tuán)隊(duì)之間協(xié)作能暴露更多的個(gè)人問題，只有當(dāng)我們面對這些問題，從個(gè)人的角度去解決，才能優(yōu)化團(tuán)隊(duì)，高效協(xié)作。

我自己做過工作室，單槍匹馬干過，也有和團(tuán)隊(duì)一起奮斗過，在這坎坷的過程中，還是發(fā)現(xiàn)和總結(jié)了一些常見的問題，這些問題往往是有四五年甚至更多經(jīng)驗(yàn)的設(shè)計(jì)師或者開發(fā)者容易存在的問題，當(dāng)然我自己曾經(jīng)也有這些問題，現(xiàn)在慢慢已經(jīng)強(qiáng)迫自己去Fix了。不斷完善自己，不斷學(xué)習(xí)，才能夠完成自己真正的夢想(如果你不是單純?yōu)榱舜蚬せ蛘咦鰝€(gè)項(xiàng)目而選擇的這一行，我想，你知道你的夢想是什么，它的意義在哪兒)。

往往很多人，都會覺得自己很優(yōu)秀，反而忽略了一些最重要的，容易忽視的基本功?；蛟S你面對的是國內(nèi)客戶，或許你是在一個(gè)團(tuán)隊(duì)圈子中，無需面對眾多的考驗(yàn)。但這些都不是理由，我覺得，只是沒有真正找到你的夢想和上進(jìn)罷了。每個(gè)人都會迷茫，甚至一直迷茫，迷茫該怎么做的更好，或者該怎么繼續(xù)走下去。所以我非常有必要把這些常見的基本功問題做一個(gè)匯總。

一.不會運(yùn)用網(wǎng)格(柵格)系統(tǒng)

網(wǎng)格系統(tǒng)已經(jīng)有深遠(yuǎn)的歷史背景，對于網(wǎng)頁來說，所有的網(wǎng)頁都構(gòu)建與一個(gè)網(wǎng)格體系下，不論你的設(shè)計(jì)有多“個(gè)性”，都離不開網(wǎng)格。(Sorry, 這里的個(gè)性是一個(gè)雙重詞匯，包含了褒義和貶義，大家可以自己去理解一下)。

前端利用良好的網(wǎng)格系統(tǒng)，對于響應(yīng)式，元素的布局和比例把控，提高開發(fā)效率和質(zhì)量，都具有重要的意義。我們可以參考Bootstrap的網(wǎng)格系統(tǒng)，對前端網(wǎng)格進(jìn)行一個(gè)更深入的理解和研究，不難發(fā)現(xiàn)，網(wǎng)格對于開發(fā)的重要性。

對于設(shè)計(jì)師而言，網(wǎng)格不應(yīng)該僅僅作為一個(gè)“裝13”的工具，或者作為一個(gè)完成任務(wù)的工具，而應(yīng)該從網(wǎng)格系統(tǒng)中，把控好不同分辨率下元素的比例（按鈕，高度，文字大小，字體渲染，圖片大小，圖片比例，響應(yīng)式的背書）等等，這是一個(gè)難點(diǎn)，也是一個(gè)擁有數(shù)年經(jīng)驗(yàn)設(shè)計(jì)師容易犯，而且不易改正的錯(cuò)誤。往往設(shè)計(jì)稿可以非常美觀，但是對于元素的比例，在實(shí)際的前端開發(fā)過程中，往往能看出和原設(shè)計(jì)稿的差異有多大。為什么會存在還原度差異？因?yàn)榇a是活的，頁面時(shí)活的響應(yīng)的，并不是一張圖那種死的。所以設(shè)計(jì)噶，必須要運(yùn)用網(wǎng)格考慮更加深入的比例關(guān)系。

運(yùn)用好網(wǎng)格系統(tǒng)，前端開發(fā)能夠快速肉眼測量設(shè)計(jì)比例，便于提高開發(fā)效率，同時(shí)便于響應(yīng)式邏輯的梳理。

二.信息展示邏輯不符合普通人的思維

前端開發(fā)中，一個(gè)小小的交互效果，也許需要一個(gè)小時(shí)，也許需要一兩天，一個(gè)小小的邏輯，可以造成無比巨大的時(shí)間投入。這是設(shè)計(jì)師不能夠理解的（除非設(shè)計(jì)師對前端代碼有深入的理解，注意是深入理解，而不是簡單的了解）。為什么UI設(shè)計(jì)入門容易，想做到很厲害真的很難，因?yàn)槟阋鎸Φ念I(lǐng)域和知識深度是無限量的，你如果不去接受不去改變，你永遠(yuǎn)是一個(gè)只會做事的UI，沒有真正的合理邏輯思想。

改變，是對于有經(jīng)驗(yàn)的設(shè)計(jì)師和開發(fā)者提高的一種比較好的方式。

改變習(xí)慣，改變風(fēng)格，改變操作方式，改變思維，改變目標(biāo)群體，改變觀念等等，都對一個(gè)人的提高起著極其關(guān)鍵的作用。

舉個(gè)例子，一個(gè)設(shè)計(jì)稿，信息切換復(fù)雜多變，一個(gè)頁面信息重復(fù)毫無比重感，動效無止盡，對于一個(gè)普通的用戶，或者客戶來說，這個(gè)網(wǎng)站的體驗(yàn)是極其差的。不論一開始你做的有多牛，最后都要摒棄很多“無用的東西”。如何解決這個(gè)問題？把自己當(dāng)一個(gè)普通用戶，別把自己當(dāng)做一個(gè)專業(yè)的設(shè)計(jì)師或者開發(fā)者，看看自己使用時(shí)會帶來哪些問題，如果連自己都覺得“暈”，那這個(gè)設(shè)計(jì)就是天馬行空。團(tuán)隊(duì)協(xié)作過程，只會給前端開發(fā)帶來無止盡的工作量和返工量。

至于前端開發(fā)的邏輯，主要依賴于長期的積累和思維。不僅僅是交互的理解，更多的還是對用戶，對體驗(yàn)的洞察力，需要不斷地積累。

三.代碼沒有靈魂

就拿自己稍微熟悉的前端開發(fā)來說，一個(gè)網(wǎng)站的代碼有沒有靈魂，我認(rèn)為主要在于代碼的規(guī)范和造輪子能力，什么是輪子？如果不了解的可以去科普一下。

現(xiàn)在已經(jīng)不是十年前了，入境開發(fā)都將就合理利用身邊的資源，提高質(zhì)量和效率，當(dāng)然，前提是有一定的基本功，前端開發(fā)有著眾多的領(lǐng)域分工，不論哪個(gè)領(lǐng)域，都需要具備模塊化的一些思維和習(xí)慣。而這些思維和習(xí)慣，是需要強(qiáng)迫自己去改變的。你如果無法“讓別人更好的使用你的代碼”，那只能說明你寫的代碼沒有自己的靈魂，不能夠與別人對話。

舉個(gè)例子，你的代碼是否用了國際認(rèn)可的BEM命名規(guī)范，就連谷歌都在用的命名規(guī)范，然后代碼每個(gè)模塊之間的代碼，是否能夠快速剝離和重構(gòu)（使用Webpack或者Gulp等自動化工具打包后的代碼除外，這里主要是指打包前的原代碼）。能夠看出你的產(chǎn)品化思維比重占了多少？

我個(gè)人覺得，代碼是給人看的，也是給人用的，不僅僅給自己看給自己用，特別對于團(tuán)隊(duì)協(xié)作，更需要的是讓別人能夠理解和充分調(diào)用每個(gè)不同的模塊的代碼。時(shí)代在進(jìn)步，只有不斷掌握各種新工具和技術(shù)，比如自動化開發(fā)，自動化測試等等，才能跟上“夢想的腳步”。我覺得，考驗(yàn)自己代碼靈魂的方式，就是開源到github上，看看有多少人會和你的代碼互動。我自己也有一套前端開發(fā)的Kit工具包，目前也處于不斷優(yōu)化升級的過程，大家感興趣可以去了解一下——Uix Kit.

四.不注重基本的設(shè)計(jì)規(guī)范

對于設(shè)計(jì)師而言，設(shè)計(jì)規(guī)范至關(guān)重要，規(guī)范并不是束縛設(shè)計(jì)的東西，而是約束設(shè)計(jì)，并為設(shè)計(jì)提供一個(gè)更長遠(yuǎn)的發(fā)展空間的東西。關(guān)于網(wǎng)頁UI的設(shè)計(jì)規(guī)范，包含了非常多的底層知識，大家也可以通過我的新浪微博的#網(wǎng)頁設(shè)計(jì)技巧#標(biāo)簽去查看我平時(shí)的一些分享，也可以購買即將發(fā)布的專注底層設(shè)計(jì)規(guī)范的一本書籍。：）無恥的做了一個(gè)廣告，哈哈，其實(shí)不然，這些確實(shí)是我的汗水和心血。

我個(gè)人覺得，底層規(guī)范直接關(guān)系到了設(shè)計(jì)中的方方面面，不論你是做多規(guī)范普通的布局，還是多創(chuàng)意另類的風(fēng)格，都有底層規(guī)范存在，那些屬于底層規(guī)范呢？我大概列一些，比如中英文字體的相關(guān)知識，網(wǎng)格系統(tǒng)，屏幕尺寸和分辨率(關(guān)系到響應(yīng)式設(shè)計(jì))、安全寬度和安全高度、色彩、圖標(biāo)格式、命名等等，都屬于任何網(wǎng)頁都需要注重的基本中的基本。我把它們列入底層規(guī)范的范疇。然后，就是實(shí)踐中的規(guī)范操作，比如PSD命名，圖層歸總，PSD大小控制，頁面字體的選擇，字體數(shù)量，統(tǒng)一的間距，常用的比例控制，動態(tài)信息的布局控制等。

由于這些是一個(gè)長期積累和學(xué)習(xí)研究的過程，大家可以在不斷實(shí)踐的過程中去體會，任何運(yùn)用這些規(guī)范。我說的規(guī)范，并不是按鈕，窗口改多大？比例該多大？而是比它們更加原始的一些更基本的規(guī)范。

對于有些項(xiàng)目來說，很多客戶或者團(tuán)隊(duì)是不注重規(guī)范的，因?yàn)槟軌颉俺山弧?。而對于某些?xiàng)目來說，規(guī)范是非常強(qiáng)制而且明顯的一個(gè)要求，最基本的都無法通過，你怎么和客戶“成交“？我覺得想要提高自己，必須強(qiáng)制去改變自己的習(xí)慣，養(yǎng)成一個(gè)學(xué)習(xí)規(guī)范和運(yùn)用規(guī)范的能力。如果一個(gè)設(shè)計(jì)師僅僅認(rèn)為規(guī)范就是束縛，那我覺得這樣的設(shè)計(jì)，永遠(yuǎn)是虛無縹緲的，天馬行空的，是前端開發(fā)絕對不喜歡的。

注重基本的設(shè)計(jì)規(guī)范，能夠讓前端開發(fā)更加直觀的編寫統(tǒng)一的代碼，可重復(fù)的代碼，兼容性更強(qiáng)的代碼，從而提高協(xié)作效率，減少返工。反之亦然~

五.不注重基本的代碼規(guī)范

前端開發(fā)過程中，也存在一些非常明顯的，容易犯的低級規(guī)范錯(cuò)誤。比如命名。如果一個(gè)開發(fā)使用了拼音或者一些毫無根據(jù)的英文字母，這會讓其它開發(fā)者難以分辨，難以維護(hù)。開發(fā)是給人看的，也是給人維護(hù)的，這個(gè)人，不僅僅只是對于開發(fā)者本身。

再比如，開發(fā)過程中，文件和目錄的結(jié)構(gòu)，頁面結(jié)構(gòu)，縮進(jìn)，js代碼的空格，CSS代碼的格式等等，都是一些最最基本最容易犯下的問題。恰恰這些基礎(chǔ)問題，會造成大量的“垃圾代碼”，每做一個(gè)項(xiàng)目就結(jié)束了，沒有任何升級和重復(fù)包裝利用的價(jià)值。

我個(gè)人非?？粗卮a的可重復(fù)利用性，可升級擴(kuò)展性，閱讀性，雖然我并不是專業(yè)前端開發(fā)，只是一個(gè)為了輔助設(shè)計(jì)而專研的前端小菜，但是我對于把代碼寫“漂亮”，是非常注重的。只要是自己覺得不好的習(xí)慣，我就會強(qiáng)制自己去改變，去修正，而不是將就，一錯(cuò)再錯(cuò)?；蛟S，我的目標(biāo)不僅僅是能夠做項(xiàng)目，也不是能做點(diǎn)國內(nèi)的不注重規(guī)范的項(xiàng)目，我更多的是想讓別人喜歡我的開源代碼。

再次聲明哦，我不是碼農(nóng)，前端開發(fā)只是屬于我的附帶必須的技能~ 當(dāng)然，我也不是一枚UI，我更多專注的整套產(chǎn)品的把控和設(shè)計(jì)開發(fā)，甚至運(yùn)營。難度雖高，但是，這更有助于我實(shí)現(xiàn)我的各種小夢想。

六.綜合能力欠缺

或許很多人認(rèn)為全棧是一種啥都會，啥都不精的行為，其實(shí)不然，這種人挺多的。而且也是未來的一種人才需求，越來越多的優(yōu)秀企業(yè)，都會要求一個(gè)web設(shè)計(jì)師具備深入的前端知識掌控能力，對前端而言，也要求具備很多自動化工具的運(yùn)用能力。行業(yè)之間都存在互補(bǔ)的特征，同一行業(yè)，不同的技能也是一種互補(bǔ)和提升。你只有了解你不了解的，你才能提升。

否則，可能就只是一個(gè)眼高手低，只是一個(gè)“只能依托于團(tuán)隊(duì)”的份子。想想當(dāng)你離職以后，你自己能做什么，能抗住什么壓力？一個(gè)人，必須提高自己的綜合能力，學(xué)習(xí)很多自己不喜歡，甚至討厭的知識，任何人的成長，都是在不喜歡中成長起來的。不要排斥任何行業(yè)，也不要排斥任何技能，因?yàn)椋粋€(gè)小小的技能，可能讓你失之千里。

一個(gè)人會很多技能，而且有很多技能都能很溜，這種人，真的挺多的~ 跨出團(tuán)隊(duì)的圈子，你才知道，你會有多菜~ 當(dāng)然，每個(gè)人的追求不同，找到自己合適的目標(biāo)，才是最重要的。

我們這里談的是團(tuán)隊(duì)協(xié)作，當(dāng)你的綜合能力比較突出的時(shí)候，團(tuán)隊(duì)協(xié)作自然而然，會高效，會和諧很多。

七.沒有共同(≠相同)的目標(biāo)

有時(shí)候團(tuán)隊(duì)人員之間是否和諧，是否有一個(gè)不謀而合的想法，表現(xiàn)為是否存在共同的目標(biāo)。比如我想要拿到Awwwards類似獎項(xiàng)，而其它人沒有這個(gè)追求，那僅僅只是我自己去按照Awwwards的基礎(chǔ)標(biāo)準(zhǔn)去提煉自己，而真正的寫作過程中，由于項(xiàng)目或者產(chǎn)品的不可控性，往往最后是達(dá)不到Awwwards標(biāo)準(zhǔn)的。

因此，我為了提升自己，常常會將自己的一些私人項(xiàng)目列入比賽范疇。我覺得工作，就應(yīng)該有自己的空間，這是提升自己，發(fā)現(xiàn)自己的一種途徑，而不是為了拿工資而去做那點(diǎn)點(diǎn)事，那樣會被束縛，找不到自己真正想要做的事，找不到真正的目標(biāo)。一段時(shí)間后，也許，你會厭倦你做的工作，或者厭煩你的工作，或者換一份可能讓你厭倦的工作。

當(dāng)然，奮斗的同時(shí)，一定不要忽略了自己的身體，多鍛煉，才能實(shí)現(xiàn)你的目標(biāo)！

志同道合有多重要，也許，我已經(jīng)舉了一個(gè)很明顯的例子了。不只是做產(chǎn)品或者創(chuàng)業(yè)的志同道合，我只是舉了一個(gè)團(tuán)隊(duì)協(xié)作的志同道合。

結(jié)束語：

好了，我暫時(shí)匯總了這7個(gè)自己親身體會到，經(jīng)常遇到的小問題，它們其實(shí)也算是大問題了，或許也是長時(shí)間影響一個(gè)人發(fā)展的問題。多多扎實(shí)基本功，多多改變自己，多多學(xué)習(xí)，去創(chuàng)造自己的夢想，并實(shí)現(xiàn)它吧。因?yàn)槲乙彩且粋€(gè)扎根夢想而前行的人:) 感謝大家讀到最后。如果喜歡，可以關(guān)注我的個(gè)人中文博客哦。

本文同步發(fā)布于?沒位道|Chuckie Chang中文博客