恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
App界面设计规范-字体规范
0.0°
2017-04-05 原创文章 规范/资料 举报 47522 137 210 4

通过对不同类型的app进行总结,总结出app的字体规范。

一、字体选择

1.IOS:苹果ios 9系统开始,系统最新的默认中文字体是:苹方。英文字体是: San Francisco

Image title

2.Android:英文字体:Roboto,中文字体:Noto

Image title


二、案例分析

1.以今日头条界面为例,导航主标题字号为40px,正文标题为36px,辅助性说明文字为24px,小字(视频长短,标题栏按钮名)为20px,头像名为28px。字体大小代表的层级关系一目了然。


2.正文部分,导航栏标题文字为36px,内容标题为48px,正文为36px,小字为22-20px。

Image title

(因app性质不同,今日头条作为阅读类型的app,会更注重文本的阅读便捷性。所以字号选择上会偏大一些。)


3.再以微信为例,导航栏标题文字为36px,内容标题文字为34px,内容为28px,辅助性说明文字为24px。

Image title


4.最后以豆果美食为例,豆果美食是我认为界面阅读很漂亮的一个app。文字阅读给人一种很精致舒服的感觉。同阅读类型的新闻app和工具类型的app在字号选择上相比,它的文字选择的要稍小一些。如导航栏的字号为30px,页面最大字号为34px(分类标题),其次是32px,28px,24px,20px

Image title

这是豆果美食的内容详情页,在正文标题用到了36px,正文内容为32px,次要文字为28px,其次是24px,22px,20px。

Image title


三、总结

Image title

总结如图,选择字体大小时应根据app的性质,风格,定位来进行选择,应通过文字大小表现出内容的轻重,层级划分,做到层级关系明显。除了对字体进行字号大小的区别,还可对文字进行样式(加重字体)和颜色的区分。


(原创分享,喜欢的小伙伴儿给我点个赞吧~O(∩_∩)O谢谢)








更新:2017-04-05

收藏

137人已收藏

青柠夏至

合作交流+v: lemon_sumer06

  • 46

    作品

  • 89

    粉丝

  • 14

    关注

  • OA 移动办公 APP 2.0 UI设计
  • 浅色系数据可视化
  • 邮箱官网改版
  • 跨境电商可视化大屏

    猜你喜欢

      2017-04-05 原创文章 规范/资料 举报 47522 137 210 4

      App界面设计规范-字体规范

      0.0°

      你确定要举报App界面设计规范-字体规范

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年04月05日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      210
      137
      4

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录