[align=center]作者：王铎 （MICU出品）[/align] [align=center]一年前老王写了一篇[url=http://mp.weixin.qq.com/s?__biz=MjM5MjUwMzE2MA==&mid=202833104&idx=1&sn=a70ee3c68f0fb6edd53094e488406912&scene=21#wechat_redirect]《界面设计必备，常用字体规范》[/url]相信很多人都看过了。[/align][align=center]但是今天设计趋势变化了，[b]规范也改变了。[/b][/align][align=center][/align][align=center][size=24px][b]你造吗？[/b][/size][/align] [align=center]所以今天老王必须挤出时间来更新一下这篇文章，并丰富一些使用规范。[/align] [align=center][size=24px][b]没错，还是那句话！[/b] [/size][/align][align=center][size=24px][b]成也字，败也字[/b][/size][/align] [align=center]可以这样说，字体可以成就设计也可以毁掉设计[/align][align=center]当年这么说，今天还是这么说! [/align] [img]http://img.zcool.cn/community/027aa5556d69a40000016b62f715e9.jpg@800w_1l[/img] [align=center]看完上面这张图你就能明白了[/align][align=center]是不是阅读起来非常的难受？[/align] [align=center][size=24px][b]那就对了！[/b][/size][/align] [b]其实折磨你的问题有以下几点[/b] 1.字体样式太多，杂乱无章 2.使用的字体不易识别 3.字体和内容的气氛不匹配 怎么避免这样的结果发生呢？ 一句话：[b]通过常用字体规范可以帮助你做出符合要求的设计[/b] [size=24px][b]一.字不过三！[/b][/size] 很多大神说过色不过三，其实在同一个APP或在同一个设计作品中字体也不要过三种样式，一般在每个项目设计中使用[b]1-2个字体样式就够了，[/b]然后通过对字体大小或颜色来强调重点文案。 [img=3fc1573d33d032f8757cb9902613.jpg]http://img.zcool.cn/community/02c386573d33d032f8757cb985ae76.png@800w_1l_2o[/img] [align=center]看到上图中的几个界面，都是通过字体的大小来区分出界面内容中的层级关系的。[/align][align=center]其中包括了蚂蚁花呗的banner里只用了一种字体来区分主标题和副标题的关系。 [/align] [align=center]其实网页也是一样，使用一种字体样式，通过字体大小的对比也能做出高逼格的构图和设计。[/align] [align=center][img=2388573d340c32f8757cb9869fad.jpg]http://img.zcool.cn/community/02f4b1573d340c32f8757cb983d888.png@800w_1l_2o[/img] [/align] [align=center][b]讲真！字体用的太多，会显得你不够专业！[/b] [/align] [size=24px][b]二 .字与背景的层次要分明[/b][/size] [align=center][img=42a2573d51436ac7253f9a8bcedd.jpg]http://img.zcool.cn/community/02f79c573d51436ac7253f9a89cbf1.jpg[/img][/align][align=center][img=5e98573d514d6ac7253f9a6306fc.jpg]http://img.zcool.cn/community/020b04573d514d6ac7253f9a4b8c5a.jpg[/img][/align] [align=center]看完上面两张Banner图是不是发现了同样的问题，字体和背景融到一块去了，在阅读的时候非常的不方便[/align][align=center][size=24px]这样的Banner如何才能达到广而告知呢？[/size][/align] [align=center]包括做移动界面也是一个道理，选择下面这样的一个背景，用户在光照很强的时候能看清吗？[/align] [img=25d5573d345932f8757cb997b40f.jpg]http://img.zcool.cn/community/02e01c573d345932f8757cb90574c4.png[/img] [align=center]所以[b]易读性和易用性是用户的根本诉求！[/b][/align] [size=24px][b]三.字体样式与气氛要匹配[/b][/size] [b][img=dcec573d348d6ac7253f9a8375a2.jpg]http://img.zcool.cn/community/027e1b573d348d6ac7253f9add4142.png@800w_1l_2o[/img][/b] [align=center]看完这个图[/align] [align=center]第一个感觉就是[b]看不懂！[/b]仔细看才知道是眼部精华油。[/align][align=center]文字的风格和整体的设计风格不一致，没有带动用户的购买欲。 [/align] [align=center]我们再来看看下图[/align] [align=center][img=e078573d34a832f8757cb9ee4332.jpg]http://img.zcool.cn/community/0228a3573d34a832f8757cb999d1e6.png[/img][/align] 结合文案内容，设计风格采用了比较明快刚劲的设计风格，字体也选择了比较刚劲有力的造字工坊劲黑体。气氛匹配，用户代入感强。 [align=center][img=86f3573d34ef32f8757cb961f4b0.jpg]http://img.zcool.cn/community/0229b3573d34ef32f8757cb9f7f947.png[/img][/align] [align=center]活动banner的气氛非常重要，选择合适的字体样式能加强购买欲和点击欲。[/align] [align=center][size=24px][b]以风格分类常用的字体有以下几种类型[/b][/size][/align] [align=center][size=24px][b]1.平稳型字体[/b][/size][/align] [align=center][img=1196573d351232f8757cb96972ff.jpg]http://img.zcool.cn/community/023ef9573d351232f8757cb9152da4.jpg[/img][b][img=46d1573d35426ac7253f9a14a530.jpg]http://img.zcool.cn/community/026d21573d35426ac7253f9a9dde1b.png[/img][/b][/align][align=center]在陌陌APP欢迎也中使用到了比较平稳的方正正中黑，整体风格比较直接明了。[/align] [align=center][b][img=5cd0573d354d32f8757cb9f3e61e.jpg]http://img.zcool.cn/community/02bdc1573d354d32f8757cb95d208f.jpg[/img][/b][/align][align=center]方正兰亭系列是网页设计中必用的字体，稳重而细腻，还具有时尚科技感。[/align][align=center]看看下面这个苹果的网页，就造了[/align][align=center]用了方正兰亭超细后的感觉，是不是高端了许多~[/align] [img]http://img.zcool.cn/community/02465c573d35826ac7253f9a6e4deb.png@800w_1l_2o[/img] [img]http://img.zcool.cn/community/0206b6573d358332f8757cb9e5f2bb.png@800w_1l_2o[/img] [align=center]当然用在科技产品的官网中更合适不过了。稳重而富有科技感。[/align] [b][img=ee65573d35ae6ac7253f9a0f9eac.jpg]http://img.zcool.cn/community/0222c6573d35ae6ac7253f9a5bf15a.png@800w_1l_2o[/img][/b] [align=center][size=24px][b][b]2.刚劲有力型[/b][/b][/size][/align][align=center][b][img=629f573d35c432f8757cb9c29fce.jpg]http://img.zcool.cn/community/02f294573d35c432f8757cb9fb83d5.jpg[/img][/b][/align][align=center]张海山的字体非常的好用，可以试试，清晰明了，年轻有力[/align] [img=b2b0573d35e86ac7253f9a4ee8a1.jpg]http://img.zcool.cn/community/02ab38573d35e86ac7253f9a3112ed.png[/img] [align=center]华康俪金黑有种大字报的感觉 [/align] [b][img=5706573d362632f8757cb9c9701c.jpg]http://img.zcool.cn/community/02b39c573d362632f8757cb93b57e1.png@800w_1l_2o[/img] [/b] [align=center][size=24px][b]3.可爱型字体[/b][/size][/align] [img=5e82573d36356ac7253f9a971cc2.jpg]http://img.zcool.cn/community/022e2e573d36356ac7253f9ad474ef.jpg[/img] [align=center] 使用方正经黑设计的内涵banner[/align][align=center]是不是很可爱很有深度~~~[/align] [align=center][img=3e5e573d36516ac7253f9a716722.jpg]http://img.zcool.cn/community/028116573d36516ac7253f9a4cb21d.png[/img][/align] [align=center]汉仪小麦使用在插画中的感觉，不解释[/align] [align=center][img=fb9c573d36b332f8757cb9c24e2a.jpg]http://img.zcool.cn/community/02d36d573d36b332f8757cb9acc294.png[/img] (by 白茶)[/align] [align=center][size=24px][b]华康海报体[/b][/size][/align][align=center]专题和引导页面中经常会用到[/align] [align=center][img=bf66573d36cd32f8757cb9056c02.jpg]http://img.zcool.cn/community/0211ef573d36cd32f8757cb9a90157.png[/img] [/align] [align=center][size=24px][b]腾翔金砖体[/b][/size][/align][align=center][/align][align=center]这也是一个非常不错的字体[/align][align=center]设计师利用了腾翔金砖体的原型将美食的元素融入到了设计中[/align] [align=center][img=16d8573d36f932f8757cb9cd71dc.jpg]http://img.zcool.cn/community/02084e573d36f932f8757cb95892ae.png@800w_1l_2o[/img] [/align] [align=center]（注意合法使用字体，字体都是有版权的哦~）[/align][align=center][/align][align=center][b]当然我们还可以使用毛笔字生成器[/b][/align] [align=center]通过自由的书法网站在线生成[/align][align=center]在网址中输入文本，再进行选择书法字体样式[/align][align=center]通过这种方法我们能很快的找到需要的书法字体[/align] [align=center]这招非常管用！[/align] [align=center][img=22cd573d37216ac7253f9a74df8c.jpg]http://img.zcool.cn/community/02a4b5573d37216ac7253f9ae3a4c1.png@800w_1l_2o[/img] [/align] [align=center]推荐大家来两个毛笔字生成的网站：[/align][align=center]http://www.akuziti.com/mb/[/align][align=center]http://www.51poca.com/[/align] [size=24px][b]二.界面中文字使用的规则[/b][/size] [b]1.了解系统字体[/b] [b]iOS系统中用的是苹方字体系列[/b] 为了加强层次关系苹方系列从细到粗有着不同的样式 [img=c9ed573d37456ac7253f9a1ae65b.jpg]http://img.zcool.cn/community/02512e573d37456ac7253f9a28b2aa.jpg@800w_1l_2o[/img] [b]Android的默认字体是Roboto和Noto系列[/b] Roboto有6种字样 Thin、Light、Regular、Medium、Bold 和 Black [img=0974573d37816ac7253f9a04d7a2.jpg]http://img.zcool.cn/community/028c82573d37816ac7253f9aee2ea8.png[/img] Noto有7种字样 Thin, Light、DemiLight、Regular、Medium、Bold 和 Black [img=4e4e573d379c6ac7253f9a202b17.jpg]http://img.zcool.cn/community/02c199573d379c6ac7253f9ad83807.png[/img] [align=center][size=24px][b]2.统一字号[/b][/size][/align] [align=center]一个App，不同位置的字体字号[/align][align=center][b]你能准确地说出来吗？[/b][/align] [align=center]如果不能，说明你还不了解规范，没有去制定规范。[/align] [align=center]那我们先了解一下常规的一些大小（应用于2倍尺寸中，即iphone5/6）[/align][align=center][b]导航主标题字号：34/36px[/b][/align][align=center][/align][align=center]苹果默认标题字号为[b]34px[/b]，而有些软件也会用到[b]36px，更加强页面位置关系[/b][/align][align=center]比如[b]微信导航标题字号36px，导航字体醒目易于对应页面位置。[/b] [/align] [img=54ce573d37c532f8757cb9c2a581.jpg]http://img.zcool.cn/community/02b66e573d37c532f8757cb9e3717f.png@800w_1l_2o[/img] [align=center]在内文展示中字号大小又是多大呢？[/align] [align=center][b]正文字号32px-34px[/b][/align][align=center][b]副文是28px-24px[/b][/align][align=center][b]最小字号不低于20px[/b][/align] [align=center]字在正文字号使用中，阅读类的APP更注重文本的阅读便捷性[/align][align=center]正文字号34px，会选择性的选用苹方粗体[/align] [img=ae72573d38596ac7253f9ad54912.jpg]http://img.zcool.cn/community/022ef2573d38596ac7253f9ad879c6.png@800w_1l_2o[/img] [align=center]而列表形式、工具化的APP普遍是正文32px [/align][align=center]([b]由于屏幕使用变大正文大小趋势变成了34px[/b])[/align] [align=center]副文案28px,时间文字24px[/align] [img=a907573d37d96ac7253f9a405766.jpg]http://img.zcool.cn/community/026766573d37d96ac7253f9a3744b8.jpg@800w_1l_2o[/img] [align=center]26px的字号还会用于划分类别的提示文案[/align][align=center]因为这样的文字希望用户阅读，但不要抢过主列表信息的引导。[/align] [align=center][img=fb13573d397632f8757cb9d1bf21.jpg]http://img.zcool.cn/community/022e83573d397632f8757cb91d467f.png[/img][/align] 34px的字号还经常运用在页面的大按钮中。为了拉开按钮的层次，同时加强按钮引导性，选用了稍大号的字体。 [img=b2af573d395432f8757cb9bc97fb.jpg]http://img.zcool.cn/community/02242c573d395432f8757cb9b6621a.jpg@800w_1l_2o[/img] [b]注意了！[/b]在选用字体大小的时候一定要选择偶数的字号。因为在开发界面的时候，字号大小换算是要除以二的 [b]那网页中常用的字号有哪些呢？[/b] 网页字号最小12px 常用微软14px/16px作为正文 大号字体是18px、20px、26px、30px （注意使用双数字号，单数的字体在显示的时候会有毛边） [b]好的设计不应该永远是“人家的设计”[/b] [b]一定是看得不够多，琢磨不够透，练手太少[/b]