网页设计中常用到的几种经典布局

  • 简单的网格搭配视觉突出的Banner

无论屏幕的大小,这种展现形式可以通过用户的滚动来展现网站的内容。虽然这种方式的最终效果可能会因为设备的不同、是否喜欢全宽背景或者图片风格决定,但是在设计之初所绘制的草图都是大致相同的。

-导航

-文字叠加的首页banner

-2至4列不带图标的信息元素

-主体区域

-页脚

这种布局方式可以设计的很干净,而且可以通过图片的质量建立一个强大的视觉吸引,并且对响应式框架的良好兼容。页头 Banner 除了可以放置出彩的图片以外,也可以搭配视频。

网页设计中常用到的几种经典布局
  • 单页设计,单栏布局

单页式设计这几年非常火,它非常适宜于展现极简的内容,或者专注呈现一个主题。当网站的主题集中,内容也比较固定的时候,无需复杂的布局来呈现,单页单列式的布局足以应付一切。

-导航

-以图片文字为主的主体区域

-页脚

采用这种布局模式的时候,空间的控制至关重要,相当考验设计师设计留白和布局平衡的功力。元素和元素之间的疏密关系是需要设计师反复推敲的,如果空间控制不合理会给用户一种混乱的感觉,如果过于紧密则会产生局促感。

网页设计中常用到的几种经典布局
  • 经典F式布局

研究表明,用户在浏览网页的时候,习惯于沿着 F 式的阅读轨迹来浏览信息,也就是说,用户喜欢从左到右阅读,然后向下移动,再继续从左到右阅读。

-页头和导航

-靠左的一栏相对较宽,展示主要的内容

-靠右常为侧边栏,展示相关链接等内容

-页脚

这种 F 式的阅读模式对应的网页布局就是 F 式布局,最关键的信息靠左显示。

网页设计中常用到的几种经典布局
  • 自定义栅格

那些被整齐分割出来的网页布局从来都没有过时过。无论是分割得细碎的网页区域还是大块的页面区块,大多都需要借助一套干净整齐的栅格来支撑。在此基础上,内容按部就班地被置于不同的区块中,被精心地组织展示出来。

-导航

-栅格

-页脚

在设计师的作品集页面中,你可以发现各种各样自定义的栅格布局。自定义栅格展示内容的优势在于,它可以同时呈现大量的视觉化的内容。

网页设计中常用到的几种经典布局
  • 极简分层

极简化的设计一直都在流行,它的流行不是没有原因的。开放式的空间让用户感觉更加轻松,也使得其中展现的内容更容易被聚焦。如果极简化的页面中加入不多的几个并列的内容层,可以让信息更有层次,也使得极简的页面拥有了细节。

-导航

-简单但视觉力强的轮播图

-主体区域

-页脚

这种设计并不复杂,但是让页面更加有趣了,它可以适配更多不同类型的项目。

网页设计中常用到的几种经典布局
  • 瀑布流布局

近几年比较流行的布局形式,参差不齐的多栏布局,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是 Pinterest,最适合大量的图片或者轻量级信息展现。

-轻量级页头

-多栏的瀑布流内容展示

-滚动后加载或者手动选择继续加载

-轻量级页脚或者无页脚

瀑布流就像我们现实中的平铺的货架展示一样,能够方便我们快速的浏览精美的图片,有效的降低了界面复杂度,对于触屏设备来讲,交互方式更加直观。

网页设计中常用到的几种经典布局
  • 传统博客类垂直直线性布局

F 型布局的一个特殊分类,文章博客类网站最常用的布局形式,左右两栏布局,左边为文章区域,右侧为侧边栏,放置一些辅助功能元素,由上向下的线性浏览模式方便我们不会错过任何一篇文章,由于更新的内容不会很多,所以更加适合文章或者精品内容展现。

-页头导航

-精品内容推荐的轮播图(可选)

-主内容区域

-侧边栏

-页脚

垂直线性布局也经常适用于订阅文章的网页设计。

网页设计中常用到的几种经典布局
  • 单页分块布局

顾名思义,就是将单页的所有内容拆分成块,随着滚动,显示单一块儿的内容。搭配视差滚动效果,视觉表现会更加出色。由于是先将内容按照屏幕尺寸进行了分块展现,这样在浏览的时候可以最大限度的减少视觉干扰,专注于

-块内容的浏览。

-导航

-主内容区域(分块展现)

-页脚

单页分块儿布局更加适合产品类网页类展示。

网页设计中常用到的几种经典布局
  • 其他布局

除了以上的 8 种布局形式,你还可以结合自己网站的功能和特点进行相互的组合,结合每种布局的特点进行合理的结合,这样才能设计出更加易用美观的网站。

网页设计中常用到的几种经典布局
分享到: 新浪微博 微信 QQ好友 QQ空间 豆瓣

相关新闻

联系我们

155-0755-1234

在线咨询:点击这里给我发消息

邮件:b@xshd.net

工作时间:周一至周五,9:30-18:30,节假日休息