设计师应该跟原研哉大师学习什么？

水手哥

上海/UI设计师/5年前/1765浏览

版权

设计师应该跟原研哉大师学习什么？

水手哥

想替原研哉大师说句话：“设计创新并不是创造所谓的意义，而是创造新的细节负载了原来那些伟大的意义”。

小米LOGO品牌升级热度退去，世界将还原事物本来的面貌。雷军回应小米LOGO：”大师让我看7天就习惯了“。在和大师作品交流的这七天里，我努力尽量多的捕捉到更多的设计细节，短短七天交流中，我被大师的作品成功“洗脑”了。

设计师应该学习他……理解他……最后被他“洗脑”，和我一样最后深爱他。

设计师一年当中能看到真正好的作品并不多，特别是有思想高度而且能完美落地的设计更少之又少。感谢雷军邀请原研哉大师参与这次的品牌升级，不然也不会欣赏到大师的细节之美。当我们还不具备设计高度或讲故事的能力，那就从设计的技法、细节、理论进行学习，在作品专业的基础上再进行讲故事会更让人信服。设计主题或概念如何完美的落地才是我们设计师学习的当务之急。

下面我们先从设计的本体去了解小米Logo升级，即小米Logo升级后的样式，带着学习的目的，重新认识作品中的色彩、图形、圆角、编排、视觉平衡，尝试去理解或解读大师的作品。当我们对表现层有一定认知后，可以尝试去解读大师对生命形态的理解，最重要的是对东方哲学的理解。

关于我自己的理解我会在文章中标注为个人看法，可能理解是错的，毕竟原大师的设计体系在五维，而我们可能在三维，为什么这么说？短短七天的研究学习中每天都有新收获，当然我也会把每一天学习和感悟到的收获标注出来。

关于东方哲学，我最喜欢的是老子的《道德经》，老子的《道德经》在全球的发行量仅次于《圣经》，受白岩松老师启发接触到了《道德经》，曾仕强教授解读老子《道德经》，陆陆续续也听了三四遍，上善若水、大象无形、厚德载物、无为等，老子喜欢柔的东西比如水、婴儿、女人，老子始终指导我们要反着看事物，老子认为无比有有用，更多的东方哲学会在和原大师的作品沟通交流中，会一点点一点点的显山露水。

小米新LOGO

对于小米新LOGO这次品牌升级，你认为变化大吗？怎么去判断变化的大小？通过格式塔心理学进行分离，然后进行新旧LOGO对比。对于正常人会分为橙色背景和白色的MI，但是对于专业的设计师来说，需要从色彩和形状两个维度去分离，就可以分为背景的橙色、MI的白色、MI的形状、超椭圆的形状。背景的橙色、MI的白色都没变，MI的新旧对比是微调，矩形圆角到超椭圆，光形状其实也算小改。最近雷军在直播间的回答中也提到了品牌升级要小改。

那为什么人们都会说小米LOGO从方变成了圆。按照视觉对肉眼的吸引程度，应该是色彩大于字重（粗细）大于字号（大小），所谓万花丛中一点红也是这个道理，先看到颜色再看到形状。

按照视觉度对小米新LOGO进行排序依次是：「背景的橙色」大于「MI的白色」大于「MI的形状」大于「超椭圆的形状」。超椭圆的形状变化最大但视觉度是最弱的，当背景的橙色与超椭圆的形状合并成一个元素时，整个的视觉度就变成了第一视觉。所以人们会顺其自然的感受到那个第一视觉，就是方变了圆。

MI的视觉平衡

可以尝试观看新旧LOGO中”MI”的视觉平衡，当你盯住老LOGO观看五秒以上时，在看新LOGO五秒以上时，通过对比可以发现老”MI”是左重右轻，不平衡的，再看新”MI”时发现平衡了。看了新LOGO后，再看老”MI”的“M”中间一竖感觉也是不平衡的，这就是原大师处理细节的能力。

如果你来处理老“MI”的视觉平衡你会怎么处理？人类的视觉看东西左小右大会优于左大右小。在2011 年 9 月人民邮电出版社出版的《认知与设计：理解 UI 设计准则》中，将格式塔与设计原则进行结合，衍生出了当前流行的版本：临近性、相似性、连续性、封闭性、对称性、主体 / 背景、共同命运。

