章來源：http://www.qierukou.com/0jichu/

本人aming，創(chuàng)辦了一家前端公司，希望以我的經(jīng)驗給此時正在學(xué)習(xí)前端并且迷茫不知如何下手的人規(guī)劃一個學(xué)習(xí)路線。需要靜下心來5分鐘左右可看完。

10年學(xué)功夫，我認(rèn)為應(yīng)該蹲9年馬步，武功最高境界，我認(rèn)為是無招勝有招。

寫在開始

本人07年接觸前端至今，鑒于我個人的職業(yè)軌跡和大多數(shù)人不一樣，所以對于路線安排也不同，經(jīng)驗長者或者從業(yè)著可以不用看，也不要吐槽，僅做參考。

關(guān)于前端培訓(xùn)我持有不同的看法

或許目前的前端路線有點畸形， 我看到不少人盲目的拔高，而脫離了本質(zhì)

我看到現(xiàn)在很多培訓(xùn)的課程是（僅代表我所看到的現(xiàn)象，不指全部）

原生JS手寫一個漫天飛舞的雪花效果

原生JS 手寫一個3D炫酷吊炸天的相冊

基于CANVAS寫一個飛機大戰(zhàn)

….

的確足夠吸引眼球，學(xué)成可以就業(yè)BAT ? 你真的相信這些謊言嗎，現(xiàn)在的人都很聰明，有些我不用說太明白了吧，你不擔(dān)心到最后搞個高不成低不就，大小企業(yè)都不要你？

擦亮你的雙眼

可能是因為技術(shù)出生，我不知道利用高大上的詞匯和效果去吸睛。 目前很多0基礎(chǔ)因為看到前端很熱門，和培訓(xùn)機構(gòu)各種夸大，然后憧憬就職BAT或者大企業(yè)的人，不如腳踏實地，定位將來在中小企業(yè)上班來的靠譜啊。

在大家都瞄準(zhǔn)大企業(yè)的時候，我們不妨另辟蹊徑，定位中小企的前端需要，也許畢業(yè)就找到工作了呢。周鴻祎推薦了很多書，有一本《定位》對我的影響很大。。有點偏題了，接著聊

我不會的東西很多

算下來做到現(xiàn)在有些年份了，每天也是朝九晚五做前端，基本沒間歇過，但是我不會的東西很多，bootstrap，angular.js ，node.js等還有很多層出不窮的框架，很多都聽過和少量接觸過。我也很費解，這些年我都做了些什么..

pc項目html5+css3開發(fā)

移動web的html5+css3開發(fā)

響應(yīng)式的html5＋css3開發(fā)

又碰到那些問題？

pc問題

命名怎么命？是拼音還是英文單詞？ 縮寫好，還全寫好？圖片命名怎么命規(guī)范？ 怎么寫結(jié)構(gòu)算合理？ 長命名是駝峰 qietuInc, 還是 qietu_inc，還是 qietu-inc ? 什么是模塊話？ 先寫結(jié)構(gòu)還是先切圖？ 選項卡怎么寫？下拉菜單如何美化最好？ js寫好還是jquery寫好？ jq幻燈片手寫怎么寫？ jq圖片滾動的原理？ 兼容性怎么解決？ 兼容性和性能如何折中？。。

移動web問題

移動web兼容性怎么處理？ 怎么適應(yīng)多種屏幕？ 移動web是定款還是 100% 還是rem方式？

。。。。

就是這些了，好像很簡單，其實你要過細(xì)研究，想做到胸有成竹，要很多年。

項目數(shù)量到是不少，團隊一起累計開發(fā)的超過2000個 ，因為開的是前端技術(shù)外包公司，所以做的東西是直面中小企的直接需求的，畢竟這還是主要需求啊。。

很多經(jīng)驗是沉淀而來的，不是拔高而來的，這是我個人認(rèn)為，沉淀比拔高要重要。可能在這個浮躁的時代，很多人不會認(rèn)可我的看法。

練就的“一身本領(lǐng)”

看到問題基本快速找到核心所在，并且從根本上解決問題

pc兼容性，移動web兼容性很頭疼的，每個小問題都要反復(fù)測試研究，還好對于這方面有大量的心得

對于復(fù)雜的項目，布局的時候能夠思路清晰，游刃有余

這些是積攢下來的，是沉淀出來的，不是拔高出來的。

