移动端UI界面设计之APP字体排版原则| 萧蕊冰

今天介绍的是移动端UI界面设计的有关APP字体排版原则的内容。除了电脑端的网站UI设计，移动端的界面设计也是UI设计中的一个重要部分，毕竟我们每个人平时身上带着的肯定有手机。今天萧蕊冰就介绍一下关于移动端UI界面设计的app字体的排版相关内容，感兴趣的可以接着往下看。

下面是七个APP字体的排版原则：

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、按比例调整字间距
为移动端调整字号时，我们要意识到字间距发生了必要的变化。

（先说一句，不应该调整固有字距。固有字距是两个字母相互组合时的距离，使它们的间距与其他字母间距在视觉上统一。创作字体时，就纳入了固有字距的考量，这个过程可能要花上数月。如果你选用了一款专业的字体，它的固有字距就是合适的，如果你觉得不对，请换一个字体。）

字间距并不是固有字距。字间距是字体中应用在所有字符上的间距。通常你也不应该调整字间距。

大字号是个例外，拿标题和小号文字（比如脚注）举例。大号文字需要减少字间距，小号文字需要增加字间距。前者是考虑到分组，后者则是为了增强对比。如果你在调整标题，或是用了通常字间距紧密的艺术字体，缩小时可能就需要把字间距放开一点。

以上就是今天分享的移动端UI界面设计之APP字体排版原则，可以做为你设计的参考，可以在移动设备上优美的排列文字。移动端的界面谁要注意空间层次的清晰，视觉看着要很平顺，舒服，有足够的对比。希望本文对你的UI设计排版有所帮助。

移动端UI界面设计之APP字体排版原则| 萧蕊冰相关推荐

移动端UI界面设计：APP字体排版设计的七个原则
移动端UI界面设计:APP字体排版设计的七个原则发布于: 2015 年 2 月 9 日 by admin 再来谈移动端APP字体排版设计,也许有人会说,这个还有什么好说的呢?但是真正能够运用好APP ...
ui设计移动端字体适配_移动端UI界面设计：APP字体排版设计的七个原则
再来谈移动端APP字体排版设计,也许有人会说,这个还有什么好说的呢?但是真正能够运用好APP字体设计的人还真的不多.不信,我们往下看看这个7个移动端字体设计原则吧! 1. 留足空间与普遍观点恰好相反 ...
移动端UI界面设计之-注册登录
注册登录是移动端UI界面设计中最基础的板块之一,界面看似简单,但是想设计一个让人眼前一亮的注册登录界面并非易事.今天,小编将和大家一起来聊聊移动端UI界面设计之-登录注册那些事.希望能对设计的朋友有所 ...
怎么做极简ui设计？UI界面设计中的极简原则【萧蕊冰】
怎么做极简ui设计?近几年,互联网的飞速发展引起了科技领域的巨大浪潮,UI设计行业需求大量专业优秀人才,吸引了很多想要学习UI设计的人.UI设计也就是用户界面的设计,作为引导用户快速正确使用产品的主要 ...
UI设计转行交互怎么样？【萧蕊冰】
最近听到很多人在问这个问题:UI设计转行交互怎么样?交互设计和UI有多大的区别?到底该不该转行交互设计?今天这篇文章萧蕊冰就来分析一下UI设计转行交互设计的好坏,希望对大家有所帮助.感兴趣的可以继续往 ...
android界面设计所用中文什么字体,手机软件中的字体是什么字体,ui界面设计用什么字体...
做移动UI设计的设计师肯定都知道,移动客户端的界面上做效果的时候提前找所用的字体,特别注意在windows下设计的字体和实际UI界面上显示的效果很大的差别. 项目开始时,设计师可以提前和开发沟通好,就 ...
UI界面设计都有哪些基础原则和规范
用户界面(UserInterface)又称人机界面,是指软件用于与用户沟通的外观.部件和程序,简称UI,这是用户与智能手机沟通的平台和纽带,也是用户感知.认知.使用和体验软件的主要媒介. 一般来说, ...
入门必看！ui设计分类有哪些？【萧蕊冰】
你知道ui设计分类有哪些吗?很多想转行的萌新同学们可能并不太了解UI设计行业的一些基本情况,那么UI设计的分类到底有哪些呢?你到底适合做哪个类型的设计呢,今天这篇来介绍一下UI设计分类. UI是用户界 ...
UI素材模板|App搜索页UI界面设计版式
无论是在app还是在web端,搜索都是一个发现内容的重要方式.与web端不同,app上的搜索功能在设计方面有自己独特的展现方式. 下面就看看这些App搜索页UI界面设计吧. 工作搜索App免费UI ...

移动端UI界面设计之APP字体排版原则| 萧蕊冰

移动端UI界面设计之APP字体排版原则| 萧蕊冰相关推荐

最新文章

热门文章