超全面总结!黄金分割在界面设计中的应用优设网

最近跟一线大厂设计师交流,他们给我的反馈是做设计的时候不单单只是视觉上的美感,更需要方法论来支撑,这样才更具有说服力。

黄金分割大家应该早有耳闻,作为一名设计师,怎么来利用黄金分割线使其构图更加完美呢?

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

这种东西是很神奇的事情,你了解的越多越会觉的这是一个不可思议的事情。甚至有人称之为上帝的密码。

那黄金分割线到底是个什么东西呢?它在什么位置?它在画面中的哪个地方呢?

我们大体概括一下:

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

有人做了一个实验,他们拿着一些长方形去问全世界的人,说哪个长方形最好看?结果所有的人都不约而同的选择了这种长方形。西方的,东方的,土著的都选择了如下图的这种长方形。

科学家们就很奇怪它的奥秘到底在哪?要分析分析它。这个长方形如果从中间画一条线,把它分割成两个形状的话,右边可以是一个正方形,左边小的长方形的比例和原来的长方形的比例是一摸一样的。

小的长方形也可以切割出一个正方形和一个等比例的更小的长方形。这种长方形只有黄金分割的长方形才能做到。

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

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

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

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

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

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

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

多条黄金风格线构图

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

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

具体选择哪一条?

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

根据元素选择

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

根据哪边更精彩选择画面

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

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

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

视线的影响

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

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

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

什么意思呢?左边是黄金分割线,右边是三分线。三分线就是均匀的把长方形的长和宽切三段,均匀的砍三段,每个方格都是一样大小。

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

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

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

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

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

来看看黄金螺旋线衍生的最佳兴趣点在什么位置?(如下图)

在设计中实际应用的时候,想找出这个点来绝对不是很容易的事情。所以怎么办呢?有简单找到最佳兴趣点的方法吗?长方形的一条斜线链接起来,另一个顶点画一条垂直于这条斜线的点基本就是最佳兴趣点的位置。(如下图)

画面中不止一个最佳兴趣点,一个画面中会有四个兴趣点。会更方便我们利用。(如下图)

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

图片案例来自摄影师7kidz的摄影作品,图片质量很高,整体风格很符合现在主流的抖音风,那就顺便做个直播类的ui界面设计来诠释最佳兴趣点的魅力。

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

虽然我们参考了两种方式进行排版,图片本身就很精美,很多人就感觉随便放放就好了,左边的黄金分割线构图单看也是很棒的,所谓没有对比就没有伤害,当黄金分割线遇上最佳兴趣点,哪个效果好是显而易见的。从画面的饱和度跟视觉引导显然右边的整体感觉更饱满一些。加上直播平台元素整个界面。(如下图)

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

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

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

最佳兴趣点和三分线交点也不重合?最佳兴趣点比三分线还要更外一点。

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

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

如上图,音乐专辑封面为正方形,最佳兴趣点就是正方形的中心点,封面人物重心放在正方形的中心,封面放在靠近上黄金分割线的位置;大标题差不多在左上最佳兴趣点的位置,整个画面重心在左黄金分割线的位置,为了达到视觉平衡,右上角加了一个头像形成大小对比,让画面更稳定,不至于左边太重而失去平衡。加上播放按钮/推荐的封面后再调整。(如下图)

斐波那契螺旋线,以斐波那契数为边的正方形拼成的长方形,然后在正方形里面画一个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.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,我们对应长度字号取整数即可。

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

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

很神奇的事情发生了,好的作品大体都符合这个规律,几像素的偏差已经不重要,所以前期我们可以参考方法论,当你的能力上来之后就可以放弃它慢慢凭自己的感觉来判断作品的好坏。

黄金斐波那契螺旋法是国际上通用的LOGO设计手法,也是最工整最严谨的设计手法。

为什么要用黄金螺旋线去重新定义标识?

打个比方很多时候我们会找一张动物图片用圆切法去绘制它,但是我们绘制时候因为不知道怎么去做减法,会让这个形态变的复杂,绘制结果更多像是图案或者图形,而不是标识。我们使用黄金螺旋比例去切形态的时候要抓住动物的主体形态和特征,尽可能的抽象化简单化。

黄金螺旋线在logo中的应用

黄金螺旋比例用圆去切割很多人已经会了,但是最高级的就利用好黄金螺旋线。最近站酷很火的一个设计师DAINOGO,它的作品中就用到了黄金螺旋线,能用一个圆解决的绝对不用两个圆。我们在设计中如果有运用到弧线的地方可以考虑使用黄金螺旋线做为参考。

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