早期的格式塔心理学理论的完形法则只有四个：相近、相似、封闭、简单。从格式塔简单法则出发，我们可以看一下下面两个图形哪个更简单？

很明显视觉上左边比右边更加简单。就是左小右大优于左大右小，那么对于MI这个图形本来就左大右小，我们如何处理它的视觉平衡呢？那我们来欣赏下汉字「陪」和「部」这两个字，「陪」和「部」是左右结构完全相反的汉字，但其自身是有区别的，「陪」字是属于左小右大，「部」字属于左大右小，不同知名字库公司的字体是如何设计的？如图字库字体中「部」字都变大了右边的耳朵旁，就是遵循左小右大的原则。按照这个思路新”MI”应该增加右边“I”的粗度就可以解决其视觉平衡了。

对于我们设计师有一个很好的解决方案已经相当不错了，但是原大师却没有采用，为什么？可能不能体现东方哲学（个人看法）。我们通过对新老“MI”的绘制对比发现，新老“MI”的右侧“I”的粗细是一致的，我用字母“b”来表示。“a”的宽度大于“b”的宽度大于“c”的宽度大于“d”的宽度大于“e”的宽度。新老“MI”的“I”的宽度是一样大的。

那么原大师运用了什么东方哲学来解决“MI”的视觉平衡的？那就是“四两拨千斤”（东方哲学01），“四两拨千斤”之说，最早见于王宗岳《太极拳论》一文中，中华民族是一个崇尚智慧的民族，常以小胜大，以弱胜强。

“四两拨千斤”从物理学角度解释就是杠杆原理，在长臂端施加一个较小的力，在支点另一端的短臂上，就能够得到一个较大的力。新旧“MI”的左右两边的重量基本没变，就“M”的中间一竖变粗了，但是整体宽度往右偏移了，意味着短臂更短了，而“MI”的整个宽度变宽了，其实是增加了“I”的长臂，从而达到了视觉平衡。

“MI”的“M”是横细竖粗，但是老“M”转折处是拥堵的，从上往下看是小大小，转折处大了；而新的“M”转折处变得通畅了，从上往下看是小大，视觉平衡上做了调整，也更简洁了。

人的视觉中心是偏上方的，受重力影响有向下的力，所以视觉中心向上就可以达到一种平衡。新“MI”的形状偏扁方形，四个矩形让“MI”会更稳重，所以在扁方形中视觉重心偏低时更稳重。有点像足球运动员，重心低于水平中心线。

但是如果你改变外部形状，下面两个图形那个视觉重心会更舒服呢，很明显第一个会更舒服一点，这就像模特一样，视觉重心高一点会更好看。

反着看事物（东方哲学02），“MI”反过来看就是心少一点，小米公司的宗旨是为了让用户能省一点心。大师还是挺懂中国国情的，在提案时能明显看出右边的设计都是陪衬品，重要的好的放在了左边。

新老“MI”反过来也做了视觉平衡的处理，老“MI”的“M”的负空间是不均衡的，新“MI”的“M”的负空间就舒服了很多，真正做到正着也好看，反着也好看。这里也体现了无比有有用（东方哲学03），我们住的房子墙面、门属于有的范畴，而正是房子里无的空间给予我们人们进行居住。玻璃杯是属于有的范畴，玻璃杯中的空心是无的，可以用来盛水。古人云：“计白当黑”，在字体图形创意中，我们不能光看到实体的东西，而要更多关注负空间，就是字谷、字怀、字间距、行高、留白等，无的空间才能更好的诠释美。

其实我们发现品牌色没变，“MI”的图形微调，但是“MI”里面的细节是最多最多的，包括里面的逻辑关系。我们的国家日趋的强大，但是整体设计水准并没有及时跟上，未来对于设计细节的拿捏和品牌精神的传达应该是设计师的一项核心竞争力。

“超椭圆”数学之美

用数学做设计，在正方形与正圆形之间，存在着无数的形状。小米新LOGO的设计，运用“超椭圆”公式，调整变量N，达到视觉的最佳动态平衡。

在正方形与正圆形之间，存在着无数的形状，苹果iOS7的图标圆角，运用了羊角曲线进行绘制而成。以下是iOS7的图标圆角的绘制过程。

