header_v0.7.32

Typography in Mobile Apps——UI设计师的必修课

71天前发布

原创文章 / UI / 教程
扑热息痛 原创,如需商业用途或转载请与扑热息痛联系,谢谢配合。

排版是设计的骨干,通过优化您的排版,您也改善了您的 UI。

61b05966ee73a8012193a3daa913.jpg


-卷首-

本篇文章聊了聊在移动应用(通常指手机 APP)中如何编排文字。是的,是篇译文,所有内容都是基于西文环境的。近来有一些设计师朋友和学生总会问到我为什么这类文章都是基于西文的,这似乎对身在中文世界的我们不太实用。

其实,我想说~

第一,国内这类文章的资源有限,可以说非常之少。

第二,虽然这些文章基于西文体系,但对中文排印依然有不小的指导意义(字重、字体、行长、行高、对比、层级、易认性、易读性……等等等等,都是相通的~人类眼睛都是一样的嘛,视觉感受也是趋同的,无非在一些具体的参数上会有细小差异,但其根本原理是通的)


原文地址:

https://medium.com.zcool.cn/thinking-design/xd-essentials-typography-in-mobile-apps-7048abfb1cc5


6a2d5966ee9ca8012193a37725a0.jpg


传达 / 沟通在设计中起着至关重要的作用——您的产品必须清楚地传达其意图和目的。当我们谈论传达时,通常意味着文本,因为您 APP 中的文本的目的是建立应用程序和用户之间的连接,并帮助您的用户实现目标。排版在这个过程中起着至关重要的作用; 良好的排版使阅读的行为毫不费力,而糟糕的排版会赶走你的用户。


您如何利用排版为您和您的用户所用,而不是让他们觉得难受?不幸的是,关于移动版排版的最佳做法有很多矛盾的意见,每种情况都不会有一套严格的规则。不过,您可以通过以下几种方法来确保排版符合内容,并提高移动设备的可读性。



| 字号、行长和间距


为移动设备设计时,最重要的考虑因素之一是字体大小,行长和间距。文字必须足够大才能轻松阅读,行与行之间应有足够的空间。


- 字体大小


字号大小对于在屏幕上的阅读体验至关重要!用户在阅读过小的文字时时更耗费时间的。太小的文本可能会导致读者疲劳,因为当一次要阅读太多字符时,通常很难找到文本行的开头和结尾。因此,用户将略过大部分信息。这对于移动设备尤其如此,小小的字母出现在小而明亮的屏幕上是让用户很头疼的。

f3525966ef0ba8012193a3770df5.jpg

左:几乎重叠的文字。右:良好的间距有助于可读性。

图片来源:Apple



但是,太大的文字也会导致问题。如果行长太短,眼睛就不得不经常回去(找下一行的开头,译者注),这会打破读者的节奏。这使得信息更加难以消化。


为了使你的文字清晰可辨,你需要在字号和行长之间找到平衡。


小窍门: 字号的选择没有公式,但你可以参照“苹果”和“谷歌”的设计指南,他们非常实用,你可以将它们作为设计起点。


  • 对于 iOS,您应该使用至少 11pt 的文字,以便在正常的观看距离内无障碍地阅读,而无需缩放。

  • Android 的最小可读字体大小为12 sp,但强烈建议至少使用 14 sp 作为主文本。


- 行长


通常而言,就视觉舒适度上来说最佳行长大约是 50-60 个字符,包括空格。这个参数对于桌面应用是很好的,因为 60 个字符几乎不会碰到屏幕的边缘,但是在大多数移动设备上(手机)60 个字符就超出了屏幕的边界。在移动屏幕上也有 60 个字符为一行的,但通常字体都太小,无法容易地阅读。


手机屏幕上没有普遍接受的测量标准,但是行长的一个很好的经验法则是使用每行 30-40 个字符。


2f255966ef60a8012193a3fe22fe.jpg

左:一行拥有太多的字符导致视线难以“跟踪”。

图片来源:usertesting


实用提示:字体大小通常比行长更重要,因此您应该先确定良好的字体大小。如果它可以与最佳行长相结合,那显然是理想的解决方案。


- 间距


当谈到手机屏幕时,空间是一个重要的考虑因素:屏幕尺寸越小,就越要给文字以足够的空间让它们“呼吸”。通过增加文本空间(增加行高或字母间距)你就可以让用户阅读体验良好以便他们你的软件做更好的交互。


实用提示:当文字较小时,适当增加他们的间距会更加易读。因此,在行间增加一些额外的间距(大约 10% 或 20%)是比较理想的。


9cf05966ef96a8012193a3528539.jpg

左:几乎重叠的文字。右:良好的间距有助于可读性。

图片来源:Apple


