企业形象网站建设解决方案   |   集团公司网站建设解决方案   |    协会门户网站建设解决方案
您所在位置:首页 > 建站知识

网站优化

Website development

​布局设计技巧来优化你的网页内容的划分

发布时间:2017-01-16 11:20:37

TAGS:网站优化

布局设计技巧来优化你的网页内容的划分.jpgFEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

设计不只是添加文本和图像到您的网页和好的希望是简单的。一个恒星的布局有助于吸引观众,引导他们到你的内容的重要的部分。值得庆幸的是,有可以使设计过程更容易策略丰富。FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

在这篇文章中,我们将为你创造一个平衡的布局,网站提供的四个小技巧,比如使用空白和重复的重要设计元素。自始至终,我们也会告诉你如何使用分的功能把一些元素的生活。让我们开始吧。FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

为什么你的页面布局是重要的FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联


FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

你的页面布局可以是人与人之间的差异离开您的网站几乎立刻,或粘贴在阅读你的内容。总之,正确的布局可以吸引游客,他们重要的内容,并鼓励他们停留在你的网站。FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

当然,人们会而不是他们的时间spend看着一个设计精美的网站不是平原。很简单,一个不起眼的网站访问者参与到输。FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

同时获得网站访问者是一回事,让他们以某种方式行事时,他们已经降落完全是另一回事。终,你希望你的重要的内容被消耗,和你呼吁采取行动(CTA)应遵循。事实上,实际的人类心灵期待和希望CTA–所以你要做的是引导读者在正确的方向与正确的布局。FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

4布局设计技巧来优化你的网站内容FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联


FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

而本文的提示将覆盖各种设计元素,让你开始,也有无数的网站来帮助你找到布局的启示。网站如awwwards展示伟大的,高品质的例子–和即使Pinterest可能是灵感的源泉。至于技巧,让我们看一看!FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

1。使用网格系统FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

网站设计中,网格是可见的或假想的水平线和垂直线作为指导帮助你组织和安排你的内容。在策划自己的网格系统,你也可以将其他设计等技术的使用焦点和三分法FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

一个好的焦点,无论是文本,图像或块的一部分,应该抓住读者的注意力。它往往是放在页面的中心,或者你的网格的中心部分。FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

三分法是基于在三个垂直或水平的网页分割的概念。然而,这并不一定意味着不同的内容部分已经出现在三列,有的可能跨越两。例如,许多网页–如我们的博客–有一个侧边栏,占第三,而主要的文本跨越左、中1/3。FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

使用迪维生成器可以很容易地创建一个网格的元素。例如,应用规则的三分之一,实际上你可以创建三列,每三列:FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

A three by three Divi Module gridFEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

创建网格,首先进入分Builder和点击插入列(S):FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

The Divi Builder initial screen with the Insert Column(s) button highlightedFEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

在弹出的选择三列选项:FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

The Insert Columns screen with the three column option highlightedFEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

下一步,点击复制按钮两次,你会三格有一三,准备好你的内容:FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

The Divi Builder with the row copy button highlightedFEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

当然,这不是一个伟大的布局的唯一因素。在你引导读者也至关重要。FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

2。结构的内容放在“z-pattern '或'“F型”的FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

这取决于你的显示内容的类型,绝大多数人的阅读方式在一定的网页。眼球追踪研究采用热地图显示常见的模式是f-patterns和z-patterns。你可以利用这方面的知识,你的优势来引导读者到页面的重要的领域。FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

当读者浏览你的网站的顶部从左到右,然后看着你的页面从上到下,这是一个“F型”。他们通常适用于更多的大量文本的页面,比如博客,它展示了你的内容用副标题的重要性。FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

相反,读者扫描你的网站的顶部从左到右,斜下到底部,然后再从左到右是说是在z-pattern阅读。它们适用于简单的页面,特别是那些与CTA。这就是为什么人们常常建议把你的CTA在页面的右下角。当然,在你的页面底部的其他信息也应该以吸引他们点击CTA提供给读者足够的信息。这个快速发芽主页是一个很好的例子:FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

The Quicksprout homepageFEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

标志和导航菜单引导你页面的顶部。眼睛是那么的吸引到页面中间的一张脸的粗体文本和图像,希望这将吸引你读的销售拷贝。后,明亮的白色让你在地址栏的主要内容的底部,CTA按钮。FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

在Divi,模块化系统,使创建f-patterns和z-patterns简单。你可以开始在迪维生成器创建你的总体布局和内容,然后调整它在实时使用可视化生成器FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

当然,同样重要的是,CTA本身是可点击的。我们的CTA的模块划分可以帮助说服你的读者点击:FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

A Divi CTA Module exampleFEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

在这个模块,你有无穷无尽的选择,创造了令人难以置信的CTAs。你可以控制大小,字体,颜色等选项,甚至可以让他们粘所以他们永远卡在的地方。FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

三.重复重要的设计元素FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

重复的元素是我们经常添加到我们的设计思维。保持相同的字体和大小标题,或使用相同的子弹点风格在一块,是单元重复常见的例子。然而,它也可以扩展到图像、图形、色彩、空间关系、以及几乎任何你能想到的组件设计。FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

