更多设计文章,设计交流,欢迎添加 | 微信ddm7212
关注#公众号:SKY盖哥 ,第一时间获得设计干货和分享内容。
一、字体重要性
字体对于很多新人设计师来说,是一件比较麻烦的事情,如果在商业设计上想使用你想要的一些字体,有时候需要巨额的版权费,字体侵权的案例每天都在发生。虽然网上有很多免费的字体,但是有些质量比较低,或者只是一些限定的字体,大家使用时候一定要务必小心。
二、巧用字体大小拉开层级
字体是页面中非常重要的元素之一,字号用多大,以及字体的颜色深浅非常重要。上面两张效果图,相信我们做设计时,会经常遇到,设计元素也都遵循着规范,但是仔细看会发现有很多细节问题,我们一起来解读下。
我们仔细的解读下,会发现这个页面中的字体运用了30,28,24三个字体,特别在运用的时候,标题和副标题之间的对比太小了。
为什么觉得字号会有问题,因为字号大小对比太小,30和28号,从视觉上相差不大,很多设计师设计看起来没有层次的原因,也是因为层次没有拉开,所以会看着没有终点,大家设计大小过于接近。一般来说,字体有层次,字号之间至少得相差4号以上。
我们优化字体,从原来相差2个字体,调整到4个字号大小,这样对比更加强烈,首先色彩上已经拉开对比,其次文字大小上,也拉开了对比。整体的对比感也就出来了。
字号加大到4的差别,我们才能在视觉上感觉明显差异。
改完后对比效果还是很明显,节奏比之前清晰了很多,页面看起来也不会信息糊在一起了。
弹窗上字体调整,标题信息的第一优先级,其次是辅助信息。所以这个小技巧大家一定要记住,如果你在UI设计中,想要页面有层级,至少你的文字之间字号差距4或者以上。
那么问题来了,我们该如何系统的自定义一个字体的字号呢?有没有一些设计方法呢?
三、运用比例尺让字体更有节奏
大家工作中一定会遇见一些问题,这个地方标题是用36呢还是用32号字体?如果你们产品就你一个设计师还好,如果有很多个设计师合作,如果没有一个规范约束,肯定会各种乱。
当然,我相信很多公司都有各种字体规范,之前我们做项目也有,但是能真正做设计时候用到特别少。后面我们就使⽤了⼀个⽐例尺⽅法。
什么是比例尺?
比例尺其实是一个比例,有点类似于黄金比例,它平时运用到建筑,音乐艺术中比较多。比如建筑的尺寸,钢琴按键的比例尺寸,这些尺寸是有一定规律的,所以叫比例尺。
比例尺怎么操作?
第一步,我们先要确定一个基础的字大小,一般来说是页面中最常用的,比如正文,常用移动端正文使用28px比较多(750分辨率下)。
第二步,就是需要定义一个比例系数,然后使用该比例系数乘以基础字大小生成的一系列字体大小。
怎么确定基础字体大小?
字体是页面中非常重要的因素,如何选择基础字体大小,一般从产品类型维度考虑:
我们的内容类型,是大量文字还是图片还是视频。如果我们是新闻app。那么文字毕竟多,所以我们的字体要考虑一个最合适的大小,比如常用阅读文字大小是28,30等等。
如何选择比例大小?
Sheetsu.com有一个公式,可以根据你的内容去设置一个字体系数比例,比如说,你的产品,如果想设计上留白更大,杂志感多一些,你可以比例系数大一些,如果你是电商,需要内容比较琳琅满目,可以比例系数小一些。这里也提供了一系列公式,让大家选择。
你选择的文字大小,以及比例基数将影响你整体的字号大小。这没有一个固定的答案,谁试谁知道。我们来看一个实际案例!
比如淘宝app中,平时商品上文字内容比较多,内容也比较复杂,场景多。28号字体是经常使用的,那么我们就可以选择28号位基础的字体。
因为淘宝内容比较多,所以整个比例基数定位在1.124比较合理,然后得出以下参数:
28 X 1.125 = 31.5
31.5 X 1.125 = 35.44
依次内推,然后四舍五入,得出整个字体比例层级。
28;32;36;40;44;50这几种层级的字号。那么这样设计出来的字体就会非常有节奏。
推荐一个比例工具
这个网站 https://type-scale.com/ 可以输入字号自动生成,操作起来很简单。
第一步输入基础字体,第二步,点击下拉框选择一个比例尺寸。然后其他的可以不用管,字体因为中国app基本都是苹方。所以可以忽略。
然后就出来很多字体比例啦,1.125倍数的。
不同比例的字体在页面中使用出来的效果也不一样,大家可以多去试试。
最后
这个小技巧非常有用,是做设计规范必备的一个小方法,希望可以帮助到你。
如果觉得本文内容不错,还想知道更多设计小技巧,欢迎随时加叮当猫微信:ddm7212,进行随时咨询。
Powered by Froala Editor