惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

C
Check Point Blog
有赞技术团队
有赞技术团队
博客园 - 三生石上(FineUI控件)
博客园_首页
博客园 - 【当耐特】
WordPress大学
WordPress大学
月光博客
月光博客
博客园 - 叶小钗
S
SegmentFault 最新的问题
雷峰网
雷峰网
H
Help Net Security
宝玉的分享
宝玉的分享
A
About on SuperTechFans
IT之家
IT之家
J
Java Code Geeks
Hugging Face - Blog
Hugging Face - Blog
D
DataBreaches.Net
酷 壳 – CoolShell
酷 壳 – CoolShell
博客园 - 聂微东
T
The Blog of Author Tim Ferriss
B
Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
H
Hackread – Cybersecurity News, Data Breaches, AI and More
Y
Y Combinator Blog

人人都是产品经理

为什么你的产品找不到差异化?90%的失败都卡在第一步上(下) – 人人都是产品经理, 3年从30万到1300万用户、获2200万美元融资,这个AI教育产品用“抽卡”破解了获客难题 – 人人都是产品经理, 园区招商系统怎么做才能真正帮到去化?我加了这一个功能,推广链接转发400次阅读过万 – 人人都是产品经理, AI大事件:OpenAI发完网络安全模型又搞药物研发,小鹏汽车要抓”DeepSeek时刻” – 人人都是产品经理, 电商不是卖货,是一场更残酷的产品经理实战 – 人人都是产品经理, 没想到,活动营销又回来了! – 人人都是产品经理, 为何All-in海外KOC:一场关于AI时代窗口期的豪赌 – 人人都是产品经理, 重新理解企业的内部协作 – 人人都是产品经理, 苹果的 AI 战略到底是什么? – 人人都是产品经理, 医疗智能体·第2讲——合规护城河:等保、PIPL与HIPAA的架构实战 – 人人都是产品经理, 向量知识库五步法:从“答非所问”到“精准回复” – 人人都是产品经理, 鸿蒙PC三方库构建总指挥HPKBUILD(sha)库为例 – 人人都是产品经理, 何时该用LLM?AI产品经理的LLM设计指南 – 人人都是产品经理, 医疗信息领域的需求方、决策方、准入方以及关注点(二) – 人人都是产品经理, 即梦涨价:一场被误读的「傲慢」 – 人人都是产品经理, 面试AI PM必答题:Hermes和OpenClaw的区别,如何讲清楚业务价值 – 人人都是产品经理, AI的下一张船票:世界模型——AI产品经理必须理解的技术拐点 – 人人都是产品经理, 小红书做GEO,怎么让AI信你?记住这 3 个重要信息 – 人人都是产品经理, 5 家印度 AI 初创公司,看看印度 AI 再做什么 – 人人都是产品经理, AI项目跨团队协作:产品技术业务如何不打架 – 人人都是产品经理, Agentic Workflow(智能体工作流):让AI从”答案生成器”变成”数字员工” – 人人都是产品经理, lycium_plusplus 项目全景解读:OpenHarmony 三方库构建的“大管家” – 人人都是产品经理, 从爆单救火到前置履约:两套预采策略,把生鲜大促履约效率拉满 – 人人都是产品经理, 什么时候该补货?我用一轮数据做了一个决定 – 人人都是产品经理, 从“机械兜底”到“动态分流”:AI客服重复进线治理的4大底层逻辑 – 人人都是产品经理, 抖音拼效率,红书拼洞察 – 人人都是产品经理, 全民狂欢与退潮——为什么龙虾这波热潮冷却得如此之快? – 人人都是产品经理, Stripe押注!MPP重塑全球支付 – 人人都是产品经理, 小红书GEO:AI引用你的内容,不是因为你对,而是因为你看起来可信 – 人人都是产品经理, 前百度副总裁押注办公Agent,日韩付费爆发,Manus迎来强劲对手 – 人人都是产品经理,
用户界面设计的排版指南
TCC翻译情报局 · 2025-03-15 · via 人人都是产品经理

在移动应用和网站设计中,字体排版不仅仅是美观的装饰,更是用户体验的核心。从字号、色彩到字重和大小写,每一个细节都影响着用户如何感知和交互。这篇文章将带你深入探讨如何通过科学的排版规则,提升界面的可读性和视觉吸引力,为新锐设计师提供实用的设计参考。

在设计一款产品的用户界面时,无论是网站还是移动应用,设计师都会精心考量每个元素的细节。我们一如既往在界面视觉上努力创造吸引人的元素组合,例如:按钮、输入框、标签、导航栏等。

