全面的UI设计字体与排版指南

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


  字体的基础术语

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


  汉字字形

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


  衬线字与非衬线字

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

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


  字体排版建议

  在你对字体排版技巧了如指掌之前,首先需要保证你的内容能够简单且清晰地展现出来。优秀的文字与排版使我们更愿意去阅读,所以最好先关注你所设定的字体和排版是否便于阅读,然后再考虑为了美观改进行修饰。

  iOS中的系统字体

  随着iOS 9系统以及EI Capitan系统的发布,现在的系统字体变为了Apple自己设计的 [San Francisco]。iOS仍然在其他地方使用SF UI,而在Apple Watch中使用SF Compact。


  San Francisco 有两类尺寸: 文本模式(SF UI Text)和展示模式(SF UI Display)。 文本模式适用于小于20 points的尺寸,展示模式则适用于大于20 points的尺寸。当你在你的app中使用San Francisco时,iOS会自动在适当的时机在文本模式和展示模式中切换。

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


  选择Body字体

  为body text挑选合适的字体是最重要的。务必选择那些可读性强的,看上去干净易读的字体。我推荐的常用英文字体有:San Francisco, Helvetica Neue, Avenir Next, Open Sans, Museo Sans。中文字体则有,华文细黑,思源黑体。


  字体的大小

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


  字体的字重

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

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


  现代字体都有多种字重设置:Regular,Light,Thin和Ultralight

  合理设置行高,让文字也能够呼吸

  行间距(leading)应该设置为字体大小的120%到145%之间。


  在右边的例子中,行高设为了与字体高度相同的100%,而在左边的例子中,我将它设为145%。它们的显示效果有着非常明显差异。当字数进一步增加时,你更会发现阅读行距设置过小的大段文字会非常累。合理设置行高,也是一种留白的技巧,能够增强用户的阅读体验。

时间: 2024-11-03 13:57:03

全面的UI设计字体与排版指南的相关文章

《iOS 9 开发指南》——第6章,第6.9节实战演练——纯代码实现UI设计

6.9 实战演练--纯代码实现UI设计iOS 9 开发指南在本节的内容中,将通过具体实例讲解另外一种实现UI界面设计的方法:纯代码方式.在本实例中,将不使用Xcode 7的故事板设计工具,而是用编写代码的方式实现界面布局. 实例6-2 将Xcode界面连接到代码(1)使用Xcode 7创建一个iOS 9程序,在自动生成的工程文件中删除故事板文件.如图6-33所示. (2)开始编写代码,文件AppDelegate.h的具体实现代码如下所示: #import <UIKit/UIKit.h> @in

中国UI设计网站长郝晓伟访谈

设计|站长 编者:中国UI设计网 ChinaUI.com 是一个以UI(用户界面User Interface的简拼,下同)设计为主,其它设计为辅的专业人机界面设计网站.旨在增进UI设计师之间的交流,推动中国UI设计的发展.中国UI设计网以展示UI设计作品为主要功能,汇集了国内外设计精品.通过互联网,为处在不同地域的设计师搭起互相交流学习的桥梁.中国UI设计网2003年成立,短短两年时间就发展成为国内最大的UI设计主题的设计类网站,今天我们采访了ChinaUI站长郝晓伟,聊一聊中国UI设计网. 中

设计界面的细节表现:按钮UI设计方法

网页制作Webjx文章简介:按钮UI设计方法. 上一节我写了在生活中找到按钮设计的元素,这一节中我也会延续生活中的设计这个观点,这一节写的是按钮在界面中运用设计,那么我们怎么从生活中来找到灵感呢,一直觉得做设计就是做原色的统一和对比,无论是平面.UI界面.数码.环境空间.服装等,一切设计概莫能外.有对比就会有统一,对比统一是设计师最容易也是最难拿捏的部分.这些往往都是设计师在自己的工作和学习中总结的属于自己的学习方法. 那么下来我就说说我在界面设计中按钮设计的运用方法和大家一起分享.一起学习.一

