首页 > 其他分享 >移动端设计规范 - 文字使用规范

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

时间:2023-03-27 23:35:13浏览次数:36  
标签:文字 10pt 文字大小 规范 16pt 使用 设计规范 设计 移动

1200_670 2.png

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

关于

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

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

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

背景.png

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

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

  • 内容区域 大标题文字一般在18-16pt,一些特殊比较大的标题我习惯用24pt大小。 小标题文字一般在16-14pt,我一般统一用16pt。 正文阅读性文字一般在14-12pt,我一般大段的文字内容习惯统一都用14pt,有些app在针对特定人群时,有用到16pt的情况。 辅助性文字在12-10pt,最小不低于10pt。

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


订阅号「设计师工作日常」, 求关注!!!

标签:文字,10pt,文字大小,规范,16pt,使用,设计规范,设计,移动
From: https://blog.51cto.com/liujueyi/6153324

相关文章

  • 推出浏览器即可解决Facebook移动化问题?
    编者按:本文作者为HamishMcKenzie,他称Facebook要解决移动化问题,最好的办法是将市场已有的各个浏览器的优点结合起来推出自己的移动浏览器。让我们来看看作者的YY是否有......
  • Chris Dixon:四类移动应用具备投资价值
    编者按:本文作者ChrisDixon身兼创业者(Hunch联合创始人、FounderCollective联合创始人)和投资人(多家科技企业,包括Skype、Foursquare、Kickstarter等的早期个人投资者)双重角......
  • Facebook移动平台陷入窘境:肥了苹果饿了自己
    Facebook最近发布它自己的 APPCenterFacebook对iOS平台的贡献而Facebook今天在旧金山刚刚发布了其把数据导向iOS平台的报告。因为在iOS和Android上安装了FacebookAppC......
  • Fireox OS 杀入移动操作系统 主打HTML5
    HTML5的前景无疑是诱人的,一句“Writeonce,runanywhere”就可以秒杀一切。最近HTML5移动Apps呼声越来越大,整体的印象就是HTML5为开发者提供了一个跨平台的移动......
  • 万事达卡与德国电信旗下T-Mobile合作在欧洲推出NFC移动支付
    NFC钱包解决方案,不久之后再推广到德国。不过目前美国市场还不在考虑范围内。 德国电信在欧洲拥有9300万移动电话用户,在全世界范围内也拥有超过1.29亿用户。依靠德国电信......
  • MSN移动广告平台的“醉翁之意”
    【编者按】MSN移动广告平台的发布,是进军移动广告?还是另有图谋?本文由微势Winseek.hk团队供稿,微势是专注于WindowsPhone生态系统的科技博客,相信他们的观点会让你更加了解微......
  • 由粗犷式推广到精细化运营的移动游戏市场
    如何看待一款游戏的推广和运营?单单只统计DAU、MAU这些指标是否合适成为考量游戏运营的KPI?对于大部分开发者仍然只在乎“下载量”及“激活量”所造成的几乎“有推广、无运......
  • BI Intelligence:移动设备如何改变我们的生活方式
    大概10年前,我们用手机只是打打电话,偶尔发发短信,只有像商务人士等高级用户才会通过手机收发电子邮件或者偶尔上网查查资料。但是随着智能手机和平板电脑的快速普及,我们使用......
  • IDC机房设计规范
    互联网数据中心(IDC)从规划建设、运行维护到经营管理都是一项复杂的系统工程,涉及多个行业,众多子系统和专业。传统数据中心能源消耗量大,能源利用效率低。因此,绿色数据中心(Green......
  • 带有可旋转摄像头的移动小车
    带有可旋转摄像头的移动小车成果图step1:新建工作空间mkdir-pcatkin_ws/srccdcatkin_wscatkin_makestep2:建立工作包右键src,选择CreateCatkinPackage......