Android 系统字体及排版应用规范

用户头像
杭州/设计爱好者/10年前/6006浏览
Android 系统字体及排版应用规范
用户头像
李洋

附件下载 RobotoTTF

自从 Ice Cream Sandwich 发布以来,Roboto 都是 Android 系统的默认字体集。在这个版本中,将 Roboto 做了进一步全面优化,以适配更多平台。宽度和圆度都轻微提高,从而提升了清晰度,并且看起来更加愉悦。

53c3568e0cad6ac725bb5cd8de90.jpg


字体排版的缩放和基本样式(Typographic Scale & Basic Styles)

同时使用过多的字体尺寸和样式可以很轻易的毁掉布局。字体排版的缩放是包含了有限个字体尺寸的集合,并且他们能够良好的适应布局结构。最基本的样式集合就是基于 12、14、16、20 和 34 号的字体排版缩放。

这些尺寸和样式在经典应用场合中让内容密度和阅读舒适度取得平衡。字体尺寸是通过 SP(可缩放像素数,scaleable pixels)指定的,让大尺寸字体获得更好的可接受度


f810568e0d7c32f8754c801c7ed8.jpg


基本色/色彩对比度(Basic colors/Color contrast)

最基本的常识是,相同颜色的背景和文字是很难阅读的。但有些人不知道的是,带有过强对比度的文本会有些炫目,同样难以阅读。这一点在深色背景下尤其明显。

要获得良好的辨识度,文本应当满足一个最低的对比度,也就是 4.5:1(依据明度计算)。7:1 的对比度是最适合阅读的。

这些色彩的组合同样要考虑到某些非典型用户对于对比度的不同反应。


3b13568e0db96ac725bb5cdadc8d.jpg


行高(Line Height)

行高是通过每个样式各自的尺寸和粗细决定的,以获得良好的可读性和合适的间距。只有“主体”、“次要标题”、“大纲”等类似的样式中才允许使用自动换行。其它所有样式应当以单行形式出现。


7b6b568e0de76ac725bb5cfa9747.jpg

样例对比0a0c568e0e0132f8754c8030373f.jpg


每行长度包含的字符(Characters per line lengths)

可读性和行长度参考了来自 Baymard Institute 的建议:

“要得到良好的阅读效果,每行应当包含 60 个字符左右。每行所包含的字符数量是决定阅读舒适度的关键因素。”

“过宽:如果每行文本过多,用户的眼睛将难以找到在文本上对焦。这是因为过长的文字导致用户难以判断一行的起始点,甚至在大段文字中出现读错行的现象。”

“过窄:如果每行文本过少,会导致眼睛来回扫视过于频繁,破坏阅读的节奏。过短的内容还会给人压力,导致用户完成本行阅读前过早跳转到下一行阅读(因此会错过潜在的重要信息)。”


字间距(Tracking and kerning)


dd9a568e0e5932f8754c80ab5e01.jpg


附件:google-android_roboto字体

34
阅读原文
|
举报
|
91
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
户外旅行飞机情侣假日出行
UI通用设计素材1
智能家居中心 简约 UI设计组件库
手表表盘UI系列
【新年UI图标】钱包icon
新能源APP应用UIKit
UI界面 组件
APP/小程序商业项目UI模板|99个高保真UI+79个原型
钱包ui模板
【新年UI图标】秒杀icon
科技医疗透明柜UI界面设计
【新年UI图标】礼物/活动icon
【新年UI图标】积分icon
Security Camera UI kit
盲盒APP UI设计
【新年UI图标】旅行icon
【新年UI图标】活动icon
UI 登录界面设计模板包
高级表盘系列UI源文件
高级感金属拟物 UI设计组件库
【新年UI图标】汽车icon
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
3D卡通UI界面图标可爱插画免扣素
你可能喜欢
大家都在看
登录注册