一个设计师征服数学的故事【UXRen译#278】

作者:Jinju Jang | 翻译: 凤亭 审校: 查丽娜

UXRen

我曾经很讨厌数学。

数学曾让我充满了挫败感。在我还年轻时总觉得,花太多的时间在解决数学问题上似乎是没有意义的,而你有这么多其他事情要去做!

UXRen

事实上,如果我对数学有更多的了解,我可以创造漂亮的概念!

当我还是个大学生时,我选了一门互动艺术课,在这门课上它教会我如何通过使用Processing进行编程来成为一名富有创造力的艺术家。在其中的一个案例中,我发现了一些绝妙的艺术作品,它们来自于Marius Watz(从那时起他就成了我的偶像)。

前方预警,即将出现大波高能美图。

Marius Watz <BValSys>2010

作为一名积极进取的大学生,我开始在根本不懂那些看起来有些可怕的概念(比如正弦函数sin(x),余弦函数cos(x))的情况下,尽最大的努力来复制这种风格。

咳咳,两倍循环

说实话,我对我的作品还是非常骄傲的。它看起来十分有趣,相比于用Illustrator或者Photoshop来做同样的设计,它真的节约了非常多的时间。然而我也发现,如果不懂几何学,我将不会有任何机会与Marius Watz比肩。

三角函数曾经是我的数学知识中最薄弱的部分。但那又怎样!如果可以创造出这么酷的东西,那么我愿意为学习数学献出所有心血。

UXRen

我开始重新学习数学。

我建议可以观看针对高中生的学习视频。

寻找学习的资源真的是太简单了,它简直到处都是!如果你觉得某位老师的声音让人昏昏欲睡或者内容难以理解,还有大把的课程可以供你选择。我是在YouTube上看一名韩国数学老师做的课程视频(仅仅是因为我对韩国课本的范围以及数学规范比较熟悉)。

虽然说不上有趣,但是它确实让我对理解Marius Watz做了些什么提供了很大的帮助。——他使用余弦函数来表现横轴的位置,用正弦函数来表示纵轴的位置。

他是把一个点放在一个圆上!

他使用三角函数变量而不是数字,这样他就可以按照圆的曲边轨迹来放置点了!

UXRen

我的数学初尝试

在我理解了基本的三角函数以后,我还没有十足的把握来把它应用到我的设计中。我决定开始做些尝试,哪怕它看起来又蠢又滑稽。正如你所看到的,它其实不符合审美。

http://share.framerjs.com/ejaybmwm4k95/

  • 我:哈哈,真是太丢脸了。*发布在Facebook的Framer群组里*
  • (几分钟后)
  • 我:什么鬼?大家居然喜欢它?
  • (几小时后)
  • 我:…大家居然觉得我数学很好,太扯了吧!

这是我第一次意识到,分享一些在你看来愚蠢的东西也是可以感染到大家的,让他们会心一笑或者咯咯傻笑。这鼓励我去创造更多的概念,以及去学习更多的几何基础知识。

UXRen

旋转的图形是应用三角函数的好地方

如果你不知道学习了三角函数以后可以用来做什么,那就做个旋转的加载状态吧。我用 Framer做了这个原型。

设计旋转的加载动画成为了我最喜欢做的一项工作。它比一个圆圈加载看起来更有意思,但做起来却不复杂。你只需要考虑三个事情。

  1. 这个旋转图形上需要几个点?(比如,三个点)
  2. 一圈上每个点需要在什么位置?(比如,每120度一个点)
  3. 在一次循环中,你希望每个点如何运动?(比如,向里和向外,放大和缩小)

https://framer.cloud/ZePNP/

http://share.framerjs.com/e9f5sfvmrapa/

我总共需要的就是上面三个步骤以及基础的三角函数知识,多简单啊!

UXRen

探索完圆形以后,我开始转向三角形了。

当你开始探索三角形/五角形/多边形的时候,工具很重要。有些工具你只要画两个点就可以帮你连成线。

