首页 > 建站资源 > 网站运营 > 想让界面优雅易读?聊聊移动端字体7个准则

想让界面优雅易读?聊聊移动端字体7个准则

时间:2015-02-11    来源:可乐橙

7-simple-rules-mobile-typography-1

@十萬個為什麽 :可能你听过这说法,好的字体是隐形的,不过更准确来说,应该是好的字体让阅读行为毫不费力。今天分享移动端字体7个准则,希望能帮你快速提升移动端的易读性。

当视线掠过一行文字时,它是跳跃前进的,我们称之为扫视。你读的不是字母,甚至不是词语,而是文字某部分的影像,大脑会补上它预期的内容。如果超出大脑预料,它会促使眼睛回去核实假设十分正确。通过在字里行间创造平顺的视觉流动,好的字体极度减轻了眼睛的负担。

对任何字体工作者而言,在移动设备上要面临与生俱来的挑战:空间有限,环境光通常比较微弱。不过将已经用于web端的技巧稍加调整,我们就可以提升移动设备的易读性。

一、留足空间

与普遍观点恰好相反,字体并非屏幕上弯弯曲曲的线条排列;它主要在于周围和相互间的空间。

字母本身对字体的影响,与构成它的空间相比,要小得多。

要理解这一点,了解字体从何而来很有帮助:字母o(还有b、c、p等等)中间的圆孔被称作“凹槽”。在最原始的印刷机上,铅字由金属雕刻而成,这些凹槽来自雕刻成型、排列在盘中的金属活字。第一个字体设计师所处理的模具,实际上并不能用于印刷。字母本身对字体的影响,与构成它的空间相比,要小得多。

谈到层次时,我们通常指的是h1到p,有时候还会到h6。但另外还有一种层次在影响着行或段落的视觉流,这是特殊的层次:字母间距小于字间距,字间距小于行间距,以此类推。

要在移动端创造最佳易读性,尤其要注意这些特殊层次,这些格式塔式的词语、行、段落的文字组合,在自然光环境下同样至关重要。

二、行宽

行宽是一行文字的长度。或者确切的说,是一行文字的理想长度,因为很难让每一行都精确吻合。

众所周知,舒适阅读的理想行宽是65个字符左右。行宽产生的物理长度,取决于字体的设计、字间距(见下文)和你使用的具体文字。本文开篇的65个字符(译者注:此处请参见英文原文),用PT Serif字体是26.875em宽,用Open Sans是28.4375em宽,用Ubuntu字体是27.3125em宽。如果再加入斜体、大小写和一大堆其他字体细节,还会有更大的差异。

在桌面端浏览器中,65个字符很难触及边缘,但在移动设备上,65个字符(如果至少大到看得清)会超出浏览器的边界。所以,在移动设备上,你必须得缩减行宽。

移动端并没有普遍认可的行宽标准。不过传统上,报纸或杂志上每一个窄列都会趋向于39个字符。鉴于这个理想行宽已经经历了数个世纪的考验,它在移动端字体上也运转良好。

三、宽松行距、紧凑行距

行距是行之间的空间,行距太紧凑,会让视线难以从行尾扫视到下一行首。行距太宽松,字间距会开始形成队列,产生了我们通常意义上的河流,阻断了行的视觉流。

leading

从左至右:理想行距、太紧凑、太宽松。

行距的标准通常是1.4em,但以我的经验,这对于屏幕来说太紧凑了:在屏幕上表现良好的字体都有一个关键特征——大的凹槽,大凹槽需要更大一些的行距来保持空间层次。

反过来,更短的行宽需要更小的行距。所以你可能需要将桌面端的行距设得宽松点,同时记得将移动端的设置得紧凑些。

四、找到最佳状态

所有字体至少都有一种最佳状态,在屏幕上展现最佳的尺寸,还有在浏览器中最能保持字形的抗锯齿选项。

最佳状态下,多数笔画通常都能排列在像素网格中——像素字体,如果你还记得的话,那些字体仅仅在字号调整到最佳状态下才有效。

将字体设为最佳状态能形成更强烈的对比。为移动端设计时,对比尤其重要,因为户外的强光可能分散注意。

你会发现,微调行距会使每行脱离完美像素匹配。我觉得,在移动设备屏幕上,对比的重要性胜过行距。所以如果你不得不在行距上妥协,来保持每行契合像素网格,那就这么做吧。

通常设计师通过基线网格来排列文字。但在移动设备上,我们需要使用x高度来代替(x高度顾名思义,就是小写字母x的高度)。从易读性研究中,我们知道大脑识别的是文字顶部,而不是底部。所以要成就更加平顺的视觉流,我们要确保字符顶部最契合像素网格。

相关推荐
网页设计中的文字排版、选择等字体设计经验
百度官方出品!2015-2016交互体验趋势
移动界面设计:为什么你用的App 菜单都放在底部
20大UI设计原则 设计师必备宝典
APP应用设计教程:设计元素的应用条件
设计完美的界面排版10个要点分享
让UI设计显得更简约的小技巧分享
细说用户体验设计背后的“黑暗模式”
遵循用户需求的设计:最美APP的9条闪光定律
微软发布Windows 8.1更新 针对鼠标键盘用户
企鹅进化论 细数那些年我们一起用过的QQ
用户界面设计教程:UI设计六要素分享
谷歌将推新设计语言 统一安卓用户界面设计
今日最佳设计:人像即按钮 社交应用新趋势
细节决定成败!提高用户登录体验的5个细节
百设网:专注于应用界面设计的作品交易网站
好看好用?UI设计师不可不学的易用性原则
如何给Android产品设计一款合适的图标?
分享设计:Froont打造网站设计界的Github
2014年八个最棒UI设计灵感:你最中意哪个?
Web APP与原生APP有哪些交互设计区别?
天天喊着学UI 你知道安卓和iOS的区别吗?
连按钮都设计不好 你还指望用户点击?
分享为SOUNDWAVE设计WATCH应用的五个技巧
这是个看脸的世界 即便你是APP也是如此
再见METRO!WINDOWS 10通用应用设计趋势分析
以微信网易为例:新闻型产品列表设计分析
超实用干货!视觉设计师的五项技能修炼方法
界面设计:从减少点击次数到降低使用负荷
简约至上:教你打造用户喜爱的产品设计风格
用户为王!关于征询授权、注册及加载等待的体验优化
APP产品设计:让用户看见 才是王道!
简约之道:极简风格界面设计的起源与发展
nice 启示录: 看移动 App 的产品设计和运营策略
超实用干货!深聊时下最热门应用的11种设计模式

精彩推荐

热门教程