header_v0.7.32

天谕官网3.0版本设计历程

1年前发布

原创文章 / 多领域 / 观点
东边有棵树 原创,如需商业用途或转载请与东边有棵树联系,谢谢配合。

天谕官网3.0改版设计历程分享

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

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

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

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

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

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



切换效果如下:

在不同媒介下的浏览效果

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

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

95
    意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功