作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
查尔斯·马修·阿托斯的头像

查尔斯·马修·阿托斯

Charles是一名UI/UX设计师和品牌策略师,在移动优先设计方面拥有丰富的经验. 他曾与Netflix和TikTok等跨国公司合作, 他还担任过创意总监, 监督团队进行高水平的设计项目, 包括重新设计网站和移动应用程序.

专业知识

以前的角色

创意总监

工作经验

8

以前在

NetflixSpotify可口可乐

有特色的专家

特色专家头像

在谷歌工作经历

Brian是一名产品设计师和用户体验专家,在创意和科技行业拥有18年的经验. 他之前曾与谷歌、阿迪达斯和联合利华等客户合作.
特色专家头像

以前在J. 智威汤逊全球

Karlie是一位拥有七年经验的设计师,创造了引人注目的视觉效果和体验. 她曾与国际机构和初创公司合作.
Share

版式会显著影响用户对品牌的感知以及与移动应用程序的互动. 明智的排版选择确保易读性,建立清晰 视觉层次结构,并表示 品牌标识.

而每一个 程序设计师 对排版有自己的风格和方法吗, 设计师可以通过运用基本原理来确保他们的手机应用文本是有效的 设计原则,理解 用户期望,并随着移动技术和趋势的发展而发展.

作为一名UI/UX设计师,具有丰富的移动优先设计经验, 我明白使用正确字体样式的重要性, sizes, 以及在小屏幕上创造视觉和谐的安排. 以下是设计实用且吸引人的手机排版的五条指导原则, 包括为你的应用程序选择合适的字体,让你的设计对所有用户都能访问.

关注可读性

在为你的手机应用程序选择字体时,你最关心的应该是 可读性,这对内容消费至关重要, 可访问性,导航,品牌一致性,以及减少用户错误. 而可读性在所有数字产品的用户体验中扮演着重要的角色, 这在移动应用中是至关重要的, 在有限的空间 用户注意力持续时间缩短 快速清晰的沟通是关键.

我在送餐软件的工作中 NOM NOM 我在整个应用程序中优先考虑清晰的排版和易读的字体,以确保用户可以轻松阅读 菜单项 描述、价格和过敏信息. 我还优化了包括分类在内的导航元素的可读性, filters, 和按钮, 帮助用户顺利浏览应用程序并成功下订单.

在评估移动排版字体时,需要考虑以下因素:

Serif vs. 无衬线字体

Of the 五种字体类别,手机设计师通常会选择 衬线字体或无衬线字体 对于他们的应用程序. 两者都有不同的特点,可以影响一个 应用程序的美学 和可读性.

衬线字体可以很容易地区分某些字符(大写“I”与小写“l”与数字“1”),(例如). 而这些字体过去大多与印刷材料联系在一起, 屏幕分辨率的进步意味着它们越来越多地用于移动应用程序等数字产品.

格鲁吉亚是一个 优雅而易读的衬线字体 这是由著名的机构,如 《欧博体育app下载》 在其网站和移动应用程序上. 它的字母形式,与他们的 粗笔画,开孔,大x高,使其即使在很小的尺寸上也易于阅读. 但是,有一些衬线字体应该严格避免 应用程序设计. Be wary of overly stylized serif fonts such as Old English; with their scripts, shadows, outlines, 和装饰, 这些字体在小屏幕上尤其难以阅读.

相比之下,大多数无衬线字体在复制空间有限的地方效果很好. 它们经常用于移动应用程序,因为它们干净简单的设计使它们易于在小而低分辨率的屏幕上阅读. 高度易读的无衬线字体的一个例子是Roboto,一种现代的几何字体 谷歌开发的 用于Android移动操作系统.

字体的搭配

字体配对 结合不同的字体,相互补充,在设计中创造和谐与平衡. However, 使用多种字体的移动应用程序内容必须仔细做,以确保读者, 谁会忙个不停或者一心多用呢, 能快速有效地吸收信息吗. Moreover, 设计师应该避免使用多种不同的字体组合,因为这会减慢页面加载速度, 这对手机用户来说是一大阻碍.

为了确保字体配对增强应用程序的用户体验,Toptal设计师 Karlie涌 建议使用定义字体的印刷系统, style, size, 间距规则, 还有你会在应用中用于不同类型复制的其他元素,包括标题, body copy, captions, menus, 和UI按钮. 如果你与一个知名品牌合作,可能已经有一个系统或 风格指南 在你需要跟随的地方. 然而,如果你正在从头开始创建自己的网站,我建议你看看Kimberly Elam的书 排版系统 她还讨论了不同的排版规则和指导方针,以及如何在数字设计中组织文本.

