已有 147 人加入核心团队期待您也加入！

网站设计中的布局分割方法有哪些？

日期：2021-06-25　人气：147

网站设计师如何能让自己的网站在用户匆匆一瞥后就迅速吸引到他们进一步注意的呢？本文向用户介绍了一种简单的页面布局方式：分割布局，这种布局方式试图让用户初览页面时感受到一种友好的浏览体验。

作为网站设计师，我们可以参考的设计范例和布局原则有很多，比如说：栅格化、纵向一致性、F型布局、Z型布局、三分法则、黄金分割法等。注重这些原则将会给你的设计带来视觉吸引力和功能性——现在让我们来看一种简单的方式，将页面两等分。

虽然在一开始听起来有点傻，但是这种基本布局确实能起到非常好的效果。当我们通览一个页面时，我们的视线常常会沿着一个“之”字形移动。而如果用户的视线是沿着一条水平线移动时——就像在Z型布局里一样，那么他/她就会很专注（或者说尝试着专注）。但由于初来你网站90%的用户都不会很仔细的去关注你的页面，因此让你的设计“浏览起来友好”肯定会获得不错回报哦！

眼动和“之”字形

从雅虎的眼动追踪研究可以发现：

1、人们通过扫视页面的主要部分去判定这是个什么网站以及他们是否想在这多呆一会。

2、如果用户决定留在页面，他们会最关注屏幕顶部的内容。

3、用户仅仅在三秒内就会对页面做出决定

网站的用户总是很匆忙，他们有其它的事情要做，你不要指望他们会停下来去欣赏你网站的美学。虽然良好的美学设计是非常重要的，但是这并不能完全激发访问者去采取行动——去点击“立即购买”或者“了解更多”按钮。

我们不能去埋怨这些用户。永远记住，当你想查询什么东西时?你会急着打开谷歌的第一个搜索结果并且火速看完，或者更确切的说，是粗略的浏览整个页面。大多数时间，你甚至是毫不留意就将鼠标滚动到了页面底部。经过这个阶段后，如果你认为这个页面值得你花时间，你就会又回到页面顶端并且着实花精力去阅读和关注。

那么，用户初始浏览的目的究竟是什么呢？就是在你最初扫视页面时，捕捉到尽可能多的信息。如果我们以某种方式“制定”这种浏览模式，应该就能够得到更多访问者的关注。通过观察大量网站的热图，我得出了一个共通的趋势。

设计不仅仅是它的外观怎样或者感觉如何，而是它是如何工作的。——史蒂夫·乔布斯”

举例来说，你可以利用半分割布局的这一特点去有效的布置你作品集的预览、你的产品或服务的重要特性，这样很快就能引起网站访问者的注意。最终会激励用户在您的网站停留更久，并说服他们采取行动。这样的话，结果会是怎样呢?将给您的网站带来更高的转换率，同时给访问者带来更好的用户体验。

让你的设计和布局兼容“之”字形非常简单。实际上，这和将你的页面分为两等份一样简单！两等分的效果很好，因为“之”字形的端点或多或少能对齐到这两等分的中心。叠加使用，它们能很好的相互呼应。将重要元素放置在你网页中“之”字形的红色端点处，这就是分割布局或者说1/2布局包含的基本理念。

最近，我致力于设计一个“即将来临”的登陆页面。我尝试了多种布局，但是没有一种效果让我满意。我几乎试了每一种——比如栅格化，黄金分割比，F型布局等。但是仅当我将页面两等分时，那一刻有一种强烈的“我找到了！”的感觉。解决的办法竟如此简单！它看起来优雅而整洁，并且提醒了我一个重要的事实：简单不一定是坏事。

你能看到两等分如何体现出一种良好的视觉层次。首先，顶部的“即将来临”的红色缎带很引人注目。其次，标志也很鲜明。现在，跟随我之前提到的“之”字形，访问者看到右半部分的图片滑块，最后，到达电子邮件提交表格。

现在让我们来看一下，分割布局在一个网页设计师的作品集页面中能起到多大作用？设计作品集页面的目的是为了向潜在顾客快速展示你作品的主体部分。随着现在这个产业如此饱和，顾客的选择有很多很多，为什么他们要付钱给你呢？因此，一个很棒的第一印象将会在你的事业方向中起到决定性作用。让我们看看，我们可以做些什么?

上图的布局被划分为两等分，但是并不遵循我之前提到的“之”字形原则。

