以用户为中心的设计

这是UCDChina提前预览网页留下的存档,不包括作者可能更新过的内容。
推荐您进入文章源地址阅读和发布评论:http://wsd.tencent.com/20......_section.html

黄金分割——设计师的设计利器

作者:黄金体验  |   发布: (编辑)kent.zhu   |   时间:2011-02-18 00:16:59 文字大小:- +

设计师在设计的时候,总会遇到这样那样的问题,和人PK不断,修改不断。界面区域多大合适呢?ICON多大?颜色区间多少?为什么这么定义?什么是普世的美?很多UIer都说,50%靠设计,50%靠交流,那么在交流的时候如何说服别人呢?ADS定位、用户群、用户环境、调研都可以作为参考的依据,在这里再向大家介绍一下我们身边存在的黄金分割,希望作为设计的利器,或创作或PK。

一.植物

“黄金角度”生物学家发现植物种类繁多、叶子形态各异,但是叶子在茎上的排列却有着特殊的规律.我们从某种植物的顶端往下看,便会发现上下层相邻的两片叶子之间所构成的角约为137.50,如果每层叶子只画一片来表示,第一层和第二层的相邻两叶之间的角度约为137.50,以后二层到三层、三层到四层、四层到五层……两叶之间都成这个角度,这个角度对叶子的通风和采光最为有利.这叶子之间的137.50角与黄金数又有什么联系呢?我们知道,一周为3600,137.50: =137.50:222.50≈0.618.也就是说,各种植物叶子的生长规律中自然隐藏着黄金数。

向日葵花有89个花辫,55个朝一方,34个朝向另一方

枫叶

喷嚏麦

1.1.2.3.5.8.13.21.34.55.89.144…

后面的数除以前面的树,越往后越趋向于黄金比例。运用到设计当中,譬如一个齿轮的图标,齿的个数可以参考这组数列。PK词:这是自然的法则。

二.动物

由这组数列引出斐波那契曲线,斐波纳契是在解一道关于兔子繁殖的问题时,得出了这个数列。假定你有一雄一雌一对刚出生的兔子,它们在长到一个月大小时开始交配,在第二月结束时,雌兔子产下另一对兔子,过了一个月后它们也开始繁殖,如此这般持续下去。每只雌兔在开始繁殖时每月都产下一对兔子,假定没有兔子死亡,在一年后总共会有多少对兔子? •  在一月底,最初的一对兔子交配,但是还只有1对兔子;在二月底,雌兔产下一对兔子,共有2对兔子;在三月底,最老的雌兔产下第二对兔子,共有3对兔子;在四月底,最老的雌兔产下第三对兔子,两个月前生的雌兔产下一对兔子,共有5对兔子;……如此这般计算下去,兔子对数分别是:1, 1, 2, 3, 5, 8, 13, 21, 34, 55,89, 144, …看出规律了吗? •从第3个数目开始,每个数目都是前面两个数目之和。

下面再简单介绍下斐波那契,了解下周边总是可以唬人的。

        意大利数学家,12、13世纪欧洲数学界的代表人物。生于比萨,早年跟随经商的父亲到北非的布日伊(今阿尔及利亚东部的小港口贝贾亚),在那里受教育。以后到埃及、叙利亚、希腊、西西里、法国等地游历,熟习了不同国度在商业上的算术体系,他认为使用印度-阿拉伯数码最方便。1200年左右回到比萨,潜心写作。  他的书保存下来的共有5种。最重要的是《算盘书》(1202年完成,1228年修订),算盘并不单指罗马算盘或沙盘,实际是指一般的计算。全书共15章,1~7章系统介绍了印度数码与记数制度,以及整数、分数的各种计算方法,结果用弃九法来验算。还列有乘法表、素数表和因子表等若干数表。8~11章是商业上的计算题,如物价、利润、利息、货币换算等,反映了中世纪地中海地区的广泛商业交往。

黄金分割的算法:1.如果线段AB被点C分成线段AC和BC,且 ,那么称线段AB被点C黄金分割,点C叫做线段AB的黄金分割点,AC与AB的比叫做黄金比。通过计算可知黄金比为 。2.黄金矩形:一个矩形如果两边之比具有黄金比值,则称这种矩形为黄金矩形.它是由一个正方形和另一个小黄金矩形组成。事实上,如图(4),如果设大黄金矩形的两边为a、b,则 ,分出一个正方形后,所余小矩形的两边分别为(b-a)和a,它们的比为(b-a):a .这表明小的矩形也是黄金矩形。

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点即为黄金分割点。

鹦鹉螺的曲线黄金分割构图也体现在网页构图上,如titter的IPad版。

三.人物

1.面部比例。相貌对不起观众的人各有千秋,美丽的人却有很多相似的地方。奥黛丽赫本有这标准的三平五眼,作为公众的美女,我们看看他的脸部有那些黄金分割吧。

再以一个普通人凤姐为例,对比看看,在画卡通形象的时候可以夸大面部各部分的黄金比例。

 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的比值。

思考:如果小明的身高是1.75米,假如肚脐在0.97米位置,增高垫用多高能使肚脐达到人体的黄金分割点?答案最下面公布。