“考虑使用段落间距,因为段落可能在较小的屏幕上看起来更长。这个额外的空间让读者觉得文本不是太密集,而且会更容易阅读。“ 

 — Carrie Cousins


b2a75966efc5a8012193a3582ad1.jpg

iOS 应用中的良好间距示例。

图片来源:Medium


- 颜色对比


在设计移动设备时,对比度特别重要,因为在户外使用设备时可能会受眩光影响。

关于颜色对比的两个最常见的误解是:


  • 第一个误解是太多的对比度会让眼睛更难受,大概灰色阴影更容易接受。因此,我们在灰色或白色背景上使用灰色文字。但是,与背景颜色太相似的文字却很难阅读。见下图。


    91ee5966eff3a8012193a373892d.jpg


    这个页面的中性灰色在室内看起来很不错,但是在室外看起来并不好,因为屏幕上的低对比度与屏幕眩光一样,使得文字难以阅读。

    图片来源:usertesting




  • 第二个误解是对比度越高越好。下图为例。在实践中,具有太大对比度的文本也可能难以阅读。对于黑暗背景配以浅色文字尤其如此。例如,迫使用户在黑色背景上长时间阅读白色文本可能会使用户的眼睛不适。




    544b5966f024a8012193a3b170bb.jpg

视力再好的人,在黑色背景上盯着白色文字太长时间也会感到眼睛疲劳。


再强调一下:在 APP 中排版,最重要就是要考虑可读性。而设计师常常喜欢使用低对比度的色彩搭配,因为低对比度使得外观美观而和谐,但美观并不总是具有最佳的可读性。当文本很难阅读时,用户体验一定不会好到那里去,设计似乎也没起到它该有的作用。


实用提示: 合适的对比度是一件棘手的事情。由于屏幕之间差异,在设计师的显示器上看起来不错的颜色在用户的屏幕上可能会有很大的不同。然而,这并不是代表没有希望。这有一个很好的参考:W3C’s Web Content Accessibility Guidelines.


W3C 设置对比度的最低标准:颜色与另一种颜色的差异(通常写为 1:1 或 21:1,比率越大,相对亮度的差异越大)。W3C建议正文文字和图像文字的对比度如下:

  • 与其背景相比,小文本的对比度应至少为 4.5:1。比例为 7:1 是优选的。

  • 大文本(14点/ 18点或以上)与背景的对比度应该至少 3:1。


9da85966f076a8012193a3fc6aa7.jpg

这些文本行不符合颜色对比度建议,难以阅读。


76705966f094a8012193a33293b2.jpg

这些文本行遵循颜色对比度建议,它们是清晰可辨的。


为文字确保足够的对比度,以获得最佳的可读性。您可以使用对比度工具来快速测量它们。



一个 APP,一个字体!


您应该尝试在整个 APP 中使用单一字体。混合几种不同的字体会使你的应用程序看起来破碎并很 LOW。当设计一个应用程序时,想想如何通过字重和字号使排版牛逼起来而不是用很多不同的字体。


bfc55966f0cda8012193a3bade81.jpg

左:混合几种不同字体,很 LOW…… 右:使用一种字体,用不同的样式和大小。

图片来源:Apple


实用提示:最安全的做法是使用系统默认字体。


苹果公司使用 SF 字体家族,在所有平台上提供一致的阅读体验。Roboto 和 Noto 字体是Google Android 和 Chrome 上的标准字体。


f3555966f0f7a8012193a3200c26.jpg

iOS 使用旧金山作为拉丁语,希腊语和西里尔字母的系统字体。

图片来源:Apple


74205966f114a8012193a34a4c62.jpg

Roboto字体。

图片来源:Material Design


如果您的设计不考虑标准字体,那么请考虑选择易读的字体。保证字体在不同设备上的可读性非常重要。在这里您可以找到大量易读的字体:Adobe Typekit


a9935966f140a8012193a306e4dc.jpg



测试的重要性


不要忘记测试。一旦您设计完成,绝对有必要在时下最流行的设备上进行测试。您测试的设备越多,您将越了解不同用户使用不同设备时看到的情况。如果任何一个测试参与者在阅读文字时遇到麻烦,那么,可以肯定的是,当设计流到一般用户手中时他们也一定会遇到相同的问题。


实用提示:您应该使用“A / B 测试”来了解您的排版方式。


注:“A/B 测试”,即提供两个不同版本给用户选择,以测试功效。


结论


正如 Oliver Reichenstein 在他的文章中所说的那样,网页设计 95% 的工作是排版:


“优化排版就是优化可读性、可访问性、可用性,以及整体图形平衡。


此文展现了可读性的重要性。排版是设计的骨干。通过优化您的排版,您也改善了您的 UI。





1
    意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功