湖南正致教育UI设计 黄金分割在界面设计中的应用

黄金分割大家应该早就有所耳闻，作为一名设计师，可能一直感觉它离我们很遥远。那么怎么能利用黄金分割线更加完构图呢？

说实话呢，构图的时候是否使用黄金分割线构图并不是的，它只是方法之一。但是黄金分割比例，在全世界乃至全宇宙确实都是至高无上的。

一、至高无上的黄金分割比例

这种东西是很神奇的事情，你了解的越多越会绝的这是一个不可思议的事情，甚至有人称之为上帝的密码。那黄金分割线到底是个什么东西呢？它在什么位置？它在画面中的什么地方？

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



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

总结一句话就是：0.618的比值美。

0.618的比例怎么来的？

有人做了一个实验，他们拿着一些长方形去问全世界的人，说哪个长方形看？

结果所以的人都不约而同的选择了这种长方形。西方的、东方的、土著的都选择了如下图的这种长方形。



科学家们就很奇怪它到底奥秘在哪？

要分析分析它。这个长方形如果从中间画一条线，把它分割成俩个形状的话，右边可以是一个正方形，左边小的长方形的比例和原来的长方形的比例是一摸一样的。小的长方形也可以切割出一个正方形和一个等比例的更小的长方形，这种长方形只有黄金风格的长方形才能做到。



二、运用黄金分割线构图

画面长宽比不同，黄金分割线位置也不同，这里我们列举常用的长宽比尺寸4:3/3:2/16:9/1:1。



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



不同长宽比的画面我们按照0.618:1的比例，一个画面可以切割出4条黄金分割线，上分割线/下分割线/左分割线/右分割线。我们在实际构图怎么利用黄金分割线快速排版？

2.1 基本的运用方法

2.1.1 把主体放线上，当然线状的主体才能放线上

在构图中我们经常遇到正方形/长方形等规则的形状，前期我们把规则的形状中心放在黄金分割线上，等所以内容添加完成后再分析画面的重量，微调来平衡画面。

不是所有的物体都是刚刚好放在黄金分割线上，轮廓化的形状应该根据什么来跟黄金分割线重合呢？

应该是形状的重心，而不是中心。



如上图：长方形的图片是有规律的形状，我们把它的中心暂时先放在右黄金分割线上，从平衡角度来看还是右边重，因为我们还没有把页面所以元素放进去，到时候可以根据画面的平衡感来微调。

2.1.2 多条黄金风割线构图

一个画面中，可以切割成上下左右四个黄金分割线，前期练习时可以尽可能把黄金分割线利用好。



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



2.2 具体选择哪一条？

初期进行练习的时候，黄金分割线能搭上几条就搭上几条。这么多黄金风格线，如果我用1条到2条，到底选择哪一条？

2.2.1 根据元素选择

界面设计时，要根据元素多少进行选区更合适的黄金分割线？



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

2.2.2 根据那边更精彩选择画面

把上下或左右俩条黄金分割线对比一下，就能确定参考哪一条黄金分割线了。



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



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



2.2.3 视线的影响

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



如上图：小狗狗的视觉朝向是左边，所以我们肯定得把小狗狗放右边。因为它是一个不规则造型，当遇到不规则造型时我们应该尝试找到它的重心，正好它整个形态成一条直线，它的重心应该是沿鼻子的往右的一条隐形的线。

主体确认好后，我们在加上logo/标题/正文/导航进行排版，保证画面平衡进行微调。如下图：



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

我们还有个困难，那就是0.618:1的黄金分割线的位置确实不是很好找。所以对于设计师来说，我们有一种简化黄金风格线的做法？

就是三分线。

什么意思呢？

左边是黄金风格线，右边是三分线。三分线就是均匀的把长方形的长和宽切三段，均匀的砍三段，每个方格都是一样大小。



三分线的位置跟黄金风格线的位置差不了多少，但是黄金风格线比起三分线更靠近中央的位置，是这么一个概念。





