设计师一定要看的字体与排版应用指南

文字是界面中最重要的元素，是商品传达给用户的主要内容，它的承载体即是字体。前半部分从字体的最基本属性（字族、字号、字重、大小写等）说起，熟知字体的什么特征，知道字体在界面中有哪些用途，与iOS与Android系统字体的用法规范。字体入门知识字体是界面设计的基石字体是排版中非常重要的元素，对用户的阅读体验有着至关要紧有哪些用途。通常来讲，设计师需要知道的字体一般有中文字体和西文字体两种。西文字体由来已久，从最早的罗马字体到目前苹果手机中的SF-UI字体，历程了很多设计上的变革。而中文字体的进步并没西文字体那样顺利，数目上也远远落后于其他字体。但中国设计正在崛起，大家也看到愈加多的设计团队和设计师加入字体设计的队伍，数目上正在呈指数级别增加。设计是一门很严谨的学科，里面蕴含了不少道理，就连最基础的字体选择和排版，都经过了将近千年的进步和演变，有很多的专业常识。像平面设计一样，在UI设计中字体的用法也有相应的规范，设计师应了解这类入门知识，才能将字体为自己所用。本篇就从大家常见的设计软件（sketch、Figma、P hotoshop）字符面板开始，来聊聊有关字体与排版应用方面的常识。字体的那些属性Font 中文翻译为「字型」，是指字的粗细、宽度和样式，是一套具备同样风格和尺寸的字形。比如「Regular_16pt_SF-UI」。Typeface 中文翻译为「字体」，是指一整套的字形，一个或多个字型的多尺寸的集合，比如「SF-UI」里有不同粗细（Regular、Blod、Light）和不同宽度（12pt、14pt、20pt）。Glyph 中文翻译为「字形」，是指单个字的形体或是字体的骨骼。 同一字可以有不一样的字形，而不影响其表达的意思，比如汉字中的「令」字，第三笔可以是一点或一撇， 最末两笔可以作「ㄗ」或「マ」。Font和Typeface常常被混淆用，其实可以如此理解，前者指一种设计，后者指具体的商品。1. 族类 GenericFamily族类就是不同字体种类，比如阿里巴巴普惠体、方正新书宋、站酷酷黑体等。而这类海量字体又可分为「衬线体」和「无衬线体」。衬线体宋体就是衬线体，特征就是笔画开始和末端的地方都有额外的装饰，且笔画的粗细有所不同。在传统的正文印刷中，常见觉得衬线字体能带来愈加的可读性。容易见到的衬线体有宋体、Times New Roman、Georgia等。衬线体一般在APP中比较少见，文字阅读类偏爱这种衬线体，比如「单读」，大标题用的是「華康標宋體」、正文内容用的是「苹方-纤细」而英文用的是「XCross Traditional Bold」黑体黑体是无衬线字体，特征是笔画没额外的装饰，且笔画的粗细差不多。相比严肃的衬线体，简单干净的无衬线体给人一种休闲轻松的感觉。因此大部分App都是用黑体作为默认字体。如冬青黑体、思源黑体、Myriad等。2. 字族 FontFamily一个族类包括不一样的字体，然而一个字体又可能有好几种字族。假如电脑安装了Helvetica，在Sketch字体选择器中会发现超越40多个前缀是Helvetica的字族。这是为了帮助大家在不一样的用场景下表达适合的意思。要点设计师一定要看的字体与排版应用指南「若大家能以满怀新鲜的眼神去观照平时，「设计」的意义定会超越技术的层面，为大家的生活观和生活观注入力量。」（引自原研哉的《设计中的设计》）3. X-height（X字高）在西文字体中，x高度是指字母的基本高度，就是基线和主线之间的距离。它指一个字体中小写字母的x高度，在现代字体设计范围，x高度代表了一个字体的设计原因，因此在一些场所字母x本身并不完全等于x字高。除去字母a、c、e、m、n、o等高度一样，还有一些小写字母的字高都比x字高要大，并分为两类设计师一定要看的字体与排版应用指南一是适配后在@2x跟@3x不会出现半像素，二是用4为单位，能满足字体大小的均衡。5. 字重 FontWeightWeight，中文翻译为「字重」，是指字体笔画的粗细，字体中非常重要一个定义，不同字重传递出来视觉感受完全不同。一般在字体家族名后面注名Thin、Light、Regular、Blod、Black、Heavy等。不一样的字体厂家划分字重各有不同，比如「苹方」字体就有6种不一样的字重。一般都有细体、正常、粗体三种基本字族。在应用场景上，一般「细体」多用于超大号字体；「正常」用于正文内容；「粗体」表示强调，多用于标题；两种字重属性轻字重设计师一定要看的字体与排版应用指南视觉感受庄重，非常重要，常用在重点强调的文字，页面大标题，数字，引导行动操作点上等；比如百度网盘「发现」页就用了Regular、Medium、Semibold三种字重以拉开信息层次对比；要点设计师一定要看的字体与排版应用指南在进行界面设计时，不要用软件自带的文本加粗，它不只破坏了字体本身的美感，还改变了文字原来的字宽，小字体下会模糊不清，适当的方法是用字体本身的字重来控制粗细。注意超细体的字体字重超细的字体要小心用。假如你设计的文本是装饰性倒还好，若是需要用户能明确阅读的，就要特别慎重，能不需要就不需要，不然在部分低分辨率的手机屏幕上看着会很糟糕。6. 字色 FontColor字色即文字对应的颜色，不做过多讲解。需要大伙注意的是 离得远远的纯黑色和纯灰色！纯黑色就像没生命力的深渊，能吞噬所有细节，用户陷入冷冰冰的极端情绪中。纯黑色还会与白色产生强烈的对比度，看久了就会感觉疲劳，让用户产生焦虑情绪。还有就是真实世界中是没有纯黑色的。尝试在色彩中加入一些色相，如此就不会让页面看起来死气沉沉的。比如iOS系统「设置」页面背景色就是加入了白色的低饱和度蓝色，看起来柔和自然。7. 字符样式 FontStyle除去以上几个最常见的文字属性外，还有几个用频率比较低的字体设置。比如带下划线的、删除线的文本。「下划线文本」一般出目前「文字按钮」或带链接的网址，而「删除线文本」一般会出目前产品橱窗的现价、原价比如「CCtalk」的课程现价和原价的区别，原价用删除文本，「微信念书」文章底部「加入书架 随时阅读」就是带链接的下划线文本。8. 字符选项 Text optionsPs和Sketch都有文字（字符）选项一栏，主要针对西文字母大小写格式变换的设置。最容易见到有默认大小写、全部大写、全部小写和小型大写字母，Ps里面还有「上标」和「下标」。默认大小写设计师一定要看的字体与排版应用指南假如输入的是小写字母，选择这个选项，软件会强制把小写改为大写；全部小写设计师一定要看的字体与排版应用指南这个选项比较特殊，所谓「小型大写」就是，在字号一样的状况下，与小写字母一样高，外形与大写字母维持一致。注意英文大写纯大写的字母文本本身不太合适大篇幅阅读，会加强阅读障碍，用的时候注意要额外拉开字母之间的字间距，提高可读性。9. 全角与半角 Full-width and half-width全角是指一个字符占用两个标准字符的地方。中文字符、全角的英文字符、国标GB2312-1980中的图形符号、特殊符号都是全角字符。半角是指一个字符占用一个标准字符的地方。一般情况下，英文字母、数字、符号等都是半角字符。半角和全角主如果针对标点符号来讲的，由于正常状况下没打全角英文的需要。要点设计师一定要看的字体与排版应用指南在iOS中，默认字体单位是「pt」，正文字号不应小于11pt，建议在15-18pt之间。在用较大的字体来获得更好的易读性同时，也应该相应地减小字体的字重，由于过重的字领会太过显眼厚重，影响其他内容的显示成效。iOS更全方位的文字设置动态种类可以通过让读者选择他们喜欢的文本大小来提供额外的灵活性，除去标准的动态种类大小以外，iOS系统还为有阅读大字体的需要的用户提供了很多字号上的调整（可在系统字体显示大小设置）iOS「显示与亮度」下设置「文字大小」模式「苹方」和「SF-UI」字体可在iOS规范网站免费下载2. Android字体规范可用字体在Android设施中，Android始祖谷歌为了更好的追求视觉成效，联合了Adobe设计发布了「思源黑体」(Noto)来作为中文默认字体，「Roboto」为英文字体。字体种类思源黑体，英文名为「NotoSans CJK」。该字体不只在字形上更易于在屏幕阅读，并且拥有7种字重，充分满足了设计的需要。英文「Roboto」字体，只有6个字重，视觉语言与思源黑体Noto维持一致。该字体具备「现代的」和「平易近人」的风韵，是「Material Design」设计风格下的推荐字体。字体设置Material Design字体规范，字体种类比率支持的十三种样式的组合。它包括可重用的文本类别，每类型别都有预期的应用程序和含义。注设计师一定要看的字体与排版应用指南值得注意的是，在Android的字体单位中，不再以px，pt作为单位而是统一的用法了sp，换算方法是设计师一定要看的字体与排版应用指南OPPO的「OPPO Sans」设计师一定要看的字体与排版应用指南字体入门知识小结正如开头所说，文字是界面中最重要的元素，字体作为基本语言，是设计中体现品牌非常重要一点，字体选择尤为重要，字体也是设计中占比（约 80%）大的内容，所以大家必须要熟练学会，下面将从文字行高、字间距、行间距等说起，围绕字体排版继续聊。大家是怎么样阅读的设计中，好的排版能让用户愉快地阅读，而不好的排版则会给用户带来糟糕的阅读体验。因此排版的潜在重要程度不容忽略。无论是在西方国家还是亚洲国家，大多数大家的阅读习惯都是从左到右。这种阅读模式已经延续了几百年，因此如无特殊需要，你应该使你的文本左对齐，如此符合大家一贯的阅读习惯（阿拉伯区域除外）。人缺少耐性，在阅读过程中更似是一种远近不定的跳跃「扫视」。枯燥的文字假如没经过任何排版处置，会让读者瞬间失去阅读的兴趣，除非非读不可。所以通过改进文字内容的结构和排版来提升阅读性乃至「诱读性」，是一件十分必要的事情。文字排版中的容易见到元素1. 字间距与字偶间距字间距，英文名为「spacing」，即字符间的距离，事实上他是字符图形外边界框的尺寸和字符在方框中的地方的距离。字偶间距，英文名为「Kerning」，也叫做「字距调整」，是在字间距的基础上，为达成不同字偶（一对字符）可以有不同字间距的调整值。大家都了解，不一样的字母外形不同，所以只有同样的字间距是不协调的。比如，「NA」间是标准的字间距，而「WA」因为W和A的形状可以重叠，所以需要负字偶间距才能达到协调一致的外观。在大段落文字排版时，大家一般无需更改字间距和字偶间距，由于字体设计师已经对他们做过了最佳处置。在对一组字符单独设计时，就需要考虑字偶间距，以达到更协调的视觉成效。总的来讲，字号越小，字距应当相对越大，行高也应该相对越大。反之亦然。西文字间距还分为设计师一定要看的字体与排版应用指南依据字符外形特征设置不同字宽的字体，使得字体外形协调，可读性更好；等宽字体设计师一定要看的字体与排版应用指南即默认的字间距，字与字之间的距离不大也不小，在设计中要依据不一样的字号设置不一样的字间距来排版，总是需要大家依据字号、字重的不同动态调节间距参数，防止千篇一律用软件默认间距。紧凑间距设计师一定要看的字体与排版应用指南与紧凑型间距相反，字与字之间间距向外扩大，在字符工具里的「字间距」数值为正数，一般在5%~30%不等，一般用在正文中。要点设计师一定要看的字体与排版应用指南字间距虽然有以上三种形式，但在实质工作中也要具体问题具体剖析，比如有的中文字体本身「外边框」的距离就比较大，假如再加强字间距，就会看上去过于分散。3. 西文词距在西文阅读时，视觉上的自然界限是「词距」而不是「字距」。假如排版时需要进行比如「两端对齐」的行内间距调整，中文直接可以动「字距」，把调整量均匀地放到每一个字间里；而西文却是动「词距」，只能把调整量加到词距里，而单词内部的字距依旧是维持字体设计师预设的原始字距，这是保证西文易读性的重点所在。4. 标点避头尾在古时候，书本排版可以做到字间距恒定，缘由是古时候没有「标点」，也就没「标点避头尾」致使的种种问题。而现代汉语存在标点符号，有些标点不可以放在行首(如逗号、顿号、句号等)，有些不可以放在行尾(引号、前括号等)。处置方法叫做「优先推出式」标点避头尾，通过将本行内的标点宽度进行挤压后，腾出了空间给本来排不到的逗号，确保了字间距的恒定（篇幅限制，本文暂不谈文字编排具体调整办法）。更详细的介绍可移步字体设计与排印网站 Type is Beautiful 知道。5. 文本框在设计软件中，大家在添加文本时，就会创建一个文本地区，比如Sketch中文本地区有三类型型，自动宽度、自动高度、固定尺寸，而「固定尺寸」可配合「设置文字层垂直对齐方法」用。6. 对齐方法文本的对齐方向有左、中、右三种对齐方法。文本对齐的规范是基于文本地区的边界决定的，只有设置固定的文本地区对齐才有意义。7. 行高行高或行距是文字排版的基础参数，也是排版品质的先决要点之一。行高是一行文本垂直方向的高度，这个高度和字高无关，文字内容水平居中，如下图所示设计师一定要看的字体与排版应用指南提示设计师一定要看的字体与排版应用指南2.3.5 版心设计的需要注意的地方设计师一定要看的字体与排版应用指南段落与段落之间的距离，可维持页面步伐，与字体、行高相互关联。为保证文章易读性，正文段间距，可以简单地取一个空行（也就是一个行高），这是比较常规也做合适的做法。举例设计师一定要看的字体与排版应用指南暗色模式其实就是厂家为知道决电池耗电量而出的计策，只不过换了个噱头而已」总之，不管设计中用黑白、红绿、蓝黄哪一种色彩搭配，必须要注意文字和背景的对比是不是明确便于阅读。2. 重复 Repeated （统一有秩序）重复是维持整齐的要紧准则。既包含字体、字号的重复，也包含颜色、风格的重复。对于新人来讲，要时刻牢记，尽可能统一字体、字号、颜色等一系列元素，在统一的基础上，找出需要强调的部分，进行更改，通过对比原则进行强化。假如相同内容（如标题）是同一种逻辑关系，则应该使他们的字体、颜色、留白尽可能维持一致。如此可以增加内容的条理性，并加大设计的统一性。在重复原则下，用户会由于视觉惯性继续选招设计线索，依据重复性设计线索顺场地浏览下去。要点设计师一定要看的字体与排版应用指南页面中的元素以左基线对齐。左对齐是最容易见到的对齐方法，简洁大方，利于阅读；居中对齐设计师一定要看的字体与排版应用指南页面中的元素以右基线对齐。相对少见的对齐方法，给人一种人为干涉的感觉，加大了形式感，减少了阅读效率；4. 亲密性 Proximity （达成组织性）亲密性是达成视觉逻辑化的第一步，它是指关系越近的内容，在视觉上应该靠得越近，反之，关系越疏远的内容，在视觉上应该越远。简单的来讲就是要把画面中的元素分类，把每个分类做成一个视觉单位，而不是海量的孤立的元素。这能够帮助组织信息，降低混乱，为读者提供明确的结构。那做好亲密性有什么办法呢，私以为有以下几个方面设计师一定要看的字体与排版应用指南留白是设计中通用的万金油原则，通过留白打造距离关系进行内容区别；左图歌曲封面和歌曲名信息间隔比每首歌曲上下间距还大，致使用户的视线流呈垂直方向。分割设计师一定要看的字体与排版应用指南通过颜色的对比，不同颜色的信息会暗示这是同一类。容易见到的日历行程就是通过不同颜色来区别时间和具体事情。方向设计师一定要看的字体与排版应用指南用户一直喜欢明确、简单、自然、好使的设计和商品。但应该注意的是，除去交流必要信息以外，大家还期望界面在视觉上拥有吸引力，以唤起用户的某些情感。有了额外的目的（譬如品牌宣传、业务目的等），应该以适当的信噪比为目的，而不是以绝对的方法排除所有「无关」的信息。比如iOS6到iOS7图标拟物到扁平到改变，让用户可以更迅速准确的获得到有效信息。而这一过程，就是典型的放大「信号」。还有虾米音乐的驾驶模式我都了解，在开车的时候操作手机是很危险的。在40km/h的速度下，看手机3秒，等于盲驶了35米。但有的状况下又不能不操作手机，譬如紧急来电或者导航出错……这个时候，驾驶模式的界面就看上去非常重要了，让用户可以迅速准确的辨别信息并进行操作，可以大大提升行车的安全性。在界面中无论是何种分割方法(分割线、卡片阴影、分割色块)，过于浓重的表现都会干扰有效信息的获得，成为界面中的「噪音」，因此大家应该让它们细一点、淡一点来减少表现，或者干脆不要(留白分割)。图版率的高低对设计的影响图版率就是页面中图片面积的所占比。在网页设计中，除去文字以外，一般都会加入图片或是插图等视觉直观性的内容。这种文字和图片所占的比率，对于页面的整体成效和其内容的易读性会产生巨大的影响。当然，除图片本身外，大家也可以通过填充底色，图形叠底等方法来提升界面中的图版率。图版率高低有什么区别设计师一定要看的字体与排版应用指南通过填充页面底色，获得与提升图版率一样的成效，从而改变页面所呈现出来的视觉成效；假如素材图像尺寸小，可以通过色块的延伸或是图像的重复来组织页面结构，同样可以提升图版率；借助排版的步伐感与跳跃率（文字和图片的跳跃率，是指版面中大标题和大的图与最小正文字体和图片大小之间的比率）让无趣的版面充满活力，富有步伐的设计也能间接优化页面的图版率；增加页面中的图形也可以改变图版率低的问题。无论是数字、序号、图标，甚至是视觉处置后的标题文字，都能提升页面的视觉度，并给用户留下活跃生动的印象；假如页面中没图片和插图，那样通过对文字及其颜色的处置，也可以起到提升图版率有哪些用途；上面的例子中，对于标题文字都进行了视觉加工，起到了整体页面的装饰成效。借用对这种文字大小、颜色、形状的灵活运用，来突出页面的重点，防止视觉上的单调感。文字在代码中的达成及标注1. 文字在代码中的达成在开发落地的过程中，文字排版的开发达成是非常重要的一个环节，也是常常让设计师和开发小哥哥头疼不已的地方。字体和排版在达成上常常会出现偏差，重要原因在于开发的标注方法和设计软件不同。因此理解文字开发的达成方法，细节问题的解决方案至关要紧。在Android中，文字开发工作是通过一个叫TextView控件来达成的，主要承担文本显示的任务，任何APP都不可防止的会用到它。TextView常用属性如下图设计师一定要看的字体与排版应用指南这类有序排列中的每一个值，对应字体的字重。其大致符合下列通用重量名字设计师一定要看的字体与排版应用指南灰色表示该重量的字形没有、用的是相近重量的字形。△ 只包括400、700和900重量字形的字体家族的对应字重△ 只包括300和600重量字形的字体家族的对应字重3. 文本框行高的问题大家都了解在设计的时候，可能字体用的24pt，但其实字体本身占用的距离是包括了升部及降部地区的，如此就致使其占用空间大于24pt，而变成了33pt。每一个字体都有相应设定的「字高」比率，可以通过sketch选中字体后的height值来进行查询。线高越大，问题就越大。下面的示例显示文本框之间的距离设置为32px。如你所见，即便你将所有垂直间距都设置为相同的值，它们在视觉上也远大于32px。△ 虽然标注出来的参数都是一样大，但视觉上间距却是不同的4. Leading-Trim设计师一定要看的字体与排版应用指南你可以忽视边界框，而直接依据文本的大写高度和基线来测量空间。这是一个手工过程，由于大部分设计工具没上限高度和基线的参照目的，尽管设计师将尽所有努力使大家的设计看着更好！但，假如使用这种办法，开发职员仍将仅在CSS中达成边界框间距。因此，它们会出现随机的间距值。为了缓解此随机性问题，开发职员可以在CSS中以负边距「裁剪」文本框。但负边距将需要手工确定，并且是特定于字体的，因此是「随机的」。任何字体，浏览器，操作系统或语言环境的更改都将不可防止地致使你不小心设置边距。除此之外，该技术一般不是好的编码实践，并且可能致使意料之外的不良反应。Leading-Trim新规范Leading-trim是CSS工作组正在引入的新CSS属性。顾名思义，它就像文本框剪刀一样工作。你仅需用两行CSS，就能从你选择的参考试知识点中修剪掉所有多余的空间。代码示例设计师一定要看的字体与排版应用指南△用新规范对比发现，右图文字上下间距舒服多了，也更合理。Leading-Trim修复对齐问题借用Leading-Trim，可以解决在APP上看到的所有奇怪的对齐问题。比如，即便文字坐落于文本框内，你的文本也不一直在容器中垂直居中。默认行高中保留的多余空间会致使文本不一直在文本框中居中。用Leading-Trim修剪，就能非常省心的使文本垂直居中。要点设计师一定要看的字体与排版应用指南标注和规范。工具栏汇合了Measure所有功能的快捷工具，永远置于画布顶层，有了它就不需要再频繁通过菜单栏去用功能。做好规范后，点击「导出规范」一键自动生成Html页面，浏览器打开页面点击其中任何元素都可以查询其属性和间距，还包含代码样式，交给开发开发工程师后，不需要交流都能看清楚。△Sketch Measure导出标注的网页界面设计验收环节商品功能开发完成后，对商品对功能，视觉和交互操作进行测试和验收，确保商品的可用性。一般在功能模块验收完成后，就能开始具体的视觉设计验收，这也是由主要设计师负责的模块，主要验收颜色、字体、图形、间距、控件和空状况等。因本文主讲字体与排版，就拿这部分来讲，需要检视的就有设计师一定要看的字体与排版应用指南是不是用的平台默认字体，若是内置字体检查字体显示有没问题；字号设计师一定要看的字体与排版应用指南标题和正文字重是不是正确，粗体用的是哪一种，是Medium，还是SemiBold；字色设计师一定要看的字体与排版应用指南检查中文间距和英文间距，段落文字标点有无避头尾；行间距设计师一定要看的字体与排版应用指南设计师一定要看的字体与排版应用指南URL链接：