THE END
1.黄金分割比例是多少1、黄金分割比例是:0.618。 2、黄金分割是指将整体一分为二,较大部分与整体部分的比值等于较小部分与较大部分的比值,其比值约为0.618。这个比例被公认为是最能引起美感的比例,因此被称为黄金分割。 3、在古希腊时期,有一天毕达哥拉斯走在街上,在经过铁匠铺前他听到铁匠打铁的声音非常好听,于是驻足倾听。他发现http://m.qinpincha.com/cha-29193.html
2.黄金分割的解釋黄金分割的意思漢典“黄金分割”詞語的解釋條目黄金分割 拼音huáng jīn fēn gē 注音ㄏㄨㄤˊㄐㄧㄣㄈㄣㄍㄜ 詞語解釋網路解釋網友討論 黄金分割詞語解釋 解釋 ◎黃金分割huángjīn fēngē [golden section]一種線的劃分或一種幾何圖形的比例,其中較小度量與較大度量之比和較大度量與整體之比相等 https://www.zdic.net/hant/%E9%BB%84%E9%87%91%E5%88%86%E5%89%B2
3.黄金分割黄金分割词典释义黄金分割的意思,拼音汉语词典将一段线分割成两段,使小段与大段的比等于大段与整个线段的比,比例约为一比一点六一八。 详细解释 黄金分割[ huáng jīn fēn gē ] ⒈ 一种线的划分或一种几何图形的比例,其中较小度量与较大度量之比和较大度量与整体之比相等。 【英】golden section; 网络解释 黄金分割 (黄金比例) 黄金分割是指将整https://www.hancibao.com/ci/hFIrhQ0yZcUbiO
4.黄金分割意思黄金分割解释首页汉语词典“黄金分割”的意思解释 黄金分割的意思解释黄金分割【意思解释】把一条线段分成两部分,使其中一部分与全长的比等于另一部分与这部分的比,比值为=0.168…,这种分割称为黄金分割,因这种比例在造型上比较美观而得名。也叫中外比。相关词语 黄包车 黄口小儿 黄巾起义 黄帝 黄昏 黄檗 黄灿灿 黄猄 黄疸 https://m.zuowenku.net/cidian/91259.shtml
5.黄金分割是什么意思黄金分割汉语解释黄金分割的例句1. (名)把一条线段分成两部分,使其中一部分与全长的比等于另一部分与这部分的比,即此值为(√5-1)/2=0。618-,这种分割称为黄金分割,因这种比例在造型上比较悦目而得名。也叫中外比。 相关词 金黄 金分 黄金 割分 分金 分割 以上内容独家创作,受著作权保护,侵权必究 海词词典,十七年品牌把http://m.dict.cn/hanyu/search.php?q=%E9%BB%84%E9%87%91%E5%88%86%E5%89%B2
6.黄金分割是什么意思应该怎么翻译科学技术名词规范用词黄金分割 英文翻译golden section 所属学科建筑学>建筑设计 名词审定建筑园林城市规划名词审定委员会 见载刊物《建筑园林城市规划名词》 科学出版社 公布时间1996年 建筑设计 的上级学科 建筑学https://mkeji.911cha.com/d3Bwcw==.html
7.黄金分割的概念学术百科提供全面的“黄金分割的概念”相关文献(论文)下载,论文摘要免费查询,黄金分割的概念论文全文下载提供PDF格式文件。黄金分割的概念中文、英文词汇释义(解释),“黄金分割的概念”各类研究资料、调研报告等。https://wiki.cnki.com.cn/HotWord/1689012.htm
8.关于黄金分割的论文6篇(全文)1.黄金分割又称黄金律,是指事物各部分间一定的数学比例关系,即将整体一分为二,较大部分与较小部分之比等于整体与较大部分之比,其比值为1∶0.618或1.618∶1,即长段为全段的0.618。0.618被公认为最具有审美意义的比例数字。上述比例是最能引起人的美感的比例,因此被称为黄金分割。 https://www.99xueshu.com/w/filei6nq48e4.html
9.科技名词黄金分割goldensection科技博览科普博览资讯相关名词:黄金分割率 黄金分割点 图片来源:视觉中国 【延伸阅读】 黄金分割指将一个整体分为两部分,其中较大部分与整体部分的比值等于较小部分与较大部分的比值(比率约为1∶0.618或0.618∶1)。它是一种公认的美观、和谐的比例关系,故称黄金分割。通常用希腊字母φ表示。 http://www.agricoop.net/mobile/news/show.php?itemid=20710
10.人体黄金分割人体黄金分割(3) 人体黄金分割是指人体经脐部,下、上部量高之比,小腿与大腿长度之比,前臂与上臂之比,以及双肩与生殖器所组成的三角形等都符合黄金分割定律,即1:0.618的近似值。 中文名 人体黄金分割 主要应用学科 人体美学[1] 数值 1:0.618 其他应用学科 https://baike.sogou.com/v54002829.htm
11.奇妙的黄金分割把一条线段分割为两部分,使其中一部分与全长之比等于另一部分与这部分之比。其比值是一个无理数,取其前六位数字的近似值是0.618034。由于按此比例设计的造型十分美丽,因此称为黄金分割,也称为中外比。这是一个十分有趣的数字,我们以0.618来近似,通过简单的计算就可以发现: https://sx.xxu.edu.cn/info/1078/1654.htm
12.黄金分割》教学设计(精选8篇)“黄金分割”是北师大版数学八年级下第四章第二节的内容,学习黄金分割不仅仅是实现线段比例学习的要求,更是体现了数学的文化价值,体现黄金分割是数学与建筑学、美容医学和艺术等一些列学科的纽带,使学生认识到数学不是孤立的、干巴巴的数学,它是文化的一部分,它也促进了文化的发展.黄金分割的价值存在于两个方面:美https://www.360wenmi.com/f/filewe6wlhr9.html
13.什么是黄金分割线?直播高清在线观看PP视频PP视频为您提供什么是黄金分割线?直播高清视频在线观看,什么是黄金分割线?主要内容:了解策略,决胜股市https://v.pptv.com/show/ia5XJRq4UhMIlows.html
14.黄金分割计算器黄金分割计算器 - 计算缺失值以完成黄金分割。http://www.miniwebtool.com/zh-cn/golden-section-calculator/
15.黄金分割看大盘视频在线观看黄金分割看大盘 举报 益盟视频 关注27,707 信息 分享: 直播热点 下载APP领会员 直播中 小言儿~ 直播中 丽丽感谢家人宠爱 直播中 悠然~ 千帆直播 人气主播 直播0 凌凌一 准备好被惊艳到了吗? 点击观看 直播0 是长腿曦兮鸭 优点很多,哥哥来鉴定一下 点击观看 直播0 姗珊 姗姗来迟~ 点击观看 直播0 热舞https://www.56.com/u49/v_MTQwMDgxODcw.html
16.怎样计算黄金分割点在分割时.在长度为全长的约0.618处进行分割.就叫作黄金分割.这个分割点就叫做黄金分割点 342米*0.618= 211.356m 解析看不懂?免费查看同类题视频解析查看解答 更多答案(1) 相似问题 黄金分割点计算! 帮我算一道关于黄金分割点的题 黄金分割点的0.618是怎么算出来的? 特别推荐 热点考点 2022年高考真题试卷https://www.zybang.com/question/ed1607abad49f30f1aba151ee86a8f2c.html
17.黄金分割比例是几比几黄金分割线正确画法正五边形对角线连满后出现的所有三角形,都是黄金分割三角形。 黄金分割三角形有一个特殊性,所有的三角形都可以用四个与其本身全等的三角形来生成与其本身相似的三角形,但黄金分割三角形是唯一一种可以用5个而不是4个与其本身全等的三角形来生成与其本身相似的三角形的三角形。由于五角形的顶角是36度,这样也可以http://sx.ychedu.com/SXJA/QLJJA/611958.html
18.黄金分割科普视频科普视频:黄金分割 黄金分割https://m.tv.sohu.com/u/vw/24331103.shtml
19.黄金分割的用法及大盘个股实战举例一黄金分割比例黄金分割比例一、黄金分割比例 黄金分割比例是0.618,这是大自然的最美比例。同样,在股市中,黄金分割也无处不在,而且对于大盘点位、个股价格的预判十分有用。 股市常用的比例,除了0.618之外,还有其他常用比例:0.5和0.382(1减0.618)以及1.618(黄金分割倒数)、2.618(0.382倒数) https://xueqiu.com/3380486995/72414583
20.黄金分割点计算器下载黄金分割点计算器官方版下载[计算器]黄金分割点计算器官方版是一款高效、专业好用的数据计算软件。黄金分割点计算器官方版软件还采用了古老的数学计算方式,具有非常神奇的独特计算方式。黄金分割点计算器电脑版界面整洁,操作简单,只需输入上一波行情的高点和低点,即可算出黄金分割法的各个点位(也包括其它关键位置 比如1/3 、1/2、2/3等),计算非常方便https://mip.onlinedown.net/soft/10006465.htm