移动端设计规范 - 文字使用规范

这是一篇关于移动端产品界面设计时,文字大小的使用规范,前端人员如果能了解一点的话,在实际开发中和设计沟通时,节省沟通成本,也能提高设计落地开发时的还原度。

关于

在做移动端产品设计时,有时候使用文字时会卡住,不确定该使用多大的文字,一屏做完后在手机上看效果图时会觉得文字大小不合适,又需要回到设计稿进行调整,然后再到手机上看效果,这样来回捣腾。

至此,简单整理、概括记录了一下,在移动端产品设计时,文字大小的使用规范或者说是使用情况吧,方便大家下次直接看图画稿,不需要再去网上东搜西看的。

以下是基于 1 倍图设计时文字大小的使用情况:

  • 顶部导航栏部分

顶部导航栏部分文字大小一般在 18-15pt,我个人习惯统一用的是 18pt。

  • 底部标签栏部分

底部标签栏图标下方文字大小一般用10pt,如果不用图标,用文字设计标签栏时,我个人习惯大小用16-14pt,直接当图标使用。

  • 内容区域

大标题文字一般在18-16pt,一些特殊比较大的标题我习惯用24pt大小。

小标题文字一般在16-14pt,我一般统一用16pt。

正文阅读性文字一般在14-12pt,我一般大段的文字内容习惯统一都用14pt,有些app在针对特定人群时,有用到16pt的情况。

辅助性文字在12-10pt,最小不低于10pt。

在实际设计开发中,设计师根据实际情况进行一些调整,不用固定死,根据不同场景设计出适合出彩的设计界面,毕竟适合的才是最好的。


1 阅读原文

我是 Just,这里是「设计师工作日常」,求点赞求关注!

相关推荐
巴博尔7 小时前
UNIAPP中NVUE页面 动画
android·前端·javascript·ios·uni-app
2601_955767428 小时前
圆偏振光膜与AR抗反射膜原理评测:scinique双护技术如何实现“一柔一清”?
ios·ar·iphone·圆偏振光·磁控溅射
人月神话-Lee9 小时前
【图像处理】图像导出与工业级压缩策略——从像素到文件的最后一公里
图像处理·人工智能·ios·ai编程·swift
ZC跨境爬虫12 小时前
跟着 MDN 学CSS day_21:(图像溢出控制与表单元素样式定制)
前端·javascript·css·ui·交互
FrameNotWork12 小时前
HarmonyOS 智感握姿开发指南:让 UI 跟着握姿自动换边
ui·华为·harmonyos
ting945200013 小时前
深度解析 Google Stitch 3.0:文本驱动跨端 UI 生成技术原理、架构与工程实现
人工智能·ui·架构
飞翔中文网15 小时前
读RESTful有感,关于Java接口设计规范的说明
java·restful·设计规范
UXbot15 小时前
无需设计经验也能做原型:AI辅助工具功能评测
前端·人工智能·低代码·ui·ios·交互
2601_9594779115 小时前
Vatee:面向成熟用户的综合服务评估
大数据·人工智能·安全·ux
ch_ziyuan17 小时前
2026新优化神马TV8.5影视点播系统保姆级搭建教程:三后台配置+反编译修改
android·ios·php