如果你會這些能找到工作嗎？

我保證一定能，我公司客戶經(jīng)常也會問我又沒有人推薦去上班，所以你會這些就夠了，這個才是網(wǎng)頁的本質(zhì)啊

（題外話：在公司也面試過一個人，node.js，angular.js，bootstrap還有各種模版引擎，mvc架構(gòu)都能來，我當(dāng)然也很稀罕，最終的面試內(nèi)容是挑了一張我們平時的一個比較簡單的項目現(xiàn)場實操，我發(fā)現(xiàn)問題很多。。 連基本的布局都有很大的問題，試想一下，脫離了html5+css3布局本質(zhì)的 拔高有意義嘛？ ）

真的這么簡單？

肯定不是，前面我說的只是大方向，你要會pc前端開發(fā)，移動web開發(fā)，響應(yīng)式開發(fā)，并且要精通吧，有經(jīng)驗吧，自己參與做幾個項目，對于碰到的問題，有方法，你還怕沒有公司要你嗎

所以我給你的規(guī)劃路線是這樣的

1周時間看w3cshool掌握所有html標(biāo)簽和css屬性

1周，有人帶你操作第一個網(wǎng)頁布局，直播一次講一次，自己操練一次（算入門）

練習(xí)－－pc開發(fā)幾例

練習(xí)－－移動開發(fā)幾例

練習(xí)－－響應(yīng)式開發(fā)幾例

因為公司內(nèi)需，也會定期招一批感興趣，但是0基礎(chǔ)的小白，采用這種實戰(zhàn)操練的方式效果非常好，0基礎(chǔ)一周能做簡單的項目，后面基本都是實操，練，練，練

不出3個月就能參與我們分擔(dān)部分工作啦

0基礎(chǔ)怎么做項目？

也許你心里有這個疑問吧 ，這個不用擔(dān)心，因為我們有經(jīng)驗，當(dāng)然找實操的項目是精心挑選的，一個事難度循序漸進，一個事考慮涉及到的知識點是否有涉及，然后實戰(zhàn)操練起啦，給你看一遍，帶著講解，然后自己照著做，就好了。

還有內(nèi)訓(xùn)嗎？

肯定是沒有了，因為是不定期的，所以很難對上時間。

－－－－

廣告，你可以不看

前端項目實操，實操，實操，公開課報名

https://ke.qq.com/course/155006

文中提到的公司

http://www.qietu.com

qq交流站隊群

308736107

實操學(xué)習(xí)報名/ 疑惑請教 / 企業(yè)招聘需求聯(lián)系qq

6133576

.數(shù)據(jù)可視化的顏色組合

即便如此，我們經(jīng)常發(fā)現(xiàn)雖然我們有數(shù)據(jù)，但我們不知道用什么圖表來表達(dá)最佳形式的數(shù)據(jù)價值。我們只使用一些簡單的直方圖，折線圖或餅圖。在顏色和字體等細(xì)節(jié)方面，我們不知道如何制作更漂亮的組合。

要構(gòu)建一個出色的可視化儀表板（一個真正信息豐富且面向行動的儀表板），僅列出其中的所有信息是不夠的。為了使儀表板能夠完整而清晰地向人們傳達(dá)信息，我們必須仔細(xì)考慮規(guī)劃和設(shè)計的各種要素。

接下來，本文將從為數(shù)據(jù)可視化選擇顏色組合方面為您提供詳細(xì)說明。配色方案設(shè)定了您創(chuàng)建的任何內(nèi)容的基調(diào)。人們可以知道您正在顯示的數(shù)據(jù)類型，它的關(guān)系以及您在數(shù)據(jù)可視化中使用的顏色之間的差異。

來自真值油漆

如果您不知道如何組合和展示完成的報告或者不知道如何制作合理的布局，請按照我們的步驟選擇完美的顏色組合。

2.顏色組合一致性原則

顏色是最有效的美學(xué)特征之一，因為它吸引了人們的注意力。我們注意到的第一個特征是顏色，它突出了特定的見解并以直接的方式識別異常值。在論證中，顏色的使用應(yīng)該基于數(shù)據(jù)而不是個人偏好或品牌顏色。

通常，在選擇顏色方案時，我們可以遵循以下顏色組合一致性原則。

2.1數(shù)值指標(biāo)的一致性

