APP界⾯设计必备，常⽤字体规范
好长时间没发帖，净想过年了，过年哈，倒腾⼯作总结和年货是⼤事。
这⼏天有⼈问我说：“最近看了好多教程，都⽼⾼⼤上了，但是⽼弟我做不到呀，想学点直接能拿来⽤的，这个要求过分吗……”
这个，好吧，那就直接说说能⽤的知识：字体字号。
也许你会说：字体字号？也太Low了吧，这个谁不知道重要呀。
对于这个问题，我想说：会和熟练，是两回事。⼀个App，不同部分的字体字号你能准确地说出来吗？
很多刚做APP界⾯的设计师，经常会因为字号，字体颜⾊，间距⽽困扰。
拿到设计需求后，开始进⾏设计，不知道从何去调整界⾯的字号和⾏间距等。容易碰到的问题是页⾯和页⾯的字号调着调着就⼤⼩或颜⾊不统⼀了。并且容易导致设计稿反复得修改。设计出来的效果图⽂字左右间距层次不齐，导致与预期不符等。
这⼩节我将和⼤家理⼀理界⾯中常⽤的字体，字号，字体颜⾊及间距对齐的⼀些⼩经验。希望能对⼤家有些帮助。
⼀.成也字，败也字
在设计师的职业⽣涯中，⾄少⼀次甚⾄多次在⼯作中因为字体不协调栽跟头。在实践的过程中我们会慢慢发现⼀些规律或者经验规范。接下来我将和⼤家⼀起聊聊在界⾯设计中的那些常规字体的使⽤规范。
我们常常会听到，这也太LOW了吧！！你能统⼀⼀下字体吗？
不明确⽽繁琐的字体搭配会导致整个画⾯失调。可以这样说，字体可以成就设计也可以毁掉设计。
问题的关键有：
1.字体样式太多，导致页⾯杂乱
2.使⽤的字体不易识别
3.字体样式和内容的⽓氛或规范不匹配
怎么避免这样的结果发⽣呢？
通过设计经验可以帮助你做出更好的版式
了解不同平台的常⽤字体设计规范
在每个项⽬设计中只使⽤1-2个字体样式，⽽在品牌字有明确的规范的情况下，只需要⼀种字体贯穿全⽂，通过对字体放⼤来强调重点⽂案。字体⽤的太多，越显得不够专业。
不同的样式的字体，形状或系列最好相同，保证字体风格的⼀致性。
字体与背景的层次要分明
确保字体样式与⾊调⽓氛相匹配
⼆.界⾯中⽂字使⽤的规则
在不同平台的界⾯设计中规范的字体会有不同，像移动界⾯的设计就会有固定的字体样式。⽹页中会有常⽤的⼏个字体，在这我和⼤家分别介绍⼀下。
以下是在  72像素/英⼨下的规范
移动端常规字体
IOS：常选择华⽂⿊体或者冬青⿊体，尤其是冬青⿊体效果最好。
Android
英⽂字体：Roboto
中⽂字体：Noto
移动端常⽤的的字号有哪些呢？
导航主标题字号：40-42px
我⼀般设计就⽤40px，偏⼩的40px字号，显得精致些。
在内⽂展⽰中字号⼤⼩⼜是多⼤呢？
⼤的正⽂字号32px,
副⽂是26px，⼩字20px
在内⽂的使⽤中，根据不同类型的App会有所区别。
像新闻类的APP或⽂字阅读类的APP更注重⽂本的阅读便捷性，正⽂字号36px，会选择性的加粗。
⽽列表形式、⼯具化的APP普遍是正⽂32px，不加粗。副⽂案26px,⼩字20px
26px的字号还会⽤于划分类别的提⽰⽂案，因为这样的⽂字希望⽤户阅读，但不要抢过主列表信息的引导。
36px的字号还经常运⽤在页⾯的⼤按钮中。为了拉开按钮的层次，同时加强按钮引导性，选⽤了稍⼤号的字体。
（见下图中的退出按钮)
⼤家注意了，在选⽤字体⼤⼩的时候⼀定要选择偶数的字号，因为在开发界⾯的时候，字号⼤⼩换算是要除以⼆的。这个详细缘由⼤家可以⽹上查询，我就不在这⼀⼀的介绍了。
常⽤字号的⼤⼩基本就这⼏个，根据版式设计需要也会采⽤异样⼤⼩的字号来特殊处理。这种更⾼的要求设计师的全局把控能⼒了。
⽹页端
常⽤的字号有哪些呢？
⽹页中⽂字字号⼀般都是宋体12px或14px(⽆状态)，⼤号字体⽤微软雅⿊或⿊体。⼤号字体是18px、20px、26px、30px，⼀般使⽤双数字号，单数的字体在显⽰的时候会有⽑边。
常⽤的字体
1.平平稳稳：微软雅⿊/⽅正中⿊
微软雅⿊系列：在⽹页设计中这款字体使⽤的⾮常平凡，这款只⽆论是放⼤还是缩⼩，形体都⾮常的规整舒服。在设计过程中建议多使⽤雅⿊，⼤标题⽤加粗字体，正⽂⽤常规字体。
⽅正正中⿊系列：中⿊系列的字体笔画⽐较锐利⽽浑厚，⼀般运⽤在标题⽂字中。但这种字体不适⽤于正⽂中，因为边缘相对⽐较的复杂，⽂字⼀多会影响⽤户的阅读。
2.与时俱进：⽅正兰亭系列
⽅正兰亭系列: 个⼈最推荐的就是这个系类的字体，整个兰亭系列的字体有⼤⿊、准⿊、纤⿊、超细⿊等。因笔画清晰简洁，这个系类的字体就⾜以满⾜排版设计的需要。可以通过对这个系列的不同字体进⾏组合，不仅能保证字体的统⼀感，还能很好的区分出⽂本的层次。
3.刚劲有⼒，运动型：汉仪菱⼼简/造字⼯房⼒⿊/造字⼯房劲⿊
在这⼏个字体中，他们有着共同的特点，字体⾮常的有⼒⽽厚实。基本都是以直线和斜线为主。适合⼴告和专题使⽤。在使⽤这类字体的时候我们可以使⽤字体倾斜的样式，让⽂字显得更为活⼒。在这三种字体中，菱⼼和造字⼯房⼒⿊在笔画、拐⾓的地⽅采⽤了圆和圆⾓。⽽且笔画也⽐较的疏松，更多的有些时尚⽽柔美的⽓氛。⽽劲⿊这款字体相对更为厚重和⽅正。这类字体使⽤在⼤图中偏多，效果⽐较突出。
⽑笔字⽣成器
通过⾃由的书法⽹站在线⽣成。在⽹址中输⼊⽂本，再进⾏选择书法字体样式。通过这种⽅法我们能很快的到需要的书法字体。这招⾮常管⽤。
推荐⼤家⼏个⽑笔字相关的⽹站：
和⼤家简单操作⼀下⽑笔字的使⽤⽅法。
将下载下来的字体图⽚AI转路径，编辑⽂字。
⾸先使⽤在线⽣成器输⼊选择好你需要的⽂字字形，将⽂字图⽚拖⾄AI中。
选中拉⼊图⽚，点击［图像描摹］
然后继续点击［扩展］按钮
扩展完毕后，图⽚已经都变成了路径。
使⽤魔棒选择颜⾊就可以将⽂字的路径提选出来。
最后经过设计后的Banner效果，这就是我经常⽤的Banner风格，你们也试试吧~
重要提⽰，怎么不认识的字体名称？
三.常⽤字体颜⾊
字体颜⾊⼜有哪些常⽤的颜⾊呢？
在界⾯中的⽂字分为三个层级，主⽂、副⽂、提⽰⽂案等。
在⽩⾊的背景下，字体的颜⾊层次其实就是⿊、深灰、灰⾊。
常⽤的⾊值是#333333；#666666；#999999
在界⾯中还经常会⽤到背景⾊#eeeeee。
分割线则采⽤#e5e5e5或#cccccc的颜⾊值，⼀个深⼀些，⼀个浅⼀些。这个会更具不同的软件风格采⽤不同的深浅，由设计⾃⼰把控。
在我们做设计的时候，字体和图库均是有版权的，请注意合法使⽤。
设计的时候我们还可以将字体进⾏变形来达到宣传的⽬的，这个需要设计师对字体设计有⼀定的了解。
总之，设计是要有规范，有体系的。使⽤规范化的设计对产品的延续性⾮常有帮助，并且保证了产品的独特性和⼀致性。所以，⼤家要在设计初期到风格和规范，这样做出来的界⾯才会统⼀⼀致，在变化的需求中到定量，调整起来也相对轻松很多。html网页设计教程(推荐)
【本⽂由Micu设计原创发布，转载请注明作者：Micu设计，请加上⼆维码】

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。