西湖鱼

探索几何学设计

西湖鱼 经验 3211浏览

几何学是一门研究形的科学,以人的视觉思维为主导,培养人的观察能力、空间想象能力和洞察力。它本是数学领域的一个分支,与设计看似没有什么交集。本文将会从理性的角度,剖析设计背后的几何原理,用平实的语言表达晦涩难懂的数学,用数学阐释设计。

 

蜂窝猜想

蜜蜂被誉为动物界最勤劳的物种,殊不知,它们也是这世上最懂得“偷懒”的动物。四世纪古希腊数学家佩波斯提出,人们所见到的、截面呈六边形的蜂窝,是蜜蜂采用最少量的蜂蜡建造成的。当时的数学发展还很落后,这一猜想1600年以来,无人能证明。

直到20世纪末,美国数学家哈勒斯在考虑了每一个蜂窝周边是曲线时,无论是曲线向外突,还是向内凹,都证明了由许多正六边形组成的图形周长最小。周长最小,意味着筑巢时采用的蜂蜡也最少。这个证明被他放在了互联网上,证明过程有19页之长,直到2001年,他对证明又进行了补充使之完善。

此后,蜂窝猜想变成了蜂窝定理:以同等面积的图形对一个平面进行分隔,周长为最小的几何形状是蜂窝状的正六边形。而蜜蜂筑巢的这一行为,也被誉为“最有效劳动的代表”。

 

艺术细菌——粘液菌

我们都知道,两点之间,线段最短,但如果很多点呢?怎样连接才是最有效率的做法?这就引出了我们第二位主角——粘液菌。这里称它为细菌不是很严谨,它是一种有机生命体,一些特征与真菌类似,其他特征与原生生物类似。它们没有大脑,在腐烂的木头、湿地上蔓延,摄取细菌和腐烂的蔬菜。(敲黑板!)没有大脑意味着什么,意味着它们不能思考,所有行为仅受本能支配,科研者却对这种无脑生物产生了浓厚的兴趣。

 

研究者拿粘液菌做了一个实验。实验中,他们将粘液菌最喜欢的食物——燕麦片放置于琼脂板上,并标明东京周围各个城市节点,在东京这个节点上注入粘液菌。然后观察它们的扩散方式。

 

可以看到,实验开始后,群菌开始向四周蔓延开来,8小时后,形成了许许多多的脉络,这是它们输送营养的管道。随着实验的进行,大部分的脉络开始退化消失,只留下几条清晰的管道。最后,它们连接了所有节点,只留下最清晰有效的线路。

实验结果人们发现,这些脉络和东京现今的城市交通规划有很多相似之处,有些甚至要更合理。

这些菌群没有大脑,但它们为了生存,只能寻找路途最短的管道为母体输送营养。正是这种求生的本能,给我们的交通规划者们带来了巨大灵感。在设计城市公路时,优先需要考虑的是主干道的效率,这个道路越短意味着效率也最高。在这一方面,人类和细菌达成了共识,我们都在寻找效率最高的设计方案。如果我们在设计之初,考虑了让粘液菌也参与进来,会不会比现在的设计规划更便捷、更有效率。

 

黑胶唱片

说起黑胶,很多人并不感到陌生。热衷于模拟录音的音乐发烧友,收藏黑胶是他们表达对音乐热爱的一种“奢侈”的方式。黑胶相比于现代的CD,有着不可替代的优势——漂亮的唱盘、高贵的唱片机以及所传达出的独特的情感。

想要了解黑胶艺术,仅靠听是不够的,它背后的发声原理同样值得我们去一探究竟。

唱片表面有着一圈圈细致的拉丝工艺,这可不仅仅是为了美观。放大看,其实是呈螺旋线状的声槽,音频信号就记录在这里。声槽由外到内有四个部分组成,顺序为:导入槽、声槽、过度槽、导出槽和终止槽。唱针由导入槽引入声槽,乐段之间有若干秒的无声的过度槽,过度槽螺距也较宽,用肉眼可以分辩。声槽的末端与导出槽相接,乐曲结束后唱针由导出槽引至终止槽。最后终止槽是一个闭环设计,它可以让唱针停留原地。

