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

本人aming，创办了一家前端公司，希望以我的经验给此时正在学习前端并且迷茫不知如何下手的人规划一个学习路线。需要静下心来5分钟左右可看完。

10年学功夫，我认为应该蹲9年马步，武功最高境界，我认为是无招胜有招。

写在开始

本人07年接触前端至今，鉴于我个人的职业轨迹和大多数人不一样，所以对于路线安排也不同，经验长者或者从业着可以不用看，也不要吐槽，仅做参考。

关于前端培训我持有不同的看法

或许目前的前端路线有点畸形， 我看到不少人盲目的拔高，而脱离了本质

我看到现在很多培训的课程是（仅代表我所看到的现象，不指全部）

原生JS手写一个漫天飞舞的雪花效果

原生JS 手写一个3D炫酷吊炸天的相册

基于CANVAS写一个飞机大战

….

的确足够吸引眼球，学成可以就业BAT ? 你真的相信这些谎言吗，现在的人都很聪明，有些我不用说太明白了吧，你不担心到最后搞个高不成低不就，大小企业都不要你？

擦亮你的双眼

可能是因为技术出生，我不知道利用高大上的词汇和效果去吸睛。 目前很多0基础因为看到前端很热门，和培训机构各种夸大，然后憧憬就职BAT或者大企业的人，不如脚踏实地，定位将来在中小企业上班来的靠谱啊。

在大家都瞄准大企业的时候，我们不妨另辟蹊径，定位中小企的前端需要，也许毕业就找到工作了呢。周鸿祎推荐了很多书，有一本《定位》对我的影响很大。。有点偏题了，接着聊

我不会的东西很多

算下来做到现在有些年份了，每天也是朝九晚五做前端，基本没间歇过，但是我不会的东西很多，bootstrap，angular.js ，node.js等还有很多层出不穷的框架，很多都听过和少量接触过。我也很费解，这些年我都做了些什么..

pc项目html5+css3开发

移动web的html5+css3开发

响应式的html5＋css3开发

又碰到那些问题？

pc问题

命名怎么命？是拼音还是英文单词？ 缩写好，还全写好？图片命名怎么命规范？ 怎么写结构算合理？ 长命名是驼峰 qietuInc, 还是 qietu_inc，还是 qietu-inc ? 什么是模块话？ 先写结构还是先切图？ 选项卡怎么写？下拉菜单如何美化最好？ js写好还是jquery写好？ jq幻灯片手写怎么写？ jq图片滚动的原理？ 兼容性怎么解决？ 兼容性和性能如何折中？。。

移动web问题

移动web兼容性怎么处理？ 怎么适应多种屏幕？ 移动web是定款还是 100% 还是rem方式？

。。。。

就是这些了，好像很简单，其实你要过细研究，想做到胸有成竹，要很多年。

项目数量到是不少，团队一起累计开发的超过2000个 ，因为开的是前端技术外包公司，所以做的东西是直面中小企的直接需求的，毕竟这还是主要需求啊。。

很多经验是沉淀而来的，不是拔高而来的，这是我个人认为，沉淀比拔高要重要。可能在这个浮躁的时代，很多人不会认可我的看法。

练就的“一身本领”

看到问题基本快速找到核心所在，并且从根本上解决问题

pc兼容性，移动web兼容性很头疼的，每个小问题都要反复测试研究，还好对于这方面有大量的心得

对于复杂的项目，布局的时候能够思路清晰，游刃有余

这些是积攒下来的，是沉淀出来的，不是拔高出来的。

如果你会这些能找到工作吗？

我保证一定能，我公司客户经常也会问我又没有人推荐去上班，所以你会这些就够了，这个才是网页的本质啊

（题外话：在公司也面试过一个人，node.js，angular.js，bootstrap还有各种模版引擎，mvc架构都能来，我当然也很稀罕，最终的面试内容是挑了一张我们平时的一个比较简单的项目现场实操，我发现问题很多。。 连基本的布局都有很大的问题，试想一下，脱离了html5+css3布局本质的 拔高有意义嘛？ ）

真的这么简单？

肯定不是，前面我说的只是大方向，你要会pc前端开发，移动web开发，响应式开发，并且要精通吧，有经验吧，自己参与做几个项目，对于碰到的问题，有方法，你还怕没有公司要你吗

所以我给你的规划路线是这样的

1周时间看w3cshool掌握所有html标签和css属性

1周，有人带你操作第一个网页布局，直播一次讲一次，自己操练一次（算入门）

练习－－pc开发几例

练习－－移动开发几例

练习－－响应式开发几例

