你想问网站布局是什么?

无需加好友免费技术支持

现在，越来越多的人想要建立自己的网站，通过自助建站系统就可以自己进行网页制作了。这无疑是一件好事，但是，很多设计师，尤其是新手设计师或者压根儿就不是设计师的小白，都在网页设计上走过不少弯路。

网页制作最重要的是网页布局，先布局，再细节。只有选择合适的网站布局，下一步的工作才能顺利进行。你想问网站布局是什么？Mockplus为您选择9个不同的经典网站布局设计案例，希望能给您灵感。

1.Diker Bau网站

网站布局思路：选图展示品牌标识

如果你想设计一个可以快速销售产品的网站，那么就可以使用这种布局。精选图可以与访客建立情感联系，一张大而得体的照片或插图会产生强烈的共鸣并创造出令人难忘的第一印象。当你只需展示一种产品或服务，并将用户的全部注意力集中在其上时，此布局非常有用。

访问网站：

2. Chekhov

网站布局思路：分屏布局

该网站采用分屏布局，可以同时显示两个同样重要的内容信息。此外，设计师将两种信息相互对立，创造完美的对比，以吸引更多访问者的注意。分屏布局，加上相应的动画，创造了更精致的体验。

如果您的网站需要提供两个完全不同的用户旅程变体，请使用分割屏幕的布局。但避免在分割部分添加太多的内容。如果内容太长，屏幕设计不能很好地扩展，这将影响体验。因此，如果您需要在分割部分提供大量的文本或视觉信息，则不适合此布局。

访问网站：

3. Timothee Roussilhe

网站布局思路：视差滚动布局

该网站是设计师Timothee Roussilhe一个简单而有创意的简历网站。他增加了视差效果，为游客提供了更愉快和令人印象深刻的体验。当你向下滚动时，许多盒子会移动和移动。令人惊讶的是，所有的盒子都增加了视差效果，你认为你在看电影。

如果你想设计一个看起来很酷、有创意和令人印象深刻的网站，添加一个视差效果。但不要把它弄得一团糟，保持简单的布局，使用更干净的配色方案。

访问网站：

4. Happiness Abscissa

网站布局思路：侧栏导航

该网站使用固定的侧栏导航来显示整个布局。导航无疑是任何网站的关键部分，主菜单是大多数用户在导航时首先要找到的。除顶部水平导航外，还可以将菜单选项放在固定的侧栏中进行布局。侧栏应选择页面左侧或右侧的垂直列。对于这种布局，侧栏保持静止并始终可见，而其他页面则随用户向下滚动页面而变化。确保这种导航是可访问的。

该布局适用于导航选项数量相对有限的网站。当用户进入页面时，所有选项最好在视线范围内。侧栏还可以包含菜单以外的内容，如社交媒体链接、联系信息或任何你想让访问者轻松找到的内容。

访问网站：

5. Assemble

网站布局思路：网格卡布局

Assemble在丰富的主页上使用网格结构来显示丰富多彩的列。卡片可以很容易地消化地显示大量的点击信息。它可以帮助访问者找到他们喜欢的内容，并通过点击或点击卡片来深入了解详细信息。

这种布局是无限可操作的。网格的大小、间距和列数可以不同，卡片的样式可以根据屏幕的大小而变化（卡片可以重新排列以适合任何屏幕）。因此，网格卡广泛应用于响应设计中。

这种布局非常适合建设内容较多、结构相同的网站。

访问网站：

6. Medium

网站布局思路：栅栏布局

Medium它是一个非常受欢迎的博客网站，它以一种容易理解的方式向读者提供大量的阅读信息。与纸质杂志类似，该网站使用多列网格，可以创建复杂的层次结构，集成文本和插图。主要目标是让访问者快速浏览、阅读和理解页面。但值得一提的是，Medium文章内面又是采用了单栏布局，这是为了方便读者可以没有障碍地滚动鼠标进行阅读。

栅栏布局是页面上内容大、层次结构复杂的网站的好选择。如果网格没有得到有效的使用，主页上的所有内容可能会显得更加混乱和有组织。

访问网站：

7. Beverages

网站布局思路：盒子布局

Beverages它是一个100%响应的网站模板，其餐厅主题适用于任何食品和饮料网站的设计。所谓的盒子布局是一个大标题宽度框和一些小盒子，每个盒子都占据了大屏幕空间的一部分。小盒子的数量可以从2到5不等。每个盒子都可以是一个链接，通向更详细、更复杂的页面。

访问网站：

8. Casangelina

网站布局思路：不对称布局

Hotel Casangelina位于阿马尔菲海岸的悬崖上，酒店是世界十大悬崖酒店之一。客人可以在酒店露台上的全景室外游泳池放松。极简主义UI图片和字体在滚动区域的融合增强了网页浏览的沉浸感。这是UI设计与用户体验的完美结合。背景音乐和动态酒店全景视频增添了视觉真实感，让用户通过网页设计感受到整个酒店的优雅。因为我太喜欢这个网站了，所以我网站了。

现在我们来谈谈不对称布局，即页面布局两侧缺乏平等。不对称是艺术界长期以来最喜欢的技术，在网页设计师中非常流行。但是，我们应该注意不要混淆不对称和不平衡。不对称的目标是在不可能或不想使用相同权重的两部分之间创造平衡。使用不对称性可以创造张力和动态，并将用户的注意力集中在每个对象（焦点）上。

访问页面：

9. Tinkerwatches

网站布局思路：大图配带清晰CTA

这种布局的核心元素是一张用作页面背景的大照片。这张照片是用来向访问者介绍网站内容的。这种布局可以创造强烈的第一印象，并与用户互动。CTA这是引导用户互动的关键。如果你想以最简单的方式展示更多的信息，可以考虑这种布局，就像沉默胜于声音一样。但要仔细选择背景图像。

以上就是Mockplus为您设计了9个网站布局，希望对您有所帮助。当然，心不如行动，马上用Mockplus开始你的网站布局设计吧。Mockplus有大量的包装图标和组件可以直接拖动，界面布局可以立即显示。如果怕位置不准确，用Mockplus网格和参考线，准确到每一个细节，实现更完美的布局。就像码积木一样，你想怎么建，界面怎么呈现，都只需要鼠标拖一拖。现在试试，小白也可以设计！

链接：

来源：知乎

作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。