这一过程过程中,声音依靠唱针读取(即磨擦)唱盘的沟痕两侧,通过磨擦所产生的震动借由针杆传回唱头,继而产生磁电转换输出电流;再将这些电流转换成电压形式,输入到前级,再经过等化线路还原,继续进入信号放大部分,最后经由喇叭播放出音乐。

这里我们可以思考一个简单的问题,为什么传统意义上的黑胶唱片通常采用圆盘的设计?

  • 相同运动轨迹直径内,圆的面积最大,存储信息量最大
  • 圆在静止和工作时面积相同,不占空间
  • 同心圆设计,便于旋转和拿取

 

永不松动的螺母

中国的高铁取得了令世界刮目相看的成绩,然而,小小的螺母却不得不采用进口的。因为高铁运营时,高速行驶的列车和铁轨不断接触,形成的震动非常大,一般的螺丝在这种震动中会被震松震飞,导致严重的交通事故。不想被震飞,就需要螺丝和螺母严丝合缝、永不松动才行。

这个要求看起来很简单,但是要满足它并不容易。大家想,世界上做螺丝螺母的企业可以说是多如牛毛,但是能生产这种永不松动螺母的企业有几家呢?只有一家,来自日本的哈德洛克工业株式会社。

让我们挖掘一下它的设计思路。原理很简单,在螺丝和螺母之间,打入一个梯形的楔子,可以起到牢固的效果。如果将螺母一分为二,再把其中一个螺母当作楔子使用,就可以起到加固作用。

 

顺着思路,继续往下。左边是一分为二的螺母,上方我们叫凹螺母,采用了一个同心圆的设计,对应左图蓝色的部分。而下方我们叫它凸螺母,它采用了偏心圆的设计,对应左图红色的部分。可以看到,红色圆环的内外圆心并不在一条直线上。当我们把两个螺母拧到一起,也就是两个圆环重叠时,势必会产生错位。而螺母想要拧紧,就必须克服这种错位带来的巨大阻力。这种阻力,就是它永不松动的原因。

 

可能这样说还不够直观,我们把它们的关系想象成红酒瓶和软木塞,尺寸匹配的软木塞可以刚好打进瓶口里,并且轻松地拔出来。如果换成更大尺寸的软木塞(相当于错位的螺母),就需要用更大的力气才能打进去,一旦打进去,再想拔出来也同样需要很大的力量。这种阻力带来的自紧力让它们彼此间很难松动,这就是几何的力量。

有的人可能会有疑惑,人家把这种螺母的原理和结构都明白地告诉你了,为什么还说能够生产这种螺母的只此一家。因为实际的生产还需要特殊的经验和技术。没有千万次试错的精神,就是琢磨透了原理,也无法仿制出同样的螺母。日本的很多企业都有这种怎样学也学不会的独一无二的技术。’

 

斐波那契与兔子数列

讨论几何学设计,一定会提到的人就是斐波那契。这位意大利数学家提出过这样一道有趣的数学题:

问:兔子在出生两个月后,就具备繁殖能力,一对兔子每个月能生出一对小兔子。如果所有兔子都不死,那么一年以后可以繁殖多少对兔子?

起初,我们拥有一对兔子。

过了一个月,这对兔子还不具备繁殖能力,所以还是一对。

又过了一个月,这对兔子生了一对小兔子,现在有两对。

再过去一个月,老兔子继续生小兔子,而小兔子还不具备繁殖能力,所以有3对。

……以此类推。

 

 

一年后,我们一共有了233对兔子

我们发现,这个数列有一个共同的规律,两项之和可以得到后一项,这对任何一项都是成立的。最后,在数列最前面补一个0。

 

 

我们就得到了这样的一个数列,这个数列被称作斐波那契数列也叫黄金数列。大家可能都想到了黄金分割比、黄金螺旋线。那他们是如何产生联系的?让我们继续往下看。

取数列的末两位,求144和233的比值,我们得到的结果是0.618025751……

