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.刚劲有力，运动型：汉仪菱心简/造字工房力黑/造字工房劲黑

在这几个字体中，他们有着共同的特色，字体很是的有力而厚实。基本都是以直线和斜线为主。适合广告和专题使用。在使用这类字体的时候咱们可使用字体倾斜的样式，让文字显得更为活力。在这三种字体中，菱心和造字工房力黑在笔画、拐角的地方采用了圆和圆角。并且笔画也比较的疏松，更多的有些时尚而柔美的气氛。而劲黑这款字体相对更为厚重和方正。这类字体使用在大图中偏多，效果比较突出。

毛笔字生成器

 

经过自由的书法网站在线生成。在网址中输入文本，再进行选择书法字体样式。经过这种方法咱们能很快的找到须要的书法字体。这招很是管用。

推荐你们几个毛笔字相关的网站：

http://www.51poca.com/

http://www.epinv.com/online/

http://www.akuziti.com/mb/

 

和你们简单操做一下毛笔字的使用方法。

将下载下来的字体图片AI转路径，编辑文字。

首先使用在线生成器输入选择好你须要的文字字形，将文字图片拖至AI中。

 

 

 

选中拉入图片，点击［图像描摹］

 

 

 

而后继续点击［扩展］按钮

 

 

扩展完毕后，图片已经都变成了路径。

 

 

使用魔棒选择颜色就能够将文字的路径提选出来。

 

 

最后通过设计后的Banner效果，这就是我常常用的Banner风格，大家也试试吧~

 

 

 

 

重要提示，怎么找不认识的字体名称？

 

不少朋友会看到别人使用的字体很是好看，但又不知道是什么字体。在这我告诉你一个方法。能够经过网络上传字体图片进行搜索字体名称。网址：http://www.qiuziti.com/

 

三.经常使用字体颜色

字体颜色又有哪些经常使用的颜色呢？

在界面中的文字分为三个层级，主文、副文、提示文案等。

在白色的背景下，字体的颜色层次其实就是黑、深灰、灰色。

经常使用的色值是#333333；#666666；#999999

 

在界面中还常常会用到背景色#eeeeee。

分割线则采用#e5e5e5或#cccccc的颜色值，一个深一些，一个浅一些。这个会更具不一样的软件风格采用不一样的深浅，由设计本身把控。

在咱们作设计的时候，字体和图库均是有版权的，请注意合法使用。

设计的时候咱们还能够将字体进行变形来达到宣传的目的，这个须要设计师对字体设计有必定的了解。

总之，设计是要有规范，有体系的。使用规范化的设计对产品的延续性很是有帮助，而且保证了产品的独特性和一致性。因此，你们要在设计初期找到风格和规范，这样作出来的界面才会统一一致，在变化的需求中找到定量，调整起来也相对轻松不少。

 

【本文由Micu设计原创发布，转载请注明做者：Micu设计，请加上二维码】