前言

概念

「有一条线条，我们从中切一段，如果左边是0.618比例，右边是1比例。」如果符合这样的左右比例我们称之为黄金分割比。那么中间切割的位置就是我们黄金分割线的位置。

黄金分割线是指将整体一分为二，较大部分与整体部分的比值，等于较小部分与较大部分的比值，其比值约为0.618。0.618这个比例被公认为是最能引起美感的比例。

应用

运用黄金分割线构图

画面长宽比不同，黄金分割线位置也不同。不同长宽比的画面我们按照0.618:1的比例，一个画面可以切割出4条黄金分割线，上黄金分割线/下黄金分割线/左黄金分割线/右黄金分割线。这里我们列举常用的长宽比尺寸3:2/4:3/16:9/1:1。

在移动端主流尺寸中，iOS尺寸使用7501334，安卓尺寸使用10801920。这两个尺寸正好等同于一倍图375*667的比例。

我们在实际构图中怎么利用黄金分割线快速排版？

基本的运用方法：

在构图中我们经常遇到正方形/长方形等规则的形状，前期我们把规则的形状中心放在黄金分割线上，等所有内容添加完成后再分析画面的重量，微调来平衡画面。
注意：不是所有的物体都是刚刚好放在黄金分割线上。轮廓化的形状应该根据形状的重心来跟黄金分割线重合，而不是中心。例举一个实例

上图，长方形的图片是有规律的形状，我们把它的中心暂时先放在右黄金分割线上，从平衡角度来看还是右边重，因为我们还没有把页面所有元素放进去，等添加了其他元素后，可以根据画面的平衡感来微调一下就好了。

多条黄金风格线构图

如上图我们把图片放在右黄金分割线上，正文大标题放在上黄金分割线上。这样就搭上两条黄金分割线了，再加上logo/分类/导航等信息整个界面就更完整了。（如下图）

具体选择哪一条？
1、根据元素选择
界面设计时要根据元素多少进行选取更合适的黄金分割线。

如上图，最终所有元素都确定后，我们把图片放右黄金分割线上，正文大标题放在上黄金分割线上，正文跟按钮的中心放在下黄金分割线上，图片轮播按钮的中心放在左黄金分割线上。这样四条黄金分割线搭上都利用起来。在这基础之上再去微调相信画面会更出彩的。

2、根据图片的色彩、内容选择
把上下或左右两条黄金分割线对比一下就能确定参考哪一条黄金分割线了

如上图我们开始把图片放在下黄金分割线上，上面留了太多空间，图片的内容展示的也很少，画面感不够丰富。

根据画面的丰富程度，我们把图片放在靠近上黄金分割线的位置，把图片中主体的放在靠近右黄金分割线附近。然后再添加内容丰富画面，我们为画面添加 logo/数据/导航/分类/按钮，让画面更丰满。（如下图）

3、视线的影响
人和动物的视线朝向会影响到它的摆放位置。

上图中小狗狗的视觉朝向是左边，所以我们肯定得把小狗狗放右边。因为它是一个不规则造型，当遇到不规则造型时我们应该尝试找到它的重心，正好它整个形态成一条直线，它的重心应该是沿鼻子的往右的一条隐形的线。主体确认好后，我们在加上 logo/标题/正文/导航进行排版，保证画面平衡进行微调。（如下图）

简化的黄金分割线——三等分线

0.618:1的黄金分割线的位置是很好找，所以对于设计师来说，有一种简化黄金分割线的做法，就是三等分线。
如下图，左边是黄金分割线，右边是三等分线。三等分线就是均匀的把长方形的长和宽切三段，均匀的砍三段，每个方格都是一样大小。

三等分线的位置跟黄金风格线的位置差不了多少，但是黄金分割线比起三分线更靠近中央的位置。

上图中绿色的虚线是右黄金分割线的位置，黄色的虚线是右三等分线的位置，我们没有把主体的重心直接放在黄金分割线上，在这个画面中，因为左右的信息量很大，给人很重的压迫感，所以主体如果太靠近左边就会让画面失去平衡，这时候我们就把主体放在了三等分线上。正常情况下，黄金分割线真实所在的位置是三等分线往里靠一点的位置，主体摆放的位置，应该具体情况具体分析。