随着斐波那契数列项数的增加,前一项与后一项之比将越来越逼近黄金分割比(φ),这也是为什么这个数列被称为黄金数列的原因。

在数学中,黄金分割比(φ)≈0.618033988749894848204586834…

它是一个小数点后无限不循环的无理数

如果我们把这一个个数,用正方形代替,会得到这样一个几何图形。当我们以正方形的边长为半径画圆,便会得出这条著名的黄金螺旋线

 

这条线不是玄学,大家可能都知道,自然界很多生物上都能找到这根螺旋线,比如鹦鹉螺、向日葵等等,但未必很了解它们为什么会长成这样。

 

斐波那契与向日葵

 

植物懂得斐波那契吗?应该并非如此,它们只是按照自然的规律才进化成这样。人们发现向日葵会按照斐波那契弧线去排列种子。这似乎是植物排列种子的“最优化方式”。它能使所有种子具有差不多的大小却又疏密得当,不至于在圆心处挤了太多的种子而在圆周处却又稀稀拉拉。但这个猜测,数学不能证明。

当然,数学无法解开的问题,交给计算机去做就好啦。

 

 

这是计算机模拟向日葵的仿真实验,实验中,我们把发散角设置为圆的黄金分割比(φ),使它的排列方式呈现斐波那契螺旋线。而这里的每一个点代表了向日葵等大的果实(瓜子)。

大家可以看到,这里的每一个点代表了向日葵等大的果实,我们从这种排列方式中,很容易找出一条条的螺旋线。有心的同学可以数一下,红色顺时针的螺旋线,一共出现了21条,逆时针的螺旋线,一共出现了34条。完美契合了斐波那契数列的第九位和第十位。

 

 

当我们把发散角放大或是缩小一点点,圆点间都会出现间隙,从而导致不能最大程度利用空间。这个实验向我们证明了,以斐波那契弧线排列的向日葵种子,是它们最有效利用空间的方式。

自然界懂得运用螺旋线的植物还有很多,向日葵只是其中之一,这里不再一一列举。

 

 

黄金分割骗局

黄金分割比(φ)的价值在许多地方得到了证实,他像神话一样屹立在美学神坛上。但它真的适用于所有的场合吗,我们说也不完全是的。

早在03年,索尼就已经推出了16:9的显像管电视,当时售价达到一万元。随后市场上涌现出一批16:9,16:10的显示屏,与此同时,商家打着更符合黄金比例、更符合人体工程学设计的广告,大肆宣传宽屏的好处,逐渐淘汰了4:3的屏幕。

问题来了,既然16:10比16:9更接近黄金分割比(φ),为什么没有成为主流?

想要解释这个问题,需要我们先解一道数学题。

 

这里有两块同样15英寸的屏幕,一块16:9,一块16:10,这两块屏幕等大吗?

是否等大我说了不算,得数据说了算。

 

我们可以通过测量或是勾股定理,得出他们的长宽。左边的屏幕长13英寸,宽7.3英寸。而右边的屏幕长12.7英寸,宽7.9英寸。知道了长宽,就可以求他们的面积。左边蓝色的屏幕我们得到的面积是96平方英寸,右边红色的屏幕我们得到的面积是101平方英寸。

大家可以看到,同样“尺寸”的电视,16:9比16:10足足少了5%的有效面积,对于液晶电视刚起步时,这5%的成本节省让商家尝到了甜头。越来越多的商家愿意推出16:9的电视,市场也接纳了这种“性价比”更高的比例。随着越来越多的电影、节目源采用16:9的比例,直到最后国际组织统一了节目源,让16:10的屏幕慢慢被推向了市场的边缘。但仍然存在一些良心商家在坚持这个完美比例,比方说苹果推出的macbook,它的屏幕是标准的16:10。

 

到这里,大家可以理解了,几何和我们身边的设计息息相关,几何的应用不仅在于自然界和工业社会,在我们平面领域,也有很多经典的用例。

 

那些LOGO中你不知道的小秘密

