赞助商
立即赞助

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

UI设计3年前 (2021)更新 流光
2.9K 0 0

最近跟一大设计师流,他们给我的反馈是做设计的时不单单只是视上的美感,更需要方法论来支撑,样才更具有说服力。

黄金分割家应该早耳闻,作一设师,怎么利用黄金分割线使其构图加完呢?

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

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

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

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

「有条线条,如我们从切段,如左边是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设计手法,是最工整最严谨的设计手法。

我写了篇《如何学习Yoga Style?来看这篇全结!》,里有圆切法基础教程。

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

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

黄螺旋线在logo应用

黄螺旋比例用圆去切割很多已经会了,是最高级利用好黄螺旋线。最近站酷很个设计师 DAINOGO,它作品用到了黄螺旋线,能用个圆解决绝不用两个圆。我们在设计如有运用到弧线地可以考虑使用黄螺旋线做为参考。

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

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

总结

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

注作者的微信公众号:「水手哥设计」

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

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

Z Yuhan:上一篇文章《想掌握对话式交互?先来学习自然对话的基础知识!》介绍了自然对话的基础概念,学习了谷歌对于人类自然...
对话式UI
据 Statista 统计,2018年第一季度,Google Play Store 每天平均发布 6140 个应用。然而,77% 的用户在安装应用程序 72 小时...
游戏化设计
编者按:一个合格的 UI 按钮到底需要具备什么样的素质?在很多设计师眼里似乎并不是一个太大的问题的,但是在实际设计的时候...
ui设计
交互界面早已不再局限于我们平日所看到屏幕上的图形化元素了,以 Siri 为代表的 VUI(Voice User Interface),即语音交互界...
GUI
幽灵按钮和类似的空心元素,在诸多的设计趋势当中,还是显得颇为单薄的。它们的转化率看起来不够突出,和其他的固定形体相比...
幽灵按钮
传统意义上以人为中心的设计,过分简化了人和技术之间的关系。是时候采用更加细致的分类和方法来进行描述了。 在 FastCompan...
以人为中心
彻底的设计改版最好使用 A/B 测试来验证,而 MVT(多变量测试)则表示不同的 UI 元素之间是如何相互影响的,并支持对设计的渐...
A/B测试
@汉仪字库 :今天,人工智能将字体带入了一个新的世界!汉仪字库联手阿里巴巴打造的第一款AI字体产品阿里汉仪智能黑体(Beta...
中文字体