當(dāng)我們根據(jù)某個指標(biāo)的數(shù)值進行顏色映射時，建議使用生長顏色系統(tǒng)的漸變顏色。

例如，如上圖所示，統(tǒng)計數(shù)據(jù)是不同年份的地區(qū)的銷售情況。左圖的顏色沒有顏色系統(tǒng)和生長規(guī)律。用戶很難理解特定索引值的映射含義。此時，如果我們使用正在生長的顏色系統(tǒng)的表達(dá)，它將向用戶傳達(dá)顏色可測量性的感覺。然后，根據(jù)這種梯度增長顏色，用戶可以容易地理解該年中每個地區(qū)的銷售分布。

2.2指標(biāo)顏色的一致性

制作圖表時，我們應(yīng)該對相同的指標(biāo)使用相同的顏色方案。我們需要避免對用戶的過度色彩干擾。

例如，當(dāng)我們進行銷售分析時，我們通常會分析銷售和付款收集的指標(biāo)。然后，當(dāng)我們對同一指標(biāo)進行不同維度的數(shù)據(jù)可視化分析時，我們建議使用相同的顏色系統(tǒng)進行銷售和付款收集。這意味著銷售額可以用黃綠色表示，并且返還金額可以相應(yīng)地用藍(lán)色表示。在遵循指示顏色一致性原則后，用戶可以根據(jù)顏色區(qū)分快速理解當(dāng)前數(shù)據(jù)可視化圖表所表示的指標(biāo)的含義。

2.3顏色系統(tǒng)的一致性

在同一儀表板中，我們應(yīng)該嘗試選擇相同顏色系統(tǒng)的配色方案以避免顏色碰撞。

在儀表板中定義和選擇顏色時，許多用戶可能會對如何匹配它們感到困惑。實際上，在色彩組合方面，F(xiàn)ineReport內(nèi)置了許多漂亮的配色方案。它允許用戶在同一顏色系統(tǒng)中選擇顏色，這對用戶非常友好。畢竟，外觀也有所不同。

如果我們要自定義顏色，我們需要避免一些碰撞。例如，如果您匹配黃色+白色，藍(lán)色+黑色，紅色+藍(lán)色，黃色+紫色等顏色，則整個圖像不美觀，并且很容易刺激用戶的眼睛。

2.4語義顏色的一致性

與語義匹配的顏色可以幫助人們更快地處理信息。我們應(yīng)該根據(jù)指標(biāo)的含義選擇最適合我們最直觀感受的顏色。

因此，在氣候圖中，紅色可用于指示熱量分布。棕色可用于表示干旱指數(shù)，藍(lán)色表示降水，等等。

以上是顏色組合一致性的四個主要原則。您是否對如何為數(shù)據(jù)可視化選擇顏色方案有基本的了解？

事實上，我們都知道從頭開始為數(shù)據(jù)可視化創(chuàng)建顏色方案是一項挑戰(zhàn)。這是因為您必須通過您使用的顏色顯示對比度或自然進度。目前，我們強烈建議您找一個已經(jīng)存在的方案。也就是說，您可以使用一些報告工具來幫助您找到吸引您的配色方案。例如，F(xiàn)ineReport可以為您提供多種配色方案。FineReport的HTML5圖表技術(shù)支持各種圖表類型，模式和樣式。

現(xiàn)在讓我們享受一些出色的數(shù)據(jù)可視化！

享之前給你推薦一下我自己的Web前端學(xué)習(xí)交流群：527535103，歡迎各位小白、和大神進群學(xué)習(xí)交流。

Web前端，到現(xiàn)在來說都是一個新詞匯！因為剛開始的時候就只有美工和程序！后來隨著互聯(lián)網(wǎng)的發(fā)展，對于用戶交互體驗這方面的需求越來越高！然后就衍生出了一個新行業(yè)UI，就是用戶交互頁面。當(dāng)然這包括視覺效果和交互體驗，也就是互動性。這就需要用js實現(xiàn)，于是出圖的工作就成了前端美工，切出HTML。CSS就成了前端切圖，JS就成了前端交互。一般情況下出圖和HTML頁面是一個人完成，而JS效果由程序員去寫（當(dāng)然也分公司）。有的公司前端要會的東西不止這些！

關(guān)于前端培訓(xùn)我持有不同的看法

或許目前的前端路線有點畸形， 我看到不少人盲目的拔高，而脫離了本質(zhì)