虽然它看起来是个不错的布局并且易于观看，但是在看完前两块元素后就会让人感到非常沉闷死板。打破这样的视觉流向并且增添视觉趣味性将会让之有所改变。不仅如此，当你试着去浏览上面这种布局时，你的眼睛会最先看到第一张图片，然后跳转到第二块的文本上。然而你的访问者并没有打算在这个阶段阅读，因此，他们会跳转到其它的点，或者彻底离开你的页面！但是如果你做了这样一个简单的调整呢？

变得更生动有趣了，对吧？简单的互换每个项目里文本和图片的位置来增加视觉上的生动性，这样，这种一致性就不会让你的用户感觉到无聊了。同时，你还能在“之”字模型后放置一个行为召唤按钮。

本文章来源云裂变：网站设计公司

更多>>相关文章

: 重庆网站seo排名的六大优势

现在很多企业都着手于做重庆seo排名,因为SEO是获取精准流量比较稳定且长期发展好的…

: 相较于传统硬广，软文营销到底好在哪？浅析…

网络营销时代，软文营销已成为企业传播品牌、促进订单转化的重要手段。不同于硬广形式…

: 什么是文库营销？文库营销的特点及优势是什…

文库营销指的是借助一些文库平台上传文档，通过知识分享来做品牌营销，目前常见的文…

: 企业为什么要建设营销型网站？五大理由

网站对于很多的企业来说，不仅仅是业务的渠道拓宽，也是多一个网站推广的途径和客户渠…

: 企业品牌推广渠道有哪些，了解渠道方便推广

企业品牌推广对于企业的生存来说是极其重要的，如果没有一个好的推销渠道的话，可能就…

: 企业如何避开“低价陷阱”、正确选择网站建…

一方面，不同客户的建站需求不同；另一方面，网站建设人员的技术水平高低不一；同时，…

: 怎么在各大论坛网站发帖推广

最先剖析要散播的目的客户人群的陋习与话动范畴；精心安排合乎网民爱好的论坛推广时…

: 论坛推广常见的营销技巧有哪些

人们常常会遇上有些人做论坛推广的当时，以便能短期内内看到作用，就在每个论谈网站上…

: 新成立品牌如何做好低成本市场推广？

在互联网高速发展的今天，在众多同行品牌的强势竞争下，新品牌想要打开市场并不是一件…

: 推广营销平台有哪些，这几个平台要了解

现在的推广营销方式与以前比起来可是多了不少，放在以前也就是还没有网络的时侯，商品…

: 小公司怎么做品牌推广，方法有哪些

一个生产企业想要发展必须要创立自己的品牌，在人们购买东西讲究牌子的今天，如果你所…

: 网络营销怎么推广产品

说起网络营销，让人们想起了网上购物，比如在刚过去的520，就是一波网购的热潮，各种打…

: 企业为什么要做好网站维护？如何降低网站跳…

很多企业在官网搭建完成之后，便放任不管，既不更新内容、也不做任何的排名优化，最后…

: 相较于传统广告，网络营销对企业发展有何实…

随着网络营销、全网覆盖等口号喊得越来越响，现在有不少的企业做网络营销都是被同行带…

: 论坛社区的网络推广方式

论坛推广就是，企业利用论坛这种网络交流的平台，通过文字、图片、视频等方式发布企业…

: 中小企业如何做好品牌推广

随着社会的发展和人们消费观念的改变，现在人们的消费已经从单纯的商品能使用消费阶段…

: 企业如何选对全网营销外包平台？靠谱外包公…

受互联网大趋势影响，很多传统企业纷纷着手布局网络营销，考虑到企业自身在营销经验上…

: 传统企业转型为什么要做好百科营销？优势及…

百科营销是一种以权威知识分享的形式对企业做有目的性的品牌宣传，可以有效提高潜在客…

: 推广秘籍：护肤品行业如何用软文营销扩张市…

护肤品作为当下大受女性追捧的快消品，行业竞争激烈，且更新换代尤其迅速。那么如何在…

: 解析前端seo优化代码与网页制作的具体实施步…

一、前端seo代码优化注意事项1、提高页面加载速度。CSS可以用来解决不使用背景图片的问…

微信扫码添加好友

添加微信

feishanghui

点击添加

已有 147 人加入 核心团队 期待您也加入！

网站设计中的布局分割方法有哪些？

已有 147 人加入核心团队期待您也加入！