如上图：绿色的虚线是右黄金分割线的位置，黄色的虚线是右三分线的位置，我们没有直接把主体的重心直接放在黄金分割线上，在这个画面中，因为左右的信息量很大给人很重的压迫感，所以主体如果太靠近左边就会让画面失去平衡，这时候我们就把主体放在了三分线上。

不要说很严谨的把它重心摆在三分线上，一来黄金风格线真实所在的位置是三分线往里靠一点的位置，二来我们说黄金风格线构图／三分线构图不是说让你一定要完全重叠，大差不差就行，具体情况还是要具体分析。

黄金风格线还不止这么多的表现形式，它还有一种更复杂的表现形式叫黄金螺旋线，而从黄金螺旋线里呢，可以推倒出一个黄金兴趣点。

于是我们就把黄金螺旋线和佳兴趣点，都统称为黄金分割的衍生品，在设计中应该是算比较高级的一种构图技法了。

三、佳兴趣点

来看看黄金螺旋线衍生的佳兴趣点在什么位置？

如下图：



在设计中实际应用的时候，想找出这个点来不是很容易的事情，所以怎么办呢？有简单找到佳兴趣点的方法吗？

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



画面中不止一个佳兴趣点，一个画面中会有四个兴趣点，会更好的方便我们利用，如下图：



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





案例分析

如上图：图片案例来自摄影师7kidz的摄影作品，图片质量很高，整体风格很符合现在主流的短视频风，那就顺便做个直播类的ui界面设计来诠释佳兴趣点的魅力。
黄金分割在界面设计中的应用
案例一，同样大小的图片我们按照俩种方式进行摆放，左边的图片我们参考黄金分割线，把人物的眼睛靠近上黄金分割线的位置；右边的图片我们把人物的右眼放在了右上的佳兴趣点的位置。然后我们去掉辅助线再对比下。

如下图：



虽然我们参考了俩种方式进行排版，图片本身就很精美，很多人就感觉随便放放就好了，左边的黄金分割线构图单看也是很棒的，所谓没有对比就没有伤害，当黄金分割线遇上佳兴趣点，哪个好效果是显而易见的。

从画面的饱和度跟视觉引导，显然右边的整体感觉更饱满一些，加上直播平台元素整个界面。

如下图：





案例二画面中人物前方的效果很出彩，想办法尽可能保留，所以把人物右眼放在右上佳兴趣点的位置，正好左前方灯管不规则的物体的重心，也恰巧在左上佳兴趣点的位置，这样就有运用了俩个佳兴趣点，画面更加丰富起来，加上直播平台元素整个界面。

如下图：





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

这个案例其实具代表性，加上直播平台元素整个界面，如下图：



佳兴趣点是不是和黄金分割线是重叠的？



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

那是不是就是三分线的横竖线相交处啊？



佳兴趣点和三分线交点也不重合？

佳兴趣点比三分线还要更外一点。

佳兴趣点可以和黄金分割线或三分线一起使用吗？

答案是肯定的，一起使用会增加我们布局的多样性，内容可以排的更加丰富。



如上图：画面中突出的是人物的头发，我们把头发的形成的点放在了左上佳兴趣点的位置，微调人物，在画面中的人物重心差不多在三分线所在的这条直线上。

标题和正好的做为一个整体的中心，放在下黄金分割线的位置上，再加上音乐封面/歌曲名/播放按钮再微调画面使画面达到视觉平衡。



如上图：音乐专辑封面为正方面，佳兴趣点就是正方形的中心点，封面人物重心放在正方形的中心，封面放在靠近上黄金分割线的位置。大标题差不多在左上佳兴趣点的位置，整个画面重心在左黄金分割线的位置。

为了达到视觉平衡，右上角加了一个头像形成大小对比，让画面更稳定，不至于左边太重而失去平衡。加上播放按钮/推荐的封面后再调整，如下图：



四、黄金螺旋线

斐波那契螺旋线也称“黄金螺旋”，是根据斐波那契数列画出来的螺旋曲线，自然界中存在许多斐波那契螺旋线的图案，是自然界完经典黄金比例。

斐波那契螺旋线，以斐波那契数为边的正方形拼成的长方形，然后在正方形里面画一个90度的扇形，连起来的弧线就是斐波那契螺旋线。