因为公司内需，也会定期招一批感兴趣，但是0基础的小白，采用这种实战操练的方式效果非常好，0基础一周能做简单的项目，后面基本都是实操，练，练，练

不出3个月就能参与我们分担部分工作啦

0基础怎么做项目？

也许你心里有这个疑问吧 ，这个不用担心，因为我们有经验，当然找实操的项目是精心挑选的，一个事难度循序渐进，一个事考虑涉及到的知识点是否有涉及，然后实战操练起啦，给你看一遍，带着讲解，然后自己照着做，就好了。

还有内训吗？

肯定是没有了，因为是不定期的，所以很难对上时间。

－－－－

广告，你可以不看

前端项目实操，实操，实操，公开课报名

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

文中提到的公司

http://www.qietu.com

qq交流站队群

308736107

实操学习报名/ 疑惑请教 / 企业招聘需求联系qq

6133576

.数据可视化的颜色组合

即便如此，我们经常发现虽然我们有数据，但我们不知道用什么图表来表达最佳形式的数据价值。我们只使用一些简单的直方图，折线图或饼图。在颜色和字体等细节方面，我们不知道如何制作更漂亮的组合。

要构建一个出色的可视化仪表板（一个真正信息丰富且面向行动的仪表板），仅列出其中的所有信息是不够的。为了使仪表板能够完整而清晰地向人们传达信息，我们必须仔细考虑规划和设计的各种要素。

接下来，本文将从为数据可视化选择颜色组合方面为您提供详细说明。配色方案设定了您创建的任何内容的基调。人们可以知道您正在显示的数据类型，它的关系以及您在数据可视化中使用的颜色之间的差异。

来自真值油漆

如果您不知道如何组合和展示完成的报告或者不知道如何制作合理的布局，请按照我们的步骤选择完美的颜色组合。

2.颜色组合一致性原则

颜色是最有效的美学特征之一，因为它吸引了人们的注意力。我们注意到的第一个特征是颜色，它突出了特定的见解并以直接的方式识别异常值。在论证中，颜色的使用应该基于数据而不是个人偏好或品牌颜色。

通常，在选择颜色方案时，我们可以遵循以下颜色组合一致性原则。

2.1数值指标的一致性

当我们根据某个指标的数值进行颜色映射时，建议使用生长颜色系统的渐变颜色。

例如，如上图所示，统计数据是不同年份的地区的销售情况。左图的颜色没有颜色系统和生长规律。用户很难理解特定索引值的映射含义。此时，如果我们使用正在生长的颜色系统的表达，它将向用户传达颜色可测量性的感觉。然后，根据这种梯度增长颜色，用户可以容易地理解该年中每个地区的销售分布。

2.2指标颜色的一致性

制作图表时，我们应该对相同的指标使用相同的颜色方案。我们需要避免对用户的过度色彩干扰。

例如，当我们进行销售分析时，我们通常会分析销售和付款收集的指标。然后，当我们对同一指标进行不同维度的数据可视化分析时，我们建议使用相同的颜色系统进行销售和付款收集。这意味着销售额可以用黄绿色表示，并且返还金额可以相应地用蓝色表示。在遵循指示颜色一致性原则后，用户可以根据颜色区分快速理解当前数据可视化图表所表示的指标的含义。

2.3颜色系统的一致性

在同一仪表板中，我们应该尝试选择相同颜色系统的配色方案以避免颜色碰撞。

在仪表板中定义和选择颜色时，许多用户可能会对如何匹配它们感到困惑。实际上，在色彩组合方面，FineReport内置了许多漂亮的配色方案。它允许用户在同一颜色系统中选择颜色，这对用户非常友好。毕竟，外观也有所不同。

如果我们要自定义颜色，我们需要避免一些碰撞。例如，如果您匹配黄色+白色，蓝色+黑色，红色+蓝色，黄色+紫色等颜色，则整个图像不美观，并且很容易刺激用户的眼睛。

2.4语义颜色的一致性

与语义匹配的颜色可以帮助人们更快地处理信息。我们应该根据指标的含义选择最适合我们最直观感受的颜色。

因此，在气候图中，红色可用于指示热量分布。棕色可用于表示干旱指数，蓝色表示降水，等等。

以上是颜色组合一致性的四个主要原则。您是否对如何为数据可视化选择颜色方案有基本的了解？

事实上，我们都知道从头开始为数据可视化创建颜色方案是一项挑战。这是因为您必须通过您使用的颜色显示对比度或自然进度。目前，我们强烈建议您找一个已经存在的方案。也就是说，您可以使用一些报告工具来帮助您找到吸引您的配色方案。例如，FineReport可以为您提供多种配色方案。FineReport的HTML5图表技术支持各种图表类型，模式和样式。