我看到現(xiàn)在很多培訓(xùn)的課程是（僅代表我所看到的現(xiàn)象，不指全部）

原生JS手寫一個漫天飛舞的雪花效果

原生JS 手寫一個3D炫酷吊炸天的相冊

基于CANVAS寫一個飛機大戰(zhàn)

….

的確足夠吸引眼球，學(xué)成可以就業(yè)BAT ? 你真的相信這些謊言嗎，現(xiàn)在的人都很聰明，有些我不用說太明白了吧，你不擔(dān)心到最后搞個高不成低不就，大小企業(yè)都不要你？

作為0基礎(chǔ)的你給你推薦以下兩本書：

1.基礎(chǔ)部分

HTML和css還有Java是基礎(chǔ)知識但是相比較來講HTML和css比較簡單，而Java涉及內(nèi)容之廣泛超乎大家的想象

這個是有人推薦學(xué)習(xí)Java要看到書此書據(jù)說能夠幫助你區(qū)分哪些是語言的精華，哪些是糟粕，對于語言精華，應(yīng)該深入學(xué)習(xí)。還有一個《入門到精通》實在不信你可以百度百科一下Java的長度和HTML的長度，你就知道。

2.進階

上面的知道了基本就能做出靜態(tài)頁面了，畢竟web前端就是干這個的，但是對于現(xiàn)在越來越重要的用戶體驗，大家已經(jīng)越來越不滿足簡簡單單的靜態(tài)頁面了，而是需要各種交互（UI還得設(shè)計的好，要不用戶打開覺得丑早就給你關(guān)了）

進階的css《精通css》

看完這本書你應(yīng)該對：盒子模型，流動，Block，inline，層疊，樣式優(yōu)先級，等概念非常了解了。

在進階，關(guān)于js框架，昨天寫的文章就是關(guān)于框架的，有興趣的同學(xué)可以抓緊時間看一看

框架語言大多是jQuery（框架的重要性屏蔽瀏覽器的差異性）

我不會的東西很多

算下來做到現(xiàn)在有些年份了，每天也是朝九晚五做前端，基本沒間歇過，但是我不會的東西很多，bootstrap，angular.js ，node.js等還有很多層出不窮的框架，很多都聽過和少量接觸過。我也很費解，這些年我都做了些什么..

pc項目html5+css3開發(fā)

移動web的html5+css3開發(fā)

響應(yīng)式的html5＋css3開發(fā)

又碰到那些問題？

pc問題

命名怎么命？是拼音還是英文單詞？ 縮寫好，還全寫好？圖片命名怎么命規(guī)范？ 怎么寫結(jié)構(gòu)算合理？ 長命名是駝峰 qietuInc, 還是 qietu_inc，還是 qietu-inc ? 什么是模塊話？ 先寫結(jié)構(gòu)還是先切圖？ 選項卡怎么寫？下拉菜單如何美化最好？ js寫好還是jquery寫好？ jq幻燈片手寫怎么寫？ jq圖片滾動的原理？ 兼容性怎么解決？ 兼容性和性能如何折中？。。

移動web問題

移動web兼容性怎么處理？ 怎么適應(yīng)多種屏幕？ 移動web是定款還是 100% 還是rem方式？

。。。。

就是這些了，好像很簡單，其實你要過細(xì)研究，想做到胸有成竹，要很多年。

項目數(shù)量到是不少，團隊一起累計開發(fā)的超過2000個 ，因為開的是前端技術(shù)外包公司，所以做的東西是直面中小企的直接需求的，畢竟這還是主要需求啊。。

很多經(jīng)驗是沉淀而來的，不是拔高而來的，這是我個人認(rèn)為，沉淀比拔高要重要。可能在這個浮躁的時代，很多人不會認(rèn)可我的看法。

練就的“一身本領(lǐng)”

看到問題基本快速找到核心所在，并且從根本上解決問題

pc兼容性，移動web兼容性很頭疼的，每個小問題都要反復(fù)測試研究，還好對于這方面有大量的心得

對于復(fù)雜的項目，布局的時候能夠思路清晰，游刃有余

這些是積攢下來的，是沉淀出來的，不是拔高出來的。

文章到這里就結(jié)束了，還是要推薦一下我自己Web前端學(xué)習(xí)交流群：527535103，歡迎各位進群學(xué)習(xí)交流。