七大常用的网页版式

【前言感悟】看再多的优秀网页案例，如果没分析总结，很难借鉴运用，因为你可能只是模范，过于注重样式，做出来的页面可能就失去灵气，没办法根据需求灵活运用各种样式。另外，别人的分析文章很多，百度一抓一大把，资讯泛滥的年代，看再多也难以全部吸收，只有你自己去分析总结，才能真正变成自己的知识，才会印象深刻而灵活运用到项目中。

 

以下截图均来自Pinterest，谢感谢设计师们的分享。

 

【框出重点文案和图片焦点】让视觉更集中，‘几何线条’本来就是版面构成的好素材。

 

 

【大物件摆放于主文案两边】特别是使用官网商品图，选用能细节突出，足够吸引眼球的商品照（比如可口的蛋糕，酷炫的跑鞋等），文案居中摆放，这种方式会让版面很有气氛，也突出商品，一举两得。

 

【挑选一个合适的商品，抠图当背景】让模块变得不单调，也避免内容拥挤，看起来很舒服。这里可以灵活运用，比如大图用做商品展示，多个小图当成商品细节图灵活排版。（注意：当背景的商品不能太抢眼，避免把焦点从主内容移开，应该只起到美化版面的作用，低调处理。）

 

【规则排列产生美】有时规则的样式摆放在一起，规规矩矩四周对齐，的确能够产生干净稳重的感觉，给人信任感，简单的美。

 

 

【不规则的灵动美】如果一个版面都是规则样式，会很死板，难以给人留下印象，SO，大胆留白和发挥你的灵感随心排版吧！让页面看起来有灵气。

 

【大文案跳出】把文案突出摆放在留白的空间上，也是一种方式，可以组合尝试。

最后：【商品图居中，大文案居中摆放于商品后，产生杂志风格】焦点明确，也是突出商品的好手法。

 

★★★ <如何更有效地收藏案例？>看到好看的页面时，不建议收藏整个页面，因为整个页面只能给你整体印象，却较难变成知识工具，因为大部分时间，我们只是因为页面某个按钮、某个样式、某个点所吸引，觉得很棒，那么建议只截图保存你那一刻被吸引的小范围视觉，下次找灵感时，更直接快速地运用！

 

【后话】现在大家都要追求高端大气，结果随手抓来全部都是高级灰高级黑的页面，当然灰白黑是最容易做出高大上，看多了却难免视觉疲劳，再高大上也失去活力。（又得吐槽一下，是不是你老板又喊着不够大气，再改改，你让他举个案例吧，又举不出来…然后做了黑白灰大气版，又被嚷着要改成像淘宝天猫那些红红火火简单粗暴吸引销售的？不可以用灰黑色，会影响销售……设计的孩子都需要强大的内心…）

 

最后最后最后，高级灰看腻了，贴一个多彩炫丽的活力下吧！

看完觉得有用就点个赞吧~