基本信息
文件名称:一份详尽全面的UI设计字体与排版指南.docx
文件大小:2.82 MB
总页数:16 页
更新时间:2025-06-04
总字数:约3.47千字
文档摘要

SEO排名

SEO排名“://yuntask/“://yuntask/

云客网您网站的流量加油站

一份详尽全面的UI设计字体与排版指南

无论你是做网页还是App设计,文字内容总是能占到整个版面将近80%的区域。因此理解字体与排版对UI设计师来说格外关键。你需要始终把内容的可读性放在首位去考虑和权衡你对字体与排版的选择。

字体的根底术语

了解字体设计的根底术语格外重要,这些术语在介绍字体设计的相关文章中常常消灭。比方x-height(X字高)指的是从字母的基准线开头往上到最矮字母的顶端的距离,当X字高的比例相对大一些的话就能增加易读性。

汉字字形

云客网您网站的流量加油站

在大多数状况下我们都选择使用系统自带的字体,比方微软雅黑、宋体、黑体等来定义标题和内容,但有时,我们在做Logo,banner设计时也需要通过对字体进展改造,来到达更加抱负的效果。这时我们就需要把握汉字的字形构造以及一些最根本的设计原则。

衬线字与非衬线字

在西方国家的字母体系,分成两大字族:serif(衬线字体)及sansserif(无衬线字体)。衬线字(以下图中的宋体、TimesNewRoman)是指在字的笔画开头及完毕的地方有额外的装饰,而且笔画的粗细会因直横的不同而有所不同。相反的,无衬线字(以下图中的思源黑体、Helvetica)就没有这些额外装饰,而且笔画粗细大致上是差不多。

衬线字的字体较易辨识,也因此具有较高的易读性。反之无衬线字则较醒目。通常来说,需要强调、突出的小篇幅文字一般使用无衬线字,而在长篇正文中,为了阅读的便利,一般使用衬线字。在实际应用中,由于中文的宋体和西文的衬线体,中文的黑体和西文的无衬线体,在风格和应用场景上相像,所以通常搭配使用。

云客网您网站的流量加油站

字体排版建议

在你对字体排版技巧了如指掌之前,首先需要保证你的内容能够简洁且清楚地呈现出来。优秀的文字与排版使我们更情愿去阅读,所以最好先关注你所设定的字体和排版是否便于阅读,然后再考虑为了美观改进展修饰。我们可以参考这篇英文指南:优秀字体排版的5条原则并且将文中的这些原则应用到我们的App和Web设计中去。

iOS中的系统字体

随着iOS9系统以及EICapitan系统的公布,现在的系统字体变为了Apple自己设计的[SanFrancisco]。iOS仍旧在其他地方使用SFUI,而在AppleWatch中使用SFCompact。

云客网您网站的流量加油站

SanFrancisco有两类尺寸:文本模式(SFUIText)和展现模式(SFUIDisplay)。文本模式适用于小于20points的尺寸,展现模式则适用于大于20points的尺寸。当你在你的app中使用SanFrancisco时,iOS会自动在适当的

时机在文本模式和展现模式中切换。

注:假设你使用诸如Sketch或Photoshop的工具来进展设计,那么当你设置的字体大于等于20points的时候,你需要切换到展现模式。iOS会依据字体大小为SanFrancisco自动调整字间距。

云客网您网站的流量加油站

选择Body字体

为bodytext选择适宜的字体是最重要的。务必选择那些可读性强的,看上去干净易读的字体。我推举的常用英文字体有:SanFrancisco,HelveticaNeue,AvenirNext,OpenSans,MuseoSans。中文字体则有,华文细黑,思源黑体。

云客网您网站的流量加油站

字体的大小

在iPhone,iPad,iWatch中设置的Body字体不应当小于11pt,这样才能被正常阅读。我们推举的Body文本大小应当在15-18pt。

云客网您网站的流量加油站

字体的字重

云客网您网站的流量加油站

当我们设置更大的字体来获得更好的易读性的同时,我们也应相应地减小字体的字重(粗细),考虑Light,Thin或者UltraThin。过重的字体会太过醒目,从而影响其他内容的显示效果。

当字体大小为12-18pt时,使用Regular,18-24pt时,使用Light,24-32pt,使用Thin,当字体大小超过32pt时,建议使用Ultralight。以上都是建议值,你应当依据不同字体的显示效果进展设定使文字内容看上去清楚和精巧,从而保持良好阅读体验。

现代字体都有多种字重设置:Regular,Light,Thin和Ultralight合理设置行高,让文字也能够呼吸

行间距(leadi