移动端UI界面设计:APP字体排版设计的七个原则

发布于: 2015 年 2 月 9 日 by admin

再来谈移动端APP字体排版设计,也许有人会说,这个还有什么好说的呢?但是真正能够运用好APP字体设计的人还真的不多。不信,我们往下看看这个7个移动端字体设计原则吧!

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. 按比例调整字间距

为移动端调整字号时,我们要意识到字间距发生了必要的变化。

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

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

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

移动端APPUI设计之字体排版设计总结:

字体是一门工艺,设计师终其一生都在精心打磨。的确如此,因为每个文字、每种字体和每项技术都带来了新的挑战。没有一成不变的普适规律。

假如你追求易读性,要牢记三条原则:行内的视觉流要平顺,空间层级要清晰,要有足够的对比。这尤其适用于移动端页面。

没有不可撼动的规则,全凭你双眼决断。不过本文的指南可以作为理想的出发点,让你在移动设备上优美地排列文字。

看完这里,25学堂推荐你看下《移动APP界面设计分享:文字阅读体验设计篇》和《移动APP阅读体验设计之四个对比设计》

原文地址:http://www.webdesignerdepot.com/2015/02/7-simple-rules-for-mobile-typography/

移动端UI界面设计:APP字体排版设计的七个原则相关推荐

  1. ui设计移动端字体适配_移动端UI界面设计:APP字体排版设计的七个原则

    再来谈移动端APP字体排版设计,也许有人会说,这个还有什么好说的呢?但是真正能够运用好APP字体设计的人还真的不多.不信,我们往下看看这个7个移动端字体设计原则吧! 1. 留足空间 与普遍观点恰好相反 ...

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

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

  3. 移动端UI界面设计之-注册登录

    注册登录是移动端UI界面设计中最基础的板块之一,界面看似简单,但是想设计一个让人眼前一亮的注册登录界面并非易事.今天,小编将和大家一起来聊聊移动端UI界面设计之-登录注册那些事.希望能对设计的朋友有所 ...

  4. pc端ui图片尺寸_PC端UI界面设计规范分享 共同来学习_ui设计

    如果你也是从事UI界面设计工作的话,那么,必然会接触到PC端的相关的设计,对于这部分内容,我们必须要掌握住PC端UI界面设计规范的知识,如果你已经准备好的话,下面就让我们一起学习下吧. 1.PC端是什 ...

  5. 分享17个网页设计中字体排版的优秀示例

    网页中的字体的使用和排版是一门学问,这篇文章带给大家17个网页设计中字体排版的优秀作品.下面收集的这些网站作品都是精心挑选的优秀国外网站作品,丰富多彩,大胆的相当干净和简单的设计,当然也有一些好的灵感 ...

  6. UI设计中的排版设计技巧

    不知道大家有没有遇到过这样的情况,在排版的时候咔咔一顿操作,图形字母四处飞,试了一遍又一遍,但最后却发现效果并不咋地!反正我是经常遇到这种情况,其实原因就在于我并没有理清思路,如果我能把排版的思路想清 ...

  7. 移动端字体排版设计准则

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

  8. 美团开源Graver框架:用“雕刻”诠释iOS端UI界面的高效渲染

    Graver是一款高效的UI渲染框架,现已开源,它能以更低的资源消耗来构建十分流畅的UI界面. Graver 是一款高效的 UI 渲染框架,它以更低的资源消耗来构建十分流畅的 UI 界面.Graver ...

  9. 携程移动端 UI 界面性能优化实践

    UI 卡顿原理和原因 人类大脑与眼睛对一个画面的连贯性感知其实是有一个界限的,譬如我们看电影会觉得画面很自然连贯,其帧率通常为 24fps:那么,用手机当然也需要感知屏幕操作的连贯性(尤其是动画过渡) ...

最新文章

  1. 表单数据自动录入_智能记账系统,公式已设好,可直接录入数据,凭证报表自动生成...
  2. python多线程写同一文件_Python多线程写文件实例
  3. 上传文件实时显示网速怎么实现_担心PC程序吃内存占网速?有了它终于放心了...
  4. 社会生存的75条忠告----胜读十年书【转】
  5. POJ 2871 整数奇偶排序
  6. 【其他】使win7尽量少占用C盘空间
  7. java jackson 自定义_java – 自定义jackson解组行为
  8. 7.4 倒向随机微分方程-Feynman-Kac公式
  9. PDF免费压缩、在线压缩
  10. 显示当前服务器的ip,linux查看当前服务器ip地址 命令
  11. c标签 if else c标签 总结
  12. 用微信小程序发红包的两种方法
  13. 程序化交易高手的交易心得 分享~
  14. Candence学习篇(5)使用Padstack Editor制作贴片焊盘和通孔焊盘
  15. 微信小程序 --- 不在以下合法域名列表中请参考文档
  16. vim插件之pathogen,NERDTree,Command-T,Powerline
  17. 博士延期的我,女友已经是副教授了
  18. 2021年R2移动式压力容器充装考试题及R2移动式压力容器充装考试试卷
  19. 计算机等级证书要不要考?考了以后有什么用?
  20. Java代码韦伯分布_第十五节、韦伯局部描述符(WLD,附源码)

热门文章

  1. AutoCAD Civil 3D-部件编辑器(SAC)详解之自定义部件(行车道示例)
  2. 职场人生|软件测试的伙伴如何迈过瓶颈期?
  3. Keil 报错 declaration may not appear after executable statement in block的解决办法
  4. 蓝桥杯算法提高-质数的后代 Java实现
  5. Github上的star和fork是什么
  6. Speedoffice(ppt)如何添加批注
  7. php和Java的简单对比
  8. Python:实现factorial阶乘算法(附完整源码)
  9. 漏洞复现 | CVE-2017-8046 Spring Data Rest 远程命令执行
  10. TinyXml Documentation 翻译 TinyXML Tutorial翻译