高保真原型图设计-页面出现多个同级业务板块排版技巧

我们在众多上市集团公司的官网首页或者业务领域页面中常常看到有一个现象，就是这个企业的业务版图会涉及到多个领域。对于这个板块的展示方式会有很多中形式和创意布局。九宫格的方式最为常见。今天我们sumaart推荐一种带有少许文字推介以及允许出现相关数据、个别经典案例的创新版式设计案例。

请看案例

高保真原型图案例解析

除了公共部分的页头header, 页尾footer之外，我们主要讲解一下主体内容区域是如何展示一个企业的多个业务板块的。

除了正文的title， 描述之外，下面主要分类image design, website design和vi design三个板块。当然如果还有更多的话，就继续往下排版即可。

上一期我们说过，原型图的最重要技巧就是把内容分布好，而且注意对齐关系。当我们给页面的内容找到对齐关系后，设计感是自然而然出来的。

其次是注意标题，描述，正文之间的大小对比关系，颜色深浅对比关系。有对比，就会有吸引人的地方。

最后就是注意图片之间的衔接，这个原型图里的灰色块的深浅，表示后期视觉稿的时候，也最好是遵循这个深浅的比例关系。

除了本期推荐的这种一行四列栅格系统排版方式之外，其实还可以有很多富有创意的版式。比如：

不管怎么布局，其实都是九宫格的各种变化关系，大小关系，深浅关系等等。只要给内容和图片找到了大小对比，对齐的关系，又能给界面腾出足够的视觉空间，这个作品的设计感一定是很不错的。

感谢大家关注素马原创设计第二期的高保真原型图设计案例讲解。下期再见。