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

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

关于

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

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

以下是基于 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协同办公软件产品,统一的基础管理平台,实现用户数据统一管理、权限统一分配、身份统一认证。统一规划门户网站群和协同办公平台,将外网信息维护、客户服务、互动交流和日…

uniapp-app使用富文本编辑器editor

使用的是uniapp内置组件的表单组件editor:editor 组件 | uni-app官网 (dcloud.net.cn) 文档上写的也不是特别详细,还以为得npm,但没npm也能用 注意:editor不能封装为组件,否则报错(在其他文章看的&#x…

OpenSIPS3.2保存和恢复sdp

uac opensips uas --->invite with sdp--> --->invite with sdp <---183 with sdp <--- 183 with sdp <--- 200 without sdp <---200 without sdp 这是最近的一个case&#xff0c;需要在路由里面做如下处理…

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

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

BERT问答模型回答问题

在数据准备阶段&#xff0c;确保您有一个高质量的问答对数据集非常重要。这个数据集应该包含问题和对应的答案&#xff0c;以及答案在上下文中的位置&#xff08;起始和结束索引&#xff09;。 预处理数据时&#xff0c;清洗数据、去除无用信息、分词、转换为小写等操作可以帮…

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

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

C++面试:表结构设计规范

目录 表结构设计规范 示例 第一个 第二个 1. 合理选择数据类型 2. 使用主键 3. 避免使用NULL 4. 规范命名 5. 规范化 6. 使用索引优化查询 7. 考虑关系完整性 8. 避免过宽的表 9. 预留扩展性 10. 安全性考虑 表结构设计是数据库设计的重要组成部分&#xff0c;它…

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

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

c# textbox 提示文字

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

R语言基础学习-01 (此语言用途小众 用于数学 生物领域 基因分析)

R 语言特点 R 语言环境软件属于 GNU 开源软件&#xff0c;兼容性好、使用免费语法十分有利于复杂的数学运算数据类型丰富&#xff0c;包括向量、矩阵、因子、数据集等常用数据结构代码风格好&#xff0c;可读性强 简单 虽然 R 主要用于统计分析或者开发统计相关的软件&#x…

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

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

JUC并发编程

Java 并发编程&#xff08;Java Concurrency&#xff09;是指在 Java 程序中同时进行多个任务的一种编程方式。Java 提供了一套丰富的并发编程工具&#xff0c;其中包括 Java 并发包&#xff08;Java Concurrency Utilities&#xff0c;简称 JUC&#xff09;&#xff0c;用于简…

Unity2D_单向平台

类似空洞骑士 马里奥等各种2D游戏&#xff0c;其中都存在单向平台。 单向平台&#xff1a;角色可以从下穿过平台停在平台上&#xff0c;也可以从平台上按下或往下跳穿过平台 这里用Unity实现角色能跳上平台&#xff0c;也能按’下’穿过平台 平台需要使用Rigidbody2D Collid…

jQuery html的使用

jquery中的html方法可以获取和设置标签的html内容 var $div $("div")// 获取标签div的html内容alert($div.html())console.log($div.html()) .html: 设置标签的html内容&#xff0c;之前的内容会清除&#xff08;只会显示 CSDN&#xff09; // 设置标签的html内容&…

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

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

java学习笔记:java所有关键字汇总、解析及应用

文章目录 一、java的所有关键字汇总、解析及应用1. abstract2. assert3. boolean4. break5. byte6. case7. catch8. char9. class10. const11. continue12. default13. do14. double15. else16. enum17. extends18. final19. finally20. float21. for22. goto23. if24. impleme…

走迷宫-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…