苹果logo-斐波那契数列-黄金分割

1.Apple Logo

Apple Logo

从上图的辅助线分解,我们可以发现苹果logo的设计正是采用半径成斐波那契数列(1,1,2,3,5,8,13)的圆切割而成
其实,Apple苹果 的 logo 被咬一口的痕迹设计并不是严格符合黄金分割比例的,只是非常接近。但这样的偏差,是故意的。用数学公式和标准几何图形来设计图标,能够赋予图标一种神性的美感。
当然大多数设计都会有故意的细微偏差,为的是避免刻板形象,同时还能营造一种无法被破解的神秘感。

2.黄金分割

  • 从公元前20世纪到16世纪的史前巨石柱记载的关于1:1.618比例的黄金矩形的应用开始到现在,人们对黄金分割的爱从来就没有改变过,五边形和五角星也同样具有黄金分割比例,因为五角星内三角形的边长比例是1:1.618。在海胆和雪花里也能找到相同的五边形/五角形关系。

随着数字的增大,斐波那契数列两数间的比值越来越接近黄金分割率

人体也具有同样的完美比例,人体的高度与伸展开的手臂形成了一个正方形将人体围住,而手和脚正好落在以肚脐为圆心的圆上,肚脐位于黄金分割点上,这在文艺复兴时期的艺术家莱昂纳多·达芬奇和丢勒的《完美的比例》《人体比例四书》也都有所体现。

人体比例四书
  • 黄金分割是用实证法对美的图形做出的总结。也就是在历史长河中,总结出来的人类的喜好规律。这种长宽比带给大多数人最舒服的体验是毋庸置疑的。也就是总结出来以后,再运用这个原理。
黄金分割的贝壳曲线
  • 画一个图形,在大多数情况下,不会从画黄金分割辅助线开始。你得先有图形,然后在一次一次的修改中,运用黄金分割线去辅助你修改图形,最后,得到一个在视觉上最舒服的图形。而实际上,美学素养高的人,在绘制图形的时候,已经潜移默化得融入了黄金分割这种美学。
黄金分割辅助线

3.黄金分割衍生的-纸张比例

  • 人类从黄金分割率中提炼出的√2矩形也具有许多特殊的性质,能被无限的分割成更小的等比矩形,其长宽比也相当接近黄金分割率(1.414与1.618)
√2矩形
  • 正是由于这个属性,√2矩形成为欧洲DIN(德国工业标准)纸张尺寸体系的基础。也就是我们最常见的纸张尺寸。这样裁切出来的纸张不仅容易生产,而且不会有一点浪费。
德国工业标准纸张尺寸体系
  • 除了√2矩形以外,由其衍生出来的√3、√4、√5矩形也同样具备可以被横向和纵向切割的属性。√3矩形也是正六边形的构成基础,这个形状也可以在自然界中的很多方面找到,例如雪花晶体与蜂巢的形状。
雪花与蜂巢

4.网页设计中的应用

1.画布大小

在网页设计当中,设计师最常用到的是960网格系统,它可以说是具有里程碑式或者具有代表意义的系统,设计之初主要针对的是1024×768的屏幕。虽然现在早已是1200以上像素的天下了,但960网格系统也早已从最初的理性设计的工具变成了网站设计的布局思维。以1024×768的屏幕为例,用户在浏览网站是,视线热区可覆盖大概80%的屏幕,此部分空间尺寸大致为974×650,在浏览器左右预留一些空间,并且为方便响应式设计,我们的可设计区域就成为了现在最常用到的960×650像素,这个尺寸也同样接近黄金分割的尺寸。

2.分栏

用理性的网格将你的页面分栏,这样可以很好的将页面中得图片与文字进行区隔,段落与段落间进行区隔。考虑到黄金分割的原理与响应式页面的可操作性,我们将页面分为12,16或24栏,栏数依据你要设计的网页体量而定。

12栏

16栏

24栏

3.字符大小

横向则依据你所使用的最小字符高度而定,一般使用12pt—16pt的文字,每行60—80字符是比较合理的范围。这样,我们就得到了一张理性,简单,有效的网格,使用网格设计可使网页的连贯性与秩序性增强,内容与内容不会相互影响,减少内容取舍的复杂度,并且很大程度上增加网站代码的复用率。

4.屏幕的第一视觉点

人的视线落点是需要引导的,通过科学理性的方式可快速找到用户的视线范围,把你最想让用户看到的内容放在这个范围内,可以起到绝佳的效果与回馈。同时,也可以帮助你梳理每个元素之间的关系。我们用这个思路再看那些牛逼的网站的时候,才会了解,原来这才是他们这些网站之所以牛逼的原因。比如下面的这几张苹果的官网:

苹果官网视觉点

iPhone6官网不仅用到了网格系统,同时也应用黄金分割率确定文字、图片与连接的间距,让整个页面看起来简洁且合理。


黄金分割率确定文字、图片与连接的间距

理想化页面设计

产品经理和设计师不仅仅需要是审美出众的人,更应该是理性的魔术师,当别人按照你构想的顺序去浏览你的作品,或是在你的作品中看到你思考的过程,是不是仅仅比他们说“挺好看的”要强的多。所以,如果你是一个初学者,对产品设计不知从何下手,或者你的设计已经很不错,但是遇到了瓶颈,那么,通过这些几何学与网格的使用一定会让你的设计更进一步。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,634评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,951评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,427评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,770评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,835评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,799评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,768评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,544评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,979评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,271评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,427评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,121评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,756评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,375评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,579评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,410评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,315评论 2 352