为了呈现更好的视觉体验,构建完美的元素组合就需要对颜色、字体、间距和图形进行深思熟虑的选择。设计过程需要权衡的因素很多,我发现一些新锐设计师们常常会纠结元素的选择,举棋不定。然而,好不容易决定并构建的元素组合,总觉得视觉呈现无法达到最佳呈现。其实,问题或许就出在排版(由于,并非专业的设计培训机构,工业化复制设计师的原因,很多设计师缺乏基础设计原则和理论知识)。为此,我总结了一些如何选择适合界面设计的字体排版的普世规则。如今,万物互联,智能硬件进入我们日常生活的方方面面,这里我将范围缩小,从很小的细节开始,只针对于智能手机(未来,可以在探讨智能眼镜、智能家具等),这样可以作为给新锐设计师们在设计特定的应用界面时提供一些参考。

字体排版能够为用户界面增添调性,让界面更有味道、更有趣。

回到正题,我们一起看一下每条规则和示例:

字号

使用四种不同的字体大小

在选择字体大小时,并没有硬性规定(唯一就是要以人为本),最终取决于平台、设计语言、用途和目标受众。还要关注屏幕像素呈现能力(软硬件技术有关,比如不同屏幕的特性)。然而,以下是一些针对不同使用场景选择合适字体大小的参考:

  • 标题或主标题:为标题和主标题使用较大的字体大小,范围在 24px 到 36px 之间。这样有助于吸引用户注意力并快速传递信息。
  • 副标题或说明:为副标题或说明选择较小的字体大小,范围在 14px 到 18px 之间。这种区分有助于与主要内容区分开来。
  • 正文:既能确保用户能够清晰易读,又能为眼睛沿着文本移动提供足够的舒适空间。正文的合适范围是 16px 到 20px 。
  • 输入字段:对于输入字段,选择一种易于阅读和输入文本的字体大小(比如搜索框、键盘等)。输入字段的合适范围是 16px 到 18px 。
  • 元数据:对于元数据,如日期、时间、作者姓名以及小按钮内的文本,可以考虑使用较小的字体大小,以免喧宾夺主。元数据的合适范围是 12px 到 14px。
  • 请记住,确保所选择的字体大小对目标受众而言易读且易于发现。我们可以将这些规则作为基准,但也需要根据设计目标和用户偏好来调整字体大小(不要忘记硬件的物理特性哟)。

色彩

当我们想要区分标题或内容时,首先会考虑更改字体大小。除此之外,我们还可以通过更改颜色来进行区分。

可以在标题和正文之间使用相同或不同的颜色

这两个例子并不是为了证明对或错,而是展示为不同的目的不同设计策略:

  • 在左侧,我们为标题和正文使用相同的颜色,目的是增强视觉和谐性并使内容更易于阅读。
  • 在右侧,我们为标题和正文使用不同的颜色,目的是创建视觉层次感,并区分标题与正文内容。

重量

字体的重要,我们就可以简单理解,就是字体粗细,这一点也非常重要,在很多设计中随处可见,我们在遵循上述提到的色彩规则。同时,也有助于区分内容或标题。我们经常会把字重将色彩搭配使用。

可以在标题和正文之间使用相同或不同的颜色和字体粗细

这和我之前提到的色彩原则相似。然而,不同的硬件也会呈现不同的色彩,也会影响字重的现实效果。然而,作为一名 UX/UI 设计师,我们必须考虑并做出决策,确保用户界面和体验既易用又友好。为此,进行可用性测试也是必不可少的,也是设计过程中重要的一环。

大小写

数字产品早已面向全球用户,我们暂时还不能无视英文字体。烦人的大小写。虽然,小写很少被使用,但永远不使用小写并非设计师的最优解。话虽如此,使用小写必须要有理由(其实任何一个设计元素都应如此),除此之外,应该让用户感到自然和谐。

英文的大写排版呈现不一样的感觉,也比小写更常见。

使用小写和大写字母通过使用大写和小写字母来尝试展示网站的域名。实际上,所有域名通常都是小写的。多观察周遭事物的设计表现,并深度思考其中的设计考量和策略。

最大字符数

每行拥有合适的字符数量是提高可读性的关键,尤其是在移动端上进行广泛的可用性测试时。理想情况下,每行不应超过 9 个单词或 50-60 个字符。

最大字符数或单词数以及行高尝试每行的最大字符数,并调整行高,以便加强段落的可读性。

结论

改进用户界面是我们作为 UX/UI 设计师的重点,这涉及到对排版的正确使用。我们需要关注字体大小、类型、颜色、字重、小写和大写字母,以及通过适当的行高最大化每行的单词数量。通过这样做,我们可以提升界面的外观、可扫描性和可读性。

本文由人人都是产品经理作者【TCC翻译情报局】,微信公众号:【TCC翻译情报局】,原创/授权 发布于人人都是产品经理,未经许可,禁止转载。

题图来自Unsplash,基于 CC0 协议。