如果您决定为所有文本使用单一字体, 您可以使用不同的字体粗细, styles, 和大小,以增加对比度和创建视觉层次. 应该使用较重的字体来强调标题. 一般来说, 中等重量 为了获得最佳的可读性,在应用程序正文中应该优先使用轻重量而不是常规重量. Likewise, 加粗字体可以突出文本中你想要引起读者注意的特定部分.

冒名顶替者信

确保高可读性, 避免带有“冒名顶替者”的字体,或者并排看起来一模一样的字母. 0可能被误认为是大写的O, 在小屏幕上,小写的L可能会被误认为大写的I或数字1. 在显示用户必须手动输入的身份验证码等内容时,混淆字符尤其容易造成问题. 如果多个字符看起来太相似, 你可以预见读者会感到困惑, 考虑改变字体.

字母“I”,” “L,
在某些字体中,某些字符看起来是相同的. 选择能够消除读者困惑的字体.

考虑文本的“可点击性”

为标题、副标题和正文副本选择正确的字体大小对于创建一个 和谐的视觉体验 并确保信息在较小的设备上是可读和可点击的. 在为应用程序安排排版时, 挑战在于使文本足够大以适应触摸交互,以便用户能够准确地点击链接或按钮, 但不要太大,以免占据整个屏幕或需要过度滚动页面.

在应用字体大小方面,一个好的经验法则是 最小字体尺寸为16像素 对于标题在1左右的正文.比它大3倍. (移动设计的另一个选择是使用 黄金比例,其中标题应为1.比正文大618倍.)

手机屏幕显示理想的字体大小:标题至少为1.比正文大3倍,其理想尺寸为16像素.
不同的字体大小有助于提高可读性和可用性, 同时也建立了和谐的审美.

设计师也可以利用现成的移动排版系统和工具, 使用预定义的属性和样式. 在线排版缩放工具 Typescale, 例如, 允许您在页面的层次结构中可视化文本,并根据您正在设计的屏幕创建不同大小的比例.

建立清晰的等级制度

正确使用字体大小, style, color, weight, case, 对比可以帮助用户快速识别和理解屏幕上最重要的内容. 一个有效的 排版的层次结构 将人们的目光吸引到最重要的内容上,并为每种内容类型赋予意义和背景.g.、标题、副标题和正文). 总产品设计师 布莱恩•卡特 建议使用 网格系统 确保元素对齐,比例合理,间距适当,整洁. 帮助你建立连贯排名的一些额外考虑因素包括:

正文副本的行间距

适当的间距, 包括线高, 字符间距, 字间距, margins, 和填充, 可读性的关键是什么, 特别是在较小的屏幕上,没有足够的空白空间来引导用户的眼睛从一个内容到下一个内容, 说钟. Optimal 行间距 (或前导)取决于副本的类型. 对于手机正文,文案的前导应为1左右.6倍的字体大小. 这会创造更多 空白 字里行间避免拥挤,限制眼睛疲劳.

标题行间距

在你的手机设计中传达层次结构, 你的标题必须在正文中脱颖而出. 一种简单的方法是在标题周围留出空间,或者删除跨多行的长标题之间的空间. Maybe a heading runs two or even three lines on a mobile screen; decreasing the leading between these lines will make it clear to the reader that the heading is separate from other text types. 作为标题的一般规则,行距应该在1左右.2 times the font size; for subheadings, it should be 1.4. 根据我的经验, 关于间距的另一个重要准则如下图所示:如果标题是全大写的, 行间间距的高度应该与任何字母的词干宽度相匹配,或者不超过1.2乘以它的宽度.

“应用程序排版”和字体属性名称:大写字母, baseline,  阀杆宽度, and stem.
对于全大写的移动标题,行间间距的高度应为1比1.任意字母的词干宽度的2倍.

眉文本

为了吸引更多的注意力到你的标题,考虑添加 眉文本,它位于标题的第一个单词的上方. 本文提供了功能或内容的简要解释,并作为一个有价值的工具,引导用户有效地通过移动界面, 便于用户友好的导航,并将其绘制到主要内容中.

眉文本的例子位于简短的上下文描述之上, 并引导读者到标题“你的标题在这里”.”
位于标题上方的“眉文”有助于将用户的注意力吸引到主要内容上,并促进快速的UI导航.

在移动设计中, 眉毛文本背后的意图是让读者立即掌握页面上的内容. 它允许他们扫描内容并更快地消费它, 据卡特说, 谁在几个应用程序设计中使用了这个功能, 包括数字钱包应用程序 Meteor.

使你的移动排版易于访问

有几种方法可以确保你的手机排版 对所有人开放,包括视力低下、失明、色盲和阅读障碍的用户. Firstly, 请记住,对于低视力用户或视野小的用户来说,长行文本可能很难理解. 在竖屏模式下,长度通常不是问题, 由于狭窄的视窗, 但是尽量把线的长度限制在 80个字符 在横向模式下.

