查看: 1230|回复: 0
打印 上一主题 下一主题

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

[复制链接]

1240

主题

11

听众

6720

积分

版主

Rank: 7Rank: 7Rank: 7

纳金币
5474
精华
6

荣誉管理 论坛元老 突出贡献 优秀版主

跳转到指定楼层
楼主
发表于 2017-3-31 16:11:17 |只看该作者 |倒序浏览
无论你是做网页还是App设计,文字内容总是能占到整个版面将近80%的区域。因此理解字体与排版对ui设计师来说非常关键。你需要始终把内容的可读性放在首位去考虑和权衡你对字体与排版的选择。
1.jpg
字体的基础术语
了解字体设计的基础术语非常重要,这些术语在介绍字体设计的相关文章中经常出现。比如 x-height(X字高)指的是从字母的基准线开始往上到最矮字母的顶端的距离,当X字高的比例相对大一些的话就能增加易读性。
2.png
汉字字形
在大多数情况下我们都选择使用系统自带的字体,比如微软雅黑、宋体、黑体等来定义标题和内容,但有时,我们在做Logo,banner设计时也需要通过对字体进行改造,来达到更加理想的效果。这时我们就需要掌握汉字的字形结构以及一些最基本的设计原则。
3.png
衬线字与非衬线字
在西方国家的字母体系,分成两大字族:serif(衬线字体)及sans serif(无衬线字体)。衬线字(下图中的宋体、Times New Roman)是指在字的笔画开始及结束的地方有额外的装饰,而且笔画的粗细会因直横的不同而有所不同。 相反的,无衬线字(下图中的思源黑体、Helvetica)就没有这些额外装饰,而且笔画粗细大致上是差不多。
衬线字的字体较易辨识,也因此具有较高的易读性。 反之无衬线字则较醒目。通常来说,需要强调、突出的小篇幅文字一般使用无衬线字,而在长篇正文中,为了阅读的便利,一般使用衬线字。在实际应用中,因为中文的宋体和西文的衬线体,中文的黑体和西文的无衬线体,在风格和应用场景上相似,所以通常搭配使用。
4.png
字体排版建议
在你对字体排版技巧了如指掌之前,首先需要保证你的内容能够简单且清晰地展现出来。优秀的文字与排版使我们更愿意去阅读,所以最好先关注你所设定的字体和排版是否便于阅读,然后再考虑为了美观改进行修饰。我们可以参考这篇英文指南:优秀字体排版的5条原则 并且将文中的这些原则应用到我们的App和Web设计中去。
iOS中的系统字体
随着iOS 9系统以及EI Capitan系统的发布,现在的系统字体变为了Apple自己设计的 [San Francisco]。iOS仍然在其他地方使用SF UI,而在Apple Watch中使用SF Compact。
5.jpg
San Francisco 有两类尺寸: 文本模式(SF UI Text)和展示模式(SF UI Display)。 文本模式适用于小于20 points的尺寸,展示模式则适用于大于20 points的尺寸。当你在你的app中使用San Francisco时,iOS会自动在适当的时机在文本模式和展示模式中切换。
:如果你使用诸如Sketch或photoshop的工具来进行设计,那么当你设置的字体大于等于20 points的时候,你需要切换到展示模式。iOS会根据字体大小为San Francisco自动调整字间距。
6.jpg
选择Body字体
为body text挑选合适的字体是最重要的。务必选择那些可读性强的,看上去干净易读的字体。我推荐的常用英文字体有:San Francisco, Helvetica Neue, Avenir Next, Open Sans, Museo Sans。中文字体则有,华文细黑,思源黑体。
7.png
字体的大小
在iPhone,iPad,iWatch 中设置的Body字体不应该小于11pt,这样才能被正常阅读。我们推荐的Body文本大小应该在15-18pt。
8.jpg

9.png
字体的字重
当我们设置更大的字体来获得更好的易读性的同时,我们也应相应地减小字体的字重(粗细),考虑Light,Thin或者Ultra Thin。过重的字体会太过醒目,从而影响其他内容的显示效果。
当字体大小为12-18pt时,使用Regular,18-24pt时,使用Light,24-32pt,使用Thin,当字体大小超过32pt时,建议使用Ultralight。以上都是建议值,你应该根据不同字体的显示效果进行设定使文字内容看上去清晰和精致,从而保持良好阅读体验。
10.png
现代字体都有多种字重设置:Regular,Light,Thin和Ultralight
合理设置行高,让文字也能够呼吸
行间距(leading)应该设置为字体大小的120%到145%之间。
11.png
在右边的例子中,行高设为了与字体高度相同的100%,而在左边的例子中,我将它设为145%。它们的显示效果有着非常明显差异。当字数进一步增加时,你更会发现阅读行距设置过小的大段文字会非常累。合理设置行高,也是一种留白的技巧,能够增强用户的阅读体验。
每行45-90个字
行长指单行文字的长度,如果一行中包含的字数太多,文本内容将会很难阅读。英文字符一般在45-90字比较适宜,而中文35-60字为宜。合理的行长使用户在行间跳转时非常感到轻快和愉悦,反之则会使阅读成为一种负担。
12.png
字体样式
字体样式对易读性和快速浏览非常重要,一般的原则是,被修饰的文本不应超过整个文本的10%,如果所有文本都都通过修饰被强调的话,那反而就不是强调了。当然,一次不应该同时使超过三种的强调样式。换句话说,不要在同一段文本中同时使用,颜色,字体改变,大小,下划线,斜体,粗体。
13.png
寻找合适的字体
大部分商用字体都很贵,但也有很多优秀的字体是免费的。你只需要从中挑选你最喜欢的字体,并应用到你的设计中就可以了。下面就介绍几个非常优秀的字体网站。
Google Fonts (需梯子)
在Google Fonts,你可以免费下载你喜欢的字体,并且按照你的需要在项目中使用。由于在iOS中使用其他字体的唯一方法就是将字体文件导入到系统中,因此Google Fonts的下载功能非常有用。Google Fonts包含超过1400种不同的字体,其中包含最著名的:Open Sans和Roboto字体,他们是Android系统使用的默认字体。
14.png
你可以使用Mac上的SkyFonts来自动同步字体到你的桌面。
游客,如果您要查看本帖隐藏内容请回复



分享到: QQ好友和群QQ好友和群 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
转播转播0 分享淘帖0 收藏收藏0 支持支持0 反对反对0
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

手机版|纳金网 ( 闽ICP备2021016425号-2/3

GMT+8, 2024-11-1 07:26 , Processed in 0.100975 second(s), 35 queries .

Powered by Discuz!-创意设计 X2.5

© 2008-2019 Narkii Inc.

回顶部