导言:设计师在设计的时候,总会遇到这样那样的问题,和人PK不断,修改不断。界面区域多大合适呢?Icon多大?颜色区间多少?为什么这么定义?什么是普世的美?很多UI设计师都说,50%靠设计,50%靠交流,那么在交流的时候如何说服别人呢?ADS定位、用户群、用户环境、调研都可以作为参考的依据,在这里再向大家介绍一下我们身边存在的黄金分割,希望作为设计的利器,或创作或PK。
一、植物
“黄金角度”生物学家发现植物种类繁多、叶子形态各异,但是叶子在茎上的排列却有着特殊的规律。我们从某种植物的顶端往下看,便会发现上下层相邻的两片叶子之间所构成的角约为137.5°,如果每层叶子只画一片来表示,第一层和第二层的相邻两叶之间的角度约为137.5°,以后二层到三层、三层到四层、四层到五层……两叶之间都成这个角度,这个角度对叶子的通风和采光最为有利。这叶子之间的137.5°角与黄金数又有什么联系呢?我们知道,一周为360°,360°-137.50°=222.5°,137.5:222.5≈0.618。也就是说,各种植物叶子的生长规律中自然隐藏着黄金数。(图01)
图01
向日葵花有89个花辫,55个朝一方,34个朝向另一方。(图02)
图02
枫叶。(图03)
图03
喷嚏麦。(图04)
图04
1、1、2、3、5、8、13、21、34、55、89、144……后面的数除以前面的树,越往后越趋向于黄金比例。运用到设计当中,譬如一个齿轮的图标,齿的个数可以参考这组数列。PK词:这是自然的法则。#p#e#
二、动物
由这组数列引出斐波那契曲线,斐波纳契是在解一道关于兔子繁殖的问题时,得出了这个数列。假定你有一雄一雌一对刚出生的兔子,它们在长到一个月大小时开始交配,在第二月结束时,雌兔子产下另一对兔子,过了一个月后它们也开始繁殖,如此这般持续下去。每只雌兔在开始繁殖时每月都产下一对兔子,假定没有兔子活亡,在一年后总共会有多少对兔子?在一月底,最初的一对兔子交配,但是还只有1对兔子;在二月底,雌兔产下一对兔子,共有2对兔子;在三月底,最老的雌兔产下第二对兔子,共有3对兔子;在四月底,最老的雌兔产下第三对兔子,两个月前生的雌兔产下一对兔子,共有5对兔子;……如此这般计算下去,兔子对数分别是:1, 1, 2, 3, 5, 8, 13, 21, 34, 55,89, 144 ……看出规律了吗?从第3个数目开始,每个数目都是前面两个数目之和。(图05)
图05
下面再简单介绍下斐波那契,了解下周边总是可以唬人的。
意大利数学家,12、13世纪欧洲数学界的代表人物。生于比萨,早年跟随经商的父亲到北非的布日伊(今阿尔及利亚东部的小港口贝贾亚),在那里受教育。以后到埃及、叙利亚、希腊、西西里、法国等地游历,熟习了不同国度在商业上的算术体系,他认为使用印度-阿拉伯数码最方便。1200年左右回到比萨,潜心写作。 他的书保存下来的共有5种。最重要的是《算盘书》(1202年完成,1228年修订),算盘并不单指罗马算盘或沙盘,实际是指一般的计算。全书共15 章,1~7章系统介绍了印度数码与记数制度,以及整数、分数的各种计算方法,结果用弃九法来验算。还列有乘法表、素数表和因子表等若干数表。8~11章是商业上的计算题,如物价、利润、利息、货币换算等,反映了中世纪地中海地区的广泛商业交往。(图06)
图06
黄金分割的算法:
1.如果线段AB被点C分成线段AC和BC,且BC/AB=AC/BC ,那么称线段AB被点C黄金分割,点C叫做线段AB的黄金分割点,AC与AB的比叫做黄金比。通过计算可知黄金比为。
2.黄金矩形:一个矩形如果两边之比具有黄金比值,则称这种矩形为黄金矩形。它是由一个正方形和另一个小黄金矩形组成。事实上,如(图07),如果设大黄金矩形的两边为a、b,则 。这表明小的矩形也是黄金矩形。
图07
3.如何得到线段的黄金分割点C呢?这里介绍一下操作方法:首先画一个参考Y轴(纵轴),如图所示。A点位于Y轴上,水平画出AB直线,长度任意。以A为中心,AB为半径,画一个圆,得到与Y轴相交的X点。即AX=AB。取AX的中心点Z,即AZ=ZX。连接ZB,并以Z为中心,ZB为半径绘制一个圆,得到与Y轴相交点Y(下方相交点)。即ZB=ZY。最后,以A为中心点,AY为半径绘制一个圆,得到与AB相交的C点,此时AC=AY。C点即为黄金分割点。(图08、09)
图08
图09
鹦鹉螺的曲线黄金分割构图也体现在网页构图上,如Twitter的iPad版。(图10)
图10#p#e#
三、人物
1.面部比例
相貌对不起观众的人各有千秋,美丽的人却有很多相似的地方。奥黛丽赫本有这标准的三平五眼,作为公众的美女,我们看看他的脸部有那些黄金分割吧。(图11)
图11
再以一个普通人凤姐为例,对比看看,在画卡通形象的时候可以夸大面部各部分的黄金比例。(图12)
图12
2.身体比例
肚脐:头顶-足底之分割点;(2)咽喉:头顶-肚脐之分割点;(3)、(4)膝关节:肚脐-足底之分割点;(5)、(6)肘关节:肩关节到中指尖之分割点;(7)、(8)乳头:躯干乳头纵轴上这分割点;(9)眉间点:发际到颏底间距上1/3与中下2/3之分割点;(10)鼻下点:发际到下巴底间距下 1/3与上中2/3之分割点;(11)唇珠点:鼻底到下巴底间距上1/3与中下2/3之分割点;(12)颏唇沟正路点:鼻底到颏底间距下1/3与上中2 /3之分割点;(13)左口角点:口裂水平线左1/3与右2/3之分割点;(14)右口角点:口裂水平线右1/3与左2/3之分割点。(15)在人体中三分之二是水;在22.5 ℃的环境中人体的新陈代谢处于最佳状态,而22.5 ℃是人体正常体温36.5 ℃的0.618倍;(16)心脏中心位于胸腔的黄金分割点上;(17)整个脊柱的0.618是胸与腰的分界处,也就是第12胸椎处,从肩至中指指 尖的 0.618是肘关节,从肘关节至中指指尖的0.618为腕关节,从膝关节至足尖的0.618是踝关节。(18)姿态优美,身材苗条的时装模特和翩翩起舞的舞蹈演员,他们的腿和身材的比例也近似于0.618的比值。(图13、14)
图13
图14
思考:如果小明的身高是1.75米,假如肚脐在0.97米位置,增高垫用多高能使肚脐达到人体的黄金分割点?答案最下面公布。(图15)
图15#p#e#
3.其他和人体有关的黄金分割
一年12个月,12的0.618是7.4,7、8月份人体血液中的淋巴细胞最多,它可参与抵御细菌的侵袭,所以这时是人体抵抗力最强的时期。一天中气温最低的时间是凌晨2时气温最高是在14时,它们之间的黄金分割点为9.4,上午9、10时的气温是一天中最适宜的,这时人的头脑最清楚,办事效率最高。中医的三个主要健身穴位枣百会、涌泉和劳宫的位置也符合这一分割律:百会位于前发际至后发际的0.618处,涌泉位于足掌部的0.618处,劳宫位于手掌的0.618处。(图16)
图16
4.DNA的比例
最有意味的是,在人的生命程序DNA 分子中,也包含着“黄金分割比”。它的每个双螺旋结构中都是由长 34个埃与宽21个埃之比组成的,当然34和21是斐波那契系列中的数字,它们的比率为1.6190476,非常接近黄金分割的1.6180339。这是否说明黄金分割律是比DNA中的遗传密码更基本的东西?因为承载DNA的结构——双螺旋结构——也遵循黄金分割律。(图17)
图17
四、建筑雕塑
埃菲尔铁塔是一座纪念性建筑物,为了纪念法国大革命100周年,巴黎决定在1889年举办国际博览会,并要造一座永久性纪念建筑物。埃菲尔铁塔在 1889年初建时,高度已达300米,是当时全世界最高的建筑物,直到1930年,仍是最高的(1959年在埃菲铁塔顶部增设广播天线,使塔高增加到 320米。) 埃菲尔铁塔在距离地面57米,115米和276米处,各有一个平台,计算表明:(300-115) 300=0.617。所得比值与黄金比0.618相差甚微,由此可见,埃菲尔铁塔第二层平台的位置,非常接近于全塔高度的黄金分割点,从图中可以看出,第二层平台正是埃菲尔铁塔张开的四条腿开始收拢的转折点。埃及金字塔的高和底部边长是黄金比例。(图18)
图18
雕塑维纳斯的身体各部分也符合黄金比例。(图19)
图19#p#e#
五、绘画摄影
1.蒙娜丽莎的微笑
达•芬奇的“美丽密码”共有六大“法则”,其中包括脸的宽度必须是鼻宽的4倍;前额的宽度、鼻子的长度以及下颌骨长度必须都相等;研究人员吃惊地发现,“六大法则”中的5个都与现代人的审美标准奇迹般地吻合,只有一项关于“鼻子与嘴的比例”的法则与现代略有出入。小巧的嘴型是文艺复兴时期的审美标准,嘴的宽度是鼻宽的1.5倍被认为最完美。与之不同的是,研究发现,现代人普遍认为嘴宽与鼻宽的比例达到1.6的更美。达•芬奇的“美丽密码”要求如此严苛,以至于大多数普通人都不能全部符合其标准。因此研究人员也表示:“尽管这一研究结果显示脸部器官的大小、组合方式以及位置不同,都会对个人魅力产生影响。但一个人的美丽是一个复杂的组合,其中还涉及到其他许多因素。”(图20)
图20
2.摄影的九宫构图法
九宫构图顾名思议,将画面平均九等分,而四个交叉点侧是黄金点,拍摄时将主体放在图中四个交叉点中的任何一个点上,而不是放在画面的中心或接近中心的位置上。而四个点中,一般认为,右上方的点,是最理想的位置。(图21)
图21
六、其他
1.美剧中的黄金分割过场
盛开的花瓣中隐藏着蜻蜓的翅膀,花心是费马螺线组成,而螺线的排列与黄金分割和斐波那契数列相关。
青蛙的背后有希腊文第21个字母PHI(Φ),这个字母用来代表黄金分割,1.6180339887。
角的形状就是斐波纳契螺线,而仔细观察可以看到角上的数字,就是黄金分割数值Phi-Ö——1.6180
海马的身上图形是Fibonacci Spiral斐波纳契螺线,同时,螺线里面包含的线代表了黄金分割的比例。海马的尾部是Fibonacci Spiral,一些图片中还包括了L-histidine 组氨酸和L-proline脯氨酸的结构图。(图22)
图22
2.手机界面
iPhone宫格界面,每个图标都是57*57,图标宽度与图标顶部到下一排图标的高度的比例是黄金比例。
天语手机传统的九宫格形式,对屏幕也进行了视觉上的黄金分割。
WM6.5的蜂窝系统,六边形一方面最省空间,一方面也接近于黄金比例的5边型。
图23
关于黄金分割的总结就告一段落了,一些例子可以灵活的运用到设计当中,希望对看到这篇文章的同学们不管是设计或者PK都有所帮助。
PS:小明的答案(0.97+x)/(1.75+x)=0.618,x≈0.29(米)。
上一篇 色彩构成设计作品欣赏
相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题,火星帮你解答学习游戏开发班可以帮助游戏爱好者从零基础成为游戏开发专家,掌握全面的游戏开发技能。
火星时代教育为您提供专业的界面设计实战班,在实践中掌握界面设计的核心技巧和最新趋势,成为优秀的UI设计师。
了解UI交互设计培训的最佳选择,比较不同培训机构的优势和特点。
火星时代教育为您推荐专业的学影视后期培训机构,提供高质量的培训内容及资深导师指导,助您成为优秀的影视后期剪辑师或合成师。
火星时代教育是一家专注于交互设计培训的机构,为学员提供专业的交互设计培训课程,并帮助他们成为优秀的交互设计师。
本文章将介绍关于UE5智慧城市专业学习的重要性和火星时代教育的资讯。
1. 打开微信扫一扫,扫描左侧二维码
2. 添加老师微信,马上领取免费课程资源
同学您好!