史上最全的43款字体设计工具大集合

  01. PicLab 利用照片编辑器,快速给照片添加流行的字体. 平台: iOS (iPhone and iPad), Android PicLab 能够利用应用内建的照片编辑器,快速给照片添加流行的字体.可选字体很多,还可以调整位置.不透明度.旋转角度.颜色.装饰等等. 02. A Beautiful Mess 为照片加上漂亮的字体装饰. 平台: iOS (iPhone and iPad) 可选字体很多,效果也很多 03. Typography Live Wallpaper 这款应用内含A

Android UI设计系列之HTML标签实现TextView设置中文字体加粗效果(6)_Android

搞软件开发的都知道项目中各种需求都有,而有时候各种奇葩的需求真是让人大跌眼镜,为了实现这些奇葩的需求我们往往苦逼的废寝忘食,我现在的项目中就有一个应该算得上奇葩的需求吧,需求是这样的:在一段文字中实现对部分文字加粗这个看上去也不难并且有点小儿科,因为TextView中有个属性是Android:textStyle,它其中一个值是bold,也就是说是对将要显示的文字进行加粗,于是我就在TextView控件中添加了此属性,代码如下: <TextView android:layout_width="

11个最好的UI设计

  UI设计可以成就或者毁掉你的网站和应用:怎么做才对呢? 在网页设计中,好的用户界面和UI设计的宗旨在于帮助用户尽可能简单和高效的完成特定任务.虽然视觉和感受也很重要,但是好的UI设计的核心永远是功能:对于导航来说,必须是达到不可见的直观.只要用户会迷路或者不知道去哪儿,这个UI设计就是失败的. 一些例举的网站和应用可能有不同的设计原则和功能,但是它们有一个共同点-高效的UI设计,完美解决上面的问题甚至更加到位.让我们来看看它们是如何做到的. 01.栅格 Grid 应用"栅格"顾名思

先掌握科学有效的UI设计自学姿势

  这可能是有史以来最值得阅读转发的一篇UI设计自学指南.作者是个全栈设计师,在临摹了大量教程,掌握了PS.AI等软件后才发现自己对于真正的设计一无所知,因此写了这篇文章,希望能帮大家用正确的方式学习UI设计,不要本末倒置,在错误的路上浪费时间. 写给UI设计初学者们 几乎每隔几天我便能在简书或其他各类设计网站看到关于自学UI设计的分享文章.这些文章有一个共同的特点,就是描述作者如何从一个零基础的设计小白,通过种种途径,成长为一个熟练掌握PS或AI的设计达人的,亦或是分享了一堆有参考价值的设计类

26岁的平面新手,是否还有转UI设计的可能?

  乐天+方法派 @烧炖 :做UI有时候确实看天赋,认识不少非设计专业出来的设计师,自学半年后入行工作,不到一年时间就做的很赞了.但努力是能弥补这些天赋上的差距的,毕竟UI不完全是靠艺术天赋的,某些角度来也算个理性活儿. @李总李总脑壳有点肿 :实用指南: 报个UI设计班最效率 读完后,投小公司,记得,强调做过外包但没上线,别说自己培训学校出来的,有丰富的电商工作经验,意味着,你既可以做UI还能把专题页做了,小公司喜欢. 进了公司就没啥可怕了,需求一来逼都逼得你成长. 别怕,你学校学的基础知识基

UI设计的五大原则

关于UI设计规范,互联网上有各种各样的说法,归根结底,离不开以下五大原则,它们能让你的软件操作更加舒适简单,体现产品定位和特点. 一.一致性原则 坚持以用户体验为中心设计原则,界面直观.简洁,操作方便快捷,用户接触软件后对界面上对应的功能一目了然.不需要太多培训就可以方便使用本应用系统. 字体 -保持字体及颜色一致,避免一套主题出现多个字体; -不可修改的字段,统一用灰色文字显示. 对齐 -保持页面内元素对齐方式的一致,如无特殊情况应避免同一页面出现多种数据对齐方式. 表单录入 -在包含必须与选