复联4终于来了。

作为漫威宇宙第一阶段的正式收官之作,我在经历了兴奋、不舍、平静和感动的三小时后,又忍不住回刷了复联系列。每个超级英雄在回到最初的地方之后与自己和解,从而走向最终的归宿 ——这样的终局堪称完美。

其实作为设计师,在跌宕起伏的剧情和大快人心的特效背后,我也更关注电影中的设计细节,比如让我印象最深的那位“以凡人之躯比肩神明”的钢铁侠,他头盔内部的数字特效与演员小罗伯特的互动几乎是我最喜欢的部分。

数字小字体怎么弄_数字字体变小_数字小字体

仔细看下,钢铁侠头盔内的数字设计在笔画上采用硬朗的直线,结构上采用瘦长结构,没有多余的细节修饰,再加上音效的配合,让人完全沉浸在来自未来科技的魔力里。这样的设计在科幻电影场景中尤为相得益彰,然而在我经常接触的电商设计领域,数字设计的思路又是截然不同了。

数字小字体_数字字体变小_数字小字体怎么弄

借此机会跟大家分享一下我在数字字体的设计上的一些心得。

2018年,我完成了一套名为“TG-type ”的数字字体的设计。

经过多轮的测试调整,目前这套字体已经在1688平台、天猫精灵、口碑b端、菜鸟、聚划算、赊账进货、诚e赊集货视频等业务场景中多次应用,日均服务用户数超千万(是真的商业应用了哦,而且服务的用户还不少~)。

为什么会想做一款数字字体?

从耐克的Futura到宜家的Verdana,品牌字体除了给用户带来了表层信息传达功能之外更是间接的传递了品牌形象特质;而在电商领域,除了具备强烈的对话性、通用性之外,电商字体需要更加高效的解决电商类平台的用字需求。其中,数字作为应用场景最多的设计元素,它的作用至关重要的。它需要在有限的页面空间内以一种精悍却又能保证应有信息量的方式,向用户传递了背后的视觉调性。

数字小字体_数字字体变小_数字小字体怎么弄

数字小字体_数字字体变小_数字小字体怎么弄

就目前大家比较熟悉的主流字体苹方字体,我做了个简单的对比,方便大家了解下两者差异性(申明一下,设计没有好坏之分,这里咱们讨论的是合适与更合适的设计哈)。

1.在视觉效果上单个字体占用的空间比前者的字体空间都有减少,所以可以在更少的空间内展示更多信息。

2.字体细节上,TG-type的字形简洁朴素、比划中性严谨、粗细一致、没有多余的修饰,给人带来较强视觉冲击力的同时又有一种简约的现代设计美感。

数字字体变小_数字小字体_数字小字体怎么弄

字体设计其实是比较专业且细分的设计领域,我在开始做字体设计之前也研读了像《亚洲字体设计》《字型之不思议》《一字一生》等专业书籍,平时也经常关注字体设计趋势,没事儿也会就新发布的字体研究分析一番,自认为在字体设计上也小有一些心得了。

“TG-type “是我利用王者少打两分钟,晚上少睡一小会儿,早上早起一小会儿的时间来完成的。听起来其实也不难,但设计过程中有一些关键点需想分享给大家(划重点,敲黑板,黑板还要敲三下),希望能与同样有兴趣字体设计的小伙伴们一起切磋交流下。

1.字体结构

数字字体在结构方面0属于左右对称结构, 2、3、5、6、8字体属于上字页略小于下字页结构, 7、9字体属于上字页略大于下字页结构,所以我们在设计的时候需要适当调整上下部比例。

数字小字体_数字小字体怎么弄_数字字体变小

2.字体比例

字形比例运用了“黄金分割”法则去塑造在视觉上的美感;

数字小字体怎么弄_数字小字体_数字字体变小

3.笔画粗细

字体笔画粗细的选择上,我们用到了第二战中“粗与细——笔画的粗细与硬度由你想要的字体气质来决定,细笔画与曲笔画柔美气质,粗笔画与直笔画沉稳大气,虽说设计是一种感觉,但是这种感觉对于初学者来说很难把控,所以跟大家共享一下常用的几种笔画的粗细,在1000PX*1000PX画板里采用6px,10px和20px为基础笔画粗细,根据想要的业务气质选取即可。

数字小字体怎么弄_数字小字体_数字字体变小

4.笔画平衡

字体缩小到一定字号时笔画相交的交点会在视觉感受上显得略粗,我们将圆弧部分适当往里收紧,从而保证字体笔划在视觉效果上的平衡;

数字小字体_数字小字体怎么弄_数字字体变小

5.倾斜角度

字体比例运用了“黄金分割”法则后属于瘦长类结构,在这种结构下我经过多次设计尝试发现字体比划倾斜角度70度为最稳定的角度,视觉上也处于最舒适状态;

数字小字体_数字小字体怎么弄_数字字体变小

6.识别度

我将字体进行高斯模糊处理后发现4跟6在视觉上很难分辨,所以我们又适当调整了比划间的关系,将4的横条适当上移;

7.间距关系

每个数字字形间都有较大差异,所以没有对字形进行等比分布,而是根据字形的各种组合情况进行手动调整

数字字体变小_数字小字体怎么弄_数字小字体

最后说两句。

“TG -type ”名字的来源于知行合一(Thinking GO);字体设计不代表要对字形进行大幅度变化才叫设计,而是真正理解其背后的含义是什么,从而产出具有商业应用价值的设计。作为设计师的我们要充分贴近业务,从用户的角度思辨业务,从业务的角度思辨我们的设计,对页面中的每个细节都进行反复推敲。毕竟我们早已不再是以前单纯的视觉设计师或者交互设计师,我们要做的是整个设计方案的解决者。

数字字体变小_数字小字体_数字小字体怎么弄

铛铛铛~~~最后的最后是彩蛋时间。

其实看到本人业余时间设计的一款数字字体能在电商平台中被应用,真的是一件很高兴的事情。虽然跟此前阿里人机自然交互实验室与汉仪字体合力打造的人工智能字体相比,TG-type对于电商设计领域的贡献可能只算得上冰山一角,但我还很是愿意将它对外授权免费商用,希望它能成为大家设计创作时的一种选择。5月中旬左右,可前往阿里平台设计服务市场(),就可以进行字体下载啦。

限时特惠:本站每日持续更新5-20节内部创业项目课程,一年会员
只需199元,全站资源免费下载点击查看详情
站长微信:
jjs406

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注