天谕官网3.0版本设计历程

天谕官网3.0改版从2014年7月初开始设计规划，并在7月底完成所有前端工作上线。

在项目的最开始还是打算做成传统的固定宽度布局形式，后面考虑到用户访问环境的复杂性，就打算把它做成响应式布局——即整个页面在不同的访问环境、不同的浏览宽度下都能有最完美的视觉体验。最后我们将每个版块的尺寸固定下来，形成一种大拼图的布局，在不同的浏览器宽度下通过缩减每行的版块数量来实现宽度的变化。为了保证不管是在几列的情况下整个版面的底端均能保持整齐划一，所有版块的数量应当为一个常见的拥有众多的约数的数字——12.

我把其中的2个小banner版块，每个一分为二，并增加一个替补小banner，只在5列布局时出现，这样五列的布局就分解如下：

确定了版块个数和尺寸之后就可以着手风格设计，以下为第一版的配色尝试：

这一版中青蓝色的占比较大，这样内容板块与暗青色的背景便不好区分，且与我们的整体品牌调性不搭，于是在下一版中内容区色调调整为金色，并对版式做了细化：

依次将5、4、2、1列布局设计完成：

切换效果如下：

在不同媒介下的浏览效果

这一版官网依然有很多不足，虽然整个版面满足了响应式的要求，但整体的版块数量无法随意增减。在页头部分的背景处理上牺牲掉了很多画面层次，而且在版面细节上还不够精致。这都是做的不成熟的地方。

今天将整个设计过程发表出来，也是为自己做一个总结。