超椭圆是小米品牌升级最大的争议点，从小白的视角就是方变成了圆，其实是把超椭圆理解成了矩形圆角，就是AI、Sketch、Figma软件自带的圆角工具，一拉就变成了200万，或者说前端工程师一行代码就实现了矩形圆角。这里的矩形圆角和超椭圆还是有很大区别的。

从专业人士的视角就是超椭圆曾经在国内流行过，准确的说是在UI的主题图标设计行业流行过，再次看到这个概念会感觉缺乏创意和新鲜感。在界面设计还没有变成扁平化的2011年到2014年之间，小米、OPPO、Vivo、魅族、华为等国内手机厂商，会联合设计平台进行手机主题的设计，当时还是主打拟物化、中国风等，国内手机主题设计师尝试了从圆到方到超椭圆的创新，而且那时候超椭圆的概念就很流行。

基本都是在PS软件里面完成的，新建一个圆角矩形，CtrL+T，点击「在自由变换和变形模式之间切换」，变形选择「膨胀」，弯曲的值选择96.0%，然后再次CtrL+T，旋转45度，一个好看的超椭圆就制作完成了。第一个是小白认知的矩形圆角，第三个是大师说的超椭圆。

无论是超椭圆曾经流行过，还是超椭圆的制作比较简单，我们都不应该否认大师的创新，首先设计本来就是旧元素的重新组合，其次做为我们普通的设计师就真的敢这样设计吗？当你接到这个项目时，你能想到这样设计吗？你会发现原有LOGO存在的视觉平衡问题吗？你会如何调整设计的细节呢？更多的设计细节可以接着往下看。

超椭圆|x|^n+|y|^n=1这个数学公式作为美术生，大学没学过高等数学，很难理解。但是通过大师的演讲和展示方式我可以通过自己的方式去理解，就是把一个圆切成N等份，接着找到与圆的交点分别画出水平和垂直的两条线，最后调整圆的四个锚点的手柄，让手柄与水平或垂直的线重合，最终就形成了圆角各异的超椭圆。

大师n=3的这个超椭圆遵循了先小后大再小的趋势，无论从上到下还是从左到右，这很好的体现了生命的成长，人出生到长大成人时间比较短，退休到老去时间也比较短，比较多的生命周期是青年和中年。这个数学公式绘制的超随圆很符合大师对生命形态的诠释。想想设计师的成长也是如此，小白到初级设计师是缓慢的，初级到高级到资深是进步很大的，从资深再上一个台阶又会变得缓慢了。（第二天）

“3”的东方哲学

当大师说选择N等于3时，超椭圆是最美观的。第一天的感觉就是尊重客观事实，在很多种的方案比对中，N=3是最符合美学的。

随着思考的深入，感觉数字“3”并没有什么悬乎的地方。东方人的美学观点是对称，在比例中可以抽象成等分，就是二等分，对称其实就是二等分加镜像。而在西方人的美学观点是黄金比例，简化一点就是三分等，多用于摄影、界面、影视作品编排使用。与黄金比例对等的是斐波那契数列。斐波那契数列（FibonacciSequence）数列是这样一个数列：1、1、2、3、5、8、13、21、34、55、89等。其实从比例的角度看东方美学加西方美学就可以衍生成无限的数字。

东方美学对称是1：1，西方美学是1:1:1，其实是2/3，黄金比。两个相结合就有了二等分、三等分、四等分（两个二等分）、五等分（二等分+三等分）、六等分（两个三等分）等。基于此就形成了基本的网格系统，网格系统需要考虑实际的场景，需要上下左右留点间距好看，等分的内容与内容之间留点间距好看，就形成了页边距、天头、地脚、间距。慢慢基于网格系统衍生出栅格系统来解决Web界面响应式的问题。（第二天）扯远了，当我欣赏了大师Alive生命感设计概念时，“科技越是进化就越接近生命的形态。”我突然感觉我格局小了，大师在思考生命的形态，我却在思考比例关系。（第四天）

生命的三种形态

丰子恺在《我与弘一法师》中说道：“我以为人的生活，可以分作三层：第一，物质生活，第二，精神生活，第三，灵魂生活。弘一法师都得以实现，从而让自己的人生完满无缺，没有遗憾。