元素重复注射进你的布局的一致性,并结合个人的组件创建一个更具凝聚力和吸引力的设计。它也可以帮助读者用少的混乱的导航页。例如,采取缓冲的主页:FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

The Buffer homepageFEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

这表明,标志画面的焦点图像内的重复。纸飞机也像纸样子的标志板,使整个页面看起来更连贯的意义。FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

在把复制的元素是超级容易。只要浏览到您所选择的元素在迪维生成器,并单击复制按钮复制元素。从这里,你可以拖放元素在您的网页上的其他地方,并调整而不影响您的原:FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

The Divi Builder with a module copy button highightedFEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

同样的,你可以保存布局未来创造一致性在你的网站–我们会有更多的关于这一点以后。FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

4.适当使用空格FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

白色的空间–或者称为“负空间–只是一页的空白部分,不占用的内容。白色空间的使用往往被忽视。很多设计师发现它诱人,力图在尽可能多的信息。然而,当谈到保持观众的参与,似乎那么真的可以更,和适当的使用白色空间是关键FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

  • 这里有一些提示适当使用白色空间:FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

  • 调整幅度约副本增加利润的大小可以复制部分。这使得页面显得不那么杂乱的文字更容易阅读。FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

  • 增加空间之间的段落增加段落之间的间距可以打破文字和较长的文章看起来不那么吓人。FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

  • 调整行高和字母间距你可以调整线和字母来确保你的文本尽可能可读性之间的空间。FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

  • 环绕你的焦点与白色空间。白色空间增添了周围的焦点,如图片或标题,可以使它更为突出。FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

    FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联


FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

一个真实的例子,该谷歌主页是一个好的例子,事实上任何其他–,它以事物发展到极端:FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

The Google homepageFEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

苹果另一家公司是谁使用焦点(通常是产品形象和头)被大量的白色空间:FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Apple's Mac Mini promotional pageFEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

这可以帮助你使你调整在你的部分,边缘和填充的行,创建只白色空间适量和模块。例如,调整行,点击菜单按钮,选择你需要显示的无数:FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

A section of the Row Module Settings screenFEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

当你在一个模块中的文本,通常有选项来调整你的行高和文字的间距。例如,在一个文本模块,进入先进的设计设置屏幕,以及特征之间你会发现你有高度和间距的选择:FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

A section of the Text Module Settings screenFEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

可以相应调整直到你快乐。你也可以选择让这些变化以视觉生成器来看看你的变化会实时。FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

后,即使更多白色的空间,你可以使用一个分频器模块。这使您可以创建单独的模块之间的线路或一些空白空间,几乎所有的页面。FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

多少分可以帮助你保持你的布局设计一致FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联


FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

一旦你制作完美的布局,你可能不会想用它只有一次。节约你的布局意味着你可以使用它在您的网站的多个页面。这不仅节省了大量的时间和精力,而且还创造了一种在您的网页的统一性和熟悉性,这有助于读者的体验。FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

这是简单的做内分。一旦你与你的布局选择快乐,保存到库在Divi Builder的左上角:FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

The Divi Builder interface including the Save to Library buttonFEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

在弹出对话框中,输入你想用你的新设计的名称,并打保存:FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

The Save To Library popupFEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

找回你的布局未来的使用,选择负载从图书馆在迪维生成器…FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

The Divi Builder with the Load From Library button highlightedFEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

…然后去添加从图书馆选项卡,然后选择要使用的布局:FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

The Add From Library tab in the Load Layout screenFEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

编辑你的布局,你可以从你的WordPress仪表盘访问它们。选择分,点击分图书馆查看你保存的布局FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联


FEq北京网站设计开发,小程序开发,公众号,微信开发-云智互联

原创不易,未经授权,严禁转载

原文地址:https://www.yzlink.cn/i,72,7054,0.html

客户评价

更多+
  • 感谢云智互联,系统提前完成,在整个项目周期内,云智互联对待我们并不像是对待客户,更像是朋友一样,每一次,都能以专业的角度向我们提出更合理、更有效的解决方案,并快速、细致地完成我们的每一个需求,再次感谢以至诚之心做事的云智互联团队。

    潘涛

  • 我是东方龙马集团,在云智家做了2个企业官网,服务态度超级好。如果想做网站,选择他家一定不后悔。性价比高,服务态度好。值得你的信赖!

    谭娇

  • 技术好,设计精良,操作便利,很专业!配套的服务和后续的服务都很好,网站封面堪称精品,运行方便,后台操作的简单。技术还会耐心教我,很好的云智互联(北京)科技有限公司,建站很不错的。

    陈曦

  • 不错,价格比较合适,重点是响应速度蛮快,有什么问题都会马上给你解决,公司很满意,因为他们都是针对每个项目建了相应的讨论组,有问题可以再里面提出,人员分工到位,解决问题很及时。

    张经理

联系方式

工作时间:10:00-19:00
咨询电话:010-64758810
客服邮箱:net@cnlink.cc

合作伙伴

All Rights Reserved.©2010-2016 YZLINK.CN 京公网安备 110105019435 京ICP备14020656号
本网站设计已受版权保护,任何公司及个人不得复制,违者将依法追究责任,特此声明。法律顾问:北京市辉瑞律师事务所。
嘿,我来帮您!