12种常见的网页布局设计详解(多图)

为什么了解网页布局很重要?网页布局在很大程度上决定了网站的访问者将如何与网页内容进行交互。

这里将介绍12种常见的网页布局形式,例如卡片式、分屏布局、网格布局……一起来看看吧!

1、卡片式网页布局

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

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

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

用一篇文章,带你了解12种常见的网页布局设计

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

用一篇文章,带你了解12种常见的网页布局设计

2、分屏布局

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

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

用一篇文章,带你了解12种常见的网页布局设计

3、大标题

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

用一篇文章,带你了解12种常见的网页布局设计

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

用一篇文章,带你了解12种常见的网页布局设计

4、个性化推荐

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

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

用一篇文章,带你了解12种常见的网页布局设计

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

用一篇文章,带你了解12种常见的网页布局设计

5、网格布局

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

用一篇文章,带你了解12种常见的网页布局设计

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

用一篇文章,带你了解12种常见的网页布局设计

6、杂志版式布局

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

用一篇文章,带你了解12种常见的网页布局设计

7、单页布局

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

用一篇文章,带你了解12种常见的网页布局设计

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

用一篇文章,带你了解12种常见的网页布局设计

8、F型&Z型布局

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

用一篇文章,带你了解12种常见的网页布局设计

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

用一篇文章,带你了解12种常见的网页布局设计

9、不对称布局

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

用一篇文章,带你了解12种常见的网页布局设计

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

用一篇文章,带你了解12种常见的网页布局设计

10、简洁布局

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

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

用一篇文章,带你了解12种常见的网页布局设计

11、导航标签

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

用一篇文章,带你了解12种常见的网页布局设计

12、轮播

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

用一篇文章,带你了解12种常见的网页布局设计

总结

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

遵循网页布局的最佳实践,能够带来全新的数字体验,灵活地调整不断变化的技术和设计趋势,进一步实现品牌目标。

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/231499.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
重蔚的头像重蔚管理团队
上一篇 2023年3月1日 11:54
下一篇 2023年3月1日 11:55

相关推荐

  • 如何赋予产品设计更多「惊喜感」?

    在日常的设计工作中,设计师很多时都陷入一种「千篇一律的平淡式」苦恼中,觉得类似的产品基本都是差不多的信息架构、布局风格、界面元素等等,毫无新意。如何赋予产品设计更多「惊喜感」?相比盲目追求「为了不一样…

    2022年6月25日
    0152
  • 快速提升 UI 设计效果的9 个小技巧 (UI 设计集-1)。

    编者按:在进行 UI 设计的时候,很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。这篇来自Mark Andrew 的文章梳理了 9 个实用性很强的 UI 效果提升小技巧,这篇文章最早发布于marcandrew.me,快来看看…

    2023年3月1日 SEO操作
    02
  • 极简主义≠简约主义 极简主义网站有哪些特点

    极简主义网站有哪些特点?很多人认为极简主义就是简约主义,其实不然,而是第二次世界大战之後60年代所兴起的一个艺术流派。极简主义网站不仅仅看起来清新简单,而且也从网站性能上得到改善,减少网站的加载时间,提…

    2022年6月25日 建站资讯
    0130
  • 为何需要进度条?

      有趣的问法。对於页面设计来说,进度条只不过是比较通俗,易於理解的叫法。它的使用是为了呈现使用者与页面相关的操作内容,所以也不会局限於“条形”。它广泛地运用在各种设计当中,不仅仅是页面设计。 从进…

    2022年6月25日
    0185
  • 【网页设计流行趋势分享】本年度最值得品牌关注的版式设计有哪些

    在信息过载的时代,对品牌而言,想要在互联网上成功给消费者留下深刻的印象,离不开好的版式设计。那麽,什麽好的版式设计呢?简单来说,就是在有限的页面设计中,以最直接且有效的方式向消费者传递出品牌网页设计的…

    2022年6月20日 建站资讯
    0130
  • 界面动效设计的状态:独立、进入与退出

    1、 独立运动 也就是动效作为一个独立的元素,进入和退出界面时,都不会对界面上其他元素有影响,尤其是位置方面的影响。 2、 进入界面 一般来说,动效元素进入界面是以减速的曲线形式进入。又或者是以做大的速度进…

    2022年6月16日
    0142
  • 按钮如何设计?从6个层面详细分析按钮设计的知识点。

    虽然直觉认为按钮是一种很简单的控件,但在梳理按钮相关知识点的过程中,发现小小控件其中包含了很多容易被忽略的细节。按钮几乎是每一个页面不可或缺的元素,对于按钮的认识基本停留在视觉层面,一个圆角矩形搭配…

    2023年3月1日 SEO操作
    04
  • 详解组件设计的 3 大类型+5 种属性。

    今天为大家分享的是「组件设计」。现在有很多成熟的组件库,能为设计的规范性带来更大的便利。但作为设计师,不仅仅需要了解每个组件的样子、用在哪些地方,更需要清楚地知道组件的本质,即组件的形状、行为、状态…

    2023年3月1日 SEO操作
    02

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息