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

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

关于

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

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

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

  • 顶部导航栏部分

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

  • 底部标签栏部分

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

  • 内容区域

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

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

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

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

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


[1] 阅读原文

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/657248.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【开源精选导航】GitHub-Chinese-Top-Charts:一榜在手,优质中文项目轻松找寻

各位热爱开源技术的朋友们,你们是否有过这样的困扰:面对浩瀚的GitHub海洋,想找寻那些具有高质量中文文档的优秀开源项目却无从下手?今天,我们就为大家揭晓一个宝藏般的开源项目——GitHub 中文项目集合(访问…

二维数组移动,合并数值简易2048

2848简易核心运算 --多元素合并数组举例4*4 -- 星空露珠韩永旗制作 --数据合并并重新赋值 --多元素合并数组举例4*4 -- 星空露珠韩永旗制作 --数据合并并重新赋值 local data{{0,2,0,2}, {4,2,0,8}, {8,0,8,4}, {2,2,4,8}} local ch{{1…

【Node.js基础】Node.js的介绍与安装

文章目录 前言一、什么是Node.js?二、安装Node.js2.1 Windows系统2.2 macOS系统2.3 Linux系统 三、运行js代码总结 前言 随着互联网技术的不断发展,构建高性能、实时应用的需求日益增长。Node.js作为一种服务器端运行时环境,以其事件驱动、非…

万户 ezOFFICE SendFileCheckTemplateEdit.jsp SQL注入漏洞

0x01 产品简介 万户OA ezoffice是万户网络协同办公产品多年来一直将主要精力致力于中高端市场的一款OA协同办公软件产品,统一的基础管理平台,实现用户数据统一管理、权限统一分配、身份统一认证。统一规划门户网站群和协同办公平台,将外网信息维护、客户服务、互动交流和日…

从比亚迪的整车智能战略,看王传福的前瞻市场布局

众所周知,作为中国新能源汽车的代表企业,比亚迪在中国乃至全球的新能源汽车市场一直都扮演着引领者的角色。2024年新年伊始,比亚迪又为新能源汽车带来了一项重磅发布。 整车智能才是真智能 近日,在“2024比亚迪梦想日”上&#xf…

基于二值化图像转GCode的斜向扫描实现

基于二值化图像转GCode的斜向扫描实现 什么是斜向扫描斜向扫描代码示例 基于二值化图像转GCode的斜向扫描实现 什么是斜向扫描 在激光雕刻中,斜向扫描(Diagonal Scanning)是一种雕刻技术,其中激光头沿着对角线方向来回移动&…

编译opencv4.6问题汇总,第三方软件包见我发的资源

win10系统 python3.8.2,cmake-3.15.5-win64-x64,opencv4.6 编译方式见:OpenCV的编译 - 知乎 本文主要总结问题。赠人玫瑰手留余香。 问题1 Problem with installing OpenCV using Visual Studio and CMake (error code: MSB3073) 解决方法…

c# textbox 提示文字

1. 定义提示文字内容 private readonly string RemarkText "最多输入100字"; // 提示文字 2. 添加textbox 焦点事件, 初始化textbox提示文字和字体颜色 public UserControl(){InitializeComponent();tb_Remark.Text RemarkText;tb_Remark.ForeColor…

微信小程序(二十六)列表渲染基础核心

注释很详细&#xff0c;直接上代码 上一篇 新增内容&#xff1a; 1.列表渲染基础写法 2.外部索引和自身索引 源码&#xff1a; index.wxml <view class"students"><view class"item"><text>序号</text><text>姓名</text…

字符串中的单词反转【leetcode】

本题选自leetcode图解算法数据结构一书 你在与一位习惯从右往左阅读的朋友发消息&#xff0c;他发出的文字顺序都与正常相反但单词内容正确&#xff0c;为了和他顺利交流你决定写一个转换程序&#xff0c;把他所发的消息 message 转换为正常语序。 注意&#xff1a;输入字符串…

走迷宫-bfs

package Test;import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader;public class Main {static int N 110,hh 0,tt -1,n,m;static int[][] g new int[N][N]; //用来存储迷宫static int[][] d new int[N][N]; //用来存储d[i…

【C/Python】Gtk部件ListStore的使用

一、C语言 在GTK中&#xff0c;Gtk.ListStore是一个实现了Gtk.TreeModel接口的存储模型&#xff0c;用于在如Gtk.TreeView这样的控件中存储数据。以下是一个简单的使用Gtk.ListStore的C语言示例&#xff0c;该示例创建了一个列表&#xff0c;并在图形界面中显示&#xff1a; …

EasyExcel实现Excel文件导入导出

1 EasyExcel简介 EasyExcel是一个基于Java的简单、省内存的读写Excel的开源项目。在尽可能节约内存的情况下支持读写百M的Excel。 github地址: https://github.com/alibaba/easyexcel 官方文档: https://www.yuque.com/easyexcel/doc/easyexcel Excel解析流程图: EasyExcel读取…

TensorFlow2实战-系列教程11:RNN文本分类3

&#x1f9e1;&#x1f49b;&#x1f49a;TensorFlow2实战-系列教程 总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在Jupyter Notebook中进行 本篇文章配套的代码资源已经上传 6、构建训练数据 所有的输入样本必须都是相同shape&#xff08;文本长度&#xff0c;…

视网膜长尾数据

视网膜长尾数据 问题&#xff1a;视网膜疾病分类&#xff0c;解法&#xff1a;深度学习模型问题&#xff1a;数据复杂性处理&#xff0c;解法&#xff1a;多任务框架&#xff08;同时处理多种疾病&#xff09;和少量样本学习&#xff08;提高对罕见疾病的识别&#xff09;问题&…

【Delphi】IDE 工具栏错乱恢复

由于经常会在4K和2K显示器上切换Delphi开发环境(IDE)&#xff0c;导致IDE工具栏错乱&#xff0c;咋样设置都无法恢复&#xff0c;后来看到红鱼儿的博客&#xff0c;说是通过操作注册表的方法&#xff0c;能解决&#xff0c;试了一下&#xff0c;果真好用&#xff0c;非常感谢分…

Java面试架构篇【一览众山小】

文章目录 &#x1f6a1; 简介☀️ Spring&#x1f425; 体系结构&#x1f420; 生命周期 &#x1f341; SpringMVC&#x1f330; 执行流程 &#x1f31c; SpringBoot&#x1f30d; 核心组件&#x1f38d; 自动装配&#x1f391; 3.0升级 &#x1f505; spring Cloud Alibaba&am…

获取依赖aar包的两种方式-在android studio里引入 如:glide

背景&#xff1a;我需要获取aar依赖到内网开发&#xff0c;内网几乎代表没网。 一、 如何需要获取依赖aar包 方式一&#xff1a;在官方的github中下载,耗时不建议 要从开发者网站、GitHub 存储库或其他来源获取 ‘com.github.bumptech.glide:glide:4.12.0’ AAR 包&#xff…

vue使用antv-x6 绘制流程图DAG图(二)

代码&#xff1a; <template><div class"graph-wrap" click.stop"hideFn"><Toobar :graph"graph"></Toobar><!-- 小地图 --><div id"minimap" class"mini-map-container"></div>…

基于SSM的游泳会员管理系统

末尾获取源码作者介绍&#xff1a;大家好&#xff0c;我是墨韵&#xff0c;本人4年开发经验&#xff0c;专注定制项目开发 更多项目&#xff1a;CSDN主页YAML 学如逆水行舟&#xff0c;不进则退。学习如赶路&#xff0c;不能慢一步。 目录 一、项目简介 二、开发技术与环境配…