Likee 可变系统字体

这个是正在推进的一个项目。这是可变字体,主要用在likee APP 的界面里面。现阶段正在调试与修改细节,部分公关宣传、周边物料已进行运用当中~


动态.gif



我们先拿出 Likee 的原生 logo 作为比对,首先,我们对于这款字体的定位是正文字体。所以用 logo 的字体去进行延展显然是不可行的,太具有个性的字体并不适合大篇幅的去使用。所以我们需要把这款字体做成既有 Likee 的感觉,又能够适配到大篇幅的阅读需求。

likee-sans-思路整理动态.gif



同时,又是由于这款字体是需要大篇幅阅读,所以我们将 Counter 设计的更加开阔,保证在阅读当中不会太过于疲劳。并且,开阔的 Counter 空间在文字缩小的时候更不容易糊掉,导致识别出现困难。

Likee-可变字体提案4.gif



首先我想在这里陈述一下我们开展这个设计的思路。我们做西文字体可不是直接从A开始设计的啊,当然是有一个规律在这里的。所以我们通过查阅资料还有总结,得出这样一个设计的顺序:

likee 思路整理的副本12.13的红色_画板 1 副本 2.jpg



接下来当然就是开始进行 n 的设计啦~首先我们要确定风格,第一个 n 字定下来,那么风格基本上就走了大半了。我们可以看看下图的 Noto Sans Symbols ,他的小竖竖和右边的圆弧曲线是相交的。而我们的字体是希望它的几何感更强一些,更加规整,相对而言更加对称,所以我们会选择让他平滑过渡,看起来更加工整一些的!

likee 思路整理的副本12.13的红色_画板 1 副本 4.jpg

likee 思路整理的副本12.13的红色_画板 1 副本 13.jpg

likee-sans-思路整理动态2.gif



然后的话,为了避免字体缩小的时候相交的位置糊掉,所以我们选择留出3个单位的空间,让他稍微不那么重。

Likee-可变字体提案2.gif



我们的 n 在前面的段落中已经定下来是平滑过渡的,所以,凡是有这种相接方式的字母,我们都会这么去处理,然后问题就解决一大半了!

likee-sans-思路整理动态4.gif



然后我们就来统一这些圆圈的弧度,当然是不可能一毛一样的哦,视觉调整是设计师独有的能力,AI智能无法替代哦!

likee-sans-思路整理动态5.gif



然后我们再根据 n 来把升部确定下来。

likee-sans-思路整理动态6.gif



非常丝滑~定下来升部之后就可以铺开来设计~

likee 思路整理的副本12.13的红色_画板 1 副本 16.jpg

likee-sans-思路整理动态7.gif



继续推进!我们把这些有圆的结构的字体都延展一遍,尽量让他们感觉相近,并且保持平衡~

likee 思路整理的副本12.13的红色_画板 1 副本 12.jpg



上面的任务完成!我们开始做大写字母!又是一波丝滑的延展~

likee-sans-思路整理动态9.jpg

likee 思路整理的副本12.13的红色_画板 1 副本 9.jpg

likee-sans-思路整理动态8.gif



好了,接下来就是一些成果的展示了!我们来看下整体的效果是怎么样的:

likee 思路整理的副本12.13的红色_画板 1 副本 23.jpg



这是不同的字重的一些展示:

likee-sans-思路整理动态10.jpg



关于我们选择怎么样去做小写 a ,我们是这样去考量的:

likee 思路整理的副本12.13的红色_画板 1 副本 17.jpg


还有这个 s、g、e 的切口角度问题,在推进设计的时候,团队里的小伙曾经提出过疑问,就是这几个切口会不会是统一都是平切或者斜切?事实上,我们通过寻找一些案例发现,其实不是一个规定死的规则,他是可变通的,根据实际情况去比对,才能得到一个相对满意的答案。

likee 思路整理的副本12.13的红色-20.jpg



还有这个 f ,我们很容易掉入到凡事都要对齐的圈套里面,一不小心这个升部就要和横线对齐,看起来就容易倒了。事实上,做字体和做图是一样的,都是需要视觉调整的。下面两个就是非常生动的例子。

likee 思路整理的副本12.13的红色_画板 1 副本.jpg



然后我们就要开始调整字距(对了,做可变字体比较有难度,我后面会专门开一篇文章,讲讲我是怎么去克服这个困难的)

likee 思路整理的副本12.13的红色_画板 1 副本 8.jpg

Likee-可变字体提案5.gif



我们把这些标点设计的比较靠居中(当然不是完全居中)因为我们的 APP 里面有很多这种场景,比方说用户 ID 什么的,所以我们把它重点拿出来设计。

Likee-可变字体提案3.gif



这是一些在端内使用的一些场景:

likee-sans-思路整理动态11.jpg

likee-sans-思路整理动态12.jpg

likee-sans-思路整理动态14.jpg



包括这些数字的设计,也是经常出现的:

likee-sans-思路整理动态13.jpg


这里面其实有一些争议的部分,为了避免大家产生疑问,我在这里先解释一下。就是大家会发现这里面的 e ,封面上是正的,正文部分有些地方是斜的。因为我们品牌小组在设计这个字体的时候,更多的去考虑到他的品牌性格和识别度,恰好一个微微倾斜的 e 可以去作为他的视觉记忆点。但是这当中与 UI 的同学有一些讨论,就是是否需要这么重的一个记忆点,所以这一关键点也是我们讨论的一个点,因为项目还没有正式结束,还在不停的调整,所以上述的设计都一直在变化当中,这就是设计的有趣所在,我们不同的探索,不同的讨论,一边工作一边学习,能够学到更多书上网络上都找不到的知识~