物质生活指的是衣食住行，精神生活指的是学术文艺，灵魂生活指的是宗教。物质生活的人，追求锦衣玉食，尊荣富贵，孝子慈孙。这种人在社会中占绝大多数。精神生活的人，专心学术文艺，将全部精力用于学问研究和文艺创作。这样的人，世间也很多，即所谓的“知识分子”“学者”“艺术家”。

还有一种人，他们做人很认真，满足了“物质欲”不够，满足了“精神欲”也不够，必须探求人生的究竟。他们以为财产子孙都是身外之物，学术文艺都是暂时的美景，连自己的身体都是虚幻的存在。他们不肯做本能的奴隶，必须追究灵魂的来源、宇宙的根本，这才能满足他们的“人生欲”。这就是宗教徒。

世间不过就这三种人。弘一法师的一生，是从最底层的物质生活一步步升华到较高层次的精神生活，再由精神生活一步步升华到最高层的灵魂生活的。

无独有偶，西方心理学家亚伯拉罕·马斯洛在《人类激励理论》中讲，人类需求像阶梯一样从低到高按层次分为五种，分别是：生理需求、安全需求、社交需求、尊重需求和自我实现需求。不同的说法但道理相通，掰开揉碎了再重新捏合，和人生三境界异曲同工。

数学公式的由来

超椭圆(superellipse)，也称为拉梅曲线(Lamé curve) 。由法国数学家加布里埃尔·拉梅(Gabriel Lamé)发明。这种超椭圆是用数学软件来进行绘制的，设计师运用的制图软件暂时无法完成。

通过更改n的值，可以调整每个角的凹凸度，当n小于1时，就可以得到一个凹进行的图形，如n=0.3，n=0.5。随之n的不断增加，会得到一个类似超椭圆的图形，小米这次选择了超椭圆n=3。

法国数学家加布里埃尔·拉梅，将椭圆的方程式（Lamé曲线）进行了概括，加布里埃尔·拉梅在许多设计中都使用了Lamé曲线。他使用通过反复试验发现的n = 2.5并将其命名为超椭圆。许多人认为使用“e”（等于2,718）作为“n”是更好，更和谐的视觉选择。由于“e”是自然对数的底，因此该结果通常被称为自然超椭圆。

超椭圆计算器和绘图仪：www.procato.com/superellipse/

超椭圆计算器打开默认宽度1800毫米，宽度1200毫米啊，默认值n=e（2.718）。

其实第一眼看还是n=2.718会更好看一点，但是时间看久了会感觉有点稍微圆润了一点，可能是有对比吧。当过几天看还是n=3会给人理性的感觉。那么大师选择n=3，感觉也会有更深远的含义了，而不是单单基于美学。（第七天）这里的n=3应该指代了生命的三种形态。（个人看法）

小米橙，科技银

新LOGO，色彩新搭档，新的小米品牌识别系统，品牌色为小米橙，象征生命力和探索活力。同时启用银灰色与黑色作为辅佐色，用于产品和高科技相关场景。

小米橙的HEX色值是#FF6901，H（色相）S（饱和度）B（明度）的色值分别是25度、100%、100%。小米橙黑白去色后就变成了科技银，科技银H（色相）S（饱和度）B（明度）的色值分别是0度、0%、48%。明度48%的灰无限接近黑与白的二等分50%的灰。

基本度量5度

小米橙的色相25度，超椭圆是将圆切割了72份，每份的角度为5度，色相也可以从360度切割72份，这样小米橙和超椭圆就基于5度作为基本度量，两者形成了关联，小米橙去色自动变成了科技银，科技银基于二等分的东方美学就衍生出了黑色。一切都变得有秩序感。（第五天）

我的名字叫xiaomi

新增“xiaomi”字母LOGO，将在高科技的智能设备上出现，帮助大家识别属于xiaomi系列的高品质智能产品。

为什么用拼音“xiaomi”替代了汉字“小米”，因为小米要造车，小米要进军高端产品，小米想成为国际化的品牌，那么汉字“小米”做为高端品牌能够很好的推广呢？中国市场可以，那国际市场呢？汉字的字体结构还是不够简洁，而利用拼音“xiaomi”结合西文字体的视觉平衡，会让小米品牌更加简洁。（个人看法）

整体看下“xiaomi”这几个字母，有特色的字母是x、a、o、m，我们也会从这几个字母进行逐个分析。

x

