12月2,2020发表于:视觉设计.Sponsor前言

　　12月2,2020发表于:视觉设计.Sponsor前言

　　12种常见的网页布局设计，你知道几个？ 2020 年 12 月 2 日发布：视觉设计。

　　赞助商

　　

　　前言：网页的布局很大程度上决定了网站的访问者与网页内容的互动方式。不同的网页布局带来不同的交互体验。因此，设计师往往需要根据不同的产品特性选择不同的网页布局，以获得良好的用户体验。常见的网页布局有哪些？一起通过今天的文章内容了解一下吧！

　　

　　一、card 页面布局

　　卡片布局被网站使用，例如Pinterest、Facebook和Twitter。非常适合news网站和博客，因为卡片式布局可以在页面上放很多内容，同时保持每个部分的内容各不相同。

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

　　网页中每张卡片的大小都是一样的，卡片的排列非常规范，比如dribbble，UI中国的网页布局；

　　

　　使用不同大小的卡片组成页面布局，卡片之间没有固定的顺序，比如Pinterest的页面布局和花瓣。

　　

　　二、分屏布局

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

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

　　

　　三、大标题

　　随着移动端设计的盛行，标题布局变得流行起来。大字体在标题中特别受欢迎，也可以在一些网站 文本中看到。

　　

　　较大的文本更具可读性，并且可以改善体验。此外，它还提供了强大的视觉效果，因此这种布局在极简设计中尤为流行。

　　四、个性化推荐

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

　　根据用户以往的订阅习惯，Netflix 可以亲自推荐他们最有可能观看的电影。

　　

　　网站like Medium 会根据用户阅读和喜欢的内容向用户展示许多相同类型的文章。

　　

　　五、网格布局

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

　　

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

　　

　　六、杂志版式布局

　　杂志和期刊的版式会影响在线杂志的版式。这些网页布局非常适合内容较多的网站，尤其是需要每天更新内容的网站。

　　

　　七、单页布局

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

　　

　　对于内容稀疏的网站，单页布局是一个不错的解决方案。同时，它也是内容叙述的完美选择，例如互动儿童读物。

　　

　　八、F-type & Z-type 布局

　　F 形和 Z 形布局是指用户的视线在页面上的移动方式，即用户浏览内容的方式。 F型布局具有非常清晰的视觉层次，适合内容较多的页面。

　　

　　Z 形布局将视线绘制到顶部，然后对角向下延伸到底部，然后再次延伸。

　　

　　九、非对称布局

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

　　

　　因为不对称创造了一种充满活力和活力的视觉印象，对于想要传达这种形象的品牌来说非常有用。

　　

　　十、简单布局

　　这种布局的优势在于它完全专注于内容，没有视觉混乱。

　　干净简洁的布局几乎适用于任何类型的网站。很多优雅的网站，无论收录什么设计形式都可以说是“简洁”的。

　　

　　十一、导航标签

　　导航标签适合收录几个项目的菜单，否则导航会显得混乱。

　　

　　十二、轮播

　　轮播内容收录图片和文字，通常出现在网站的顶部以突出显示内容。

　　

　　总结

　　好的网页设计具有很强的适应性，并且对用户始终友好。

　　遵循网页布局的最佳实践可以带来全新的数字体验，灵活调整瞬息万变的技术和设计趋势，进一步实现品牌目标。

　　文章 共享是常见的布局。如果你有其他好的版式分享，也可以留言分享。

　　作者 | Clippp源码|剪辑设计文件夹（id：ClipppDesign）

　　推荐：查看最流行的301设计网站→

　　Communication：一个面向新设计师的设计交流群。欢迎加入UI设计交流群，分享经验，接单，求职，聊聊设计。