现在让我们享受一些出色的数据可视化！

享之前给你推荐一下我自己的Web前端学习交流群：527535103，欢迎各位小白、和大神进群学习交流。

Web前端，到现在来说都是一个新词汇！因为刚开始的时候就只有美工和程序！后来随着互联网的发展，对于用户交互体验这方面的需求越来越高！然后就衍生出了一个新行业UI，就是用户交互页面。当然这包括视觉效果和交互体验，也就是互动性。这就需要用js实现，于是出图的工作就成了前端美工，切出HTML。CSS就成了前端切图，JS就成了前端交互。一般情况下出图和HTML页面是一个人完成，而JS效果由程序员去写（当然也分公司）。有的公司前端要会的东西不止这些！

关于前端培训我持有不同的看法

或许目前的前端路线有点畸形， 我看到不少人盲目的拔高，而脱离了本质

我看到现在很多培训的课程是（仅代表我所看到的现象，不指全部）

原生JS手写一个漫天飞舞的雪花效果

原生JS 手写一个3D炫酷吊炸天的相册

基于CANVAS写一个飞机大战

….

的确足够吸引眼球，学成可以就业BAT ? 你真的相信这些谎言吗，现在的人都很聪明，有些我不用说太明白了吧，你不担心到最后搞个高不成低不就，大小企业都不要你？

作为0基础的你给你推荐以下两本书：

1.基础部分

HTML和css还有Java是基础知识但是相比较来讲HTML和css比较简单，而Java涉及内容之广泛超乎大家的想象

这个是有人推荐学习Java要看到书此书据说能够帮助你区分哪些是语言的精华，哪些是糟粕，对于语言精华，应该深入学习。还有一个《入门到精通》实在不信你可以百度百科一下Java的长度和HTML的长度，你就知道。

2.进阶

上面的知道了基本就能做出静态页面了，毕竟web前端就是干这个的，但是对于现在越来越重要的用户体验，大家已经越来越不满足简简单单的静态页面了，而是需要各种交互（UI还得设计的好，要不用户打开觉得丑早就给你关了）

进阶的css《精通css》

看完这本书你应该对：盒子模型，流动，Block，inline，层叠，样式优先级，等概念非常了解了。

在进阶，关于js框架，昨天写的文章就是关于框架的，有兴趣的同学可以抓紧时间看一看

框架语言大多是jQuery（框架的重要性屏蔽浏览器的差异性）

我不会的东西很多

算下来做到现在有些年份了，每天也是朝九晚五做前端，基本没间歇过，但是我不会的东西很多，bootstrap，angular.js ，node.js等还有很多层出不穷的框架，很多都听过和少量接触过。我也很费解，这些年我都做了些什么..

pc项目html5+css3开发

移动web的html5+css3开发

响应式的html5＋css3开发

又碰到那些问题？

pc问题

命名怎么命？是拼音还是英文单词？ 缩写好，还全写好？图片命名怎么命规范？ 怎么写结构算合理？ 长命名是驼峰 qietuInc, 还是 qietu_inc，还是 qietu-inc ? 什么是模块话？ 先写结构还是先切图？ 选项卡怎么写？下拉菜单如何美化最好？ js写好还是jquery写好？ jq幻灯片手写怎么写？ jq图片滚动的原理？ 兼容性怎么解决？ 兼容性和性能如何折中？。。

移动web问题

移动web兼容性怎么处理？ 怎么适应多种屏幕？ 移动web是定款还是 100% 还是rem方式？

。。。。

就是这些了，好像很简单，其实你要过细研究，想做到胸有成竹，要很多年。

项目数量到是不少，团队一起累计开发的超过2000个 ，因为开的是前端技术外包公司，所以做的东西是直面中小企的直接需求的，毕竟这还是主要需求啊。。

很多经验是沉淀而来的，不是拔高而来的，这是我个人认为，沉淀比拔高要重要。可能在这个浮躁的时代，很多人不会认可我的看法。

练就的“一身本领”

看到问题基本快速找到核心所在，并且从根本上解决问题

pc兼容性，移动web兼容性很头疼的，每个小问题都要反复测试研究，还好对于这方面有大量的心得

对于复杂的项目，布局的时候能够思路清晰，游刃有余

这些是积攒下来的，是沉淀出来的，不是拔高出来的。

文章到这里就结束了，还是要推荐一下我自己Web前端学习交流群：527535103，欢迎各位进群学习交流。