字母x是如何处理视觉平衡的，整体是内小外大，里面的块面会更小，外面的块面会更大。字母x的斜线是错开的，右边整体上提了。

波根多夫错觉

波根多夫错觉指一条直线被部分遮盖后，分隔出的两条直线看起来不在一条直线上的现象。如图我们视觉看到左侧和右侧上方是一条直线的，其实真实的直线是右侧下面的线，所以为了适当弥补人类的视错觉需要把右侧的线上提。

a

字母“a”正常都会有个小尾巴，大师把字母“a”的尾巴去掉是考虑到图形的简洁性，字母“a”的灵感来源于字体”Jiho”，字重Medium。字母“a”的字谷（a的封闭的留白空间）有点像米粒、微笑、牙齿。个人比较喜欢，感觉比Helvetica的”a“的字谷更好看。

o与m

字母“o”与“m”是变成椭圆的形态大概有两个原因，第一是和“MI”的圆角进行统一，第二是考虑到与“a”、“o”、“m”的间距，这样的负空间更小。

xiaomi

字母“xiaomi”的间距调整的还是很舒服的。每个字母的字间距差异不是很大。

字母“xiaomi”也运用了大量二等分的思想，“x”对角等分，“a”水平等分，”m”垂直等分，整体看上去更加简洁。字母“xiaomi”反过来看图形也是很漂亮的。

但“MI”的形状和“xiaomi”并没有对齐，对齐了反而变得不舒服了。因为它们不是依靠顶部或底部对齐的，而是按照重心对齐，上面讲到“MI”重心在中心线的下方，在字母“xiaomi”画一条中心线，就能找到”MI”的重心。字母”a”、“o”、“m”为了视觉平衡上下也都微微超出水平线。

更灵动、更生动

Motion LOGO，品牌新表情，新LOGO不仅在外形上从方到圆，更开放了LOGO摆放的位置。

同时增加了Motion LOGO设计，以浮游感的姿态出现，就像有生命一样。不同环境下，动态也随之不同。Motion LOGO的动效路径是从超椭圆的四个圆角的线条中提取的，看苹果图标的圆角曲率像极了界面动效中缓入缓出的缓动函数，先慢再快最后慢。大师让形状色彩有了关联，动和静也有关联，因果循环，无时无刻不在体现“道生一，一生二，二生三，三生万物”的东方哲学。

Alive生命感设计

这是小米新LOGO的设计概念，也是原研哉对科技与生命关系的新思考。

全新的“Alive”设计理念，赋予小米品牌充满生命感的视觉形象。新LOGO灵活生动的出现在不同场景下，有如生命的律动，始终保持视觉的和谐和自我的个性。

“科技越是进化就越接近生命的形态。”说的太好了，那么什么是生命的形态呢？为什么当我第二天思考超椭圆数学公式中的N=3是可能只是比例关系时，大师已经把生命形态这个概念运用到了实际设计中了。（第四天）

关系

梁濑溟老先生说过人的一生要处理好三种关系，而且顺序不能颠倒。人与物的关系：我们在年轻时都会有一个共同的目标，那就是为了物质去拼夺资源；人与人的关系：当物质基础稍加稳定的时候，我们开始把目光转向维系和开发更多的人际关系；人与自己内心的关系：当一切归结为审视自己心灵的时候，我们说人才真正知道自己所追求的东西。

在人生的任何一个阶段，人们都是在做着人与物质，人与人，人与内心的斗争。你怎样看待人与物质的关系，你怎样处理人与人的关系，你又怎样处理自己与内心的反思和挣扎，决定了你的生活幸福与否。

这三项是随着人们年龄的增长和生活环境的改变在发生变化的，从单纯到复杂，从对到错，或从错到对。因为这个世界本是没有对错了，对错的评判标准只能在你的内心和在现行的法律中寻找答案。但无论怎样，人的心里要有一个标准，那就是快乐。橙色会给人甜美快乐的感觉。

小米环保袋Alive!

选用杜邦 Tyvek®可循环材质，原研哉亲自设计了小米环保袋。与世界和谐共处，这是小米新标识应用的首发之作，希望更多人感受到新标识背后的“Alive”生命感设计，理解小米要用科技让生活更美好的理念！可水洗的纸、轻薄耐撕、100%可再生。

