界面设计必备！全方位科普常用的字体规范
编者按：90后UI设计师的最新干货！应广大群众要求，今天@Micu设计&同学不说高大上的教程，来点即学即用的干货，从界面中文字的使用规则到字体颜色的选择，都有具体细致的说明，非常适合基础不扎实的同学。想一次性搞定字体这个关键点，马上学起来。
好长时间没发帖，净想过年了，过年哈，倒腾工作总结和年货是大事。
这几天有人问我说：&最近看了好多教程，都老高大上了，但是老弟我做不到呀，想学点直接能拿来用的，这个要求过分吗&&&
这个，好吧，那就直接说说能用的知识：字体字号。
也许你会说：字体字号？也太Low了吧，这个谁不知道重要呀。
对于这个问题，我想说：会和熟练，是两回事。一个App，不同部分的字体字号你能准确地说出来吗？
很多刚做APP界面的设计师，经常会因为字号，字体颜色，间距而困扰。
拿到设计需求后，开始进行设计，不知道从何去调整界面的字号和行间距等。容易碰到的问题是页面和页面的字号调着调着就大小或颜色不统一了。并且容易导致设计稿反复得修改。设计出来的效果图文字左右间距层次不齐，导致与预期不符等。
这小节我将和大家理一理界面中常用的字体，字号，字体颜色及间距对齐的一些小经验。希望能对大家有些帮助。
一、成也字，败也字
在设计师的职业生涯中，至少一次甚至多次在工作中因为字体不协调栽跟头。在实践的过程中我们会慢慢发现一些规律或者经验规范。接下来我将和大家一起聊聊在界面设计中的那些常规字体的使用规范。
我们常常会听到，这也太LOW了吧！！你能统一一下字体吗？
不明确而繁琐的字体搭配会导致整个画面失调。可以这样说，字体可以成就设计也可以毁掉设计。
问题的关键有：
字体样式太多，导致页面杂乱 使用的字体不易识别 字体样式和内容的气氛或规范不匹配
怎么避免这样的结果发生呢？
通过设计经验可以帮助你做出更好的版式，了解不同平台的常用字体设计规范。
在每个项目设计中只使用1-2个字体样式，而在品牌字有明确的规范的情况下，只需要一种字体贯穿全文，通过对字体放大来强调重点文案。字体用的太多，越显得不够专业。
不同的样式的字体，形状或系列最好相同，保证字体风格的一致性。
字体与背景的层次要分明,确保字体样式与色调气氛相匹配
二、界面中文字使用的规则
在不同平台的界面设计中规范的字体会有不同，像移动界面的设计就会有固定的字体样式。网页中会有常用的几个字体，在这我和大家分别介绍一下。
以下是在72像素/英寸下的规范
移动端常规字体
IOS:常选择华文黑体或者冬青黑体，尤其是冬青黑体效果最好。
英文字体：Roboto
中文字体：Noto
移动端常用的的字号有哪些呢？
导航主标题字号：40-42px
我一般设计就用40px，偏小的40px字号，显得精致些。
在内文展示中字号大小又是多大呢？
大的正文字号32px，副文是26px，小字20px。在内文的使用中，根据不同类型的App会有所区别。
像新闻类的APP或文字阅读类的APP更注重文本的阅读便捷性，正文字号36px，会选择性的加粗。
而列表形式、工具化的APP普遍是正文32px，不加粗。副文案26px,小字20px
26px的字号还会用于划分类别的提示文案，因为这样的文字希望用户阅读，但不要抢过主列表信息的引导。
36px的字号还经常运用在页面的大按钮中。为了拉开按钮的层次，同时加强按钮引导性，选用了稍大号的字体。
（见下图中的退出按钮)
大家注意了，在选用字体大小的时候一定要选择偶数的字号，因为在开发界面的时候，字号大小换算是要除以二的。这个详细缘由大家可以网上查询，我就不在这一一的介绍了。
常用字号的大小基本就这几个，根据版式设计需要也会采用异样大小的字号来特殊处理。这种更高的要求设计师的全局把控能力了。
注：相关网站建设技巧阅读请移步到频道。
看过本文的人还看过
最新图文推荐
最新专栏文章
大家感兴趣的内容
&&<a rel="nofollow" class="red" href="" target="_blank" color="red新版网站排行榜
===全新上线===
网友热评的文章手机app设计容易识别的文字尺寸，行距是多少？
来源：/article-154-1.html
最近在智能手机上，app设计和有功能性的UI设计的需求增多了。
用Photoshop做完宽640px的设计图后，再用真机确认。用多少号的文字每回都很迷茫。
“不觉得文字有点小么？”
“标题和文本看起来没有区别吧？”等等…
这些问题常见吧，因此对智能手机系统默认的应用和有名的手机应用的文字尺寸进行调查。
Google Chrome
以上就是调查结果。
与自己所想的相比，果然标题整体稍大。
文本大体在24~28px,标题是26~34px。
另外，说句多余的话，在列表上的设计上下留30px的很多。
很多左右两边留白是30px，有信息的部分左右是20px。、
根据APP和网站的目的等，调整元素的前后关系和整体的氛围，统一这些文字尺寸不是很好的么？难道不能成为一个指标吗？
话虽如此自从iPhone4S的IOS升级之后总觉得是落伍了…为了更好的调整，打算更换机种。那么，再见！
译者观点：
文章中的文字尺寸适用于iPhone5s以下的版本。大屏是否适用？有兴趣的酷友可以运用以上的验证方法自行调查iPhone6等的尺寸。
深泽直人的设计中，一切都回归本原。靠事物本身所散发的魅力，设计所给人的感觉，第一并不是好用，而是深入人心，倍感亲切。第二才是好用。 21:19
设计认识有三个层次，即认知，模仿，本原。一般来说，大多数的设计师只到了模仿＋创新的层次，因为，他们的想法是基于固有案例＋本品需求基础上的创新，虽然设计的很棒，但内涵通常都不深厚，反映设计思想浮夸的一面。 21:19
战胜不安和恐惧，把自己锻炼的锐利光滑，百尘不侵，这样的力量就是强了吧！
所谓世界第一行业第一名应该由谁来决定？我们追求的不是这种东西，心里面那个不变的理想和目标才是支持我们继续下去的动力。 11:03
努力把设计做的更深入，有效，不仅是视觉的美观，还有交互、用户研究,厚积薄发。
克服困难，不怕付出，多做一些有价值的设计。让每一个找我们的客户的产品都能成功。 20:32
爱设计，爱生活 16:48第三方登录：再来谈移动端APP字体排版设计，也许有人会说，这个还有什么好说的呢？但是真正能够运用好APP字体设计的人还真的不多。不信，我们往下看看这个7个移动端字体设计原则吧！
1. 留足空间
与普遍观点恰好相反，字体并非屏幕上弯弯曲曲的线条排列；它主要在于周围和相互间的空间。
字母本身对字体的影响，与构成它的空间相比，要小得多。
要理解这一点，了解字体从何而来很有帮助：字母o（还有b、c、p等等）中间的圆孔被称作“凹槽”。在最原始的印刷机上，铅字由金属雕刻而成，这些凹槽来自雕刻成型、排列在盘中的金属活字。第一个字体设计师所处理的模具，实际上并不能用于印刷。字母本身对字体的影响，与构成它的空间相比，要小得多。
谈到层次时，我们通常指的是h1到p，有时候还会到h6。但另外还有一种层次在影响着行或段落的视觉流，这是特殊的层次：字母间距小于字间距，字间距小于行间距，以此类推。
要在移动端创造最佳易读性，尤其要注意这些特殊层次，这些格式塔式的词语、行、段落的文字组合，在自然光环境下同样至关重要。
2. 行宽与行高
行宽是一行文字的长度。或者确切的说，是一行文字的理想长度，因为很难让每一行都精确吻合。
众所周知，舒适阅读的理想行宽是65个字符左右。行宽产生的物理长度，取决于字体的设计、字间距（见下文）和你使用的具体文字。本文开篇的65个字符（译者注：此处请参见英文原文），用PT Serif字体是26.875em宽，用Open Sans是28.4375em宽，用Ubuntu字体是27.3125em宽。如果再加入斜体、大小写和一大堆其他字体细节，还会有更大的差异。
在桌面端浏览器中，65个字符很难触及边缘，但在移动设备上，65个字符（如果至少大到看得清）会超出浏览器的边界。所以，在移动设备上，你必须得缩减行宽。
移动端并没有普遍认可的行宽标准。不过传统上，报纸或杂志上每一个窄列都会趋向于39个字符。鉴于这个理想行宽已经经历了数个世纪的考验，它在移动端字体上也运转良好。
3. 宽松行距、紧凑行距
行距是行之间的空间，行距太紧凑，会让视线难以从行尾扫视到下一行首。行距太宽松，字间距会开始形成队列，产生了我们通常意义上的河流，阻断了行的视觉流。
从左至右：理想行距、太紧凑、太宽松。
行距的标准通常是1.4em，但以我的经验，这对于屏幕来说太紧凑了：在屏幕上表现良好的字体都有一个关键特征——大的凹槽，大凹槽需要更大一些的行距来保持空间层次。
反过来，更短的行宽需要更小的行距。所以你可能需要将桌面端的行距设得宽松点，同时记得将移动端的设置得紧凑些。
4. 找到最佳或是最舒服的状态
所有字体至少都有一种最佳状态，在屏幕上展现最佳的尺寸，还有在浏览器中最能保持字形的抗锯齿选项。
最佳状态下，多数笔画通常都能排列在像素网格中——像素字体，如果你还记得的话，那些字体仅仅在字号调整到最佳状态下才有效。
将字体设为最佳状态能形成更强烈的对比。为移动端设计时，对比尤其重要，因为户外的强光可能分散注意。
你会发现，微调行距会使每行脱离完美像素匹配。我觉得，在移动设备屏幕上，对比的重要性胜过行距。所以如果你不得不在行距上妥协，来保持每行契合像素网格，那就这么做吧。
通常设计师通过基线网格来排列文字。但在移动设备上，我们需要使用x高度来代替（x高度顾名思义，就是小写字母x的高度）。从易读性研究中，我们知道大脑识别的是文字顶部，而不是底部。所以要成就更加平顺的视觉流，我们要确保字符顶部最契合像素网格。
5. 不要忽视起伏边
起伏边是一段文字的边缘。你读的多数内容是居左对齐的（至少对于拉丁语系而言），导致右边沿参差不齐。
当视线从行尾跳至下一行首时，大脑最好要能判断出下一次跳跃的角度和距离。把每次跳跃都想象成跑过跳板，如果间距保持一致，就会快很多。因此，文字左侧边缘应该是平的，每行从同一个地方开始（对于从右至左的语言，恰好相反）。
因此你绝不应该将两三行以上的文字居中对齐。
通常文字会设置成两端对齐，这意味着每行文字所占空间相等，所以两侧都不会有起伏边。我怀疑两端对齐的流行和响应式设计有关，它教设计师们以块状形态思考。两端对齐的文字产生的留白不统一。最糟的情况会导致一行中只有几个字，相当不协调。更窄的行宽会加重两端对齐的问题，所以两端对齐的文字在移动端是难以阅读的。
从左至右：左对齐、居中对其、两端对齐。
如果整洁真的非常重要，那么使用连字符号来让起伏边更平滑，绝不能在移动端使用两端对齐。
文字右侧是起伏边在移动端还有一项额外好处：人们通常在易分心的场合阅读文字，读者视线频繁地从文字上移开——查看站名，或是接电话。起伏边创造了一个随机形状，让右撇子的视线可以通过重读最少的文字，回到刚才的位置。
6. 减少反差
增强文字与背景对比的同时，我们也要减少不同层次文字间的反差。
在移动端，实际可见的文字更少，所以反差被放大了。
其原因是我们的大脑基于环境来判断重要性。在桌面端，标题可能是正文字号的两倍甚至三倍，因为屏幕上有更多文字，所以这是有效的。在移动端，实际可见的文字更少，所以反差被放大了。
多数设计师使用斐波那契数列式的字号组合。在移动端，应该缩小比率来减少字号间的反差。比如，如果你使用黄金比例1.618与字号相乘。在移动端，应该用更小的比例1.382来替代。
桌面端屏幕比移动端容许更夸张的字号缩放。
7. 按比例调整字间距
为移动端调整字号时，我们要意识到字间距发生了必要的变化。
（先说一句，不应该调整固有字距。固有字距是两个字母相互组合时的距离，使它们的间距与其他字母间距在视觉上统一。创作字体时，就纳入了固有字距的考量，这个过程可能要花上数月。如果你选用了一款专业的字体，它的固有字距就是合适的，如果你觉得不对，请换一个字体。）
字间距并不是固有字距。字间距是字体中应用在所有字符上的间距。通常你也不应该调整字间距。
大字号是个例外，拿标题和小号文字（比如脚注）举例。大号文字需要减少字间距，小号文字需要增加字间距。前者是考虑到分组，后者则是为了增强对比。如果你在调整标题，或是用了通常字间距紧密的艺术字体，缩小时可能就需要把字间距放开一点。
移动端APPUI设计之字体排版设计总结：
字体是一门工艺，设计师终其一生都在精心打磨。的确如此，因为每个文字、每种字体和每项技术都带来了新的挑战。没有一成不变的普适规律。
假如你追求易读性，要牢记三条原则：行内的视觉流要平顺，空间层级要清晰，要有足够的对比。这尤其适用于移动端页面。
没有不可撼动的规则，全凭你双眼决断。不过本文的指南可以作为理想的出发点，让你在移动设备上优美地排列文字。
看完这里，25学堂推荐你看下《》和《》
原文地址：/-simple-rules-for-mobile-typography/
本文标题：
本文地址：/allcode/7767.html/comment-page-1
除非注明，本站文章均为原创或编译，转载请注明出处和原文链接，转载同时请务必保留原网站网址。
为你推荐的相关文章
优秀的移动互联网博文
Copyright@
All Rights Reserved ICP备案号：桂ICP备号-2本站声明所有资源均是网上搜集或网友上传提供，如有侵犯您的版权，请及时联系我们（），我们将尽快处理。