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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
Material Design-Style-Typography
0.0°
2014-06-28 自译外文 经验/观点 原作者: Google 举报 53944 338 89 23

1.Roboto

Ice Cream Sandwich发布后, Roboto成为了安卓的标准字体。在这次版本迭代中,Roboto稍微进行了修改,以便适应更广泛的平台,修改后的字体稍微变宽、变圆了一点,可读性和明晰感得以提高。

Roboto字体下载见文末


2.标准样式

字体比例和基本样式

推荐使用的字体样式

如果界面中的字体样式和字体尺寸种类过多,版式布局会被破坏。字体比例应该只包含几种有限的字体尺寸,不但彼此之间衔接得当,而且能够适应整体的网格线布局。最基本字体样式中字体比例应该是12,14,16,20,34

上图这些尺寸比例和字体样式能够很好地平衡内容密度和可读性。同时字体尺寸要具备可伸缩性,以便确保大字体尺寸情况下的可达性


使用Display字体样式的案例

 

使用Headline字体样式的案例


在应用App Bar出现的标题,应该采用Title字体样式


使用Title 字体样式的案例


有些场景下,会使用稍大的Subhead字体样式,而不是采用稍小的Body字体样式。在信息需要小块小块呈递的案例中可以采用这种字体样式。


使用Subhead字体样式的案例



使用Body字体样式的案例



使用Body字体样式的案例 



使用Button字体样式的案例

基本色/色彩对照

如果字体颜色和背景色相近或相同很难以阅读。缺少对照感的文本可读性很差。尤其是在深色背景中。

文本的对比率应该维持在最小的4.5:1 (根据亮级计算),这时灵活性最高。. 对比率为7:1时,可读性最佳。

下图的选色考虑到了对比率,同时兼顾非典型情况下的可读性。



大尺寸/动态尺寸调整


如过恰当运用,大尺寸的字体可以让应用充满趣味,区分布局,而且用户可以快速解读内容。

当布局中文本的长度未知时,动态尺寸调整可以解决这个问题。动态尺寸调整会根据空间和字体尺寸的估算,选择合适的字体比例。

这样就避免了截断文本,也不用为了防患于未然而设置最小尺寸的字体。


匹配案例 


 

 

行高

行高要根据样式中不同的尺寸和字重而分别设置,从而提高可读性,合理设置间隔。只有Body,Subhead,Headline,以及稍小的Display样式中采用自动换行。其他字体样式保持单行。


匹配案例

换行规则

应该(上图)

不应该:1.短语 2.凹进 3.凹进 4孤立 5凹进 6.连字符

每行平均字符长度

根据Baymard Institue的建议,我们考虑到了行长度对可读性的影响:

“好的阅读体验,每行大约60个字符。恰当字符数量是提高可读性的关键.

"如果行中文本太长,用户的注意力很难集中在文本上,用户不知道何处开始阅读,何处结束阅读。而且暂停后,在大块文本区域中很难继续阅读。“

"如果航中文本太短,那么用户的眼睛会来回穿梭,打破了阅读节奏感。而且会给给予阅读者压力,可能会出现跳读”

资料来源: Readability: the Optimal Line Length

字距

更新:2014-06-28

下载
收藏

338人已收藏

MartinRGB

http://www.MartinRGB.com

  • 234

    作品

  • 1.7w

    粉丝

  • 413

    关注

  • MartinRGB.com
  • Icon Freebie - Code
  • 实验系列II —— Music App For Tv/Pad
  • Private Trainer 引导页实现
相关标签

    猜你喜欢

      2014-06-28 自译外文 经验/观点 原作者: Google 举报 53944 338 89 23

      Material Design-Style-Typography

      0.0°

      你确定要举报Material Design-Style-Typography

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2014年06月26日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      89
      338
      23

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

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

      登录

      手机号

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

      登录
      第三方账号登录