百事可乐的标识经常被拿来当作几何学设计的经典案例,与之类似的还有被神话的苹果logo,丰田的车标,它们都“严格”遵循了尺规或几何的逻辑去设计,但事实是否真的如此。

 

LOGO中的每一笔线条看似都有了合理的解释,但我们仍然发现有这样红色的一笔在它的VI体系中没有做出过任何说明。

 

 

这是一条曲率奇特的曲线,有可能经过复杂的测量,也可能只是设计师“任性”的一笔。它到底为什么会长成这样我们无从知晓,但这一笔,造就了这个LOGO与众不同。

 

 

这是保罗·兰德为乔布斯设计的NeXT。当时乔布斯告诉他,其下一台电脑将会是一个完美至极的“四方体”。因此,保罗依他的要求打造了这样一个完美的“四方体”。

乍一看好像没毛病,的确是一个四四方方的立方体。然而通常情况下,一个完美的正方体在这种倾斜的视角下,正方形表面受到拉伸,直角势必会变成钝角和锐角。

 

 

然而保罗设计的NeXT立方体,上方的面竟然是成90°的正方形。事实上保罗设计的立方体并不是一个完美的“正立方体”。当然,这并没有影响乔布斯为保罗的设计买单。

与之类似的还有Google图标G中隐藏的小秘密。我们以为眼睛已经看透了,其实仍然存在我们不知道的小细节。可以看到,图中蓝色部分和红色部分的收尾处,都违背了原本的几何走势。这可能是为了平衡G字右侧的拐点易造成视觉“偏斜”的缺陷,也可能是其他的原因打破了平衡。但恰恰是这灵动的一笔,铸造了优秀的设计。

 

设计需要理性,但终归是感性的。

设计不是数学,不是所有的作品都可以用尺规去创作。正是这些无法解释的点睛之笔,让设计这件事充满了神秘的色彩和魅力,给作品赋予了独一无二的价值。但即使如此,我们还是乐意用一些几何图形去辅助创作,这也是人的一种本能。

 

人生来寻找意义,设计也是如此

我们会给自己的作品加上圆圈和虚线、用一些简单的数学概念去解释我们的设计,即使我们对数学还不够了解。

对于身边很多约定俗成的几何体,我们可能从没有在意过。类似蜂窝、雪花晶体、六边形螺母这些在意识中习以为常的物体,我们不会去探究它为什么会是这样。但当我们去挖掘几何背后的意义,会发现设计不仅仅是我们看的外表。在优秀的设计背后,还有很多我们不曾注意的原理和逻辑。

以上这些是我以一个理科生的视角,看到的设计的原貌,以及一些自以为是的理解,分享给大家,谢谢大家。

 

原文地址:网易UEDC(公众号)

作者:周星棋

201705041493939771

 

转载请注明:学UI网 » 探索几何学设计

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.xueui.cn ”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.xueui.cn” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.xueui.cn” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.xueui.cn” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@xueui.cn,也可以找各个群的管理】

 
你可能喜欢的:
你的设计有依据吗?详解用户体验设计中的规律与逻辑你的设计有依据吗?详解用户体验设计中的规律与逻辑
不可不看的2018UI设计趋势不可不看的2018UI设计趋势
用「8点网格」来规范你的设计用「8点网格」来规范你的设计
房产类APP「链家」原型分享房产类APP「链家」原型分享
【滴滴体验设计研究·实践篇】从 iPhone X 适配说起【滴滴体验设计研究·实践篇】从 iPhone X 适配说起
20个优秀手机界面扁平化设计,让你一秒看懂扁平化20个优秀手机界面扁平化设计,让你一秒看懂扁平化
安卓UI (三) — 设计规范安卓UI (三) — 设计规范
为什么选择XXHDPI做设计呢?为什么选择XXHDPI做设计呢?
实战干货:UI设计师与Web攻城狮协同工作必知的8个知识点实战干货:UI设计师与Web攻城狮协同工作必知的8个知识点
帮你搞懂 px,ppi;dot,dpi;sp,dp;pt !帮你搞懂 px,ppi;dot,dpi;sp,dp;pt !