3.另外,和人体有关的黄金分割还有:一年12个月,12的0.618是7.4,7、8月份人体血液中的淋巴细胞最多,它可参与抵御细菌的侵袭,所以这时是人体抵抗力最强的时期。一天中气温最低的时间是凌晨2时气温最高是在14时,它们之间的黄金分割点为9.4,上午9,10时的气温是一天中最适宜的,这时人的头脑最清楚,办事效率最高。中医的三个主要健身穴位枣百会、涌泉和劳宫的位置也符合这一分割律:百会位于前发际至后发际的0.618处,涌泉位于足掌部的0.618处,劳宫位于手掌的0.618处。

4.DNA的比例。最有意味的是,在人的生命程序DNA 分子中,也包含着“黄金分割比”。它的每个双螺旋结构中都是由长 34个埃与宽21个埃之比组成的,当然34和21是斐波那契系列中的数字,它们的比率为1.6190476,非常接近黄金分割的1.6180339。这是否说明黄金分割律是比DNA中的遗传密码更基本的东西?因为承载DNA的结构——双螺旋结构——也遵循黄金分割律。

四.建筑雕塑

埃菲尔铁塔是一座纪念性建筑物,为了纪念法国大革命100周年,巴黎决定在1889年举办国际博览会,并要造一座永久性纪念建筑物。埃菲尔铁塔在1889年初建时,高度已达300米,是当时全世界最高的建筑物,直到1930年,仍是最高的(1959年在埃菲铁塔顶部增设广播天线,使塔高增加到320米。) 埃菲尔铁塔在距离地面57米,115米和276米处,各有一个平台,计算表明:(300-115)  300=0.617。所得比值与黄金比0.618相差甚微,由此可见,埃菲尔铁塔第二层平台的位置,非常接近于全塔高度的黄金分割点,从图中可以看出,第二层平台正是埃菲尔铁塔张开的四条腿开始收拢的转折点。埃及金字塔的高和底部边长是黄金比例。

雕塑维纳斯的身体各部分也符合黄金比例。

五.绘画摄影

蒙娜丽莎的微笑

达·芬奇的“美丽密码”共有六大“法则”,其中包括脸的宽度必须是鼻宽的4倍;前额的宽度、鼻子的长度以及下颌骨长度必须都相等;研究人员吃惊地发现,“六大法则”中的5个都与现代人的审美标准奇迹般地吻合,只有一项关于“鼻子与嘴的比例”的法则与现代略有出入。小巧的嘴型是文艺复兴时期的审美标准,嘴的宽度是鼻宽的1.5倍被认为最完美。与之不同的是,研究发现,现代人普遍认为嘴宽与鼻宽的比例达到1.6的更美。达·芬奇的“美丽密码”要求如此严苛,以至于大多数普通人都不能全部符合其标准。因此研究人员也表示:“尽管这一研究结果显示脸部器官的大小、组合方式以及位置不同,都会对个人魅力产生影响。但一个人的美丽是一个复杂的组合,其中还涉及到其他许多因素。”

摄影的九宫构图法

       九宫构图顾名思议,将画面平均九等分,而四个交叉点侧是黄金点,拍摄时将主体放在图中四个交叉点中的任何一个点上,而不是放在画面的中心或接近中心的位置上.而四个点中,一般认为,右上方的点,是最理想的位置。

六.其他

1.美剧中的黄金分割过场

•盛开的花瓣中隐藏着蜻蜓的翅膀,花心是费马螺线组成,而螺线的排列与黄金分割和斐波那契数列相关。

•青蛙的背后有希腊文第21个字母PHI(Φ),这个字母用来代表黄金分割,1.6180339887。 

•角的形状就是斐波纳契螺线,而仔细观察可以看到角上的数字,就是黄金分割数值Phi-Φ——1.6180

•海马的身上图形是Fibonacci Spiral斐波纳契螺线,同时,螺线里面包含的线代表了黄金分割的比例。海马的尾部是Fibonacci Spiral,一些图片中还包括了L-histidine 组氨酸和L-proline脯氨酸的结构图。

2.手机界面

•Iphone宫格界面,每个图标都是57*57,图标宽度与图标顶部到下一排图标的高度的比例是黄金比例。

•天语手机传统的九宫格形式,对屏幕也进行了视觉上的黄金分割。

•WM6.5的蜂窝系统,六边形一方面最省空间,一方面也接近于黄金比例的5边型。

  

关于黄金分割的总结就告一段落了,一些例子可以灵活的运用到设计当中,希望对看到这篇文章的同学们不管是设计或者PK都有所帮助。

欢迎讨论,谢谢:)

PS:小明的答案1.75*0.618-0.97=0.11米

更多
打印  |  相关话题:黄金分割在设计中的应用   |  类别:设计思想  |  源地址

UCDChina的书

《UCD火花集2》封面
UCDChina编著,定价35元
从卓越网购买 从当当网购买

《UCD火花集》封面
UCDChina编著,定价25元
从卓越网购买 从当当网购买

《应需而变——设计的力量》封面
UCDChina团队成员JunChen译,定价29元
从卓越网购买 从当当网购买

《网页设计解析》封面
UCDChina团队成员周陟著,定价62元
从卓越网购买 从当当网购买

《赢在用户》封面
UCDChina团队成员Angela译,定价29元
从卓越网购买 从当当网购买

《用户体验的要素》封面
UCDChina团队成员Angela译,定价25元
从卓越网购买 从当当网购买