第三代主题：Chameleon Theme
好长时间没有写文章了。自从五月份以来，实习、论文和面试成为了生活的主旋律。比较压抑，也比较浮躁，压根就无法静下心来 挥洒笔墨 练打字了，不过这并不意味着这个博客就被我遗忘了。其实，在这段时间里，我默默地重构了整个博客项目的代码，同时，再一次改变了 世界 博客的样式。从第一版到如今的第三版，整个博客见证了我对前端的理解和我对设计理解的变迁。
这个新的主题被我称为“Chameleon Theme”，意为“变色龙主题”。科技以换壳为本，主题以换色为本。使用者可以根据自己的爱好，设定自己喜欢的主题色，这样就不会千篇一律了，至少在颜色上。
新的主题同样遵循响应式的设计，PC、平板和手机都有着不同的页面布局，同样大量的使用 HTML5 和 CSS3 的新特性，所以目前还是只兼容现代浏览器。
主题色
主题色是“变色龙主题”最大特点，在项目源文件 _sass/_setting.colors.scss 中有三个变量，分别为 $main-color-1、$main-color-2和 $main-color-3， 通过设定这 3 个变量，用户就可以自定义网站的颜色了。
$main-color-1 代表强调色，建议较鲜艳的颜色。
$main-color-2 代表主色，是页面的主要颜色。
$main-color-3 代表配色，是搭配主色的辅助色，避免网页的色彩过于单调。
导航栏
导航栏这块一直是我最纠结的部分。
- 导航栏真的需要始终显示在顶部吗？
- 汉堡包按钮真的好吗？
对于第一个问题，我认为这跟导航栏的使用频率和重要程度有关。如果用户需要经常去使用导航栏，那么将导航栏始终显示在屏幕顶部是有价值的。
例如大部分的新闻网站和门户网站通常都会把分类放在始终显示的导航栏上，以提醒用户和方便分类的切换。但是，对于一个用来展示文章的博客，导航栏的意义并不是特别的大。我想要的是用户能完完整整的看完一篇文章，而不是只看一半就切换到另一个页面去了。所以，在新的主题中导航栏只是普通的布局，不会始终占据屏幕的顶部空间。
对于第二个问题，个人认为汉堡包按钮并不是一个很友好的设计，应该尽量避免使用。汉堡包按钮默认隐藏了导航的条目，只有在用户手动点击按钮之后才可以看到具体的导航条目（见下图），这是一种非常不直观的交互方式，违背了“所见即所得”的设计原则，而且位于屏幕右（左）上角的位置也非常不方便点击。
所以，新的主题摒弃了之前的汉堡包导航栏设计，移除了汉堡包按钮，将导航栏另起一行放到了标题的下面（见上图最右）。这样更加直观，同样也能鼓励用户去浏览网站的其他页面。
内容的展示
博客最重要的功能是 炫技 展示文章的内容。所以，博客页面应该尽量的简洁，让用户能够把注意力放在文章内容上。
比如代码框，上一版本的代码框标题栏是蓝色的（见下图一），新的代码框标题栏是灰色的（见下图二）。这样可以避免鲜艳的色彩分散用户的注意力。毕竟代码的内容才是最重要的，至于何种语言的代码，这只是一个附加的说明。
同时，新的代码框还使用了间隔条纹的设计，能让用户更方便的去定位一行的内容，方便代码的阅读。
标签页
新的标签页（All Posts）在原有的基础上进行了改进，标签按钮使用颜色的深浅来表示该标签下博文数量的多少，同时新的标签按钮使用胶囊型的设计，显得更加精细和美观（见下图右）。
后记
新博客的介绍就到这了，作为一个计算机专业的 前端工程师 程序员 码农，有时从用户的角度来思考自己码出来的产品不失是一件颇为有趣的事。
又及，
不懂产品的设计师不是好前端。