雷军在发布会说：“为了体现这个Logo的应用，原研哉帮我们设计了一个小产品，这个产品特别特别小，但设计的很有味道，很能体现原大师的设计理念。我们来看一下，小米环保袋，它是第一个应用了新Logo的产品。就是这么一个小小的环保袋，原研哉改了很多回，对Logo的大小、位置反复的打样验证，最后这个环保袋充分的体现了原研哉Alive的设计理念。”

对于设计师我们需要学习小米环保袋的编排设计，发布会上提到原大师改了很多回，重点说了对Logo的大小、位置来反复打样调整，大小的调整是需要看纸袋装东西时给人的视觉感受，需要反复打样验证，所以我们重点研究一下小米LOGO在环保袋的摆放位置，而且我坚信原大师肯定会运用网格系统进行编排设计，带着这种理念去研究并发现它。

如图很遗憾尝试失败，无论是二等分还是三等分，并没有有新的发现。（第三天）

因为坚信大师肯定会运用网格系统，编排设计不用网格系统真说不过去，有思考过是不是运用了像超椭圆的渐进式网格。当第四天再次思考要不要把袋子一起算进去找一找网格系统，果然有新的发现。

将小米环保袋竖向四次等分、横向五次等分就找到了小米LOGO的重心点。《道德经》第四十二章“道生一，一生二，二生三，三生万物”。其实就将道分为了四个层级，与四次等分有异曲同工之妙。八卦也是如此，无极生有极，有极就是太极，太极生两仪（即阴阳），两仪生四象（即少阳，太阳，少阴，太阴），四象演八卦，同样分了四个层级。为什么竖向四次等分，横向却五次等分呢？如果横向和竖向都四次等分不更完美吗？（个人看法）

按照上面等分切割其实可以找到四个点，为什么会是右下角的那个点，首先上面两个点是负空间，不存在的。下面两个点按照格式塔简单原理，「左小右大」优于「左大右小」。所以最优的点是右下角的点。其实看图中对比一下，你也会感觉到右边的环保袋编排会更舒服一点。

最高兴的不是原大师运用东方哲学二等分，找到了东方哲学的那个点。而是我发现了更有意思的东西，当把矩形对角线相连，基于另一个顶点建立垂直相交的点，这个点就是黄金螺旋线的最佳视觉点，了解更多黄金分割、黄金螺旋线的最佳视觉点，可以查看我四年前写的文章《黄金分割在界面设计中的运用》。环保袋宽除以长等于0.6377，也无限接近黄金比0.618。

黄金螺旋线的最佳视觉点的周围可以有四个点，按理说左上角的那个点是横向四等分与竖向四等分的交点，大师为什么会选择左下角的那个点呢？想的大一点，问题就变成了东方哲学与西方哲学的关系？会有什么关系呢？从水平的角度看东方哲学是先于西方哲学的，从垂直角度看东方哲学要低于西方哲学的。

上善若水（东方哲学04）出自于《道德经》，水善利万物而不争，而且待在几乎没人愿意待的地方，从不抱怨，水是最柔软的，谁能战胜水，抽到断水水更流。如果水反过来成为武器的话，水淹七军，什么是强，什么是弱。为什么海和江是最辽阔的，因为它比其他人低呀，这又是水的品性，越低越包容，因此变得辽阔。这才是上善若水背后的含义，也是东方哲学的伟大之处。雷军说原大师反复调整了LOGO的位置和大小，其实原大师在思考东方哲学与西方哲学的关系，基于美学其实这三个点（左上、左下、黄金最佳视觉点）都还不错，但是能很好的理清楚东西方哲学关系的人才能称之为大师。（个人看法）

大象无形（东方哲学05），简单的说就是那些美好的形象或事物，往往都是看不见摸不着的，但是他们一直都存在，生活中太多的人只关注到了利益和物质，各大媒体都在讨论小米花了200万把方变成了圆，却很难看到品牌升级后的美感和舒适度，但是好的东西往往都隐藏在无形之中。回归到设计的本质去发现挖掘作品的细节之美，这样才能让设计师的人生之路走的更远，境界和格局更高。

在《日式平面美学》书中的第32页也谈到了大道至简，大象无形。日本平面设计大师们是真的懂东方哲学的，顿时陷入反思，我们需要学习的东西真的太多太多了，我们离知行合一的路还很遥远。