黄金比例是用于所有类型的图形布局,特别是平衡的内容,是文本重。它可以帮助设计人员创建层次结构,吸引用户的眼睛到特定领域。看看下面的网站实例,看看设计师如何利用它!
什么是黄金比例?
黄金比例是一种数学比,一般在自然界中发现,并用在经典设计理论中,创造出平衡的成分。它大致等于1.6180,也被称为“中庸”,“黄金分割”,是指以希腊字母φ”ϕ”
“黄金矩形”是一个长方形,其长度是其宽度的1.6180倍。例如,一个div具有300px一边和另一个300×1.6180≈485px可以说是一个黄金矩形。
如果你把一个完美的正方形从这个金色的长方形上砍下来,你就可以用另一个金色的长方形。
你可以做同样的小矩形,然后再次相同,无限期地,给你这个熟悉的形象:
斐波那契数列
斐波那契数列与黄金比,但不完全是这样。序列中的下一个数的一系列数字是前两个的总和。例如:0,1,1,3,4,7,2
如果我们从一个完美的正方形开始,然后加入到另一个我们得到一个长方形:
沿最长的长度继续增加正方形
然后再加一个正方形,等于总形状的最长长度:
然后一次又一次:
这可以无限期地继续下去,给我们同样的效果是我们的黄金矩形,但这一次的建设,而不是削减。无论是黄金比例、斐波那契数列给我们同样吸引人的比例。
现在让我们来分析几个网站,我们可以看到他们的行动。
例1:ystudio #
这个网站是关于什么的?
“您的本地工作室”是一个设计和开发工作室设在哥本哈根,丹麦。他们从事的工作与任何形式的视觉概念创造体验,改善环境。
它是如何使用黄金的意思
这里的网站使用了黄金意味着它的三页。首页是一个概念概述的关键部分的工作。然而,当你访问工作室页面,它混合了一点传统的网页布局与黄金意味着矩形形状,因为你向下滚动页面。
为什么是有效的
想要在人群中脱颖而出?yourlocalstudio(YLS)做,利用黄金比例在他们的网站设计。设计特点是一个渐进的外观与一个明确的网格系统。你可以说,这些天一切看起来像引导。保持一个眼睛为越来越多的网站寻找更多的关注与结构动态布局。
例2:# Mashable
什么是网站?
Mashable是一个新闻网站;一个信息源,知识和资源“并网发电”。
它是如何使用黄金的意思
我使用黄金比例测试UX触发演示如何在布局中使用Mashable的斐波那契数列。内容布局灵活,以标题为左,并链接到右边的更多新闻,由网格分隔。
为什么是有效的
黄金比例是有效的,因为它允许一个非常内容驱动的网站,以给字体呼吸空间。类似的网站可能会出现更密集的内容,采用传统的网格布局,但Mashable表明黄金比例可以有效的即使它是无形的。
Example #3: Jackson & Kent
什么是网站?
从法国来的一个网络制作机构。他们专门的数字服务,如HTML5,CSS3,WordPress,Drupal,PHP和MySQL,Flash等。
它是如何使用黄金的意思
上面的截图显示了布局的布局,主要包括以前的客户工作。它还具有一个块的内容有关的机构本身和导航栏中的屏幕中心。接触按钮,如下图所示,也使用黄金平均作为一个网格系统以独特的方式来组织布局。
为什么是有效的
这里的例子鼓励你去通过网站,并探索它的内容水平。网格视图和不同大小的块的形状使内容更有趣。用户可能会在桌面的内容看(以及平板电脑),有页码在水平轴上的导航。这是一种创新的方式来查看每一个内容,但也作为一个整体的用户界面。
结论
黄金比例自然会导致用户的眼睛在用户界面内的特定点。作为一个概念,它可以帮助你思考的内容和使用层次结构的有效性。布局、字体、颜色和总体原则的结合将有助于你的设计到下一个层次。