每个设计师都应该懂的常见12种网页布局设计

2021-03-18
3730
0

网页设计中出色的Web布局设计能够增强内容的可读性,易于使用并为用户提供积极的体验。为什么了解网页布局很重要?网页布局在很大程度上决定了网站的访问者将如何与网页内容进行交互。这里将介绍一些常见的网页布局形式,例如卡片式、分屏布局、网格布局……

 

一、卡片式网页布局

卡片式布局被Pinterest、脸书和推特等网站所使用,它非常适合在新闻网站和博客上使用,因为卡片式布局可以在页面上放置大量内容,同时又保持每部分内容各不相同。

卡片式布局主要有两种形式:

1、网页中每个卡片的尺寸相同,卡片的排列非常标准,例如dribbble、UI中国的网页布局;

图片

 

2、使用不同尺寸的卡片组成页面的布局,卡片间没有固定的排序,例如Pinterest、花瓣的页面布局。

图片

 

二、分屏布局

当两个元素在页面上具有相等的权重时,分屏布局是一种流行的设计选择,并且通常用于文本和图像都需要突出显示的设计中。

分屏设计特别适合电子商务网站上的产品页面。产品图片需要在页面上突出显示,但价格、规格、购物车按钮等信息也要显示。

图片

 

三、大标题

随着移动设计的盛行,大标题排版变得流行起来。大号字体在标题中特别流行,在一些网站的正文中也能看到。
图片

较大的文本更具可读性,可以改善使用体验。另外它还提供了强大的视觉效果,因此这种布局在极简主义设计中特别受欢迎。

图片

 

四、个性化推荐

个性化算法推荐可以根据每个人的喜好量身定制数字体验。人工智能技术的发展让算法变得更易用,能精确分析用户的喜好。

根据用户之前的订阅习惯,Netflix可以为用户个性化推荐他们最有可能观看的电影。

图片

像Medium这样的网站会基于用户以前阅读和喜欢的内容,向他们展示很多同类型的文章。

图片

 

五、网格布局

网格为设计提了视觉上的平秩序感,以一种平衡且有组织的方式呈现内容,使内容更易于人们使用。

图片

在网格设计中使用不同大小的内容可以在保持内容有序的同时增加视觉吸引力。

图片

 

六、杂志版式布局

杂志和期刊的布局方式影响了网络杂志的版面设计。这些网页布局很适合有大量内容的网站,尤其是每天都需要更新内容的网站。

图片

 

七、单页布局

单页布局将网站的所有主要内容放在一个网页上,通过滚动完成导航,有时还使用视差滚动效果。

图片

对于内容稀疏的网站,单页布局是一个很好的解决方案。同时它也是内容叙事的完美选择,比如交互式儿童读物。

图片

 

八、F型&Z型布局

F型和Z型布局是指用户的视线如何在页面上移动,即用户如何扫描内容。F型布局有非常明确的视觉层次结构,因此适合内容更多的页面。

图片

Z型布局将视线吸引到顶部,然后沿对角线方向向下延伸到底部,然后再次延伸。

图片

 

九、不对称布局

在设计中,不对称会产生动态化的视觉冲击力。大多数情况下不对称是由于图像和文本间无法平衡而造成的。

图片

由于不对称会产生动态的、充满活力的视觉印象,因此对那些想要传达这种形象的品牌来说是非常有用的。

图片

 

十、简洁布局

这种布局的优点在于完全专注于内容,没有视觉上的混乱。

干净简单的布局几乎适用于任何类型的网站。许多优雅的网站都可以被认为是“简洁的”,无论它们包含什么设计形式。

图片

 

十一、导航标签

导航标签适合用于包含少数项目的菜单,否则导航会显得很混乱。

图片

 

十二、轮播

轮播内容包含图像和文本,通常出现在网站的顶部,用来突出显示内容。

图片

 

总结

良好的网页设计具有较强的适应性,对用户总是友好的。遵循网络布局的最佳实践,可以带来新的数字化体验,灵活调整变化的技术和设计趋势,进一步实现品牌目标。
转载声明:本文来源于网络,不作任何商业用途
免责声明:本文内部分内容来自网络,所涉绘画作品及文字版权与著作权归原作者,若有侵权或异议请联系我们处理。
收藏

全部评论

您还没登录

暂无留言,赶紧抢占沙发
王氏教育是国内专业的CG数字艺术设计线上线下学习平台,在王氏教育,有原画、插画、漫画、影视、3D模型等培训课程,也有学习资源下载、行业社区交流。CG数字艺术学习,来王氏教育。
绘学霸iOS端二维码

IOS下载

绘学霸安卓端二维码

安卓下载

绘学霸微信小程序二维码

小程序

版权声明
本网站所有产品设计、功能及展示形式,均已受版权或产权保护,任何公司及个人不得以任何方式复制部分或全部,违者将依法追究责任,特此声明。
热线电话
18026259035
咨询时间:9:00~21:00
在线客服
联系网站客服
客服微信:18026259035
公司地址
中国·广州
广州市海珠区晓港中马路130号之19
绘学霸客户端(权限暂无,用于CG资源与教程交流分享)
王氏教育 王氏教育