在我看来,Framer并不算是其中一个工具。但非要用的话,可以先画出一个矩形,然后将其旋转成一个特定的角度,使看起来像是一条线。

刚开始,我基于三角形进行了很多图形形状方面的练习。

https://framer.cloud/rJ68Ono4g/

征服数学的感觉很爽!尤其是在条件有限的情况下,会感觉更嗨!

UXRen

“多边形”!接招吧!

从此时此刻开始,我开始告诉大家我热爱数学。我在我圣诞节的假期里学习多边形的相关知识然后开始设计相关的一些概念。这是至今为止我学习过的最迷人的科目。

https://framer.cloud/H1fWocJSg/

在我开始学习关于多边形的知识以前,多边形对我来说就像是一种饼干模具。我只要打开Photoshop,Illustrator或者Sketch然后选择多边形的形状工具就可以了。我可能把参数从5调整到12,就像你从烤箱下面放厨房用具的抽屉里选了一个不同的饼干模具一样。那就是我曾经对多边形所有了解了。

八边形的图形框架

而在学习了有关多边形的知识以后,我意识到多边形其实是三角形的优美组合结构,它们正等着我把它们融入其他的东西里!

钻研弧线

正如我前面所提及的,有些工具可以让你将A、B两点连成一条线。幸运的是,Processing就是这样一个优秀的软件!它也可以让你很轻松地画出弧线。它为数学延伸出富有创造力的一面。

用Processing来创造!

一些线稿

虽然如今Processing已经是种有些过时的语言,但是它最好的一点是你可以用pdf 的格式导出你的作品。这可以让你用其他的一些工具来为你的作品增添更多的细节,比如Illustrator和Photoshop。

上色后的版本

UXRen

额外的奖励——设计我的专属图形

了解三角函数、三角形和多边形意味着你可以通过组合它们绘制出你想要的任何东西。

同时,你也能不断地创造出令人捧腹的搞笑习作来把自己逗笑。

1988年奥运会的吉祥物

啊!学习几何知识以后还有个额外惊喜,我发现开始可以理解建筑的艺术了。

我对东京银座附近的建筑风格进行了解读

UXRen

我可以在工作中用到它吗?

如果你正在考虑学习某个你讨厌的的东西,你最好能够确定这个东西在你的工作中是足够实用的。

答案是肯定的!

从我的角度来看(我是一名手机app 设计师),我很惊讶居然有那么多app在它们的UI设计中用到了几何学!同时,你也可以很轻松地与开发同学分享你的知识,因为在我的领域里大部分(全部?)开发语言都支持数学化的表达方式。

我正在收集这方面的一些例子,请持续关注我后续的更新哦:)。


更多译文:

肯尼迪国际机场的导航设计案例
我从Google、Airbnb、TED等7家公司设计师那里学到了什么?
Logo vs 品牌,傻傻分不清楚
写给UX设计师的信息架构指南
游戏玩家的经典心理模型
全部270+篇译文>>
申请加入UXRen翻译组>>

uxren-fanyizu-00


翻译:凤亭   审校:查丽娜

作者:Jinju Jang

原文标题:《The story of a designer conquering mathematics.》

原文链接:https://medium.com/@arle13/a-story-of-a-designer-conquering-mathematics-d0fd4585f0ba

发布日期:2017年1月20日

版权声明:

  • 本文版权归:UXRen翻译组 所有;
  • 微信公众号转载说明:
    1)由于近期微信审理严格,若是该文章未在UXRen公众号上首发,请不要转载;
    2)公众号转载时,请在文章底部贴上UXRen公众号二维码。
  • 网站转载说明:
    1)文章标题必须保留“UXRen译”字样;
    2)转载文中必须保留:“UXRen翻译组”、“作者”、“译者”及“审校者”信息;
    3)转载文末必须保留本译文网页链接地址;
  • 如未遵照上述规则转载,视为侵权,UXRen社区保留随时追责的权利。
联系寶珠(微信baozhuYan)投稿/加入翻译组~

发表评论

电子邮件地址不会被公开。