您现在的位置是:

网页游戏平台

2021-04-13 07:00 21

用一篇文章向你展示12种常见的网页布局设计

为什么理解网页布局很重要?网页的布局在很大程度上决定了网站访问者与网页内容的交互方式。

这里会介绍一些常见的网页布局形式,比如卡片布局、分屏布局、网格布局……我们来看看!

卡页面布局

卡布局被Pinterest、脸书、Twitter等网站使用。非常适合新闻网站和博客,因为 Card Layout可以在页面上放很多内容,同时保持各个部分的不同。

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

  • 网页中每张卡片的大小都是一样的,卡片的排列很规范,比如dribbble和UI中国的网页布局;
  • 使用不同大小的卡片形成页面布局,卡片之间没有固定的排序,比如Pinterest和花瓣页面布局。

分屏布局

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

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

头条

随着手机设计的流行,头条排版也开始流行。大字体在标题中特别受欢迎,在一些网站的正文中也可以看到。

较大的文本可读性更强,可以改善用户体验。此外,它还提供了强大的视觉效果,所以这种布局在极简设计中尤其受欢迎。

个性化推荐

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

media这样的网站,会根据用户之前阅读过和喜欢过的内容,给用户展示很多同类型的文章。

网格布局

网格为设计提供了直观的顺序感,以平衡和有组织的方式呈现内容,使人们更容易使用

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

杂志版面

杂志和期刊的版面影响网络杂志的版面设计。这些页面布局适合内容较多的网站,尤其是需要每天更新内容的网站。

一页式布局

一页式布局将网站的主要内容全部放在一页上,通过滚动导航,有时使用视差滚动效果。

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

F型&Z型布局

F-和Z-Layout指的是用户的视线在页面上如何移动,也就是用户如何扫描内容。f型布局视觉层次非常清晰,适合内容较多的页面。

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

不对称布局

在设计中,不对称会产生动态视觉冲击。在大多数情况下,不对称是由图像和文本之间的不平衡引起的。

不对称可以产生动态、动态的视觉印象,所以对于那些想要传达这种形象的品牌来说非常有用。

简单布局

这种布局的优点是完全专注于内容,没有视觉上的混乱。简洁的布局几乎适合任何类型的网站。很多优雅的网站,不管包含什么设计形式,都可以认为是“简洁”的。

导航选项卡

导航选项卡适用于包含几个项目的菜单,否则会混淆导航。

carousel内容包含图像和文本,它们通常出现在网站的顶部以突出显示内容。

好的网页设计适应性强,对用户总是友好的。遵循网页布局的最佳实践可以带来新的数字体验,灵活调整不断变化的技术和设计趋势,进一步实现品牌目标。

原文:toptal.com/designers/ui/web-layout-best-practices

作者:卡梅隆查普曼

译者:克利普

中国地质大学(北京)