其次,考虑提供手动调整字体大小的选项,以帮助用户避免眼睛疲劳. 暗模式对于低视力用户来说也是一个很有价值的功能, 但要确保文本和背景颜色之间有足够的对比度. 对比度差会使文本难以阅读,尤其是在背光屏幕的强光下.

在为带有屏幕阅读器(将文本和其他屏幕元素转换为合成语音或盲文输出的辅助软件程序)的应用程序设计排版时,有几件事需要记住. 屏幕阅读器可能会误解非常接近或重叠的字母, 制作衬线字体, italics, 所有的大写字母都很难翻译. 非常薄或轻量级的字体也是有问题的. 在最近的 webinar, 杰西塔奥克利, 澳大利亚视觉的用户体验设计师和顾问, 我建议使用人文主义的无衬线字体,比如Calilbri, Verdana, 或大河马字体. 这些字体有很大的x高, 充足的休憩用地, 独特的字母形状, 使它们成为屏幕阅读器的理想选择. 另一种具有这些特征的字体是Proxima Nova,它已经制作了很多 十大榜单 为移动和数字UI/UX提供最佳字体.

在左边, 比邻星的大小写字母和数字, 在右边, 一系列Proxima Nova字体的重量和样式, 以及使用哪种类型的内容.
可提供几种不同的重量和风格, Proxima Nova是一种流行的UI/UX字体,被许多公司用于移动应用程序, websites, 以及品牌材料.

总是测试你的排版

通过对手机排版进行全面的测试, 设计师可以超越寻找错误来确保他们选择的字体, sizes, 风格增强了 可用性 并最终促成应用的成功,Chung说道. 字体测试器等工具, 字体忍者, 和Typetester可以测量可读性和易读性, 而可用性和 用户体验测试 像UserZoom、UserTesting和optimely这样的工具可以让你进行调查和投票来收集数据 定量和定性数据.

你也可以从你的团队和外部测试人员那里寻求反馈. 而设计团队则寻找并完善视觉缺陷, 外部测试人员模拟通过触摸执行的各种用户交互, keyboard, 和其他输入以发现功能错误. 在评估排版的使用时, 测试人员可能还会寻找对于屏幕分辨率来说太小或太大的类型. 基于测试人员的反馈, 设计团队可以迭代以确保他们的设计与期望的目标保持一致.

手机排版指南:保持最新

移动设计的排版随着时代和用户的偏好而不断发展. 我强烈建议你跟随设计领导者, 加入设计社区, 并阅读移动趋势,以保持最新的移动排版. Consider participating in designer forums or joining events that discuss typography; you can also follow hashtags and accounts such as #typography and @typocircle that curate typography content on X (formerly Twitter).

为移动应用程序创建良好的排版不仅仅是应用基本的指导原则——理解用户是至关重要的,这样我们就可以创造一个受欢迎的空间,让他们可以与我们的品牌和产品互动和参与.

了解基本知识

  • 移动应用的排版指南是什么?

    移动应用程序的排版应该具有可读性和一致性. 遵循传统的文本最佳实践,选择易读的字体大小. 在内容类型之间建立清晰的层次结构,并在文本和背景之间建立明显的对比. 在跟踪和引导中留出足够的空间,以获得最佳的可读性.

  • 移动应用的排版尺度是什么?

    手机应用的字体大小应该是可读的,但不占整个屏幕. 正文的标准最小值为16像素,标题为1.比身体大三倍. 对于自定义的大小,使用黄金比例或排版比例和工具,如Typescale.

  • 我应该在手机应用程序设计中使用哪种字体?

    在为你的手机应用程序选择字体时, 首先确定该品牌是否有合适的系统字体. 例如,苹果的iOS使用San Francisco,而Android使用Roboto. 这些无衬线字体是为手机屏幕上的高可读性而设计的. 一个品牌可以有一个定制的字体, 但设计师必须考虑用户的可读性和清晰度, 以及坚持品牌的风格指南.

聘请Toptal这方面的专家.
Hire Now
查尔斯·马修·阿托斯的头像
查尔斯·马修·阿托斯

位于 Legazpi市,比科尔,菲律宾

成员自 2022年9月9日

作者简介

Charles是一名UI/UX设计师和品牌策略师,在移动优先设计方面拥有丰富的经验. 他曾与Netflix和TikTok等跨国公司合作, 他还担任过创意总监, 监督团队进行高水平的设计项目, 包括重新设计网站和移动应用程序.

Toptal作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.

专业知识

以前的角色

创意总监

工作经验

8

以前在

NetflixSpotify可口可乐

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

Toptal设计师

加入总冠军® community.