网站首页资讯动态建站相关
咨询热线:400 693 6199
公司动态行业资讯建站相关九度视角推荐信息

从几何设计学原理的黄金分割应用到网页设计中

时间:2018-06-11 09:59:05 关键词:黄金分割 几何设计 线段分割 logo 品牌标识 图片拼贴 品牌形象 国家地理

undefined

  埃及金字塔、蒙娜丽莎、Twitter、百事可乐,这些事物有什么共同点?答案很简略,看似风马牛不相干的它们在规划时都遵从了黄金份额的原则。这也正是咱们今日要探求的主题:黄金份额。因为黄金份额具有共同的美学价值,在多个范畴有着广泛地运用:数学、物理、建筑、美术乃至是音乐。除此以外,黄金份额的栗子在日常生活和大自然中也比比皆是:舞台报幕员不是站在舞台的正中央,而是一侧;从一棵嫩枝的顶端向下看,它的叶子是依照黄金份额摆放着的。不过,很少有人将黄金份额和网站建设结合在一起,其实在网页规划之中运用黄金份额能够带来无与伦比的份额性、调和性和艺术性,给网站赋予共同的美感。今日小飞就带咱们了解一下什么是黄金份额,在网站能够怎样运用黄金份额以及一些优异的典范,期望能给咱们一些启示和创意。

  一般咱们会用线段分割来解说这个概念:把一条线段分割为两部分,较短部分与较长部分长度之比等于较长部分与全体长度之比,其比值是一个无理数,取其前三位数字的近似值是0.618。因为这样的份额常常能带来规划的调和与美感,因而人们称它为"黄金"份额(或黄金分割、中外比等)。下图中的公式能够给咱们作一个参阅:


undefined

  黄金份额还能够运用在图形之中。随意拿出一个正方形,将它的一边扩大1.618倍,这样一个黄金份额的矩形就出现了。当你将原来的正方形和新的矩形堆叠时,你能愈加明晰直观的看清黄金份额的存在。


undefined

  咱们还能够更进一步,在每个正方形中内切一个圆形,这些圆形是遵从0.618的黄金份额的,是份额最佳的圆形。


  在上面的段落中咱们关于黄金份额和黄金螺旋已有了必定的知道,获得了遵从黄金份额的矩形、圆形,那么接下来咱们就看看在网站中怎么运用提高规划美感。因为黄金份额的出现形式多样,咱们能够将它用到布局、距离、内容、图画和图形等多个元素之中。

  在布局中运用黄金份额很有效,要害点就在于操控份额和尺度,掌握好0.618的黄金份额。举个比如,假如你运用960px的宽度布局时,将它乘以0.618就能够得到594px,这就是网页布局的高度。在此根底之上,你能够将整个布局划分为一栏正方形,一栏矩形,愈加直观的出现黄金分割,让网站更富魅力。


undefined

  2、距离:运用黄金螺旋布局


undefined

  Moodley 规划工作室就是一个栗子,它为布雷根茨艺术节规划了海报、节目单以及Logo等品牌标识。节目单的全体规划采用了拍摄图片拼贴的方法,有许多的留白,而其间各种元素的规划份额、方位和留白就是凭借黄金螺旋来安置的。


undefined

  3、内容:沿着黄金螺旋的轨道

  以国家地理杂志的网页为例。假如你仔细观察它的首页,你就会发现它的内容就是依照黄金螺旋的轨道来组织的。因为人们可能会下意识留意这个轨道的中心,因而国家地理杂志在这放置了它的logo,再次杰出着重品牌形象。网站中的其他重要元素也为螺旋线所包括。


undefined

  Helms 工作室 为Fullsteam Brewery进行品牌规划时,也相同凭借黄金螺旋组织网站内容。各种不同的元素被放在不同的区块中,访客能够沿着中心人物、印章、ABV字符、产商地点地的轨道去阅读。这样的阅读体会很自然、便利。


  图片的构成也是很重要的,不管图片是服务于信息传递或美感出现的意图。在图片中运用黄金份额和三分法能够运用线条和交点构建视觉中心,让它们更吸人眼球,更能杰出重要的信息。在图片中运用黄金份额是指将图片分成3个不相等的区块,3个区块的份额应该是1:0.618:1,也就是说榜首列和第三列的宽度为1,而第二列的宽度为0.618,水平区域也是同理。这样一来,咱们能够通过这些线条或交点合理组织图片的方位和大小,看看怎样更能招引用户留意力,增加兴趣和生机。除了黄金份额以外,咱们还能够运用三分法对图片进行切开。三分法从某种意义上来说算是黄金分割的一种变体,在运用上愈加简略。它是将图片三等分,份额为1:1:1,这样的图片是彻底平衡和均匀的。这样咱们能够将重要的元素环绕中心的矩形摆放开来。


undefined

  Jason Mildren 为Pilot 杂志规划封面时,采用三分法来构建视觉重心,图中模特的眼、拇指和手臂轴心都处在视觉重心上,人物方位靠右下,留白靠左上,在布局上既杰出重点,又做到了调和统一。


  就像黄金份额能够用来创建份额调和矩形(前面几点都有提及),它还能够用在圆形上,一个完美的圆形应该遵从0.618的份额。下面就以百事和Twitter的Logo来仔细分析一下黄金份额的圆形在网页规划中的运用吧!


undefined

  Twitter的Logo规划则是凭借若干黄金份额的圆形来构建的,只不过它在运用黄金份额的圆形的时分,并没有运用相邻份额的圆形来构建,乍一看可能不行准确,但却相同调和。

  其实,黄金份额最大的魅力就在于既能使网站中的各项元素独立存在,又能以调和、一致的方法让他们串联起来。这种方位的调整可能是奇妙的,但它却是好的规划和优异规划的分水岭。别的,网站之中能够运用黄金份额的当地可能远不止这些,更多的运用办法需求咱们在不断的实践过程中探究总结。

本文由成都网站建设服务商九度互联原创,地址为:http://chengdu.jdoo.cn/news/i2444.html