header_v0.7.32

七大常用的网页版式

1年前发布

原创文章 / 网页 / 观点
szmtsun 原创,如需商业用途或转载请与szmtsun联系,谢谢配合。

收集了一些好看的版式,总结出 <7大版式> ,其实大部分版式都可以从这7种风格中灵活变化而成。看再多好的案例,会感觉大同小异。

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

 

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

 

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


 

 


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



 

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


 

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


 



 

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






 

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



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



 

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

 

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

 

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



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

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

    提示文案

    提示文案

    提示失败
    提示成功