18年沉淀高端建站经验
为企业持续赋能品牌新价值
页面看着歪,往往说不出歪在哪。构图平衡就是解决这件事的:让视觉重量分布均匀,眼睛才不会一直往一边偏。
十种排法里,常用的有五种。剩下五种在特定场景才用得上。
对称构图左右等重,适合**感强的页面,比如政府与机构站的首屏。整站都用对称,会显得呆板。
一侧放图,另一侧用文字和留白平衡。图大则字重,图小则留白多,重量靠面积和颜色深浅来调。
把画面按 1 比 1.618 切分,重点内容放在分割线附近。信息图和长页面的首屏用它最稳。
视觉重心靠大小和对比抢出来。一屏只留 1 个焦点,多了等于没有。
前后关系靠阴影和明度区分。卡片浮起 8 到 12 像素的阴影,层次就出来了。
留白占四成以上,页面才有呼吸感。挤满的版式,再好的构图也看不出来。
构图定完还要在手机上验一遍。竖屏比例完全不同,桌面上平衡的版面,手机上常常一头重。缩到 375 像素宽再看一眼,重心偏没偏很容易看出来。
构图定完还要在手机上验一遍。竖屏比例完全不同,桌面上平衡的版面,手机上常常一头重。缩到 375 像素宽再看一眼,重心偏没偏很容易看出来。
| 排法 | 适用场景 | 注意 |
|---|---|---|
| 色彩平衡 | 大面积纯色块 | 冷暖各一半 |
| 线条平衡 | 引导视线 | 避免斜线交叉 |
| 形状平衡 | 卡片排布 | 圆角统一 |
| 质感平衡 | 产品特写 | 光向一致 |
| 图文平衡 | 正文页 | 图不超过三成宽 |
版式上的平衡感,最后要靠间距统一。同一页里的间距只用三档数值,视觉自然整齐。
图文怎么混排不显乱,另一篇查看详情给了规矩。