现在，越来越多的人想要建立自己的网站，他们可以通过自助建站系统创建自己的网页。 这无疑是一件好事，但是很多设计师，尤其是新手设计师或者根本不是设计师的新手，在网页设计中走了很多弯路。
网页制作中最重要的就是网页布局。 先布局，再细节。 只有选择了合适的网站布局之后，接下来的工作才能顺利进行。 你想问一下网站布局是怎样的？ 今天，Mockplus为您精选了9个不同的经典网站布局设计案例，希望能给您带来启发。
1. Diker Bau网站
网站布局思路：选择图像来展示品牌形象
Diker 是一家总部位于德国柏林的建筑规划集团。 设计师通过精选的图像突出了品牌形象的主要特征和属性。 特色图像被用作整个网站结构和架构的基础。 由于此布局中缺乏其他元素，特色图像将用户的全部注意力吸引到产品上。
如果您想设计一个快速销售产品的网站，那么这种布局就是您的最佳选择。 特色图像可以与访问者建立情感联系，而位置合适的大照片或插图会产生强烈共鸣并创造令人难忘的第一印象。 当您只需要展示一种产品或服务并将用户的全部注意力集中在其上时，此布局非常有用。
访问网站：
2.契诃夫
网站布局思路：分屏布局
网站采用分屏布局，可以同时显示两个同等重要的内容信息。 此外，设计师将两条信息相互对立，创造出完美的对比，吸引更多参观者的目光。 分屏布局与响应式动画相结合，创造出更加精致的体验。
如果您的网站需要提供两种不同的用户旅程变化，请使用分屏布局。 但避免在拆分中添加太多内容。 如果内容太长、过多，分屏设计就无法很好地扩展，会影响体验。 因此，如果您需要在分割部分提供大量文本或视觉信息，则这种布局不适合。
访问网站：
3.蒂莫西·鲁西赫
网站布局思路：视差滚动布局
该网站是设计师 Timothee Roussilhe 设计的一个简单而富有创意的简历网站。 他添加了视差效果，为游客提供更加愉快和令人印象深刻的体验。 当你向下滚动时，有很多盒子进进出出。 令人惊奇的是，所有的盒子都添加了视差效果，你会感觉自己正在看电影。
如果你想设计一个看起来很酷、有创意、令人印象深刻的网站，那就添加视差效果。 但不要弄乱它，保持布局简单并使用更干净的配色方案。
访问网站：
4.幸福横坐标
网站布局思路：侧边栏导航
该网站使用固定的侧边栏导航来显示整个布局。 导航无疑是任何网站的关键部分，而主菜单是大多数用户在导航时首先寻找的东西。 除了顶部水平导航之外，您还可以通过将菜单选项放置在固定侧边栏中来布局菜单选项。 侧边栏应选择页面左侧或右侧的垂直列。 使用此布局花的网站模板，侧边栏保持静态并始终可见，而页面的其余部分会随着用户向下滚动页面而发生变化。 还要确保此导航可访问。
这种布局适合导航选项数量相对有限的网站。 当用户进入页面时，所有选项最好都在视线范围内。 侧边栏还可以包含菜单之外的内容，例如社交媒体链接、联系信息或您希望访问者轻松找到的任何内容。
访问网站：
5.组装
网站布局思路：网格卡布局
Assemble 通过在丰富的主页上使用网格结构来显示彩色列。 卡片可以以易于理解的方式呈现大量可点击的信息。 它可以帮助访问者找到他们喜欢的内容，并通过单击或单击卡片深入了解详细信息。
这种布局是无限可操作的，网格的大小、间距和列数可以变化，并且卡片的样式可以根据屏幕尺寸而变化（卡片可以重新排列以适合任何屏幕）。 因此，网格卡在响应式设计中得到广泛应用。
这种布局非常适合构建具有相同层次结构的内容丰富的网站。
访问网站：
6. 中等
网站布局思路：栅栏布局
Medium 是一个流行的博客网站，以易于理解的方式为读者提供大量信息。 与纸质杂志类似，该网站使用多列网格，可以创建复杂的层次结构以及文本和插图的集成。 主要目标是让访问者能够快速浏览、阅读和理解页面。 不过值得一提的是，Medium 文章采用单栏布局。 这是为了方便读者无障碍地滚动鼠标阅读。
对于页面内容较多且层次结构复杂的网站来说，栅栏布局是一个不错的选择。 如果没有有效地使用网格，主页上的所有内容可能会显得更加混乱和有条理。
访问网站：
7.饮料
网站布局思路：框式布局
Beverages 是一个 100% 响应式网站模板花的网站模板，其餐厅主题适合任何食品和饮料网站设计。 所谓盒子布局就是一个标题宽度较大的盒子加上一些较小的盒子，每个盒子占据大屏幕的一部分空间。 较小框的数量可以从 2 到 5 个不等。每个框可以是指向更详细和更复杂的页面的链接。
访问网站：
8.卡安吉丽娜
网站布局思路：不对称布局
卡安吉丽娜酒店是世界十大悬崖酒店之一，位于阿马尔菲海岸的悬崖上。 客人可以在酒店露台上的全景室外游泳池放松身心。 通过极简的UI设计，滚动区域的图片和字体的融合增强了网页浏览的沉浸感。 这是UI设计和用户体验的完美结合。 背景音乐和动感的酒店全景视频增添了视觉真实感，让用户通过网页设计感受到整个酒店的优雅。 因为我太喜欢这个网站了，所以我不得不多说几句。
现在我们来谈谈非对称布局，即页面布局两侧不相等。 不对称是艺术界长期以来最受喜爱的技术，并且在网页设计师中很受欢迎。 但请注意不要将不对称与不平衡混淆，不对称的目标是在不可能或不希望对两个部分使用相同权重时创造平衡。 利用不对称来创造张力和动态，并将用户的注意力集中在单个对象（焦点）上。
访问页面：
9. 修补匠手表
网站布局思路：大局观，清晰的 CTA
此布局的核心元素是用作页面背景的大照片。 这张照片用于向访问者介绍网站内容。 这种布局创造了强烈的第一印象并产生了用户交互。 清晰的 CTA 是引导用户交互的关键。 如果你想用最简洁的方式展示更多的信息，可以考虑这种布局，就像无声胜有声一样。 但请仔细选择背景图片。
访问网站：
以上就是Mockplus为大家精选的9款网站布局设计。 希望对您有所帮助。 当然，行动比思考更好。 现在就使用Mockplus开始设计您的网站布局吧。 Mockplus拥有大量封装的图标和组件，可直接拖拽使用，界面布局瞬间呈现。 如果您担心定位不准确，可以使用Mockplus的网格和引导线来精确地处理每个细节，以实现更完美的布局。 这就像搭积木一样。 你可以按照你想要的方式构建它，并且可以按照你想要的方式呈现界面。 只需鼠标拖动即可。 现在就试试吧，新手也能设计！
【设计神器推荐】设计协作，用Mocket！ 100人以下的团队免费
Mocke支持Sketch/PS/XD/Axure设计稿交付、自动标注和裁剪、全流程协作。 帮助设计师和产品团队高效工作！
现在就试试：
设计+协作，Mock-up就够了！
免费使用