黄金分割还不止这么多的表现形式。它还有一种更复杂的表现形式叫黄金螺旋线。而从黄金螺旋线里可以推导出一个黄金兴趣点。于是我们就把最佳兴趣点和黄金螺旋线都统称为黄金分割的衍生品。在设计中应该是算比较高级的一种构图技法了。

最佳兴趣点

长方形的一条斜线链接起来，另一个顶点画一条垂直于这条斜线的点基本就是最佳兴趣点的位置。（如下图）

画面中不止一个最佳兴趣点，一个画面中会有四个兴趣点。（如下图）

画面长宽比不同，最佳兴趣点的位置也不同。这里我们列举常用的长宽比尺寸3:2/4:3/16:9/1:1。（如下图）

在移动端主流尺寸中，iOS（7501334）尺寸，安卓（10801920）尺寸。同比例于375*667的尺寸。

1、案例分析
案例1

案例一同样大小的图片我们按照两种方式进行摆放，左边的图片我们参考黄金分割线，把人物的眼睛靠近上黄金分割线的位置；右边的图片我们把人物的右眼放在了右上的最佳兴趣点的位置。然后我们去掉辅助线再对比下（如下图）

从画面的饱和度跟视觉引导显然右边的整体感觉更饱满一些。

案例2

把人物右眼放在右上最佳兴趣点的位置，正好左前方灯管不规则的物体的重心也恰巧在左上最佳兴趣点的位置，这样就运用了两个最佳兴趣点，画面更加丰富起来。加上直播平台元素整个界面（如下图）

案例3

画面中人物的睫毛放在右上最佳兴趣点的位置，刚看到画面的时候我们第一眼会被美美的胸部所吸引，但是我们眼神会顺势往右上看到美女的睫毛。是的因为我们把它放在了最佳兴趣点的位置，不会因为它占的面积很小而被忽略。这个案例其实最具代表性。

注意：

最佳兴趣点和黄金分割线交点是不重合的，黄金分割线的交叉点比最佳兴趣点更靠近画面中心。

最佳兴趣点和三等分线交点也是不重合，最佳兴趣点比三等分线还要更外一点。
黄金分割线、最佳兴趣点和三等分线交点可以同时使用。（如下图）

画面中最突出的是人物的头发，我们把头发形成的点放在了左上最佳兴趣点的位置，微调人物，在画面中的人物重心差不多在三分线所在的这条直线上。标题正好做为一个整体的中心放在下黄金分割线的位置上。再加上音乐封面/歌曲名/播放按钮，微调画面使画面达到视觉平衡。

黄金螺旋线

斐波那契螺旋线也称「黄金螺旋」，是根据斐波那契数列画出来的螺旋曲线，自然界中存在许多斐波那契螺旋线的图案。是自然界最完美的经典黄金比例。
斐波那契螺旋线，以斐波那契数为边的正方形拼成的长方形，然后在正方形里面画一个90度的扇形，连起来的弧线就是斐波那契螺旋线。斐波那契数列（FibonacciSequence）数列是这样一个数列：1、1、2、3、5、8、13、21、34、55、89……

在数学上，斐波那契数列是以递归的方法来定义：
F0=1
F1=1
Fn=F(n-1)+F(n-2)
(n>=2，n∈N*)

斐波那契数列比在字号大小、界面布局上具体有哪些用法？
1、字号大小
大字体与小字体比例系统
我们在选择一个字号大小做为参考时，我们正常会选择最大字号或最小字号做为参考。按照黄金比1:1.618可以得到比它大的字体，按照黄金比1:0.618可以得到比它小的字体。
为了方便排版，我们除了可以使用黄金分割比外，还可以使用斐波那契数列比。可以有更多灵活的排版方式，通过对比可以选择最适合的。
斐波那契数列比1:1/1:2/1:3/2:3/1:5/2:5/3:5 …

如上图我们可以根据字体的高度比来排版，这里我们大字高度、间距、小字高度比为8:5:5，可以灵活使用斐波那契数列比，多排几个版式找到最适合的一个。
文字的长度比例

