官方宣扬词中还涌现了「Alive」「生命感」「超椭圆」「数学之美」等,不但普通吃瓜群众听不懂,专业设计师群中也引起了强烈不适,不少设计师直呼我上我也行,乃至连前端同学都看不下去了,表示样式中增加一个 border 圆角命令不就行了吗。
当然小米的这波品牌升级,营销意义占比更大,我们本日抛开 LOGO 背后的品牌营销和理念,从纯视觉角度,解析下这枚 LOGO 有什么不同之处。
舒适的视觉比例
直不雅观来看最大的变革是从方变圆,为了达到给科技授予生命感的理念,原老爷子通过图形数学运算在方跟圆之间找到了最适宜的圆角比例,以此作为基底,但这只是第一层。
连续曲率之美
细心一点的设计师会创造,圆角采取的是连续曲率,这种圆角可不是在 AI 中可以随便拉出来的,这里大略做下曲率的科普,两条线的连接办法有很多种,这些连接办法对付传统工业设计是非常主要的,分为 G0-G4,四个等级,为了易懂可以大略理解:
G0——点连续:只要两个点碰到就可以;
G1——相切连续:没有棱角,所有点之间都是相切关系;
G2——曲率连续:平滑过渡,曲率是连续变革的;
G3——曲率变革率连续:更平滑,曲率的变革率也是连续的;
G4——曲率变革率的变革率连续:极致丝滑。。(到这里就看不出了)
由于人类总是喜好连续、流畅的事物,这也符合形式美法则。而在平面视觉的运用印象里是由苹果 iOS7 最先引领的,下图中可以看到传统软件中的圆角,从连续上来说只是 G1,苹果目测 G3 起步吧,实在 G1-G2 之间就能看出明显的差别的,SKETCH 中现在也已经支持了「平滑圆角」这个功能,如果对着高连续的图形看一段韶光后,你会创造普通圆角切实其实是太难熬痛苦了,这种征象在一些小角度图形身上更加明显,实在是一种反向视觉补偿。
目前除了苹果 iOS 之外,一些第三方 APP,安卓定制 UI,都跟进了这种连续圆角的设计,下图为 MIUI12 系统和蜗牛读书 APP 中连续曲率圆角的运用。
平面软件如何绘制更连续的曲线
工业设计中须要将图形达到 G2 以上的连续等级,才能让曲线看起来较为流畅舒适,前文提到 SKETCH 附带一个调皮圆角的功能,但仅针对矩形。PS、AI、SKETCH、FIGMA 都是利用贝塞尔绘制,想要手动自由绘制连续曲线,直接说结论:险些没有可操作性。
但是,平面设计和工业设计不同的是,平面仅须要达到视觉上的舒适即可,并不须要严格的检测,达到伪连续即可。以是完备可以通过犀牛或者其他 NURBS 软件绘制后再导入,或者下载 iOS 供应的图形模板,虽然在数据转换的过程中连续性已经被毁坏了,但是在有限的像素下险些可以达到以假乱真。
那么先来看下如何手动绘制一个连续的圆角矩形,首选建立一个圆形,然后将四个节点分别向内部移动相同的间隔,移动的间隔即可决定圆角的曲率大小,但曲柄不能碰触,否则四边会内凹。
小米200万的Logo是如何绘制的?先节制「连续曲率」知识点!
可以通过这种方法可以可以得到一个绝对平滑的圆角矩形,但是对付圆角大小的掌握比较繁琐,可以考试测验第二种方法,PS 中利用变形工具中的鱼眼,通过调度数值,在不改变尺寸的情形下可以快速增大或减小圆角曲率。
通过这个方法,加上变形工具可以快速绘制出小米新品牌 Logo 中的所有曲线,须要把稳的是原老爷子是把所有细节都打磨成了连续曲率,包括 M 上的曲线,以及笔墨中 xiaomi(由于目前没得到这枚 Logo 的原生源文件,以是对付构造的剖析可能不完备准确)。
通过临摹可以看出这枚 Logo 对付比例和曲率的打磨确实比较讲求严谨,仿佛看到了哲学图片。
末了从实用角度再补充几点贝塞尔曲线绘制技巧,这些技巧可能不会真正绘制出严格的连续曲率,但是会在视觉上提升图形的流畅性:
删除非必要的点。考试测验删除和简化节点,每每会得到更好的平滑性。
做完圆角后不要对图形进行拉伸。非参数化物体拉伸或改变图形比例都会引起圆角失落真。
须要担保节点两侧都有曲柄,并且曲柄是平行的,这样即可以达到最基本的 G1 连续。
考试测验让节点两侧曲柄长度也相同,并且附近的节点曲柄长度变革不大,这样就可以达到视觉平滑的效果。
可以考试测验预留更大的圆角空间,将曲柄拉长,可以改进默认圆角的突变感。
如果你全部消化了本文,恭喜你,你也可以画出 200w 的 LOGO 了~