|
最近跟牛耳教育一线设计师交流，他们给我的反响是做设计的时分不单单只是视觉上的美感，更需求措施论来支撑，这样才更具有压服力。 黄金分割大家应该早有耳闻，作为一名设计师，怎样来应用黄金分割线使其构图愈加圆满呢？ 说实话，构图时能否运用黄金分割线构图并不是绝对的，它只是措施之一。但是黄金分割比例在全世界乃至全宇宙的确都是高高在上的。 一、高高在上的黄金分割比例 这种东西是很神奇的事情，你了解的越多越会觉的这是一个不可思议的事情。以至有人称之为上帝的密码。 那黄金分割线到底是个什么东西呢？它在什么位置？它在画面中的哪个中央呢？ 「有一条线条，假如我们从中切一段，假如左边是0.618这么一个比列，右边则是1这么一个比例。」假如契合这样的左右比例我们称之为黄金分割比。那么中间切割的位置就是我们黄金分割线的位置。
我们大致概括一下： 黄金分割线是指将整体一分为二，较大部分与整体部分的比值，等于较小部分与较大部分的比值，其比值约为0.618。这个比例被公以为是最能惹起美感的比例，总结一句话就是：0.618的比值最美。 1. 0.618的比例怎样来的？ 有人做了一个实验，他们拿着一些长方形去问全世界的人，说哪个长方形最美观？结果一切的人都不约而同的选择了这种长方形。西方的，东方的，土著的都选择了如下图的这种长方形。
科学家们就很奇特它的奇妙到底在哪？要剖析剖析它。这个长方形假如从中间画一条线，把它分割成两个外形的话，右边能够是一个正方形，左边小的长方形的比例和原来的长方形的比例是一摸一样的。 小的长方形也能够切割出一个正方形和一个等比例的更小的长方形。这种长方形只需黄金分割的长方形才干做到。
2. 运用黄金分割线构图 画面长宽比不同，黄金分割线位置也不同。这里我们罗列常用的长宽比尺寸4:3/3:2/16:9/1:1。
在移动端主流尺寸中，iOS尺寸运用750*1334，安卓尺寸运用1080*1920。这两个尺寸正好同等于一倍图375*667的比例。
不同长宽比的画面我们依照0.618:1的比例，一个画面能够切割出4条黄金分割线，上分割线/下分割线/左分割线/右分割线。我们在实践构图中怎样应用黄金分割线快速排版？ 3. 基本的运用措施 把主体放线上，当然线状的主体才干放线上 在构图中我们经常遇到正方形/长方形等规则的外形，前期我们把规则的外形中心放在黄金分割线上，等一切内容添加完成后再剖析画面的重量，微调来均衡画面。 不是一切的物体都是刚刚好放在黄金分割线上。轮廓化的外形应该依据什么来跟黄金分割线重合呢？应该是外形的重心，而不是中心。
如上图，长方形的图片是有规律的外形，我们把它的中心暂时先放在右黄金分割线上，从均衡角度来看还是右边重，由于我们还没有把页面所以元素放进去，到时分能够依据画面的均衡感来微调。 多条黄金作风线构图 一个画面中，能够切割成上下左右四个黄金分割线，前期练习时能够尽可能把黄金分割线应用好。
如上图我们把图片放在右黄金分割线上，正文大题目放在上黄金分割线上。这样就搭上两条黄金分割线了，再加上logo/分类/导航等信息整个界面就更完好了。（如下图） 细致选择哪一条？ 初期中止练习的时分，黄金分割线能搭上几条就搭上几条。这么多黄金分割线，假如我用1条到2条，到底选择哪一条？ 依据元素选择 界面设计时要依据元素多少中止选取更适合的黄金分割线。
如上图，最终一切元素都肯定后，我们把图片放右黄金分割线上，正文大题目放在上黄金分割线上，正文跟按钮的中心放在下黄金分割线上，图片轮播按钮的中心放在左黄金分割线上。这样四条黄金分割线搭上都应用起来。在这基础之上再去微调置信画面会更出彩的。 依据哪边更精彩选择画面 把上下或左右两条黄金分割线对比一下就能肯定参考哪一条黄金分割线了。
如上图我们开端把图片放在下黄金分割线上，上面留了太多空间，图片的内容展示的也很少，画面感不够丰厚。
依据画面的丰厚水平，我们把图片放在靠近上黄金分割线的位置，把图片中主体的放在靠近右黄金分割线左近。然后再添加内容丰厚画面，我们为画面添加 logo/数据/导航/分类/按钮，让画面更丰满。（如下图）
视野的影响 人和动物的视野朝向会影响到它的摆放位置。
上图中小狗狗的视觉朝向是左边，所以我们肯定得把小狗狗放右边。由于它是一个不规则外型，当遇到不规则外型时我们应该尝试找到它的重心，正好它整个形态成一条直线，它的重心应该是沿鼻子的往右的一条隐形的线。主体确认好后，我们在加上 logo/题目/正文/导航中止排版，保障画面均衡中止微调。（如下图）
二、简化的黄金分割线——三分线 我们还有个艰难，那就是0.618:1的黄金分割线的位置的确不是很好找。所以关于设计师来说，我们有一种简化黄金分割线的做法？就是三分线。 什么意义呢？左边是黄金分割线，右边是三分线。三分线就是平均的把长方形的长和宽切三段，平均的砍三段，每个方格都是一样大小。
三分线的位置跟黄金作风线的位置差不了多少，但是黄金分割线比起三分线更靠近中央的位置，是这么一个概念。
上图中绿色的虚线是右黄金分割线的位置，黄色的虚线是右三分线的位置，我们没有把主体的重心直接放在黄金分割线上，在这个画面中，由于左右的信息量很大，给人很重的压榨感，所以主体假如太靠近左边就会让画面失去均衡，这时分我们就把主体放在了三分线上。 不要说很严谨的把它重心摆在三分线上，一来黄金分割线真实所在的位置是三分线往里靠一点的位置，二来我们说黄金分割线构图/三分线构图不是说让你一定要完整堆叠，差未几的位置就行，细致状况还是要细致剖析。 黄金分割还不止这么多的表示方式。它还有一种更复杂的表示方式叫黄金螺旋线。而从黄金螺旋线里能够推导出一个黄金兴味点。 于是我们就把最佳兴味点和黄金螺旋线都统称为黄金分割的衍生品。在设计中应该是算比较高级的一种构图技法了。 三、最佳兴味点 来看看黄金螺旋线衍生的最佳兴味点在什么位置？（如下图）
在设计中实践应用的时分，想找出这个点来绝对不是很容易的事情。所以怎样办呢？有简单找到最佳兴味点的措施吗？长方形的一条斜线链接起来，另一个顶点画一条垂直于这条斜线的点基本就是最佳兴味点的位置。（如下图）
画面中不止一个最佳兴味点，一个画面中会有四个兴味点。会更方便我们应用。（如下图）
画面长宽比不同，最佳兴味点的位置也不同。这里我们罗列常用的长宽比尺寸4:3/3:2/16:9/1:1。（如下图）
在移动端主流尺寸中，iOS尺寸运用750*1334，安卓尺寸运用1080*1920。这两个尺寸正好同等于一倍图375*667的比例。
1. 案例剖析
图片案例来自摄影师 7kidz 的摄影作品，图片质量很高，整体作风很契合往常主流的抖音风，那就顺便做个直播类的 ui界面设计来诠释最佳兴味点的魅力。
案例一同样大小的图片我们依照两种方式中止摆放，左边的图片我们参考黄金分割线，把人物的眼睛靠近上黄金分割线的位置；右边的图片我们把人物的右眼放在了右上的最佳兴味点的位置。然后我们去掉辅助线再对比下（如下图）
固然我们参考了两种方式中止排版，图片自身就很精巧，很多人就觉得随意放放就好了，左边的黄金分割线构图单看也是很棒的，所谓没有对比就没有伤害，当黄金分割线遇上最佳兴味点，哪个效果好是显而易见的。从画面的饱和度跟视觉引导显然右边的整体觉得更丰满一些。加上直播平台元素整个界面。（如下图）
案例二画面中人物前方的效果很出彩，想措施尽可能保存，所以把人物右眼放在右上最佳兴味点的位置，正好左前方灯管不规则的物体的重心也恰巧在左上最佳兴味点的位置，这样就运用了两个最佳兴味点，画面愈加丰厚起来，加上直播平台元素整个界面（如下图）
案例三画面中人物的睫毛放在右上最佳兴味点的位置，刚看到画面的时分我们第一眼会被美美的胸部所吸收，但是我们眼神会顺势往右上看到美女的睫毛。是的由于我们把它放在了最佳兴味点的位置，不会由于它占的面积很小而被疏忽。这个案例其实最具代表性。加上直播平台元素整个界面（如下图） 2. 最佳兴味点是不是和黄金分割线是堆叠的？
最佳兴味点和黄金分割线交点不重合的，黄金分割线的交叉点比最佳兴味点更靠近画面中心。 3. 那是不是就是三分线的横竖线相交处啊？
最佳兴味点和三分线交点也不重合？最佳兴味点比三分线还要更外一点。 4. 最佳兴味点能够和黄金分割线或三分线一同运用吗？ 答案是肯定的，一同运用会增加我们规划的多样性，内容能够排的愈加丰厚。
上图画面中最突出的是人物的头发，我们把头发构成的点放在了左上最佳兴味点的位置，微调人物，在画面中的人物重心差未几在三分线所在的这条直线上。题目正好做为一个整体的中心放在下黄金分割线的位置上。再加上音乐封面/歌曲名/播放按钮，微调画面使画面抵达视觉均衡。
如上图，音乐专辑封面为正方形，最佳兴味点就是正方形的中心点，封面人物重心放在正方形的中心，封面放在靠近上黄金分割线的位置；大题目差未几在左上最佳兴味点的位置，整个画面重心在左黄金分割线的位置，为了抵达视觉均衡，右上角加了一个头像构成大小对比，让画面更稳定，不至于左边太重而失去均衡。加上播放按钮/引荐的封面后再调整。（如下图）
四、黄金螺旋线 斐波那契螺旋线也称「黄金螺旋」，是依据斐波那契数列画出来的螺旋曲线，自然界中存在许多斐波那契螺旋线的图案。是自然界最圆满的经典黄金比例。 斐波那契螺旋线，以斐波那契数为边的正方形拼成的长方形，然后在正方形里面画一个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*)
斐波那契数列比在字号大小、界面规划、Logo设计上细致有哪些用法？ 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. 界面规划
上图案例由 UISTAR 提供，整个界面的规划很温馨，字间距也恰到益处。在做后台界面、客户端界面很多时分会呈现界面分段规划，很多时分以为后台不是特别重要而疏忽了它的美观性。看下图我们应该怎样经过斐波那契数列比来切割画面。
我们经过斐波那契数列比8:5:3:2:1绘制了正方形，在后台复杂的界面中我们肯定要参考画面中重要的最小宽度来肯定这个比例大小，红框就是我们肯定的最小宽度，肯定宽度后8:5:3:2:1得到大小不一的方格，剩下来就是依据内容自由组合适合的方格。 很神奇的事情发作了，好的作品大致都契合这个规律，几像素的倾向曾经不重要，所以前期我们能够参考措施论，当你的才干上来之后就能够放弃它慢慢凭自己的觉得来判别作品的好坏。 3. LOGO设计 黄金斐波那契螺旋法是国际上通用的 LOGO设计手法，也是最工整最严谨的设计手法。 为什么要用黄金螺旋线去重新定义标识？ 打个好比很多时分我们会找一张动物图片用圆切法去绘制它，但是我们绘制时分由于不知道怎样去做减法，会让这个形态变的复杂，绘制结果更多像是图案或者图形，而不是标识。我们运用黄金螺旋比例去切形态的时分要抓住动物的主体形态和特征，尽可能的笼统化简单化。 黄金螺旋线在logo中的应用 黄金螺旋比例用圆去切割很多人曾经会了，但是最高级的就应用好黄金螺旋线。最近站酷很火的一个设计师 DAINOGO，它的作品中就用到了黄金螺旋线，能用一个圆处置的绝对不用两个圆。我们在设计中假如有运用到弧线的中央能够思索运用黄金螺旋线做为参考。
总结 黄金分割线、三分线、最佳兴味点，每个还能够分上下左右4个构图计划，这里我们就曾经有12种排版方式能够思索了。构图的时分能否运用黄金分割线、三分线、最佳兴味点并不是绝对的，它只是措施之一。假如你有排版基础，以这个为参考置信一定能排出不错的版式。 欢送关注牛耳数字艺术学院 www.newerart.cn |