在设计字体大小的时候，可以根据字体的长度来做为参考，黄金螺旋线整体长度为140px，下面的字体比较长我们就乘以1.618来得到比较大的比例226.52，取整数为226，我们对应长度字号取整数即可。

2、界面布局

上图案例整个界面的布局很舒服，字间距也恰到好处。在做后台界面、客户端界面很多时候会出现界面分段布局，很多时候认为后台不是特别重要而忽略了它的美观性。看下图我们应该怎么通过斐波那契数列比来切割画面。

我们通过斐波那契数列比8:5:3:2:1绘制了正方形，在后台复杂的界面中我们肯定要参考画面中重要的最小宽度来确定这个比例大小，红框就是我们确定的最小宽度，确定宽度后8:5:3:2:1得到大小不一的方格，剩下来就是根据内容自由组合合适的方格。

总结

黄金分割线、三等分线、最佳兴趣点，每个还可以分上下左右4个构图方案，这里我们就已经有12种排版方式可以考虑了。构图的时候是否使用黄金分割线、三等分线、最佳兴趣点并不是绝对的，它只是方法之一。如果你有排版基础，以这个为参考相信一定能排出不错的版式。

谢谢浏览！

黄金分割在界面设计中的应用相关推荐

UI实用案例|黄金分割在界面设计中的应用
那黄金分割线到底是个什么东西呢.它在什么位置?它在画面中的哪个地方呢? "有一条线条,如果我们从中切一段,如果左边是0.618这么一个比列,右边则是1这么一个比例."如果符合这样的 ...
UI设计实例|界面设计中，版式实战运用以及设计思路
什么是用户体验界面版式设计版式设计是现代设计艺术的重要组成部分,是视觉传达的重要手段.表面上看,它是一种关于编排的学问:实际上,它不仅是一种技能,更实现了技术与艺术的高度统一,版式设计是现代设计者所必 ...
佳能打印机清零后不显示界面_Vignelli佳能在界面设计中的无形
佳能打印机清零后不显示界面 Over the last year, for reasons that are not related to this article, I had the chance ...
android 距离右边距,APP界面设计中间距与边距的要点
原标题:APP界面设计中间距与边距的要点广州UI设计别样设计表示,无论是做网页设计.后台系统设计.还是APP界面设计,都要遵守一定的设计规范,俗话说的好,无规矩不成方圆,在无需创新的情况下遵守设计规 ...
怎么做极简ui设计？UI界面设计中的极简原则【萧蕊冰】
怎么做极简ui设计?近几年,互联网的飞速发展引起了科技领域的巨大浪潮,UI设计行业需求大量专业优秀人才,吸引了很多想要学习UI设计的人.UI设计也就是用户界面的设计,作为引导用户快速正确使用产品的主要 ...
网站建设在网页界面设计中该如何做到简约
网站建设在网页界面设计中该如何做到简约是关于网站建设在网页界面设计中该如何做到简约的文章,同信长春网站公司帮您了解网站建设在网页界面设计中该如何做到简约的方面的知识. 提供的服务或产品,是供年轻人或孩 ...
UI(1)---手机界面设计中12种常用布局
手机界面设计中12种常用布局手机界面设计中12种常用布局转载自: 手机界面设计中12种常用布局 - 轩枫阁总结下手机界面改版要考虑的布局,主要的分为以下2大类主导航列表式陈列馆式九宫馆式 ...
手机端软件界面设计中的几种常用布局
感谢@天天阿木给我们带来的总结.作为一名手机浏览器PM,他从手机界面的设计布局入手,告诉我们如何在APP上展示内容.相信,随着产品设计的迭代更新,还会有更酷的布局出现,让我们一起来看看是哪几种. 手 ...
手机界面设计中9种常用的布局
手机由于屏幕尺寸的限制,可显示内容要比PC屏幕少得多.在手机界面设计中,若直接把所有内容在一屏内显示,会使界面混乱不堪,丑陋且不可用.我们需要对信息进行有效组织,通过合理布局把信息展示给用户.合理的布 ...

黄金分割在界面设计中的应用

前言

概念

应用